@akanaka/components 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,169 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, ImgHTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes, SelectHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+export * from '@akanaka/tokens';
+
+type AlertVariant = "info" | "success" | "warning" | "error";
+interface AlertProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant */
+    variant?: AlertVariant;
+    /** Alert title */
+    title?: string;
+    /** Alert content */
+    children: ReactNode;
+    /** Dismiss handler */
+    onDismiss?: () => void;
+}
+declare function Alert({ variant, title, children, onDismiss, className, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = "sm" | "md" | "lg" | "xl";
+interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "size"> {
+    /** Size of the avatar */
+    size?: AvatarSize;
+    /** Fallback initials when no image */
+    initials?: string;
+    /** Image source */
+    src?: string;
+    /** Alt text */
+    alt?: string;
+}
+declare function Avatar({ size, initials, src, alt, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = "default" | "primary" | "success" | "warning" | "error" | "info";
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Visual style variant */
+    variant?: BadgeVariant;
+    /** Badge content */
+    children: ReactNode;
+}
+declare function Badge({ variant, children, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Full width button */
+    fullWidth?: boolean;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type CardVariant = "elevated" | "flat";
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant */
+    variant?: CardVariant;
+    /** Card content */
+    children: ReactNode;
+}
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function Card({ variant, children, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ children, className, ...props }: CardHeaderProps): react_jsx_runtime.JSX.Element;
+declare function CardBody({ children, className, ...props }: CardBodyProps): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ children, className, ...props }: CardFooterProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Label text */
+    label?: string;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Error message to display */
+    error?: string;
+    /** Label text */
+    label?: string;
+    /** Helper text below input */
+    helperText?: string;
+}
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
+    /** Current value (0-100) */
+    value: number;
+    /** Maximum value */
+    max?: number;
+    /** Show percentage label */
+    showLabel?: boolean;
+}
+declare function Progress({ value, max, showLabel, className, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "children"> {
+    /** Options to display */
+    options: SelectOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Error message */
+    error?: string;
+    /** Label text */
+    label?: string;
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+}
+interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+}
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+}
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+}
+declare function Table({ className, children, ...props }: TableProps): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ className, children, ...props }: TableHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, children, ...props }: TableBodyProps): react_jsx_runtime.JSX.Element;
+declare function TableRow({ className, children, ...props }: TableRowProps): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, children, ...props }: TableHeadProps): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, children, ...props }: TableCellProps): react_jsx_runtime.JSX.Element;
+
+interface TabsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Default active tab value */
+    defaultValue: string;
+    /** Controlled active tab value */
+    value?: string;
+    /** Callback when tab changes */
+    onValueChange?: (value: string) => void;
+    children: ReactNode;
+}
+interface TabsListProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    /** Value that identifies this tab */
+    value: string;
+    children: ReactNode;
+}
+interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Value that identifies this content */
+    value: string;
+    children: ReactNode;
+}
+declare function Tabs({ defaultValue, value, onValueChange, children, className, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabsList({ children, className, ...props }: TabsListProps): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ value, children, className, ...props }: TabsTriggerProps): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ value, children, className, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Label text */
+    label?: string;
+}
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Input, type InputProps, Progress, type ProgressProps, Select, type SelectOption, type SelectProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Toggle, type ToggleProps };

package/dist/index.js

@@ -0,0 +1,623 @@
+// src/Alert/Alert.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var variantStyles = {
+  info: {
+    container: "bg-blue-50 border-blue-200 text-blue-800",
+    icon: "text-blue-500"
+  },
+  success: {
+    container: "bg-green-50 border-green-200 text-green-800",
+    icon: "text-green-500"
+  },
+  warning: {
+    container: "bg-amber-50 border-amber-200 text-amber-800",
+    icon: "text-amber-500"
+  },
+  error: {
+    container: "bg-red-50 border-red-200 text-red-800",
+    icon: "text-red-500"
+  }
+};
+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-primary-100 text-primary-700",
+    "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-neutral-100 text-neutral-700",
+  primary: "bg-primary-100 text-primary-700",
+  success: "bg-green-100 text-green-700",
+  warning: "bg-amber-100 text-amber-700",
+  error: "bg-red-100 text-red-700",
+  info: "bg-blue-100 text-blue-700"
+};
+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-white",
+    "hover:bg-primary-600",
+    "active:bg-primary-700",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:bg-[rgb(39,52,236)] disabled:text-white"
+  ].join(" "),
+  secondary: [
+    "bg-neutral-100 text-neutral-900",
+    "border border-neutral-300",
+    "hover:bg-neutral-200",
+    "active:bg-neutral-300",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:bg-neutral-100 disabled:text-neutral-500 disabled:border-neutral-200"
+  ].join(" "),
+  ghost: [
+    "bg-transparent text-neutral-700",
+    "hover:bg-neutral-100",
+    "active:bg-neutral-200",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:text-neutral-500 disabled:bg-transparent"
+  ].join(" "),
+  danger: [
+    "bg-error text-white",
+    "hover:bg-red-600",
+    "active:bg-red-700",
+    "focus-visible:shadow-focus focus-visible:outline-none",
+    "disabled:bg-neutral-300 disabled:text-neutral-500"
+  ].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-white shadow-md border border-neutral-200",
+  flat: "bg-neutral-50 border border-neutral-200"
+};
+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-neutral-200 ${className}`, ...props, children });
+}
+function CardBody({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx5("div", { className: `px-4 py-4 ${className}`, ...props, children });
+}
+function CardFooter({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx5("div", { className: `px-4 py-3 border-t border-neutral-200 bg-neutral-50 ${className}`, ...props, children });
+}
+
+// src/Checkbox/Checkbox.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx6, jsxs as jsxs2 } 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-neutral-300",
+      "text-primary-500",
+      "transition-colors duration-fast",
+      "focus:outline-none focus:shadow-focus",
+      "checked:bg-primary-500 checked:border-primary-500",
+      "hover:border-neutral-500",
+      "disabled:bg-neutral-100 disabled:border-neutral-300 disabled:cursor-not-allowed",
+      "cursor-pointer",
+      "accent-primary-500"
+    ].join(" ");
+    return /* @__PURE__ */ jsxs2("div", { className: `flex items-center gap-2 ${className}`, children: [
+      /* @__PURE__ */ jsx6(
+        "input",
+        {
+          ref,
+          type: "checkbox",
+          id: checkboxId,
+          disabled,
+          className: checkboxStyles,
+          ...props
+        }
+      ),
+      label && /* @__PURE__ */ jsx6(
+        "label",
+        {
+          htmlFor: checkboxId,
+          className: `text-body text-neutral-900 select-none ${disabled ? "text-neutral-500 cursor-not-allowed" : "cursor-pointer"}`,
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/Input/Input.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Input = forwardRef3(
+  ({ error, label, helperText, disabled, className = "", id, ...props }, ref) => {
+    const inputId = id || props.name;
+    const baseStyles = [
+      "w-full px-3 py-2",
+      "text-body text-neutral-900",
+      "bg-white",
+      "border rounded-md",
+      "transition-colors duration-fast",
+      "placeholder:text-neutral-500",
+      "focus:outline-none focus:shadow-focus"
+    ].join(" ");
+    const stateStyles = error ? "border-error focus:border-error" : "border-neutral-300 hover:border-neutral-500 focus:border-primary-500";
+    const disabledStyles = disabled ? "bg-neutral-100 text-neutral-500 cursor-not-allowed hover:border-neutral-300" : "";
+    const classes = [baseStyles, stateStyles, disabledStyles, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsx7(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "text-body-sm font-medium text-neutral-700",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        "input",
+        {
+          ref,
+          id: inputId,
+          disabled,
+          className: classes,
+          "aria-invalid": !!error,
+          "aria-describedby": error ? `${inputId}-error` : helperText ? `${inputId}-helper` : void 0,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsx7("p", { id: `${inputId}-error`, className: "text-body-sm text-error", children: error }),
+      !error && helperText && /* @__PURE__ */ jsx7("p", { id: `${inputId}-helper`, className: "text-body-sm text-neutral-500", children: helperText })
+    ] });
+  }
+);
+Input.displayName = "Input";
+
+// src/Progress/Progress.tsx
+import { jsx as jsx8, jsxs as jsxs4 } 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__ */ jsxs4("div", { className: `flex items-center gap-3 ${className}`, ...props, children: [
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: "flex-1 h-2 bg-neutral-200 rounded-full overflow-hidden",
+        children: /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "h-full bg-primary-500 rounded-full transition-all duration-base",
+            style: { width: `${percentage}%` }
+          }
+        )
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsxs4("span", { className: "text-body-sm text-neutral-500 min-w-[3ch]", children: [
+      Math.round(percentage),
+      "%"
+    ] })
+  ] });
+}
+
+// src/Select/Select.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+var Select = forwardRef4(
+  ({ options, placeholder, error, label, disabled, className = "", id, ...props }, ref) => {
+    const selectId = id || props.name;
+    const baseStyles = [
+      "w-full px-3 py-2",
+      "text-body text-neutral-900",
+      "bg-white",
+      "border rounded-md",
+      "transition-colors duration-fast",
+      "focus:outline-none focus:shadow-focus",
+      "appearance-none",
+      "bg-[url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%2378716C%22%20d%3D%22M6%208L2%204h8z%22%2F%3E%3C%2Fsvg%3E')]",
+      "bg-[length:12px] bg-[right_12px_center] bg-no-repeat",
+      "pr-10"
+    ].join(" ");
+    const stateStyles = error ? "border-error focus:border-error" : "border-neutral-300 hover:border-neutral-500 focus:border-primary-500";
+    const disabledStyles = disabled ? "bg-neutral-100 text-neutral-500 cursor-not-allowed hover:border-neutral-300" : "cursor-pointer";
+    const classes = [baseStyles, stateStyles, disabledStyles, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
+      label && /* @__PURE__ */ jsx9(
+        "label",
+        {
+          htmlFor: selectId,
+          className: "text-body-sm font-medium text-neutral-700",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs5(
+        "select",
+        {
+          ref,
+          id: selectId,
+          disabled,
+          className: classes,
+          "aria-invalid": !!error,
+          ...props,
+          children: [
+            placeholder && /* @__PURE__ */ jsx9("option", { value: "", disabled: true, children: placeholder }),
+            options.map((option) => /* @__PURE__ */ jsx9(
+              "option",
+              {
+                value: option.value,
+                disabled: option.disabled,
+                children: option.label
+              },
+              option.value
+            ))
+          ]
+        }
+      ),
+      error && /* @__PURE__ */ jsx9("p", { className: "text-body-sm text-error", children: error })
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+// src/Table/Table.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Table({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx10("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsx10(
+    "table",
+    {
+      className: `w-full border-collapse text-body ${className}`,
+      ...props,
+      children
+    }
+  ) });
+}
+function TableHeader({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx10("thead", { className: `bg-neutral-50 ${className}`, ...props, children });
+}
+function TableBody({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx10("tbody", { className: `divide-y divide-neutral-200 ${className}`, ...props, children });
+}
+function TableRow({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "tr",
+    {
+      className: `border-b border-neutral-200 hover:bg-neutral-50 transition-colors ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+function TableHead({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "th",
+    {
+      className: `px-4 py-3 text-left text-body-sm font-semibold text-neutral-700 ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+function TableCell({ className = "", children, ...props }) {
+  return /* @__PURE__ */ jsx10(
+    "td",
+    {
+      className: `px-4 py-3 text-neutral-900 ${className}`,
+      ...props,
+      children
+    }
+  );
+}
+
+// src/Tabs/Tabs.tsx
+import {
+  createContext,
+  useContext,
+  useState
+} from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const context = useContext(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__ */ jsx11(TabsContext.Provider, { value: { activeTab, setActiveTab }, children: /* @__PURE__ */ jsx11("div", { className, ...props, children }) });
+}
+function TabsList({ children, className = "", ...props }) {
+  return /* @__PURE__ */ jsx11(
+    "div",
+    {
+      role: "tablist",
+      className: `flex border-b border-neutral-200 ${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-neutral-500 hover:text-neutral-700 hover:border-neutral-300";
+  return /* @__PURE__ */ jsx11(
+    "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__ */ jsx11("div", { role: "tabpanel", className: `py-4 ${className}`, ...props, children });
+}
+
+// src/Toggle/Toggle.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var Toggle = forwardRef5(
+  ({ 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-neutral-300",
+      disabled ? "opacity-50 cursor-not-allowed" : ""
+    ].join(" ");
+    const thumbStyles = [
+      "absolute top-1 left-1",
+      "w-4 h-4",
+      "bg-white rounded-full",
+      "shadow-sm",
+      "transition-transform duration-fast",
+      checked ? "translate-x-4" : "translate-x-0"
+    ].join(" ");
+    return /* @__PURE__ */ jsxs6("div", { className: `flex items-center gap-2 ${className}`, children: [
+      /* @__PURE__ */ jsxs6("label", { htmlFor: toggleId, className: trackStyles, children: [
+        /* @__PURE__ */ jsx12(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            role: "switch",
+            id: toggleId,
+            disabled,
+            checked,
+            className: "sr-only",
+            "aria-checked": checked,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsx12("span", { className: thumbStyles })
+      ] }),
+      label && /* @__PURE__ */ jsx12(
+        "label",
+        {
+          htmlFor: toggleId,
+          className: `text-body text-neutral-900 select-none ${disabled ? "text-neutral-500 cursor-not-allowed" : "cursor-pointer"}`,
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
+
+// src/index.ts
+export * from "@akanaka/tokens";
+export {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Checkbox,
+  Input,
+  Progress,
+  Select,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Toggle
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Alert/Alert.tsx","../src/Avatar/Avatar.tsx","../src/Badge/Badge.tsx","../src/Button/Button.tsx","../src/Card/Card.tsx","../src/Checkbox/Checkbox.tsx","../src/Input/Input.tsx","../src/Progress/Progress.tsx","../src/Select/Select.tsx","../src/Table/Table.tsx","../src/Tabs/Tabs.tsx","../src/Toggle/Toggle.tsx","../src/index.ts"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"warning\" | \"error\";\n\nexport interface AlertProps extends HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant */\n  variant?: AlertVariant;\n  /** Alert title */\n  title?: string;\n  /** Alert content */\n  children: ReactNode;\n  /** Dismiss handler */\n  onDismiss?: () => void;\n}\n\nconst variantStyles: Record<AlertVariant, { container: string; icon: string }> = {\n  info: {\n    container: \"bg-blue-50 border-blue-200 text-blue-800\",\n    icon: \"text-blue-500\",\n  },\n  success: {\n    container: \"bg-green-50 border-green-200 text-green-800\",\n    icon: \"text-green-500\",\n  },\n  warning: {\n    container: \"bg-amber-50 border-amber-200 text-amber-800\",\n    icon: \"text-amber-500\",\n  },\n  error: {\n    container: \"bg-red-50 border-red-200 text-red-800\",\n    icon: \"text-red-500\",\n  },\n};\n\nconst icons: Record<AlertVariant, ReactNode> = {\n  info: (\n    <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n      <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\" />\n    </svg>\n  ),\n  success: (\n    <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n      <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\" />\n    </svg>\n  ),\n  warning: (\n    <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n      <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\" />\n    </svg>\n  ),\n  error: (\n    <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n      <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\" />\n    </svg>\n  ),\n};\n\nexport function Alert({\n  variant = \"info\",\n  title,\n  children,\n  onDismiss,\n  className = \"\",\n  ...props\n}: AlertProps) {\n  const baseStyles = \"flex gap-3 p-4 rounded-lg border\";\n  const styles = variantStyles[variant];\n  const classes = [baseStyles, styles.container, className].filter(Boolean).join(\" \");\n\n  return (\n    <div role=\"alert\" className={classes} {...props}>\n      <span className={`flex-shrink-0 ${styles.icon}`}>{icons[variant]}</span>\n      <div className=\"flex-1\">\n        {title && <p className=\"font-semibold mb-1\">{title}</p>}\n        <div className=\"text-body-sm\">{children}</div>\n      </div>\n      {onDismiss && (\n        <button\n          onClick={onDismiss}\n          className=\"flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity\"\n          aria-label=\"Dismiss\"\n        >\n          <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n            <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\" />\n          </svg>\n        </button>\n      )}\n    </div>\n  );\n}\n","import type { ImgHTMLAttributes } from \"react\";\n\nexport type AvatarSize = \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface AvatarProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"size\"> {\n  /** Size of the avatar */\n  size?: AvatarSize;\n  /** Fallback initials when no image */\n  initials?: string;\n  /** Image source */\n  src?: string;\n  /** Alt text */\n  alt?: string;\n}\n\nconst sizeStyles: Record<AvatarSize, string> = {\n  sm: \"w-8 h-8 text-caption\",\n  md: \"w-10 h-10 text-body-sm\",\n  lg: \"w-12 h-12 text-body\",\n  xl: \"w-16 h-16 text-h3\",\n};\n\nexport function Avatar({\n  size = \"md\",\n  initials,\n  src,\n  alt = \"\",\n  className = \"\",\n  ...props\n}: AvatarProps) {\n  const baseStyles = [\n    \"inline-flex items-center justify-center\",\n    \"rounded-full\",\n    \"bg-primary-100 text-primary-700\",\n    \"font-semibold\",\n    \"overflow-hidden\",\n    \"flex-shrink-0\",\n  ].join(\" \");\n\n  const classes = [baseStyles, sizeStyles[size], className]\n    .filter(Boolean)\n    .join(\" \");\n\n  if (src) {\n    return (\n      <img\n        src={src}\n        alt={alt}\n        className={`${sizeStyles[size]} rounded-full object-cover ${className}`}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <span className={classes} role=\"img\" aria-label={alt || initials}>\n      {initials?.slice(0, 2).toUpperCase()}\n    </span>\n  );\n}\n","import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport type BadgeVariant = \"default\" | \"primary\" | \"success\" | \"warning\" | \"error\" | \"info\";\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /** Visual style variant */\n  variant?: BadgeVariant;\n  /** Badge content */\n  children: ReactNode;\n}\n\nconst variantStyles: Record<BadgeVariant, string> = {\n  default: \"bg-neutral-100 text-neutral-700\",\n  primary: \"bg-primary-100 text-primary-700\",\n  success: \"bg-green-100 text-green-700\",\n  warning: \"bg-amber-100 text-amber-700\",\n  error: \"bg-red-100 text-red-700\",\n  info: \"bg-blue-100 text-blue-700\",\n};\n\nexport function Badge({\n  variant = \"default\",\n  children,\n  className = \"\",\n  ...props\n}: BadgeProps) {\n  const baseStyles = [\n    \"inline-flex items-center\",\n    \"px-2 py-0.5\",\n    \"text-caption font-medium\",\n    \"rounded-full\",\n  ].join(\" \");\n\n  const classes = [baseStyles, variantStyles[variant], className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <span className={classes} {...props}>\n      {children}\n    </span>\n  );\n}\n","import { forwardRef, type ButtonHTMLAttributes } from \"react\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"danger\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style variant */\n  variant?: ButtonVariant;\n  /** Size of the button */\n  size?: ButtonSize;\n  /** Full width button */\n  fullWidth?: boolean;\n}\n\nconst variantStyles: Record<ButtonVariant, string> = {\n  primary: [\n    \"bg-primary-500 text-white\",\n    \"hover:bg-primary-600\",\n    \"active:bg-primary-700\",\n    \"focus-visible:shadow-focus focus-visible:outline-none\",\n    \"disabled:bg-[rgb(39,52,236)] disabled:text-white\",\n  ].join(\" \"),\n  secondary: [\n    \"bg-neutral-100 text-neutral-900\",\n    \"border border-neutral-300\",\n    \"hover:bg-neutral-200\",\n    \"active:bg-neutral-300\",\n    \"focus-visible:shadow-focus focus-visible:outline-none\",\n    \"disabled:bg-neutral-100 disabled:text-neutral-500 disabled:border-neutral-200\",\n  ].join(\" \"),\n  ghost: [\n    \"bg-transparent text-neutral-700\",\n    \"hover:bg-neutral-100\",\n    \"active:bg-neutral-200\",\n    \"focus-visible:shadow-focus focus-visible:outline-none\",\n    \"disabled:text-neutral-500 disabled:bg-transparent\",\n  ].join(\" \"),\n  danger: [\n    \"bg-error text-white\",\n    \"hover:bg-red-600\",\n    \"active:bg-red-700\",\n    \"focus-visible:shadow-focus focus-visible:outline-none\",\n    \"disabled:bg-neutral-300 disabled:text-neutral-500\",\n  ].join(\" \"),\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n  sm: \"px-3 py-1.5 text-body-sm rounded-sm\",\n  md: \"px-4 py-2 text-body rounded-md\",\n  lg: \"px-6 py-3 text-h3 rounded-lg\",\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = \"primary\",\n      size = \"md\",\n      fullWidth = false,\n      className = \"\",\n      disabled,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const baseStyles = [\n      \"inline-flex items-center justify-center\",\n      \"font-semibold\",\n      \"transition-colors duration-fast\",\n      \"cursor-pointer\",\n      \"disabled:cursor-not-allowed\",\n    ].join(\" \");\n\n    const classes = [\n      baseStyles,\n      variantStyles[variant],\n      sizeStyles[size],\n      fullWidth ? \"w-full\" : \"\",\n      className,\n    ]\n      .filter(Boolean)\n      .join(\" \");\n\n    return (\n      <button\n        ref={ref}\n        className={classes}\n        disabled={disabled}\n        {...props}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"Button\";\n","import type { HTMLAttributes, ReactNode } from \"react\";\n\nexport type CardVariant = \"elevated\" | \"flat\";\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /** Visual style variant */\n  variant?: CardVariant;\n  /** Card content */\n  children: ReactNode;\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nconst variantStyles: Record<CardVariant, string> = {\n  elevated: \"bg-white shadow-md border border-neutral-200\",\n  flat: \"bg-neutral-50 border border-neutral-200\",\n};\n\nexport function Card({\n  variant = \"elevated\",\n  children,\n  className = \"\",\n  ...props\n}: CardProps) {\n  const baseStyles = \"rounded-lg overflow-hidden\";\n  const classes = [baseStyles, variantStyles[variant], className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div className={classes} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function CardHeader({ children, className = \"\", ...props }: CardHeaderProps) {\n  return (\n    <div className={`px-4 py-3 border-b border-neutral-200 ${className}`} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function CardBody({ children, className = \"\", ...props }: CardBodyProps) {\n  return (\n    <div className={`px-4 py-4 ${className}`} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport function CardFooter({ children, className = \"\", ...props }: CardFooterProps) {\n  return (\n    <div className={`px-4 py-3 border-t border-neutral-200 bg-neutral-50 ${className}`} {...props}>\n      {children}\n    </div>\n  );\n}\n","import { forwardRef, type InputHTMLAttributes } from \"react\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /** Label text */\n  label?: string;\n}\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  ({ label, disabled, className = \"\", id, ...props }, ref) => {\n    const checkboxId = id || props.name;\n\n    const checkboxStyles = [\n      \"w-4 h-4\",\n      \"rounded-sm\",\n      \"border border-neutral-300\",\n      \"text-primary-500\",\n      \"transition-colors duration-fast\",\n      \"focus:outline-none focus:shadow-focus\",\n      \"checked:bg-primary-500 checked:border-primary-500\",\n      \"hover:border-neutral-500\",\n      \"disabled:bg-neutral-100 disabled:border-neutral-300 disabled:cursor-not-allowed\",\n      \"cursor-pointer\",\n      \"accent-primary-500\",\n    ].join(\" \");\n\n    return (\n      <div className={`flex items-center gap-2 ${className}`}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          id={checkboxId}\n          disabled={disabled}\n          className={checkboxStyles}\n          {...props}\n        />\n        {label && (\n          <label\n            htmlFor={checkboxId}\n            className={`text-body text-neutral-900 select-none ${\n              disabled ? \"text-neutral-500 cursor-not-allowed\" : \"cursor-pointer\"\n            }`}\n          >\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  }\n);\n\nCheckbox.displayName = \"Checkbox\";\n","import { forwardRef, type InputHTMLAttributes } from \"react\";\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  /** Error message to display */\n  error?: string;\n  /** Label text */\n  label?: string;\n  /** Helper text below input */\n  helperText?: string;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ error, label, helperText, disabled, className = \"\", id, ...props }, ref) => {\n    const inputId = id || props.name;\n\n    const baseStyles = [\n      \"w-full px-3 py-2\",\n      \"text-body text-neutral-900\",\n      \"bg-white\",\n      \"border rounded-md\",\n      \"transition-colors duration-fast\",\n      \"placeholder:text-neutral-500\",\n      \"focus:outline-none focus:shadow-focus\",\n    ].join(\" \");\n\n    const stateStyles = error\n      ? \"border-error focus:border-error\"\n      : \"border-neutral-300 hover:border-neutral-500 focus:border-primary-500\";\n\n    const disabledStyles = disabled\n      ? \"bg-neutral-100 text-neutral-500 cursor-not-allowed hover:border-neutral-300\"\n      : \"\";\n\n    const classes = [baseStyles, stateStyles, disabledStyles, className]\n      .filter(Boolean)\n      .join(\" \");\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        {label && (\n          <label\n            htmlFor={inputId}\n            className=\"text-body-sm font-medium text-neutral-700\"\n          >\n            {label}\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          className={classes}\n          aria-invalid={!!error}\n          aria-describedby={error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined}\n          {...props}\n        />\n        {error && (\n          <p id={`${inputId}-error`} className=\"text-body-sm text-error\">\n            {error}\n          </p>\n        )}\n        {!error && helperText && (\n          <p id={`${inputId}-helper`} className=\"text-body-sm text-neutral-500\">\n            {helperText}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n","import type { HTMLAttributes } from \"react\";\n\nexport interface ProgressProps extends HTMLAttributes<HTMLDivElement> {\n  /** Current value (0-100) */\n  value: number;\n  /** Maximum value */\n  max?: number;\n  /** Show percentage label */\n  showLabel?: boolean;\n}\n\nexport function Progress({\n  value,\n  max = 100,\n  showLabel = false,\n  className = \"\",\n  ...props\n}: ProgressProps) {\n  const percentage = Math.min(Math.max((value / max) * 100, 0), 100);\n\n  return (\n    <div className={`flex items-center gap-3 ${className}`} {...props}>\n      <div\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        className=\"flex-1 h-2 bg-neutral-200 rounded-full overflow-hidden\"\n      >\n        <div\n          className=\"h-full bg-primary-500 rounded-full transition-all duration-base\"\n          style={{ width: `${percentage}%` }}\n        />\n      </div>\n      {showLabel && (\n        <span className=\"text-body-sm text-neutral-500 min-w-[3ch]\">\n          {Math.round(percentage)}%\n        </span>\n      )}\n    </div>\n  );\n}\n","import { forwardRef, type SelectHTMLAttributes } from \"react\";\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"children\"> {\n  /** Options to display */\n  options: SelectOption[];\n  /** Placeholder text */\n  placeholder?: string;\n  /** Error message */\n  error?: string;\n  /** Label text */\n  label?: string;\n}\n\nexport const Select = forwardRef<HTMLSelectElement, SelectProps>(\n  ({ options, placeholder, error, label, disabled, className = \"\", id, ...props }, ref) => {\n    const selectId = id || props.name;\n\n    const baseStyles = [\n      \"w-full px-3 py-2\",\n      \"text-body text-neutral-900\",\n      \"bg-white\",\n      \"border rounded-md\",\n      \"transition-colors duration-fast\",\n      \"focus:outline-none focus:shadow-focus\",\n      \"appearance-none\",\n      \"bg-[url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%2378716C%22%20d%3D%22M6%208L2%204h8z%22%2F%3E%3C%2Fsvg%3E')]\",\n      \"bg-[length:12px] bg-[right_12px_center] bg-no-repeat\",\n      \"pr-10\",\n    ].join(\" \");\n\n    const stateStyles = error\n      ? \"border-error focus:border-error\"\n      : \"border-neutral-300 hover:border-neutral-500 focus:border-primary-500\";\n\n    const disabledStyles = disabled\n      ? \"bg-neutral-100 text-neutral-500 cursor-not-allowed hover:border-neutral-300\"\n      : \"cursor-pointer\";\n\n    const classes = [baseStyles, stateStyles, disabledStyles, className]\n      .filter(Boolean)\n      .join(\" \");\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        {label && (\n          <label\n            htmlFor={selectId}\n            className=\"text-body-sm font-medium text-neutral-700\"\n          >\n            {label}\n          </label>\n        )}\n        <select\n          ref={ref}\n          id={selectId}\n          disabled={disabled}\n          className={classes}\n          aria-invalid={!!error}\n          {...props}\n        >\n          {placeholder && (\n            <option value=\"\" disabled>\n              {placeholder}\n            </option>\n          )}\n          {options.map((option) => (\n            <option\n              key={option.value}\n              value={option.value}\n              disabled={option.disabled}\n            >\n              {option.label}\n            </option>\n          ))}\n        </select>\n        {error && (\n          <p className=\"text-body-sm text-error\">{error}</p>\n        )}\n      </div>\n    );\n  }\n);\n\nSelect.displayName = \"Select\";\n","import type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from \"react\";\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {}\nexport interface TableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {}\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {}\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {}\nexport interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {}\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {}\n\nexport function Table({ className = \"\", children, ...props }: TableProps) {\n  return (\n    <div className=\"w-full overflow-auto\">\n      <table\n        className={`w-full border-collapse text-body ${className}`}\n        {...props}\n      >\n        {children}\n      </table>\n    </div>\n  );\n}\n\nexport function TableHeader({ className = \"\", children, ...props }: TableHeaderProps) {\n  return (\n    <thead className={`bg-neutral-50 ${className}`} {...props}>\n      {children}\n    </thead>\n  );\n}\n\nexport function TableBody({ className = \"\", children, ...props }: TableBodyProps) {\n  return (\n    <tbody className={`divide-y divide-neutral-200 ${className}`} {...props}>\n      {children}\n    </tbody>\n  );\n}\n\nexport function TableRow({ className = \"\", children, ...props }: TableRowProps) {\n  return (\n    <tr\n      className={`border-b border-neutral-200 hover:bg-neutral-50 transition-colors ${className}`}\n      {...props}\n    >\n      {children}\n    </tr>\n  );\n}\n\nexport function TableHead({ className = \"\", children, ...props }: TableHeadProps) {\n  return (\n    <th\n      className={`px-4 py-3 text-left text-body-sm font-semibold text-neutral-700 ${className}`}\n      {...props}\n    >\n      {children}\n    </th>\n  );\n}\n\nexport function TableCell({ className = \"\", children, ...props }: TableCellProps) {\n  return (\n    <td\n      className={`px-4 py-3 text-neutral-900 ${className}`}\n      {...props}\n    >\n      {children}\n    </td>\n  );\n}\n","import {\n  createContext,\n  useContext,\n  useState,\n  type ReactNode,\n  type HTMLAttributes,\n} from \"react\";\n\ninterface TabsContextValue {\n  activeTab: string;\n  setActiveTab: (value: string) => void;\n}\n\nconst TabsContext = createContext<TabsContextValue | null>(null);\n\nfunction useTabsContext() {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error(\"Tabs components must be used within a Tabs provider\");\n  }\n  return context;\n}\n\nexport interface TabsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Default active tab value */\n  defaultValue: string;\n  /** Controlled active tab value */\n  value?: string;\n  /** Callback when tab changes */\n  onValueChange?: (value: string) => void;\n  children: ReactNode;\n}\n\nexport interface TabsListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport interface TabsTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  /** Value that identifies this tab */\n  value: string;\n  children: ReactNode;\n}\n\nexport interface TabsContentProps extends HTMLAttributes<HTMLDivElement> {\n  /** Value that identifies this content */\n  value: string;\n  children: ReactNode;\n}\n\nexport function Tabs({\n  defaultValue,\n  value,\n  onValueChange,\n  children,\n  className = \"\",\n  ...props\n}: TabsProps) {\n  const [internalValue, setInternalValue] = useState(defaultValue);\n  const activeTab = value ?? internalValue;\n\n  const setActiveTab = (newValue: string) => {\n    if (!value) {\n      setInternalValue(newValue);\n    }\n    onValueChange?.(newValue);\n  };\n\n  return (\n    <TabsContext.Provider value={{ activeTab, setActiveTab }}>\n      <div className={className} {...props}>\n        {children}\n      </div>\n    </TabsContext.Provider>\n  );\n}\n\nexport function TabsList({ children, className = \"\", ...props }: TabsListProps) {\n  return (\n    <div\n      role=\"tablist\"\n      className={`flex border-b border-neutral-200 ${className}`}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function TabsTrigger({\n  value,\n  children,\n  className = \"\",\n  ...props\n}: TabsTriggerProps) {\n  const { activeTab, setActiveTab } = useTabsContext();\n  const isActive = activeTab === value;\n\n  const baseStyles = [\n    \"px-4 py-2\",\n    \"text-body font-medium\",\n    \"border-b-2 -mb-px\",\n    \"transition-colors duration-fast\",\n    \"focus:outline-none focus-visible:shadow-focus\",\n  ].join(\" \");\n\n  const stateStyles = isActive\n    ? \"border-primary-500 text-primary-600\"\n    : \"border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300\";\n\n  return (\n    <button\n      role=\"tab\"\n      aria-selected={isActive}\n      onClick={() => setActiveTab(value)}\n      className={`${baseStyles} ${stateStyles} ${className}`}\n      {...props}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function TabsContent({\n  value,\n  children,\n  className = \"\",\n  ...props\n}: TabsContentProps) {\n  const { activeTab } = useTabsContext();\n\n  if (activeTab !== value) {\n    return null;\n  }\n\n  return (\n    <div role=\"tabpanel\" className={`py-4 ${className}`} {...props}>\n      {children}\n    </div>\n  );\n}\n","import { forwardRef, type InputHTMLAttributes } from \"react\";\n\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\"> {\n  /** Label text */\n  label?: string;\n}\n\nexport const Toggle = forwardRef<HTMLInputElement, ToggleProps>(\n  ({ label, disabled, checked, className = \"\", id, ...props }, ref) => {\n    const toggleId = id || props.name;\n\n    const trackStyles = [\n      \"relative inline-flex\",\n      \"w-10 h-6\",\n      \"rounded-full\",\n      \"transition-colors duration-fast\",\n      \"cursor-pointer\",\n      checked ? \"bg-primary-500\" : \"bg-neutral-300\",\n      disabled ? \"opacity-50 cursor-not-allowed\" : \"\",\n    ].join(\" \");\n\n    const thumbStyles = [\n      \"absolute top-1 left-1\",\n      \"w-4 h-4\",\n      \"bg-white rounded-full\",\n      \"shadow-sm\",\n      \"transition-transform duration-fast\",\n      checked ? \"translate-x-4\" : \"translate-x-0\",\n    ].join(\" \");\n\n    return (\n      <div className={`flex items-center gap-2 ${className}`}>\n        <label htmlFor={toggleId} className={trackStyles}>\n          <input\n            ref={ref}\n            type=\"checkbox\"\n            role=\"switch\"\n            id={toggleId}\n            disabled={disabled}\n            checked={checked}\n            className=\"sr-only\"\n            aria-checked={checked}\n            {...props}\n          />\n          <span className={thumbStyles} />\n        </label>\n        {label && (\n          <label\n            htmlFor={toggleId}\n            className={`text-body text-neutral-900 select-none ${\n              disabled ? \"text-neutral-500 cursor-not-allowed\" : \"cursor-pointer\"\n            }`}\n          >\n            {label}\n          </label>\n        )}\n      </div>\n    );\n  }\n);\n\nToggle.displayName = \"Toggle\";\n","// Components\nexport * from \"./Alert\";\nexport * from \"./Avatar\";\nexport * from \"./Badge\";\nexport * from \"./Button\";\nexport * from \"./Card\";\nexport * from \"./Checkbox\";\nexport * from \"./Input\";\nexport * from \"./Progress\";\nexport * from \"./Select\";\nexport * from \"./Table\";\nexport * from \"./Tabs\";\nexport * from \"./Toggle\";\n\n// Re-export tokens for convenience\nexport * from \"@akanaka/tokens\";\n"],"mappings":"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","names":["jsx","jsx","variantStyles","jsx","variantStyles","sizeStyles","jsx","variantStyles","forwardRef","jsx","jsxs","forwardRef","jsx","jsxs","jsx","jsxs","forwardRef","jsx","jsxs","jsx","jsx","forwardRef","jsx","jsxs"]}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@akanaka/components",
+  "version": "0.1.0",
+  "description": "React components for the design system",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./tailwind.config": "./tailwind.config.ts"
+  },
+  "files": [
+    "dist",
+    "tailwind.config.ts"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YOUR_ORG/design-system.git",
+    "directory": "packages/components"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "tailwindcss"
+  ],
+  "dependencies": {
+    "@akanaka/tokens": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tailwindcss": "^3.4.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.1.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "jsdom": "^25.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

package/tailwind.config.ts

@@ -0,0 +1,75 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: ["./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: "var(--color-primary-50)",
+          100: "var(--color-primary-100)",
+          200: "var(--color-primary-200)",
+          500: "var(--color-primary-500)",
+          600: "var(--color-primary-600)",
+          700: "var(--color-primary-700)",
+        },
+        neutral: {
+          50: "var(--color-neutral-50)",
+          100: "var(--color-neutral-100)",
+          200: "var(--color-neutral-200)",
+          300: "var(--color-neutral-300)",
+          500: "var(--color-neutral-500)",
+          700: "var(--color-neutral-700)",
+          900: "var(--color-neutral-900)",
+        },
+        success: "var(--color-success)",
+        warning: "var(--color-warning)",
+        error: "var(--color-error)",
+        info: "var(--color-info)",
+      },
+      fontFamily: {
+        sans: "var(--font-sans)",
+        mono: "var(--font-mono)",
+      },
+      fontSize: {
+        caption: "var(--font-size-caption)",
+        overline: "var(--font-size-overline)",
+        "body-sm": "var(--font-size-body-sm)",
+        body: "var(--font-size-body)",
+        h3: "var(--font-size-h3)",
+        h2: "var(--font-size-h2)",
+        h1: "var(--font-size-h1)",
+        display: "var(--font-size-display)",
+      },
+      spacing: {
+        1: "var(--spacing-1)",
+        2: "var(--spacing-2)",
+        3: "var(--spacing-3)",
+        4: "var(--spacing-4)",
+        6: "var(--spacing-6)",
+        8: "var(--spacing-8)",
+        12: "var(--spacing-12)",
+      },
+      borderRadius: {
+        sm: "var(--radius-sm)",
+        md: "var(--radius-md)",
+        lg: "var(--radius-lg)",
+        full: "var(--radius-full)",
+      },
+      boxShadow: {
+        sm: "var(--shadow-sm)",
+        md: "var(--shadow-md)",
+        lg: "var(--shadow-lg)",
+        focus: "var(--shadow-focus)",
+      },
+      transitionDuration: {
+        fast: "150ms",
+        base: "200ms",
+        slow: "300ms",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;