Fix Combobox input value change composition

.changeset/cyan-ears-mix.md

@@ -0,0 +1,5 @@
+---
+"@omnidev/sigil": patch
+---
+
+Remove default placeholder on `Select` and `Combobox`

.changeset/loud-kings-wave.md

@@ -0,0 +1,5 @@
+---
+"@omnidev/sigil": patch
+---
+
+Fix Panda style props not being injected into component props

.changeset/unlucky-frogs-float.md

@@ -0,0 +1,5 @@
+---
+"@omnidev/sigil": patch
+---
+
+Fix `Combobox` input value change handler composition. Previously, passing `onInputValueChange` would override the built-in handler, causing filtering to not work correctly. This update combines the logic of the built-in handler and any passed in handler.

knip.config.ts

@@ -0,0 +1,33 @@
+import type { KnipConfig } from "knip";
+
+// TODO integrate `knip` into CI
+
+/**
+ * Knip configuration.
+ * @see https://knip.dev/overview/configuration
+ */
+const knipConfig: KnipConfig = {
+  ignoreDependencies: [
+    // used for local packaging
+    "@omnidev/knit",
+    // used in MDX
+    "@storybook/addon-docs",
+    // used in MDX
+    "@storybook/blocks",
+    // used in Storybook test CI
+    "http-server",
+  ],
+  ignore: [
+    "panda.config.ts",
+    "*.config.*",
+    ".github/**",
+    "examples/**",
+    // `ComponentVariants` marked as unused, but it is required for downstream type mapping
+    "src/lib/util/createStyleContext.tsx",
+    // theme extensions are used in barrels
+    "src/lib/theme/extensions/**",
+    "src/lib/config/env.config.ts",
+  ],
+};
+
+export default knipConfig;

package.json

@@ -55,7 +55,6 @@
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@commitlint/types": "^19.0.3",
-    "@jest/globals": "^29.7.0",
     "@omnidev/knit": "^0.1.2",
     "@pandacss/dev": "0.41.0",
     "@pandacss/types": "0.41.0",
@@ -67,47 +66,24 @@
     "@storybook/addon-links": "^8.1.10",
     "@storybook/addon-storysource": "^8.1.10",
     "@storybook/blocks": "^8.1.10",
-    "@storybook/components": "^8.1.10",
     "@storybook/manager-api": "^8.1.10",
     "@storybook/react": "^8.1.10",
     "@storybook/react-vite": "^8.1.10",
-    "@storybook/test-runner": "^0.18.2",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/test-runner": "^0.19.0",
     "@storybook/theming": "^8.1.10",
-    "@storybook/types": "^8.1.10",
     "@testing-library/dom": "^10.1.0",
-    "@testing-library/jest-dom": "^6.4.6",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.14.7",
+    "@types/node": "^20.14.8",
     "@types/react": "^18.3.3",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
-    "@zag-js/accordion": "^0.57.0",
-    "@zag-js/carousel": "^0.57.0",
-    "@zag-js/color-picker": "^0.57.0",
-    "@zag-js/color-utils": "^0.57.0",
-    "@zag-js/combobox": "^0.57.0",
-    "@zag-js/date-picker": "^0.57.0",
-    "@zag-js/menu": "^0.57.0",
-    "@zag-js/pagination": "^0.57.0",
-    "@zag-js/radio-group": "^0.57.0",
-    "@zag-js/rating-group": "^0.57.0",
-    "@zag-js/rect-utils": "0.57.0",
-    "@zag-js/select": "^0.57.0",
-    "@zag-js/splitter": "^0.57.0",
-    "@zag-js/tabs": "0.57.0",
-    "@zag-js/toast": "^0.57.0",
-    "@zag-js/tooltip": "^0.57.0",
     "concurrently": "^8.2.2",
     "dotenv-cli": "^7.4.2",
-    "eslint": "8.52.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-jest-dom": "^5.4.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -118,25 +94,21 @@
     "http-server": "^14.1.1",
     "husky": "^9.0.11",
     "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jsonfile": "^6.1.0",
+    "knip": "^5.22.2",
     "lint-staged": "^15.2.7",
     "next": "^14.2.4",
-    "playwright": "^1.44.1",
     "prettier": "^3.3.2",
     "radash": "^12.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
     "storybook": "^8.1.10",
     "storybook-dark-mode": "^4.0.2",
-    "ts-node": "^10.9.2",
     "ts-pattern": "^5.2.0",
     "tsup": "^8.1.0",
     "typescript": "^5.5.2",
     "usehooks-ts": "^3.1.0",
     "vite": "^5.3.1",
-    "vite-tsconfig-paths": "^4.3.2",
-    "wait-on": "^7.2.0"
+    "vite-tsconfig-paths": "^4.3.2"
   }
 }

src/components/core/Accordion/Accordion.tsx

@@ -5,42 +5,42 @@ import { styled } from "generated/panda/jsx";
 import { accordion } from "generated/panda/recipes";
 import { createStyleContext } from "lib/util";
 
-import type { AccordionItemProps as ArkAccordionItemProps } from "@ark-ui/react/accordion";
-import type { ComponentProps, ReactNode } from "react";
+import type { AssignJSXStyleProps } from "lib/types";
+import type { ReactNode } from "react";
 
 const { withProvider, withContext } = createStyleContext(accordion);
 
 export const AccordionRoot = withProvider(styled(ArkAccordion.Root), "root");
 export interface AccordionRootProps
-  extends ComponentProps<typeof AccordionRoot> {}
+  extends AssignJSXStyleProps<ArkAccordion.RootProps> {}
 
 export const AccordionItem = withContext(styled(ArkAccordion.Item), "item");
 export interface AccordionItemProps
-  extends ComponentProps<typeof AccordionItem> {}
+  extends AssignJSXStyleProps<ArkAccordion.ItemProps> {}
 
 export const AccordionItemContent = withContext(
   styled(ArkAccordion.ItemContent),
   "itemContent",
 );
 export interface AccordionItemContentProps
-  extends ComponentProps<typeof AccordionItemContent> {}
+  extends AssignJSXStyleProps<ArkAccordion.ItemContentProps> {}
 
 export const AccordionItemIndicator = withContext(
   styled(ArkAccordion.ItemIndicator),
   "itemIndicator",
 );
 export interface AccordionItemIndicatorProps
-  extends ComponentProps<typeof AccordionItemIndicator> {}
+  extends AssignJSXStyleProps<ArkAccordion.ItemIndicatorProps> {}
 
 export const AccordionItemTrigger = withContext(
   styled(ArkAccordion.ItemTrigger),
   "itemTrigger",
 );
 export interface AccordionItemTriggerProps
-  extends ComponentProps<typeof AccordionItemTrigger> {}
+  extends AssignJSXStyleProps<ArkAccordion.ItemTriggerProps> {}
 
 export interface AccordionProps extends AccordionRootProps {
-  items: (Omit<ArkAccordionItemProps, "title" | "value"> & {
+  items: (Omit<ArkAccordion.ItemProps, "title" | "value"> & {
     /** Title of item. */
     title: ReactNode;
     /** Content to display when item is open. */

src/components/core/Alert/Alert.tsx

@@ -8,33 +8,38 @@ import { styled } from "generated/panda/jsx";
 import { alert } from "generated/panda/recipes";
 import { createStyleContext } from "lib/util";
 
-import type { ComponentProps, ReactNode } from "react";
+import type { ComponentProps } from "generated/panda/types";
+import type { AssignJSXStyleProps } from "lib/types";
+import type { ReactNode } from "react";
 
 const { withProvider, withContext } = createStyleContext(alert);
 
 export const AlertRoot = withProvider(styled(ark.div), "root");
-export interface AlertRootProps extends ComponentProps<typeof AlertRoot> {}
+export interface AlertRootProps
+  extends AssignJSXStyleProps<ComponentProps<typeof AlertRoot>> {}
 
 export const AlertContent = withContext(styled(ark.div), "content");
 export interface AlertContentProps
-  extends ComponentProps<typeof AlertContent> {}
+  extends AssignJSXStyleProps<ComponentProps<typeof AlertContent>> {}
 
 export const AlertDescription = withContext(styled(ark.div), "description");
 export interface AlertDescriptionProps
-  extends ComponentProps<typeof AlertDescription> {}
+  extends AssignJSXStyleProps<ComponentProps<typeof AlertDescription>> {}
 
 export const AlertIcon = withContext(styled(ark.svg), "icon");
-export interface AlertIconProps extends ComponentProps<typeof AlertIcon> {}
+export interface AlertIconProps
+  extends AssignJSXStyleProps<ComponentProps<typeof AlertIcon>> {}
 
 export const AlertTitle = withContext(styled(ark.h5), "title");
-export interface AlertTitleProps extends ComponentProps<typeof AlertTitle> {}
+export interface AlertTitleProps
+  extends AssignJSXStyleProps<ComponentProps<typeof AlertTitle>> {}
 
 export interface AlertProps extends AlertRootProps {
   description: ReactNode;
   icon?: ReactNode;
-  contentProps?: ComponentProps<typeof AlertContent>;
-  titleProps?: ComponentProps<typeof AlertTitle>;
-  descriptionProps?: ComponentProps<typeof AlertDescription>;
+  contentProps?: AlertContentProps;
+  titleProps?: AlertTitleProps;
+  descriptionProps?: AlertDescriptionProps;
 }
 
 // TODO better styles (mainly spacing) for if just description or title is passed

src/components/core/Avatar/Avatar.tsx

@@ -5,22 +5,25 @@ import { styled } from "generated/panda/jsx";
 import { avatar } from "generated/panda/recipes";
 import { createStyleContext } from "lib/util";
 
-import type { ComponentProps, ReactNode } from "react";
+import type { AssignJSXStyleProps } from "lib/types";
+import type { ReactNode } from "react";
 
 const { withProvider, withContext } = createStyleContext(avatar);
 
 export const AvatarRoot = withProvider(styled(ArkAvatar.Root), "root");
-export interface AvatarRootProps extends ComponentProps<typeof AvatarRoot> {}
+export interface AvatarRootProps
+  extends AssignJSXStyleProps<ArkAvatar.RootProps> {}
 
 export const AvatarFallback = withContext(
   styled(ArkAvatar.Fallback),
   "fallback",
 );
 export interface AvatarFallbackProps
-  extends ComponentProps<typeof AvatarFallback> {}
+  extends AssignJSXStyleProps<ArkAvatar.FallbackProps> {}
 
 export const AvatarImage = withContext(styled(ArkAvatar.Image), "image");
-export interface AvatarImageProps extends ComponentProps<typeof AvatarImage> {}
+export interface AvatarImageProps
+  extends AssignJSXStyleProps<ArkAvatar.ImageProps> {}
 
 // TODO unit test this, use JSDoc examples below as basepoint and match for e.g. names with diacritics
 /**

src/components/core/Badge/Badge.tsx

@@ -3,9 +3,11 @@ import { ark } from "@ark-ui/react";
 import { styled } from "generated/panda/jsx";
 import { badge } from "generated/panda/recipes";
 
-import type { ComponentProps } from "react";
+import type { ComponentProps } from "generated/panda/types";
+import type { AssignJSXStyleProps } from "lib/types";
 
-export interface BadgeProps extends ComponentProps<typeof Badge> {}
+export interface BadgeProps
+  extends AssignJSXStyleProps<ComponentProps<typeof Badge>> {}
 
 /**
  * Badge.

src/components/core/Button/Button.tsx

@@ -4,8 +4,10 @@ import { styled } from "generated/panda/jsx";
 import { button } from "generated/panda/recipes";
 
 import type { ComponentProps } from "generated/panda/types";
+import type { AssignJSXStyleProps } from "lib/types";
 
-export interface ButtonProps extends ComponentProps<typeof Button> {}
+export interface ButtonProps
+  extends AssignJSXStyleProps<ComponentProps<typeof Button>> {}
 
 /**
  * Interactive action button.