@salesmind-ai/design-system 0.5.0 → 0.7.0

package/dist/chunk-PYREXCZK.js

@@ -0,0 +1,679 @@
+import React6, { forwardRef, useId } from 'react';
+import clsx8 from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Select as Select$1 } from '@base-ui/react/select';
+
+// src/components/TextArea/TextArea.tsx
+var TextArea = forwardRef(
+  ({ className, label, error, helperText, id, ...props }, ref) => {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: clsx8("ds-textarea", className), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "ds-textarea__label", children: label }),
+      /* @__PURE__ */ jsx("div", { className: "ds-textarea__input-wrapper", children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id: inputId,
+          ref,
+          className: clsx8("ds-textarea__input", error && "ds-textarea__input--error"),
+          ...props
+        }
+      ) }),
+      helperText && /* @__PURE__ */ jsx("span", { className: clsx8("ds-textarea__helper", error && "ds-textarea__helper--error"), children: helperText })
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
+var Checkbox = React6.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const generatedId = React6.useId();
+    const checkboxId = id || generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: clsx8("ds-checkbox-wrapper", className), children: [
+      /* @__PURE__ */ jsx(Checkbox$1.Root, { id: checkboxId, ref, className: "ds-checkbox", ...props, children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, { className: "ds-checkbox__indicator", children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 14 14",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "ds-checkbox__icon",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ) }) }),
+      label && /* @__PURE__ */ jsx("label", { htmlFor: checkboxId, className: "ds-checkbox__label", children: label })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+var Switch = React6.forwardRef(
+  ({ className, label, id, ...props }, ref) => {
+    const generatedId = React6.useId();
+    const switchId = id || generatedId;
+    return /* @__PURE__ */ jsxs("div", { className: clsx8("ds-switch-wrapper", className), children: [
+      /* @__PURE__ */ jsx(Switch$1.Root, { id: switchId, ref, className: "ds-switch", ...props, children: /* @__PURE__ */ jsx(Switch$1.Thumb, { className: "ds-switch__thumb" }) }),
+      label && /* @__PURE__ */ jsx("label", { htmlFor: switchId, className: "ds-switch__label", children: label })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+var Label = React6.forwardRef(
+  ({ className, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        ref,
+        className: clsx8("ds-label", disabled && "ds-label--disabled", className),
+        "data-disabled": disabled || void 0,
+        ...props
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var Skeleton = React6.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx8("ds-skeleton", className),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+var Separator = React6.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": orientation,
+        className: clsx8(
+          "ds-separator",
+          `ds-separator--${orientation}`,
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+var CollapsibleContext = React6.createContext(null);
+function useCollapsibleContext() {
+  const context = React6.useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error("Collapsible compound components must be used within <Collapsible>");
+  }
+  return context;
+}
+var Collapsible = React6.forwardRef(
+  ({ className, open: controlledOpen, onOpenChange, children, ...props }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(false);
+    const isControlled = controlledOpen !== void 0;
+    const open = isControlled ? controlledOpen : uncontrolledOpen;
+    const toggle = React6.useCallback(() => {
+      const next = !open;
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    }, [open, isControlled, onOpenChange]);
+    const contextValue = React6.useMemo(
+      () => ({ open, toggle }),
+      [open, toggle]
+    );
+    return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx8("ds-collapsible", className),
+        "data-state": open ? "open" : "closed",
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Collapsible.displayName = "Collapsible";
+var CollapsibleTrigger = React6.forwardRef(({ className, onClick, ...props }, ref) => {
+  const { toggle } = useCollapsibleContext();
+  const handleClick = (e) => {
+    toggle();
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: clsx8("ds-collapsible__trigger", className),
+      onClick: handleClick,
+      ...props
+    }
+  );
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+var CollapsibleContent = React6.forwardRef(({ className, children, ...props }, ref) => {
+  const { open } = useCollapsibleContext();
+  const contentRef = React6.useRef(null);
+  const [maxHeight, setMaxHeight] = React6.useState(
+    open ? void 0 : 0
+  );
+  React6.useEffect(() => {
+    const el = contentRef.current;
+    if (!el) return;
+    if (open) {
+      const scrollHeight = el.scrollHeight;
+      setMaxHeight(scrollHeight);
+      const timer = setTimeout(() => setMaxHeight(void 0), 200);
+      return () => clearTimeout(timer);
+    } else {
+      const scrollHeight = el.scrollHeight;
+      setMaxHeight(scrollHeight);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setMaxHeight(0);
+        });
+      });
+    }
+  }, [open]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      className: clsx8("ds-collapsible__content", className),
+      "data-state": open ? "open" : "closed",
+      style: {
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : "none"
+      },
+      hidden: !open && maxHeight === 0,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { ref, className: "ds-collapsible__content-inner", children })
+    }
+  );
+});
+CollapsibleContent.displayName = "CollapsibleContent";
+function Select({
+  value,
+  defaultValue,
+  onValueChange,
+  disabled,
+  required,
+  name,
+  items,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Select$1.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange: onValueChange ? (val) => onValueChange(val) : void 0,
+      disabled,
+      required,
+      name,
+      items,
+      children
+    }
+  );
+}
+Select.displayName = "Select";
+var SelectTrigger = React6.forwardRef(
+  ({ className, placeholder = "Select...", size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { className: "ds-select__trigger-wrapper", children: /* @__PURE__ */ jsxs(
+      Select$1.Trigger,
+      {
+        ref,
+        className: clsx8("ds-select__trigger", `ds-select__trigger--${size}`, className),
+        "aria-label": props["aria-label"] || (typeof placeholder === "string" ? placeholder : "Select"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Select$1.Value, { className: "ds-select__value", placeholder }),
+          /* @__PURE__ */ jsx(Select$1.Icon, { className: "ds-select__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+        ]
+      }
+    ) });
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectContent = React6.forwardRef(
+  ({ className, side = "bottom", sideOffset = 4, align = "start", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
+      Select$1.Positioner,
+      {
+        side,
+        sideOffset,
+        align,
+        alignItemWithTrigger: false,
+        children: /* @__PURE__ */ jsx(Select$1.Popup, { ref, className: clsx8("ds-select__content", className), ...props, children: /* @__PURE__ */ jsx(Select$1.List, { className: "ds-select__list", children }) })
+      }
+    ) });
+  }
+);
+SelectContent.displayName = "SelectContent";
+var SelectItem = React6.forwardRef(
+  ({ className, value, children, disabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      Select$1.Item,
+      {
+        ref,
+        value,
+        disabled,
+        className: clsx8("ds-select__item", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(Select$1.ItemIndicator, { className: "ds-select__item-indicator", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          /* @__PURE__ */ jsx(Select$1.ItemText, { children })
+        ]
+      }
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var SelectGroup = React6.forwardRef(
+  ({ className, label, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(Select$1.Group, { ref, className: clsx8("ds-select__group", className), ...props, children: [
+      label && /* @__PURE__ */ jsx(Select$1.GroupLabel, { className: "ds-select__group-label", children: label }),
+      children
+    ] });
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", { ref, className: clsx8("ds-select__separator", className), ...props });
+});
+SelectSeparator.displayName = "SelectSeparator";
+function ChevronDownIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "16",
+      height: "16",
+      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" })
+    }
+  );
+}
+function CheckIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+
+// src/tokens/motion.ts
+var DURATION = {
+  micro: 0.15,
+  // 150ms
+  short: 0.25,
+  // 250ms
+  medium: 0.5,
+  // 500ms
+  long: 1
+  // 1000ms
+};
+var EASING = {
+  standard: [0.16, 1, 0.3, 1],
+  // Smooth, premium feel
+  emphasis: [0.34, 1.56, 0.64, 1],
+  // Slight spring/overshoot
+  exit: [0.4, 0, 0.2, 1],
+  // Quick, decisive exit
+  linear: [0, 0, 1, 1]
+};
+var TRANSITION = {
+  standard: {
+    duration: DURATION.medium,
+    ease: EASING.standard
+  },
+  emphasis: {
+    duration: DURATION.medium,
+    ease: EASING.emphasis
+  },
+  quick: {
+    duration: DURATION.short,
+    ease: EASING.standard
+  },
+  spring: {
+    type: "spring",
+    stiffness: 200,
+    damping: 20
+  }
+};
+var DISTANCE = {
+  sm: 4,
+  md: 12,
+  lg: 24,
+  xl: 48
+};
+var VARIANTS = {
+  fadeIn: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: DURATION.medium, ease: EASING.standard } }
+  },
+  fadeUp: {
+    hidden: { opacity: 0, y: 12 },
+    visible: { opacity: 1, y: 0, transition: { duration: DURATION.medium, ease: EASING.standard } }
+  },
+  fadeDown: {
+    hidden: { opacity: 0, y: -12 },
+    visible: { opacity: 1, y: 0, transition: { duration: DURATION.medium, ease: EASING.standard } }
+  },
+  scaleIn: {
+    hidden: { opacity: 0, scale: 0.95 },
+    visible: {
+      opacity: 1,
+      scale: 1,
+      transition: { duration: DURATION.short, ease: EASING.emphasis }
+    }
+  },
+  slideLeft: {
+    hidden: { opacity: 0, x: DISTANCE.lg },
+    visible: { opacity: 1, x: 0, transition: { duration: DURATION.medium, ease: EASING.standard } }
+  },
+  slideRight: {
+    hidden: { opacity: 0, x: -DISTANCE.lg },
+    visible: { opacity: 1, x: 0, transition: { duration: DURATION.medium, ease: EASING.standard } }
+  },
+  staggerContainer: {
+    hidden: { opacity: 0 },
+    visible: {
+      opacity: 1,
+      transition: {
+        staggerChildren: 0.08,
+        delayChildren: 0.1
+      }
+    }
+  },
+  pulse: {
+    hidden: { scale: 1 },
+    visible: {
+      scale: [1, 1.05, 1],
+      transition: { duration: 1.5, repeat: Infinity, ease: "easeInOut" }
+    }
+  },
+  impact: {
+    hidden: { scale: 1 },
+    trigger: {
+      scale: [1, 0.95, 1.05, 1],
+      transition: { duration: 0.4, ease: "backOut" }
+    }
+  }
+};
+var HERO_ENTRANCE = {
+  container: {
+    variants: {
+      hidden: { opacity: 1 },
+      visible: {
+        opacity: 1,
+        transition: {
+          staggerChildren: 0.12,
+          delayChildren: 0.05
+        }
+      }
+    }
+  },
+  child: {
+    variants: VARIANTS.fadeUp
+  },
+  delays: {
+    eyebrow: 0,
+    title: 0.05,
+    subtitle: 0.17,
+    cta: 0.29,
+    media: 0.41
+  }
+};
+var SECTION_REVEAL = {
+  container: {
+    variants: VARIANTS.staggerContainer
+  },
+  content: {
+    variants: VARIANTS.fadeUp
+  },
+  viewportMargin: "-15%"
+};
+var CARD_HOVER = {
+  rest: { y: 0, scale: 1 },
+  hover: {
+    y: -4,
+    scale: 1.01,
+    transition: { duration: DURATION.short, ease: EASING.standard }
+  }
+};
+var PANEL_CROSSFADE = {
+  initial: { opacity: 0, y: 8 },
+  animate: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: DURATION.short, ease: EASING.standard }
+  },
+  exit: {
+    opacity: 0,
+    y: -8,
+    transition: { duration: DURATION.micro, ease: EASING.exit }
+  }
+};
+var TAB_SLIDE = {
+  transition: TRANSITION.spring,
+  layout: true
+};
+var PRESETS = {
+  heroEntrance: HERO_ENTRANCE,
+  sectionReveal: SECTION_REVEAL,
+  cardHover: CARD_HOVER,
+  panelCrossfade: PANEL_CROSSFADE,
+  tabSlide: TAB_SLIDE
+};
+var REDUCED_VARIANTS = {
+  fadeOnly: {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: DURATION.short } }
+  },
+  none: {
+    hidden: { opacity: 1 },
+    visible: { opacity: 1 }
+  }
+};
+var REDUCED_PANEL_CROSSFADE = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1, transition: { duration: DURATION.micro } },
+  exit: { opacity: 0, transition: { duration: DURATION.micro } }
+};
+var VARIANT_MAP = {
+  fadeIn: VARIANTS.fadeIn,
+  fadeUp: VARIANTS.fadeUp,
+  fadeDown: VARIANTS.fadeDown,
+  scaleIn: VARIANTS.scaleIn,
+  slideLeft: VARIANTS.slideLeft,
+  slideRight: VARIANTS.slideRight
+};
+var MOTION = {
+  DURATION,
+  EASING,
+  TRANSITION,
+  VARIANTS,
+  DISTANCE,
+  PRESETS,
+  REDUCED_VARIANTS
+};
+
+// src/tokens/colors.ts
+var COLORS = {
+  text: {
+    primary: "var(--text-primary)",
+    secondary: "var(--text-secondary)",
+    tertiary: "var(--text-tertiary)",
+    disabled: "var(--text-disabled)"
+  },
+  glass: {
+    base: "var(--glass-base)",
+    baseHover: "var(--glass-base-hover)",
+    baseActive: "var(--glass-base-active)",
+    backdrop: "var(--glass-backdrop)"
+  },
+  rim: {
+    top: "var(--rim-light-top)",
+    bottom: "var(--rim-light-bottom)"
+  },
+  brand: {
+    pink: "var(--brand-pink)",
+    yellow: "var(--brand-yellow)",
+    pinkGlow: "var(--brand-pink-glow)"
+  },
+  status: {
+    success: "var(--status-success)",
+    warning: "var(--status-warning)",
+    error: "var(--status-error)",
+    info: "var(--status-info)"
+  },
+  button: {
+    primaryBg: "var(--btn-primary-bg)",
+    primaryBgHover: "var(--btn-primary-bg-hover)",
+    secondaryBg: "var(--btn-secondary-bg)",
+    secondaryBgHover: "var(--btn-secondary-bg-hover)"
+  }
+};
+
+// src/tokens/spacing.ts
+var SPACING = {
+  1: "var(--space-1)",
+  2: "var(--space-2)",
+  3: "var(--space-3)",
+  4: "var(--space-4)",
+  5: "var(--space-5)",
+  6: "var(--space-6)",
+  8: "var(--space-8)",
+  10: "var(--space-10)",
+  12: "var(--space-12)",
+  16: "var(--space-16)",
+  20: "var(--space-20)"
+};
+
+// src/tokens/typography.ts
+var FONT_FAMILY = {
+  sans: "var(--font-family)",
+  mono: "var(--font-family-mono)"
+};
+var FONT_SIZE = {
+  xs: "var(--font-size-xs)",
+  sm: "var(--font-size-sm)",
+  base: "var(--font-size-base)",
+  lg: "var(--font-size-lg)",
+  xl: "var(--font-size-xl)",
+  "2xl": "var(--font-size-2xl)",
+  "3xl": "var(--font-size-3xl)"
+};
+var FONT_WEIGHT = {
+  normal: "var(--font-weight-normal)",
+  medium: "var(--font-weight-medium)",
+  semibold: "var(--font-weight-semibold)",
+  bold: "var(--font-weight-bold)"
+};
+var LINE_HEIGHT = {
+  tight: "var(--line-height-tight)",
+  normal: "var(--line-height-normal)",
+  relaxed: "var(--line-height-relaxed)"
+};
+
+// src/tokens/radius.ts
+var RADIUS = {
+  panel: "var(--radius-panel)",
+  card: "var(--radius-card)",
+  button: "var(--radius-button)",
+  badge: "var(--radius-badge)",
+  pill: "var(--radius-pill)"
+};
+
+// src/tokens/shadows.ts
+var SHADOWS = {
+  glass: {
+    outer: "var(--glass-shadow-outer)",
+    inner: "var(--glass-shadow-inner)",
+    combined: "var(--glass-shadow-combined)",
+    elevated: "var(--glass-shadow-elevated)",
+    elevatedCombined: "var(--glass-shadow-elevated-combined)"
+  },
+  interactive: {
+    rest: "var(--shadow-interactive-rest)",
+    restSubtle: "var(--shadow-interactive-rest-subtle)",
+    restLight: "var(--shadow-interactive-rest-light)",
+    hover: "var(--shadow-interactive-hover)",
+    hoverSubtle: "var(--shadow-interactive-hover-subtle)",
+    active: "var(--shadow-interactive-active)"
+  }
+};
+
+// src/tokens/z-index.ts
+var Z_INDEX = {
+  void: "var(--z-void)",
+  glassPanel: "var(--z-glass-panel)",
+  ornament: "var(--z-ornament)",
+  dropdown: "var(--z-dropdown)",
+  modalBackdrop: "var(--z-modal-backdrop)",
+  modal: "var(--z-modal)",
+  tooltip: "var(--z-tooltip)"
+};
+
+// src/tokens/breakpoints.ts
+var BREAKPOINTS = {
+  "3xs": 320,
+  "2xs": 375,
+  xs: 480,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+  "3xl": 1920,
+  "4xl": 2560,
+  "5xl": 3840
+};
+var MEDIA_QUERIES = {
+  "3xs": `(min-width: ${BREAKPOINTS["3xs"]}px)`,
+  "2xs": `(min-width: ${BREAKPOINTS["2xs"]}px)`,
+  xs: `(min-width: ${BREAKPOINTS.xs}px)`,
+  sm: `(min-width: ${BREAKPOINTS.sm}px)`,
+  md: `(min-width: ${BREAKPOINTS.md}px)`,
+  lg: `(min-width: ${BREAKPOINTS.lg}px)`,
+  xl: `(min-width: ${BREAKPOINTS.xl}px)`,
+  "2xl": `(min-width: ${BREAKPOINTS["2xl"]}px)`,
+  "3xl": `(min-width: ${BREAKPOINTS["3xl"]}px)`,
+  "4xl": `(min-width: ${BREAKPOINTS["4xl"]}px)`,
+  "5xl": `(min-width: ${BREAKPOINTS["5xl"]}px)`
+};
+
+export { BREAKPOINTS, CARD_HOVER, COLORS, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, DISTANCE, DURATION, EASING, FONT_FAMILY, FONT_SIZE, FONT_WEIGHT, HERO_ENTRANCE, LINE_HEIGHT, Label, MEDIA_QUERIES, MOTION, PANEL_CROSSFADE, PRESETS, RADIUS, REDUCED_PANEL_CROSSFADE, REDUCED_VARIANTS, SECTION_REVEAL, SHADOWS, SPACING, Select, SelectContent, SelectGroup, SelectItem, SelectSeparator, SelectTrigger, Separator, Skeleton, Switch, TAB_SLIDE, TRANSITION, TextArea, VARIANTS, VARIANT_MAP, Z_INDEX };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=chunk-PYREXCZK.js.map