@axtec/components 0.1.8 → 0.1.10

package/dist/index59.js

@@ -1,221 +1,107 @@
-import { jsx as e, jsxs as m, Fragment as f } from "react/jsx-runtime";
-import { useState as b, useContext as v, createContext as w } from "react";
-import { cn as l } from "./index3.js";
-import { ChevronRightIcon as N, ChevronLeftIcon as y } from "@heroicons/react/24/outline";
-const g = w(null), p = () => {
-  const t = v(g);
-  if (!t) throw new Error("useSidebar must be used within a <Sidebar>");
-  return t;
-}, O = ({
-  children: t,
-  defaultOpen: r = !0,
-  open: a,
-  onOpenChange: s,
-  inline: i = !1,
-  className: c
-}) => {
-  const [o, d] = b(r), n = a !== void 0 ? a : o, x = (h) => {
-    s ? s(h) : d(h);
-  }, u = () => x(!n);
-  return /* @__PURE__ */ e(g.Provider, { value: { isOpen: n, setIsOpen: x, toggle: u }, children: /* @__PURE__ */ e(
-    "div",
-    {
-      className: l(
-        "flex flex-col justify-between bg-slate-50 border-r border-slate-200 transition-all duration-300 ease-in-out",
-        i ? "relative h-full" : "hidden md:flex fixed top-0 left-0 z-10 h-screen",
-        n ? "w-64" : "w-16",
-        c
-      ),
-      children: /* @__PURE__ */ e("div", { className: "flex flex-col h-full", children: t })
-    }
-  ) });
-}, E = ({
-  children: t,
-  showToggle: r = !0,
-  className: a
-}) => {
-  const { isOpen: s, toggle: i } = p();
-  return /* @__PURE__ */ m(
-    "div",
-    {
-      className: l(
-        "flex items-center border-b border-slate-200 h-16",
-        s ? "px-4 justify-between" : "px-2 justify-center",
-        a
-      ),
-      children: [
-        s && t,
-        r && /* @__PURE__ */ e(
-          "button",
-          {
-            onClick: i,
-            className: "p-2 rounded-lg hover:bg-slate-200 transition-colors cursor-pointer flex-shrink-0",
-            "aria-label": s ? "Collapse sidebar" : "Expand sidebar",
-            children: s ? /* @__PURE__ */ e(y, { className: "h-5 w-5 text-slate-500" }) : /* @__PURE__ */ e(N, { className: "h-5 w-5 text-slate-500" })
-          }
-        )
-      ]
-    }
-  );
-}, F = ({ children: t, className: r }) => /* @__PURE__ */ e("nav", { className: l("flex-1 py-4", r), children: /* @__PURE__ */ e("ul", { className: "flex flex-col space-y-1 px-2", children: t }) }), z = ({ label: t, children: r, className: a }) => {
-  const { isOpen: s } = p();
-  return /* @__PURE__ */ m("div", { className: l("mt-4 first:mt-0", a), children: [
-    t && s && /* @__PURE__ */ e("div", { className: "px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400", children: t }),
-    !t && s && /* @__PURE__ */ e("div", { className: "border-t border-slate-200 mx-3 mb-2" }),
-    /* @__PURE__ */ e("ul", { className: "flex flex-col space-y-1", children: r })
-  ] });
-}, B = ({
-  label: t,
-  icon: r,
-  active: a = !1,
-  href: s,
-  onClick: i,
-  as: c,
-  badge: o,
-  className: d
-}) => {
-  const { isOpen: n } = p(), x = l(
-    "flex items-center rounded-lg transition-all duration-200 cursor-pointer group w-full",
-    n ? "px-3 py-2.5" : "px-2 py-2.5 justify-center",
-    a ? "bg-accent-tint text-accent-tint-dark" : "text-slate-600 hover:bg-slate-200 hover:text-slate-900",
-    d
-  ), u = /* @__PURE__ */ m(f, { children: [
-    r && /* @__PURE__ */ e(
-      r,
-      {
-        className: l(
-          "h-5 w-5 flex-shrink-0 transition-colors",
-          a ? "text-primary-500" : "text-slate-500 group-hover:text-slate-700"
-        )
-      }
-    ),
-    n && /* @__PURE__ */ e(
-      "span",
-      {
-        className: l(
-          "ml-3 text-sm font-medium truncate",
-          a ? "text-accent-tint-dark" : ""
-        ),
-        children: t
-      }
-    ),
-    n && o !== void 0 && /* @__PURE__ */ e("span", { className: "ml-auto text-xs font-semibold bg-accent-tint text-accent-tint-dark rounded-full px-2 py-0.5", children: o })
-  ] });
-  return s && c ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(c, { href: s, className: x, title: n ? void 0 : t, children: u }) }) : s ? /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e("a", { href: s, className: x, title: n ? void 0 : t, onClick: i, children: u }) }) : /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
-    "button",
-    {
-      onClick: i,
-      className: x,
-      title: n ? void 0 : t,
-      children: u
-    }
-  ) });
-}, G = ({
-  label: t,
-  icon: r,
-  active: a = !1,
-  defaultOpen: s = !1,
-  children: i,
-  className: c
-}) => {
-  const { isOpen: o } = p(), [d, n] = b(s);
-  return /* @__PURE__ */ m("li", { className: c, children: [
-    /* @__PURE__ */ m(
-      "button",
-      {
-        onClick: () => n(!d),
-        className: l(
-          "flex items-center rounded-lg transition-all duration-200 cursor-pointer group w-full",
-          o ? "px-3 py-2.5" : "px-2 py-2.5 justify-center",
-          a ? "text-accent-tint-dark" : "text-slate-600 hover:bg-slate-200 hover:text-slate-900"
-        ),
-        title: o ? void 0 : t,
-        children: [
-          r && /* @__PURE__ */ e(
-            r,
-            {
-              className: l(
-                "h-5 w-5 flex-shrink-0 transition-colors",
-                a ? "text-primary-500" : "text-slate-500 group-hover:text-slate-700"
-              )
-            }
+import { jsxs as s, jsx as e, Fragment as f } from "react/jsx-runtime";
+import { Fragment as h } from "react";
+import { Listbox as x, ListboxButton as g, Transition as y, ListboxOptions as v, ListboxOption as N } from "@headlessui/react";
+import { ChevronUpDownIcon as w, CheckIcon as k } from "@heroicons/react/20/solid";
+import { cn as t } from "./index3.js";
+function S({
+  options: n,
+  value: i,
+  onChange: m,
+  label: c,
+  placeholder: u = "Select an option",
+  error: o,
+  disabled: d,
+  className: p
+}) {
+  const a = n.find((r) => r.value === i);
+  return /* @__PURE__ */ s("div", { className: t("w-full", p), children: [
+    c && /* @__PURE__ */ e("label", { className: "block text-sm font-medium text-slate-700 mb-1.5", children: c }),
+    /* @__PURE__ */ e(x, { value: i, onChange: m, disabled: d, children: /* @__PURE__ */ s("div", { className: "relative", children: [
+      /* @__PURE__ */ s(
+        g,
+        {
+          className: t(
+            "relative w-full py-2.5 pl-4 pr-10 text-left text-base",
+            "bg-white border rounded-lg cursor-pointer",
+            "transition-colors duration-200",
+            "focus:outline-none focus:ring-2 focus:ring-offset-0",
+            o ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "border-slate-300 focus:border-primary-500 focus:ring-primary-500",
+            d && "bg-slate-50 cursor-not-allowed opacity-50"
           ),
-          o && /* @__PURE__ */ m(f, { children: [
-            /* @__PURE__ */ e("span", { className: "ml-3 text-sm font-medium truncate", children: t }),
+          children: [
             /* @__PURE__ */ e(
-              N,
+              "span",
               {
-                className: l(
-                  "ml-auto h-4 w-4 text-slate-400 transition-transform duration-200",
-                  d && "rotate-90"
-                )
+                className: t(
+                  "block truncate",
+                  !a && "text-slate-400"
+                ),
+                children: (a == null ? void 0 : a.label) || u
               }
-            )
-          ] })
-        ]
-      }
-    ),
-    o && d && /* @__PURE__ */ e("ul", { className: "mt-1 ml-4 pl-3 border-l border-slate-200 space-y-1", children: i })
-  ] });
-}, H = ({ children: t, className: r }) => /* @__PURE__ */ e("div", { className: l("p-3", r), children: t }), P = ({
-  icon: t,
-  title: r,
-  description: a,
-  buttonLabel: s,
-  onAction: i,
-  children: c,
-  className: o
-}) => {
-  const { isOpen: d } = p();
-  if (!d)
-    return i ? /* @__PURE__ */ e(
-      "button",
-      {
-        onClick: i,
-        className: l(
-          "w-full p-2 rounded-lg bg-primary-500 text-white hover:bg-primary-600 transition-colors cursor-pointer flex items-center justify-center",
-          o
-        ),
-        title: r,
-        children: t ? /* @__PURE__ */ e(t, { className: "h-5 w-5" }) : /* @__PURE__ */ e("span", { className: "text-xs font-bold", children: r.charAt(0) })
-      }
-    ) : /* @__PURE__ */ e(
-      "div",
-      {
-        className: l(
-          "w-full p-2 rounded-lg bg-primary-500 text-white flex items-center justify-center",
-          o
-        ),
-        title: r,
-        children: t ? /* @__PURE__ */ e(t, { className: "h-5 w-5" }) : /* @__PURE__ */ e("span", { className: "text-xs font-bold", children: r.charAt(0) })
-      }
-    );
-  const n = c || s && i;
-  return /* @__PURE__ */ m("div", { className: l("p-4 rounded-xl bg-gradient-to-br from-primary-500 to-primary-500/80 text-white", o), children: [
-    /* @__PURE__ */ m("div", { className: l("flex items-center gap-2", (a || n) && "mb-2"), children: [
-      t && /* @__PURE__ */ e(t, { className: "h-5 w-5" }),
-      /* @__PURE__ */ e("span", { className: "font-semibold text-sm", children: r })
-    ] }),
-    a && /* @__PURE__ */ e("p", { className: l("text-xs text-white/90", n && "mb-3"), children: a }),
-    c || (s && i ? /* @__PURE__ */ e(
-      "button",
-      {
-        onClick: i,
-        className: "w-full bg-white text-primary-600 px-3 py-2 rounded-lg font-semibold text-sm hover:bg-white/90 transition-colors cursor-pointer",
-        children: s
-      }
-    ) : null)
+            ),
+            /* @__PURE__ */ e("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3", children: /* @__PURE__ */ e(
+              w,
+              {
+                className: "h-5 w-5 text-slate-400",
+                "aria-hidden": "true"
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        y,
+        {
+          as: h,
+          leave: "transition ease-in duration-100",
+          leaveFrom: "opacity-100",
+          leaveTo: "opacity-0",
+          children: /* @__PURE__ */ e(
+            v,
+            {
+              className: t(
+                "absolute z-10 mt-1 w-full max-h-60 overflow-auto",
+                "bg-white rounded-lg border border-slate-200 shadow-lg",
+                "py-1 text-base",
+                "focus:outline-none"
+              ),
+              children: n.map((r) => /* @__PURE__ */ e(
+                N,
+                {
+                  value: r.value,
+                  disabled: r.disabled,
+                  className: ({ active: l, selected: b }) => t(
+                    "relative cursor-pointer select-none py-2.5 pl-10 pr-4",
+                    "transition-colors duration-150",
+                    l && "bg-primary-50",
+                    b && "bg-primary-50 text-primary-900",
+                    r.disabled && "opacity-50 cursor-not-allowed"
+                  ),
+                  children: ({ selected: l }) => /* @__PURE__ */ s(f, { children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: t(
+                          "block truncate",
+                          l ? "font-semibold" : "font-normal"
+                        ),
+                        children: r.label
+                      }
+                    ),
+                    l && /* @__PURE__ */ e("span", { className: "absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600", children: /* @__PURE__ */ e(k, { className: "h-5 w-5", "aria-hidden": "true" }) })
+                  ] })
+                },
+                r.value
+              ))
+            }
+          )
+        }
+      )
+    ] }) }),
+    o && /* @__PURE__ */ e("p", { className: "mt-1.5 text-sm text-red-600", children: o })
   ] });
-};
+}
 export {
-  O as Sidebar,
-  P as SidebarCard,
-  H as SidebarFooter,
-  G as SidebarGroup,
-  E as SidebarHeader,
-  B as SidebarItem,
-  F as SidebarNav,
-  z as SidebarSection,
-  p as useSidebar
+  S as Select
 };
 //# sourceMappingURL=index59.js.map

package/dist/index59.js.map

@@ -1 +1 @@
-{"version":3,"file":"index59.js","sources":["../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type ComponentType,\n  type SVGProps,\n  type MouseEvent,\n} from 'react'\nimport { cn } from '@/lib/utils'\nimport {\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@heroicons/react/24/outline'\n\n// ─── Context ────────────────────────────────────────────────────────────────\n\ninterface SidebarContextValue {\n  isOpen: boolean\n  setIsOpen: (open: boolean) => void\n  toggle: () => void\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null)\n\nexport const useSidebar = () => {\n  const ctx = useContext(SidebarContext)\n  if (!ctx) throw new Error('useSidebar must be used within a <Sidebar>')\n  return ctx\n}\n\n// ─── Sidebar (root) ─────────────────────────────────────────────────────────\n\nexport interface SidebarProps {\n  children: ReactNode\n  /** Start collapsed */\n  defaultOpen?: boolean\n  /** Controlled open state */\n  open?: boolean\n  /** Controlled callback */\n  onOpenChange?: (open: boolean) => void\n  /** Render inline (relative position) instead of fixed — useful for embedding in a layout container */\n  inline?: boolean\n  className?: string\n}\n\nexport const Sidebar = ({\n  children,\n  defaultOpen = true,\n  open,\n  onOpenChange,\n  inline = false,\n  className,\n}: SidebarProps) => {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen)\n  const isOpen = open !== undefined ? open : internalOpen\n\n  const setIsOpen = (value: boolean) => {\n    if (onOpenChange) onOpenChange(value)\n    else setInternalOpen(value)\n  }\n\n  const toggle = () => setIsOpen(!isOpen)\n\n  return (\n    <SidebarContext.Provider value={{ isOpen, setIsOpen, toggle }}>\n      <div\n        className={cn(\n          'flex flex-col justify-between bg-slate-50 border-r border-slate-200 transition-all duration-300 ease-in-out',\n          inline\n            ? 'relative h-full'\n            : 'hidden md:flex fixed top-0 left-0 z-10 h-screen',\n          isOpen ? 'w-64' : 'w-16',\n          className\n        )}\n      >\n        <div className=\"flex flex-col h-full\">\n          {children}\n        </div>\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\n// ─── SidebarHeader ──────────────────────────────────────────────────────────\n\nexport interface SidebarHeaderProps {\n  children?: ReactNode\n  /** Show the built-in collapse toggle button (default: true) */\n  showToggle?: boolean\n  className?: string\n}\n\nexport const SidebarHeader = ({\n  children,\n  showToggle = true,\n  className,\n}: SidebarHeaderProps) => {\n  const { isOpen, toggle } = useSidebar()\n\n  return (\n    <div\n      className={cn(\n        'flex items-center border-b border-slate-200 h-16',\n        isOpen ? 'px-4 justify-between' : 'px-2 justify-center',\n        className\n      )}\n    >\n      {isOpen && children}\n      {showToggle && (\n        <button\n          onClick={toggle}\n          className=\"p-2 rounded-lg hover:bg-slate-200 transition-colors cursor-pointer flex-shrink-0\"\n          aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}\n        >\n          {isOpen ? (\n            <ChevronLeftIcon className=\"h-5 w-5 text-slate-500\" />\n          ) : (\n            <ChevronRightIcon className=\"h-5 w-5 text-slate-500\" />\n          )}\n        </button>\n      )}\n    </div>\n  )\n}\n\n// ─── SidebarNav ─────────────────────────────────────────────────────────────\n\nexport interface SidebarNavProps {\n  children: ReactNode\n  className?: string\n}\n\nexport const SidebarNav = ({ children, className }: SidebarNavProps) => (\n  <nav className={cn('flex-1 py-4', className)}>\n    <ul className=\"flex flex-col space-y-1 px-2\">\n      {children}\n    </ul>\n  </nav>\n)\n\n// ─── SidebarSection ─────────────────────────────────────────────────────────\n\nexport interface SidebarSectionProps {\n  /** Section label (hidden when collapsed) */\n  label?: string\n  children: ReactNode\n  className?: string\n}\n\nexport const SidebarSection = ({ label, children, className }: SidebarSectionProps) => {\n  const { isOpen } = useSidebar()\n\n  return (\n    <div className={cn('mt-4 first:mt-0', className)}>\n      {label && isOpen && (\n        <div className=\"px-3 mb-2 text-xs font-semibold uppercase tracking-wider text-slate-400\">\n          {label}\n        </div>\n      )}\n      {!label && isOpen && <div className=\"border-t border-slate-200 mx-3 mb-2\" />}\n      <ul className=\"flex flex-col space-y-1\">\n        {children}\n      </ul>\n    </div>\n  )\n}\n\n// ─── SidebarItem ────────────────────────────────────────────────────────────\n\ntype HeroIcon = ComponentType<SVGProps<SVGSVGElement> & { title?: string; titleId?: string }>\n\nexport interface SidebarItemProps {\n  /** Menu item label */\n  label: string\n  /** Heroicon component */\n  icon?: HeroIcon\n  /** Whether this item is currently active */\n  active?: boolean\n  /** URL — renders as an anchor. Omit for button behavior. */\n  href?: string\n  /** Click handler */\n  onClick?: (e: MouseEvent) => void\n  /** Custom link renderer for framework integration (Next.js Link, React Router, etc.) */\n  as?: ComponentType<{ href: string; className: string; title?: string; children: ReactNode }>\n  /** Badge count shown to the right of the label */\n  badge?: number | string\n  className?: string\n}\n\nexport const SidebarItem = ({\n  label,\n  icon: Icon,\n  active = false,\n  href,\n  onClick,\n  as: LinkComponent,\n  badge,\n  className,\n}: SidebarItemProps) => {\n  const { isOpen } = useSidebar()\n\n  const itemClasses = cn(\n    'flex items-center rounded-lg transition-all duration-200 cursor-pointer group w-full',\n    isOpen ? 'px-3 py-2.5' : 'px-2 py-2.5 justify-center',\n    active\n      ? 'bg-accent-tint text-accent-tint-dark'\n      : 'text-slate-600 hover:bg-slate-200 hover:text-slate-900',\n    className\n  )\n\n  const content = (\n    <>\n      {Icon && (\n        <Icon\n          className={cn(\n            'h-5 w-5 flex-shrink-0 transition-colors',\n            active ? 'text-primary-500' : 'text-slate-500 group-hover:text-slate-700'\n          )}\n        />\n      )}\n      {isOpen && (\n        <span\n          className={cn(\n            'ml-3 text-sm font-medium truncate',\n            active ? 'text-accent-tint-dark' : ''\n          )}\n        >\n          {label}\n        </span>\n      )}\n      {isOpen && badge !== undefined && (\n        <span className=\"ml-auto text-xs font-semibold bg-accent-tint text-accent-tint-dark rounded-full px-2 py-0.5\">\n          {badge}\n        </span>\n      )}\n    </>\n  )\n\n  // Use custom link component (e.g. Next.js <Link>)\n  if (href && LinkComponent) {\n    return (\n      <li>\n        <LinkComponent href={href} className={itemClasses} title={!isOpen ? label : undefined}>\n          {content}\n        </LinkComponent>\n      </li>\n    )\n  }\n\n  // Plain anchor\n  if (href) {\n    return (\n      <li>\n        <a href={href} className={itemClasses} title={!isOpen ? label : undefined} onClick={onClick}>\n          {content}\n        </a>\n      </li>\n    )\n  }\n\n  // Button\n  return (\n    <li>\n      <button\n        onClick={onClick}\n        className={itemClasses}\n        title={!isOpen ? label : undefined}\n      >\n        {content}\n      </button>\n    </li>\n  )\n}\n\n// ─── SidebarGroup (collapsible sub-menu) ────────────────────────────────────\n\nexport interface SidebarGroupProps {\n  /** Group label */\n  label: string\n  /** Heroicon component */\n  icon?: HeroIcon\n  /** Whether any child item is active (highlights the group) */\n  active?: boolean\n  /** Start expanded */\n  defaultOpen?: boolean\n  children: ReactNode\n  className?: string\n}\n\nexport const SidebarGroup = ({\n  label,\n  icon: Icon,\n  active = false,\n  defaultOpen = false,\n  children,\n  className,\n}: SidebarGroupProps) => {\n  const { isOpen: sidebarOpen } = useSidebar()\n  const [expanded, setExpanded] = useState(defaultOpen)\n\n  return (\n    <li className={className}>\n      <button\n        onClick={() => setExpanded(!expanded)}\n        className={cn(\n          'flex items-center rounded-lg transition-all duration-200 cursor-pointer group w-full',\n          sidebarOpen ? 'px-3 py-2.5' : 'px-2 py-2.5 justify-center',\n          active\n            ? 'text-accent-tint-dark'\n            : 'text-slate-600 hover:bg-slate-200 hover:text-slate-900'\n        )}\n        title={!sidebarOpen ? label : undefined}\n      >\n        {Icon && (\n          <Icon\n            className={cn(\n              'h-5 w-5 flex-shrink-0 transition-colors',\n              active ? 'text-primary-500' : 'text-slate-500 group-hover:text-slate-700'\n            )}\n          />\n        )}\n        {sidebarOpen && (\n          <>\n            <span className=\"ml-3 text-sm font-medium truncate\">{label}</span>\n            <ChevronRightIcon\n              className={cn(\n                'ml-auto h-4 w-4 text-slate-400 transition-transform duration-200',\n                expanded && 'rotate-90'\n              )}\n            />\n          </>\n        )}\n      </button>\n      {sidebarOpen && expanded && (\n        <ul className=\"mt-1 ml-4 pl-3 border-l border-slate-200 space-y-1\">\n          {children}\n        </ul>\n      )}\n    </li>\n  )\n}\n\n// ─── SidebarFooter ──────────────────────────────────────────────────────────\n\nexport interface SidebarFooterProps {\n  children: ReactNode\n  className?: string\n}\n\nexport const SidebarFooter = ({ children, className }: SidebarFooterProps) => (\n  <div className={cn('p-3', className)}>\n    {children}\n  </div>\n)\n\n// ─── SidebarCard ────────────────────────────────────────────────────────────\n\nexport interface SidebarCardProps {\n  /** Icon shown in both states */\n  icon?: HeroIcon\n  /** Title for the card */\n  title: string\n  /** Description text */\n  description?: string\n  /** Optional button label */\n  buttonLabel?: string\n  /** Optional button click handler */\n  onAction?: () => void\n  /** Custom content (replaces the button when sidebar is open) */\n  children?: ReactNode\n  className?: string\n}\n\nexport const SidebarCard = ({\n  icon: Icon,\n  title,\n  description,\n  buttonLabel,\n  onAction,\n  children,\n  className,\n}: SidebarCardProps) => {\n  const { isOpen } = useSidebar()\n\n  if (!isOpen) {\n    // Collapsed: show icon button if there's an action, otherwise just the icon\n    if (onAction) {\n      return (\n        <button\n          onClick={onAction}\n          className={cn(\n            'w-full p-2 rounded-lg bg-primary-500 text-white hover:bg-primary-600 transition-colors cursor-pointer flex items-center justify-center',\n            className\n          )}\n          title={title}\n        >\n          {Icon ? <Icon className=\"h-5 w-5\" /> : <span className=\"text-xs font-bold\">{title.charAt(0)}</span>}\n        </button>\n      )\n    }\n    return (\n      <div\n        className={cn(\n          'w-full p-2 rounded-lg bg-primary-500 text-white flex items-center justify-center',\n          className\n        )}\n        title={title}\n      >\n        {Icon ? <Icon className=\"h-5 w-5\" /> : <span className=\"text-xs font-bold\">{title.charAt(0)}</span>}\n      </div>\n    )\n  }\n\n  const hasBody = children || (buttonLabel && onAction)\n\n  return (\n    <div className={cn('p-4 rounded-xl bg-gradient-to-br from-primary-500 to-primary-500/80 text-white', className)}>\n      <div className={cn('flex items-center gap-2', (description || hasBody) && 'mb-2')}>\n        {Icon && <Icon className=\"h-5 w-5\" />}\n        <span className=\"font-semibold text-sm\">{title}</span>\n      </div>\n      {description && (\n        <p className={cn('text-xs text-white/90', hasBody && 'mb-3')}>{description}</p>\n      )}\n      {children ? (\n        children\n      ) : buttonLabel && onAction ? (\n        <button\n          onClick={onAction}\n          className=\"w-full bg-white text-primary-600 px-3 py-2 rounded-lg font-semibold text-sm hover:bg-white/90 transition-colors cursor-pointer\"\n        >\n          {buttonLabel}\n        </button>\n      ) : null}\n    </div>\n  )\n}\n"],"names":["SidebarContext","createContext","useSidebar","ctx","useContext","Sidebar","children","defaultOpen","open","onOpenChange","inline","className","internalOpen","setInternalOpen","useState","isOpen","setIsOpen","value","toggle","jsx","cn","SidebarHeader","showToggle","jsxs","ChevronLeftIcon","ChevronRightIcon","SidebarNav","SidebarSection","label","SidebarItem","Icon","active","href","onClick","LinkComponent","badge","itemClasses","content","Fragment","SidebarGroup","sidebarOpen","expanded","setExpanded","SidebarFooter","SidebarCard","title","description","buttonLabel","onAction","hasBody"],"mappings":"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"}
+{"version":3,"file":"index59.js","sources":["../src/components/Select/Select.tsx"],"sourcesContent":["import { Fragment } from 'react'\nimport {\n  Listbox,\n  ListboxButton,\n  ListboxOptions,\n  ListboxOption,\n  Transition,\n} from '@headlessui/react'\nimport { CheckIcon, ChevronUpDownIcon } from '@heroicons/react/20/solid'\nimport { cn } from '@/lib/utils'\n\nexport interface SelectOption {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface SelectProps {\n  options: SelectOption[]\n  value?: string\n  onChange?: (value: string) => void\n  label?: string\n  placeholder?: string\n  error?: string\n  disabled?: boolean\n  className?: string\n}\n\nexport function Select({\n  options,\n  value,\n  onChange,\n  label,\n  placeholder = 'Select an option',\n  error,\n  disabled,\n  className,\n}: SelectProps) {\n  const selectedOption = options.find((opt) => opt.value === value)\n\n  return (\n    <div className={cn('w-full', className)}>\n      {label && (\n        <label className=\"block text-sm font-medium text-slate-700 mb-1.5\">\n          {label}\n        </label>\n      )}\n      <Listbox value={value} onChange={onChange} disabled={disabled}>\n        <div className=\"relative\">\n          <ListboxButton\n            className={cn(\n              'relative w-full py-2.5 pl-4 pr-10 text-left text-base',\n              'bg-white border rounded-lg cursor-pointer',\n              'transition-colors duration-200',\n              'focus:outline-none focus:ring-2 focus:ring-offset-0',\n              error\n                ? 'border-red-500 focus:border-red-500 focus:ring-red-500'\n                : 'border-slate-300 focus:border-primary-500 focus:ring-primary-500',\n              disabled && 'bg-slate-50 cursor-not-allowed opacity-50'\n            )}\n          >\n            <span\n              className={cn(\n                'block truncate',\n                !selectedOption && 'text-slate-400'\n              )}\n            >\n              {selectedOption?.label || placeholder}\n            </span>\n            <span className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3\">\n              <ChevronUpDownIcon\n                className=\"h-5 w-5 text-slate-400\"\n                aria-hidden=\"true\"\n              />\n            </span>\n          </ListboxButton>\n          <Transition\n            as={Fragment}\n            leave=\"transition ease-in duration-100\"\n            leaveFrom=\"opacity-100\"\n            leaveTo=\"opacity-0\"\n          >\n            <ListboxOptions\n              className={cn(\n                'absolute z-10 mt-1 w-full max-h-60 overflow-auto',\n                'bg-white rounded-lg border border-slate-200 shadow-lg',\n                'py-1 text-base',\n                'focus:outline-none'\n              )}\n            >\n              {options.map((option) => (\n                <ListboxOption\n                  key={option.value}\n                  value={option.value}\n                  disabled={option.disabled}\n                  className={({ active, selected }) =>\n                    cn(\n                      'relative cursor-pointer select-none py-2.5 pl-10 pr-4',\n                      'transition-colors duration-150',\n                      active && 'bg-primary-50',\n                      selected && 'bg-primary-50 text-primary-900',\n                      option.disabled && 'opacity-50 cursor-not-allowed'\n                    )\n                  }\n                >\n                  {({ selected }) => (\n                    <>\n                      <span\n                        className={cn(\n                          'block truncate',\n                          selected ? 'font-semibold' : 'font-normal'\n                        )}\n                      >\n                        {option.label}\n                      </span>\n                      {selected && (\n                        <span className=\"absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600\">\n                          <CheckIcon className=\"h-5 w-5\" aria-hidden=\"true\" />\n                        </span>\n                      )}\n                    </>\n                  )}\n                </ListboxOption>\n              ))}\n            </ListboxOptions>\n          </Transition>\n        </div>\n      </Listbox>\n      {error && <p className=\"mt-1.5 text-sm text-red-600\">{error}</p>}\n    </div>\n  )\n}\n"],"names":["Select","options","value","onChange","label","placeholder","error","disabled","className","selectedOption","opt","cn","jsx","Listbox","jsxs","ListboxButton","ChevronUpDownIcon","Transition","Fragment","ListboxOptions","option","ListboxOption","active","selected","CheckIcon"],"mappings":";;;;;AA4BO,SAASA,EAAO;AAAA,EACrB,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAAgB;AACd,QAAMC,IAAiBR,EAAQ,KAAK,CAACS,MAAQA,EAAI,UAAUR,CAAK;AAEhE,2BACG,OAAA,EAAI,WAAWS,EAAG,UAAUH,CAAS,GACnC,UAAA;AAAA,IAAAJ,KACC,gBAAAQ,EAAC,SAAA,EAAM,WAAU,mDACd,UAAAR,GACH;AAAA,IAEF,gBAAAQ,EAACC,KAAQ,OAAAX,GAAc,UAAAC,GAAoB,UAAAI,GACzC,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAWJ;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACAL,IACI,2DACA;AAAA,YACJC,KAAY;AAAA,UAAA;AAAA,UAGd,UAAA;AAAA,YAAA,gBAAAK;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWD;AAAA,kBACT;AAAA,kBACA,CAACF,KAAkB;AAAA,gBAAA;AAAA,gBAGpB,kCAAgB,UAASJ;AAAA,cAAA;AAAA,YAAA;AAAA,YAE5B,gBAAAO,EAAC,QAAA,EAAK,WAAU,yEACd,UAAA,gBAAAA;AAAA,cAACI;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,eAAY;AAAA,cAAA;AAAA,YAAA,EACd,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,IAAIC;AAAAA,UACJ,OAAM;AAAA,UACN,WAAU;AAAA,UACV,SAAQ;AAAA,UAER,UAAA,gBAAAN;AAAA,YAACO;AAAA,YAAA;AAAA,cACC,WAAWR;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD,UAAAV,EAAQ,IAAI,CAACmB,MACZ,gBAAAR;AAAA,gBAACS;AAAA,gBAAA;AAAA,kBAEC,OAAOD,EAAO;AAAA,kBACd,UAAUA,EAAO;AAAA,kBACjB,WAAW,CAAC,EAAE,QAAAE,GAAQ,UAAAC,QACpBZ;AAAA,oBACE;AAAA,oBACA;AAAA,oBACAW,KAAU;AAAA,oBACVC,KAAY;AAAA,oBACZH,EAAO,YAAY;AAAA,kBAAA;AAAA,kBAItB,UAAA,CAAC,EAAE,UAAAG,EAAA,MACF,gBAAAT,EAAAI,GAAA,EACE,UAAA;AAAA,oBAAA,gBAAAN;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWD;AAAA,0BACT;AAAA,0BACAY,IAAW,kBAAkB;AAAA,wBAAA;AAAA,wBAG9B,UAAAH,EAAO;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAETG,KACC,gBAAAX,EAAC,QAAA,EAAK,WAAU,qEACd,UAAA,gBAAAA,EAACY,GAAA,EAAU,WAAU,WAAU,eAAY,OAAA,CAAO,EAAA,CACpD;AAAA,kBAAA,EAAA,CAEJ;AAAA,gBAAA;AAAA,gBA5BGJ,EAAO;AAAA,cAAA,CA+Bf;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF,EAAA,CACF,EAAA,CACF;AAAA,IACCd,KAAS,gBAAAM,EAAC,KAAA,EAAE,WAAU,+BAA+B,UAAAN,EAAA,CAAM;AAAA,EAAA,GAC9D;AAEJ;"}

package/dist/index6.js

@@ -1,6 +1,6 @@
 import { jsxs as x, jsx as l } from "react/jsx-runtime";
 import { cn as t } from "./index3.js";
-import { Button as m } from "./index17.js";
+import { Button as m } from "./index19.js";
 const y = ({
   children: f,
   leftActions: s = [],

package/dist/index60.js

@@ -1,71 +1,76 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { cn as u } from "./index3.js";
-function c({
-  variant: e = "text",
-  width: r,
-  height: l,
-  className: n
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { cn as o } from "./index3.js";
+import { CheckIcon as c } from "@heroicons/react/20/solid";
+const x = {
+  sm: "p-3",
+  md: "p-5",
+  lg: "p-6"
+}, b = {
+  sm: "h-6 w-6",
+  md: "h-8 w-8",
+  lg: "h-10 w-10"
+}, h = {
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-base"
+}, y = {
+  sm: "text-xs",
+  md: "text-xs",
+  lg: "text-sm"
+};
+function N({
+  icon: l,
+  label: i,
+  description: m,
+  selected: r = !1,
+  onClick: p,
+  variant: a = "default",
+  size: t = "md",
+  interactive: s = !0,
+  className: d
 }) {
-  const o = {
-    width: typeof r == "number" ? `${r}px` : r,
-    height: typeof l == "number" ? `${l}px` : l
-  };
-  return /* @__PURE__ */ t(
-    "div",
+  return /* @__PURE__ */ n(
+    s ? "button" : "div",
     {
-      className: u(
-        "animate-pulse bg-slate-200",
-        e === "text" && "h-4 rounded",
-        e === "circular" && "rounded-full",
-        e === "rectangular" && "rounded-lg",
-        !r && e === "text" && "w-full",
-        !r && e === "circular" && "w-10",
-        !l && e === "circular" && "h-10",
-        !r && e === "rectangular" && "w-full",
-        !l && e === "rectangular" && "h-20",
-        n
+      ...s ? { type: "button", role: "radio", "aria-checked": r, onClick: p } : {},
+      className: o(
+        "relative rounded-xl border-2 transition-all text-center w-full",
+        x[t],
+        s && "cursor-pointer",
+        r ? "bg-primary-50 border-primary-300 ring-1 ring-primary-200" : a === "branded" ? "bg-primary-50/50 border-primary-200" : "bg-slate-50 border-slate-200",
+        !r && s && (a === "branded" ? "hover:border-primary-300 hover:bg-primary-50" : "hover:border-slate-300 hover:bg-slate-100"),
+        d
       ),
-      style: o
-    }
-  );
-}
-function d({ lines: e = 3, className: r }) {
-  return /* @__PURE__ */ t("div", { className: u("space-y-2", r), children: Array.from({ length: e }).map((l, n) => /* @__PURE__ */ t(
-    c,
-    {
-      variant: "text",
-      width: n === e - 1 ? "60%" : "100%"
-    },
-    n
-  )) });
-}
-function s({ size: e = 40, className: r }) {
-  return /* @__PURE__ */ t(
-    c,
-    {
-      variant: "circular",
-      width: e,
-      height: e,
-      className: r
+      children: [
+        r && /* @__PURE__ */ e("span", { className: "absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-white", children: /* @__PURE__ */ e(c, { className: "h-3.5 w-3.5" }) }),
+        /* @__PURE__ */ n("div", { className: "flex flex-col items-center gap-2", children: [
+          l && /* @__PURE__ */ e(
+            l,
+            {
+              className: o(
+                b[t],
+                r ? "text-primary-600" : a === "branded" ? "text-primary-400" : "text-slate-400"
+              )
+            }
+          ),
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: o(
+                "font-semibold",
+                h[t],
+                r ? "text-primary-600" : "text-slate-800"
+              ),
+              children: i
+            }
+          ),
+          m && /* @__PURE__ */ e("span", { className: o(y[t], "text-slate-500"), children: m })
+        ] })
+      ]
     }
   );
 }
-function f({ className: e }) {
-  return /* @__PURE__ */ a("div", { className: u("p-4 border border-slate-200 rounded-xl", e), children: [
-    /* @__PURE__ */ a("div", { className: "flex items-center gap-3 mb-4", children: [
-      /* @__PURE__ */ t(s, {}),
-      /* @__PURE__ */ a("div", { className: "flex-1 space-y-2", children: [
-        /* @__PURE__ */ t(c, { variant: "text", width: "40%" }),
-        /* @__PURE__ */ t(c, { variant: "text", width: "20%" })
-      ] })
-    ] }),
-    /* @__PURE__ */ t(d, { lines: 3 })
-  ] });
-}
 export {
-  c as Skeleton,
-  s as SkeletonAvatar,
-  f as SkeletonCard,
-  d as SkeletonText
+  N as SelectionCard
 };
 //# sourceMappingURL=index60.js.map

package/dist/index60.js.map

@@ -1 +1 @@
-{"version":3,"file":"index60.js","sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\n\nexport interface SkeletonProps {\n  variant?: 'text' | 'circular' | 'rectangular'\n  width?: string | number\n  height?: string | number\n  className?: string\n}\n\nexport function Skeleton({\n  variant = 'text',\n  width,\n  height,\n  className,\n}: SkeletonProps) {\n  const style: React.CSSProperties = {\n    width: typeof width === 'number' ? `${width}px` : width,\n    height: typeof height === 'number' ? `${height}px` : height,\n  }\n\n  return (\n    <div\n      className={cn(\n        'animate-pulse bg-slate-200',\n        variant === 'text' && 'h-4 rounded',\n        variant === 'circular' && 'rounded-full',\n        variant === 'rectangular' && 'rounded-lg',\n        !width && variant === 'text' && 'w-full',\n        !width && variant === 'circular' && 'w-10',\n        !height && variant === 'circular' && 'h-10',\n        !width && variant === 'rectangular' && 'w-full',\n        !height && variant === 'rectangular' && 'h-20',\n        className\n      )}\n      style={style}\n    />\n  )\n}\n\n// Convenience components for common skeleton patterns\nexport function SkeletonText({ lines = 3, className }: { lines?: number; className?: string }) {\n  return (\n    <div className={cn('space-y-2', className)}>\n      {Array.from({ length: lines }).map((_, i) => (\n        <Skeleton\n          key={i}\n          variant=\"text\"\n          width={i === lines - 1 ? '60%' : '100%'}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport function SkeletonAvatar({ size = 40, className }: { size?: number; className?: string }) {\n  return (\n    <Skeleton\n      variant=\"circular\"\n      width={size}\n      height={size}\n      className={className}\n    />\n  )\n}\n\nexport function SkeletonCard({ className }: { className?: string }) {\n  return (\n    <div className={cn('p-4 border border-slate-200 rounded-xl', className)}>\n      <div className=\"flex items-center gap-3 mb-4\">\n        <SkeletonAvatar />\n        <div className=\"flex-1 space-y-2\">\n          <Skeleton variant=\"text\" width=\"40%\" />\n          <Skeleton variant=\"text\" width=\"20%\" />\n        </div>\n      </div>\n      <SkeletonText lines={3} />\n    </div>\n  )\n}\n"],"names":["Skeleton","variant","width","height","className","style","jsx","cn","SkeletonText","lines","_","i","SkeletonAvatar","size","SkeletonCard","jsxs"],"mappings":";;AASO,SAASA,EAAS;AAAA,EACvB,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAkB;AAChB,QAAMC,IAA6B;AAAA,IACjC,OAAO,OAAOH,KAAU,WAAW,GAAGA,CAAK,OAAOA;AAAA,IAClD,QAAQ,OAAOC,KAAW,WAAW,GAAGA,CAAM,OAAOA;AAAA,EAAA;AAGvD,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAN,MAAY,UAAU;AAAA,QACtBA,MAAY,cAAc;AAAA,QAC1BA,MAAY,iBAAiB;AAAA,QAC7B,CAACC,KAASD,MAAY,UAAU;AAAA,QAChC,CAACC,KAASD,MAAY,cAAc;AAAA,QACpC,CAACE,KAAUF,MAAY,cAAc;AAAA,QACrC,CAACC,KAASD,MAAY,iBAAiB;AAAA,QACvC,CAACE,KAAUF,MAAY,iBAAiB;AAAA,QACxCG;AAAA,MAAA;AAAA,MAEF,OAAAC;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,SAASG,EAAa,EAAE,OAAAC,IAAQ,GAAG,WAAAL,KAAqD;AAC7F,2BACG,OAAA,EAAI,WAAWG,EAAG,aAAaH,CAAS,GACtC,UAAA,MAAM,KAAK,EAAE,QAAQK,EAAA,CAAO,EAAE,IAAI,CAACC,GAAGC,MACrC,gBAAAL;AAAA,IAACN;AAAA,IAAA;AAAA,MAEC,SAAQ;AAAA,MACR,OAAOW,MAAMF,IAAQ,IAAI,QAAQ;AAAA,IAAA;AAAA,IAF5BE;AAAA,EAAA,CAIR,GACH;AAEJ;AAEO,SAASC,EAAe,EAAE,MAAAC,IAAO,IAAI,WAAAT,KAAoD;AAC9F,SACE,gBAAAE;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAOa;AAAA,MACP,QAAQA;AAAA,MACR,WAAAT;AAAA,IAAA;AAAA,EAAA;AAGN;AAEO,SAASU,EAAa,EAAE,WAAAV,KAAqC;AAClE,2BACG,OAAA,EAAI,WAAWG,EAAG,0CAA0CH,CAAS,GACpE,UAAA;AAAA,IAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,gCACb,UAAA;AAAA,MAAA,gBAAAT,EAACM,GAAA,EAAe;AAAA,MAChB,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,QAAA,gBAAAT,EAACN,GAAA,EAAS,SAAQ,QAAO,OAAM,OAAM;AAAA,QACrC,gBAAAM,EAACN,GAAA,EAAS,SAAQ,QAAO,OAAM,MAAA,CAAM;AAAA,MAAA,EAAA,CACvC;AAAA,IAAA,GACF;AAAA,IACA,gBAAAM,EAACE,GAAA,EAAa,OAAO,EAAA,CAAG;AAAA,EAAA,GAC1B;AAEJ;"}
+{"version":3,"file":"index60.js","sources":["../src/components/SelectionCard/SelectionCard.tsx"],"sourcesContent":["import { cn } from '@/lib/utils'\nimport { CheckIcon } from '@heroicons/react/20/solid'\nimport type { ComponentType, SVGProps } from 'react'\n\nexport interface SelectionCardProps {\n  icon?: ComponentType<SVGProps<SVGSVGElement>>\n  label: string\n  description?: string\n  selected?: boolean\n  onClick?: () => void\n  variant?: 'default' | 'branded'\n  size?: 'sm' | 'md' | 'lg'\n  interactive?: boolean\n  className?: string\n}\n\nconst sizeStyles = {\n  sm: 'p-3',\n  md: 'p-5',\n  lg: 'p-6',\n}\n\nconst iconSizeStyles = {\n  sm: 'h-6 w-6',\n  md: 'h-8 w-8',\n  lg: 'h-10 w-10',\n}\n\nconst labelSizeStyles = {\n  sm: 'text-sm',\n  md: 'text-sm',\n  lg: 'text-base',\n}\n\nconst descriptionSizeStyles = {\n  sm: 'text-xs',\n  md: 'text-xs',\n  lg: 'text-sm',\n}\n\nexport function SelectionCard({\n  icon: Icon,\n  label,\n  description,\n  selected = false,\n  onClick,\n  variant = 'default',\n  size = 'md',\n  interactive = true,\n  className,\n}: SelectionCardProps) {\n  const Component = interactive ? 'button' : 'div'\n\n  const interactiveProps = interactive\n    ? { type: 'button' as const, role: 'radio' as const, 'aria-checked': selected, onClick }\n    : {}\n\n  return (\n    <Component\n      {...interactiveProps}\n      className={cn(\n        'relative rounded-xl border-2 transition-all text-center w-full',\n        sizeStyles[size],\n        interactive && 'cursor-pointer',\n        selected\n          ? 'bg-primary-50 border-primary-300 ring-1 ring-primary-200'\n          : variant === 'branded'\n            ? 'bg-primary-50/50 border-primary-200'\n            : 'bg-slate-50 border-slate-200',\n        !selected && interactive && (\n          variant === 'branded'\n            ? 'hover:border-primary-300 hover:bg-primary-50'\n            : 'hover:border-slate-300 hover:bg-slate-100'\n        ),\n        className\n      )}\n    >\n      {selected && (\n        <span className=\"absolute top-2 right-2 flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-white\">\n          <CheckIcon className=\"h-3.5 w-3.5\" />\n        </span>\n      )}\n\n      <div className=\"flex flex-col items-center gap-2\">\n        {Icon && (\n          <Icon\n            className={cn(\n              iconSizeStyles[size],\n              selected ? 'text-primary-600' : variant === 'branded' ? 'text-primary-400' : 'text-slate-400'\n            )}\n          />\n        )}\n        <span\n          className={cn(\n            'font-semibold',\n            labelSizeStyles[size],\n            selected ? 'text-primary-600' : 'text-slate-800'\n          )}\n        >\n          {label}\n        </span>\n        {description && (\n          <span className={cn(descriptionSizeStyles[size], 'text-slate-500')}>{description}</span>\n        )}\n      </div>\n    </Component>\n  )\n}\n"],"names":["sizeStyles","iconSizeStyles","labelSizeStyles","descriptionSizeStyles","SelectionCard","Icon","label","description","selected","onClick","variant","size","interactive","className","jsxs","cn","jsx","CheckIcon"],"mappings":";;;AAgBA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAkB;AAAA,EACtB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAwB;AAAA,EAC5B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAASC,EAAc;AAAA,EAC5B,MAAMC;AAAA,EACN,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,aAAAC,IAAc;AAAA,EACd,WAAAC;AACF,GAAuB;AAOrB,SACE,gBAAAC;AAAA,IAPgBF,IAAc,WAAW;AAAA,IAOxC;AAAA,MACE,GANoBA,IACrB,EAAE,MAAM,UAAmB,MAAM,SAAkB,gBAAgBJ,GAAU,SAAAC,EAAA,IAC7E,CAAA;AAAA,MAKA,WAAWM;AAAA,QACT;AAAA,QACAf,EAAWW,CAAI;AAAA,QACfC,KAAe;AAAA,QACfJ,IACI,6DACAE,MAAY,YACV,wCACA;AAAA,QACN,CAACF,KAAYI,MACXF,MAAY,YACR,iDACA;AAAA,QAENG;AAAA,MAAA;AAAA,MAGD,UAAA;AAAA,QAAAL,KACC,gBAAAQ,EAAC,UAAK,WAAU,0GACd,4BAACC,GAAA,EAAU,WAAU,eAAc,EAAA,CACrC;AAAA,QAGF,gBAAAH,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,UAAAT,KACC,gBAAAW;AAAA,YAACX;AAAA,YAAA;AAAA,cACC,WAAWU;AAAA,gBACTd,EAAeU,CAAI;AAAA,gBACnBH,IAAW,qBAAqBE,MAAY,YAAY,qBAAqB;AAAA,cAAA;AAAA,YAC/E;AAAA,UAAA;AAAA,UAGJ,gBAAAM;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWD;AAAA,gBACT;AAAA,gBACAb,EAAgBS,CAAI;AAAA,gBACpBH,IAAW,qBAAqB;AAAA,cAAA;AAAA,cAGjC,UAAAF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFC,KACC,gBAAAS,EAAC,QAAA,EAAK,WAAWD,EAAGZ,EAAsBQ,CAAI,GAAG,gBAAgB,GAAI,UAAAJ,EAAA,CAAY;AAAA,QAAA,EAAA,CAErF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}