@crystallize/design-system 1.23.6 → 1.24.0

package/dist/index.mjs

@@ -115,10 +115,49 @@ var Checkbox = forwardRef2((props, ref) => {
 });
 Checkbox.displayName = "Checkbox";
 
+// src/collapsible/collapsible.tsx
+import { cx } from "class-variance-authority";
+import * as CollapsiblePrimitives from "@radix-ui/react-collapsible";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Content2({ className, ...delegated }) {
+  return /* @__PURE__ */ jsx4(CollapsiblePrimitives.Content, {
+    ...delegated,
+    className: cx("c-collapsible-content", className)
+  });
+}
+function CollapsibleTrigger({
+  children,
+  arrowPosition,
+  className,
+  ...delegated
+}) {
+  return /* @__PURE__ */ jsx4(CollapsiblePrimitives.Trigger, {
+    asChild: true,
+    ...delegated,
+    className: cx("c-collapsible-trigger", arrowPosition === "right" ? "arrow-right" : "", className),
+    children: /* @__PURE__ */ jsxs2("div", {
+      children: [
+        arrowPosition && /* @__PURE__ */ jsx4(Icon.Caret, {
+          className: "c-collapsible-arrow",
+          fill: "purple-50-900",
+          width: 10,
+          height: 10
+        }),
+        children
+      ]
+    })
+  });
+}
+var Collapsible = {
+  Root: CollapsiblePrimitives.Root,
+  Trigger: CollapsibleTrigger,
+  Content: Content2
+};
+
 // src/inline-radio/inline-radio.tsx
-import { cx, cva as cva3 } from "class-variance-authority";
+import { cx as cx2, cva as cva3 } from "class-variance-authority";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var inlineRadioGroupStyles = cva3("c-inline-radio-group", {
   variants: {
     size: {
@@ -133,16 +172,16 @@ var inlineRadioGroupStyles = cva3("c-inline-radio-group", {
   }
 });
 function InlineRadioGroup({ size, className, ...delegated }) {
-  return /* @__PURE__ */ jsx4(RadioGroupPrimitive.Root, {
+  return /* @__PURE__ */ jsx5(RadioGroupPrimitive.Root, {
     ...delegated,
     className: inlineRadioGroupStyles({ size, className })
   });
 }
 function InlineRadioItem({ children, className, ...delegated }) {
-  return /* @__PURE__ */ jsx4(RadioGroupPrimitive.Item, {
+  return /* @__PURE__ */ jsx5(RadioGroupPrimitive.Item, {
     ...delegated,
-    className: cx("c-inline-radio", className),
-    children: /* @__PURE__ */ jsx4(RadioGroupPrimitive.Indicator, {
+    className: cx2("c-inline-radio", className),
+    children: /* @__PURE__ */ jsx5(RadioGroupPrimitive.Indicator, {
       forceMount: true,
       children
     })
@@ -154,14 +193,14 @@ var InlineRadio = {
 };
 
 // src/progress/progress.tsx
-import { cx as cx2 } from "class-variance-authority";
+import { cx as cx3 } from "class-variance-authority";
 import * as ProgressPrimitives from "@radix-ui/react-progress";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Progress({ className, value }) {
-  return /* @__PURE__ */ jsx5(ProgressPrimitives.Root, {
-    className: cx2(className, "c-progress-root"),
+  return /* @__PURE__ */ jsx6(ProgressPrimitives.Root, {
+    className: cx3(className, "c-progress-root"),
     value,
-    children: /* @__PURE__ */ jsx5(ProgressPrimitives.Indicator, {
+    children: /* @__PURE__ */ jsx6(ProgressPrimitives.Indicator, {
       className: "c-progress-indicator",
       style: { transform: `translateX(-${100 - (value ?? 0)}%)` }
     })
@@ -170,12 +209,12 @@ function Progress({ className, value }) {
 
 // src/radio/radio.tsx
 import * as RadioGroupPrimitive2 from "@radix-ui/react-radio-group";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function RadioGroupItem(props) {
-  return /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Item, {
+  return /* @__PURE__ */ jsx7(RadioGroupPrimitive2.Item, {
     ...props,
     className: "c-radio-item",
-    children: /* @__PURE__ */ jsx6(RadioGroupPrimitive2.Indicator, {
+    children: /* @__PURE__ */ jsx7(RadioGroupPrimitive2.Indicator, {
       className: "c-radio-indicator"
     })
   });
@@ -188,18 +227,18 @@ var Radio = {
 // src/select/select-item.tsx
 import { forwardRef as forwardRef3 } from "react";
 import * as SelectPrimitives from "@radix-ui/react-select";
-import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var SelectItem = forwardRef3((props, ref) => {
   const { children, ...delegated } = props;
-  return /* @__PURE__ */ jsxs2(SelectPrimitives.Item, {
+  return /* @__PURE__ */ jsxs3(SelectPrimitives.Item, {
     className: "c-select-item",
     ref,
     ...delegated,
     children: [
-      /* @__PURE__ */ jsx7(SelectPrimitives.ItemText, {
+      /* @__PURE__ */ jsx8(SelectPrimitives.ItemText, {
         children
       }),
-      /* @__PURE__ */ jsx7(SelectPrimitives.ItemIndicator, {})
+      /* @__PURE__ */ jsx8(SelectPrimitives.ItemIndicator, {})
     ]
   });
 });
@@ -209,7 +248,7 @@ SelectItem.displayName = "SelectItem";
 import { forwardRef as forwardRef4 } from "react";
 import { cva as cva4 } from "class-variance-authority";
 import * as SelectPrimitives2 from "@radix-ui/react-select";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var selectTriggerStyles = cva4("c-select-trigger", {
   variants: {
     size: {
@@ -225,34 +264,34 @@ var selectTriggerStyles = cva4("c-select-trigger", {
 });
 var SelectContainer = forwardRef4(
   ({ children, id, placeholder, disabled, size, triggerClassName, ...delegated }, ref) => {
-    return /* @__PURE__ */ jsxs3(SelectPrimitives2.Root, {
+    return /* @__PURE__ */ jsxs4(SelectPrimitives2.Root, {
       ...delegated,
       children: [
-        /* @__PURE__ */ jsxs3(SelectPrimitives2.Trigger, {
+        /* @__PURE__ */ jsxs4(SelectPrimitives2.Trigger, {
           ref,
           className: selectTriggerStyles({ size, className: triggerClassName }),
           disabled,
           id,
           children: [
-            /* @__PURE__ */ jsx8(SelectPrimitives2.Value, {
-              placeholder: /* @__PURE__ */ jsx8("span", {
+            /* @__PURE__ */ jsx9(SelectPrimitives2.Value, {
+              placeholder: /* @__PURE__ */ jsx9("span", {
                 className: "c-select-value",
                 children: placeholder ?? "Select..."
               })
             }),
-            /* @__PURE__ */ jsx8(Icon.Arrow, {})
+            /* @__PURE__ */ jsx9(Icon.Arrow, {})
           ]
         }),
-        /* @__PURE__ */ jsx8(SelectPrimitives2.Portal, {
-          children: /* @__PURE__ */ jsxs3(SelectPrimitives2.Content, {
+        /* @__PURE__ */ jsx9(SelectPrimitives2.Portal, {
+          children: /* @__PURE__ */ jsxs4(SelectPrimitives2.Content, {
             className: "c-select-content",
             children: [
-              /* @__PURE__ */ jsx8(SelectPrimitives2.ScrollUpButton, {}),
-              /* @__PURE__ */ jsx8(SelectPrimitives2.Viewport, {
+              /* @__PURE__ */ jsx9(SelectPrimitives2.ScrollUpButton, {}),
+              /* @__PURE__ */ jsx9(SelectPrimitives2.Viewport, {
                 className: "c-select-viewport",
                 children
               }),
-              /* @__PURE__ */ jsx8(SelectPrimitives2.ScrollDownButton, {})
+              /* @__PURE__ */ jsx9(SelectPrimitives2.ScrollDownButton, {})
             ]
           })
         })
@@ -270,22 +309,22 @@ var Select = {
 
 // src/slider/slider.tsx
 import { forwardRef as forwardRef5 } from "react";
-import { cx as cx3 } from "class-variance-authority";
+import { cx as cx4 } from "class-variance-authority";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var Slider = forwardRef5(({ className, transparentRange, ...delegated }, ref) => {
-  return /* @__PURE__ */ jsxs4(SliderPrimitive.Root, {
-    className: cx3("c-slider-root", className),
+  return /* @__PURE__ */ jsxs5(SliderPrimitive.Root, {
+    className: cx4("c-slider-root", className),
     ref,
     ...delegated,
     children: [
-      /* @__PURE__ */ jsx9(SliderPrimitive.Track, {
+      /* @__PURE__ */ jsx10(SliderPrimitive.Track, {
         className: "c-slider-track",
-        children: /* @__PURE__ */ jsx9(SliderPrimitive.Range, {
+        children: /* @__PURE__ */ jsx10(SliderPrimitive.Range, {
           className: `c-slider-range ${transparentRange ? "c-slider-range-transparent" : ""}`
         })
       }),
-      /* @__PURE__ */ jsx9(SliderPrimitive.Thumb, {
+      /* @__PURE__ */ jsx10(SliderPrimitive.Thumb, {
         className: "c-slider-thumb"
       })
     ]
@@ -293,15 +332,15 @@ var Slider = forwardRef5(({ className, transparentRange, ...delegated }, ref) =>
 });
 
 // src/stack-icon/stack-icon.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function StackIcon({ type, children, size = 18 }) {
-  return /* @__PURE__ */ jsxs5("span", {
+  return /* @__PURE__ */ jsxs6("span", {
     className: "c-stack-icon",
     children: [
-      type === "create" && /* @__PURE__ */ jsx10("span", {
+      type === "create" && /* @__PURE__ */ jsx11("span", {
         style: { width: size, height: size },
         className: "c-stack-icon__icon",
-        children: /* @__PURE__ */ jsx10(Icon.Add, {
+        children: /* @__PURE__ */ jsx11(Icon.Add, {
           width: size - 4,
           height: size - 4
         })
@@ -312,8 +351,8 @@ function StackIcon({ type, children, size = 18 }) {
 }
 
 // src/tag/tag.tsx
-import { cva as cva5, cx as cx4 } from "class-variance-authority";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { cva as cva5, cx as cx5 } from "class-variance-authority";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var tagStyles = cva5("c-tag", {
   variants: {
     variant: {
@@ -343,28 +382,28 @@ function Tag({
   showRemoveOnHover,
   ...delegated
 }) {
-  return /* @__PURE__ */ jsxs6("div", {
+  return /* @__PURE__ */ jsxs7("div", {
     className: tagStyles({ className, variant, size }),
     ...delegated,
     children: [
-      !prepend ? null : /* @__PURE__ */ jsx11("span", {
+      !prepend ? null : /* @__PURE__ */ jsx12("span", {
         className: "c-tag__prepend",
         children: prepend
       }),
       children,
-      onRemove && /* @__PURE__ */ jsxs6("button", {
+      onRemove && /* @__PURE__ */ jsxs7("button", {
         type: "button",
-        className: cx4("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
+        className: cx5("c-tag__remove-button", showRemoveOnHover ? "c-tag__remove-button--hover" : ""),
         onClick: (e) => {
           e.stopPropagation();
           onRemove();
         },
         children: [
-          /* @__PURE__ */ jsx11(Icon.Cancel, {
+          /* @__PURE__ */ jsx12(Icon.Cancel, {
             width: 12,
             height: 12
           }),
-          /* @__PURE__ */ jsx11("span", {
+          /* @__PURE__ */ jsx12("span", {
             className: "c-tag__remove-button-text",
             children: "Remove"
           })
@@ -376,12 +415,12 @@ function Tag({
 
 // src/rich-text-editor/index.tsx
 import { lazy, Suspense } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var LazyRichTextEditor = lazy(() => import("./rich-text-editor-6PGBZV6U.mjs"));
 var RichTextEditor = (props) => {
-  return /* @__PURE__ */ jsx12(Suspense, {
+  return /* @__PURE__ */ jsx13(Suspense, {
     fallback: null,
-    children: /* @__PURE__ */ jsx12(LazyRichTextEditor, {
+    children: /* @__PURE__ */ jsx13(LazyRichTextEditor, {
       ...props
     })
   });
@@ -391,9 +430,9 @@ var RichTextEditor = (props) => {
 import { Toaster } from "sonner";
 
 // src/toast/toast.tsx
-import { cva as cva6, cx as cx5 } from "class-variance-authority";
+import { cva as cva6, cx as cx6 } from "class-variance-authority";
 import { toast as sonnerToast } from "sonner";
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var toastStyles = cva6("c-toast", {
   variants: {
     type: {
@@ -418,34 +457,34 @@ var toast = ({ title, message, type = "success", timeout = 6e3 }) => {
   const withMessage = !!message;
   const toastId = Date.now().toString();
   sonnerToast.custom(
-    (id) => /* @__PURE__ */ jsxs7("div", {
+    (id) => /* @__PURE__ */ jsxs8("div", {
       "data-testid": `toast-${type}`,
-      className: cx5(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
+      className: cx6(toastStyles({ type }), withMessage ? "c-toast-with-message" : "c-toast-title-only"),
       children: [
-        /* @__PURE__ */ jsx13("div", {
-          children: /* @__PURE__ */ jsx13(ToastIcon, {
+        /* @__PURE__ */ jsx14("div", {
+          children: /* @__PURE__ */ jsx14(ToastIcon, {
             width: 26,
             height: 26
           })
         }),
-        /* @__PURE__ */ jsxs7("div", {
+        /* @__PURE__ */ jsxs8("div", {
           children: [
-            /* @__PURE__ */ jsx13("div", {
+            /* @__PURE__ */ jsx14("div", {
               className: "c-toast-title",
               children: title
             }),
-            !!message && /* @__PURE__ */ jsx13("div", {
+            !!message && /* @__PURE__ */ jsx14("div", {
               className: "c-toast-message",
               children: message
             })
           ]
         }),
-        /* @__PURE__ */ jsx13("div", {
+        /* @__PURE__ */ jsx14("div", {
           className: "c-toast-close",
-          children: /* @__PURE__ */ jsx13(IconButton, {
+          children: /* @__PURE__ */ jsx14(IconButton, {
             onClick: () => sonnerToast.dismiss(id),
             size: "xs",
-            children: /* @__PURE__ */ jsx13(Icon.Cancel, {
+            children: /* @__PURE__ */ jsx14(Icon.Cancel, {
               width: 12,
               height: 12
             })
@@ -466,7 +505,7 @@ toast.dismiss = sonnerToast.dismiss;
 // src/switch/switch.tsx
 import { cva as cva7 } from "class-variance-authority";
 import * as RadixSwitch from "@radix-ui/react-switch";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var switchStyles = cva7(["c-switch-root"], {
   variants: {
     size: {
@@ -479,10 +518,10 @@ var switchStyles = cva7(["c-switch-root"], {
   }
 });
 function Switch({ size, ...props }) {
-  return /* @__PURE__ */ jsx14(RadixSwitch.Root, {
+  return /* @__PURE__ */ jsx15(RadixSwitch.Root, {
     ...props,
     className: switchStyles({ size }),
-    children: /* @__PURE__ */ jsx14(RadixSwitch.Thumb, {
+    children: /* @__PURE__ */ jsx15(RadixSwitch.Thumb, {
       className: "c-switch-thumb"
     })
   });
@@ -499,6 +538,8 @@ export {
   Button,
   Card,
   Checkbox,
+  Collapsible,
+  CollapsibleTrigger,
   Dialog,
   DropdownMenu,
   Icon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.23.6",
+  "version": "1.24.0",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -38,6 +38,7 @@
     "@lexical/utils": "0.12.4",
     "@lexical/yjs": "0.12.4",
     "@radix-ui/react-checkbox": "1.0.1",
+    "@radix-ui/react-collapsible": "1.0.0",
     "@radix-ui/react-dialog": "1.0.2",
     "@radix-ui/react-dropdown-menu": "2.0.1",
     "@radix-ui/react-popover": "1.0.0",
@@ -50,6 +51,7 @@
     "class-variance-authority": "^0.4.0",
     "lexical": "0.12.4",
     "sonner": "^0.6.2",
+    "tailwindcss-radix": "^2.6.1",
     "use-debounce": "8.0.4"
   },
   "peerDependencies": {

package/src/collapsible/collapsible.css

@@ -0,0 +1,19 @@
+.c-collapsible-content {
+  @apply overflow-hidden radix-state-closed:animate-collapsible-close radix-state-open:animate-collapsible-open;
+}
+
+.c-collapsible-trigger {
+  @apply flex gap-2 items-center;
+
+  &.arrow-right {
+    @apply flex-row-reverse justify-end;
+  }
+}
+
+.c-collapsible-arrow {
+  transition: 0.3s;
+}
+
+.c-collapsible-trigger[data-state='open'] .c-collapsible-arrow {
+  transform: rotate(180deg);
+}

package/src/collapsible/collapsible.stories.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Card } from '../card';
+import { Collapsible, CollapsibleTrigger } from './collapsible';
+
+const meta: Meta<typeof CollapsibleTrigger> = {
+  title: 'Components/Collapsible',
+  component: CollapsibleTrigger,
+  argTypes: {
+    arrowPosition: {
+      options: ['right', 'left', undefined],
+      description: 'Trigger prop to control arrow visibility and position',
+      defaultValue: undefined,
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof CollapsibleTrigger>;
+
+export const Example: Story = {
+  args: {
+    arrowPosition: 'right',
+  },
+  render: args => (
+    <Card style={{ padding: 0 }}>
+      <Collapsible.Root>
+        <div style={{ cursor: 'pointer', padding: '32px' }}>
+          <Collapsible.Trigger arrowPosition={args.arrowPosition}>
+            <div>Expand</div>
+          </Collapsible.Trigger>
+        </div>
+        <Collapsible.Content>
+          <p style={{ padding: '0 32px' }}>
+            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam dui sem, fermentum vitae, sagittis id,
+            malesuada in, quam. Cras elementum. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel
+            sapien. Ut tempus purus at lorem. Pellentesque ipsum. Sed elit dui, pellentesque a, faucibus vel, interdum
+            nec, diam. Maecenas sollicitudin. Praesent id justo in neque elementum ultrices. Etiam neque. Integer
+            tempor. Fusce nibh.
+          </p>
+        </Collapsible.Content>
+      </Collapsible.Root>
+    </Card>
+  ),
+};
+
+export const Controlled = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Collapsible.Root open={isOpen} onOpenChange={o => setIsOpen(o)}>
+      <Collapsible.Trigger>Click me</Collapsible.Trigger>
+      <Collapsible.Content>
+        <div>Content</div>
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

package/src/collapsible/collapsible.tsx

@@ -0,0 +1,44 @@
+import type { ComponentProps } from 'react';
+import { cx } from 'class-variance-authority';
+import * as CollapsiblePrimitives from '@radix-ui/react-collapsible';
+import type { CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
+
+import './collapsible.css';
+
+import { Icon } from '../iconography';
+
+type CollapsibleContentProps = ComponentProps<typeof CollapsiblePrimitives.Content>;
+
+function Content({ className, ...delegated }: CollapsibleContentProps) {
+  return <CollapsiblePrimitives.Content {...delegated} className={cx('c-collapsible-content', className)} />;
+}
+
+type CollapsibleTriggerPropsExtendedProps = CollapsibleTriggerProps & {
+  arrowPosition?: 'left' | 'right';
+};
+
+export function CollapsibleTrigger({
+  children,
+  arrowPosition,
+  className,
+  ...delegated
+}: CollapsibleTriggerPropsExtendedProps) {
+  return (
+    <CollapsiblePrimitives.Trigger
+      asChild
+      {...delegated}
+      className={cx('c-collapsible-trigger', arrowPosition === 'right' ? 'arrow-right' : '', className)}
+    >
+      <div>
+        {arrowPosition && <Icon.Caret className="c-collapsible-arrow" fill="purple-50-900" width={10} height={10} />}
+        {children}
+      </div>
+    </CollapsiblePrimitives.Trigger>
+  );
+}
+
+export const Collapsible = {
+  Root: CollapsiblePrimitives.Root,
+  Trigger: CollapsibleTrigger,
+  Content,
+};

package/src/collapsible/index.ts

@@ -0,0 +1 @@
+export * from './collapsible';

package/src/index.ts

@@ -9,6 +9,7 @@ export * from './avatar';
 export * from './button';
 export * from './card';
 export * from './checkbox';
+export * from './collapsible';
 export * from './dialog';
 export * from './dropdown-menu';
 export * from './icon-button';

package/tailwind.config.cjs

@@ -40,6 +40,14 @@ module.exports = {
         inherit: 'inherit',
       },
       keyframes: {
+        'collapsible-open': {
+          '0%': { height: '0' },
+          '100%': { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-close': {
+          '0%': { height: 'var(--radix-collapsible-content-height)' },
+          '100%': { height: '0' },
+        },
         spin: {
           '0%': {
             transform: 'rotate(0deg)',
@@ -56,6 +64,8 @@ module.exports = {
         },
       },
       animation: {
+        'collapsible-open': 'collapsible-open 300ms ease-out forwards',
+        'collapsible-close': 'collapsible-close 300ms ease-out forwards',
         spin: 'spin 2s linear infinite',
       },
       boxShadow: {
@@ -64,5 +74,5 @@ module.exports = {
       },
     },
   },
-  plugins: [colorsPlugin],
+  plugins: [colorsPlugin, require('tailwindcss-radix')(), require('@tailwindcss/container-queries')],
 };