cetec-design-system 3.5.1-0 → 3.6.0-0

package/dist/index.js

@@ -984,7 +984,7 @@ const spinnerVariantKeys = [
   "inverse",
   "centered"
 ];
-const getVariantProps$t = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
+const getVariantProps$u = (variants) => ({ ...spinnerDefaultVariants, ...compact(variants) });
 const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   __recipe__: false,
   __name__: "spinner",
@@ -1009,7 +1009,7 @@ const spinner = /* @__PURE__ */ Object.assign(spinnerFn, {
   splitVariantProps(props) {
     return splitProps$1(props, spinnerVariantKeys);
   },
-  getVariantProps: getVariantProps$t
+  getVariantProps: getVariantProps$u
 });
 const tagFn = /* @__PURE__ */ createRecipe("tag", {
   "variant": "default",
@@ -1677,7 +1677,7 @@ const toggleFn = memo((props = {}) => {
   return Object.fromEntries(toggleSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const toggleVariantKeys = [];
-const getVariantProps$s = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
+const getVariantProps$t = (variants) => ({ ...toggleDefaultVariants, ...compact(variants) });
 const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   __recipe__: false,
   __name__: "toggle",
@@ -1688,7 +1688,7 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   splitVariantProps(props) {
     return splitProps$1(props, toggleVariantKeys);
   },
-  getVariantProps: getVariantProps$s
+  getVariantProps: getVariantProps$t
 });
 const alertDefaultVariants = {
   "tone": "info"
@@ -1731,7 +1731,7 @@ const alertFn = memo((props = {}) => {
 const alertVariantKeys = [
   "tone"
 ];
-const getVariantProps$r = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
+const getVariantProps$s = (variants) => ({ ...alertDefaultVariants, ...compact(variants) });
 const alert = /* @__PURE__ */ Object.assign(alertFn, {
   __recipe__: false,
   __name__: "alert",
@@ -1750,7 +1750,7 @@ const alert = /* @__PURE__ */ Object.assign(alertFn, {
   splitVariantProps(props) {
     return splitProps$1(props, alertVariantKeys);
   },
-  getVariantProps: getVariantProps$r
+  getVariantProps: getVariantProps$s
 });
 const autocompleteDefaultVariants = {
   "size": "md",
@@ -1807,7 +1807,7 @@ const autocompleteVariantKeys = [
   "layer",
   "size"
 ];
-const getVariantProps$q = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
+const getVariantProps$r = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
 const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   __recipe__: false,
   __name__: "autocomplete",
@@ -1829,7 +1829,7 @@ const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   splitVariantProps(props) {
     return splitProps$1(props, autocompleteVariantKeys);
   },
-  getVariantProps: getVariantProps$q
+  getVariantProps: getVariantProps$r
 });
 const avatarDefaultVariants = {
   "size": "md",
@@ -1866,7 +1866,7 @@ const avatarVariantKeys = [
   "size",
   "shape"
 ];
-const getVariantProps$p = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
+const getVariantProps$q = (variants) => ({ ...avatarDefaultVariants, ...compact(variants) });
 const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   __recipe__: false,
   __name__: "avatar",
@@ -1891,7 +1891,7 @@ const avatar = /* @__PURE__ */ Object.assign(avatarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, avatarVariantKeys);
   },
-  getVariantProps: getVariantProps$p
+  getVariantProps: getVariantProps$q
 });
 const badgeDefaultVariants = {
   "size": "md",
@@ -1918,7 +1918,7 @@ const badgeVariantKeys = [
   "dot",
   "variant"
 ];
-const getVariantProps$o = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
+const getVariantProps$p = (variants) => ({ ...badgeDefaultVariants, ...compact(variants) });
 const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   __recipe__: false,
   __name__: "badge",
@@ -1954,7 +1954,7 @@ const badge = /* @__PURE__ */ Object.assign(badgeFn, {
   splitVariantProps(props) {
     return splitProps$1(props, badgeVariantKeys);
   },
-  getVariantProps: getVariantProps$o
+  getVariantProps: getVariantProps$p
 });
 const breadcrumbsDefaultVariants = {};
 const breadcrumbsCompoundVariants = [];
@@ -1981,7 +1981,7 @@ const breadcrumbsFn = memo((props = {}) => {
   return Object.fromEntries(breadcrumbsSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const breadcrumbsVariantKeys = [];
-const getVariantProps$n = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
+const getVariantProps$o = (variants) => ({ ...breadcrumbsDefaultVariants, ...compact(variants) });
 const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   __recipe__: false,
   __name__: "breadcrumbs",
@@ -1992,7 +1992,7 @@ const breadcrumbs = /* @__PURE__ */ Object.assign(breadcrumbsFn, {
   splitVariantProps(props) {
     return splitProps$1(props, breadcrumbsVariantKeys);
   },
-  getVariantProps: getVariantProps$n
+  getVariantProps: getVariantProps$o
 });
 const buttonDefaultVariants = {
   "variant": "standard",
@@ -2023,7 +2023,7 @@ const buttonVariantKeys = [
   "before",
   "after"
 ];
-const getVariantProps$m = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
+const getVariantProps$n = (variants) => ({ ...buttonDefaultVariants, ...compact(variants) });
 const button = /* @__PURE__ */ Object.assign(buttonFn, {
   __recipe__: false,
   __name__: "button",
@@ -2057,7 +2057,7 @@ const button = /* @__PURE__ */ Object.assign(buttonFn, {
   splitVariantProps(props) {
     return splitProps$1(props, buttonVariantKeys);
   },
-  getVariantProps: getVariantProps$m
+  getVariantProps: getVariantProps$n
 });
 const calendarDefaultVariants = {
   "type": "days"
@@ -2096,7 +2096,7 @@ const calendarFn = memo((props = {}) => {
 const calendarVariantKeys = [
   "type"
 ];
-const getVariantProps$l = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
+const getVariantProps$m = (variants) => ({ ...calendarDefaultVariants, ...compact(variants) });
 const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   __recipe__: false,
   __name__: "calendar",
@@ -2113,7 +2113,7 @@ const calendar = /* @__PURE__ */ Object.assign(calendarFn, {
   splitVariantProps(props) {
     return splitProps$1(props, calendarVariantKeys);
   },
-  getVariantProps: getVariantProps$l
+  getVariantProps: getVariantProps$m
 });
 const checkboxDefaultVariants = {};
 const checkboxCompoundVariants = [];
@@ -2140,7 +2140,7 @@ const checkboxFn = memo((props = {}) => {
   return Object.fromEntries(checkboxSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const checkboxVariantKeys = [];
-const getVariantProps$k = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
+const getVariantProps$l = (variants) => ({ ...checkboxDefaultVariants, ...compact(variants) });
 const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   __recipe__: false,
   __name__: "checkbox",
@@ -2151,7 +2151,7 @@ const checkbox = /* @__PURE__ */ Object.assign(checkboxFn, {
   splitVariantProps(props) {
     return splitProps$1(props, checkboxVariantKeys);
   },
-  getVariantProps: getVariantProps$k
+  getVariantProps: getVariantProps$l
 });
 const chipDefaultVariants = {
   "size": "md"
@@ -2189,7 +2189,7 @@ const chipVariantKeys = [
   "after",
   "dismissable"
 ];
-const getVariantProps$j = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
+const getVariantProps$k = (variants) => ({ ...chipDefaultVariants, ...compact(variants) });
 const chip = /* @__PURE__ */ Object.assign(chipFn, {
   __recipe__: false,
   __name__: "chip",
@@ -2216,7 +2216,7 @@ const chip = /* @__PURE__ */ Object.assign(chipFn, {
   splitVariantProps(props) {
     return splitProps$1(props, chipVariantKeys);
   },
-  getVariantProps: getVariantProps$j
+  getVariantProps: getVariantProps$k
 });
 const dateMenusDefaultVariants = {};
 const dateMenusCompoundVariants = [];
@@ -2239,7 +2239,7 @@ const dateMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateMenusVariantKeys = [];
-const getVariantProps$i = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$j = (variants) => ({ ...dateMenusDefaultVariants, ...compact(variants) });
 const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   __recipe__: false,
   __name__: "dateMenus",
@@ -2250,7 +2250,7 @@ const dateMenus = /* @__PURE__ */ Object.assign(dateMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateMenusVariantKeys);
   },
-  getVariantProps: getVariantProps$i
+  getVariantProps: getVariantProps$j
 });
 const dateTimeMenusDefaultVariants = {};
 const dateTimeMenusCompoundVariants = [];
@@ -2273,7 +2273,7 @@ const dateTimeMenusFn = memo((props = {}) => {
   return Object.fromEntries(dateTimeMenusSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dateTimeMenusVariantKeys = [];
-const getVariantProps$h = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
+const getVariantProps$i = (variants) => ({ ...dateTimeMenusDefaultVariants, ...compact(variants) });
 const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   __recipe__: false,
   __name__: "dateTimeMenus",
@@ -2284,6 +2284,80 @@ const dateTimeMenus = /* @__PURE__ */ Object.assign(dateTimeMenusFn, {
   splitVariantProps(props) {
     return splitProps$1(props, dateTimeMenusVariantKeys);
   },
+  getVariantProps: getVariantProps$i
+});
+const drawerDefaultVariants = {
+  "side": "right",
+  "size": "md",
+  "scrollable": true
+};
+const drawerCompoundVariants = [];
+const drawerSlotNames = [
+  [
+    "overlay",
+    "drawer__overlay"
+  ],
+  [
+    "container",
+    "drawer__container"
+  ],
+  [
+    "header",
+    "drawer__header"
+  ],
+  [
+    "title",
+    "drawer__title"
+  ],
+  [
+    "closeButton",
+    "drawer__closeButton"
+  ],
+  [
+    "body",
+    "drawer__body"
+  ],
+  [
+    "footer",
+    "drawer__footer"
+  ]
+];
+const drawerSlotFns = /* @__PURE__ */ drawerSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, drawerDefaultVariants, getSlotCompoundVariant(drawerCompoundVariants, slotName))]);
+const drawerFn = memo((props = {}) => {
+  return Object.fromEntries(drawerSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const drawerVariantKeys = [
+  "side",
+  "size",
+  "scrollable"
+];
+const getVariantProps$h = (variants) => ({ ...drawerDefaultVariants, ...compact(variants) });
+const drawer = /* @__PURE__ */ Object.assign(drawerFn, {
+  __recipe__: false,
+  __name__: "drawer",
+  raw: (props) => props,
+  classNameMap: {},
+  variantKeys: drawerVariantKeys,
+  variantMap: {
+    "side": [
+      "right",
+      "left"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg",
+      "xl",
+      "full"
+    ],
+    "scrollable": [
+      "true",
+      "false"
+    ]
+  },
+  splitVariantProps(props) {
+    return splitProps$1(props, drawerVariantKeys);
+  },
   getVariantProps: getVariantProps$h
 });
 const formFieldDefaultVariants = {
@@ -21513,6 +21587,216 @@ const DateTimeRangePicker = (props) => {
     }
   );
 };
+const DrawerContext = createContext(null);
+const useDrawerContext = () => {
+  const context2 = useContext(DrawerContext);
+  if (!context2) {
+    throw new Error("Drawer components must be used within a <Drawer>");
+  }
+  return context2;
+};
+const DRAWER_MOTION_MS = 200;
+const drawerPhaseReducer = (phase, action) => {
+  switch (action.type) {
+    case "open":
+      return "open";
+    case "startClosing":
+      return phase === "closed" ? phase : "closing";
+    case "finishClosing":
+      return "closed";
+    default:
+      return phase;
+  }
+};
+const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const Drawer = (props) => {
+  const {
+    open,
+    onOpenChange,
+    modal: modal2 = true,
+    side = "right",
+    size: size2 = "md",
+    preventOutsideClose = false,
+    initialFocus,
+    returnFocus = true,
+    children,
+    id,
+    ref,
+    onKeyDown,
+    onAnimationEnd,
+    ...rest
+  } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer({ side, size: size2 });
+  const [phase, dispatch] = useReducer(
+    drawerPhaseReducer,
+    open ? "open" : "closed"
+  );
+  const panelRef = useRef(null);
+  const { refs, context: context2 } = useOverlayFloating({
+    open,
+    onOpenChange,
+    strategy: "fixed",
+    middleware: []
+  });
+  const dismiss = useDismiss(context2, {
+    escapeKey: modal2,
+    outsidePress: modal2 && !preventOutsideClose
+  });
+  const { getFloatingProps } = useInteractions([dismiss]);
+  useEffect(() => {
+    if (open) {
+      dispatch({ type: "open" });
+      return;
+    }
+    dispatch({ type: "startClosing" });
+    const timeout = setTimeout(
+      () => dispatch({ type: "finishClosing" }),
+      prefersReducedMotion() ? 0 : DRAWER_MOTION_MS
+    );
+    return () => clearTimeout(timeout);
+  }, [open]);
+  const setPanelRef = useCallback(
+    (node) => {
+      panelRef.current = node;
+      refs.setFloating(node);
+    },
+    [refs]
+  );
+  const mergedPanelRef = useMergeRefs([setPanelRef, ref]);
+  const onClose = useCallback(() => {
+    if (open) {
+      onOpenChange(false);
+    }
+  }, [open, onOpenChange]);
+  const handleKeyDown = (event) => {
+    var _a;
+    onKeyDown == null ? void 0 : onKeyDown(event);
+    if (modal2 || event.key !== "Escape" || event.defaultPrevented) {
+      return;
+    }
+    if (event.nativeEvent.isComposing) {
+      return;
+    }
+    if (!((_a = panelRef.current) == null ? void 0 : _a.contains(event.target))) {
+      return;
+    }
+    event.stopPropagation();
+    onClose();
+  };
+  const contextValue = useMemo(
+    () => ({ open: phase === "open", onClose, modal: modal2 }),
+    [modal2, onClose, phase]
+  );
+  if (phase === "closed") {
+    return null;
+  }
+  const dataState = phase === "closing" ? "closing" : "open";
+  return /* @__PURE__ */ jsx(FloatingLayerContext.Provider, { value: "modalFloating", children: /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsxs(DsChainPortalRoot, { children: [
+    modal2 && /* @__PURE__ */ jsx(
+      FloatingOverlay,
+      {
+        lockScroll: true,
+        className: classes.overlay,
+        "data-state": dataState,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FloatingFocusManager,
+      {
+        context: context2,
+        modal: modal2,
+        initialFocus: initialFocus ?? (modal2 ? 0 : panelRef),
+        returnFocus,
+        closeOnFocusOut: false,
+        children: /* @__PURE__ */ jsx(
+          Box,
+          {
+            ...dsComponent("Drawer"),
+            ref: mergedPanelRef,
+            className: cx(classes.container, className),
+            "data-state": dataState,
+            "data-side": side,
+            id,
+            role: "dialog",
+            "aria-modal": modal2 ? "true" : void 0,
+            ...getFloatingProps({
+              // Consumer props go through Floating UI so its handlers
+              // merge with them instead of being overwritten.
+              ...otherProps,
+              onKeyDown: handleKeyDown,
+              onAnimationEnd: (event) => {
+                onAnimationEnd == null ? void 0 : onAnimationEnd(event);
+                if (phase === "closing" && event.target === event.currentTarget) {
+                  dispatch({ type: "finishClosing" });
+                }
+              }
+            }),
+            children
+          }
+        )
+      }
+    )
+  ] }) }) }) });
+};
+const Heading = (props) => {
+  const { level = "h2", allCaps, children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...dsComponent("Heading"),
+      as: level,
+      className: cx(heading({ level, allCaps }), className),
+      ...otherProps,
+      children
+    }
+  );
+};
+const DrawerHeader = (props) => {
+  const { title, titleId, showCloseButton = true, children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer();
+  const { onClose } = useDrawerContext();
+  const isSm = useMediaQuery("sm");
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.header, className), ...otherProps, children: children ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx(
+      Heading,
+      {
+        id: titleId,
+        level: "h3",
+        textStyle: { base: "heading.sm", sm: "heading.xs" },
+        className: classes.title,
+        children: title
+      }
+    ),
+    showCloseButton && /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        variant: "ghost",
+        size: isSm ? "md" : "lg",
+        onClick: onClose,
+        altText: "Close drawer",
+        "aria-label": "Close drawer",
+        className: classes.closeButton,
+        iconName: "x"
+      }
+    )
+  ] }) });
+};
+const DrawerBody = (props) => {
+  const { children, scrollable = true, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer({ scrollable });
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.body, className), ...otherProps, children });
+};
+const DrawerFooter = (props) => {
+  const { children, ...rest } = props;
+  const [className, otherProps] = splitProps(rest);
+  const classes = drawer();
+  return /* @__PURE__ */ jsx(Box, { className: cx(classes.footer, className), ...otherProps, children });
+};
 const Required = () => {
   return /* @__PURE__ */ jsx(Text, { color: "text.danger", fontSize: "inherit", lineHeight: "tight", children: "*" });
 };
@@ -21599,20 +21883,6 @@ const FormField = (props) => {
     }
   );
 };
-const Heading = (props) => {
-  const { level = "h2", allCaps, children, ...rest } = props;
-  const [className, otherProps] = splitProps(rest);
-  return /* @__PURE__ */ jsx(
-    Text,
-    {
-      ...dsComponent("Heading"),
-      as: level,
-      className: cx(heading({ level, allCaps }), className),
-      ...otherProps,
-      children
-    }
-  );
-};
 const toneIconNames$2 = {
   info: "info",
   success: "success",
@@ -24378,6 +24648,10 @@ export {
   DateTimePicker,
   DateTimeRangePicker,
   Divider,
+  Drawer,
+  DrawerBody,
+  DrawerFooter,
+  DrawerHeader,
   DsChainScope,
   FormField,
   Heading,
@@ -24441,6 +24715,7 @@ export {
   splitProps,
   useChipGroup,
   useContainerQuery,
+  useDrawerContext,
   useForm2 as useForm,
   useIconConfig,
   useListContext,