@choco-vanille/ui 1.1.1 → 1.2.0

package/dist/components/overlay/drawer/components/items/drawer-section-item/DrawerSectionItem.js

@@ -0,0 +1,298 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { memo as N } from "react";
+import w from "../../../../../layout/box/Box.js";
+import "../../../../../layout/box/styles/Box.css.js";
+import "../_shared/styles/DrawerItemShared.css.js";
+import "../../../context/Drawer.context.js";
+import C from "../_shared/components/drawer-item-content/DrawerItemContent.js";
+import { DRAWER_SECTION_ITEM_STYLES as i } from "./styles/DrawerSectionItem.css.js";
+import { useDrawerSectionItem as v } from "./hooks/use-drawer-section-item/useDrawerSectionItem.hook.js";
+import "../../../../../theme-provider/ThemeProvider.js";
+import "../../../../../theme-provider/ThemeProvider.context.js";
+import "../../../../../data-display/avatar/Avatar.js";
+import "../../../../../data-display/avatar/components/avatar-root/styles/AvatarRoot.css.js";
+import "../../../../../data-display/avatar/components/avatar-image/styles/AvatarImage.css.js";
+import "../../../../../data-display/avatar/components/avatar-fallback/styles/AvatarFallback.css.js";
+import "../../../../../data-display/avatar/components/avatar-status/styles/AvatarStatus.css.js";
+import "../../../../../data-display/avatar-group/AvatarGroup.js";
+import "../../../../../data-display/badge/Badge.js";
+import "../../../../../data-display/badge/styles/Badge.css.js";
+import "../../../../../data-display/table/Table.js";
+import "../../../../../data-display/table/styles/Table.css.js";
+/* empty css                                                  */
+/* empty css                                                                                              */
+/* empty css                                                                                          */
+/* empty css                                                                                              */
+import "../../../../../data-display/table/components/table-row/styles/TableRow.css.js";
+import "../../../../../data-display/table/components/table-head/styles/TableHead.css.js";
+import "../../../../../data-display/table/components/table-cell/styles/TableCell.css.js";
+/* empty css                                                                                                */
+import "../../../../../actions/button/Button.js";
+import "../../../../../actions/button/styles/Button.css.js";
+import "../../../../../actions/icon-button/IconButton.js";
+import "../../../../../actions/icon-button/styles/IconButton.css.js";
+import "../../../../../actions/toggle/Toggle.js";
+import "../../../../../actions/toggle/styles/Toggle.css.js";
+import "../../../../../actions/toggle-group/ToggleGroup.js";
+import "../../../../../actions/toggle-group/styles/ToggleGroup.css.js";
+import "../../../../../foundation/icon/Icon.js";
+import "../../../../../foundation/icon/styles/Icon.css.js";
+import "../../../../../foundation/typography/Typography.js";
+import "../../../../../foundation/typography/styles/Typography.css.js";
+import "../../../../../forms/autocomplete/Autocomplete.js";
+import "../../../../../forms/autocomplete/components/autocomplete-input/AutocompleteInput.js";
+import "../../../../../forms/autocomplete/components/autocomplete-input/styles/AutocompleteInput.css.js";
+import "../../../../../forms/autocomplete/components/autocomplete-trigger/AutocompleteTrigger.js";
+/* empty css                                                                                                              */
+import "../../../../../forms/autocomplete/components/autocomplete-input-group/AutocompleteInputGroup.js";
+import "../../../../../forms/autocomplete/components/autocomplete-icon/AutocompleteIcon.js";
+import "../../../../../forms/autocomplete/components/autocomplete-clear/AutocompleteClear.js";
+import "../../../../../forms/autocomplete/components/autocomplete-content/AutocompleteContent.js";
+/* empty css                                                                    */
+/* empty css                                                                     */
+/* empty css                                                                             */
+/* empty css                                                                          */
+/* empty css                                                                           */
+/* empty css                                                                        */
+/* empty css                                                                         */
+/* empty css                                                                           */
+/* empty css                                                                            */
+/* empty css                                                                          */
+/* empty css                                                                           */
+/* empty css                                                                           */
+/* empty css                                                                                                              */
+import "../../../../../forms/autocomplete/components/autocomplete-list/AutocompleteList.js";
+import "../../../../../forms/autocomplete/components/autocomplete-group/AutocompleteGroup.js";
+import "../../../../../forms/autocomplete/components/autocomplete-label/AutocompleteLabel.js";
+import "../../../../../forms/autocomplete/components/autocomplete-item/AutocompleteItem.js";
+/* empty css                                                                                                        */
+import "../../../../../forms/autocomplete/components/autocomplete-empty/AutocompleteEmpty.js";
+import "../../../../../forms/autocomplete/components/autocomplete-separator/AutocompleteSeparator.js";
+/* empty css                                                                                                                  */
+import "../../../../../forms/autocomplete/components/autocomplete-status/AutocompleteStatus.js";
+import "../../../../../forms/autocomplete/components/autocomplete-collection/AutocompleteCollection.js";
+import "../../../../../forms/autocomplete/components/autocomplete-field/AutocompleteField.js";
+/* empty css                                                                       */
+import "../../../../../forms/calendar/Calendar.js";
+/* empty css                                                                   */
+/* empty css                                                                                                  */
+/* empty css                                                                   */
+/* empty css                                                                        */
+/* empty css                                                                                                       */
+/* empty css                                                                                                     */
+import "../../../../../forms/checkbox/Checkbox.js";
+/* empty css                                                               */
+import "../../../../../forms/date-picker/DatePicker.js";
+/* empty css                                                                    */
+import "../../../../../forms/radio-group/RadioGroup.js";
+/* empty css                                                                                         */
+import "../../../../../forms/select/Select.js";
+import "../../../../../forms/select/components/select-trigger/SelectTrigger.js";
+import "../../../../../forms/select/components/select-trigger/styles/SelectTrigger.css.js";
+import "../../../../../forms/select/components/select-content/SelectContent.js";
+/* empty css                                                                                            */
+import "../../../../../forms/select/components/select-list/SelectList.js";
+import "../../../../../forms/select/components/select-group/SelectGroup.js";
+import "../../../../../forms/select/components/select-label/SelectLabel.js";
+/* empty css                                                                                        */
+import "../../../../../forms/select/components/select-item/SelectItem.js";
+/* empty css                                                                                      */
+import "../../../../../forms/select/components/select-separator/SelectSeparator.js";
+/* empty css                                                                                                */
+import "../../../../../forms/select/components/select-field/SelectField.js";
+/* empty css                                                           */
+import "../../../../../forms/switch/Switch.js";
+import "../../../../../forms/switch/styles/Switch.css.js";
+import "../../../../../forms/text-area/TextArea.js";
+import "../../../../../forms/text-area/styles/TextArea.css.js";
+/* empty css                                                      */
+/* empty css                                                                                                */
+/* empty css                                                                                                         */
+/* empty css                                                                                                         */
+import "../../../../../forms/text-field/TextField.js";
+import "../../../../../forms/text-field/styles/TextField.css.js";
+/* empty css                                                                                                   */
+/* empty css                                                                                                            */
+/* empty css                                                                                                            */
+/* empty css                                                                    */
+/* empty css                                                                 */
+import "../../../../../forms/_shared/components/helper-text/HelperText.js";
+import d from "../../../../../layout/flex/Flex.js";
+import "../../../../../layout/flex/styles/Flex.css.js";
+import b from "../../../../../layout/grid/Grid.js";
+import "../../../../../layout/grid/styles/Grid.css.js";
+import "../../../../../layout/image/Image.js";
+import "../../../../../layout/image/styles/Image.css.js";
+import O from "../../../../../layout/separator/Separator.js";
+import "../../../../../layout/separator/styles/Separator.css.js";
+import "../../../../../layout/form/Form.js";
+/* empty css                                                        */
+import "../../../../../layout/fieldset/Fieldset.js";
+/* empty css                                                                */
+import "../../../../../layout/legend/Legend.js";
+/* empty css                                                            */
+import "../../../../../surfaces/accordion/Accordion.js";
+/* empty css                                                                    */
+import "../../../../../surfaces/accordion/components/accordion-item/styles/AccordionItem.css.js";
+/* empty css                                                                                                        */
+/* empty css                                                                                                        */
+import "../../../../../surfaces/card/Card.js";
+/* empty css                                                          */
+/* empty css                                                                                       */
+import "../../../../../surfaces/collapsible/Collapsible.js";
+/* empty css                                                                        */
+/* empty css                                                                                                              */
+/* empty css                                                                                                          */
+import "../../../../../navigation/tabs/Tabs.js";
+/* empty css                                                                                           */
+import "../../../../../navigation/tabs/components/tabs-list/styles/TabsList.css.js";
+import "../../../../../navigation/tabs/components/tabs-trigger/styles/TabsTrigger.css.js";
+import "../../../../../navigation/link/Link.js";
+/* empty css                                                            */
+import F from "../../../../tooltip/Tooltip.js";
+import "../../../../tooltip/components/tooltip-provider/TooltipProvider.js";
+/* empty css                                                    */
+import "../../../../dropdown-menu/index.js";
+import "../../../../popover/Popover.js";
+/* empty css                                                                              */
+import "../../../../hover-card/HoverCard.js";
+import "../../../../dialog/Dialog.js";
+/* empty css                                                  */
+/* empty css                                                                                 */
+import "../../../Drawer.js";
+import "../../../styles/Drawer.css.js";
+import "../../../../../feedback/skeleton/Skeleton.js";
+import "../../../../../feedback/skeleton/styles/Skeleton.css.js";
+import "../../../../../feedback/callout/Callout.js";
+import "../../../../../feedback/callout/styles/Callout.css.js";
+/* empty css                                                                                            */
+import "../../../../../feedback/toast/Toast.js";
+import "../../../../../feedback/toast/styles/Toast.css.js";
+/* empty css                                                                                      */
+import "../../../../../feedback/progress/Progress.js";
+import "../../../../../feedback/progress/CircularProgress.js";
+import "../../../../../feedback/progress/styles/Progress.css.js";
+import "../../../../../feedback/progress/constants/progressColors.const.js";
+import { DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT as G, DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT as P } from "./constants/index.js";
+import { useTransitionRender as W } from "../../../../../../hooks/use-transition-render/useTransitionRender.hook.js";
+import { vars as y } from "../../../../../../theme/contract.css.js";
+const H = N(
+  ({
+    label: t,
+    startIcon: s,
+    children: l,
+    trailing: c,
+    sectionLabel: f,
+    "aria-label": h,
+    defaultExpanded: I = !1,
+    expanded: R,
+    onExpandedChange: g,
+    color: T = "primary",
+    disabled: S,
+    className: D,
+    style: E,
+    ..._
+  }) => {
+    const { open: m, itemAttributes: u, sectionId: e, expanded: n, handleToggle: x } = v({
+      defaultExpanded: I,
+      expanded: R,
+      onExpandedChange: g
+    }), o = n, {
+      shouldRenderContent: A,
+      isFadingIn: p
+    } = W(m, y.duration.normal);
+    return /* @__PURE__ */ a(
+      w,
+      {
+        className: D,
+        style: E,
+        children: [
+          /* @__PURE__ */ r(
+            F,
+            {
+              position: "right",
+              content: t,
+              disabled: m,
+              children: /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  disabled: S,
+                  "aria-expanded": o,
+                  "aria-controls": e,
+                  "aria-label": h ?? (m ? void 0 : t),
+                  className: i.recipe({ color: T }),
+                  onClick: x,
+                  ...u,
+                  ..._,
+                  children: /* @__PURE__ */ r(
+                    C,
+                    {
+                      label: t,
+                      startIcon: s,
+                      trailing: c,
+                      endChevronIcon: !0,
+                      expanded: n
+                    }
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ r(
+            b,
+            {
+              id: e,
+              role: "region",
+              "aria-label": f ?? t,
+              "aria-hidden": !o,
+              inert: !o,
+              gridTemplateRows: o ? "1fr" : "0fr",
+              className: i.sectionContent,
+              "data-state": o ? "open" : "closed",
+              children: /* @__PURE__ */ a(
+                d,
+                {
+                  flexDirection: "row",
+                  minHeight: 0,
+                  minWidth: 0,
+                  paddingBottom: o ? "xs" : "none",
+                  overflow: o ? "visible" : "hidden",
+                  gap: "none",
+                  className: i.sectionInner,
+                  children: [
+                    A && /* @__PURE__ */ r(
+                      O,
+                      {
+                        orientation: "vertical",
+                        "data-state": p ? "open" : "closed",
+                        marginRight: p ? P : "none",
+                        marginLeft: p ? G : "none",
+                        className: i.sectionSeparator
+                      }
+                    ),
+                    /* @__PURE__ */ r(
+                      d,
+                      {
+                        flexDirection: "column",
+                        minHeight: 0,
+                        gap: "none",
+                        width: "100%",
+                        children: l
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+H.displayName = "Drawer.SectionItem";
+export {
+  H as default
+};
+//# sourceMappingURL=DrawerSectionItem.js.map

package/dist/components/overlay/drawer/components/items/drawer-section-item/DrawerSectionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSectionItem.js","sources":["../../../../../../../src/components/overlay/drawer/components/items/drawer-section-item/DrawerSectionItem.tsx"],"sourcesContent":["import { memo, type FC } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport { DrawerItemContent } from '@components/overlay/drawer/components/items/_shared'\r\nimport { DRAWER_SECTION_ITEM_STYLES } from '@components/overlay/drawer/components/items/drawer-section-item/styles/DrawerSectionItem.css.ts'\r\nimport { useDrawerSectionItem } from '@components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/useDrawerSectionItem.hook.tsx'\r\nimport type { DrawerSectionItemProps } from '@components/overlay/drawer/components/items/drawer-section-item/types/DrawerSectionItem.props.ts'\r\nimport { Flex, Grid, Separator, Tooltip } from '@components'\r\nimport {\r\n    DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT,\r\n    DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT,\r\n} from '@components/overlay/drawer/components/items/drawer-section-item/constants'\r\nimport { useTransitionRender } from '@hooks/use-transition-render/useTransitionRender.hook.ts'\r\nimport { vars } from '@theme/contract.css.ts'\r\n\r\n/**\r\n * An expandable section row rendered inside a `Drawer`.\r\n *\r\n * Clicking the header toggles the children. The expanded state is\r\n * independent of the drawer open/close state to avoid unwanted transitions.\r\n */\r\nconst DrawerSectionItem: FC<DrawerSectionItemProps> = memo(\r\n    ({\r\n        label,\r\n        startIcon,\r\n        children,\r\n        trailing,\r\n        sectionLabel,\r\n        'aria-label': ariaLabel,\r\n        defaultExpanded = false,\r\n        expanded: expandedProp,\r\n        onExpandedChange,\r\n        color = 'primary',\r\n        disabled,\r\n        className,\r\n        style,\r\n        ...props\r\n    }) => {\r\n        const { open, itemAttributes, sectionId, expanded, handleToggle } =\r\n      useDrawerSectionItem({\r\n          defaultExpanded,\r\n          expanded: expandedProp,\r\n          onExpandedChange,\r\n          disabled,\r\n      })\r\n\r\n        // Children are only shown when the section is expanded.\r\n        const showChildren = expanded\r\n\r\n        // useTransitionRender drives the separator mount/unmount so its margin\r\n        // transition plays fully before it is removed from the DOM (and mounts\r\n        // at margin 0 before animating to its full values).\r\n        const {\r\n            shouldRenderContent: shouldRenderSeparator,\r\n            isFadingIn: isSeparatorFadingIn,\r\n        } = useTransitionRender(open, vars.duration.normal)\r\n\r\n        return (\r\n            <Box\r\n                className={className}\r\n                style={style}\r\n            >\r\n                <Tooltip\r\n                    position={'right'}\r\n                    content={label}\r\n                    disabled={open}\r\n                >\r\n                    <button\r\n                        type={'button'}\r\n                        disabled={disabled}\r\n                        aria-expanded={showChildren}\r\n                        aria-controls={sectionId}\r\n                        aria-label={ariaLabel ?? (open ? undefined : label)}\r\n                        className={DRAWER_SECTION_ITEM_STYLES.recipe({ color })}\r\n                        onClick={handleToggle}\r\n                        {...itemAttributes}\r\n                        {...props}\r\n                    >\r\n                        <DrawerItemContent\r\n                            label={label}\r\n                            startIcon={startIcon}\r\n                            trailing={trailing}\r\n                            endChevronIcon\r\n                            expanded={expanded}\r\n                        />\r\n                    </button>\r\n                </Tooltip>\r\n\r\n                <Grid\r\n                    id={sectionId}\r\n                    role={'region'}\r\n                    aria-label={sectionLabel ?? label}\r\n                    aria-hidden={!showChildren}\r\n                    inert={!showChildren}\r\n                    gridTemplateRows={showChildren ? '1fr' : '0fr'}\r\n                    className={DRAWER_SECTION_ITEM_STYLES.sectionContent}\r\n                    data-state={showChildren ? 'open' : 'closed'}\r\n                >\r\n                    <Flex\r\n                        flexDirection={'row'}\r\n                        minHeight={0}\r\n                        minWidth={0}\r\n                        paddingBottom={showChildren ? 'xs' : 'none'}\r\n                        overflow={showChildren ? 'visible' : 'hidden'}\r\n                        gap={'none'}\r\n                        className={DRAWER_SECTION_ITEM_STYLES.sectionInner}\r\n                    >\r\n                        {shouldRenderSeparator && (\r\n                            <Separator\r\n                                orientation={'vertical'}\r\n                                data-state={isSeparatorFadingIn ? 'open' : 'closed'}\r\n                                marginRight={\r\n                                    isSeparatorFadingIn\r\n                                        ? DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT\r\n                                        : 'none'\r\n                                }\r\n                                marginLeft={\r\n                                    isSeparatorFadingIn\r\n                                        ? DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT\r\n                                        : 'none'\r\n                                }\r\n                                className={DRAWER_SECTION_ITEM_STYLES.sectionSeparator}\r\n                            />\r\n                        )}\r\n                        <Flex\r\n                            flexDirection={'column'}\r\n                            minHeight={0}\r\n                            gap={'none'}\r\n                            width={'100%'}\r\n                        >\r\n                            {children}\r\n                        </Flex>\r\n                    </Flex>\r\n                </Grid>\r\n            </Box>\r\n        )\r\n    },\r\n)\r\n\r\nDrawerSectionItem.displayName = 'Drawer.SectionItem'\r\n\r\nexport default DrawerSectionItem\r\n"],"names":["DrawerSectionItem","memo","label","startIcon","children","trailing","sectionLabel","ariaLabel","defaultExpanded","expandedProp","onExpandedChange","color","disabled","className","style","props","open","itemAttributes","sectionId","expanded","handleToggle","useDrawerSectionItem","showChildren","shouldRenderSeparator","isSeparatorFadingIn","useTransitionRender","vars","jsxs","Box","jsx","Tooltip","DRAWER_SECTION_ITEM_STYLES","DrawerItemContent","Grid","Flex","Separator","DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT","DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,IAAgDC;AAAA,EAClD,CAAC;AAAA,IACG,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAcC;AAAA,IACd,iBAAAC,IAAkB;AAAA,IAClB,UAAUC;AAAA,IACV,kBAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,MACD;AACF,UAAM,EAAE,MAAAC,GAAM,gBAAAC,GAAgB,WAAAC,GAAW,UAAAC,GAAU,cAAAC,EAAA,IACrDC,EAAqB;AAAA,MACjB,iBAAAb;AAAA,MACA,UAAUC;AAAA,MACV,kBAAAC;AAAA,IAEJ,CAAC,GAGOY,IAAeH,GAKf;AAAA,MACF,qBAAqBI;AAAA,MACrB,YAAYC;AAAA,IAAA,IACZC,EAAoBT,GAAMU,EAAK,SAAS,MAAM;AAElD,WACI,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,WAAAf;AAAA,QACA,OAAAC;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAe;AAAA,YAACC;AAAA,YAAA;AAAA,cACG,UAAU;AAAA,cACV,SAAS5B;AAAA,cACT,UAAUc;AAAA,cAEV,UAAA,gBAAAa;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,MAAM;AAAA,kBACN,UAAAjB;AAAA,kBACA,iBAAeU;AAAA,kBACf,iBAAeJ;AAAA,kBACf,cAAYX,MAAcS,IAAO,SAAYd;AAAA,kBAC7C,WAAW6B,EAA2B,OAAO,EAAE,OAAApB,GAAO;AAAA,kBACtD,SAASS;AAAA,kBACR,GAAGH;AAAA,kBACH,GAAGF;AAAA,kBAEJ,UAAA,gBAAAc;AAAA,oBAACG;AAAA,oBAAA;AAAA,sBACG,OAAA9B;AAAA,sBACA,WAAAC;AAAA,sBACA,UAAAE;AAAA,sBACA,gBAAc;AAAA,sBACd,UAAAc;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,UAGJ,gBAAAU;AAAA,YAACI;AAAA,YAAA;AAAA,cACG,IAAIf;AAAA,cACJ,MAAM;AAAA,cACN,cAAYZ,KAAgBJ;AAAA,cAC5B,eAAa,CAACoB;AAAA,cACd,OAAO,CAACA;AAAA,cACR,kBAAkBA,IAAe,QAAQ;AAAA,cACzC,WAAWS,EAA2B;AAAA,cACtC,cAAYT,IAAe,SAAS;AAAA,cAEpC,UAAA,gBAAAK;AAAA,gBAACO;AAAA,gBAAA;AAAA,kBACG,eAAe;AAAA,kBACf,WAAW;AAAA,kBACX,UAAU;AAAA,kBACV,eAAeZ,IAAe,OAAO;AAAA,kBACrC,UAAUA,IAAe,YAAY;AAAA,kBACrC,KAAK;AAAA,kBACL,WAAWS,EAA2B;AAAA,kBAErC,UAAA;AAAA,oBAAAR,KACG,gBAAAM;AAAA,sBAACM;AAAA,sBAAA;AAAA,wBACG,aAAa;AAAA,wBACb,cAAYX,IAAsB,SAAS;AAAA,wBAC3C,aACIA,IACMY,IACA;AAAA,wBAEV,YACIZ,IACMa,IACA;AAAA,wBAEV,WAAWN,EAA2B;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAG9C,gBAAAF;AAAA,sBAACK;AAAA,sBAAA;AAAA,wBACG,eAAe;AAAA,wBACf,WAAW;AAAA,wBACX,KAAK;AAAA,wBACL,OAAO;AAAA,wBAEN,UAAA9B;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACL;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AAEAJ,EAAkB,cAAc;"}

package/dist/components/overlay/drawer/components/items/drawer-section-item/constants/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="lg2",E="sm";exports.DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT=_;exports.DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT=E;
+//# sourceMappingURL=index.cjs.map

package/dist/components/overlay/drawer/components/items/drawer-section-item/constants/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../../../../../src/components/overlay/drawer/components/items/drawer-section-item/constants/index.ts"],"sourcesContent":["import type { BoxSpace } from '@components/layout/box/types/Box.types.ts'\r\n\r\ntype PaddingVariant = BoxSpace\r\n\r\n/**\r\n * Left padding of the drawer section item collapsible content area.\r\n */\r\nexport const DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT: PaddingVariant = 'lg2'\r\n\r\n/**\r\n * Right padding of the drawer section item collapsible content area.\r\n */\r\nexport const DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT: PaddingVariant = 'sm'\r\n"],"names":["DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT","DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT"],"mappings":"gFAOO,MAAMA,EAA6D,MAK7DC,EAA8D"}

package/dist/components/overlay/drawer/components/items/drawer-section-item/constants/index.d.ts

@@ -0,0 +1,11 @@
+import { BoxSpace } from '../../../../../../layout/box/types/Box.types.ts';
+type PaddingVariant = BoxSpace;
+/**
+ * Left padding of the drawer section item collapsible content area.
+ */
+export declare const DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT: PaddingVariant;
+/**
+ * Right padding of the drawer section item collapsible content area.
+ */
+export declare const DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT: PaddingVariant;
+export {};

package/dist/components/overlay/drawer/components/items/drawer-section-item/constants/index.js

@@ -0,0 +1,6 @@
+const _ = "lg2", E = "sm";
+export {
+  _ as DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT,
+  E as DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT
+};
+//# sourceMappingURL=index.js.map

package/dist/components/overlay/drawer/components/items/drawer-section-item/constants/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../../src/components/overlay/drawer/components/items/drawer-section-item/constants/index.ts"],"sourcesContent":["import type { BoxSpace } from '@components/layout/box/types/Box.types.ts'\r\n\r\ntype PaddingVariant = BoxSpace\r\n\r\n/**\r\n * Left padding of the drawer section item collapsible content area.\r\n */\r\nexport const DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT: PaddingVariant = 'lg2'\r\n\r\n/**\r\n * Right padding of the drawer section item collapsible content area.\r\n */\r\nexport const DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT: PaddingVariant = 'sm'\r\n"],"names":["DRAWER_SECTION_ITEM_SEPARATOR_PADDING_LEFT","DRAWER_SECTION_ITEM_SEPARATOR_PADDING_RIGHT"],"mappings":"AAOO,MAAMA,IAA6D,OAK7DC,IAA8D;"}

package/dist/components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/types/index.d.ts

@@ -0,0 +1,12 @@
+import { useDrawerItemAttributes } from '../../../../_shared';
+import { DrawerSectionItemProps } from '../../../types/DrawerSectionItem.props.ts';
+export type UseDrawerSectionItemOptions = Pick<DrawerSectionItemProps, 'defaultExpanded' | 'expanded' | 'onExpandedChange' | 'disabled'>;
+export type UseDrawerSectionItemReturn = {
+    open: ReturnType<typeof useDrawerItemAttributes>['open'];
+    state: ReturnType<typeof useDrawerItemAttributes>['state'];
+    resolvedIconSize: ReturnType<typeof useDrawerItemAttributes>['resolvedIconSize'];
+    itemAttributes: ReturnType<typeof useDrawerItemAttributes>['itemAttributes'];
+    sectionId: string;
+    expanded: boolean;
+    handleToggle: () => void;
+};

package/dist/components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/useDrawerSectionItem.hook.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react");require("../../../_shared/styles/DrawerItemShared.css.cjs");require("../../../../../context/Drawer.context.cjs");const S=require("../../../_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.cjs");require("../../../_shared/components/drawer-item-content/DrawerItemContent.cjs");const g=({defaultExpanded:i=!1,expanded:s,onExpandedChange:n})=>{const{open:c,state:u,resolvedIconSize:a,itemAttributes:d}=S.useDrawerItemAttributes(),l=`${r.useId()}-section`,[I,b]=r.useState(i),e=s!==void 0,t=e?s:I,m=r.useCallback(()=>{const o=!t;e||b(o),n?.(o)},[t,e,n]);return{open:c,state:u,resolvedIconSize:a,itemAttributes:d,sectionId:l,expanded:t,handleToggle:m}};exports.useDrawerSectionItem=g;
+//# sourceMappingURL=useDrawerSectionItem.hook.cjs.map

package/dist/components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/useDrawerSectionItem.hook.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerSectionItem.hook.cjs","sources":["../../../../../../../../../src/components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/useDrawerSectionItem.hook.tsx"],"sourcesContent":["import {\r\n    useCallback,\r\n    useId,\r\n    useState,\r\n} from 'react'\r\n\r\nimport { useDrawerItemAttributes } from '@components/overlay/drawer/components/items/_shared'\r\nimport type {\r\n    UseDrawerSectionItemOptions,\r\n    UseDrawerSectionItemReturn\r\n} from '@components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/types'\r\n\r\nexport const useDrawerSectionItem = ({\r\n    defaultExpanded = false,\r\n    expanded: expandedProp,\r\n    onExpandedChange,\r\n}: UseDrawerSectionItemOptions): UseDrawerSectionItemReturn => {\r\n    const { open, state, resolvedIconSize, itemAttributes } = useDrawerItemAttributes()\r\n    const generatedId = useId()\r\n    const sectionId = `${generatedId}-section`\r\n    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)\r\n    const isControlled = expandedProp !== undefined\r\n    const expanded = isControlled ? expandedProp : internalExpanded\r\n\r\n    const handleToggle = useCallback(() => {\r\n        const next = !expanded\r\n        if (!isControlled) {\r\n            setInternalExpanded(next)\r\n        }\r\n        onExpandedChange?.(next)\r\n    }, [expanded, isControlled, onExpandedChange])\r\n\r\n    return {\r\n        open,\r\n        state,\r\n        resolvedIconSize,\r\n        itemAttributes,\r\n        sectionId,\r\n        expanded,\r\n        handleToggle,\r\n    }\r\n}\r\n"],"names":["useDrawerSectionItem","defaultExpanded","expandedProp","onExpandedChange","open","state","resolvedIconSize","itemAttributes","useDrawerItemAttributes","sectionId","useId","internalExpanded","setInternalExpanded","useState","isControlled","expanded","handleToggle","useCallback","next"],"mappings":"iZAYO,MAAMA,EAAuB,CAAC,CACjC,gBAAAC,EAAkB,GAClB,SAAUC,EACV,iBAAAC,CACJ,IAA+D,CAC3D,KAAM,CAAE,KAAAC,EAAM,MAAAC,EAAO,iBAAAC,EAAkB,eAAAC,CAAA,EAAmBC,EAAAA,wBAAA,EAEpDC,EAAY,GADEC,EAAAA,MAAA,CACY,WAC1B,CAACC,EAAkBC,CAAmB,EAAIC,EAAAA,SAASZ,CAAe,EAClEa,EAAeZ,IAAiB,OAChCa,EAAWD,EAAeZ,EAAeS,EAEzCK,EAAeC,EAAAA,YAAY,IAAM,CACnC,MAAMC,EAAO,CAACH,EACTD,GACDF,EAAoBM,CAAI,EAE5Bf,IAAmBe,CAAI,CAC3B,EAAG,CAACH,EAAUD,EAAcX,CAAgB,CAAC,EAE7C,MAAO,CACH,KAAAC,EACA,MAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,UAAAE,EACA,SAAAM,EACA,aAAAC,CAAA,CAER"}

package/dist/components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/useDrawerSectionItem.hook.d.ts

@@ -0,0 +1,2 @@
+import { UseDrawerSectionItemOptions, UseDrawerSectionItemReturn } from './types';
+export declare const useDrawerSectionItem: ({ defaultExpanded, expanded: expandedProp, onExpandedChange, }: UseDrawerSectionItemOptions) => UseDrawerSectionItemReturn;

package/dist/components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/useDrawerSectionItem.hook.js

@@ -0,0 +1,28 @@
+import { useId as I, useState as f, useCallback as x } from "react";
+import "../../../_shared/styles/DrawerItemShared.css.js";
+import "../../../../../context/Drawer.context.js";
+import { useDrawerItemAttributes as b } from "../../../_shared/hooks/use-drawer-item-attributes/useDrawerItemAttributes.hook.js";
+import "../../../_shared/components/drawer-item-content/DrawerItemContent.js";
+const k = ({
+  defaultExpanded: r = !1,
+  expanded: o,
+  onExpandedChange: n
+}) => {
+  const { open: i, state: c, resolvedIconSize: d, itemAttributes: a } = b(), l = `${I()}-section`, [m, p] = f(r), e = o !== void 0, t = e ? o : m, u = x(() => {
+    const s = !t;
+    e || p(s), n?.(s);
+  }, [t, e, n]);
+  return {
+    open: i,
+    state: c,
+    resolvedIconSize: d,
+    itemAttributes: a,
+    sectionId: l,
+    expanded: t,
+    handleToggle: u
+  };
+};
+export {
+  k as useDrawerSectionItem
+};
+//# sourceMappingURL=useDrawerSectionItem.hook.js.map

package/dist/components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/useDrawerSectionItem.hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerSectionItem.hook.js","sources":["../../../../../../../../../src/components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/useDrawerSectionItem.hook.tsx"],"sourcesContent":["import {\r\n    useCallback,\r\n    useId,\r\n    useState,\r\n} from 'react'\r\n\r\nimport { useDrawerItemAttributes } from '@components/overlay/drawer/components/items/_shared'\r\nimport type {\r\n    UseDrawerSectionItemOptions,\r\n    UseDrawerSectionItemReturn\r\n} from '@components/overlay/drawer/components/items/drawer-section-item/hooks/use-drawer-section-item/types'\r\n\r\nexport const useDrawerSectionItem = ({\r\n    defaultExpanded = false,\r\n    expanded: expandedProp,\r\n    onExpandedChange,\r\n}: UseDrawerSectionItemOptions): UseDrawerSectionItemReturn => {\r\n    const { open, state, resolvedIconSize, itemAttributes } = useDrawerItemAttributes()\r\n    const generatedId = useId()\r\n    const sectionId = `${generatedId}-section`\r\n    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)\r\n    const isControlled = expandedProp !== undefined\r\n    const expanded = isControlled ? expandedProp : internalExpanded\r\n\r\n    const handleToggle = useCallback(() => {\r\n        const next = !expanded\r\n        if (!isControlled) {\r\n            setInternalExpanded(next)\r\n        }\r\n        onExpandedChange?.(next)\r\n    }, [expanded, isControlled, onExpandedChange])\r\n\r\n    return {\r\n        open,\r\n        state,\r\n        resolvedIconSize,\r\n        itemAttributes,\r\n        sectionId,\r\n        expanded,\r\n        handleToggle,\r\n    }\r\n}\r\n"],"names":["useDrawerSectionItem","defaultExpanded","expandedProp","onExpandedChange","open","state","resolvedIconSize","itemAttributes","useDrawerItemAttributes","sectionId","useId","internalExpanded","setInternalExpanded","useState","isControlled","expanded","handleToggle","useCallback","next"],"mappings":";;;;;AAYO,MAAMA,IAAuB,CAAC;AAAA,EACjC,iBAAAC,IAAkB;AAAA,EAClB,UAAUC;AAAA,EACV,kBAAAC;AACJ,MAA+D;AAC3D,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,kBAAAC,GAAkB,gBAAAC,EAAA,IAAmBC,EAAA,GAEpDC,IAAY,GADEC,EAAA,CACY,YAC1B,CAACC,GAAkBC,CAAmB,IAAIC,EAASZ,CAAe,GAClEa,IAAeZ,MAAiB,QAChCa,IAAWD,IAAeZ,IAAeS,GAEzCK,IAAeC,EAAY,MAAM;AACnC,UAAMC,IAAO,CAACH;AACd,IAAKD,KACDF,EAAoBM,CAAI,GAE5Bf,IAAmBe,CAAI;AAAA,EAC3B,GAAG,CAACH,GAAUD,GAAcX,CAAgB,CAAC;AAE7C,SAAO;AAAA,IACH,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAE;AAAA,IACA,UAAAM;AAAA,IACA,cAAAC;AAAA,EAAA;AAER;"}

package/dist/components/overlay/drawer/components/items/drawer-section-item/index.d.ts

@@ -0,0 +1,3 @@
+export { default as DrawerSectionItem } from './DrawerSectionItem.tsx';
+export { useDrawerSectionItem } from './hooks/use-drawer-section-item/useDrawerSectionItem.hook.tsx';
+export type { DrawerSectionItemProps } from './types/DrawerSectionItem.props.ts';

package/dist/components/overlay/drawer/components/items/drawer-section-item/styles/DrawerSectionItem.css.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});;/* empty css                                                       */;/* empty css                                                         */;/* empty css                                                           */;/* empty css                                                           */;/* empty css                                                                         */;/* empty css                                                                          */;/* empty css                                                                                  */;/* empty css                                                                               */;/* empty css                                                                                */;/* empty css                                                                             */;/* empty css                                                                              */;/* empty css                                                                                */;/* empty css                                                                                 */;/* empty css                                                                               */;/* empty css                                                                                */;/* empty css                                                                                */;/* empty css                                                                 */;/* empty css                                                                             */;/* empty css                                                                                     */;/* empty css                                       */const r=require("@vanilla-extract/recipes/createRuntimeFn");var e={recipe:r.createRuntimeFn({defaultClassName:"lux2bn1",variantClassNames:{variant:{default:"lux2bn2",outlined:"lux2bn3"},color:{primary:"lux2bn4",secondary:"lux2bn5",tertiary:"lux2bn6",destructive:"lux2bn7",success:"lux2bn8",warning:"lux2bn9",info:"lux2bna"}},defaultVariants:{variant:"default",color:"primary"},compoundVariants:[[{variant:"default",color:"primary"},"lux2bnb"],[{variant:"default",color:"secondary"},"lux2bnc"],[{variant:"default",color:"tertiary"},"lux2bnd"],[{variant:"default",color:"destructive"},"lux2bne"],[{variant:"default",color:"success"},"lux2bnf"],[{variant:"default",color:"warning"},"lux2bng"],[{variant:"default",color:"info"},"lux2bnh"],[{variant:"outlined",color:"primary"},"lux2bni"],[{variant:"outlined",color:"secondary"},"lux2bnj"],[{variant:"outlined",color:"tertiary"},"lux2bnk"],[{variant:"outlined",color:"destructive"},"lux2bnl"],[{variant:"outlined",color:"success"},"lux2bnm"],[{variant:"outlined",color:"warning"},"lux2bnn"],[{variant:"outlined",color:"info"},"lux2bno"]]}),content:"lux2bn0",sectionContent:"kcmo9t0",sectionInner:"kcmo9t1",sectionSeparator:"kcmo9t2"};exports.DRAWER_SECTION_ITEM_STYLES=e;
+//# sourceMappingURL=DrawerSectionItem.css.cjs.map

package/dist/components/overlay/drawer/components/items/drawer-section-item/styles/DrawerSectionItem.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSectionItem.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/overlay/drawer/components/items/drawer-section-item/styles/DrawerSectionItem.css.d.ts

@@ -0,0 +1,22 @@
+import { RuntimeFn } from '@vanilla-extract/recipes';
+export declare const DRAWER_SECTION_ITEM_STYLES: {
+    recipe: RuntimeFn<{
+        variant: {
+            default: {};
+            outlined: {};
+        };
+        color: {
+            primary: {};
+            secondary: {};
+            tertiary: {};
+            destructive: {};
+            success: {};
+            warning: {};
+            info: {};
+        };
+    }>;
+    sectionContent: string;
+    sectionInner: string;
+    sectionSeparator: string;
+    content: string;
+};

package/dist/components/overlay/drawer/components/items/drawer-section-item/styles/DrawerSectionItem.css.js

@@ -0,0 +1,26 @@
+/* empty css                                                     */
+/* empty css                                                       */
+/* empty css                                                         */
+/* empty css                                                         */
+/* empty css                                                                       */
+/* empty css                                                                        */
+/* empty css                                                                                */
+/* empty css                                                                             */
+/* empty css                                                                              */
+/* empty css                                                                           */
+/* empty css                                                                            */
+/* empty css                                                                              */
+/* empty css                                                                               */
+/* empty css                                                                             */
+/* empty css                                                                              */
+/* empty css                                                                              */
+/* empty css                                                               */
+/* empty css                                                                           */
+/* empty css                                                                                   */
+/* empty css                                     */
+import { createRuntimeFn as r } from "@vanilla-extract/recipes/createRuntimeFn";
+var E = { recipe: r({ defaultClassName: "lux2bn1", variantClassNames: { variant: { default: "lux2bn2", outlined: "lux2bn3" }, color: { primary: "lux2bn4", secondary: "lux2bn5", tertiary: "lux2bn6", destructive: "lux2bn7", success: "lux2bn8", warning: "lux2bn9", info: "lux2bna" } }, defaultVariants: { variant: "default", color: "primary" }, compoundVariants: [[{ variant: "default", color: "primary" }, "lux2bnb"], [{ variant: "default", color: "secondary" }, "lux2bnc"], [{ variant: "default", color: "tertiary" }, "lux2bnd"], [{ variant: "default", color: "destructive" }, "lux2bne"], [{ variant: "default", color: "success" }, "lux2bnf"], [{ variant: "default", color: "warning" }, "lux2bng"], [{ variant: "default", color: "info" }, "lux2bnh"], [{ variant: "outlined", color: "primary" }, "lux2bni"], [{ variant: "outlined", color: "secondary" }, "lux2bnj"], [{ variant: "outlined", color: "tertiary" }, "lux2bnk"], [{ variant: "outlined", color: "destructive" }, "lux2bnl"], [{ variant: "outlined", color: "success" }, "lux2bnm"], [{ variant: "outlined", color: "warning" }, "lux2bnn"], [{ variant: "outlined", color: "info" }, "lux2bno"]] }), content: "lux2bn0", sectionContent: "kcmo9t0", sectionInner: "kcmo9t1", sectionSeparator: "kcmo9t2" };
+export {
+  E as DRAWER_SECTION_ITEM_STYLES
+};
+//# sourceMappingURL=DrawerSectionItem.css.js.map

package/dist/components/overlay/drawer/components/items/drawer-section-item/styles/DrawerSectionItem.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSectionItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/overlay/drawer/components/items/drawer-section-item/types/DrawerSectionItem.props.d.ts

@@ -0,0 +1,26 @@
+import { DrawerItemColor } from '../../_shared';
+import { ReactNode } from 'react';
+import type * as React from 'react';
+/** Props for `Drawer.SectionItem`. */
+export type DrawerSectionItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick'> & {
+    /** Visible text label for the section header. */
+    label: string;
+    /** Icon rendered before the label. */
+    startIcon: string;
+    /** Items rendered inside the collapsible section. */
+    children: ReactNode;
+    /** Optional content rendered at the end of the header (e.g. a badge). */
+    trailing?: ReactNode;
+    /** Accessible label for the section region. Defaults to `label`. */
+    sectionLabel?: string;
+    /** Initial expanded state when uncontrolled. @default false */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Called when the expanded state changes. */
+    onExpandedChange?: (expanded: boolean) => void;
+    /** Color intent for the header row. @default 'primary' */
+    color?: DrawerItemColor;
+    /** Accessible label for the section header. Defaults to `label`. */
+    'aria-label'?: string;
+};

package/dist/components/overlay/drawer/components/variants/drawer-inline/DrawerInline.cjs

@@ -0,0 +1,2 @@
+"use strict";const N=require("react/jsx-runtime"),i=require("react"),o=require("../../../../../layout/box/Box.cjs");require("../../../../../layout/box/styles/Box.css.cjs");const s=require("../../../styles/Drawer.css.cjs"),n=require("./styles/DrawerInline.css.cjs"),q=require("../../../../../../utils/cn.cjs"),t=i.memo(({open:e,size:a,sizeWidthMap:c,backgroundColor:r,accessibleName:l,ariaLabelledBy:E,children:R,className:u,style:S,...D})=>{const _=i.useMemo(()=>r?s.DRAWER_STYLES.recipe({backgroundColor:r}):void 0,[r]),m=q.cn(s.DRAWER_STYLES.panel,n.DRAWER_INLINE_STYLES.panel,!e&&n.DRAWER_INLINE_STYLES.closed,s.DRAWER_STYLES.size[a],_,u);return N.jsx(o,{className:m,style:{width:e?c[a]:0,...S},"aria-label":l,"aria-labelledby":E,"aria-hidden":!e,inert:!e,...D,children:R})});t.displayName="Drawer.Inline";module.exports=t;
+//# sourceMappingURL=DrawerInline.cjs.map

package/dist/components/overlay/drawer/components/variants/drawer-inline/DrawerInline.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerInline.cjs","sources":["../../../../../../../src/components/overlay/drawer/components/variants/drawer-inline/DrawerInline.tsx"],"sourcesContent":["import { memo, type FC, useMemo } from 'react'\r\n\r\nimport { Box } from '@components/layout/box'\r\nimport { DRAWER_STYLES } from '@components/overlay/drawer/styles/Drawer.css.ts'\r\nimport { DRAWER_INLINE_STYLES } from '@components/overlay/drawer/components/variants/drawer-inline/styles/DrawerInline.css.ts'\r\nimport type { DrawerInlineProps } from '@components/overlay/drawer/components/variants/drawer-inline/types/DrawerInline.props.ts'\r\nimport { cn } from '@utils/cn.ts'\r\n\r\n/**\r\n * Inline drawer renderer.\r\n *\r\n * Renders the drawer as a layout element that takes space when open\r\n * and collapses to `width: 0` when closed.\r\n */\r\nconst DrawerInline: FC<DrawerInlineProps> = memo(({\r\n    open,\r\n    size,\r\n    sizeWidthMap,\r\n    backgroundColor,\r\n    accessibleName,\r\n    ariaLabelledBy,\r\n    children,\r\n    className,\r\n    style,\r\n    ...props\r\n}) => {\r\n    const backgroundClassName = useMemo(\r\n        () =>\r\n            backgroundColor ? DRAWER_STYLES.recipe({ backgroundColor }) : undefined,\r\n        [backgroundColor],\r\n    )\r\n\r\n    const panelClassName = cn(\r\n        DRAWER_STYLES.panel,\r\n        DRAWER_INLINE_STYLES.panel,\r\n        !open && DRAWER_INLINE_STYLES.closed,\r\n        DRAWER_STYLES.size[size],\r\n        backgroundClassName,\r\n        className,\r\n    )\r\n\r\n    return (\r\n        <Box\r\n            className={panelClassName}\r\n            style={{ width: open ? sizeWidthMap[size] : 0, ...style }}\r\n            aria-label={accessibleName}\r\n            aria-labelledby={ariaLabelledBy}\r\n            aria-hidden={!open}\r\n            inert={!open}\r\n            {...props}\r\n        >\r\n            {children}\r\n        </Box>\r\n    )\r\n})\r\n\r\nDrawerInline.displayName = 'Drawer.Inline'\r\n\r\nexport default DrawerInline\r\n"],"names":["DrawerInline","memo","open","size","sizeWidthMap","backgroundColor","accessibleName","ariaLabelledBy","children","className","style","props","backgroundClassName","useMemo","DRAWER_STYLES","panelClassName","cn","DRAWER_INLINE_STYLES","jsx","Box"],"mappings":"qTAcMA,EAAsCC,EAAAA,KAAK,CAAC,CAC9C,KAAAC,EACA,KAAAC,EACA,aAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,eAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,GAAGC,CACP,IAAM,CACF,MAAMC,EAAsBC,EAAAA,QACxB,IACIR,EAAkBS,EAAAA,cAAc,OAAO,CAAE,gBAAAT,CAAA,CAAiB,EAAI,OAClE,CAACA,CAAe,CAAA,EAGdU,EAAiBC,EAAAA,GACnBF,EAAAA,cAAc,MACdG,EAAAA,qBAAqB,MACrB,CAACf,GAAQe,EAAAA,qBAAqB,OAC9BH,EAAAA,cAAc,KAAKX,CAAI,EACvBS,EACAH,CAAA,EAGJ,OACIS,EAAAA,IAACC,EAAA,CACG,UAAWJ,EACX,MAAO,CAAE,MAAOb,EAAOE,EAAaD,CAAI,EAAI,EAAG,GAAGO,CAAA,EAClD,aAAYJ,EACZ,kBAAiBC,EACjB,cAAa,CAACL,EACd,MAAO,CAACA,EACP,GAAGS,EAEH,SAAAH,CAAA,CAAA,CAGb,CAAC,EAEDR,EAAa,YAAc"}

package/dist/components/overlay/drawer/components/variants/drawer-inline/DrawerInline.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { DrawerInlineProps } from './types/DrawerInline.props.ts';
+/**
+ * Inline drawer renderer.
+ *
+ * Renders the drawer as a layout element that takes space when open
+ * and collapses to `width: 0` when closed.
+ */
+declare const DrawerInline: FC<DrawerInlineProps>;
+export default DrawerInline;

package/dist/components/overlay/drawer/components/variants/drawer-inline/DrawerInline.js

@@ -0,0 +1,49 @@
+import { jsx as N } from "react/jsx-runtime";
+import { memo as E, useMemo as D } from "react";
+import I from "../../../../../layout/box/Box.js";
+import "../../../../../layout/box/styles/Box.css.js";
+import { DRAWER_STYLES as r } from "../../../styles/Drawer.css.js";
+import { DRAWER_INLINE_STYLES as i } from "./styles/DrawerInline.css.js";
+import { cn as R } from "../../../../../../utils/cn.js";
+const S = E(({
+  open: e,
+  size: m,
+  sizeWidthMap: t,
+  backgroundColor: a,
+  accessibleName: l,
+  ariaLabelledBy: s,
+  children: o,
+  className: n,
+  style: p,
+  ...d
+}) => {
+  const f = D(
+    () => a ? r.recipe({ backgroundColor: a }) : void 0,
+    [a]
+  ), c = R(
+    r.panel,
+    i.panel,
+    !e && i.closed,
+    r.size[m],
+    f,
+    n
+  );
+  return /* @__PURE__ */ N(
+    I,
+    {
+      className: c,
+      style: { width: e ? t[m] : 0, ...p },
+      "aria-label": l,
+      "aria-labelledby": s,
+      "aria-hidden": !e,
+      inert: !e,
+      ...d,
+      children: o
+    }
+  );
+});
+S.displayName = "Drawer.Inline";
+export {
+  S as default
+};
+//# sourceMappingURL=DrawerInline.js.map