@galyan/ui 0.0.1

package/dist/index.js

@@ -0,0 +1,2235 @@
+// src/button/Button.tsx
+import { forwardRef, useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = forwardRef(function Button2({
+  variant = "solid",
+  size = "md",
+  loading = false,
+  fullWidth = false,
+  leftIcon,
+  rightIcon,
+  disabled,
+  children,
+  className = "",
+  onClick,
+  as: Component = "button",
+  ...rest
+}, ref) {
+  const rippleRef = useRef(null);
+  const handleClick = useCallback(
+    (e) => {
+      const btn = e.currentTarget;
+      const rect = btn.getBoundingClientRect();
+      const size2 = Math.max(rect.width, rect.height);
+      const x = e.clientX - rect.left - size2 / 2;
+      const y = e.clientY - rect.top - size2 / 2;
+      const ripple = document.createElement("span");
+      ripple.className = "gy-btn__ripple";
+      ripple.style.width = ripple.style.height = `${size2}px`;
+      ripple.style.left = `${x}px`;
+      ripple.style.top = `${y}px`;
+      btn.appendChild(ripple);
+      setTimeout(() => ripple.remove(), 600);
+      onClick?.(e);
+    },
+    [onClick]
+  );
+  const isDisabled = disabled || loading;
+  const iconOnly = !children && (leftIcon || rightIcon);
+  const classes = [
+    "gy-btn",
+    `gy-btn--${variant}`,
+    `gy-btn--${size}`,
+    fullWidth ? "gy-btn--full" : "",
+    loading ? "gy-btn--loading" : "",
+    iconOnly ? "gy-btn--icon-only" : "",
+    isDisabled ? "gy-btn--disabled" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      ref,
+      className: classes,
+      disabled: isDisabled,
+      onClick: handleClick,
+      "aria-busy": loading,
+      ...rest,
+      children: [
+        loading ? /* @__PURE__ */ jsx("span", { className: "gy-btn__spinner", "aria-hidden": "true" }) : leftIcon && /* @__PURE__ */ jsx("span", { className: "gy-btn__icon gy-btn__icon--left", "aria-hidden": "true", children: leftIcon }),
+        children && /* @__PURE__ */ jsx("span", { children }),
+        !loading && rightIcon && /* @__PURE__ */ jsx("span", { className: "gy-btn__icon gy-btn__icon--right", "aria-hidden": "true", children: rightIcon })
+      ]
+    }
+  );
+});
+
+// src/typography/Typography.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var variantTagMap = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  "body-xl": "p",
+  "body-lg": "p",
+  "body-md": "p",
+  "body-sm": "p",
+  "body-xs": "p",
+  "caption-lg": "span",
+  "caption-md": "span",
+  label: "label",
+  code: "code"
+};
+function Typography({
+  variant = "body-md",
+  color = "default",
+  as,
+  truncate = false,
+  className = "",
+  children,
+  ...rest
+}) {
+  const Tag = as ?? variantTagMap[variant];
+  const classes = [
+    "gy-text",
+    `gy-text--${variant}`,
+    `gy-text--color-${color}`,
+    truncate ? "gy-text--truncate" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2(Tag, { className: classes, ...rest, children });
+}
+
+// src/input/Input.tsx
+import { forwardRef as forwardRef2, useId } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Input = forwardRef2(function Input2({
+  label,
+  size = "md",
+  error,
+  helperText,
+  leftIcon,
+  rightIcon,
+  clearable,
+  onClear,
+  required,
+  fullWidth = true,
+  disabled,
+  className = "",
+  id,
+  value,
+  onChange,
+  ...rest
+}, ref) {
+  const uid = useId();
+  const inputId = id ?? uid;
+  const wrapperClasses = [
+    "gy-input-wrapper",
+    `gy-input-wrapper--${size}`,
+    error ? "gy-input-wrapper--error" : "",
+    disabled ? "gy-input-wrapper--disabled" : ""
+  ].filter(Boolean).join(" ");
+  const showClear = clearable && value && !disabled;
+  return /* @__PURE__ */ jsxs2("div", { className: `gy-input-root ${fullWidth ? "" : "gy-input-root--inline"} ${className}`, children: [
+    label && /* @__PURE__ */ jsx3(
+      "label",
+      {
+        className: `gy-input-label ${required ? "gy-input-label--required" : ""}`,
+        htmlFor: inputId,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: wrapperClasses, children: [
+      leftIcon && /* @__PURE__ */ jsx3("span", { className: "gy-input-addon gy-input-addon--left", "aria-hidden": "true", children: leftIcon }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          ref,
+          id: inputId,
+          className: "gy-input",
+          disabled,
+          required,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+          value,
+          onChange,
+          ...rest
+        }
+      ),
+      showClear && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          className: "gy-input-clear",
+          onClick: onClear,
+          "aria-label": "Clear input",
+          tabIndex: -1,
+          children: /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsx3("line", { x1: "1", y1: "1", x2: "13", y2: "13" }),
+            /* @__PURE__ */ jsx3("line", { x1: "13", y1: "1", x2: "1", y2: "13" })
+          ] })
+        }
+      ),
+      rightIcon && !showClear && /* @__PURE__ */ jsx3("span", { className: "gy-input-addon gy-input-addon--right", "aria-hidden": "true", children: rightIcon })
+    ] }),
+    error && /* @__PURE__ */ jsx3("span", { id: `${inputId}-error`, className: "gy-input-helper gy-input-helper--error", role: "alert", children: error }),
+    !error && helperText && /* @__PURE__ */ jsx3("span", { id: `${inputId}-helper`, className: "gy-input-helper", children: helperText })
+  ] });
+});
+
+// src/textarea/Textarea.tsx
+import { forwardRef as forwardRef3, useCallback as useCallback2, useEffect, useId as useId2, useRef as useRef2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Textarea = forwardRef3(function Textarea2({
+  label,
+  error,
+  helperText,
+  maxCharCount,
+  autoResize = false,
+  required,
+  disabled,
+  value,
+  onChange,
+  className = "",
+  id,
+  ...rest
+}, ref) {
+  const uid = useId2();
+  const inputId = id ?? uid;
+  const innerRef = useRef2(null);
+  const textareaRef = ref ?? innerRef;
+  const charCount = typeof value === "string" ? value.length : 0;
+  const isOver = maxCharCount ? charCount > maxCharCount : false;
+  const adjustHeight = useCallback2(() => {
+    const el = textareaRef.current;
+    if (!el || !autoResize) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [autoResize, textareaRef]);
+  useEffect(() => {
+    adjustHeight();
+  }, [value, adjustHeight]);
+  const handleChange = (e) => {
+    adjustHeight();
+    onChange?.(e);
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: `gy-textarea-root ${className}`, children: [
+    label && /* @__PURE__ */ jsx4(
+      "label",
+      {
+        className: `gy-textarea-label ${required ? "gy-textarea-label--required" : ""}`,
+        htmlFor: inputId,
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx4(
+      "textarea",
+      {
+        ref: textareaRef,
+        id: inputId,
+        className: [
+          "gy-textarea",
+          error ? "gy-textarea--error" : "",
+          autoResize ? "gy-textarea--auto-resize" : ""
+        ].filter(Boolean).join(" "),
+        disabled,
+        required,
+        "aria-invalid": !!error,
+        value,
+        onChange: handleChange,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "gy-textarea-footer", children: [
+      error ? /* @__PURE__ */ jsx4("span", { className: "gy-textarea-helper gy-textarea-helper--error", role: "alert", children: error }) : helperText ? /* @__PURE__ */ jsx4("span", { className: "gy-textarea-helper", children: helperText }) : /* @__PURE__ */ jsx4("span", {}),
+      maxCharCount !== void 0 && /* @__PURE__ */ jsxs3("span", { className: `gy-textarea-count ${isOver ? "gy-textarea-count--over" : ""}`, children: [
+        charCount,
+        "/",
+        maxCharCount
+      ] })
+    ] })
+  ] });
+});
+
+// src/checkbox/Checkbox.tsx
+import { forwardRef as forwardRef4, useId as useId3 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Checkbox = forwardRef4(function Checkbox2({
+  checked,
+  defaultChecked,
+  indeterminate = false,
+  onChange,
+  disabled = false,
+  label,
+  description,
+  size = "md",
+  id,
+  name,
+  value,
+  className = ""
+}, ref) {
+  const uid = useId3();
+  const inputId = id ?? uid;
+  const isChecked = checked ?? defaultChecked ?? false;
+  const boxClasses = [
+    "gy-checkbox-box",
+    `gy-checkbox-box--${size}`,
+    isChecked ? "gy-checkbox-box--checked" : "",
+    indeterminate ? "gy-checkbox-box--indeterminate" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4(
+    "label",
+    {
+      className: [
+        "gy-checkbox-root",
+        disabled ? "gy-checkbox-root--disabled" : "",
+        className
+      ].filter(Boolean).join(" "),
+      htmlFor: inputId,
+      children: [
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            id: inputId,
+            name,
+            value,
+            checked,
+            defaultChecked,
+            disabled,
+            className: "gy-checkbox-input",
+            onChange: (e) => onChange?.(e.target.checked),
+            "aria-checked": indeterminate ? "mixed" : checked
+          }
+        ),
+        /* @__PURE__ */ jsx5("span", { className: boxClasses, "aria-hidden": "true", children: (isChecked || indeterminate) && /* @__PURE__ */ jsx5("span", { className: "gy-checkbox-icon", children: indeterminate ? /* @__PURE__ */ jsx5("svg", { width: "10", height: "2", viewBox: "0 0 10 2", fill: "currentColor", children: /* @__PURE__ */ jsx5("rect", { x: "0", y: "0", width: "10", height: "2", rx: "1" }) }) : /* @__PURE__ */ jsx5("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx5("polyline", { points: "1,4 4,7 9,1" }) }) }) }),
+        (label || description) && /* @__PURE__ */ jsxs4("span", { className: "gy-checkbox-content", children: [
+          label && /* @__PURE__ */ jsx5("span", { className: "gy-checkbox-label", children: label }),
+          description && /* @__PURE__ */ jsx5("span", { className: "gy-checkbox-description", children: description })
+        ] })
+      ]
+    }
+  );
+});
+
+// src/radiogroup/RadioGroup.tsx
+import { useId as useId4 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function RadioGroup({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  orientation = "vertical",
+  groupLabel,
+  name,
+  disabled = false,
+  className = ""
+}) {
+  const uid = useId4();
+  const groupName = name ?? uid;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": typeof groupLabel === "string" ? groupLabel : void 0,
+      className: `gy-radio-group ${orientation === "horizontal" ? "gy-radio-group--horizontal" : ""} ${className}`,
+      children: [
+        groupLabel && /* @__PURE__ */ jsx6("div", { className: "gy-radio-group-label", children: groupLabel }),
+        options.map((opt) => {
+          const isChecked = value !== void 0 ? value === opt.value : void 0;
+          const isDisabled = disabled || opt.disabled;
+          return /* @__PURE__ */ jsxs5(
+            "label",
+            {
+              className: `gy-radio ${isDisabled ? "gy-radio--disabled" : ""}`,
+              children: [
+                /* @__PURE__ */ jsx6(
+                  "input",
+                  {
+                    type: "radio",
+                    name: groupName,
+                    value: opt.value,
+                    checked: isChecked,
+                    defaultChecked: defaultValue === opt.value,
+                    disabled: isDisabled,
+                    className: "gy-radio-input",
+                    onChange: () => onChange?.(opt.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx6("span", { className: `gy-radio-circle ${isChecked ? "gy-radio-circle--checked" : ""}`, children: isChecked && /* @__PURE__ */ jsx6("span", { className: "gy-radio-dot" }) }),
+                /* @__PURE__ */ jsx6("span", { className: "gy-radio-label", children: opt.label })
+              ]
+            },
+            opt.value
+          );
+        })
+      ]
+    }
+  );
+}
+
+// src/toggle/Toggle.tsx
+import { forwardRef as forwardRef5, useId as useId5 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Toggle = forwardRef5(function Toggle2({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled = false,
+  label,
+  labelPosition = "right",
+  size = "md",
+  id,
+  name,
+  className = ""
+}, ref) {
+  const uid = useId5();
+  const inputId = id ?? uid;
+  const isChecked = checked ?? defaultChecked ?? false;
+  const track = /* @__PURE__ */ jsx7(
+    "span",
+    {
+      className: [
+        "gy-toggle-track",
+        `gy-toggle-track--${size}`,
+        isChecked ? "gy-toggle-track--checked" : ""
+      ].filter(Boolean).join(" "),
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx7("span", { className: "gy-toggle-thumb" })
+    }
+  );
+  const labelEl = label && /* @__PURE__ */ jsx7("span", { className: "gy-toggle-label", children: label });
+  return /* @__PURE__ */ jsxs6(
+    "label",
+    {
+      htmlFor: inputId,
+      className: [
+        "gy-toggle-root",
+        disabled ? "gy-toggle-root--disabled" : "",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            ref,
+            id: inputId,
+            type: "checkbox",
+            role: "switch",
+            name,
+            checked,
+            defaultChecked,
+            disabled,
+            className: "gy-toggle-input",
+            "aria-checked": isChecked,
+            onChange: (e) => onChange?.(e.target.checked)
+          }
+        ),
+        labelPosition === "left" && labelEl,
+        track,
+        labelPosition === "right" && labelEl
+      ]
+    }
+  );
+});
+
+// src/chips/Chips.tsx
+import { useRef as useRef3, useState } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function Chip({
+  children,
+  variant = "soft",
+  size = "md",
+  removable = false,
+  onRemove,
+  clickable = false,
+  selected = false,
+  onClick,
+  icon,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs7(
+    "span",
+    {
+      className: [
+        "gy-chip",
+        `gy-chip--${variant}`,
+        `gy-chip--${size}`,
+        clickable ? "gy-chip--clickable" : "",
+        selected ? "gy-chip--selected" : "",
+        className
+      ].filter(Boolean).join(" "),
+      role: clickable ? "button" : void 0,
+      tabIndex: clickable ? 0 : void 0,
+      onClick: clickable ? onClick : void 0,
+      onKeyDown: clickable ? (e) => {
+        if (e.key === "Enter" || e.key === " ") onClick?.();
+      } : void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: icon }),
+        children,
+        removable && /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            className: "gy-chip__remove",
+            onClick: (e) => {
+              e.stopPropagation();
+              onRemove?.();
+            },
+            "aria-label": "Remove",
+            children: /* @__PURE__ */ jsxs7("svg", { width: "8", height: "8", viewBox: "0 0 8 8", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", children: [
+              /* @__PURE__ */ jsx8("line", { x1: "1", y1: "1", x2: "7", y2: "7" }),
+              /* @__PURE__ */ jsx8("line", { x1: "7", y1: "1", x2: "1", y2: "7" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function ChipsInput({
+  values,
+  onChange,
+  placeholder = "Add a tag...",
+  disabled = false,
+  maxItems,
+  chipVariant = "soft",
+  className = ""
+}) {
+  const [input, setInput] = useState("");
+  const inputRef = useRef3(null);
+  const addChip = (val) => {
+    const trimmed = val.trim();
+    if (!trimmed || values.includes(trimmed)) return;
+    if (maxItems && values.length >= maxItems) return;
+    onChange([...values, trimmed]);
+    setInput("");
+  };
+  const removeChip = (idx) => {
+    onChange(values.filter((_, i) => i !== idx));
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      addChip(input);
+    }
+    if (e.key === "Backspace" && !input && values.length > 0) {
+      removeChip(values.length - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: `gy-chips-input ${className}`,
+      onClick: () => inputRef.current?.focus(),
+      children: [
+        values.map((val, i) => /* @__PURE__ */ jsx8(
+          Chip,
+          {
+            variant: chipVariant,
+            size: "sm",
+            removable: !disabled,
+            onRemove: () => removeChip(i),
+            children: val
+          },
+          i
+        )),
+        (!maxItems || values.length < maxItems) && /* @__PURE__ */ jsx8(
+          "input",
+          {
+            ref: inputRef,
+            className: "gy-chips-input__field",
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            onKeyDown: handleKeyDown,
+            onBlur: () => addChip(input),
+            placeholder: values.length === 0 ? placeholder : "",
+            disabled,
+            "aria-label": placeholder
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/card/Card.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function Card({ variant = "default", size = "md", hoverable = false, className = "", children, onClick, style }) {
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: [
+        "gy-card",
+        variant !== "default" ? `gy-card--${variant}` : "",
+        size !== "md" ? `gy-card--${size}` : "",
+        hoverable ? "gy-card--hoverable" : "",
+        className
+      ].filter(Boolean).join(" "),
+      onClick,
+      style,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      children
+    }
+  );
+}
+function CardHeader({ children, className = "" }) {
+  return /* @__PURE__ */ jsx9("div", { className: `gy-card-header ${className}`, children });
+}
+function CardBody({ children, size, className = "" }) {
+  return /* @__PURE__ */ jsx9("div", { className: ["gy-card-body", size ? `gy-card-body--${size}` : "", className].filter(Boolean).join(" "), children });
+}
+function CardFooter({ children, className = "" }) {
+  return /* @__PURE__ */ jsx9("div", { className: `gy-card-footer ${className}`, children });
+}
+function CardInfo({ title, value, icon, trend, footer, className = "" }) {
+  const isUp = trend ? trend.value >= 0 : null;
+  return /* @__PURE__ */ jsxs8("div", { className: `gy-card-info ${className}`, children: [
+    /* @__PURE__ */ jsxs8("div", { className: "gy-card-info__header", children: [
+      /* @__PURE__ */ jsx9("span", { className: "gy-card-info__title", children: title }),
+      icon && /* @__PURE__ */ jsx9("span", { className: "gy-card-info__icon", children: icon })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "gy-card-info__value", children: value }),
+    trend && /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsxs8("span", { className: `gy-card-info__trend gy-card-info__trend--${isUp ? "up" : "down"}`, children: [
+      isUp ? "\u2191" : "\u2193",
+      " ",
+      Math.abs(trend.value),
+      "%",
+      trend.label && ` ${trend.label}`
+    ] }) }),
+    footer && /* @__PURE__ */ jsx9("div", { className: "gy-card-info__footer", children: footer })
+  ] });
+}
+
+// src/spinner/Spinner.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function Spinner({ size = "md", color = "primary", label, className = "" }) {
+  return /* @__PURE__ */ jsxs9("div", { className: `gy-spinner-container ${className}`, children: [
+    /* @__PURE__ */ jsx10(
+      "span",
+      {
+        className: `gy-spinner gy-spinner--${size} gy-spinner--${color}`,
+        role: "status",
+        "aria-label": label ?? "Loading...",
+        children: /* @__PURE__ */ jsx10("span", { className: "gy-spinner__circle", "aria-hidden": "true" })
+      }
+    ),
+    label && /* @__PURE__ */ jsx10("span", { className: "gy-spinner__label", children: label })
+  ] });
+}
+
+// src/progressbar/ProgressBar.tsx
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function ProgressBar({
+  value = 0,
+  max = 100,
+  size = "md",
+  color = "primary",
+  label,
+  showValue = false,
+  striped = false,
+  indeterminate = false,
+  className = ""
+}) {
+  const pct = Math.min(Math.max(value / max * 100, 0), 100);
+  const fillClasses = [
+    "gy-progress-fill",
+    color !== "primary" ? `gy-progress-fill--${color}` : "",
+    striped ? "gy-progress-fill--striped" : "",
+    indeterminate ? "gy-progress-fill--indeterminate" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs10("div", { className: `gy-progress ${className}`, children: [
+    (label || showValue) && /* @__PURE__ */ jsxs10("div", { className: "gy-progress-header", children: [
+      label && /* @__PURE__ */ jsx11("span", { className: "gy-progress-label", children: label }),
+      showValue && !indeterminate && /* @__PURE__ */ jsxs10("span", { className: "gy-progress-value", children: [
+        Math.round(pct),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx11(
+      "div",
+      {
+        className: `gy-progress-track gy-progress-track--${size}`,
+        role: "progressbar",
+        "aria-valuenow": indeterminate ? void 0 : value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-label": label ?? "Progress",
+        children: /* @__PURE__ */ jsx11(
+          "div",
+          {
+            className: fillClasses,
+            style: { width: indeterminate ? void 0 : `${pct}%` }
+          }
+        )
+      }
+    )
+  ] });
+}
+
+// src/skeleton/Skeleton.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function Skeleton({
+  shape = "rect",
+  animation = "wave",
+  width,
+  height,
+  className = "",
+  lines,
+  gap = "0.5rem"
+}) {
+  const classes = [
+    "gy-skeleton",
+    `gy-skeleton--${shape}`,
+    animation !== "none" ? `gy-skeleton--${animation}` : "",
+    !width ? "gy-skeleton--w-full" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    width,
+    height
+  };
+  if (lines) {
+    return /* @__PURE__ */ jsx12("div", { style: { display: "flex", flexDirection: "column", gap }, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx12(
+      "div",
+      {
+        className: `gy-skeleton gy-skeleton--text ${animation !== "none" ? `gy-skeleton--${animation}` : ""} ${i === lines - 1 ? "gy-skeleton--w-3-4" : "gy-skeleton--w-full"}`,
+        style: { height: height ?? "1em" },
+        "aria-hidden": "true"
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx12("div", { className: classes, style, "aria-hidden": "true" });
+}
+
+// src/banner/Banner.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+var icons = {
+  info: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx13("path", { d: "M8 1a7 7 0 100 14A7 7 0 008 1zm0 3a1 1 0 110 2 1 1 0 010-2zm0 3a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 018 7z" }) }),
+  success: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx13("path", { d: "M8 1a7 7 0 100 14A7 7 0 008 1zm3.78 5.78a.75.75 0 00-1.06-1.06L7 9.44 5.28 7.72a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.06 0l4.25-4.25z" }) }),
+  warning: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx13("path", { d: "M8 1.5a.75.75 0 01.65.375l6 10.5A.75.75 0 0114 13.5H2a.75.75 0 01-.65-1.125l6-10.5A.75.75 0 018 1.5zm0 4a.75.75 0 01.75.75v3a.75.75 0 01-1.5 0v-3A.75.75 0 018 5.5zm0 6.5a1 1 0 110-2 1 1 0 010 2z" }) }),
+  danger: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx13("path", { d: "M8 1a7 7 0 100 14A7 7 0 008 1zm0 3a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 018 4zm0 7.5a1 1 0 110-2 1 1 0 010 2z" }) }),
+  neutral: /* @__PURE__ */ jsx13("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ jsx13("path", { d: "M8 1a7 7 0 100 14A7 7 0 008 1zm0 3a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 018 4zm0 7.5a1 1 0 110-2 1 1 0 010 2z" }) })
+};
+function Banner({
+  variant = "info",
+  layout = "inline",
+  title,
+  description,
+  icon,
+  dismissible = false,
+  onDismiss,
+  className = ""
+}) {
+  const [dismissed, setDismissed] = useState2(false);
+  if (dismissed) return null;
+  const handleDismiss = () => {
+    setDismissed(true);
+    onDismiss?.();
+  };
+  return /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      className: [
+        "gy-banner",
+        `gy-banner--${variant}`,
+        `gy-banner--${layout}`,
+        className
+      ].filter(Boolean).join(" "),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx13("span", { className: "gy-banner__icon", children: icon ?? icons[variant] }),
+        /* @__PURE__ */ jsxs11("div", { className: "gy-banner__content", children: [
+          title && /* @__PURE__ */ jsx13("div", { className: "gy-banner__title", children: title }),
+          description && /* @__PURE__ */ jsx13("div", { className: "gy-banner__description", children: description })
+        ] }),
+        dismissible && /* @__PURE__ */ jsx13("button", { className: "gy-banner__close", onClick: handleDismiss, "aria-label": "Dismiss", children: /* @__PURE__ */ jsxs11("svg", { width: "12", height: "12", viewBox: "0 0 12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+          /* @__PURE__ */ jsx13("line", { x1: "1", y1: "1", x2: "11", y2: "11" }),
+          /* @__PURE__ */ jsx13("line", { x1: "11", y1: "1", x2: "1", y2: "11" })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/breadcrumb/Breadcrumb.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+var DefaultSeparator = () => /* @__PURE__ */ jsx14("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx14("polyline", { points: "4,2 8,6 4,10" }) });
+function Breadcrumb({
+  items,
+  separator = /* @__PURE__ */ jsx14(DefaultSeparator, {}),
+  maxItems,
+  className = ""
+}) {
+  const [expanded, setExpanded] = useState3(false);
+  const shouldCollapse = maxItems && items.length > maxItems + 1 && !expanded;
+  const displayed = [];
+  if (shouldCollapse) {
+    const first = items[0];
+    const last = items[items.length - 1];
+    displayed.push(renderItem(first, false, separator));
+    displayed.push(
+      /* @__PURE__ */ jsxs12("li", { className: "gy-breadcrumb-item", children: [
+        /* @__PURE__ */ jsx14("span", { className: "gy-breadcrumb-separator", children: separator }),
+        /* @__PURE__ */ jsx14(
+          "button",
+          {
+            className: "gy-breadcrumb-ellipsis",
+            onClick: () => setExpanded(true),
+            "aria-label": "Show more breadcrumbs",
+            children: "\u2022\u2022\u2022"
+          }
+        )
+      ] }, "ellipsis")
+    );
+    displayed.push(renderItem(last, true, separator));
+  } else {
+    items.forEach((item, i) => {
+      displayed.push(renderItem(item, i === items.length - 1, separator, i));
+    });
+  }
+  return /* @__PURE__ */ jsx14("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx14("ol", { className: `gy-breadcrumb ${className}`, children: displayed }) });
+}
+function renderItem(item, isCurrent, separator, key) {
+  return /* @__PURE__ */ jsxs12("li", { className: "gy-breadcrumb-item", children: [
+    key !== 0 && key !== void 0 && /* @__PURE__ */ jsx14("span", { className: "gy-breadcrumb-separator", "aria-hidden": "true", children: separator }),
+    isCurrent ? /* @__PURE__ */ jsx14("span", { className: "gy-breadcrumb-current", "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx14(
+      "a",
+      {
+        className: "gy-breadcrumb-link",
+        href: item.href ?? "#",
+        onClick: item.onClick ? (e) => {
+          e.preventDefault();
+          item.onClick?.();
+        } : void 0,
+        children: item.label
+      }
+    )
+  ] }, key ?? item.label);
+}
+
+// src/animatednumber/AnimatedNumber.tsx
+import { useEffect as useEffect2, useRef as useRef4, useState as useState4 } from "react";
+import { jsxs as jsxs13 } from "react/jsx-runtime";
+function easeOut(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function easeInOut(t) {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+function AnimatedNumber({
+  value,
+  duration = 1e3,
+  format,
+  className = "",
+  prefix = "",
+  suffix = "",
+  decimals = 0,
+  easing = "easeOut"
+}) {
+  const [displayed, setDisplayed] = useState4(0);
+  const startRef = useRef4(0);
+  const startTimeRef = useRef4(null);
+  const rafRef = useRef4(0);
+  const prevValueRef = useRef4(0);
+  useEffect2(() => {
+    startRef.current = prevValueRef.current;
+    startTimeRef.current = null;
+    const easeFn = easing === "linear" ? (t) => t : easing === "easeOut" ? easeOut : easeInOut;
+    const animate = (time) => {
+      if (!startTimeRef.current) startTimeRef.current = time;
+      const elapsed = time - startTimeRef.current;
+      const t = Math.min(elapsed / duration, 1);
+      const eased = easeFn(t);
+      const current = startRef.current + (value - startRef.current) * eased;
+      setDisplayed(current);
+      if (t < 1) {
+        rafRef.current = requestAnimationFrame(animate);
+      } else {
+        prevValueRef.current = value;
+      }
+    };
+    cancelAnimationFrame(rafRef.current);
+    rafRef.current = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [value, duration, easing]);
+  const formatted = format ? format(displayed) : displayed.toFixed(decimals).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return /* @__PURE__ */ jsxs13("span", { className: `gy-animated-number ${className}`, "aria-live": "polite", "aria-atomic": "true", children: [
+    prefix,
+    formatted,
+    suffix
+  ] });
+}
+
+// src/accordion/Accordion.tsx
+import { useRef as useRef5, useState as useState5 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+function AccordionPanel({ open, children }) {
+  const ref = useRef5(null);
+  const height = open ? ref.current?.scrollHeight ?? 0 : 0;
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: "gy-accordion-panel",
+      style: { height, transition: `height 250ms cubic-bezier(0.4, 0, 0.2, 1)`, overflow: "hidden" },
+      "aria-hidden": !open,
+      children: /* @__PURE__ */ jsx15("div", { ref, className: "gy-accordion-panel-inner", children })
+    }
+  );
+}
+function Accordion({ items, type = "single", defaultOpen, flush = false, className = "" }) {
+  const initOpen = defaultOpen ? Array.isArray(defaultOpen) ? defaultOpen : [defaultOpen] : [];
+  const [openIds, setOpenIds] = useState5(new Set(initOpen));
+  const toggle = (id) => {
+    setOpenIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        if (type === "single") next.clear();
+        next.add(id);
+      }
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx15("div", { className: `gy-accordion ${className}`, children: items.map((item) => {
+    const isOpen = openIds.has(item.id);
+    return /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        className: `gy-accordion-item ${flush ? "gy-accordion-item--flush" : ""}`,
+        children: [
+          /* @__PURE__ */ jsxs14(
+            "button",
+            {
+              type: "button",
+              className: `gy-accordion-trigger ${isOpen ? "gy-accordion-trigger--open" : ""}`,
+              onClick: () => !item.disabled && toggle(item.id),
+              "aria-expanded": isOpen,
+              disabled: item.disabled,
+              children: [
+                /* @__PURE__ */ jsx15("span", { className: "gy-accordion-title", children: item.title }),
+                /* @__PURE__ */ jsx15("span", { className: `gy-accordion-icon ${isOpen ? "gy-accordion-icon--open" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx15("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx15("polyline", { points: "4,6 8,10 12,6" }) }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx15(AccordionPanel, { open: isOpen, children: item.content })
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+
+// src/tab/Tabs.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+function Tabs({ items, defaultTab, activeTab, onChange, orientation = "horizontal", className = "" }) {
+  const [internalActive, setInternalActive] = useState6(defaultTab ?? items[0]?.id ?? "");
+  const current = activeTab ?? internalActive;
+  const handleSelect = (id) => {
+    setInternalActive(id);
+    onChange?.(id);
+  };
+  const activeItem = items.find((i) => i.id === current);
+  return /* @__PURE__ */ jsxs15("div", { className: `gy-tabs ${orientation === "vertical" ? "gy-tabs--vertical" : ""} ${className}`, children: [
+    /* @__PURE__ */ jsx16("div", { className: "gy-tabs-list", role: "tablist", "aria-orientation": orientation, children: items.map((item) => /* @__PURE__ */ jsxs15(
+      "button",
+      {
+        role: "tab",
+        id: `gy-tab-${item.id}`,
+        "aria-controls": `gy-panel-${item.id}`,
+        "aria-selected": current === item.id,
+        disabled: item.disabled,
+        className: `gy-tabs-trigger ${current === item.id ? "gy-tabs-trigger--active" : ""}`,
+        onClick: () => !item.disabled && handleSelect(item.id),
+        children: [
+          item.icon && /* @__PURE__ */ jsx16("span", { "aria-hidden": "true", children: item.icon }),
+          item.label,
+          item.badge !== void 0 && /* @__PURE__ */ jsx16("span", { className: "gy-tabs-trigger-badge", children: item.badge })
+        ]
+      },
+      item.id
+    )) }),
+    activeItem && /* @__PURE__ */ jsx16(
+      "div",
+      {
+        id: `gy-panel-${current}`,
+        role: "tabpanel",
+        "aria-labelledby": `gy-tab-${current}`,
+        className: "gy-tabs-panel",
+        children: activeItem.content
+      },
+      current
+    )
+  ] });
+}
+
+// src/modal/Modal.tsx
+import { useEffect as useEffect3, useRef as useRef6 } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+function Modal({
+  open,
+  onClose,
+  title,
+  size = "md",
+  children,
+  footer,
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  className = ""
+}) {
+  const dialogRef = useRef6(null);
+  useEffect3(() => {
+    if (!open) return;
+    const previous = document.activeElement;
+    dialogRef.current?.focus();
+    const handleKey = (e) => {
+      if (e.key === "Escape" && closeOnEscape) onClose();
+      if (e.key === "Tab") {
+        const focusable = dialogRef.current?.querySelectorAll(
+          'a, button:not(:disabled), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+        );
+        if (!focusable?.length) return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKey);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+      document.body.style.overflow = "";
+      previous?.focus();
+    };
+  }, [open, onClose, closeOnEscape]);
+  if (!open) return null;
+  const content = /* @__PURE__ */ jsx17(
+    "div",
+    {
+      className: "gy-modal-backdrop",
+      onClick: closeOnBackdrop ? (e) => {
+        if (e.target === e.currentTarget) onClose();
+      } : void 0,
+      "aria-modal": "true",
+      children: /* @__PURE__ */ jsxs16(
+        "div",
+        {
+          ref: dialogRef,
+          role: "dialog",
+          "aria-labelledby": title ? "gy-modal-title" : void 0,
+          className: `gy-modal gy-modal--${size} ${className}`,
+          tabIndex: -1,
+          children: [
+            title && /* @__PURE__ */ jsxs16("div", { className: "gy-modal-header", children: [
+              /* @__PURE__ */ jsx17("h2", { id: "gy-modal-title", className: "gy-modal-title", children: title }),
+              /* @__PURE__ */ jsx17("button", { className: "gy-modal-close", onClick: onClose, "aria-label": "Close dialog", children: /* @__PURE__ */ jsxs16("svg", { width: "16", height: "16", viewBox: "0 0 16 16", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+                /* @__PURE__ */ jsx17("line", { x1: "1", y1: "1", x2: "15", y2: "15" }),
+                /* @__PURE__ */ jsx17("line", { x1: "15", y1: "1", x2: "1", y2: "15" })
+              ] }) })
+            ] }),
+            /* @__PURE__ */ jsx17("div", { className: "gy-modal-body", children }),
+            footer && /* @__PURE__ */ jsx17("div", { className: "gy-modal-footer", children: footer })
+          ]
+        }
+      )
+    }
+  );
+  return createPortal(content, document.body);
+}
+
+// src/dropdown/Dropdown.tsx
+import { useEffect as useEffect4, useId as useId6, useRef as useRef7, useState as useState7 } from "react";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+function Dropdown({
+  options,
+  value,
+  onChange,
+  placeholder = "Select an option",
+  searchable = false,
+  disabled = false,
+  label,
+  error,
+  className = "",
+  id
+}) {
+  const uid = useId6();
+  const inputId = id ?? uid;
+  const [open, setOpen] = useState7(false);
+  const [search, setSearch] = useState7("");
+  const [focused, setFocused] = useState7(0);
+  const rootRef = useRef7(null);
+  const searchRef = useRef7(null);
+  const selected = options.find((o) => o.value === value);
+  const filtered = searchable && search ? options.filter((o) => String(o.label).toLowerCase().includes(search.toLowerCase())) : options;
+  const groups = filtered.reduce((acc, opt) => {
+    const g = opt.group ?? "__default__";
+    acc[g] = [...acc[g] ?? [], opt];
+    return acc;
+  }, {});
+  useEffect4(() => {
+    if (!open) {
+      setSearch("");
+      setFocused(0);
+      return;
+    }
+    if (searchable) setTimeout(() => searchRef.current?.focus(), 50);
+  }, [open, searchable]);
+  useEffect4(() => {
+    const handler = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  const handleSelect = (opt) => {
+    if (opt.disabled) return;
+    onChange?.(opt.value);
+    setOpen(false);
+  };
+  const handleKeyDown = (e) => {
+    const flat = filtered.filter((o) => !o.disabled);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setFocused((f) => Math.min(f + 1, flat.length - 1));
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setFocused((f) => Math.max(f - 1, 0));
+    }
+    if (e.key === "Enter" && open) {
+      e.preventDefault();
+      const opt = flat[focused];
+      if (opt) handleSelect(opt);
+    }
+    if (e.key === "Escape") setOpen(false);
+    if (!open && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      setOpen(true);
+    }
+  };
+  return /* @__PURE__ */ jsxs17("div", { ref: rootRef, className: `gy-dropdown-root ${className}`, onKeyDown: handleKeyDown, children: [
+    label && /* @__PURE__ */ jsx18("label", { className: "gy-input-label", htmlFor: inputId, children: label }),
+    /* @__PURE__ */ jsxs17(
+      "button",
+      {
+        id: inputId,
+        type: "button",
+        className: [
+          "gy-dropdown-trigger",
+          open ? "gy-dropdown-trigger--open" : "",
+          disabled ? "gy-dropdown-trigger--disabled" : "",
+          !selected ? "gy-dropdown-trigger--placeholder" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => !disabled && setOpen((o) => !o),
+        disabled,
+        "aria-expanded": open,
+        "aria-haspopup": "listbox",
+        children: [
+          /* @__PURE__ */ jsx18("span", { children: selected ? selected.label : placeholder }),
+          /* @__PURE__ */ jsx18("span", { className: `gy-dropdown-chevron ${open ? "gy-dropdown-chevron--open" : ""}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx18("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx18("polyline", { points: "3,5 7,9 11,5" }) }) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs17("div", { className: "gy-dropdown-menu", role: "listbox", children: [
+      searchable && /* @__PURE__ */ jsx18("div", { className: "gy-dropdown-search", children: /* @__PURE__ */ jsx18(
+        "input",
+        {
+          ref: searchRef,
+          className: "gy-dropdown-search-input",
+          value: search,
+          onChange: (e) => {
+            setSearch(e.target.value);
+            setFocused(0);
+          },
+          placeholder: "Search...",
+          "aria-label": "Search options"
+        }
+      ) }),
+      /* @__PURE__ */ jsx18("div", { className: "gy-dropdown-options", children: filtered.length === 0 ? /* @__PURE__ */ jsx18("div", { className: "gy-dropdown-empty", children: "No options found" }) : Object.entries(groups).map(([group, opts]) => /* @__PURE__ */ jsxs17("div", { children: [
+        group !== "__default__" && /* @__PURE__ */ jsx18("div", { className: "gy-dropdown-group-label", children: group }),
+        opts.map((opt, i) => /* @__PURE__ */ jsxs17(
+          "div",
+          {
+            className: [
+              "gy-dropdown-option",
+              opt.value === value ? "gy-dropdown-option--selected" : "",
+              focused === i ? "gy-dropdown-option--focused" : "",
+              opt.disabled ? "gy-dropdown-option--disabled" : ""
+            ].filter(Boolean).join(" "),
+            role: "option",
+            "aria-selected": opt.value === value,
+            onClick: () => handleSelect(opt),
+            children: [
+              opt.icon && /* @__PURE__ */ jsx18("span", { "aria-hidden": "true", children: opt.icon }),
+              opt.label,
+              opt.value === value && /* @__PURE__ */ jsx18("span", { className: "gy-dropdown-check", "aria-hidden": "true", children: /* @__PURE__ */ jsx18("svg", { width: "14", height: "11", viewBox: "0 0 14 11", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx18("polyline", { points: "1,5 5,9 13,1" }) }) })
+            ]
+          },
+          opt.value
+        ))
+      ] }, group)) })
+    ] }),
+    error && /* @__PURE__ */ jsx18("span", { className: "gy-input-helper gy-input-helper--error", role: "alert", children: error })
+  ] });
+}
+
+// src/menu/Menu.tsx
+import React15, { useEffect as useEffect5, useRef as useRef8, useState as useState8 } from "react";
+import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+function Tooltip({ content, children, position = "top", delay = 300, disabled = false }) {
+  const [visible, setVisible] = useState8(false);
+  const timerRef = useRef8(void 0);
+  const show = () => {
+    timerRef.current = setTimeout(() => setVisible(true), delay);
+  };
+  const hide = () => {
+    clearTimeout(timerRef.current);
+    setVisible(false);
+  };
+  return /* @__PURE__ */ jsxs18("span", { className: "gy-tooltip-wrapper", onMouseEnter: show, onMouseLeave: hide, onFocus: show, onBlur: hide, children: [
+    children,
+    visible && !disabled && content && /* @__PURE__ */ jsx19("span", { className: `gy-tooltip gy-tooltip--${position}`, role: "tooltip", children: content })
+  ] });
+}
+var posStyle = {
+  "bottom-left": { top: "calc(100% + 4px)", left: 0 },
+  "bottom-right": { top: "calc(100% + 4px)", right: 0 },
+  "top-left": { bottom: "calc(100% + 4px)", left: 0 },
+  "top-right": { bottom: "calc(100% + 4px)", right: 0 }
+};
+function Menu({ items, trigger, position = "bottom-left", className = "" }) {
+  const [open, setOpen] = useState8(false);
+  const rootRef = useRef8(null);
+  useEffect5(() => {
+    const handler = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  return /* @__PURE__ */ jsxs18("div", { ref: rootRef, className: "gy-menu-trigger", style: { position: "relative" }, children: [
+    React15.cloneElement(trigger, { onClick: () => setOpen((o) => !o) }),
+    open && /* @__PURE__ */ jsx19("div", { className: `gy-menu gy-menu--absolute ${className}`, style: posStyle[position], role: "menu", children: items.map((entry) => {
+      if ("separator" in entry && entry.separator) {
+        return /* @__PURE__ */ jsx19("div", { className: "gy-menu-separator", role: "separator" }, entry.id);
+      }
+      if ("groupLabel" in entry && entry.groupLabel) {
+        return /* @__PURE__ */ jsx19("div", { className: "gy-menu-group-label", children: entry.groupLabel }, entry.id);
+      }
+      const item = entry;
+      return /* @__PURE__ */ jsxs18(
+        "button",
+        {
+          type: "button",
+          className: [
+            "gy-menu-item",
+            item.danger ? "gy-menu-item--danger" : "",
+            item.disabled ? "gy-menu-item--disabled" : ""
+          ].filter(Boolean).join(" "),
+          role: "menuitem",
+          disabled: item.disabled,
+          onClick: () => {
+            item.onClick?.();
+            setOpen(false);
+          },
+          children: [
+            item.icon && /* @__PURE__ */ jsx19("span", { className: "gy-menu-item__icon", "aria-hidden": "true", children: item.icon }),
+            item.label,
+            item.badge && /* @__PURE__ */ jsx19("span", { className: "gy-menu-item__badge", children: item.badge })
+          ]
+        },
+        item.id
+      );
+    }) })
+  ] });
+}
+
+// src/toaster/Toaster.tsx
+import { createContext, useCallback as useCallback3, useContext, useState as useState9 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+var ToastContext = createContext(null);
+var icons2 = {
+  success: /* @__PURE__ */ jsxs19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "#10b981", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx20("circle", { cx: "8", cy: "8", r: "7" }),
+    /* @__PURE__ */ jsx20("polyline", { points: "5,8 7,10 11,6" })
+  ] }),
+  error: /* @__PURE__ */ jsxs19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "#ef4444", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx20("circle", { cx: "8", cy: "8", r: "7" }),
+    /* @__PURE__ */ jsx20("line", { x1: "8", y1: "5", x2: "8", y2: "9" }),
+    /* @__PURE__ */ jsx20("circle", { cx: "8", cy: "11.5", r: "0.5", fill: "#ef4444" })
+  ] }),
+  warning: /* @__PURE__ */ jsx20("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "#f59e0b", children: /* @__PURE__ */ jsx20("path", { d: "M8 2L1 14h14L8 2zm0 4v4m0 2v.01", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" }) }),
+  info: /* @__PURE__ */ jsxs19("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "#0ea5e9", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ jsx20("circle", { cx: "8", cy: "8", r: "7" }),
+    /* @__PURE__ */ jsx20("line", { x1: "8", y1: "8", x2: "8", y2: "12" }),
+    /* @__PURE__ */ jsx20("circle", { cx: "8", cy: "5", r: "0.5", fill: "#0ea5e9" })
+  ] }),
+  loading: /* @__PURE__ */ jsx20(Spinner, { size: "xs" })
+};
+function ToasterProvider({ children, position = "top-right" }) {
+  const [toasts, setToasts] = useState9([]);
+  const dismiss = useCallback3((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const dismissAll = useCallback3(() => setToasts([]), []);
+  const toast = useCallback3((data) => {
+    const id = Math.random().toString(36).slice(2);
+    const duration = data.duration ?? (data.variant === "loading" ? 0 : 4e3);
+    const newToast = { ...data, id, duration };
+    setToasts((prev) => [...prev, newToast]);
+    if (duration > 0) {
+      setTimeout(() => dismiss(id), duration);
+    }
+    return id;
+  }, [dismiss]);
+  const isLeft = position.includes("left");
+  const toasterNode = /* @__PURE__ */ jsx20("div", { className: `gy-toaster gy-toaster--${position}`, children: toasts.map((t) => /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      className: `gy-toast gy-toast--${t.variant ?? "info"} ${isLeft ? "gy-toast--left" : ""}`,
+      role: "alert",
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsx20("div", { className: "gy-toast-accent" }),
+        /* @__PURE__ */ jsx20("span", { className: "gy-toast-icon", children: icons2[t.variant ?? "info"] }),
+        /* @__PURE__ */ jsxs19("div", { className: "gy-toast-content", children: [
+          /* @__PURE__ */ jsx20("div", { className: "gy-toast-title", children: t.title }),
+          t.description && /* @__PURE__ */ jsx20("div", { className: "gy-toast-description", children: t.description })
+        ] }),
+        (t.dismissible ?? true) && /* @__PURE__ */ jsx20("button", { className: "gy-toast-close", onClick: () => dismiss(t.id), "aria-label": "Dismiss", children: /* @__PURE__ */ jsxs19("svg", { width: "12", height: "12", viewBox: "0 0 12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+          /* @__PURE__ */ jsx20("line", { x1: "1", y1: "1", x2: "11", y2: "11" }),
+          /* @__PURE__ */ jsx20("line", { x1: "11", y1: "1", x2: "1", y2: "11" })
+        ] }) }),
+        t.duration && t.duration > 0 && /* @__PURE__ */ jsx20("div", { className: "gy-toast-progress", children: /* @__PURE__ */ jsx20("div", { className: "gy-toast-progress-bar", style: { animationDuration: `${t.duration}ms` } }) })
+      ]
+    },
+    t.id
+  )) });
+  return /* @__PURE__ */ jsxs19(ToastContext.Provider, { value: { toasts, toast, dismiss, dismissAll }, children: [
+    children,
+    typeof document !== "undefined" && createPortal2(toasterNode, document.body)
+  ] });
+}
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error("useToast must be used inside ToasterProvider");
+  return ctx;
+}
+
+// src/stepper/Stepper.tsx
+import React17, { useState as useState10 } from "react";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx21("svg", { width: "14", height: "11", viewBox: "0 0 14 11", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx21("polyline", { points: "1,5 5,9 13,1" }) });
+var ErrorIcon = () => /* @__PURE__ */ jsxs20("svg", { width: "12", height: "12", viewBox: "0 0 12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+  /* @__PURE__ */ jsx21("line", { x1: "2", y1: "2", x2: "10", y2: "10" }),
+  /* @__PURE__ */ jsx21("line", { x1: "10", y1: "2", x2: "2", y2: "10" })
+] });
+function Stepper({
+  steps,
+  activeStep: controlledStep,
+  defaultStep = 0,
+  variant = "linear",
+  orientation = "horizontal",
+  onStepChange,
+  onComplete,
+  className = ""
+}) {
+  const [internalStep, setInternalStep] = useState10(defaultStep);
+  const current = controlledStep ?? internalStep;
+  const goTo = (idx) => {
+    if (variant === "linear" && idx > current + 1) return;
+    if (idx < 0 || idx >= steps.length) return;
+    setInternalStep(idx);
+    onStepChange?.(idx);
+  };
+  const next = () => {
+    if (current === steps.length - 1) {
+      onComplete?.();
+    } else {
+      goTo(current + 1);
+    }
+  };
+  const prev = () => goTo(current - 1);
+  const getStatus = (idx) => {
+    if (idx < current) return "completed";
+    if (idx === current) return "active";
+    return "upcoming";
+  };
+  return /* @__PURE__ */ jsxs20("div", { className: `gy-stepper ${orientation === "vertical" ? "gy-stepper--vertical" : ""} ${className}`, children: [
+    /* @__PURE__ */ jsx21("div", { className: `gy-stepper ${orientation === "vertical" ? "gy-stepper--vertical" : ""}`, style: { width: "100%" }, children: steps.map((step, idx) => {
+      const status = getStatus(idx);
+      const isClickable = variant === "free" || idx <= current;
+      return /* @__PURE__ */ jsxs20(React17.Fragment, { children: [
+        /* @__PURE__ */ jsxs20("div", { className: "gy-stepper-item", children: [
+          /* @__PURE__ */ jsx21(
+            "span",
+            {
+              className: [
+                "gy-stepper-indicator",
+                `gy-stepper-indicator--${status}`,
+                isClickable ? "gy-stepper-indicator--clickable" : ""
+              ].filter(Boolean).join(" "),
+              onClick: () => isClickable && goTo(idx),
+              role: isClickable ? "button" : void 0,
+              tabIndex: isClickable ? 0 : void 0,
+              onKeyDown: isClickable ? (e) => {
+                if (e.key === "Enter") goTo(idx);
+              } : void 0,
+              "aria-label": `Step ${idx + 1}: ${step.label}`,
+              "aria-current": status === "active" ? "step" : void 0,
+              children: status === "completed" ? /* @__PURE__ */ jsx21(CheckIcon, {}) : status === "error" ? /* @__PURE__ */ jsx21(ErrorIcon, {}) : idx + 1
+            }
+          ),
+          /* @__PURE__ */ jsxs20("div", { children: [
+            /* @__PURE__ */ jsx21("div", { className: `gy-stepper-label gy-stepper-label--${status}`, children: step.label }),
+            step.optional && /* @__PURE__ */ jsx21("div", { className: "gy-stepper-description", children: "Optional" }),
+            step.description && /* @__PURE__ */ jsx21("div", { className: "gy-stepper-description", children: step.description })
+          ] })
+        ] }),
+        idx < steps.length - 1 && /* @__PURE__ */ jsx21("div", { className: `gy-stepper-connector ${idx < current ? "gy-stepper-connector--completed" : ""}` })
+      ] }, step.id);
+    }) }),
+    steps[current]?.content && /* @__PURE__ */ jsx21("div", { className: "gy-stepper-panel", children: steps[current].content }, current)
+  ] });
+}
+
+// src/table/Table.tsx
+import React18, { useMemo, useState as useState11 } from "react";
+import { Fragment, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
+function SortIcon({ dir }) {
+  return /* @__PURE__ */ jsx22("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", className: `gy-table-sort-icon ${dir ? "gy-table-sort-icon--active" : ""}`, children: dir === "asc" ? /* @__PURE__ */ jsx22("path", { d: "M6 2L10 8H2L6 2z" }) : dir === "desc" ? /* @__PURE__ */ jsx22("path", { d: "M6 10L2 4H10L6 10z" }) : /* @__PURE__ */ jsxs21(Fragment, { children: [
+    /* @__PURE__ */ jsx22("path", { d: "M6 1L9 5H3L6 1z", opacity: ".5" }),
+    /* @__PURE__ */ jsx22("path", { d: "M6 11L3 7H9L6 11z", opacity: ".5" })
+  ] }) });
+}
+function Table({
+  columns,
+  data,
+  rowKey,
+  selectable = false,
+  selectedRows = [],
+  onSelectionChange,
+  pageSize = 10,
+  emptyMessage = "No data available",
+  className = "",
+  stickyHeader = false
+}) {
+  const [sortKey, setSortKey] = useState11(null);
+  const [sortDir, setSortDir] = useState11("asc");
+  const [page, setPage] = useState11(1);
+  const sortedData = useMemo(() => {
+    if (!sortKey) return data;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col) return data;
+    return [...data].sort((a, b) => {
+      const av = String(col.accessor(a) ?? "");
+      const bv = String(col.accessor(b) ?? "");
+      const cmp = av.localeCompare(bv, void 0, { numeric: true });
+      return sortDir === "asc" ? cmp : -cmp;
+    });
+  }, [data, sortKey, sortDir, columns]);
+  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const paged = sortedData.slice((page - 1) * pageSize, page * pageSize);
+  const allSelected = paged.length > 0 && paged.every((r) => selectedRows.includes(rowKey(r)));
+  const someSelected = paged.some((r) => selectedRows.includes(rowKey(r)));
+  const toggleSort = (key) => {
+    if (sortKey === key) {
+      setSortDir((d) => d === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+    setPage(1);
+  };
+  const toggleRow = (key) => {
+    const next = selectedRows.includes(key) ? selectedRows.filter((k) => k !== key) : [...selectedRows, key];
+    onSelectionChange?.(next);
+  };
+  const toggleAll = () => {
+    const pageKeys = paged.map(rowKey);
+    if (allSelected) {
+      onSelectionChange?.(selectedRows.filter((k) => !pageKeys.includes(k)));
+    } else {
+      const combined = [.../* @__PURE__ */ new Set([...selectedRows, ...pageKeys])];
+      onSelectionChange?.(combined);
+    }
+  };
+  const pageNums = Array.from({ length: totalPages }, (_, i) => i + 1);
+  const visiblePages = pageNums.filter(
+    (p) => p === 1 || p === totalPages || Math.abs(p - page) <= 1
+  );
+  return /* @__PURE__ */ jsxs21("div", { className: `gy-table-wrapper ${className}`, children: [
+    /* @__PURE__ */ jsxs21("table", { className: "gy-table", "aria-label": "Data table", children: [
+      /* @__PURE__ */ jsx22("thead", { className: "gy-table-header", children: /* @__PURE__ */ jsxs21("tr", { children: [
+        selectable && /* @__PURE__ */ jsx22("th", { className: "gy-table-th gy-table-th--checkbox", children: /* @__PURE__ */ jsx22(
+          Checkbox,
+          {
+            checked: allSelected,
+            indeterminate: !allSelected && someSelected,
+            onChange: toggleAll,
+            size: "sm"
+          }
+        ) }),
+        columns.map((col) => /* @__PURE__ */ jsx22(
+          "th",
+          {
+            className: `gy-table-th ${col.sortable ? "gy-table-th--sortable" : ""}`,
+            style: { width: col.width, textAlign: col.align },
+            onClick: col.sortable ? () => toggleSort(col.key) : void 0,
+            "aria-sort": sortKey === col.key ? sortDir === "asc" ? "ascending" : "descending" : void 0,
+            children: /* @__PURE__ */ jsxs21("span", { className: "gy-table-th-inner", children: [
+              col.header,
+              col.sortable && /* @__PURE__ */ jsx22(SortIcon, { dir: sortKey === col.key ? sortDir : void 0 })
+            ] })
+          },
+          col.key
+        ))
+      ] }) }),
+      /* @__PURE__ */ jsx22("tbody", { children: paged.length === 0 ? /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { colSpan: columns.length + (selectable ? 1 : 0), className: "gy-table-empty", children: emptyMessage }) }) : paged.map((row) => {
+        const key = rowKey(row);
+        const isSelected = selectedRows.includes(key);
+        return /* @__PURE__ */ jsxs21(
+          "tr",
+          {
+            className: `gy-table-tr ${isSelected ? "gy-table-tr--selected" : ""}`,
+            "aria-selected": selectable ? isSelected : void 0,
+            children: [
+              selectable && /* @__PURE__ */ jsx22("td", { className: "gy-table-td gy-table-td--checkbox", children: /* @__PURE__ */ jsx22(Checkbox, { checked: isSelected, onChange: () => toggleRow(key), size: "sm" }) }),
+              columns.map((col) => /* @__PURE__ */ jsx22("td", { className: "gy-table-td", style: { textAlign: col.align }, children: col.accessor(row) }, col.key))
+            ]
+          },
+          key
+        );
+      }) })
+    ] }),
+    totalPages > 1 && /* @__PURE__ */ jsxs21("div", { className: "gy-table-pagination", children: [
+      /* @__PURE__ */ jsxs21("span", { className: "gy-table-pagination-info", children: [
+        "Showing ",
+        (page - 1) * pageSize + 1,
+        "\u2013",
+        Math.min(page * pageSize, sortedData.length),
+        " of ",
+        sortedData.length
+      ] }),
+      /* @__PURE__ */ jsxs21("div", { className: "gy-table-pagination-controls", children: [
+        /* @__PURE__ */ jsx22("button", { className: "gy-table-pagination-btn", onClick: () => setPage((p) => p - 1), disabled: page === 1, "aria-label": "Previous page", children: "\u2039" }),
+        visiblePages.map((p, i, arr) => /* @__PURE__ */ jsxs21(React18.Fragment, { children: [
+          i > 0 && arr[i - 1] !== p - 1 && /* @__PURE__ */ jsx22("span", { style: { padding: "0 4px", color: "var(--gy-text-subtle)" }, children: "\u2026" }),
+          /* @__PURE__ */ jsx22(
+            "button",
+            {
+              className: `gy-table-pagination-btn ${page === p ? "gy-table-pagination-btn--active" : ""}`,
+              onClick: () => setPage(p),
+              "aria-label": `Page ${p}`,
+              "aria-current": page === p ? "page" : void 0,
+              children: p
+            }
+          )
+        ] }, p)),
+        /* @__PURE__ */ jsx22("button", { className: "gy-table-pagination-btn", onClick: () => setPage((p) => p + 1), disabled: page === totalPages, "aria-label": "Next page", children: "\u203A" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/dragdrop/DragDrop.tsx
+import { useState as useState12 } from "react";
+import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
+function ReorderList({ items, onReorder, keyExtractor, renderItem: renderItem2, className = "" }) {
+  const [draggedIdx, setDraggedIdx] = useState12(null);
+  const [dragOverIdx, setDragOverIdx] = useState12(null);
+  const handleDragStart = (idx, e) => {
+    setDraggedIdx(idx);
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", idx.toString());
+  };
+  const handleDragOver = (idx, e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (idx !== dragOverIdx) setDragOverIdx(idx);
+  };
+  const handleDrop = (idx, e) => {
+    e.preventDefault();
+    const fromIdx = Number(e.dataTransfer.getData("text/plain"));
+    if (fromIdx !== idx) {
+      const next = [...items];
+      const [moved] = next.splice(fromIdx, 1);
+      if (moved !== void 0) {
+        next.splice(idx, 0, moved);
+        onReorder(next);
+      }
+    }
+    setDraggedIdx(null);
+    setDragOverIdx(null);
+  };
+  return /* @__PURE__ */ jsx23("div", { className: `gy-dnd-list ${className}`, children: items.map((item, idx) => {
+    const isDragging = draggedIdx === idx;
+    const isOver = dragOverIdx === idx;
+    return /* @__PURE__ */ jsxs22(
+      "div",
+      {
+        className: [
+          "gy-dnd-item",
+          isDragging ? "gy-dnd-item--dragging" : "",
+          isOver && !isDragging ? "gy-dnd-item--drag-over" : ""
+        ].filter(Boolean).join(" "),
+        draggable: true,
+        onDragStart: (e) => handleDragStart(idx, e),
+        onDragOver: (e) => handleDragOver(idx, e),
+        onDragLeave: () => setDragOverIdx(null),
+        onDrop: (e) => handleDrop(idx, e),
+        onDragEnd: () => {
+          setDraggedIdx(null);
+          setDragOverIdx(null);
+        },
+        children: [
+          /* @__PURE__ */ jsx23("div", { className: "gy-dnd-handle", "aria-hidden": "true", children: /* @__PURE__ */ jsxs22("svg", { width: "12", height: "16", viewBox: "0 0 12 16", fill: "currentColor", children: [
+            /* @__PURE__ */ jsx23("circle", { cx: "4", cy: "4", r: "1.5" }),
+            /* @__PURE__ */ jsx23("circle", { cx: "8", cy: "4", r: "1.5" }),
+            /* @__PURE__ */ jsx23("circle", { cx: "4", cy: "8", r: "1.5" }),
+            /* @__PURE__ */ jsx23("circle", { cx: "8", cy: "8", r: "1.5" }),
+            /* @__PURE__ */ jsx23("circle", { cx: "4", cy: "12", r: "1.5" }),
+            /* @__PURE__ */ jsx23("circle", { cx: "8", cy: "12", r: "1.5" })
+          ] }) }),
+          /* @__PURE__ */ jsx23("div", { className: "gy-dnd-item-content", children: renderItem2(item, isDragging) })
+        ]
+      },
+      keyExtractor(item)
+    );
+  }) });
+}
+function KanbanBoard({ columns, onMove, keyExtractor, renderCard, className = "" }) {
+  const [dragged, setDragged] = useState12(null);
+  const [overCol, setOverCol] = useState12(null);
+  const handleDragStart = (e, key, colId, idx) => {
+    setDragged({ key, colId, idx });
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("application/json", JSON.stringify({ key, colId }));
+  };
+  const handleDragOver = (e, colId) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+    if (overCol !== colId) setOverCol(colId);
+  };
+  const handleDrop = (e, toCol, toIndex) => {
+    e.preventDefault();
+    setOverCol(null);
+    try {
+      const data = JSON.parse(e.dataTransfer.getData("application/json"));
+      if (data.colId === toCol && data.key === dragged?.key && toIndex === dragged?.idx) {
+        return;
+      }
+      onMove(data.key, data.colId, toCol, toIndex);
+    } catch (err) {
+    }
+    setDragged(null);
+  };
+  return /* @__PURE__ */ jsx23("div", { className: `gy-kanban ${className}`, children: columns.map((col) => /* @__PURE__ */ jsxs22("div", { className: "gy-kanban-column", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "gy-kanban-column-header", children: [
+      /* @__PURE__ */ jsx23("span", { className: "gy-kanban-column-title", children: col.title }),
+      /* @__PURE__ */ jsx23("span", { className: "gy-kanban-column-count", children: col.items.length })
+    ] }),
+    /* @__PURE__ */ jsx23(
+      "div",
+      {
+        className: `gy-kanban-drop-zone ${overCol === col.id ? "gy-kanban-drop-zone--over" : ""}`,
+        onDragOver: (e) => handleDragOver(e, col.id),
+        onDragLeave: () => setOverCol(null),
+        onDrop: (e) => handleDrop(e, col.id, col.items.length),
+        children: col.items.map((item, idx) => {
+          const key = keyExtractor(item);
+          const isDragging = dragged?.key === key;
+          return /* @__PURE__ */ jsx23(
+            "div",
+            {
+              className: `gy-kanban-card ${isDragging ? "gy-kanban-card--dragging" : ""}`,
+              draggable: true,
+              onDragStart: (e) => handleDragStart(e, key, col.id, idx),
+              onDragEnd: () => {
+                setDragged(null);
+                setOverCol(null);
+              },
+              onDrop: (e) => {
+                e.stopPropagation();
+                handleDrop(e, col.id, idx);
+              },
+              children: renderCard(item, isDragging)
+            },
+            key
+          );
+        })
+      }
+    )
+  ] }, col.id)) });
+}
+
+// src/fileupload/FileUpload.tsx
+import { useRef as useRef10, useState as useState13 } from "react";
+import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
+var formatSize = (bytes) => {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+};
+function FileUpload({
+  onFilesSelected,
+  multiple = false,
+  accept,
+  maxSize,
+  maxFiles,
+  disabled = false,
+  label = "Click or drag files to upload",
+  helperText,
+  className = ""
+}) {
+  const [dragActive, setDragActive] = useState13(false);
+  const [selectedFiles, setSelectedFiles] = useState13([]);
+  const inputRef = useRef10(null);
+  const handleFiles = (files) => {
+    if (!files) return;
+    const valid = Array.from(files).filter((f) => !maxSize || f.size <= maxSize);
+    const newFiles = multiple ? [...selectedFiles, ...valid] : valid;
+    const limited = maxFiles ? newFiles.slice(0, maxFiles) : newFiles;
+    if (!multiple) limited.splice(1);
+    setSelectedFiles(limited);
+    onFilesSelected?.(limited);
+  };
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
+    if (e.type === "dragenter" || e.type === "dragover") setDragActive(true);
+    else if (e.type === "dragleave") setDragActive(false);
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    if (disabled) return;
+    handleFiles(e.dataTransfer.files);
+  };
+  const removeFile = (idx) => {
+    const updated = selectedFiles.filter((_, i) => i !== idx);
+    setSelectedFiles(updated);
+    onFilesSelected?.(updated);
+  };
+  return /* @__PURE__ */ jsxs23("div", { className: `gy-fileupload ${className}`, children: [
+    /* @__PURE__ */ jsxs23(
+      "div",
+      {
+        className: [
+          "gy-fileupload-zone",
+          dragActive ? "gy-fileupload-zone--drag-active" : "",
+          disabled ? "gy-fileupload-zone--disabled" : ""
+        ].filter(Boolean).join(" "),
+        onClick: () => !disabled && inputRef.current?.click(),
+        onDragEnter: handleDrag,
+        onDragLeave: handleDrag,
+        onDragOver: handleDrag,
+        onDrop: handleDrop,
+        children: [
+          /* @__PURE__ */ jsx24(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "gy-fileupload-input",
+              multiple,
+              accept,
+              disabled,
+              onChange: (e) => handleFiles(e.target.files)
+            }
+          ),
+          /* @__PURE__ */ jsxs23("svg", { className: "gy-fileupload-icon", width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx24("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsx24("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsx24("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+          ] }),
+          /* @__PURE__ */ jsx24("div", { className: "gy-fileupload-text", children: label }),
+          (helperText || maxSize) && /* @__PURE__ */ jsxs23("div", { className: "gy-fileupload-subtext", children: [
+            helperText,
+            " ",
+            maxSize && `(Max ${formatSize(maxSize)})`
+          ] })
+        ]
+      }
+    ),
+    selectedFiles.length > 0 && /* @__PURE__ */ jsx24("div", { className: "gy-fileupload-list", children: selectedFiles.map((f, i) => /* @__PURE__ */ jsxs23("div", { className: "gy-fileupload-item", children: [
+      /* @__PURE__ */ jsx24("div", { className: "gy-fileupload-item-icon", children: /* @__PURE__ */ jsxs23("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+        /* @__PURE__ */ jsx24("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+        /* @__PURE__ */ jsx24("polyline", { points: "13 2 13 9 20 9" })
+      ] }) }),
+      /* @__PURE__ */ jsxs23("div", { className: "gy-fileupload-item-info", children: [
+        /* @__PURE__ */ jsx24("span", { className: "gy-fileupload-item-name", title: f.name, children: f.name }),
+        /* @__PURE__ */ jsx24("span", { className: "gy-fileupload-item-size", children: formatSize(f.size) })
+      ] }),
+      /* @__PURE__ */ jsx24(
+        "button",
+        {
+          type: "button",
+          className: "gy-fileupload-item-remove",
+          onClick: (e) => {
+            e.stopPropagation();
+            removeFile(i);
+          },
+          "aria-label": "Remove file",
+          children: /* @__PURE__ */ jsxs23("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx24("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsx24("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ] })
+        }
+      )
+    ] }, `${f.name}-${i}`)) })
+  ] });
+}
+
+// src/calendar/Calendar.tsx
+import { useState as useState14 } from "react";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
+var getDaysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+var getFirstDay = (year, month) => new Date(year, month, 1).getDay();
+var isSameDay = (d1, d2) => {
+  if (!d1 || !d2) return false;
+  return d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate();
+};
+var isBetween = (d, start, end) => {
+  if (!start || !end) return false;
+  return d > start && d < end;
+};
+function Calendar({ mode = "single", value, onChange, minDate, maxDate, className = "", style }) {
+  const [view, setView] = useState14("days");
+  const [current, setCurrent] = useState14(() => {
+    if (Array.isArray(value)) return value[0] ?? /* @__PURE__ */ new Date();
+    return value ?? /* @__PURE__ */ new Date();
+  });
+  const [hoverDate, setHoverDate] = useState14(null);
+  const [selStart, selEnd] = Array.isArray(value) ? value : [value, void 0];
+  const y = current.getFullYear();
+  const m = current.getMonth();
+  const prevMonth = () => setCurrent(new Date(y, m - 1, 1));
+  const nextMonth = () => setCurrent(new Date(y, m + 1, 1));
+  const prevYear = () => setCurrent(new Date(y - 1, m, 1));
+  const nextYear = () => setCurrent(new Date(y + 1, m, 1));
+  const prevDecade = () => setCurrent(new Date(y - 10, m, 1));
+  const nextDecade = () => setCurrent(new Date(y + 10, m, 1));
+  const daysInMonth = getDaysInMonth(y, m);
+  const firstDay = getFirstDay(y, m);
+  const daysInPrev = getDaysInMonth(y, m - 1);
+  const handleSelectDay = (date) => {
+    if (mode === "single") {
+      onChange?.(date);
+    } else {
+      if (!selStart || selStart && selEnd) {
+        onChange?.([date, date]);
+      } else {
+        const start = date < selStart ? date : selStart;
+        const end = date < selStart ? selStart : date;
+        onChange?.([start, end]);
+      }
+    }
+  };
+  const renderDays = () => {
+    const days = [];
+    const today = /* @__PURE__ */ new Date();
+    for (let i = firstDay - 1; i >= 0; i--) {
+      const d = new Date(y, m - 1, daysInPrev - i);
+      days.push(/* @__PURE__ */ jsx25(Day, { date: d, outside: true }, `prev-${i}`));
+    }
+    for (let i = 1; i <= daysInMonth; i++) {
+      const d = new Date(y, m, i);
+      days.push(/* @__PURE__ */ jsx25(Day, { date: d, isToday: isSameDay(d, today) }, `curr-${i}`));
+    }
+    const total = days.length;
+    for (let i = 1; i <= 42 - total; i++) {
+      const d = new Date(y, m + 1, i);
+      days.push(/* @__PURE__ */ jsx25(Day, { date: d, outside: true }, `next-${i}`));
+    }
+    return days;
+  };
+  const Day = ({ date, outside, isToday }) => {
+    const disabled = minDate && date < minDate || maxDate && date > maxDate;
+    const selected = isSameDay(date, selStart) || isSameDay(date, selEnd);
+    const inRange = mode === "range" && isBetween(date, selStart, selEnd ?? hoverDate ?? void 0);
+    const isStart = mode === "range" && isSameDay(date, selStart);
+    const isEnd = mode === "range" && isSameDay(date, selEnd ?? hoverDate ?? void 0) && date > selStart;
+    const cls = [
+      "gy-calendar-day",
+      outside ? "gy-calendar-day--outside" : "",
+      isToday ? "gy-calendar-day--today" : "",
+      selected ? "gy-calendar-day--selected" : "",
+      inRange ? "gy-calendar-day--range-in" : "",
+      isStart && (selEnd ?? hoverDate) ? "gy-calendar-day--range-start" : "",
+      isEnd ? "gy-calendar-day--range-end" : "",
+      disabled ? "gy-calendar-day--disabled" : ""
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx25(
+      "button",
+      {
+        type: "button",
+        className: cls,
+        disabled,
+        onClick: () => handleSelectDay(date),
+        onMouseEnter: () => mode === "range" && selStart && !selEnd ? setHoverDate(date) : null,
+        children: date.getDate()
+      }
+    );
+  };
+  const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const monthName = current.toLocaleString("default", { month: "long" });
+  return /* @__PURE__ */ jsxs24("div", { className: `gy-calendar ${className}`, style, children: [
+    view === "days" && /* @__PURE__ */ jsxs24(Fragment2, { children: [
+      /* @__PURE__ */ jsxs24("div", { className: "gy-calendar-header", children: [
+        /* @__PURE__ */ jsx25("button", { className: "gy-calendar-nav", onClick: prevMonth, children: "\u2039" }),
+        /* @__PURE__ */ jsxs24("div", { className: "gy-calendar-title", onClick: () => setView("months"), children: [
+          monthName,
+          " ",
+          y
+        ] }),
+        /* @__PURE__ */ jsx25("button", { className: "gy-calendar-nav", onClick: nextMonth, children: "\u203A" })
+      ] }),
+      /* @__PURE__ */ jsxs24("div", { className: "gy-calendar-grid", children: [
+        ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((d) => /* @__PURE__ */ jsx25("div", { className: "gy-calendar-weekday", children: d }, d)),
+        renderDays()
+      ] })
+    ] }),
+    view === "months" && /* @__PURE__ */ jsxs24(Fragment2, { children: [
+      /* @__PURE__ */ jsxs24("div", { className: "gy-calendar-header", children: [
+        /* @__PURE__ */ jsx25("button", { className: "gy-calendar-nav", onClick: prevYear, children: "\u2039" }),
+        /* @__PURE__ */ jsx25("div", { className: "gy-calendar-title", onClick: () => setView("years"), children: y }),
+        /* @__PURE__ */ jsx25("button", { className: "gy-calendar-nav", onClick: nextYear, children: "\u203A" })
+      ] }),
+      /* @__PURE__ */ jsx25("div", { className: "gy-calendar-picker-grid", children: months.map((mon, i) => /* @__PURE__ */ jsx25(
+        "button",
+        {
+          className: `gy-calendar-picker-item ${m === i ? "gy-calendar-picker-item--selected" : ""}`,
+          onClick: () => {
+            setCurrent(new Date(y, i, 1));
+            setView("days");
+          },
+          children: mon
+        },
+        mon
+      )) })
+    ] }),
+    view === "years" && /* @__PURE__ */ jsxs24(Fragment2, { children: [
+      /* @__PURE__ */ jsxs24("div", { className: "gy-calendar-header", children: [
+        /* @__PURE__ */ jsx25("button", { className: "gy-calendar-nav", onClick: prevDecade, children: "\u2039" }),
+        /* @__PURE__ */ jsxs24("div", { className: "gy-calendar-title", children: [
+          y - y % 10,
+          " - ",
+          y - y % 10 + 9
+        ] }),
+        /* @__PURE__ */ jsx25("button", { className: "gy-calendar-nav", onClick: nextDecade, children: "\u203A" })
+      ] }),
+      /* @__PURE__ */ jsx25("div", { className: "gy-calendar-picker-grid", children: Array.from({ length: 12 }, (_, i) => y - y % 10 - 1 + i).map((year) => /* @__PURE__ */ jsx25(
+        "button",
+        {
+          className: `gy-calendar-picker-item ${y === year ? "gy-calendar-picker-item--selected" : ""}`,
+          onClick: () => {
+            setCurrent(new Date(year, m, 1));
+            setView("months");
+          },
+          children: year
+        },
+        year
+      )) })
+    ] })
+  ] });
+}
+
+// src/datepicker/DatePicker.tsx
+import { useEffect as useEffect6, useRef as useRef11, useState as useState15, useId as useId8 } from "react";
+import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
+var formatDate = (date) => {
+  return date.toLocaleDateString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+};
+function DatePicker({
+  mode = "single",
+  value,
+  onChange,
+  minDate,
+  maxDate,
+  label,
+  placeholder = "Select date",
+  disabled,
+  error,
+  helperText,
+  className = ""
+}) {
+  const uid = useId8();
+  const [open, setOpen] = useState15(false);
+  const rootRef = useRef11(null);
+  useEffect6(() => {
+    const handler = (e) => {
+      if (!rootRef.current?.contains(e.target)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+  let displayValue = "";
+  if (Array.isArray(value)) {
+    if (value[0] && value[1]) displayValue = `${formatDate(value[0])} - ${formatDate(value[1])}`;
+    else if (value[0]) displayValue = formatDate(value[0]);
+  } else if (value) {
+    displayValue = formatDate(value);
+  }
+  const handleChange = (val) => {
+    onChange?.(val);
+    if (mode === "single" || Array.isArray(val) && val[0] && val[1]) {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs25("div", { ref: rootRef, className: `gy-datepicker ${className}`, children: [
+    /* @__PURE__ */ jsx26("div", { onClick: () => !disabled && setOpen((o) => !o), style: { cursor: disabled ? "not-allowed" : "pointer" }, children: /* @__PURE__ */ jsx26(
+      Input,
+      {
+        id: `gy-datepicker-${uid}`,
+        label,
+        placeholder,
+        value: displayValue,
+        readOnly: true,
+        disabled,
+        error,
+        helperText,
+        style: { cursor: disabled ? "not-allowed" : "pointer", pointerEvents: "none" },
+        rightIcon: /* @__PURE__ */ jsxs25("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx26("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+          /* @__PURE__ */ jsx26("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+          /* @__PURE__ */ jsx26("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+          /* @__PURE__ */ jsx26("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+        ] })
+      }
+    ) }),
+    open && !disabled && /* @__PURE__ */ jsx26("div", { className: "gy-datepicker-popover", children: /* @__PURE__ */ jsx26(
+      Calendar,
+      {
+        mode,
+        value,
+        onChange: handleChange,
+        minDate,
+        maxDate,
+        className: "gy-calendar--popover",
+        style: { border: "none", borderRadius: 0 }
+      }
+    ) })
+  ] });
+}
+
+// src/chart/Chart.tsx
+import {
+  LineChart,
+  Line,
+  BarChart,
+  Bar,
+  AreaChart,
+  Area,
+  PieChart,
+  Pie,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip as Tooltip2,
+  ResponsiveContainer,
+  Legend
+} from "recharts";
+import { jsx as jsx27, jsxs as jsxs26 } from "react/jsx-runtime";
+var DEFAULT_COLORS = [
+  "var(--gy-primary)",
+  "var(--gy-success)",
+  "var(--gy-warning)",
+  "var(--gy-danger)",
+  "var(--gy-info)",
+  "#8b5cf6",
+  "#ec4899"
+];
+function Chart({
+  type,
+  data,
+  xAxisKey,
+  series = [],
+  nameKey,
+  valueKey,
+  height = 300,
+  showGrid = true,
+  showLegend = true,
+  className = ""
+}) {
+  const commonAxisProps = {
+    stroke: "var(--gy-border-strong)",
+    tick: { fill: "var(--gy-text-subtle)", fontSize: 12 },
+    tickLine: { stroke: "var(--gy-border)" }
+  };
+  const commonTooltipProps = {
+    contentStyle: {
+      backgroundColor: "var(--gy-surface)",
+      borderColor: "var(--gy-border)",
+      borderRadius: "var(--gy-radius-lg)",
+      boxShadow: "var(--gy-shadow-md)",
+      color: "var(--gy-text)",
+      fontSize: 13
+    },
+    itemStyle: { color: "var(--gy-text)" }
+  };
+  const renderContent = () => {
+    switch (type) {
+      case "line":
+        return /* @__PURE__ */ jsxs26(LineChart, { data, children: [
+          showGrid && /* @__PURE__ */ jsx27(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--gy-border)", vertical: false }),
+          /* @__PURE__ */ jsx27(XAxis, { dataKey: xAxisKey, ...commonAxisProps }),
+          /* @__PURE__ */ jsx27(YAxis, { ...commonAxisProps }),
+          /* @__PURE__ */ jsx27(Tooltip2, { ...commonTooltipProps }),
+          showLegend && /* @__PURE__ */ jsx27(Legend, { wrapperStyle: { fontSize: 12 } }),
+          series.map((s, i) => /* @__PURE__ */ jsx27(
+            Line,
+            {
+              type: "monotone",
+              dataKey: s.key,
+              name: s.name ?? s.key,
+              stroke: s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+              strokeWidth: 2,
+              dot: { r: 4, strokeWidth: 2, fill: "var(--gy-surface)" },
+              activeDot: { r: 6, strokeWidth: 0 }
+            },
+            s.key
+          ))
+        ] });
+      case "bar":
+        return /* @__PURE__ */ jsxs26(BarChart, { data, children: [
+          showGrid && /* @__PURE__ */ jsx27(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--gy-border)", vertical: false }),
+          /* @__PURE__ */ jsx27(XAxis, { dataKey: xAxisKey, ...commonAxisProps }),
+          /* @__PURE__ */ jsx27(YAxis, { ...commonAxisProps }),
+          /* @__PURE__ */ jsx27(Tooltip2, { ...commonTooltipProps, cursor: { fill: "var(--gy-background-muted)" } }),
+          showLegend && /* @__PURE__ */ jsx27(Legend, { wrapperStyle: { fontSize: 12 } }),
+          series.map((s, i) => /* @__PURE__ */ jsx27(
+            Bar,
+            {
+              dataKey: s.key,
+              name: s.name ?? s.key,
+              fill: s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length],
+              radius: [4, 4, 0, 0]
+            },
+            s.key
+          ))
+        ] });
+      case "area":
+        return /* @__PURE__ */ jsxs26(AreaChart, { data, children: [
+          /* @__PURE__ */ jsx27("defs", { children: series.map((s, i) => {
+            const color = s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+            return /* @__PURE__ */ jsxs26("linearGradient", { id: `grad-${s.key}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+              /* @__PURE__ */ jsx27("stop", { offset: "5%", stopColor: color, stopOpacity: 0.3 }),
+              /* @__PURE__ */ jsx27("stop", { offset: "95%", stopColor: color, stopOpacity: 0 })
+            ] }, `grad-${s.key}`);
+          }) }),
+          showGrid && /* @__PURE__ */ jsx27(CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--gy-border)", vertical: false }),
+          /* @__PURE__ */ jsx27(XAxis, { dataKey: xAxisKey, ...commonAxisProps }),
+          /* @__PURE__ */ jsx27(YAxis, { ...commonAxisProps }),
+          /* @__PURE__ */ jsx27(Tooltip2, { ...commonTooltipProps }),
+          showLegend && /* @__PURE__ */ jsx27(Legend, { wrapperStyle: { fontSize: 12 } }),
+          series.map((s, i) => {
+            const color = s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+            return /* @__PURE__ */ jsx27(
+              Area,
+              {
+                type: "monotone",
+                dataKey: s.key,
+                name: s.name ?? s.key,
+                stroke: color,
+                strokeWidth: 2,
+                fillOpacity: 1,
+                fill: `url(#grad-${s.key})`
+              },
+              s.key
+            );
+          })
+        ] });
+      case "pie":
+      case "donut":
+        return /* @__PURE__ */ jsxs26(PieChart, { children: [
+          /* @__PURE__ */ jsx27(Tooltip2, { ...commonTooltipProps }),
+          showLegend && /* @__PURE__ */ jsx27(Legend, { wrapperStyle: { fontSize: 12 } }),
+          /* @__PURE__ */ jsx27(
+            Pie,
+            {
+              data,
+              dataKey: valueKey,
+              nameKey,
+              cx: "50%",
+              cy: "50%",
+              innerRadius: type === "donut" ? "60%" : 0,
+              outerRadius: "80%",
+              stroke: "var(--gy-surface)",
+              strokeWidth: 2,
+              paddingAngle: type === "donut" ? 2 : 0,
+              children: data.map((entry, index) => /* @__PURE__ */ jsx27(Cell, { fill: entry.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length] }, `cell-${index}`))
+            }
+          )
+        ] });
+    }
+  };
+  return /* @__PURE__ */ jsx27("div", { className: `gy-chart ${className}`, style: { width: "100%", height }, children: /* @__PURE__ */ jsx27(ResponsiveContainer, { width: "100%", height: "100%", children: renderContent() }) });
+}
+export {
+  Accordion,
+  AnimatedNumber,
+  Banner,
+  Breadcrumb,
+  Button,
+  Calendar,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  CardInfo,
+  Chart,
+  Checkbox,
+  Chip,
+  ChipsInput,
+  DatePicker,
+  Dropdown,
+  FileUpload,
+  Input,
+  KanbanBoard,
+  Menu,
+  Modal,
+  ProgressBar,
+  RadioGroup,
+  ReorderList,
+  Skeleton,
+  Spinner,
+  Stepper,
+  Table,
+  Tabs,
+  Textarea,
+  ToasterProvider,
+  Toggle,
+  Tooltip,
+  Typography,
+  useToast
+};