@akanaka-design/components 0.6.2

package/dist/index.js

@@ -0,0 +1,827 @@
+// src/Alert/Alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantStyles = {
+  info: {
+    container: "bg-background-info text-foreground-info border border-border-info",
+    icon: "text-foreground-info"
+  },
+  success: {
+    container: "bg-background-success text-foreground-success border border-border-success",
+    icon: "text-foreground-success"
+  },
+  warning: {
+    container: "bg-background-warning text-foreground-warning border border-border-warning",
+    icon: "text-foreground-warning"
+  },
+  error: {
+    container: "bg-background-error text-foreground-error border border-border-error-subtle",
+    icon: "text-foreground-error"
+  }
+};
+var icons = {
+  info: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z", clipRule: "evenodd" }) }),
+  success: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z", clipRule: "evenodd" }) }),
+  warning: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+  error: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) })
+};
+function Alert({
+  variant = "info",
+  title,
+  children,
+  onDismiss,
+  className = "",
+  ...props
+}) {
+  const baseStyles = "flex gap-3 p-4 rounded-lg border";
+  const styles = variantStyles[variant];
+  const classes = [baseStyles, styles.container, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { role: "alert", className: classes, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: `flex-shrink-0 ${styles.icon}`, children: icons[variant] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+      title && /* @__PURE__ */ jsx("p", { className: "font-semibold mb-1", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "text-body-sm", children })
+    ] }),
+    onDismiss && /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: onDismiss,
+        className: "flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity",
+        "aria-label": "Dismiss",
+        children: /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }) })
+      }
+    )
+  ] });
+}
+
+// src/Avatar/Avatar.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var sizeStyles = {
+  sm: "w-8 h-8 text-caption",
+  md: "w-10 h-10 text-body-sm",
+  lg: "w-12 h-12 text-body",
+  xl: "w-16 h-16 text-h3"
+};
+function Avatar({
+  size = "md",
+  initials,
+  src,
+  alt = "",
+  className = "",
+  ...props
+}) {
+  const baseStyles = [
+    "inline-flex items-center justify-center",
+    "rounded-full",
+    "bg-background-primary-subtle text-foreground-primary",
+    "font-semibold",
+    "overflow-hidden",
+    "flex-shrink-0"
+  ].join(" ");
+  const classes = [baseStyles, sizeStyles[size], className].filter(Boolean).join(" ");
+  if (src) {
+    return /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src,
+        alt,
+        className: `${sizeStyles[size]} rounded-full object-cover ${className}`,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2("span", { className: classes, role: "img", "aria-label": alt || initials, children: initials?.slice(0, 2).toUpperCase() });
+}
+
+// src/Badge/Badge.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var variantStyles2 = {
+  default: "bg-background-muted text-foreground",
+  primary: "bg-background-primary-subtle text-foreground-primary",
+  success: "bg-background-success text-foreground-success",
+  warning: "bg-background-warning text-foreground-warning",
+  error: "bg-background-error text-foreground-error",
+  info: "bg-background-info text-foreground-info"
+};
+function Badge({
+  variant = "default",
+  children,
+  className = "",
+  ...props
+}) {
+  const baseStyles = [
+    "inline-flex items-center",
+    "px-2 py-0.5",
+    "text-caption font-medium",
+    "rounded-full"
+  ].join(" ");
+  const classes = [baseStyles, variantStyles2[variant], className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3("span", { className: classes, ...props, children });
+}
+
+// src/Button/Button.tsx
+import { forwardRef } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var variantStyles3 = {
+  primary: [
+    "bg-primary-500 text-foreground-on-primary",
+    "hover:bg-primary-600",
+    "active:bg-primary-700",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:bg-background-subtle disabled:text-foreground-muted"
+  ].join(" "),
+  default: [
+    "bg-primary-500 text-foreground-on-primary",
+    "hover:bg-primary-600",
+    "active:bg-primary-700",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:bg-background-subtle disabled:text-foreground-muted"
+  ].join(" "),
+  secondary: [
+    "bg-background-muted text-foreground",
+    "border border-border",
+    "hover:bg-background-subtle",
+    "active:bg-background-subtle",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:bg-background-muted disabled:text-foreground-muted disabled:border-border-muted"
+  ].join(" "),
+  outline: [
+    "bg-transparent text-foreground",
+    "border border-border",
+    "hover:bg-background-muted",
+    "active:bg-background-subtle",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:text-foreground-muted disabled:border-border-muted"
+  ].join(" "),
+  ghost: [
+    "bg-transparent text-foreground",
+    "hover:bg-background-muted",
+    "active:bg-background-subtle",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:text-foreground-muted disabled:bg-transparent"
+  ].join(" "),
+  danger: [
+    "bg-error text-foreground-on-primary",
+    "hover:bg-red-600",
+    "active:bg-red-700",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:bg-background-subtle disabled:text-foreground-muted"
+  ].join(" "),
+  destructive: [
+    "bg-error text-foreground-on-primary",
+    "hover:bg-red-600",
+    "active:bg-red-700",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:bg-background-subtle disabled:text-foreground-muted"
+  ].join(" "),
+  link: [
+    "bg-transparent text-primary-500 underline-offset-4",
+    "hover:underline",
+    "active:text-primary-700",
+    "focus-visible:outline-none focus-visible:underline",
+    "disabled:text-foreground-muted disabled:no-underline"
+  ].join(" ")
+};
+var sizeStyles2 = {
+  sm: "px-3 py-1.5 text-body-sm rounded-sm",
+  md: "px-4 py-2 text-body rounded-md",
+  lg: "px-6 py-3 text-h3 rounded-lg"
+};
+var Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    fullWidth = false,
+    className = "",
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const baseStyles = [
+      "inline-flex items-center justify-center",
+      "font-semibold",
+      "transition-colors duration-fast",
+      "cursor-pointer",
+      "disabled:cursor-not-allowed"
+    ].join(" ");
+    const classes = [
+      baseStyles,
+      variantStyles3[variant],
+      sizeStyles2[size],
+      fullWidth ? "w-full" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx4(
+      "button",
+      {
+        ref,
+        className: classes,
+        disabled,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/Card/Card.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var variantStyles4 = {
+  elevated: "bg-background-elevated shadow-md border border-border",
+  flat: "bg-background-muted border border-border"
+};
+function Card({
+  variant = "elevated",
+  children,
+  className = "",
+  ...props
+}) {
+  const baseStyles = "rounded-lg overflow-hidden";
+  const classes = [baseStyles, variantStyles4[variant], className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx5("div", { className: classes, ...props, children });
+}
+function CardHeader({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx5("div", { className: `px-4 py-3 border-b border-border ${className}`, ...props, children });
+}
+function CardTitle({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx5("h3", { className: `text-lg font-semibold text-foreground ${className}`, ...props, children });
+}
+function CardDescription({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx5("p", { className: `text-sm text-foreground-muted mt-1 ${className}`, ...props, children });
+}
+function CardContent({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx5("div", { className: `px-4 py-4 ${className}`, ...props, children });
+}
+var CardBody = CardContent;
+function CardFooter({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx5("div", { className: `px-4 py-3 border-t border-border bg-background-muted ${className}`, ...props, children });
+}
+
+// src/Card/StatCard.tsx
+import { useId } from "react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var accentTopStyles = {
+  primary: "border-t-primary-500",
+  secondary: "border-t-border-strong",
+  success: "border-t-success",
+  warning: "border-t-warning",
+  destructive: "border-t-error"
+};
+function StatCard({
+  label,
+  value,
+  accent = "primary",
+  className = "",
+  ...props
+}) {
+  const labelId = useId();
+  const root = [
+    "overflow-hidden rounded-b-lg rounded-t-none",
+    "border border-border border-t-4 bg-background-elevated shadow-md",
+    accentTopStyles[accent],
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx6("section", { className: root, "aria-labelledby": labelId, ...props, children: /* @__PURE__ */ jsxs2("div", { className: "space-y-1 px-4 py-4", children: [
+    /* @__PURE__ */ jsx6("p", { id: labelId, className: "text-body-sm text-foreground-muted", children: label }),
+    /* @__PURE__ */ jsx6("div", { className: "text-[1.75rem] font-medium leading-tight text-foreground", children: value })
+  ] }) });
+}
+
+// src/Checkbox/Checkbox.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Checkbox = forwardRef2(
+  ({ label, disabled, className = "", id, ...props }, ref) => {
+    const checkboxId = id || props.name;
+    const checkboxStyles = [
+      "w-4 h-4",
+      "rounded-sm",
+      "border border-border",
+      "text-primary-500",
+      "bg-background-default",
+      "transition-colors duration-fast",
+      "focus:outline-none focus:shadow-focus",
+      "checked:bg-primary-500 checked:border-primary-500",
+      "hover:border-border-strong",
+      "disabled:bg-background-muted disabled:border-border disabled:cursor-not-allowed",
+      "cursor-pointer",
+      "accent-primary-500"
+    ].join(" ");
+    return /* @__PURE__ */ jsxs3("div", { className: `flex items-center gap-2 ${className}`, children: [
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          id: checkboxId,
+          disabled,
+          className: checkboxStyles,
+          ...props
+        }
+      ),
+      label && /* @__PURE__ */ jsx7(
+        "label",
+        {
+          htmlFor: checkboxId,
+          className: `text-body text-foreground select-none ${disabled ? "text-foreground-muted cursor-not-allowed" : "cursor-pointer"}`,
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/Input/Input.tsx
+import { forwardRef as forwardRef3, useId as useId2 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var sizeStyles3 = {
+  sm: "px-2 py-1 text-body-sm rounded-sm",
+  md: "px-3 py-2 text-body rounded-md",
+  lg: "px-4 py-3 text-body rounded-lg"
+};
+var Input = forwardRef3(
+  ({ size = "md", error, label, helperText, disabled, className = "", id, ...props }, ref) => {
+    const generatedId = useId2();
+    const inputId = id ?? generatedId;
+    const baseStyles = [
+      "w-full",
+      "text-foreground",
+      "bg-background-muted",
+      "border border-border",
+      "transition-colors duration-fast",
+      "placeholder:text-foreground-muted",
+      "focus:outline-none focus:shadow-focus"
+    ].join(" ");
+    const stateStyles = error ? "border-error focus:border-error" : "border-border hover:border-border-strong focus:border-primary-500";
+    const disabledStyles = disabled ? "bg-background-muted text-foreground-muted cursor-not-allowed hover:border-border" : "";
+    const classes = [baseStyles, sizeStyles3[size], stateStyles, disabledStyles, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsx8(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "text-body-sm font-medium text-foreground",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          ref,
+          id: inputId,
+          disabled,
+          className: classes,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx8("p", { id: `${inputId}-error`, className: "text-body-sm text-error", children: error }),
+      !error && helperText && /* @__PURE__ */ jsx8("p", { id: `${inputId}-helper`, className: "text-body-sm text-foreground-muted", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/Label/Label.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var sizeStyles4 = {
+  sm: "text-caption",
+  md: "text-body-sm",
+  lg: "text-body"
+};
+var Label = forwardRef4(
+  ({
+    size = "md",
+    error = false,
+    required = false,
+    className = "",
+    children,
+    ...props
+  }, ref) => {
+    const baseStyles = "font-medium";
+    const colorStyles = error ? "text-error" : "text-foreground";
+    const classes = [baseStyles, sizeStyles4[size], colorStyles, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs5("label", { ref, className: classes, ...props, children: [
+      children,
+      required && /* @__PURE__ */ jsx9("span", { className: "text-error ml-1", children: "*" })
+    ] });
+  }
+);
+Label.displayName = "Label";
+
+// src/Progress/Progress.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function Progress({
+  value,
+  max = 100,
+  showLabel = false,
+  className = "",
+  ...props
+}) {
+  const percentage = Math.min(Math.max(value / max * 100, 0), 100);
+  return /* @__PURE__ */ jsxs6("div", { className: `flex items-center gap-3 ${className}`, ...props, children: [
+    /* @__PURE__ */ jsx10(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: "flex-1 h-2 bg-background-subtle rounded-full overflow-hidden",
+        children: /* @__PURE__ */ jsx10(
+          "div",
+          {
+            className: "h-full bg-primary-500 rounded-full transition-all duration-base",
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxs6("span", { className: "text-body-sm text-foreground-muted min-w-[3ch]", children: [
+      Math.round(percentage),
+      "%"
+    ] })
+  ] });
+}
+
+// src/Select/Select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import {
+  createContext,
+  forwardRef as forwardRef5,
+  useContext
+} from "react";
+import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var SelectPlaceholderContext = createContext(void 0);
+function Select({ placeholder, children, ...props }) {
+  return /* @__PURE__ */ jsx11(SelectPlaceholderContext.Provider, { value: placeholder, children: /* @__PURE__ */ jsx11(SelectPrimitive.Root, { ...props, children }) });
+}
+var triggerBaseStyles = [
+  "group inline-flex h-10 w-full shrink-0 items-center justify-between gap-2",
+  "rounded-md border px-3 py-2 text-left text-body",
+  "text-foreground bg-background-muted border-border",
+  "transition-colors duration-fast",
+  "focus:outline-none focus:shadow-focus focus:border-primary-500",
+  "hover:border-border-strong",
+  "disabled:cursor-not-allowed disabled:text-foreground-muted disabled:hover:border-border",
+  "[&>span]:line-clamp-1"
+].join(" ");
+var SelectTrigger = forwardRef5(
+  ({ className = "", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx11(
+      SelectPrimitive.Trigger,
+      {
+        ref,
+        className: [triggerBaseStyles, className].filter(Boolean).join(" "),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs7(Fragment, { children: [
+          /* @__PURE__ */ jsx11(SelectValue, {}),
+          /* @__PURE__ */ jsx11(SelectChevronIcon, {})
+        ] })
+      }
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+var SelectValue = forwardRef5(
+  ({ placeholder, className = "", ...props }, ref) => {
+    const rootPlaceholder = useContext(SelectPlaceholderContext);
+    return /* @__PURE__ */ jsx11(
+      SelectPrimitive.Value,
+      {
+        ref,
+        placeholder: placeholder ?? rootPlaceholder,
+        className: ["data-[placeholder]:text-foreground-muted", className].filter(Boolean).join(" "),
+        ...props
+      }
+    );
+  }
+);
+SelectValue.displayName = "SelectValue";
+function SelectChevronIcon() {
+  return /* @__PURE__ */ jsx11(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx11("span", { className: "pointer-events-none flex size-4 shrink-0 items-center justify-center text-foreground-muted", children: /* @__PURE__ */ jsx11(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      className: "transition-transform duration-200 group-data-[state=open]:rotate-180",
+      children: /* @__PURE__ */ jsx11(
+        "path",
+        {
+          d: "M3 4.5L6 7.5L9 4.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  ) }) });
+}
+var contentStyles = [
+  "relative z-50 max-h-96 min-w-[var(--radix-select-trigger-width)] overflow-hidden",
+  "rounded-md border border-border bg-background-default text-foreground shadow-md"
+].join(" ");
+var viewportStyles = "p-1";
+var SelectContent = forwardRef5(
+  ({ className = "", children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx11(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx11(
+    SelectPrimitive.Content,
+    {
+      ref,
+      className: [contentStyles, className].filter(Boolean).join(" "),
+      position,
+      sideOffset: 4,
+      ...props,
+      children: /* @__PURE__ */ jsx11(
+        SelectPrimitive.Viewport,
+        {
+          className: [
+            viewportStyles,
+            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          ].filter(Boolean).join(" "),
+          children
+        }
+      )
+    }
+  ) })
+);
+SelectContent.displayName = "SelectContent";
+var itemStyles = [
+  "relative flex w-full cursor-pointer select-none items-center rounded-sm py-2 pl-3 pr-8",
+  "text-body text-foreground outline-none",
+  "data-[disabled]:pointer-events-none data-[disabled]:text-foreground-muted",
+  "data-[highlighted]:bg-background-subtle"
+].join(" ");
+var SelectItem = forwardRef5(
+  ({ className = "", children, ...props }, ref) => /* @__PURE__ */ jsx11(
+    SelectPrimitive.Item,
+    {
+      ref,
+      className: [itemStyles, className].filter(Boolean).join(" "),
+      ...props,
+      children: /* @__PURE__ */ jsx11(SelectPrimitive.ItemText, { children })
+    }
+  )
+);
+SelectItem.displayName = "SelectItem";
+
+// src/Table/Table.tsx
+import {
+  createContext as createContext2,
+  useContext as useContext2
+} from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var TableHeaderVariantContext = createContext2(null);
+function Table({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx12("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsx12(
+    "table",
+    {
+      className: `w-full border-collapse text-body ${className}`,
+      ...props,
+      children
+    }
+  ) });
+}
+var headerTheadClasses = {
+  default: "bg-background-muted",
+  /* primary-700 (#A8503A) + white text ≥4.5:1 for small semibold header copy (primary-500 fails AA) */
+  primary: "bg-primary-700",
+  secondary: "bg-background-subtle",
+  muted: "bg-background-page"
+};
+var headerHeadTextClasses = {
+  default: "text-foreground",
+  primary: "text-foreground-on-primary",
+  secondary: "text-foreground",
+  muted: "text-foreground-muted"
+};
+var headerRowClasses = {
+  default: "border-border hover:bg-background-subtle",
+  /* Avoid lightening into primary-600 on hover — white text would drop below AA */
+  primary: "border-white/20 hover:ring-1 hover:ring-inset hover:ring-white/35",
+  secondary: "border-border hover:bg-background-muted",
+  muted: "border-border-muted hover:bg-background-muted"
+};
+function TableHeader({
+  className = "",
+  children,
+  variant = "default",
+  ...props
+}) {
+  const theadBase = headerTheadClasses[variant];
+  return /* @__PURE__ */ jsx12("thead", { className: `${theadBase} ${className}`.trim(), ...props, children: /* @__PURE__ */ jsx12(TableHeaderVariantContext.Provider, { value: variant, children }) });
+}
+function TableBody({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx12("tbody", { className: `divide-y divide-border ${className}`, ...props, children });
+}
+function TableRow({ className = "", children, ...props }) {
+  const headerVariant = useContext2(TableHeaderVariantContext);
+  const rowStyles = headerVariant ? `border-b ${headerRowClasses[headerVariant]}` : "border-b border-border hover:bg-background-muted";
+  return /* @__PURE__ */ jsx12("tr", { className: `${rowStyles} transition-colors ${className}`.trim(), ...props, children });
+}
+function TableHead({ className = "", children, ...props }) {
+  const headerVariant = useContext2(TableHeaderVariantContext);
+  const textColor = headerVariant ? headerHeadTextClasses[headerVariant] : "text-foreground";
+  return /* @__PURE__ */ jsx12(
+    "th",
+    {
+      className: `px-4 py-3 text-left text-body-sm font-semibold ${textColor} ${className}`.trim(),
+      ...props,
+      children
+    }
+  );
+}
+function TableCell({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx12(
+    "td",
+    {
+      className: `px-4 py-3 text-foreground ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/Tabs/Tabs.tsx
+import {
+  createContext as createContext3,
+  useContext as useContext3,
+  useState
+} from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var TabsContext = createContext3(null);
+function useTabsContext() {
+  const context = useContext3(TabsContext);
+  if (!context) {
+    throw new Error("Tabs components must be used within a Tabs provider");
+  }
+  return context;
+}
+function Tabs({
+  defaultValue,
+  value,
+  onValueChange,
+  children,
+  className = "",
+  ...props
+}) {
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const activeTab = value ?? internalValue;
+  const setActiveTab = (newValue) => {
+    if (!value) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx13(TabsContext.Provider, { value: { activeTab, setActiveTab }, children: /* @__PURE__ */ jsx13("div", { className, ...props, children }) });
+}
+function TabsList({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx13(
+    "div",
+    {
+      role: "tablist",
+      className: `flex border-b border-border ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+function TabsTrigger({
+  value,
+  children,
+  className = "",
+  ...props
+}) {
+  const { activeTab, setActiveTab } = useTabsContext();
+  const isActive = activeTab === value;
+  const baseStyles = [
+    "px-4 py-2",
+    "text-body font-medium",
+    "border-b-2 -mb-px",
+    "transition-colors duration-fast",
+    "focus:outline-none focus-visible:shadow-focus"
+  ].join(" ");
+  const stateStyles = isActive ? "border-primary-500 text-primary-600" : "border-transparent text-foreground-muted hover:text-foreground hover:border-border-strong";
+  return /* @__PURE__ */ jsx13(
+    "button",
+    {
+      role: "tab",
+      "aria-selected": isActive,
+      onClick: () => setActiveTab(value),
+      className: `${baseStyles} ${stateStyles} ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+function TabsContent({
+  value,
+  children,
+  className = "",
+  ...props
+}) {
+  const { activeTab } = useTabsContext();
+  if (activeTab !== value) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx13("div", { role: "tabpanel", className: `py-4 ${className}`, ...props, children });
+}
+
+// src/Toggle/Toggle.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+var Toggle = forwardRef6(
+  ({ label, disabled, checked, className = "", id, ...props }, ref) => {
+    const toggleId = id || props.name;
+    const trackStyles = [
+      "relative inline-flex",
+      "w-10 h-6",
+      "rounded-full",
+      "transition-colors duration-fast",
+      "cursor-pointer",
+      checked ? "bg-primary-500" : "bg-background-subtle",
+      disabled ? "opacity-50 cursor-not-allowed" : ""
+    ].join(" ");
+    const thumbStyles = [
+      "absolute top-1 left-1",
+      "w-4 h-4",
+      "bg-background-elevated rounded-full",
+      "shadow-sm",
+      "transition-transform duration-fast",
+      checked ? "translate-x-4" : "translate-x-0"
+    ].join(" ");
+    return /* @__PURE__ */ jsxs8("div", { className: `flex items-center gap-2 ${className}`, children: [
+      /* @__PURE__ */ jsxs8("label", { htmlFor: toggleId, className: trackStyles, children: [
+        /* @__PURE__ */ jsx14(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            role: "switch",
+            id: toggleId,
+            disabled,
+            checked,
+            className: "sr-only",
+            "aria-checked": checked,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx14("span", { className: thumbStyles })
+      ] }),
+      label && /* @__PURE__ */ jsx14(
+        "label",
+        {
+          htmlFor: toggleId,
+          className: `text-body text-foreground select-none ${disabled ? "text-foreground-muted cursor-not-allowed" : "cursor-pointer"}`,
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+
+// src/index.ts
+export * from "@akanaka-design/tokens";
+export {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Input,
+  Label,
+  Progress,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  StatCard,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Toggle
+};
+//# sourceMappingURL=index.js.map