animareflection · coopbri · Jun 20, 2024 · Jun 21, 2024 · Jun 21, 2024 · Jun 21, 2024
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -16,8 +16,8 @@ const storybookConfig: StorybookConfig = {
   },
   stories: [
     // NB: intentional pattern duplication (with capture group below) to ensure introduction page is loaded first
-    "../src/stories/introduction.stories.mdx",
-    "../src/**/*.stories.@(ts|tsx|mdx)",
+    "../src/stories/introduction.mdx",
+    "../src/**/*.stories.tsx",
   ],
   // inject CSS into Storybook UI
   managerHead: (head) => `

diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -54,72 +54,72 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@ark-ui/anatomy": "^1.3.0",
-    "@ark-ui/react": "1.2",
+    "@ark-ui/anatomy": "^3.3.1",
+    "@ark-ui/react": "3.3",
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.1",
-    "@commitlint/cli": "^18.6.0",
-    "@commitlint/config-conventional": "^18.6.0",
-    "@commitlint/types": "^18.6.0",
+    "@changesets/cli": "^2.27.5",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/config-conventional": "^19.2.2",
+    "@commitlint/types": "^19.0.3",
     "@omnidev/knit": "^0.1.2",
-    "@pandacss/dev": "^0.28.0",
-    "@pandacss/types": "^0.28.0",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-coverage": "^1.0.0",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/builder-webpack5": "^7.6.10",
+    "@pandacss/dev": "^0.41.0",
+    "@pandacss/types": "^0.41.0",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-coverage": "^1.0.4",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/blocks": "^8.1.10",
+    "@storybook/builder-webpack5": "^8.1.10",
     "@storybook/jest": "^0.2.3",
-    "@storybook/manager-api": "^7.6.10",
-    "@storybook/nextjs": "^7.6.10",
-    "@storybook/react": "^7.6.10",
+    "@storybook/manager-api": "^8.1.10",
+    "@storybook/nextjs": "^8.1.10",
+    "@storybook/react": "^8.1.10",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/test-runner": "^0.16.0",
+    "@storybook/test-runner": "^0.18.2",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.10",
-    "@storybook/types": "^7.6.10",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/react": "^14.1.2",
+    "@storybook/theming": "^8.1.10",
+    "@storybook/types": "^8.1.10",
+    "@testing-library/dom": "^10.1.0",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/node": "^20.11.10",
-    "@types/react": "^18.2.48",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
+    "@types/node": "^20.14.6",
+    "@types/react": "^18.3.3",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
     "concurrently": "^8.2.2",
-    "eslint": "^8.56.0",
+    "eslint": "^9.5.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "eslint-plugin-typescript-sort-keys": "^3.1.0",
-    "eslint-plugin-unused-imports": "^3.0.0",
-    "framer-motion": "^11.0.3",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-testing-library": "^6.2.2",
+    "eslint-plugin-typescript-sort-keys": "^3.2.0",
+    "eslint-plugin-unused-imports": "^4.0.0",
+    "framer-motion": "^11.2.11",
     "http-server": "^14.1.1",
-    "husky": "^9.0.7",
+    "husky": "^9.0.11",
     "jsonfile": "^6.1.0",
-    "lint-staged": "^15.2.0",
-    "next": "^14.1.0",
-    "postcss": "^8.4.33",
-    "prettier": "^3.2.4",
-    "radash": "^11.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.0.1",
-    "sonner": "^1.3.1",
-    "storybook": "^7.6.10",
-    "storybook-dark-mode": "^3.0.3",
+    "lint-staged": "^15.2.7",
+    "next": "^14.2.4",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.2",
+    "radash": "^12.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.2.1",
+    "sonner": "^1.5.0",
+    "storybook": "^8.1.10",
+    "storybook-dark-mode": "^4.0.2",
     "ts-node": "^10.9.2",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3",
-    "usehooks-ts": "^2.10.0",
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.2",
+    "usehooks-ts": "^3.1.0",
     "wait-on": "^7.2.0",
-    "webpack": "^5.90.0"
+    "webpack": "^5.92.1"
   }
 }
diff --git a/src/components/core/Accordion/Accordion.tsx b/src/components/core/Accordion/Accordion.tsx
@@ -1,3 +1,4 @@
+import { AccordionContext } from "@ark-ui/react";
 import {
   FiChevronDown as ChevronDownIcon,
   FiMinus as MinusIcon,
@@ -39,33 +40,44 @@ const Accordion = ({ items, plusMinus, ...rest }: Props) => {
   if (!isClient) return null;
 
   return (
-    <PrimitiveAccordion present collapsible multiple {...rest}>
+    <PrimitiveAccordion
+      // present
+      collapsible
+      multiple
+      {...rest}
+    >
       {items.map(({ id, value, triggerLabel, content, icon }) => (
         <PrimitiveAccordionItem key={id} value={value}>
-          {({ isOpen }) => (
-            <>
-              <PrimitiveAccordionItemTrigger>
-                {triggerLabel ?? value}
-                <PrimitiveAccordionItemIndicator>
-                  <Icon color="inherit">
-                    {plusMinus ? (
-                      isOpen ? (
-                        <MinusIcon />
+          <PrimitiveAccordionItemTrigger>
+            {triggerLabel ?? value}
+
+            <PrimitiveAccordionItemIndicator>
+              <AccordionContext>
+                {({ value }) => (
+                  <>
+                    <Icon color="inherit">
+                      {plusMinus ? (
+                        value ? (
+                          <MinusIcon />
+                        ) : (
+                          <PlusIcon />
+                        )
                       ) : (
-                        <PlusIcon />
-                      )
-                    ) : (
-                      icon ?? <ChevronDownIcon />
-                    )}
-                  </Icon>
-                </PrimitiveAccordionItemIndicator>
-              </PrimitiveAccordionItemTrigger>
-              <PrimitiveAccordionItemContent>
-                {/* NB: div wrapper enforces body content to collapse properly if, for example, a string is passed */}
-                <div>{content}</div>
-              </PrimitiveAccordionItemContent>
-            </>
-          )}
+                        icon ?? <ChevronDownIcon />
+                      )}
+                    </Icon>
+
+                    {value}
+                  </>
+                )}
+              </AccordionContext>
+            </PrimitiveAccordionItemIndicator>
+          </PrimitiveAccordionItemTrigger>
+
+          <PrimitiveAccordionItemContent>
+            {/* NB: div wrapper enforces body content to collapse properly if, for example, a string is passed */}
+            <div>{content}</div>
+          </PrimitiveAccordionItemContent>
         </PrimitiveAccordionItem>
       ))}
     </PrimitiveAccordion>

diff --git a/src/components/core/Checkbox/Checkbox.tsx b/src/components/core/Checkbox/Checkbox.tsx
@@ -1,3 +1,5 @@
+import { CheckboxContext } from "@ark-ui/react";
+
 import {
   PrimitiveCheckbox,
   PrimitiveCheckboxControl,
@@ -26,10 +28,10 @@ const Checkbox = ({ label, ...rest }: Props) => {
 
   return (
     <PrimitiveCheckbox {...rest}>
-      {({ isChecked }) => (
-        <>
-          <PrimitiveCheckboxControl>
-            {isChecked && (
+      <PrimitiveCheckboxControl>
+        <CheckboxContext>
+          {({ checked }) =>
+            checked && (
               <svg
                 viewBox="0 0 14 14"
                 fill="none"
@@ -43,11 +45,12 @@ const Checkbox = ({ label, ...rest }: Props) => {
                   strokeLinejoin="round"
                 />
               </svg>
-            )}
-          </PrimitiveCheckboxControl>
-          {label && <PrimitiveCheckboxLabel>{label}</PrimitiveCheckboxLabel>}
-        </>
-      )}
+            )
+          }
+        </CheckboxContext>
+      </PrimitiveCheckboxControl>
+
+      {label && <PrimitiveCheckboxLabel>{label}</PrimitiveCheckboxLabel>}
     </PrimitiveCheckbox>
   );
 };

diff --git a/src/components/core/Combobox/Combobox.tsx b/src/components/core/Combobox/Combobox.tsx
@@ -19,6 +19,7 @@ import {
 } from "components/primitives";
 import { Flex } from "generated/panda/jsx";
 
+import type { ComboboxInputValueChangeDetails } from "@ark-ui/react";
 import type { Props as InputProps } from "components/core/Input/Input";
 import type {
   PrimitiveComboboxContentProps,
@@ -90,15 +91,11 @@ const Combobox = ({
   const allItems = groups.flatMap((group) => group.items);
   const [filteredItems, setFilteredItems] = useState(allItems);
 
-  const handleChange = (
-    evt: Parameters<
-      NonNullable<PrimitiveComboboxProps["onInputValueChange"]>
-    >[0],
-  ) => {
+  const handleChange = ({ inputValue }: ComboboxInputValueChangeDetails) => {
     const filtered = allItems.filter(
       (item) =>
-        item.label.toLowerCase().includes(evt.value.toLowerCase()) ||
-        item.value.toLowerCase().includes(evt.value.toLowerCase()),
+        item.label.toLowerCase().includes(inputValue.toLowerCase()) ||
+        item.value.toLowerCase().includes(inputValue.toLowerCase()),
     );
 
     setFilteredItems(filtered.length ? filtered : allItems);
@@ -159,10 +156,7 @@ const Combobox = ({
                     {...itemGroupProps}
                   >
                     {group.label.display && (
-                      <PrimitiveComboboxItemGroupLabel
-                        htmlFor={group.label.id}
-                        {...group.label.props}
-                      >
+                      <PrimitiveComboboxItemGroupLabel {...group.label.props}>
                         {group.label.plural}
                       </PrimitiveComboboxItemGroupLabel>
                     )}