synkra-ds 0.1.1

package/dist/index.js

@@ -0,0 +1,1341 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import * as React4 from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+
+// src/tokens/palette-extended.ts
+var paletteExtended = {
+  reds: {
+    red: "#df1125",
+    neonPink: "#fb212f",
+    electricPink: "#fc3644",
+    hibiscus: "#fb0049",
+    pink: "#fd4154",
+    pinkCitrus: "#ea383a",
+    pomegranate: "#d80e4f",
+    dragonFruit: "#f12e6d",
+    camellia: "#bf3138",
+    redRose: "#ab1438",
+    plum: "#81323d"
+  },
+  oranges: {
+    orange: "#fc4e12",
+    clementine: "#fd513b",
+    apricot: "#fc5c42",
+    papaya: "#fd7036",
+    kumquat: "#fd7441",
+    lightOrange: "#fd820b",
+    peach: "#e0694e",
+    flamingo: "#ca6f59",
+    roseGold: "#e99475",
+    pinkSand: "#feb69c",
+    vintageRose: "#f29c98",
+    grapefruit: "#fda27e"
+  },
+  yellows: {
+    cream: "#ffe0ab",
+    mellowYellow: "#f7f6af",
+    canaryYellow: "#ffda3a",
+    pollen: "#e8c511",
+    flashLight: "#faed0b",
+    lemonCream: "#ffeb6d",
+    flash: "#dff81e"
+  },
+  greens: {
+    green: "#80e220",
+    spearmint: "#77ea7e",
+    mint: "#a2ec8e",
+    beryl: "#d0f2b1",
+    seaFoam: "#cff1d6",
+    turquoise: "#91cec2"
+  },
+  blues: {
+    blue: "#1ea5fc",
+    lightBlue: "#5ebad9",
+    cerulean: "#87b9e7",
+    surfBlue: "#1871ac",
+    pacificGreen: "#0f6d8e",
+    blueCobalt: "#3a6b8e",
+    darkTeal: "#2c6184",
+    blueHorizon: "#1e538f",
+    denimBlue: "#4b709a",
+    linenBlue: "#455785",
+    deepNavy: "#3a4565",
+    midnightBlue: "#383b65"
+  },
+  purples: {
+    purple: "#8962f8",
+    ultraViolet: "#5f41b2",
+    lilac: "#a990dd",
+    oceanBlue: "#6273bd",
+    delftBlue: "#4662b2",
+    indigo: "#474e95",
+    lavenderGray: "#757397",
+    lavender: "#a58998"
+  },
+  neutrals: {
+    mistBlue: "#a7ab99",
+    stormGray: "#578887",
+    cactus: "#5b7971",
+    pineGreen: "#4e6c54",
+    cyprusGreen: "#525d49",
+    northernBlue: "#638a8d",
+    azure: "#788991",
+    alaskanBlue: "#525c73"
+  },
+  earths: {
+    khaki: "#7a6e49",
+    darkOlive: "#7c7a66",
+    softWhite: "#d8c9af",
+    antiqueWhite: "#cda986",
+    yellowGold: "#cc996d",
+    gold: "#b08053",
+    camel: "#a97d4f",
+    walnut: "#a17455",
+    stone: "#a28872",
+    pebble: "#9f8d7e",
+    cocoa: "#8b7d7d",
+    coastalGray: "#715d50"
+  }
+};
+var chartPalette = [
+  "#1ea5fc",
+  // blue
+  "#D4AF37",
+  // gold (brand)
+  "#22C55E",
+  // green
+  "#8962f8",
+  // purple
+  "#fc4e12",
+  // orange
+  "#fb0049",
+  // hibiscus
+  "#91cec2",
+  // turquoise
+  "#f7f6af",
+  // yellow
+  "#a990dd",
+  // lilac
+  "#fd820b"
+  // light orange
+];
+var gradients = {
+  badge: "linear-gradient(82.44deg, #ff3b57 0%, #ffda1a 100%)",
+  purpleBlue: "linear-gradient(135deg, #8962f8, #1ea5fc)",
+  hibiscusDragon: "linear-gradient(135deg, #fb0049, #f12e6d)",
+  greenMint: "linear-gradient(135deg, #80e220, #a2ec8e)",
+  goldSunset: "linear-gradient(135deg, #D4AF37, #fc4e12)"
+};
+
+// src/tokens/index.ts
+var colors = {
+  primary: {
+    gold: "#D4AF37",
+    "gold-dark": "#B8962E",
+    "gold-light": "#E4C84A"
+  },
+  background: {
+    base: "#0A0A0F",
+    elevated: "#111116",
+    surface: "#1a1a1f",
+    overlay: "rgba(0, 0, 0, 0.8)"
+  },
+  text: {
+    primary: "#FFFFFF",
+    secondary: "#A1A1AA",
+    muted: "#71717A",
+    inverse: "#0A0A0F"
+  },
+  semantic: {
+    success: "#22C55E",
+    warning: "#F59E0B",
+    error: "#EF4444",
+    info: "#3B82F6"
+  },
+  border: {
+    default: "rgba(255, 255, 255, 0.1)",
+    subtle: "rgba(255, 255, 255, 0.05)",
+    emphasis: "rgba(212, 175, 55, 0.3)"
+  }
+};
+var typography = {
+  families: {
+    sans: "'Inter', sans-serif",
+    serif: "'Source Serif 4', serif",
+    display: "'Rajdhani', sans-serif",
+    mono: "'JetBrains Mono', monospace"
+  },
+  sizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "1.875rem",
+    "4xl": "2.25rem",
+    "5xl": "3rem"
+  },
+  lineHeights: {
+    xs: "1rem",
+    sm: "1.25rem",
+    base: "1.5rem",
+    lg: "1.75rem",
+    xl: "1.75rem",
+    "2xl": "2rem",
+    "3xl": "2.25rem",
+    "4xl": "2.5rem",
+    "5xl": "1"
+  },
+  weights: {
+    normal: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+  }
+};
+var spacing = {
+  0: "0",
+  px: "1px",
+  0.5: "0.125rem",
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  8: "2rem",
+  10: "2.5rem",
+  12: "3rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem"
+};
+var radius = {
+  none: "0",
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  "2xl": "1rem",
+  full: "9999px"
+};
+var shadows = {
+  none: "none",
+  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1)",
+  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
+  glow: "0 0 20px rgba(212, 175, 55, 0.3)"
+};
+var motion = {
+  duration: {
+    instant: "0ms",
+    fast: "100ms",
+    normal: "200ms",
+    slow: "300ms",
+    slower: "500ms"
+  },
+  easing: {
+    linear: "cubic-bezier(0, 0, 1, 1)",
+    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+    easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"
+  }
+};
+var zIndex = {
+  dropdown: 50,
+  sticky: 100,
+  modal: 200,
+  popover: 300,
+  tooltip: 400
+};
+var tokens = {
+  colors,
+  typography,
+  spacing,
+  radius,
+  shadows,
+  motion,
+  zIndex
+};
+
+// src/assets/logos/index.ts
+var socialLogos = [
+  "Discord",
+  "Facebook",
+  "GitHub",
+  "Google",
+  "Instagram",
+  "LinkedIn",
+  "Messenger",
+  "MidJourney",
+  "OpenAI",
+  "Pinterest",
+  "Reddit",
+  "Skype",
+  "Snapchat",
+  "SoundCloud",
+  "Spotify",
+  "Steam",
+  "TeamViewer",
+  "Telegram",
+  "Threads",
+  "TikTok",
+  "Tinder",
+  "Trello",
+  "Tumblr",
+  "Twitch",
+  "Vine",
+  "WhatsApp",
+  "X",
+  "YouTube"
+];
+var paymentLogos = [
+  "AMEX",
+  "Alipay",
+  "Amazon",
+  "ApplePay",
+  "Bitcoin",
+  "Etherium",
+  "GooglePay",
+  "Maestro",
+  "Mastercard",
+  "PayPal",
+  "Stripe",
+  "Visa"
+];
+function getSocialLogoPath(name, variant = "color") {
+  return `@synkra-ds/assets/logos/social/${variant}/${name}.svg`;
+}
+function getPaymentLogoPath(name) {
+  return `@synkra-ds/assets/logos/payment/Size=large, Payment method=${name}.svg`;
+}
+
+// src/assets/icons/index.ts
+var iconSizes = {
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+var iconCategories = [
+  "Artificial-Intelligence-Machine-Learning",
+  "Computer-Devices",
+  "Culture",
+  "Entertainment",
+  "Food-drink",
+  "Health",
+  "Images-Photography",
+  "Interface-Essential",
+  "Mail",
+  "Map-Travel",
+  "Money-Shopping",
+  "Nature-Ecology",
+  "Phone",
+  "Programming",
+  "Shipping",
+  "Work-Education"
+];
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "whitespace-nowrap rounded-md text-sm font-medium",
+    "transition-colors duration-fast ease-in-out",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-text-inverse hover:bg-primary-dark active:bg-primary-dark shadow-sm",
+        secondary: "bg-bg-surface text-text-primary border border-border hover:bg-bg-elevated active:bg-bg-elevated",
+        outline: "border border-border-emphasis text-primary bg-transparent hover:bg-primary/10 active:bg-primary/15",
+        ghost: "text-text-secondary bg-transparent hover:bg-border-subtle hover:text-text-primary active:bg-border",
+        destructive: "bg-error text-white hover:bg-error/90 active:bg-error/80 shadow-sm",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        sm: "h-8 px-3 text-xs",
+        md: "h-10 px-5 text-sm",
+        lg: "h-12 px-6 text-base",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = React4.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading = false,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        disabled: disabled || loading,
+        "aria-disabled": disabled || loading,
+        "aria-busy": loading,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "animate-spin h-4 w-4",
+              xmlns: "http://www.w3.org/2000/svg",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    fill: "currentColor",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+                  }
+                )
+              ]
+            }
+          ),
+          children
+        ] }) : children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var Input = React4.forwardRef(
+  ({ className, type = "text", error, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border bg-bg-surface px-3 py-2",
+          "text-sm text-text-primary placeholder:text-text-muted",
+          "border-border",
+          "transition-colors duration-fast ease-in-out",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-emphasis focus-visible:border-primary",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-text-primary",
+          error && "border-error focus-visible:ring-error/30",
+          className
+        ),
+        ref,
+        "aria-invalid": error || void 0,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var Checkbox = React4.forwardRef(({ className, error, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-5 w-5 shrink-0 rounded-sm border",
+      "border-border bg-bg-surface",
+      "transition-colors duration-fast ease-in-out",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-text-inverse",
+      "data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-text-inverse",
+      error && "border-error",
+      className
+    ),
+    "aria-invalid": error || void 0,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Indicator,
+      {
+        className: cn("flex items-center justify-center text-current"),
+        children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "10",
+            height: "2",
+            viewBox: "0 0 10 2",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M1 1H9",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          "svg",
+          {
+            width: "10",
+            height: "8",
+            viewBox: "0 0 10 8",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M1 4L3.5 6.5L9 1",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    )
+  }
+));
+Checkbox.displayName = "Checkbox";
+var Card = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border border-border bg-bg-elevated text-text-primary shadow-md",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col gap-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h3",
+  {
+    ref,
+    className: cn(
+      "text-2xl font-semibold leading-none tracking-tight font-display",
+      className
+    ),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-text-secondary", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+var Switch = React4.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(
+  SwitchPrimitive.Root,
+  {
+    className: cn(
+      "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent",
+      "transition-colors duration-fast ease-in-out",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary data-[state=unchecked]:bg-border",
+      size === "sm" ? "h-5 w-9" : "h-6 w-11",
+      className
+    ),
+    ref,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      SwitchPrimitive.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block rounded-full bg-text-primary shadow-sm",
+          "transition-transform duration-fast ease-in-out",
+          size === "sm" ? "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0" : "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = "Switch";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-text-inverse",
+        secondary: "border-transparent bg-bg-surface text-text-secondary",
+        outline: "border-border text-text-primary",
+        success: "border-transparent bg-success/15 text-success",
+        warning: "border-transparent bg-warning/15 text-warning",
+        error: "border-transparent bg-error/15 text-error",
+        info: "border-transparent bg-info/15 text-info",
+        gradient: "border-transparent text-white"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var gradientMap = {
+  badge: "linear-gradient(82.44deg, #ff3b57 0%, #ffda1a 100%)",
+  "purple-blue": "linear-gradient(135deg, #8962f8, #1ea5fc)",
+  hibiscus: "linear-gradient(135deg, #fb0049, #f12e6d)",
+  "green-mint": "linear-gradient(135deg, #80e220, #a2ec8e)",
+  "gold-sunset": "linear-gradient(135deg, #D4AF37, #fc4e12)"
+};
+function Badge({
+  className,
+  variant,
+  gradient = "badge",
+  style,
+  ...props
+}) {
+  const gradientStyle = variant === "gradient" ? { ...style, background: gradientMap[gradient] } : style;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(badgeVariants({ variant }), className),
+      style: gradientStyle,
+      ...props
+    }
+  );
+}
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectTrigger = React4.forwardRef(({ className, children, error, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex h-10 w-full items-center justify-between rounded-lg border bg-bg-elevated px-3 py-2",
+      "text-sm text-text-primary placeholder:text-text-muted",
+      "focus:outline-none focus:ring-2 focus:ring-border-emphasis focus:ring-offset-2 focus:ring-offset-bg-base",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      error ? "border-error" : "border-border",
+      className
+    ),
+    "aria-invalid": error || void 0,
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-4 w-4 opacity-50",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+        }
+      ) })
+    ]
+  }
+));
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React4.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  SelectPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "relative z-50 max-h-60 min-w-[8rem] overflow-hidden rounded-lg border border-border bg-bg-elevated shadow-lg",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    position,
+    ...props,
+    children: /* @__PURE__ */ jsx(
+      SelectPrimitive.Viewport,
+      {
+        className: cn(
+          "p-1",
+          position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        ),
+        children
+      }
+    )
+  }
+) }));
+SelectContent.displayName = "SelectContent";
+var SelectLabel = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-xs font-semibold text-text-muted", className),
+    ...props
+  }
+));
+SelectLabel.displayName = "SelectLabel";
+var SelectItem = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-2",
+      "text-sm text-text-primary outline-none",
+      "focus:bg-bg-surface focus:text-text-primary",
+      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-4 w-4 text-primary",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = "SelectItem";
+var SelectSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = "SelectSeparator";
+var Textarea = React4.forwardRef(
+  ({ className, error, ...props }, ref) => /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[80px] w-full rounded-lg border bg-bg-elevated px-3 py-2",
+        "text-sm text-text-primary placeholder:text-text-muted",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-emphasis focus-visible:ring-offset-2 focus-visible:ring-offset-bg-base",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "resize-y",
+        error ? "border-error" : "border-border",
+        className
+      ),
+      ref,
+      "aria-invalid": error || void 0,
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+var sizeClasses = {
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12",
+  xl: "h-16 w-16"
+};
+var Avatar = React4.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex shrink-0 overflow-hidden rounded-full",
+      sizeClasses[size],
+      className
+    ),
+    "data-size": size,
+    ...props
+  }
+));
+Avatar.displayName = "Avatar";
+var AvatarImage = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full object-cover", className),
+    ...props
+  }
+));
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full",
+      "bg-bg-surface text-text-secondary font-medium text-sm",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = "AvatarFallback";
+var Label2 = React4.forwardRef(({ className, required, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "text-sm font-medium text-text-primary leading-none",
+      "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      required && /* @__PURE__ */ jsx("span", { className: "text-error ml-1", "aria-hidden": "true", children: "*" })
+    ]
+  }
+));
+Label2.displayName = "Label";
+var FormField = React4.forwardRef(
+  ({
+    id,
+    label,
+    helperText,
+    error,
+    required = false,
+    disabled = false,
+    className,
+    inputProps
+  }, ref) => {
+    const hasError = Boolean(error);
+    const descriptionId = helperText || error ? `${id}-description` : void 0;
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+      /* @__PURE__ */ jsx(Label2, { htmlFor: id, required, children: label }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref,
+          id,
+          error: hasError,
+          disabled,
+          required,
+          "aria-describedby": descriptionId,
+          ...inputProps
+        }
+      ),
+      (error || helperText) && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: descriptionId,
+          className: cn(
+            "text-xs",
+            hasError ? "text-error" : "text-text-muted"
+          ),
+          role: hasError ? "alert" : void 0,
+          children: error || helperText
+        }
+      )
+    ] });
+  }
+);
+FormField.displayName = "FormField";
+var Sidebar = React4.forwardRef(
+  ({ className, collapsed = false, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "aside",
+    {
+      ref,
+      className: cn(
+        "flex h-full flex-col border-r border-border bg-bg-elevated",
+        "transition-all duration-slow ease-in-out",
+        collapsed ? "w-16" : "w-64",
+        className
+      ),
+      "data-collapsed": collapsed,
+      ...props,
+      children
+    }
+  )
+);
+Sidebar.displayName = "Sidebar";
+var SidebarHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center gap-3 border-b border-border px-4 py-4", className),
+    ...props
+  }
+));
+SidebarHeader.displayName = "SidebarHeader";
+var SidebarContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("flex-1 overflow-y-auto px-3 py-4", className),
+    ...props
+  }
+));
+SidebarContent.displayName = "SidebarContent";
+var SidebarGroup = React4.forwardRef(
+  ({ className, label, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("mb-4", className), ...props, children: [
+    label && /* @__PURE__ */ jsx("p", { className: "mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-text-muted", children: label }),
+    /* @__PURE__ */ jsx("nav", { className: "flex flex-col gap-1", children })
+  ] })
+);
+SidebarGroup.displayName = "SidebarGroup";
+var SidebarItem = React4.forwardRef(
+  ({ className, active = false, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium",
+        "transition-colors duration-fast ease-in-out",
+        "hover:bg-bg-surface hover:text-text-primary",
+        active ? "bg-primary/10 text-primary" : "text-text-secondary",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-emphasis",
+        className
+      ),
+      "data-active": active,
+      "aria-current": active ? "page" : void 0,
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 h-5 w-5 items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children })
+      ]
+    }
+  )
+);
+SidebarItem.displayName = "SidebarItem";
+var SidebarFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "mt-auto border-t border-border px-4 py-4",
+      className
+    ),
+    ...props
+  }
+));
+SidebarFooter.displayName = "SidebarFooter";
+var LoginForm = React4.forwardRef(
+  ({
+    className,
+    title = "Welcome back",
+    description = "Enter your credentials to access your account",
+    submitLabel = "Sign in",
+    loading = false,
+    error,
+    onSubmit,
+    showForgotPassword = true,
+    onForgotPassword,
+    footer,
+    ...props
+  }, ref) => {
+    const [email, setEmail] = React4.useState("");
+    const [password, setPassword] = React4.useState("");
+    const handleSubmit = (e) => {
+      e.preventDefault();
+      onSubmit?.({ email, password });
+    };
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        ref,
+        className: cn("w-full max-w-sm", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+          /* @__PURE__ */ jsxs(CardHeader, { className: "text-center", children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: title }),
+            /* @__PURE__ */ jsx(CardDescription, { children: description })
+          ] }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-col gap-4", children: [
+            error && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "rounded-md bg-error/10 border border-error/20 px-3 py-2 text-sm text-error",
+                role: "alert",
+                children: error
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormField,
+              {
+                id: "login-email",
+                label: "Email",
+                required: true,
+                inputProps: {
+                  type: "email",
+                  placeholder: "you@example.com",
+                  autoComplete: "email",
+                  value: email,
+                  onChange: (e) => setEmail(e.target.value)
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              FormField,
+              {
+                id: "login-password",
+                label: "Password",
+                required: true,
+                inputProps: {
+                  type: "password",
+                  placeholder: "Enter your password",
+                  autoComplete: "current-password",
+                  value: password,
+                  onChange: (e) => setPassword(e.target.value)
+                }
+              }
+            ),
+            showForgotPassword && /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "link",
+                size: "sm",
+                className: "self-end -mt-1 h-auto p-0 text-xs",
+                onClick: onForgotPassword,
+                children: "Forgot password?"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(CardFooter, { className: "flex-col gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                className: "w-full",
+                loading,
+                children: submitLabel
+              }
+            ),
+            footer
+          ] })
+        ] })
+      }
+    );
+  }
+);
+LoginForm.displayName = "LoginForm";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogClose = DialogPrimitive.Close;
+var DialogPortal = DialogPrimitive.Portal;
+var DialogOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    className: cn(
+      "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm",
+      "data-[state=open]:animate-in data-[state=open]:fade-in-0",
+      "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = React4.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    DialogPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2",
+        "rounded-xl border border-border bg-bg-elevated p-6 shadow-lg",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "focus:outline-none",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(
+          DialogPrimitive.Close,
+          {
+            className: cn(
+              "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity",
+              "hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-border-emphasis",
+              "disabled:pointer-events-none"
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: "h-4 w-4 text-text-secondary",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+                    /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        )
+      ]
+    }
+  )
+] }));
+DialogContent.displayName = "DialogContent";
+var DialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn("flex flex-col gap-1.5 text-center sm:text-left", className),
+    ...props
+  }
+);
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2 mt-6",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-text-primary", className),
+    ...props
+  }
+));
+DialogTitle.displayName = "DialogTitle";
+var DialogDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-text-secondary", className),
+    ...props
+  }
+));
+DialogDescription.displayName = "DialogDescription";
+var ToastProvider = ToastPrimitive.Provider;
+var ToastViewport = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Viewport,
+  {
+    ref,
+    className: cn(
+      "fixed top-0 right-0 z-[100] flex max-h-screen w-full flex-col-reverse gap-2 p-4 sm:max-w-[420px]",
+      className
+    ),
+    ...props
+  }
+));
+ToastViewport.displayName = "ToastViewport";
+var toastVariants = cva(
+  [
+    "group pointer-events-auto relative flex w-full items-center gap-3 overflow-hidden rounded-lg border p-4 shadow-lg",
+    "transition-all",
+    "data-[state=open]:animate-in data-[state=open]:slide-in-from-top-full data-[state=open]:fade-in-0",
+    "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-full data-[state=closed]:fade-out-0",
+    "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]",
+    "data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform",
+    "data-[swipe=end]:animate-out data-[swipe=end]:slide-out-to-right-full"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-bg-elevated text-text-primary",
+        success: "border-success/30 bg-success/10 text-success",
+        error: "border-error/30 bg-error/10 text-error",
+        warning: "border-warning/30 bg-warning/10 text-warning",
+        info: "border-info/30 bg-info/10 text-info"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Toast = React4.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Root,
+  {
+    ref,
+    className: cn(toastVariants({ variant }), className),
+    ...props
+  }
+));
+Toast.displayName = "Toast";
+var ToastAction = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Action,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border border-border bg-transparent px-3",
+      "text-sm font-medium transition-colors",
+      "hover:bg-bg-surface focus:outline-none focus:ring-2 focus:ring-border-emphasis",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "group-[.border-error\\/30]:border-error/30 group-[.border-error\\/30]:hover:border-error group-[.border-error\\/30]:hover:bg-error/10",
+      className
+    ),
+    ...props
+  }
+));
+ToastAction.displayName = "ToastAction";
+var ToastClose = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Close,
+  {
+    ref,
+    className: cn(
+      "absolute right-2 top-2 rounded-md p-1 opacity-0 transition-opacity",
+      "hover:opacity-100 focus:opacity-100 group-hover:opacity-100",
+      "focus:outline-none focus:ring-2 focus:ring-border-emphasis",
+      className
+    ),
+    "toast-close": "",
+    ...props,
+    children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        className: "h-4 w-4",
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+        ]
+      }
+    )
+  }
+));
+ToastClose.displayName = "ToastClose";
+var ToastTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Title,
+  {
+    ref,
+    className: cn("text-sm font-semibold", className),
+    ...props
+  }
+));
+ToastTitle.displayName = "ToastTitle";
+var ToastDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ToastPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm opacity-90", className),
+    ...props
+  }
+));
+ToastDescription.displayName = "ToastDescription";
+var DashboardLayout = React4.forwardRef(
+  ({
+    className,
+    sidebarCollapsed = false,
+    sidebarHeader,
+    sidebarContent,
+    sidebarFooter,
+    headerContent,
+    pageTitle,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex h-screen overflow-hidden bg-bg-base", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(Sidebar, { collapsed: sidebarCollapsed, children: [
+          sidebarHeader && /* @__PURE__ */ jsx(SidebarHeader, { children: sidebarHeader }),
+          /* @__PURE__ */ jsx(SidebarContent, { children: sidebarContent }),
+          sidebarFooter && /* @__PURE__ */ jsx(SidebarFooter, { children: sidebarFooter })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("header", { className: "flex h-14 shrink-0 items-center justify-between border-b border-border bg-bg-elevated px-6", children: [
+            pageTitle && /* @__PURE__ */ jsx("h1", { className: "text-lg font-semibold text-text-primary", children: pageTitle }),
+            !pageTitle && /* @__PURE__ */ jsx("div", {}),
+            headerContent && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: headerContent })
+          ] }),
+          /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-y-auto p-6", children })
+        ] })
+      ]
+    }
+  )
+);
+DashboardLayout.displayName = "DashboardLayout";
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DashboardLayout, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, FormField, Input, Label2 as Label, LoginForm, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarHeader, SidebarItem, Switch, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, badgeVariants, buttonVariants, chartPalette, cn, colors, getPaymentLogoPath, getSocialLogoPath, gradients, iconCategories, iconSizes, motion, paletteExtended, paymentLogos, radius, shadows, socialLogos, spacing, toastVariants, tokens, typography, zIndex };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map