feat: add component collapsible

Author: Ohh-889

packages/ui/package.json

@@ -11,7 +11,9 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "pnpm run pgk:prod && pnpm run build:components && pnpm run registry",
     "build:components": "tsdown",
@@ -27,6 +29,7 @@
     "@radix-ui/react-aspect-ratio": "1.1.7",
     "@radix-ui/react-avatar": "1.1.10",
     "@radix-ui/react-checkbox": "1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-compose-refs": "1.1.2",
     "@radix-ui/react-label": "2.1.7",
     "@radix-ui/react-popover": "1.1.14",

packages/ui/src/components/collapsible/Collapsible.tsx

@@ -0,0 +1,31 @@
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import CollapsibleContent from './CollapsibleContent';
+import CollapsibleRoot from './CollapsibleRoot';
+import type { CollapsibleProps } from './types';
+
+const Collapsible = forwardRef<ComponentRef<typeof CollapsibleRoot>, CollapsibleProps>((props, ref) => {
+  const { children, className, classNames, content, forceMountContent, ...rest } = props;
+
+  return (
+    <CollapsibleRoot
+      className={className || classNames?.root}
+      ref={ref}
+      {...rest}
+    >
+      {children}
+
+      <CollapsibleContent
+        className={classNames?.content}
+        forceMount={forceMountContent}
+      >
+        {content}
+      </CollapsibleContent>
+    </CollapsibleRoot>
+  );
+});
+
+Collapsible.displayName = 'Collapsible';
+
+export default Collapsible;

packages/ui/src/components/collapsible/CollapsibleContent.tsx

@@ -0,0 +1,28 @@
+import { Content } from '@radix-ui/react-collapsible';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { collapsibleVariants } from './collapsible-variants';
+import type { CollapsibleContentProps } from './types';
+
+const CollapsibleContent = forwardRef<ComponentRef<typeof Content>, CollapsibleContentProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { content } = collapsibleVariants();
+
+  const mergedCls = cn(content(), className);
+
+  return (
+    <Content
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+CollapsibleContent.displayName = 'CollapsibleContent';
+
+export default CollapsibleContent;

packages/ui/src/components/collapsible/CollapsibleRoot.tsx

@@ -0,0 +1,28 @@
+import { Root } from '@radix-ui/react-collapsible';
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { collapsibleVariants } from './collapsible-variants';
+import type { CollapsibleRootProps } from './types';
+
+const CollapsibleRoot = forwardRef<ComponentRef<typeof Root>, CollapsibleRootProps>((props, ref) => {
+  const { className, size, ...rest } = props;
+
+  const { root } = collapsibleVariants({ size });
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <Root
+      className={mergedCls}
+      ref={ref}
+      {...rest}
+    />
+  );
+});
+
+CollapsibleRoot.displayName = 'CollapsibleRoot';
+
+export default CollapsibleRoot;

packages/ui/src/components/collapsible/collapsible-variants.ts

@@ -0,0 +1,36 @@
+import { tv } from 'tailwind-variants';
+
+export const collapsibleVariants = tv({
+  slots: {
+    content: [
+      'overflow-hidden transition will-change-auto',
+      'data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down'
+    ],
+    root: '',
+    trigger: ''
+  },
+  variants: {
+    size: {
+      '2xl': {
+        root: 'text-xl'
+      },
+      lg: {
+        root: 'text-base'
+      },
+      md: {
+        root: 'text-sm'
+      },
+      sm: {
+        root: 'text-xs'
+      },
+      xl: {
+        root: 'text-lg'
+      },
+      xs: {
+        root: 'text-2xs'
+      }
+    }
+  }
+});
+
+export type CollapsibleSlots = keyof typeof collapsibleVariants.slots;

packages/ui/src/components/collapsible/index.ts

@@ -0,0 +1,5 @@
+export { CollapsibleTrigger } from '@radix-ui/react-collapsible';
+export { default as Collapsible } from './Collapsible';
+export { default as CollapsibleContent } from './CollapsibleContent';
+export { default as CollapsibleRoot } from './CollapsibleRoot';
+export * from './types';

packages/ui/src/components/collapsible/types.ts

@@ -0,0 +1,20 @@
+import type {
+  CollapsibleContentProps as _CollapsibleContentProps,
+  CollapsibleProps as _CollapsibleRootProps
+} from '@radix-ui/react-collapsible';
+
+import type { BaseNodeProps, ClassValue } from '@/types/other';
+
+import type { CollapsibleSlots } from './collapsible-variants';
+
+export type CollapsibleRootProps = BaseNodeProps<Omit<_CollapsibleRootProps, 'content'>>;
+
+export type CollapsibleContentProps = BaseNodeProps<_CollapsibleContentProps>;
+
+export type CollapsibleClassNames = Partial<Record<CollapsibleSlots, ClassValue>>;
+
+export interface CollapsibleProps extends CollapsibleRootProps {
+  classNames?: CollapsibleClassNames;
+  content?: React.ReactNode;
+  forceMountContent?: true;
+}

packages/ui/src/index.ts

@@ -15,12 +15,15 @@ export * from './components/breadcrumb';
 export * from './components/button';
 
 export * from './components/card';
+
 export * from './components/carousel';
 
 export * from './components/checkbox';
 
 export * from './components/chip';
 
+export * from './components/collapsible';
+
 export * from './components/config-provider';
 
 export * from './components/divider';

playground/src/app/(demo)/collapsible/modules/DefaultCollapsibleDemo.tsx

@@ -0,0 +1,36 @@
+import { ChevronsUpDown } from 'lucide-react';
+import { ButtonIcon, Card, Collapsible, CollapsibleTrigger } from 'soybean-react-ui';
+
+const DefaultCollapsibleDemo = () => {
+  return (
+    <Card
+      split
+      title="Collapsible"
+    >
+      <Collapsible
+        className="w-[350px] max-sm:w-auto space-y-2"
+        classNames={{ content: 'space-y-2' }}
+        content={
+          <>
+            <div className="border rounded-md px-4 py-3 text-sm font-mono">@soybean-ui/colors</div>
+            <div className="border rounded-md px-4 py-3 text-sm font-mono">soybean-ui</div>
+          </>
+        }
+      >
+        <div className="flex-y-center justify-between px-2 space-x-4">
+          <h4 className="text-sm font-semibold">@soybeanjs starred 3 repositories</h4>
+
+          <CollapsibleTrigger asChild>
+            <ButtonIcon>
+              <ChevronsUpDown />
+            </ButtonIcon>
+          </CollapsibleTrigger>
+        </div>
+
+        <div className="border rounded-md px-4 py-3 text-sm font-mono">@soybean-ui/primitives</div>
+      </Collapsible>
+    </Card>
+  );
+};
+
+export default DefaultCollapsibleDemo;

playground/src/app/(demo)/collapsible/page.tsx

@@ -0,0 +1,7 @@
+import DefaultCollapsibleDemo from './modules/DefaultCollapsibleDemo';
+
+const CollapsiblePage = () => {
+  return <DefaultCollapsibleDemo />;
+};
+
+export default CollapsiblePage;