@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/Rate/Rate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rate.js","sources":["../../../../src/components/Rate/Rate.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef } from \"react\";\nimport type { KeyboardEvent } from \"react\";\nimport { Star, StarHalf } from \"lucide-react\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport interface RateProps {\n  // Display\n  count?: number;\n  value?: number;\n  defaultValue?: number;\n  allowHalf?: boolean;\n  allowClear?: boolean;\n\n  // Appearance\n  size?: \"small\" | \"middle\" | \"large\";\n  color?:\n    | \"primary\"\n    | \"secondary\"\n    | \"accent\"\n    | \"destructive\"\n    | \"muted\"\n    | \"success\"\n    | \"error\"\n    | \"warning\";\n  character?: React.ReactNode | ((rateProps: RateProps) => React.ReactNode);\n  className?: string;\n  style?: React.CSSProperties;\n\n  // Interaction\n  disabled?: boolean;\n  autoFocus?: boolean;\n  keyboard?: boolean;\n\n  // Tooltips\n  tooltips?: string[];\n\n  // Callbacks\n  onChange?: (value: number) => void;\n  onHoverChange?: (value: number) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;\n}\n\nconst Rate = React.forwardRef<HTMLDivElement, RateProps>(\n  (\n    {\n      count = 5,\n      value: controlledValue,\n      defaultValue = 0,\n      allowHalf = false,\n      allowClear = true,\n      size = \"middle\",\n      color = \"warning\",\n      character,\n      className,\n      style,\n      disabled = false,\n      autoFocus = false,\n      keyboard = true,\n      tooltips,\n      onChange,\n      onHoverChange,\n      onFocus,\n      onBlur,\n      onKeyDown,\n    },\n    ref\n  ) => {\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const [hoverValue, setHoverValue] = useState<number | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    // Use controlled or uncontrolled value\n    const value =\n      controlledValue !== undefined ? controlledValue : internalValue;\n\n    // Size in pixels\n    const sizeMap = {\n      small: 20,\n      middle: 24,\n      large: 32,\n    };\n\n    // Color mapping for filled stars\n    const colorMap = {\n      primary: \"text-primary [&_svg]:fill-primary\",\n      secondary: \"text-secondary [&_svg]:fill-secondary\",\n      accent: \"text-accent [&_svg]:fill-accent\",\n      destructive: \"text-destructive [&_svg]:fill-destructive\",\n      muted: \"text-muted-foreground [&_svg]:fill-muted-foreground\",\n      success: \"text-success [&_svg]:fill-success\",\n      error: \"text-error [&_svg]:fill-error\",\n      warning: \"text-yellow-400 [&_svg]:fill-yellow-400\",\n    };\n\n    // Handle star click\n    const handleStarClick = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n\n      // If clicking the same value and allowClear is true, clear the rating\n      if (allowClear && newValue === value) {\n        setInternalValue(0);\n        onChange?.(0);\n      } else {\n        setInternalValue(newValue);\n        onChange?.(newValue);\n      }\n    };\n\n    // Handle star hover\n    const handleStarHover = (starIndex: number, isHalf: boolean) => {\n      if (disabled) return;\n\n      const newHoverValue = isHalf ? starIndex + 0.5 : starIndex + 1;\n      setHoverValue(newHoverValue);\n      onHoverChange?.(newHoverValue);\n    };\n\n    // Handle mouse leave\n    const handleMouseLeave = () => {\n      setHoverValue(null);\n      onHoverChange?.(0);\n    };\n\n    // Handle keyboard navigation\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!keyboard || disabled) return;\n\n      onKeyDown?.(event);\n\n      const step = allowHalf ? 0.5 : 1;\n      let newValue = value;\n\n      switch (event.key) {\n        case \"ArrowRight\":\n        case \"ArrowUp\":\n          event.preventDefault();\n          newValue = Math.min(value + step, count);\n          break;\n        case \"ArrowLeft\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          newValue = Math.max(value - step, 0);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          newValue = allowHalf ? 0.5 : 1;\n          break;\n        case \"End\":\n          event.preventDefault();\n          newValue = count;\n          break;\n        default:\n          return;\n      }\n\n      setInternalValue(newValue);\n      onChange?.(newValue);\n    };\n\n    // Handle focus\n    const handleFocus = () => {\n      onFocus?.();\n    };\n\n    // Handle blur\n    const handleBlur = () => {\n      onBlur?.();\n    };\n\n    // Get star fill percentage\n    const getStarFill = (starIndex: number) => {\n      const currentValue = hoverValue !== null ? hoverValue : value;\n\n      if (currentValue >= starIndex + 1) {\n        return 100; // Full star\n      } else if (currentValue > starIndex && currentValue < starIndex + 1) {\n        return (currentValue - starIndex) * 100; // Partial star\n      }\n      return 0; // Empty star\n    };\n\n    // Check if star should show as half\n    const isHalfStar = (starIndex: number) => {\n      if (!allowHalf) return false;\n      const currentValue = hoverValue !== null ? hoverValue : value;\n      const fill = currentValue - starIndex;\n      return fill > 0 && fill <= 0.5;\n    };\n\n    // Render character\n    const renderCharacter = (isHalf: boolean = false) => {\n      if (typeof character === \"function\") {\n        return character({\n          count,\n          value,\n          defaultValue,\n          allowHalf,\n          allowClear,\n          size,\n          disabled,\n        });\n      }\n      if (isHalf) {\n        return <StarHalf className=\"w-full h-full\" />;\n      }\n      return character || <Star className=\"w-full h-full\" />;\n    };\n\n    // Get tooltip for star\n    const getTooltip = (starIndex: number) => {\n      if (!tooltips || !tooltips[starIndex]) return undefined;\n      return tooltips[starIndex];\n    };\n\n    return (\n      <div\n        ref={(node) => {\n          containerRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        className={cn(\n          \"inline-flex items-center gap-1\",\n          disabled && \"opacity-50 cursor-not-allowed\",\n          !disabled && \"cursor-pointer\",\n          className\n        )}\n        style={style}\n        onMouseLeave={handleMouseLeave}\n        onKeyDown={handleKeyDown}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        tabIndex={disabled ? -1 : 0}\n        role=\"slider\"\n        aria-label=\"Rate\"\n        aria-valuemin={0}\n        aria-valuemax={count}\n        aria-valuenow={value}\n        aria-disabled={disabled}\n        autoFocus={autoFocus}\n      >\n        {Array.from({ length: count }, (_, index) => {\n          const fillPercentage = getStarFill(index);\n          const tooltip = getTooltip(index);\n          const showHalfStar = isHalfStar(index);\n\n          return (\n            <div key={index} className=\"relative group\" title={tooltip}>\n              {/* Container for half stars */}\n              <div\n                className=\"relative inline-flex\"\n                style={{\n                  width: `${sizeMap[size]}px`,\n                  height: `${sizeMap[size]}px`,\n                }}\n              >\n                {/* Empty star background */}\n                <div className=\"text-muted-foreground/30 pointer-events-none\">\n                  {renderCharacter(false)}\n                </div>\n\n                {/* Filled star overlay */}\n                {fillPercentage > 0 && (\n                  <div\n                    className={cn(\n                      \"absolute inset-0 pointer-events-none\",\n                      colorMap[color]\n                    )}\n                  >\n                    {showHalfStar ? (\n                      renderCharacter(true)\n                    ) : (\n                      <div\n                        className=\"overflow-hidden\"\n                        style={{ width: `${fillPercentage}%` }}\n                      >\n                        {renderCharacter(false)}\n                      </div>\n                    )}\n                  </div>\n                )}\n\n                {/* Interactive overlay for clicking and hovering */}\n                {!disabled && (\n                  <>\n                    {allowHalf ? (\n                      <>\n                        {/* Left half */}\n                        <div\n                          className=\"absolute inset-0 w-1/2 cursor-pointer\"\n                          onClick={() => handleStarClick(index, true)}\n                          onMouseEnter={() => handleStarHover(index, true)}\n                        />\n                        {/* Right half */}\n                        <div\n                          className=\"absolute inset-0 left-1/2 w-1/2 cursor-pointer\"\n                          onClick={() => handleStarClick(index, false)}\n                          onMouseEnter={() => handleStarHover(index, false)}\n                        />\n                      </>\n                    ) : (\n                      <div\n                        className=\"absolute inset-0 cursor-pointer\"\n                        onClick={() => handleStarClick(index, false)}\n                        onMouseEnter={() => handleStarHover(index, false)}\n                      />\n                    )}\n                  </>\n                )}\n              </div>\n\n              {/* Show tooltip text below star on hover */}\n              {tooltip &&\n                (hoverValue === index + 1 ||\n                  (allowHalf && hoverValue === index + 0.5)) && (\n                  <div className=\"absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs bg-foreground text-background rounded whitespace-nowrap z-10\">\n                    {tooltip}\n                  </div>\n                )}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nRate.displayName = \"Rate\";\n\nexport default Rate;\n"],"names":["Rate","React","count","controlledValue","defaultValue","allowHalf","allowClear","size","color","character","className","style","disabled","autoFocus","keyboard","tooltips","onChange","onHoverChange","onFocus","onBlur","onKeyDown","ref","internalValue","setInternalValue","useState","hoverValue","setHoverValue","containerRef","useRef","value","sizeMap","colorMap","handleStarClick","starIndex","isHalf","newValue","handleStarHover","newHoverValue","handleMouseLeave","handleKeyDown","event","step","handleFocus","handleBlur","getStarFill","currentValue","isHalfStar","fill","renderCharacter","jsx","StarHalf","Star","getTooltip","node","cn","_","index","fillPercentage","tooltip","showHalfStar","jsxs","Fragment"],"mappings":"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"}

package/dist/esm/components/Resizable/Resizable.js

@@ -0,0 +1,89 @@
+import { jsx as l, jsxs as P } from "react/jsx-runtime";
+import g from "react";
+import { ResizablePanel as u, ResizableHandle as f, ResizablePanelGroup as i } from "@dsui/ui/components/resizable";
+import { ResizableHandle as _, ResizablePanel as k, ResizablePanelGroup as B } from "@dsui/ui/components/resizable";
+import { cn as s } from "@dsui/ui/lib/utils";
+const h = (b) => {
+  const {
+    direction: o = "horizontal",
+    panels: a,
+    withHandle: R = !0,
+    handleVariant: p,
+    handleIcon: N,
+    autoSaveId: n,
+    onLayout: r,
+    className: t,
+    panelClassName: S,
+    handleClassName: x,
+    children: d,
+    keyboardResizeBy: c,
+    storage: m
+  } = b;
+  return d && !a ? /* @__PURE__ */ l(
+    i,
+    {
+      direction: o,
+      autoSaveId: n,
+      onLayout: r,
+      className: s("h-full w-full", t),
+      keyboardResizeBy: c,
+      storage: m,
+      children: d
+    }
+  ) : !a || a.length === 0 ? null : /* @__PURE__ */ l(
+    i,
+    {
+      direction: o,
+      autoSaveId: n,
+      onLayout: r,
+      className: s("h-full w-full", t),
+      keyboardResizeBy: c,
+      storage: m,
+      children: a.map((e, z) => /* @__PURE__ */ P(g.Fragment, { children: [
+        /* @__PURE__ */ l(
+          u,
+          {
+            id: e.id,
+            defaultSize: e.defaultSize,
+            minSize: e.minSize,
+            maxSize: e.maxSize,
+            collapsible: e.collapsible,
+            collapsedSize: e.collapsedSize,
+            onCollapse: e.onCollapse,
+            onExpand: e.onExpand,
+            onResize: e.onResize,
+            order: e.order,
+            className: s(S, e.className),
+            children: e.children
+          }
+        ),
+        z < a.length - 1 && /* @__PURE__ */ l(
+          f,
+          {
+            withHandle: R,
+            variant: p,
+            icon: N,
+            className: x
+          }
+        )
+      ] }, e.id || `panel-${z}`))
+    }
+  );
+};
+h.displayName = "Resizable";
+const y = u, C = f, v = Object.assign(h, {
+  Panel: y,
+  Handle: C,
+  PanelGroup: i
+});
+export {
+  C as Handle,
+  y as Panel,
+  v as Resizable,
+  _ as ResizableHandle,
+  k as ResizablePanel,
+  B as ResizablePanelGroup,
+  h as ResizableWrapper,
+  v as default
+};
+//# sourceMappingURL=Resizable.js.map

package/dist/esm/components/Resizable/Resizable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.js","sources":["../../../../src/components/Resizable/Resizable.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  resizableHandleVariants,\n} from \"@dsui/ui/components/resizable\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport type { VariantProps } from \"class-variance-authority\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ResizableDirection = \"horizontal\" | \"vertical\";\n\nexport type ResizableHandleVariant = VariantProps<\n  typeof resizableHandleVariants\n>[\"variant\"];\n\nexport interface ResizablePanelConfig {\n  id?: string;\n  defaultSize?: number;\n  minSize?: number;\n  maxSize?: number;\n  collapsible?: boolean;\n  collapsedSize?: number;\n  onCollapse?: () => void;\n  onExpand?: () => void;\n  onResize?: (size: number) => void;\n  className?: string;\n  children?: React.ReactNode;\n  order?: number;\n}\n\ntype PanelGroupOnLayout = (sizes: number[]) => void;\n\nexport interface ResizableProps {\n  /** Direction of the resizable panels */\n  direction?: ResizableDirection;\n  /** Configuration for panels when using wrapper mode */\n  panels?: ResizablePanelConfig[];\n  /** Show handle with grip icon */\n  withHandle?: boolean;\n  /** Handle variant: 'default' shows icon, 'line' highlights on hover */\n  handleVariant?: ResizableHandleVariant;\n  /** Custom icon for the handle (only works with default variant) */\n  handleIcon?: React.ReactNode;\n  /** Auto save layout to localStorage with this id */\n  autoSaveId?: string;\n  /** Callback when layout changes */\n  onLayout?: PanelGroupOnLayout;\n  /** Additional class for the panel group */\n  className?: string;\n  /** Additional class for each panel */\n  panelClassName?: string;\n  /** Additional class for handles */\n  handleClassName?: string;\n  /** Children for primitive usage */\n  children?: React.ReactNode;\n  /** Keyboard resize by delta percentage (default: 10) */\n  keyboardResizeBy?: number;\n  /** Storage object for saving layout (default: localStorage) */\n  storage?: {\n    getItem: (name: string) => string | null;\n    setItem: (name: string, value: string) => void;\n  };\n}\n\n// ============================================================================\n// Wrapper Component\n// ============================================================================\n\nconst ResizableWrapper = (props: ResizableProps) => {\n  const {\n    direction = \"horizontal\",\n    panels,\n    withHandle = true,\n    handleVariant,\n    handleIcon,\n    autoSaveId,\n    onLayout,\n    className,\n    panelClassName,\n    handleClassName,\n    children,\n    keyboardResizeBy,\n    storage,\n  } = props;\n\n  // If children are provided, use primitive mode\n  if (children && !panels) {\n    return (\n      <ResizablePanelGroup\n        direction={direction}\n        autoSaveId={autoSaveId}\n        onLayout={onLayout}\n        className={cn(\"h-full w-full\", className)}\n        keyboardResizeBy={keyboardResizeBy}\n        storage={storage}\n      >\n        {children}\n      </ResizablePanelGroup>\n    );\n  }\n\n  // Wrapper mode with panels config\n  if (!panels || panels.length === 0) {\n    return null;\n  }\n\n  return (\n    <ResizablePanelGroup\n      direction={direction}\n      autoSaveId={autoSaveId}\n      onLayout={onLayout}\n      className={cn(\"h-full w-full\", className)}\n      keyboardResizeBy={keyboardResizeBy}\n      storage={storage}\n    >\n      {panels.map((panel, index) => (\n        <React.Fragment key={panel.id || `panel-${index}`}>\n          <ResizablePanel\n            id={panel.id}\n            defaultSize={panel.defaultSize}\n            minSize={panel.minSize}\n            maxSize={panel.maxSize}\n            collapsible={panel.collapsible}\n            collapsedSize={panel.collapsedSize}\n            onCollapse={panel.onCollapse}\n            onExpand={panel.onExpand}\n            onResize={panel.onResize}\n            order={panel.order}\n            className={cn(panelClassName, panel.className)}\n          >\n            {panel.children}\n          </ResizablePanel>\n          {index < panels.length - 1 && (\n            <ResizableHandle\n              withHandle={withHandle}\n              variant={handleVariant}\n              icon={handleIcon}\n              className={handleClassName}\n            />\n          )}\n        </React.Fragment>\n      ))}\n    </ResizablePanelGroup>\n  );\n};\n\nResizableWrapper.displayName = \"Resizable\";\n\n// ============================================================================\n// Sub-components for primitive usage\n// ============================================================================\n\nexport type ResizablePanelProps = React.ComponentProps<typeof ResizablePanel>;\nexport type ResizableHandleProps = React.ComponentProps<typeof ResizableHandle>;\nexport type ResizablePanelGroupProps = React.ComponentProps<\n  typeof ResizablePanelGroup\n>;\n\n// Re-export Panel and Handle from shadcn for primitive usage\nconst Panel = ResizablePanel;\nconst Handle = ResizableHandle;\n\n// ============================================================================\n// Export with Object.assign pattern\n// ============================================================================\n\nconst Resizable = Object.assign(ResizableWrapper, {\n  Panel,\n  Handle,\n  PanelGroup: ResizablePanelGroup,\n});\n\nexport default Resizable;\nexport {\n  Resizable,\n  ResizableWrapper,\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  Panel,\n  Handle,\n};\n"],"names":["ResizableWrapper","props","direction","panels","withHandle","handleVariant","handleIcon","autoSaveId","onLayout","className","panelClassName","handleClassName","children","keyboardResizeBy","storage","jsx","ResizablePanelGroup","cn","panel","index","jsxs","React","ResizablePanel","ResizableHandle","Panel","Handle","Resizable"],"mappings":";;;;;AAyEA,MAAMA,IAAmB,CAACC,MAA0B;AAClD,QAAM;AAAA,IACJ,WAAAC,IAAY;AAAA,IACZ,QAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAC;AAAA,EAAA,IACEb;AAGJ,SAAIW,KAAY,CAACT,IAEb,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAd;AAAA,MACA,YAAAK;AAAA,MACA,UAAAC;AAAA,MACA,WAAWS,EAAG,iBAAiBR,CAAS;AAAA,MACxC,kBAAAI;AAAA,MACA,SAAAC;AAAA,MAEC,UAAAF;AAAA,IAAA;AAAA,EAAA,IAMH,CAACT,KAAUA,EAAO,WAAW,IACxB,OAIP,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAAd;AAAA,MACA,YAAAK;AAAA,MACA,UAAAC;AAAA,MACA,WAAWS,EAAG,iBAAiBR,CAAS;AAAA,MACxC,kBAAAI;AAAA,MACA,SAAAC;AAAA,MAEC,UAAAX,EAAO,IAAI,CAACe,GAAOC,MAClB,gBAAAC,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAIJ,EAAM;AAAA,YACV,aAAaA,EAAM;AAAA,YACnB,SAASA,EAAM;AAAA,YACf,SAASA,EAAM;AAAA,YACf,aAAaA,EAAM;AAAA,YACnB,eAAeA,EAAM;AAAA,YACrB,YAAYA,EAAM;AAAA,YAClB,UAAUA,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,YAChB,OAAOA,EAAM;AAAA,YACb,WAAWD,EAAGP,GAAgBQ,EAAM,SAAS;AAAA,YAE5C,UAAAA,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAERC,IAAQhB,EAAO,SAAS,KACvB,gBAAAY;AAAA,UAACQ;AAAA,UAAA;AAAA,YACC,YAAAnB;AAAA,YACA,SAASC;AAAA,YACT,MAAMC;AAAA,YACN,WAAWK;AAAA,UAAA;AAAA,QAAA;AAAA,MACb,EAAA,GAtBiBO,EAAM,MAAM,SAASC,CAAK,EAwB/C,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAnB,EAAiB,cAAc;AAa/B,MAAMwB,IAAQF,GACRG,IAASF,GAMTG,IAAY,OAAO,OAAO1B,GAAkB;AAAA,EAChD,OAAAwB;AAAA,EACA,QAAAC;AAAA,EACA,YAAYT;AACd,CAAC;"}

package/dist/esm/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,45 @@
+import { jsx as u } from "react/jsx-runtime";
+import i, { useRef as S, useEffect as p } from "react";
+import { ScrollArea as d, ScrollBar as A } from "@dsui/ui/components/scroll-area";
+import { cn as l } from "@dsui/ui/lib/utils";
+const R = i.forwardRef(
+  ({ className: c, children: s, snapType: a, viewportClassName: t, ...m }, o) => {
+    const n = S(null), f = i.useMemo(() => {
+      if (!a || a === "none") return "snap-none";
+      const [r, e] = a.split(" ");
+      return l(`snap-${r}`, e && `snap-${e}`);
+    }, [a]);
+    return p(() => {
+      if (n.current && (f || t)) {
+        const r = n.current.querySelector(
+          "[data-radix-scroll-area-viewport]"
+        );
+        if (r) {
+          const e = l(f, t);
+          e && (r.className = l(r.className, e));
+        }
+      }
+    }, [f, t]), /* @__PURE__ */ u(
+      d,
+      {
+        ref: (r) => {
+          n.current = r, typeof o == "function" ? o(r) : o && (o.current = r);
+        },
+        className: l(c),
+        ...m,
+        children: s
+      }
+    );
+  }
+);
+R.displayName = "ScrollArea";
+const x = i.forwardRef(
+  ({ className: c, ...s }, a) => /* @__PURE__ */ u(A, { ref: a, className: l(c), ...s })
+);
+x.displayName = "ScrollBar";
+export {
+  R as ScrollArea,
+  x as ScrollBar,
+  R as default
+};
+//# sourceMappingURL=ScrollArea.js.map

package/dist/esm/components/ScrollArea/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sources":["../../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\nimport {\n  ScrollArea as SScrollArea,\n  ScrollBar as SScrollBar,\n} from \"@dsui/ui/components/scroll-area\";\nimport { cn } from \"@dsui/ui/lib/utils\";\n\nexport interface ScrollAreaProps extends React.ComponentProps<\n  typeof SScrollArea\n> {\n  /**\n   * Type of scroll snap behavior\n   * @default undefined\n   */\n  snapType?:\n    | \"none\"\n    | \"x\"\n    | \"y\"\n    | \"both\"\n    | \"x mandatory\"\n    | \"y mandatory\"\n    | \"both mandatory\"\n    | \"x proximity\"\n    | \"y proximity\"\n    | \"both proximity\";\n  /**\n   * Additional className for the viewport (where scroll happens)\n   */\n  viewportClassName?: string;\n}\n\nexport type ScrollBarProps = React.ComponentProps<typeof SScrollBar>;\n\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ className, children, snapType, viewportClassName, ...props }, ref) => {\n    const scrollAreaRef = useRef<HTMLDivElement>(null);\n\n    const snapClass = React.useMemo(() => {\n      if (!snapType || snapType === \"none\") return \"snap-none\";\n\n      const [axis, alignment] = snapType.split(\" \");\n      return cn(`snap-${axis}`, alignment && `snap-${alignment}`);\n    }, [snapType]);\n\n    // const snapClass = snapType\n    //   ? snapType === \"none\"\n    //     ? \"snap-none\"\n    //     : snapType === \"x\"\n    //       ? \"snap-x\"\n    //       : snapType === \"y\"\n    //         ? \"snap-y\"\n    //         : snapType === \"both\"\n    //           ? \"snap-both\"\n    //           : snapType === \"x mandatory\"\n    //             ? \"snap-x snap-mandatory\"\n    //             : snapType === \"y mandatory\"\n    //               ? \"snap-y snap-mandatory\"\n    //               : snapType === \"both mandatory\"\n    //                 ? \"snap-both snap-mandatory\"\n    //                 : snapType === \"x proximity\"\n    //                   ? \"snap-x snap-proximity\"\n    //                   : snapType === \"y proximity\"\n    //                     ? \"snap-y snap-proximity\"\n    //                     : snapType === \"both proximity\"\n    //                       ? \"snap-both snap-proximity\"\n    //                       : \"\"\n    //   : \"\";\n\n    useEffect(() => {\n      if (scrollAreaRef.current && (snapClass || viewportClassName)) {\n        const viewport = scrollAreaRef.current.querySelector(\n          \"[data-radix-scroll-area-viewport]\",\n        );\n        if (viewport) {\n          const classes = cn(snapClass, viewportClassName);\n          if (classes) {\n            viewport.className = cn(viewport.className, classes);\n          }\n        }\n      }\n    }, [snapClass, viewportClassName]);\n\n    return (\n      <SScrollArea\n        ref={(node) => {\n          scrollAreaRef.current = node;\n          if (typeof ref === \"function\") {\n            ref(node);\n          } else if (ref) {\n            ref.current = node;\n          }\n        }}\n        className={cn(className)}\n        {...props}\n      >\n        {children}\n      </SScrollArea>\n    );\n  },\n);\nScrollArea.displayName = \"ScrollArea\";\n\nconst ScrollBar = React.forwardRef<HTMLDivElement, ScrollBarProps>(\n  ({ className, ...props }, ref) => {\n    return <SScrollBar ref={ref} className={cn(className)} {...props} />;\n  },\n);\nScrollBar.displayName = \"ScrollBar\";\n\nexport { ScrollArea, ScrollBar };\nexport default ScrollArea;\n"],"names":["ScrollArea","React","className","children","snapType","viewportClassName","props","ref","scrollAreaRef","useRef","snapClass","axis","alignment","cn","useEffect","viewport","classes","jsx","SScrollArea","node","ScrollBar","SScrollBar"],"mappings":";;;;AAiCA,MAAMA,IAAaC,EAAM;AAAA,EACvB,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,UAAAC,GAAU,mBAAAC,GAAmB,GAAGC,EAAA,GAASC,MAAQ;AACvE,UAAMC,IAAgBC,EAAuB,IAAI,GAE3CC,IAAYT,EAAM,QAAQ,MAAM;AACpC,UAAI,CAACG,KAAYA,MAAa,OAAQ,QAAO;AAE7C,YAAM,CAACO,GAAMC,CAAS,IAAIR,EAAS,MAAM,GAAG;AAC5C,aAAOS,EAAG,QAAQF,CAAI,IAAIC,KAAa,QAAQA,CAAS,EAAE;AAAA,IAC5D,GAAG,CAACR,CAAQ,CAAC;AA0Bb,WAAAU,EAAU,MAAM;AACd,UAAIN,EAAc,YAAYE,KAAaL,IAAoB;AAC7D,cAAMU,IAAWP,EAAc,QAAQ;AAAA,UACrC;AAAA,QAAA;AAEF,YAAIO,GAAU;AACZ,gBAAMC,IAAUH,EAAGH,GAAWL,CAAiB;AAC/C,UAAIW,MACFD,EAAS,YAAYF,EAAGE,EAAS,WAAWC,CAAO;AAAA,QAEvD;AAAA,MACF;AAAA,IACF,GAAG,CAACN,GAAWL,CAAiB,CAAC,GAG/B,gBAAAY;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,KAAK,CAACC,MAAS;AACb,UAAAX,EAAc,UAAUW,GACpB,OAAOZ,KAAQ,aACjBA,EAAIY,CAAI,IACCZ,MACTA,EAAI,UAAUY;AAAA,QAElB;AAAA,QACA,WAAWN,EAAGX,CAAS;AAAA,QACtB,GAAGI;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACAH,EAAW,cAAc;AAEzB,MAAMoB,IAAYnB,EAAM;AAAA,EACtB,CAAC,EAAE,WAAAC,GAAW,GAAGI,EAAA,GAASC,MACjB,gBAAAU,EAACI,KAAW,KAAAd,GAAU,WAAWM,EAAGX,CAAS,GAAI,GAAGI,GAAO;AAEtE;AACAc,EAAU,cAAc;"}

package/dist/esm/components/Select/Select.js

@@ -0,0 +1,199 @@
+import { jsx as r, jsxs as m, Fragment as D } from "react/jsx-runtime";
+import d from "react";
+import { MultiSelect as F, MultiSelectTrigger as J, MultiSelectValue as K, MultiSelectContent as P, MultiSelectGroup as Q, MultiSelectItem as k, MultiSelectSeparator as U } from "@dsui/ui/components/select";
+import { Combobox as W } from "@dsui/ui/components/combobox";
+import { cn as o } from "@dsui/ui/lib/utils";
+import { FloatingLabel as E } from "../FloatLabel.js";
+import { Info as X } from "lucide-react";
+import { Tooltip as Y } from "../Tooltip/Tooltip.js";
+const Z = d.forwardRef(
+  ({
+    className: v,
+    label: u,
+    helperText: w,
+    state: f = "default",
+    size: t = "normal",
+    isFloatLabel: c,
+    infoTooltip: p,
+    clearable: y = !1,
+    placeholder: M = "",
+    options: g = [],
+    tagRender: s,
+    multiple: x = !1,
+    value: n,
+    defaultValue: V,
+    onValueChange: N,
+    values: _,
+    defaultValues: S,
+    onValuesChange: G,
+    search: h,
+    clickToRemove: H = !0,
+    overflowBehavior: O = "wrap-when-open",
+    disabled: b
+  }, T) => {
+    const i = d.useId(), [C, I] = d.useState(
+      n ?? V ?? ""
+    );
+    d.useEffect(() => {
+      !x && n !== void 0 && I(n);
+    }, [x, n]);
+    const q = d.useCallback(
+      (l) => {
+        const a = l || "";
+        n === void 0 && I(a), N?.(a);
+      },
+      [N, n]
+    ), A = {
+      default: "text-muted-foreground",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error"
+    }, j = c ? t === "xl" || t === "lg" ? t : "xl" : t, B = d.useMemo(() => {
+      const l = /* @__PURE__ */ new Map();
+      return g.forEach((a) => {
+        const e = a.group;
+        l.has(e) || l.set(e, []), l.get(e).push(a);
+      }), l;
+    }, [g]);
+    return /* @__PURE__ */ r("div", { className: v, children: /* @__PURE__ */ m(
+      "div",
+      {
+        ref: T,
+        className: o("flex flex-col gap-1.5 relative", {
+          "floating-label relative": c
+        }),
+        children: [
+          !c && u && /* @__PURE__ */ m(
+            "label",
+            {
+              htmlFor: i,
+              className: "flex gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              children: [
+                u,
+                p && /* @__PURE__ */ r(Y, { content: p, children: /* @__PURE__ */ r(X, { className: "size-3.5 min-w-3.5" }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: "relative", children: x ? (
+            // Multi Mode
+            /* @__PURE__ */ m(
+              F,
+              {
+                values: _,
+                defaultValues: typeof S == "string" ? [S] : S,
+                onValuesChange: G,
+                children: [
+                  /* @__PURE__ */ r(
+                    J,
+                    {
+                      id: i,
+                      disabled: b,
+                      className: o(
+                        "peer w-full",
+                        {
+                          "pt-5 pb-1": c && t !== "lg"
+                        },
+                        v
+                      ),
+                      size: j,
+                      state: f,
+                      children: /* @__PURE__ */ r(
+                        K,
+                        {
+                          placeholder: M,
+                          clickToRemove: H && y,
+                          overflowBehavior: O
+                        }
+                      )
+                    }
+                  ),
+                  c && /* @__PURE__ */ r(
+                    E,
+                    {
+                      htmlFor: i,
+                      size: t,
+                      infoTooltip: p,
+                      children: u
+                    }
+                  ),
+                  /* @__PURE__ */ r(P, { search: h, children: [...B.entries()].map(([l, a]) => l ? /* @__PURE__ */ m(d.Fragment, { children: [
+                    /* @__PURE__ */ r(Q, { heading: l, children: a.map((e) => /* @__PURE__ */ r(
+                      k,
+                      {
+                        value: e.value,
+                        disabled: e?.disabled,
+                        icon: e?.icon,
+                        tagRender: !!s,
+                        children: s ? s(e) : e.label
+                      },
+                      e.value
+                    )) }),
+                    /* @__PURE__ */ r(U, {})
+                  ] }, l) : a.map((e) => /* @__PURE__ */ r(
+                    k,
+                    {
+                      value: e.value,
+                      disabled: e?.disabled,
+                      icon: e?.icon,
+                      tagRender: !!s,
+                      children: s ? s(e) : e.label
+                    },
+                    e.value
+                  ))) })
+                ]
+              }
+            )
+          ) : (
+            // Single Mode
+            /* @__PURE__ */ m(D, { children: [
+              /* @__PURE__ */ r(
+                W,
+                {
+                  value: n ?? C,
+                  options: g,
+                  placeHolder: M,
+                  emptyText: typeof h == "object" ? h.emptyMessage : "No results found",
+                  onChange: q,
+                  clearable: y,
+                  disabled: b,
+                  id: i,
+                  className: o(
+                    "peer w-full justify-start",
+                    {
+                      "pt-5 pb-1": c && t !== "lg"
+                    }
+                    // className,
+                  ),
+                  size: j,
+                  state: f,
+                  dropdownClassName: o("opacity-40", {
+                    "translate-y-[-8px]": c && t !== "lg"
+                  }),
+                  searchable: !!h,
+                  tagRender: s
+                }
+              ),
+              c && /* @__PURE__ */ r(
+                E,
+                {
+                  htmlFor: i,
+                  size: t,
+                  infoTooltip: p,
+                  shouldFloat: !!(n ?? C),
+                  className: "pointer-events-none",
+                  children: u
+                }
+              )
+            ] })
+          ) }),
+          w && /* @__PURE__ */ r("p", { className: o("text-xs", f ? A[f] : ""), children: w })
+        ]
+      }
+    ) });
+  }
+);
+Z.displayName = "Select";
+export {
+  Z as default
+};
+//# sourceMappingURL=Select.js.map

package/dist/esm/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n  MultiSelect as BaseMultiSelect,\n  MultiSelectTrigger as BaseMultiSelectTrigger,\n  MultiSelectValue as BaseMultiSelectValue,\n  MultiSelectContent as BaseMultiSelectContent,\n  MultiSelectItem as BaseMultiSelectItem,\n  MultiSelectGroup as BaseMultiSelectGroup,\n  MultiSelectSeparator as BaseMultiSelectSeparator,\n} from \"@dsui/ui/components/select\";\nimport {\n  Combobox,\n  type ComboboxProps,\n  type SelectOption as SSelectOption,\n} from \"@dsui/ui/components/combobox\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { FloatingLabel } from \"@/components/FloatLabel\";\nimport { Info } from \"lucide-react\";\nimport { Tooltip } from \"../Tooltip/Tooltip\";\n\nexport type SelectOption = SSelectOption;\n\nexport type SelectProps = ComboboxProps & {\n  label?: string;\n  helperText?: React.ReactNode;\n  state?: \"default\" | \"success\" | \"warning\" | \"error\";\n  size?: \"xs\" | \"sm\" | \"normal\" | \"lg\" | \"xl\";\n  isFloatLabel?: boolean;\n  infoTooltip?: React.ReactNode;\n  clearable?: boolean;\n  placeholder?: string;\n  options?: SelectOption[];\n  tagRender?: (option: SelectOption) => React.ReactNode;\n  multiple?: boolean;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  values?: string[];\n  defaultValues?: string | string[];\n  onValuesChange?: (values: string[]) => void;\n  search?: boolean | { placeholder?: string; emptyMessage?: string };\n  clickToRemove?: boolean;\n  overflowBehavior?: \"wrap\" | \"wrap-when-open\" | \"cutoff\";\n  className?: string;\n  disabled?: boolean;\n};\n\nconst Select = React.forwardRef<HTMLDivElement, SelectProps>(\n  (\n    {\n      className,\n      label,\n      helperText,\n      state = \"default\",\n      size = \"normal\",\n      isFloatLabel,\n      infoTooltip,\n      clearable = false,\n      placeholder = \"\",\n      options = [],\n      tagRender,\n      multiple = false,\n      value,\n      defaultValue,\n      onValueChange,\n      values,\n      defaultValues,\n      onValuesChange,\n      search,\n      clickToRemove = true,\n      overflowBehavior = \"wrap-when-open\",\n      disabled,\n    },\n    ref,\n  ) => {\n    const selectId = React.useId();\n\n    // For single select, use controlled value or internal state\n    const [internalValue, setInternalValue] = React.useState(\n      value ?? defaultValue ?? \"\",\n    );\n\n    React.useEffect(() => {\n      if (!multiple && value !== undefined) {\n        setInternalValue(value);\n      }\n    }, [multiple, value]);\n\n    // Handle single select value change\n    const handleSingleValueChange = React.useCallback(\n      (newValue?: string | null) => {\n        const val = newValue || \"\";\n        if (value === undefined) {\n          setInternalValue(val);\n        }\n        onValueChange?.(val);\n      },\n      [onValueChange, value],\n    );\n\n    // Helper text styles\n    const helperTextStyles = {\n      default: \"text-muted-foreground\",\n      success: \"text-success\",\n      warning: \"text-warning\",\n      error: \"text-error\",\n    };\n\n    // Calculate current size\n    const currentSize = isFloatLabel\n      ? size === \"xl\" || size === \"lg\"\n        ? size\n        : \"xl\"\n      : size;\n\n    // Group options by group property\n    const groupedOptions = React.useMemo(() => {\n      const groups = new Map<string | undefined, SelectOption[]>();\n      options.forEach((option) => {\n        const group = option.group;\n        if (!groups.has(group)) {\n          groups.set(group, []);\n        }\n        groups.get(group)!.push(option);\n      });\n      return groups;\n    }, [options]);\n\n    return (\n      <div className={className}>\n        <div\n          ref={ref}\n          className={cn(\"flex flex-col gap-1.5 relative\", {\n            \"floating-label relative\": isFloatLabel,\n          })}\n        >\n          {!isFloatLabel && label && (\n            <label\n              htmlFor={selectId}\n              className=\"flex gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n            >\n              {label}\n              {infoTooltip && (\n                <Tooltip content={infoTooltip}>\n                  <Info className=\"size-3.5 min-w-3.5\" />\n                </Tooltip>\n              )}\n            </label>\n          )}\n\n          <div className=\"relative\">\n            {!multiple ? (\n              // Single Mode\n              <>\n                <Combobox\n                  value={value ?? internalValue}\n                  options={options}\n                  placeHolder={placeholder}\n                  emptyText={\n                    typeof search === \"object\"\n                      ? search.emptyMessage\n                      : \"No results found\"\n                  }\n                  onChange={handleSingleValueChange}\n                  clearable={clearable}\n                  disabled={disabled}\n                  id={selectId}\n                  className={cn(\n                    \"peer w-full justify-start\",\n                    {\n                      \"pt-5 pb-1\": isFloatLabel && size !== \"lg\",\n                    },\n                    // className,\n                  )}\n                  size={currentSize}\n                  state={state}\n                  dropdownClassName={cn(\"opacity-40\", {\n                    \"translate-y-[-8px]\": isFloatLabel && size !== \"lg\",\n                  })}\n                  searchable={!!search}\n                  tagRender={tagRender}\n                />\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                    shouldFloat={!!(value ?? internalValue)}\n                    className=\"pointer-events-none\"\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n              </>\n            ) : (\n              // Multi Mode\n              <BaseMultiSelect\n                values={values}\n                defaultValues={\n                  typeof defaultValues === \"string\"\n                    ? [defaultValues]\n                    : defaultValues\n                }\n                onValuesChange={onValuesChange}\n              >\n                <BaseMultiSelectTrigger\n                  id={selectId}\n                  disabled={disabled}\n                  className={cn(\n                    \"peer w-full\",\n                    {\n                      \"pt-5 pb-1\": isFloatLabel && size !== \"lg\",\n                    },\n                    className,\n                  )}\n                  size={currentSize}\n                  state={state}\n                >\n                  <BaseMultiSelectValue\n                    placeholder={placeholder}\n                    clickToRemove={clickToRemove && clearable}\n                    overflowBehavior={overflowBehavior}\n                  />\n                </BaseMultiSelectTrigger>\n\n                {isFloatLabel && (\n                  <FloatingLabel\n                    htmlFor={selectId}\n                    size={size}\n                    infoTooltip={infoTooltip}\n                  >\n                    {label}\n                  </FloatingLabel>\n                )}\n\n                <BaseMultiSelectContent search={search}>\n                  {[...groupedOptions.entries()].map(([group, items]) => {\n                    if (group) {\n                      return (\n                        <React.Fragment key={group}>\n                          <BaseMultiSelectGroup heading={group}>\n                            {items.map((option) => (\n                              <BaseMultiSelectItem\n                                key={option.value}\n                                value={option.value}\n                                disabled={option?.disabled}\n                                icon={option?.icon}\n                                tagRender={!!tagRender}\n                              >\n                                {tagRender ? tagRender(option) : option.label}\n                              </BaseMultiSelectItem>\n                            ))}\n                          </BaseMultiSelectGroup>\n                          <BaseMultiSelectSeparator />\n                        </React.Fragment>\n                      );\n                    }\n                    return items.map((option) => (\n                      <BaseMultiSelectItem\n                        key={option.value}\n                        value={option.value}\n                        disabled={option?.disabled}\n                        icon={option?.icon}\n                        tagRender={!!tagRender}\n                      >\n                        {tagRender ? tagRender(option) : option.label}\n                      </BaseMultiSelectItem>\n                    ));\n                  })}\n                </BaseMultiSelectContent>\n              </BaseMultiSelect>\n            )}\n          </div>\n\n          {helperText && (\n            <p className={cn(\"text-xs\", state ? helperTextStyles[state] : \"\")}>\n              {helperText}\n            </p>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\nexport default Select;\n"],"names":["Select","React","className","label","helperText","state","size","isFloatLabel","infoTooltip","clearable","placeholder","options","tagRender","multiple","value","defaultValue","onValueChange","values","defaultValues","onValuesChange","search","clickToRemove","overflowBehavior","disabled","ref","selectId","internalValue","setInternalValue","handleSingleValueChange","newValue","val","helperTextStyles","currentSize","groupedOptions","groups","option","group","jsx","jsxs","cn","Tooltip","Info","BaseMultiSelect","BaseMultiSelectTrigger","BaseMultiSelectValue","FloatingLabel","BaseMultiSelectContent","items","BaseMultiSelectGroup","BaseMultiSelectItem","BaseMultiSelectSeparator","Fragment","Combobox"],"mappings":"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"}

package/dist/esm/components/Separator/Separator.js

@@ -0,0 +1,7 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Separator as o } from "@dsui/ui/components/separator";
+const p = (r) => /* @__PURE__ */ a(o, { ...r });
+export {
+  p as default
+};
+//# sourceMappingURL=Separator.js.map

package/dist/esm/components/Separator/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sources":["../../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import {\n  Separator as SSeparator,\n  type SeparatorProps,\n} from \"@dsui/ui/components/separator\";\n\nconst Separator = (props: SeparatorProps) => {\n  return <SSeparator {...props} />;\n};\n\nexport default Separator;\nexport type { SeparatorProps };\n"],"names":["Separator","props","jsx","SSeparator"],"mappings":";;AAKA,MAAMA,IAAY,CAACC,MACV,gBAAAC,EAACC,GAAA,EAAY,GAAGF,EAAA,CAAO;"}

package/dist/esm/components/Sheet/Sheet.js

@@ -0,0 +1,141 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import I, { useMemo as w } from "react";
+import { SheetHeader as K, SheetTitle as V, SheetDescription as $, SheetFooter as q, Sheet as G, SheetTrigger as J, SheetContent as L } from "@dsui/ui/components/sheet";
+import { SheetClose as fe } from "@dsui/ui/components/sheet";
+import { Drawer as P, DrawerTrigger as Q, DrawerContent as U, DrawerHeader as W, DrawerTitle as X, DrawerDescription as Y, DrawerFooter as Z } from "@dsui/ui/components/drawer";
+import { DrawerClose as xe } from "@dsui/ui/components/drawer";
+import { cn as s } from "@dsui/ui/lib/utils";
+import { ScrollArea as T } from "@dsui/ui/components/scroll-area";
+import { animationClass as ee } from "../../utils/animations.js";
+import { isMobile as se } from "react-device-detect";
+const j = (f, o) => {
+  const t = o === "top" || o === "bottom";
+  return {
+    sm: t ? "max-h-[20vh]!" : "sm:max-w-sm",
+    md: t ? "max-h-[40vh]!" : "sm:max-w-md",
+    lg: t ? "max-h-[60vh]!" : "sm:max-w-lg",
+    xl: t ? "max-h-[80vh]!" : "sm:max-w-xl",
+    full: t ? "max-h-full!" : "sm:max-w-full"
+  }[f];
+}, te = I.forwardRef((f, o) => {
+  const {
+    open: t,
+    onOpenChange: p,
+    title: a,
+    description: r,
+    children: c,
+    trigger: i,
+    footer: n,
+    side: D = "right",
+    closeOnEsc: F = !0,
+    closeOnOutside: R = !0,
+    showCloseButton: k = !0,
+    autoDrawerOnMobile: E = !0,
+    size: g = "md",
+    stickyHeader: h = !1,
+    stickyFooter: d = !1,
+    autoHeight: _ = !0,
+    animation: x,
+    className: u,
+    contentClassName: v,
+    headerClassName: y,
+    titleClassName: N,
+    descriptionClassName: C,
+    footerClassName: S,
+    overlayClassName: A
+  } = f, b = w(() => x ? ee(x) : { className: "" }, [x]), B = s(
+    // Remove default padding and gap to allow custom header/footer
+    "!p-0 !gap-0 flex flex-col",
+    j(g, D),
+    b.className,
+    u
+  ), O = s("px-6 pt-6 text-left", y), M = s(
+    "px-6 pb-6 flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+    S
+  ), z = w(() => a || r ? /* @__PURE__ */ l(
+    K,
+    {
+      className: s("py-4", { "border-b": h }, O),
+      children: [
+        a && /* @__PURE__ */ e(V, { className: N, children: a }),
+        r && /* @__PURE__ */ e($, { className: C, children: r })
+      ]
+    }
+  ) : null, [
+    a,
+    r,
+    O,
+    N,
+    C,
+    h
+  ]), H = w(() => n ? /* @__PURE__ */ e(
+    q,
+    {
+      className: s("py-4", { "border-t": d }, M),
+      children: n
+    }
+  ) : null, [n, M, d]);
+  if (se && E) {
+    const m = s(
+      "flex flex-col",
+      b.className,
+      u
+    );
+    return /* @__PURE__ */ l(P, { open: t, onOpenChange: p, direction: "bottom", children: [
+      i && /* @__PURE__ */ e(Q, { asChild: !0, children: i }),
+      /* @__PURE__ */ l(
+        U,
+        {
+          ref: o,
+          className: s(
+            m,
+            _ ? "" : j(g, "bottom")
+          ),
+          children: [
+            (a || r) && /* @__PURE__ */ l(W, { className: y, children: [
+              a && /* @__PURE__ */ e(X, { className: N, children: a }),
+              r && /* @__PURE__ */ e(Y, { className: C, children: r })
+            ] }),
+            /* @__PURE__ */ e(T, { className: s("flex flex-col overflow-hidden"), children: c && /* @__PURE__ */ e("div", { className: s("px-4 py-2", v), children: c }) }),
+            n && /* @__PURE__ */ e(Z, { className: S, children: n })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ l(G, { open: t, onOpenChange: p, children: [
+    i && /* @__PURE__ */ e(J, { asChild: !0, children: i }),
+    /* @__PURE__ */ l(
+      L,
+      {
+        ref: o,
+        side: D,
+        className: s(u, B),
+        onEscapeKeyDown: (m) => !F && m.preventDefault(),
+        onInteractOutside: (m) => !R && m.preventDefault(),
+        overlayClassName: s(A),
+        children: [
+          !k && /* @__PURE__ */ e("style", { children: `
+            [data-slot="sheet-content"] > [data-slot="sheet-close"] {
+              display: none;
+            }
+          ` }),
+          h && z,
+          /* @__PURE__ */ l(T, { className: "flex max-h-full flex-col overflow-hidden", children: [
+            !h && z,
+            c && /* @__PURE__ */ e("div", { className: s("px-6 py-4", v), children: c }),
+            !d && H
+          ] }),
+          d && H
+        ]
+      }
+    )
+  ] });
+});
+te.displayName = "Sheet";
+export {
+  xe as DrawerClose,
+  fe as SheetClose,
+  te as default
+};
+//# sourceMappingURL=Sheet.js.map

package/dist/esm/components/Sheet/Sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.js","sources":["../../../../src/components/Sheet/Sheet.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport {\n  Sheet as SSheet,\n  SheetContent as SSheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n  SheetClose,\n} from \"@dsui/ui/components/sheet\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@dsui/ui/components/drawer\";\nimport { cn } from \"@dsui/ui/lib/utils\";\nimport { ScrollArea } from \"@dsui/ui/components/scroll-area\";\nimport type { BasicAnimation } from \"@/types/variables\";\nimport { animationClass } from \"@/utils/animations\";\nimport { isMobile } from \"react-device-detect\";\n\nexport type SheetSide = \"top\" | \"right\" | \"bottom\" | \"left\";\nexport type SheetSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\nexport interface SheetProps {\n  // Core props\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n\n  // Content\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  children?: React.ReactNode;\n  trigger?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  // Behavior\n  side?: SheetSide;\n  closeOnEsc?: boolean;\n  closeOnOutside?: boolean;\n  showCloseButton?: boolean;\n  autoDrawerOnMobile?: boolean;\n\n  // Layout\n  size?: SheetSize;\n  stickyHeader?: boolean;\n  stickyFooter?: boolean;\n  autoHeight?: boolean;\n\n  // Animation\n  animation?: BasicAnimation;\n\n  // Styling\n  className?: string;\n  contentClassName?: string;\n  headerClassName?: string;\n  titleClassName?: string;\n  descriptionClassName?: string;\n  footerClassName?: string;\n  overlayClassName?: string;\n}\n\nconst getSizeClasses = (size: SheetSize, side: SheetSide): string => {\n  const isVertical = side === \"top\" || side === \"bottom\";\n  const sizeMap: Record<SheetSize, string> = {\n    sm: isVertical ? \"max-h-[20vh]!\" : \"sm:max-w-sm\",\n    md: isVertical ? \"max-h-[40vh]!\" : \"sm:max-w-md\",\n    lg: isVertical ? \"max-h-[60vh]!\" : \"sm:max-w-lg\",\n    xl: isVertical ? \"max-h-[80vh]!\" : \"sm:max-w-xl\",\n    full: isVertical ? \"max-h-full!\" : \"sm:max-w-full\",\n  };\n  return sizeMap[size];\n};\n\nconst Sheet = React.forwardRef<HTMLDivElement, SheetProps>((props, ref) => {\n  const {\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    trigger,\n    footer,\n    side = \"right\",\n    closeOnEsc = true,\n    closeOnOutside = true,\n    showCloseButton = true,\n    autoDrawerOnMobile = true,\n    size = \"md\",\n    stickyHeader = false,\n    stickyFooter = false,\n    autoHeight = true,\n    animation,\n    className,\n    contentClassName,\n    headerClassName,\n    titleClassName,\n    descriptionClassName,\n    footerClassName,\n    overlayClassName,\n  } = props;\n\n  const animationResult = useMemo(() => {\n    return animation ? animationClass(animation) : { className: \"\" };\n  }, [animation]);\n\n  const contentClasses = cn(\n    // Remove default padding and gap to allow custom header/footer\n    \"!p-0 !gap-0 flex flex-col\",\n    getSizeClasses(size, side),\n    animationResult.className,\n    className,\n  );\n\n  const headerClasses = cn(\"px-6 pt-6 text-left\", headerClassName);\n\n  const footerClasses = cn(\n    \"px-6 pb-6 flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2\",\n    footerClassName,\n  );\n\n  const headerComponents = useMemo(() => {\n    return title || description ? (\n      <SheetHeader\n        className={cn(\"py-4\", { \"border-b\": stickyHeader }, headerClasses)}\n      >\n        {title && <SheetTitle className={titleClassName}>{title}</SheetTitle>}\n        {description && (\n          <SheetDescription className={descriptionClassName}>\n            {description}\n          </SheetDescription>\n        )}\n      </SheetHeader>\n    ) : null;\n  }, [\n    title,\n    description,\n    headerClasses,\n    titleClassName,\n    descriptionClassName,\n    stickyHeader,\n  ]);\n\n  const footerComponents = useMemo(() => {\n    return footer ? (\n      <SheetFooter\n        className={cn(\"py-4\", { \"border-t\": stickyFooter }, footerClasses)}\n      >\n        {footer}\n      </SheetFooter>\n    ) : null;\n  }, [footer, footerClasses, stickyFooter]);\n\n  // Mobile: use drawer with bottom direction if enabled\n  if (isMobile && autoDrawerOnMobile) {\n    const drawerContentClasses = cn(\n      \"flex flex-col\",\n      animationResult.className,\n      className,\n    );\n\n    return (\n      <Drawer open={open} onOpenChange={onOpenChange} direction=\"bottom\">\n        {trigger && <DrawerTrigger asChild>{trigger}</DrawerTrigger>}\n        <DrawerContent\n          ref={ref}\n          className={cn(\n            drawerContentClasses,\n            autoHeight ? \"\" : getSizeClasses(size, \"bottom\"),\n          )}\n        >\n          {(title || description) && (\n            <DrawerHeader className={headerClassName}>\n              {title && (\n                <DrawerTitle className={titleClassName}>{title}</DrawerTitle>\n              )}\n              {description && (\n                <DrawerDescription className={descriptionClassName}>\n                  {description}\n                </DrawerDescription>\n              )}\n            </DrawerHeader>\n          )}\n\n          <ScrollArea className={cn(\"flex flex-col overflow-hidden\")}>\n            {children && (\n              <div className={cn(\"px-4 py-2\", contentClassName)}>\n                {children}\n              </div>\n            )}\n          </ScrollArea>\n\n          {footer && (\n            <DrawerFooter className={footerClassName}>{footer}</DrawerFooter>\n          )}\n        </DrawerContent>\n      </Drawer>\n    );\n  }\n\n  // Desktop: use sheet with original behavior\n  return (\n    <SSheet open={open} onOpenChange={onOpenChange}>\n      {trigger && <SheetTrigger asChild>{trigger}</SheetTrigger>}\n      <SSheetContent\n        ref={ref}\n        side={side}\n        className={cn(className, contentClasses)}\n        onEscapeKeyDown={(e) => !closeOnEsc && e.preventDefault()}\n        onInteractOutside={(e) => !closeOnOutside && e.preventDefault()}\n        overlayClassName={cn(overlayClassName)}\n      >\n        {/* Hide default close button if showCloseButton is false */}\n        {!showCloseButton && (\n          <style>{`\n            [data-slot=\"sheet-content\"] > [data-slot=\"sheet-close\"] {\n              display: none;\n            }\n          `}</style>\n        )}\n\n        {stickyHeader && headerComponents}\n\n        <ScrollArea className=\"flex max-h-full flex-col overflow-hidden\">\n          {!stickyHeader && headerComponents}\n          {children && (\n            <div className={cn(\"px-6 py-4\", contentClassName)}>{children}</div>\n          )}\n          {!stickyFooter && footerComponents}\n        </ScrollArea>\n\n        {stickyFooter && footerComponents}\n      </SSheetContent>\n    </SSheet>\n  );\n});\n\nSheet.displayName = \"Sheet\";\n\nexport { SheetClose, DrawerClose };\nexport default Sheet;\n"],"names":["getSizeClasses","size","side","isVertical","Sheet","React","props","ref","open","onOpenChange","title","description","children","trigger","footer","closeOnEsc","closeOnOutside","showCloseButton","autoDrawerOnMobile","stickyHeader","stickyFooter","autoHeight","animation","className","contentClassName","headerClassName","titleClassName","descriptionClassName","footerClassName","overlayClassName","animationResult","useMemo","animationClass","contentClasses","cn","headerClasses","footerClasses","headerComponents","jsxs","SheetHeader","jsx","SheetTitle","SheetDescription","footerComponents","SheetFooter","isMobile","drawerContentClasses","Drawer","DrawerTrigger","DrawerContent","DrawerHeader","DrawerTitle","DrawerDescription","ScrollArea","DrawerFooter","SSheet","SheetTrigger","SSheetContent","e"],"mappings":"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"}