Improve Combobox trigger styles

.changeset/young-points-cry.md

@@ -0,0 +1,5 @@
+---
+"@omnidev/sigil": patch
+---
+
+Improve `Combobox` trigger styles

.eslintrc

@@ -50,6 +50,8 @@
   "rules": {
     // allow non-null assertion operators
     "@typescript-eslint/no-non-null-assertion": "off",
+    // allow empty object types (e.g. for interfaces)
+    "@typescript-eslint/no-empty-object-type": "off",
     "@typescript-eslint/ban-ts-comment": [
       "error",
       // allow TypeScript bypass directives if a description is specified
@@ -67,6 +69,13 @@
         "argsIgnorePattern": "^_"
       }
     ],
+    "@typescript-eslint/no-unused-expressions": [
+      "error",
+      {
+        "allowShortCircuit": true,
+        "allowTernary": true
+      }
+    ],
     // suppress errors for missing React import (prefer modern JSX transform)
     "react/react-in-jsx-scope": "off",
     // prevent multiple components per file

.husky/commit-msg

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 bun commitlint --edit $1

.husky/pre-commit

@@ -1,4 +1 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 bun lint-staged

package.json

@@ -40,7 +40,7 @@
     "studio:build": "panda codegen && panda studio --build",
     "changeset": "changeset",
     "release": "bun run build && changeset publish",
-    "prepare": "husky install && panda codegen --silent"
+    "prepare": "husky && panda codegen --silent"
   },
   "peerDependencies": {
     "@pandacss/dev": ">0.40.0",
@@ -49,69 +49,69 @@
     "react-dom": "^18.3.0"
   },
   "devDependencies": {
-    "@ark-ui/anatomy": "^3.4.0",
-    "@ark-ui/react": "^3.4.0",
+    "@ark-ui/anatomy": "^3.5.0",
+    "@ark-ui/react": "^3.6.2",
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.6",
-    "@commitlint/cli": "^19.3.0",
+    "@changesets/cli": "^2.27.7",
+    "@commitlint/cli": "^19.4.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@commitlint/types": "^19.0.3",
     "@omnidev/knit": "^0.1.2",
-    "@pandacss/dev": "0.41.0",
-    "@pandacss/types": "0.41.0",
-    "@storybook/addon-a11y": "^8.1.10",
+    "@pandacss/dev": "0.45.0",
+    "@pandacss/types": "0.45.0",
+    "@storybook/addon-a11y": "^8.2.8",
     "@storybook/addon-coverage": "^1.0.4",
-    "@storybook/addon-docs": "^8.1.10",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-interactions": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
-    "@storybook/addon-storysource": "^8.1.10",
-    "@storybook/blocks": "^8.1.10",
-    "@storybook/manager-api": "^8.1.10",
-    "@storybook/react": "^8.1.10",
-    "@storybook/react-vite": "^8.1.10",
-    "@storybook/test-runner": "^0.19.0",
-    "@storybook/theming": "^8.1.10",
-    "@testing-library/dom": "^10.2.0",
-    "@turbo/gen": "^2.0.5",
-    "@types/node": "^20.14.9",
+    "@storybook/addon-docs": "^8.2.8",
+    "@storybook/addon-essentials": "^8.2.8",
+    "@storybook/addon-interactions": "^8.2.8",
+    "@storybook/addon-links": "^8.2.8",
+    "@storybook/addon-storysource": "^8.2.8",
+    "@storybook/blocks": "^8.2.8",
+    "@storybook/manager-api": "^8.2.8",
+    "@storybook/react": "^8.2.8",
+    "@storybook/react-vite": "^8.2.8",
+    "@storybook/test-runner": "^0.19.1",
+    "@storybook/theming": "^8.2.8",
+    "@testing-library/dom": "^10.4.0",
+    "@turbo/gen": "^2.0.12",
+    "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@typescript-eslint/eslint-plugin": "^8.0.1",
+    "@typescript-eslint/parser": "^8.0.1",
     "concurrently": "^8.2.2",
     "dotenv-cli": "^7.4.2",
     "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": "^28.8.0",
     "eslint-plugin-jest-dom": "^5.4.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-testing-library": "^6.3.0",
     "eslint-plugin-typescript-sort-keys": "^3.2.0",
-    "eslint-plugin-unused-imports": "^4.0.0",
+    "eslint-plugin-unused-imports": "^4.1.3",
     "http-server": "^14.1.1",
-    "husky": "^9.0.11",
+    "husky": "^9.1.4",
     "jest": "^29.7.0",
-    "knip": "^5.23.0",
-    "lint-staged": "^15.2.7",
-    "next": "^14.2.4",
-    "prettier": "^3.3.2",
+    "knip": "^5.27.2",
+    "lint-staged": "^15.2.8",
+    "next": "^14.2.5",
+    "prettier": "^3.3.3",
     "radash": "^12.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",
-    "storybook": "^8.1.10",
+    "storybook": "^8.2.8",
     "storybook-dark-mode": "^4.0.2",
-    "ts-pattern": "^5.2.0",
-    "tsup": "^8.1.0",
-    "turbo": "^2.0.5",
-    "typescript": "^5.5.2",
+    "ts-pattern": "^5.3.1",
+    "tsup": "^8.2.4",
+    "turbo": "^2.0.12",
+    "typescript": "^5.5.4",
     "usehooks-ts": "^3.1.0",
-    "vite": "^5.3.1",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite": "^5.4.0",
+    "vite-tsconfig-paths": "^5.0.1"
   }
 }

src/components/core/Combobox/Combobox.tsx

@@ -18,6 +18,8 @@ import type { AssignJSXStyleProps } from "lib/types";
 
 const { withProvider, withContext } = createStyleContext(combobox);
 
+// TODO normalize styles with `Select`, e.g. make sure trigger has same padding
+
 // https://github.com/chakra-ui/ark/issues/1740#issuecomment-1817255471
 type AugmentedComboboxRoot = <T extends ArkCombobox.CollectionItem>(
   props: ArkCombobox.RootProps<T>,
@@ -226,14 +228,14 @@ const Combobox = ({
 
         {displayClearTrigger && (
           <ComboboxClearTrigger asChild {...clearTriggerProps}>
-            <Button variant="ghost" size="xs" aria-label="Clear combobox">
+            <Button variant="ghost" size="xs" p={0} aria-label="Clear combobox">
               <BiX />
             </Button>
           </ComboboxClearTrigger>
         )}
 
         <ComboboxTrigger asChild {...triggerProps}>
-          <Button variant="ghost" size="xs" aria-label="Open combobox">
+          <Button variant="ghost" size="xs" p={0} aria-label="Open combobox">
             <BiExpandVertical />
           </Button>
         </ComboboxTrigger>

src/components/core/Link/Link.stories.tsx

@@ -60,7 +60,7 @@ export const AsChildElement: Story = {
   ),
 };
 
-const sizes = Object.keys(text.variants!.size) as TextVariant["size"][];
+const sizes = Object.keys(text.variants!["size"]) as TextVariant["size"][];
 
 // TODO table like avatar stories
 

src/lib/theme/extensions/slotRecipes/combobox.slotRecipe.ts

@@ -24,17 +24,19 @@ const combobox = defineSlotRecipe({
     },
     clearTrigger: {
       color: "foreground.muted",
+      bgColor: "background.default",
       position: "absolute",
-      right: 9,
-      bottom: 0,
-      top: 0,
+      right: 7,
+      bottom: 1,
+      top: 1,
     },
     trigger: {
       color: "foreground.muted",
+      bgColor: "background.default",
       position: "absolute",
-      right: 0,
-      bottom: 0,
-      top: 0,
+      right: 1,
+      bottom: 1,
+      top: 1,
     },
     content: {
       bgColor: "background.default",
@@ -93,6 +95,7 @@ const combobox = defineSlotRecipe({
     size: "md",
   },
   variants: {
+    // TODO fix sizes not working
     size: {
       sm: {
         content: { p: 0.5, gap: 1 },
@@ -108,7 +111,6 @@ const combobox = defineSlotRecipe({
           py: 1.5,
         },
         label: { textStyle: "sm" },
-        trigger: { right: 2.5 },
       },
       md: {
         content: { p: 1, gap: 1 },
@@ -124,7 +126,6 @@ const combobox = defineSlotRecipe({
           py: 1.5,
         },
         label: { textStyle: "sm" },
-        trigger: { right: 3 },
       },
       lg: {
         content: { p: 1.5, gap: 1 },
@@ -140,7 +141,6 @@ const combobox = defineSlotRecipe({
           py: 1.5,
         },
         label: { textStyle: "sm" },
-        trigger: { right: 3.5 },
       },
     },
   },