sellmate-design-system-react 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export type { Rule } from './lib/form';
 export * from './components/SIcon';
 export * from './components/SBadge';
 export * from './components/SCard';
+export * from './components/SExpansionItem';
 export * from './components/SDivider';
 export * from './components/SScrollArea';
 export * from './components/STag';

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
-import { forwardRef, useState, useEffect, useRef, useCallback, createContext, useImperativeHandle, useMemo, useContext, useId, useLayoutEffect, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import { forwardRef, useState, Children, useId, useEffect, useRef, useCallback, createContext, useImperativeHandle, useMemo, useContext, useLayoutEffect, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { createRoot } from 'react-dom/client';
@@ -2892,6 +2892,76 @@ var SCard = forwardRef(function SCard2({ bordered = false, className, children,
     }
   );
 });
+var SExpansionItem = forwardRef(
+  function SExpansionItem2({
+    title,
+    depth = 1,
+    leading,
+    trailing,
+    bodyPadding = true,
+    expanded,
+    defaultExpanded = false,
+    dense = false,
+    disabled = false,
+    onToggle,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const isExpanded = expanded ?? internalExpanded;
+    const hasBody = Children.toArray(children).some(
+      (child) => child !== null && child !== void 0 && (typeof child !== "string" || child.trim() !== "")
+    );
+    const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, disabled }) : leading;
+    const id = useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group overflow-hidden bg-[var(--cmp-expansionItem-title-bg-default)]",
+          className
+        ),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              disabled,
+              "aria-expanded": isExpanded,
+              "aria-controls": id,
+              onClick: (event) => {
+                if (disabled) return;
+                const next = !isExpanded;
+                if (expanded === void 0) setInternalExpanded(next);
+                onToggle?.(next, event);
+              },
+              className: cn(
+                "flex w-full items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-[var(--cmp-expansionItem-title-text-default)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--sys-color-border-accent)] disabled:cursor-not-allowed disabled:text-[var(--sys-color-disabled-text)] cursor-pointer",
+                isExpanded && "border-b border-[var(--cmp-expansionItem-title-border)]",
+                !isExpanded && "hover:bg-[var(--cmp-expansionItem-title-bg-hover)]",
+                dense ? "min-h-8 py-[var(--cmp-expansionItem-title-paddingY-dense)]" : "min-h-10 py-[var(--cmp-expansionItem-title-paddingY-normal)]",
+                "gap-[var(--cmp-expansionItem-title-gap)]",
+                "pr-[var(--cmp-expansionItem-title-paddingX)]",
+                depth === 2 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+64px)]" : "pl-[var(--cmp-expansionItem-title-paddingX)]",
+                isExpanded && "bg-[var(--cmp-expansionItem-title-bg-expanded)] text-[var(--cmp-expansionItem-title-text-expanded)]"
+              ),
+              children: [
+                !leading && hasBody && /* @__PURE__ */ jsx(SIcon, { name: isExpanded ? "caretUp" : "caretDown", size: 12 }),
+                leadingNode,
+                /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx("span", { children: title }) }),
+                trailing
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { id, hidden: !isExpanded, className: "bg-[var(--cmp-expansionItem-body-bg)]", children: /* @__PURE__ */ jsx("div", { className: bodyPadding ? "p-[var(--cmp-expansionItem-body-padding)]" : void 0, children }) })
+        ]
+      }
+    );
+  }
+);
 var SDivider = forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
   return /* @__PURE__ */ jsx(
     "hr",
@@ -11489,6 +11559,6 @@ function STimeRangePicker({
   );
 }
 
-export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
+export { BADGE_COLORS, BUTTON_COLORS, BUTTON_SIZES, COLOR_KEYS, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, ICONS, PAGE_BACKGROUNDS, SActionModal, SBadge, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCallout, SCard, SCheckbox, SChip, SChipInput, SCircleProgress, SConfirmModal, SDatePicker, SDateRangePicker, SDivider, SDropdownButton, SExpansionItem, SField, SFilePicker, SForm, SGhostButton, SGnb, SGuide, SIcon, SInput, SKeyValueTable, SLayout, SLayoutContext, SLinearProgress, SLoadingContainer, SLoadingModal, SLoadingViewport, SNumberInput, SPage, SPagination, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioGroup, SScrollArea, SSelect, SStepper, SSwitch, STEPPER_SIZES, STable, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, SToast, SToastContainer, SToggle, STooltip, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, findGnbAncestors, findGnbRailValue, isColorKey, loading, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map