@kalink-ui/seedly 0.32.1 → 0.33.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @kalink-ui/seedly
 
+## 0.33.0
+
+### Minor Changes
+
+- c8c98c0: Introduce the Radix-based `Collapsible` primitives and animated `CollapsibleContent`, and pull the new `@radix-ui/react-collapsible` dependency into Seedly.
+
 ## 0.32.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalink-ui/seedly",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "description": "A set of components for building UIs with React and TypeScript",
   "sideEffects": false,
   "license": "MIT",
@@ -16,33 +16,33 @@
     "./styles/layers": "./src/styles/layers.css.ts"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.0",
-    "@storybook/addon-docs": "^9.0.8",
-    "@storybook/addon-onboarding": "^9.0.8",
-    "@storybook/react-vite": "^9.0.8",
-    "@turbo/gen": "^2.5.4",
-    "@types/node": "^24.0.0",
-    "@types/react": "19.1.7",
-    "@types/react-dom": "19.1.6",
-    "@vanilla-extract/css": "^1.17.3",
-    "@vanilla-extract/css-utils": "^0.1.5",
-    "@vanilla-extract/dynamic": "^2.1.4",
-    "@vanilla-extract/recipes": "^0.5.6",
-    "@vanilla-extract/sprinkles": "^1.6.4",
-    "@vanilla-extract/vite-plugin": "^5.0.5",
-    "@vitejs/plugin-react": "^4.5.2",
-    "eslint": "^9.28.0",
-    "eslint-plugin-storybook": "9.0.8",
-    "lucide-react": "^0.514.0",
-    "react": "^19.1.0",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/addon-onboarding": "^9.1.10",
+    "@storybook/react-vite": "^9.1.10",
+    "@turbo/gen": "^2.5.8",
+    "@types/node": "^24.6.2",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/css-utils": "^0.1.6",
+    "@vanilla-extract/dynamic": "^2.1.5",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "@vanilla-extract/vite-plugin": "^5.1.1",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.37.0",
+    "eslint-plugin-storybook": "9.1.10",
+    "lucide-react": "^0.544.0",
+    "react": "^19.2.0",
     "react-docgen-typescript": "^2.4.0",
-    "react-dom": "^19.1.0",
-    "storybook": "^9.0.8",
-    "type-fest": "^4.41.0",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
+    "react-dom": "^19.2.0",
+    "storybook": "^9.1.10",
+    "type-fest": "^5.0.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.9",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.3",
+    "vitest": "^3.2.4",
     "@kalink-ui/eslint-config": "0.10.0",
     "@kalink-ui/typescript-config": "0.4.0"
   },
@@ -52,16 +52,17 @@
     "@vanilla-extract/dynamic": "^2.1.2",
     "@vanilla-extract/recipes": "^0.5.5",
     "@vanilla-extract/sprinkles": "^1.6.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "typescript": "^5.8.2"
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "^5.9.2"
   },
   "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.3",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",

package/src/components/collapsible/collapsible-content.css.ts

@@ -0,0 +1,48 @@
+import { keyframes, style } from '@vanilla-extract/css';
+
+import { sys } from '../../styles';
+import { components } from '../../styles/layers.css';
+
+const slideDown = keyframes({
+  '0%': {
+    height: 0,
+    opacity: 0,
+  },
+  '100%': {
+    height: 'var(--radix-collapsible-content-height)',
+    opacity: 1,
+  },
+});
+
+const slideUp = keyframes({
+  '0%': {
+    height: 'var(--radix-collapsible-content-height)',
+    opacity: 1,
+  },
+  '100%': {
+    height: 0,
+    opacity: 0,
+  },
+});
+
+export const collapsibleContent = style({
+  '@layer': {
+    [components]: {
+      overflow: 'hidden',
+
+      animationDuration: sys.motion.duration.medium[2],
+      animationTimingFunction: sys.motion.easing.standard,
+      animationFillMode: 'both',
+      willChange: 'height',
+
+      selectors: {
+        '&[data-state="open"]': {
+          animationName: slideDown,
+        },
+        '&[data-state="closed"]': {
+          animationName: slideUp,
+        },
+      },
+    },
+  },
+});

package/src/components/collapsible/collapsible-content.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import { CollapsibleContentProps, Content } from '@radix-ui/react-collapsible';
+import { clsx } from 'clsx';
+
+import { collapsibleContent } from './collapsible-content.css';
+
+export function CollapsibleContent({
+  className,
+  ...props
+}: CollapsibleContentProps) {
+  return <Content className={clsx(collapsibleContent, className)} {...props} />;
+}

package/src/components/collapsible/collapsible.tsx

@@ -0,0 +1,6 @@
+'use client';
+
+import { Root, Trigger } from '@radix-ui/react-collapsible';
+
+export const Collapsible = Root;
+export const CollapsibleTrigger = Trigger;

package/src/components/collapsible/index.ts

@@ -0,0 +1,3 @@
+export { Collapsible, CollapsibleTrigger } from './collapsible';
+export { CollapsibleContent } from './collapsible-content';
+export { collapsibleContent } from './collapsible-content.css';

package/src/components/index.ts

@@ -5,6 +5,7 @@ export * from './button-icon';
 export * from './card';
 export * from './center';
 export * from './cluster';
+export * from './collapsible';
 export * from './command';
 export * from './conditional-wrapper';
 export * from './cover';