@crystallize/design-system 1.23.5 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @crystallize/design-system
 
+## 1.24.0
+
+### Minor Changes
+
+- c57336b: This PR adds collapsible component
+
+## 1.23.6
+
+### Patch Changes
+
+- 162a582: This PR is fixng dropdown story, that was not showing the ContentWithIcon in storybook code preview
+
 ## 1.23.5
 
 ### Patch Changes

package/dist/{chunk-HTAQYJ4Y.mjs → chunk-FWRBC56V.mjs}

@@ -2064,7 +2064,8 @@ var Folder = forwardRef41((delegated, ref) => {
     children: [
       /* @__PURE__ */ jsx47("path", {
         d: "M2.604 4.108v13.146a.6.6 0 00.6.6h11.968c.59 0 1.166-.255 1.429-.784 1.374-2.77 1.642-8.38 1.166-10.692-.114-.555-.706-.927-1.272-.927l-7.091.067-2-1.41h-4.8z",
-        fill: "#BFF6F8"
+        fill: "#BFF6F8",
+        className: "c-icon-fill"
       }),
       /* @__PURE__ */ jsx47("path", {
         fillRule: "evenodd",
@@ -2074,7 +2075,8 @@ var Folder = forwardRef41((delegated, ref) => {
       }),
       /* @__PURE__ */ jsx47("path", {
         d: "M4.659 10.021L3.502 17.17a.6.6 0 00.594.685h12.076c.59 0 1.164-.254 1.46-.765 1.419-2.445 2.065-6 1.765-7.956-.086-.56-.617-.829-1.184-.829H6.64a2 2 0 00-1.98 1.717z",
-        fill: "#BFF6F8"
+        fill: "#BFF6F8",
+        className: "c-icon-fill"
       }),
       /* @__PURE__ */ jsx47("path", {
         fillRule: "evenodd",

package/dist/index.css

@@ -1032,6 +1032,48 @@
   stroke: rgb(var(--c-color-cyan-700-200) / 1);
 }
 
+/* src/collapsible/collapsible.css */
+.c-collapsible-content {
+  overflow: hidden;
+}
+@keyframes collapsible-close {
+  0% {
+    height: var(--radix-collapsible-content-height);
+  }
+  100% {
+    height: 0;
+  }
+}
+.c-collapsible-content[data-state=closed] {
+  animation: collapsible-close 300ms ease-out forwards;
+}
+@keyframes collapsible-open {
+  0% {
+    height: 0;
+  }
+  100% {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+.c-collapsible-content[data-state=open] {
+  animation: collapsible-open 300ms ease-out forwards;
+}
+.c-collapsible-trigger {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.c-collapsible-trigger.arrow-right {
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+.c-collapsible-arrow {
+  transition: 0.3s;
+}
+.c-collapsible-trigger[data-state=open] .c-collapsible-arrow {
+  transform: rotate(180deg);
+}
+
 /* src/dialog/dialog.css */
 :root {
   --dialog-z-index: 100;

package/dist/index.d.ts

@@ -6,6 +6,8 @@ import * as class_variance_authority_dist_types from 'class-variance-authority/d
 import * as class_variance_authority from 'class-variance-authority';
 import { VariantProps } from 'class-variance-authority';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as CollapsiblePrimitives from '@radix-ui/react-collapsible';
+import { CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ProgressPrimitives from '@radix-ui/react-progress';
@@ -123,6 +125,18 @@ type CheckboxRef = HTMLButtonElement;
 type CheckboxProps = ComponentProps<typeof CheckboxPrimitive.Root>;
 declare const Checkbox: react.ForwardRefExoticComponent<Pick<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "form" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "checked" | "asChild" | "required" | "onCheckedChange"> & react.RefAttributes<HTMLButtonElement>>;
 
+type CollapsibleContentProps = ComponentProps<typeof CollapsiblePrimitives.Content>;
+declare function Content({ className, ...delegated }: CollapsibleContentProps): JSX.Element;
+type CollapsibleTriggerPropsExtendedProps = CollapsibleTriggerProps & {
+    arrowPosition?: 'left' | 'right';
+};
+declare function CollapsibleTrigger({ children, arrowPosition, className, ...delegated }: CollapsibleTriggerPropsExtendedProps): JSX.Element;
+declare const Collapsible: {
+    Root: react.ForwardRefExoticComponent<CollapsiblePrimitives.CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
+    Trigger: typeof CollapsibleTrigger;
+    Content: typeof Content;
+};
+
 type DialogFuncProps = {
     afterClose?: () => void;
     /**
@@ -595,4 +609,4 @@ declare const tokens: {
     card: string;
 };
 
-export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };
+export { ActionMenu, Avatar, Button, ButtonProps, Card, Checkbox, CheckboxProps, CheckboxRef, Collapsible, CollapsibleTrigger, Container, CrystallizeRichText, CrystallizeRichTextActionMenuItem, Dialog, DropdownMenu, DropdownMenuRootProps, Icon, IconButton, IconButtonProps, InlineRadio, Input, InputWithLabel, Label, Progress, Radio, RichTextEditor, Select, Slider, Spinner, StackIcon, Switch, Tag, ToastProps, Tooltip, buttonTokens, cardToken, destroyAll, showConfirm, showDialog, showError, showInfo, showWarning, toast, tokens };