@tosui/react 0.1.0 → 0.1.2

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import { Button } from "../Button/Button.js";
+import { HStack } from "../HStack/HStack.js";
+import styles from "./pagination.module.css.js";
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function getPaginationRange(page, totalPages, siblings) {
+  const totalNumbers = siblings * 2 + 3;
+  if (totalPages <= totalNumbers + 2) {
+    return range(1, totalPages);
+  }
+  const leftSiblingIndex = Math.max(page - siblings, 1);
+  const rightSiblingIndex = Math.min(page + siblings, totalPages);
+  const showLeftEllipsis = leftSiblingIndex > 2;
+  const showRightEllipsis = rightSiblingIndex < totalPages - 1;
+  if (!showLeftEllipsis && showRightEllipsis) {
+    const leftRange = range(1, 3 + siblings * 2);
+    return [...leftRange, "ellipsis", totalPages];
+  }
+  if (showLeftEllipsis && !showRightEllipsis) {
+    const rightRange = range(totalPages - (2 + siblings * 2), totalPages);
+    return [1, "ellipsis", ...rightRange];
+  }
+  const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+  return [1, "ellipsis", ...middleRange, "ellipsis", totalPages];
+}
+function Pagination({
+  page,
+  totalPages,
+  onPageChange,
+  siblings = 1,
+  showEdges = true,
+  className
+}) {
+  const pages = getPaginationRange(page, totalPages, siblings);
+  const canGoPrev = page > 1;
+  const canGoNext = page < totalPages;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "nav",
+      "aria-label": "Pagination",
+      className: clsx(styles.pagination, className),
+      children: /* @__PURE__ */ jsxs(HStack, { gap: 1, children: [
+        showEdges && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            disabled: !canGoPrev,
+            onClick: () => onPageChange(1),
+            "aria-label": "First page",
+            children: "««"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            disabled: !canGoPrev,
+            onClick: () => onPageChange(page - 1),
+            "aria-label": "Previous page",
+            children: "«"
+          }
+        ),
+        pages.map(
+          (p, index) => p === "ellipsis" ? /* @__PURE__ */ jsx(
+            Box,
+            {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              px: 2,
+              color: "foreground-muted",
+              fontSize: "sm",
+              children: "…"
+            },
+            `ellipsis-${index}`
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: p === page ? "solid" : "ghost",
+              size: "sm",
+              onClick: () => onPageChange(p),
+              "aria-label": `Page ${p}`,
+              "aria-current": p === page ? "page" : void 0,
+              children: p
+            },
+            p
+          )
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            disabled: !canGoNext,
+            onClick: () => onPageChange(page + 1),
+            "aria-label": "Next page",
+            children: "»"
+          }
+        ),
+        showEdges && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "sm",
+            disabled: !canGoNext,
+            onClick: () => onPageChange(totalPages),
+            "aria-label": "Last page",
+            children: "»»"
+          }
+        )
+      ] })
+    }
+  );
+}
+export {
+  Pagination
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport { Button } from \"@/components/Button\";\nimport { HStack } from \"@/components/HStack\";\nimport styles from \"./pagination.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type PaginationProps = {\n  /** Current page (1-indexed) */\n  page: number;\n  /** Total number of pages */\n  totalPages: number;\n  /** Callback when page changes */\n  onPageChange: (page: number) => void;\n  /** Number of sibling pages to show */\n  siblings?: number;\n  /** Show first/last page buttons */\n  showEdges?: boolean;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nfunction range(start: number, end: number): number[] {\n  return Array.from({ length: end - start + 1 }, (_, i) => start + i);\n}\n\nfunction getPaginationRange(\n  page: number,\n  totalPages: number,\n  siblings: number\n): (number | \"ellipsis\")[] {\n  const totalNumbers = siblings * 2 + 3; // siblings on each side + current + 2 edges\n\n  if (totalPages <= totalNumbers + 2) {\n    return range(1, totalPages);\n  }\n\n  const leftSiblingIndex = Math.max(page - siblings, 1);\n  const rightSiblingIndex = Math.min(page + siblings, totalPages);\n\n  const showLeftEllipsis = leftSiblingIndex > 2;\n  const showRightEllipsis = rightSiblingIndex < totalPages - 1;\n\n  if (!showLeftEllipsis && showRightEllipsis) {\n    const leftRange = range(1, 3 + siblings * 2);\n    return [...leftRange, \"ellipsis\", totalPages];\n  }\n\n  if (showLeftEllipsis && !showRightEllipsis) {\n    const rightRange = range(totalPages - (2 + siblings * 2), totalPages);\n    return [1, \"ellipsis\", ...rightRange];\n  }\n\n  const middleRange = range(leftSiblingIndex, rightSiblingIndex);\n  return [1, \"ellipsis\", ...middleRange, \"ellipsis\", totalPages];\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Pagination - Page navigation component\n *\n * A pagination component that provides:\n * - Current page indicator\n * - Previous/next buttons\n * - Optional first/last page buttons\n * - Ellipsis for large page ranges\n * - Sibling page configuration\n */\nexport function Pagination({\n  page,\n  totalPages,\n  onPageChange,\n  siblings = 1,\n  showEdges = true,\n  className,\n}: PaginationProps) {\n  const pages = getPaginationRange(page, totalPages, siblings);\n\n  const canGoPrev = page > 1;\n  const canGoNext = page < totalPages;\n\n  return (\n    <Box\n      as=\"nav\"\n      aria-label=\"Pagination\"\n      className={clsx(styles.pagination, className)}\n    >\n      <HStack gap={1}>\n        {showEdges && (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            disabled={!canGoPrev}\n            onClick={() => onPageChange(1)}\n            aria-label=\"First page\"\n          >\n            ««\n          </Button>\n        )}\n\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          disabled={!canGoPrev}\n          onClick={() => onPageChange(page - 1)}\n          aria-label=\"Previous page\"\n        >\n          «\n        </Button>\n\n        {pages.map((p, index) =>\n          p === \"ellipsis\" ? (\n            <Box\n              key={`ellipsis-${index}`}\n              display=\"flex\"\n              alignItems=\"center\"\n              justifyContent=\"center\"\n              px={2}\n              color=\"foreground-muted\"\n              fontSize=\"sm\"\n            >\n              …\n            </Box>\n          ) : (\n            <Button\n              key={p}\n              variant={p === page ? \"solid\" : \"ghost\"}\n              size=\"sm\"\n              onClick={() => onPageChange(p)}\n              aria-label={`Page ${p}`}\n              aria-current={p === page ? \"page\" : undefined}\n            >\n              {p}\n            </Button>\n          )\n        )}\n\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          disabled={!canGoNext}\n          onClick={() => onPageChange(page + 1)}\n          aria-label=\"Next page\"\n        >\n          »\n        </Button>\n\n        {showEdges && (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            disabled={!canGoNext}\n            onClick={() => onPageChange(totalPages)}\n            aria-label=\"Last page\"\n          >\n            »»\n          </Button>\n        )}\n      </HStack>\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Pagination/pagination.module.css

@@ -0,0 +1,3 @@
+._pagination_12b5w_1 {
+  /* Container styles */
+}

package/dist/components/Pagination/pagination.module.css.js

@@ -0,0 +1,9 @@
+const pagination = "_pagination_12b5w_1";
+const styles = {
+  pagination
+};
+export {
+  styles as default,
+  pagination
+};
+//# sourceMappingURL=pagination.module.css.js.map

package/dist/components/Pagination/pagination.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/components/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAUpE,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAoB,EACpB,WAAkB,EAClB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,YAAY,2CA4Hd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAaxE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAMpE"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA+B,MAAM,OAAO,CAAC;AAUpE,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,YAAY,GAAG;IACzB,sBAAsB;IACtB,OAAO,EAAE,SAAS,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAoB,EACpB,WAAkB,EAClB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,YAAY,2CA4Hd;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAaxE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAMpE"}

package/dist/components/Popover/Popover.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./popover.module.css.js";
+function Popover({
+  content,
+  placement = "bottom",
+  closeOnBlur = true,
+  isOpen: controlledIsOpen,
+  onOpen,
+  onClose,
+  className,
+  children
+}) {
+  const [internalIsOpen, setInternalIsOpen] = useState(false);
+  const isControlled = controlledIsOpen !== void 0;
+  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const triggerRef = useRef(null);
+  const popoverRef = useRef(null);
+  const setOpen = (open) => {
+    if (!isControlled) {
+      setInternalIsOpen(open);
+    }
+    if (open) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+  const updatePosition = () => {
+    if (!triggerRef.current || !popoverRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popoverRect = popoverRef.current.getBoundingClientRect();
+    const gap = 8;
+    let top = 0;
+    let left = 0;
+    switch (placement) {
+      case "top":
+        top = triggerRect.top - popoverRect.height - gap;
+        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + gap;
+        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
+        break;
+      case "left":
+        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
+        left = triggerRect.left - popoverRect.width - gap;
+        break;
+      case "right":
+        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
+        left = triggerRect.right + gap;
+        break;
+    }
+    setPosition({ top: top + window.scrollY, left: left + window.scrollX });
+  };
+  useEffect(() => {
+    if (isOpen) updatePosition();
+  }, [isOpen, placement]);
+  useEffect(() => {
+    if (!isOpen || !closeOnBlur) return;
+    const handleClick = (e) => {
+      if (triggerRef.current?.contains(e.target) || popoverRef.current?.contains(e.target))
+        return;
+      setOpen(false);
+    };
+    document.addEventListener("click", handleClick);
+    return () => document.removeEventListener("click", handleClick);
+  }, [isOpen, closeOnBlur]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen]);
+  const handleTriggerClick = () => {
+    setOpen(!isOpen);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "span",
+        ref: triggerRef,
+        display: "inline-block",
+        onClick: handleTriggerClick,
+        "aria-expanded": isOpen,
+        "aria-haspopup": "dialog",
+        cursor: "pointer",
+        children
+      }
+    ),
+    isOpen && createPortal(
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref: popoverRef,
+          position: "absolute",
+          bg: "surface",
+          border: "thin",
+          borderColor: "border",
+          rounded: "md",
+          shadow: "lg",
+          zIndex: "dropdown",
+          minW: "200px",
+          className: clsx(styles.popover, className),
+          style: { top: position.top, left: position.left },
+          role: "dialog",
+          children: content
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function PopoverHeader({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      px: 4,
+      py: 3,
+      borderBottom: "thin",
+      borderColor: "border",
+      fontWeight: "medium",
+      className: clsx(styles.header, className),
+      children
+    }
+  );
+}
+function PopoverBody({ className, children }) {
+  return /* @__PURE__ */ jsx(Box, { px: 4, py: 3, className: clsx(styles.body, className), children });
+}
+export {
+  Popover,
+  PopoverBody,
+  PopoverHeader
+};
+//# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useState, useRef, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./popover.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type PopoverPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type PopoverProps = {\n  /** Popover content */\n  content: ReactNode;\n  /** Placement of popover */\n  placement?: PopoverPlacement;\n  /** Close on outside click */\n  closeOnBlur?: boolean;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Callback when popover opens */\n  onOpen?: () => void;\n  /** Callback when popover closes */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n  /** Trigger element */\n  children: ReactNode;\n};\n\nexport type PopoverHeaderProps = {\n  /** Additional class name */\n  className?: string;\n  /** Header content */\n  children?: ReactNode;\n};\n\nexport type PopoverBodyProps = {\n  /** Additional class name */\n  className?: string;\n  /** Body content */\n  children?: ReactNode;\n};\n\n// ============================================================================\n// Components\n// ============================================================================\n\n/**\n * Popover - Click-triggered overlay with positioning\n *\n * A popover component that:\n * - Toggles on click\n * - Positions relative to trigger\n * - Closes on outside click and Escape\n * - Supports controlled mode via isOpen/onOpen/onClose\n * - Renders via portal\n */\nexport function Popover({\n  content,\n  placement = \"bottom\",\n  closeOnBlur = true,\n  isOpen: controlledIsOpen,\n  onOpen,\n  onClose,\n  className,\n  children,\n}: PopoverProps) {\n  const [internalIsOpen, setInternalIsOpen] = useState(false);\n  const isControlled = controlledIsOpen !== undefined;\n  const isOpen = isControlled ? controlledIsOpen : internalIsOpen;\n\n  const [position, setPosition] = useState({ top: 0, left: 0 });\n  const triggerRef = useRef<HTMLElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const setOpen = (open: boolean) => {\n    if (!isControlled) {\n      setInternalIsOpen(open);\n    }\n    if (open) {\n      onOpen?.();\n    } else {\n      onClose?.();\n    }\n  };\n\n  const updatePosition = () => {\n    if (!triggerRef.current || !popoverRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const popoverRect = popoverRef.current.getBoundingClientRect();\n    const gap = 8;\n\n    let top = 0;\n    let left = 0;\n\n    switch (placement) {\n      case \"top\":\n        top = triggerRect.top - popoverRect.height - gap;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case \"bottom\":\n        top = triggerRect.bottom + gap;\n        left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;\n        break;\n      case \"left\":\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.left - popoverRect.width - gap;\n        break;\n      case \"right\":\n        top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;\n        left = triggerRect.right + gap;\n        break;\n    }\n\n    setPosition({ top: top + window.scrollY, left: left + window.scrollX });\n  };\n\n  useEffect(() => {\n    if (isOpen) updatePosition();\n  }, [isOpen, placement]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!isOpen || !closeOnBlur) return;\n\n    const handleClick = (e: MouseEvent) => {\n      if (\n        triggerRef.current?.contains(e.target as Node) ||\n        popoverRef.current?.contains(e.target as Node)\n      )\n        return;\n      setOpen(false);\n    };\n\n    document.addEventListener(\"click\", handleClick);\n    return () => document.removeEventListener(\"click\", handleClick);\n  }, [isOpen, closeOnBlur]);\n\n  // Close on Escape\n  useEffect(() => {\n    if (!isOpen) return;\n\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") setOpen(false);\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [isOpen]);\n\n  const handleTriggerClick = () => {\n    setOpen(!isOpen);\n  };\n\n  return (\n    <>\n      <Box\n        as=\"span\"\n        ref={triggerRef}\n        display=\"inline-block\"\n        onClick={handleTriggerClick}\n        aria-expanded={isOpen}\n        aria-haspopup=\"dialog\"\n        cursor=\"pointer\"\n      >\n        {children}\n      </Box>\n      {isOpen &&\n        createPortal(\n          <Box\n            ref={popoverRef}\n            position=\"absolute\"\n            bg=\"surface\"\n            border=\"thin\"\n            borderColor=\"border\"\n            rounded=\"md\"\n            shadow=\"lg\"\n            zIndex=\"dropdown\"\n            minW=\"200px\"\n            className={clsx(styles.popover, className)}\n            style={{ top: position.top, left: position.left }}\n            role=\"dialog\"\n          >\n            {content}\n          </Box>,\n          document.body\n        )}\n    </>\n  );\n}\n\n/**\n * PopoverHeader - Header section for popover\n */\nexport function PopoverHeader({ className, children }: PopoverHeaderProps) {\n  return (\n    <Box\n      px={4}\n      py={3}\n      borderBottom=\"thin\"\n      borderColor=\"border\"\n      fontWeight=\"medium\"\n      className={clsx(styles.header, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * PopoverBody - Body section for popover\n */\nexport function PopoverBody({ className, children }: PopoverBodyProps) {\n  return (\n    <Box px={4} py={3} className={clsx(styles.body, className)}>\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Popover/popover.module.css

@@ -0,0 +1,11 @@
+._popover_pqlwh_1 {
+  /* Popover styles */
+}
+
+._header_pqlwh_5 {
+  /* Header styles */
+}
+
+._body_pqlwh_9 {
+  /* Body styles */
+}

package/dist/components/Popover/popover.module.css.js

@@ -0,0 +1,15 @@
+const popover = "_popover_pqlwh_1";
+const header = "_header_pqlwh_5";
+const body = "_body_pqlwh_9";
+const styles = {
+  popover,
+  header,
+  body
+};
+export {
+  body,
+  styles as default,
+  header,
+  popover
+};
+//# sourceMappingURL=popover.module.css.js.map

package/dist/components/Popover/popover.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Progress/Progress.js

@@ -0,0 +1,54 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./progress.module.css.js";
+const sizeConfig = {
+  sm: "4px",
+  md: "8px",
+  lg: "12px"
+};
+function Progress({
+  value = 0,
+  max = 100,
+  colorScheme = "primary",
+  size = "md",
+  isIndeterminate = false,
+  className
+}) {
+  const percentage = Math.min(100, Math.max(0, value / max * 100));
+  const height = sizeConfig[size];
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "progressbar",
+      "aria-valuenow": isIndeterminate ? void 0 : value,
+      "aria-valuemin": 0,
+      "aria-valuemax": max,
+      position: "relative",
+      overflow: "hidden",
+      rounded: "full",
+      bg: "surface",
+      className: clsx(styles.track, className),
+      style: { "--progress-height": height },
+      children: /* @__PURE__ */ jsx(
+        Box,
+        {
+          position: "absolute",
+          inset: 0,
+          rounded: "full",
+          bg: `${colorScheme}-default`,
+          className: clsx(
+            styles.fill,
+            isIndeterminate && styles.indeterminate
+          ),
+          style: isIndeterminate ? void 0 : { "--progress-width": `${percentage}%` }
+        }
+      )
+    }
+  );
+}
+export {
+  Progress
+};
+//# sourceMappingURL=Progress.js.map

package/dist/components/Progress/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["import { type CSSProperties } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./progress.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ProgressColorScheme =\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\nexport type ProgressProps = {\n  /** Progress value (0-100) */\n  value?: number;\n  /** Maximum value (default 100) */\n  max?: number;\n  /** Color scheme */\n  colorScheme?: ProgressColorScheme;\n  /** Size */\n  size?: ProgressSize;\n  /** Indeterminate mode (loading without known progress) */\n  isIndeterminate?: boolean;\n  /** Additional class name */\n  className?: string;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: \"4px\",\n  md: \"8px\",\n  lg: \"12px\",\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Progress - Progress bar indicator\n *\n * A visual indicator of completion progress:\n * - Value-based: shows percentage complete\n * - Indeterminate: animated loading state\n *\n * Features:\n * - 6 color schemes\n * - 3 sizes (sm, md, lg)\n * - Accessible with role=\"progressbar\" and ARIA attributes\n */\nexport function Progress({\n  value = 0,\n  max = 100,\n  colorScheme = \"primary\",\n  size = \"md\",\n  isIndeterminate = false,\n  className,\n}: ProgressProps) {\n  const percentage = Math.min(100, Math.max(0, (value / max) * 100));\n  const height = sizeConfig[size];\n\n  return (\n    <Box\n      role=\"progressbar\"\n      aria-valuenow={isIndeterminate ? undefined : value}\n      aria-valuemin={0}\n      aria-valuemax={max}\n      position=\"relative\"\n      overflow=\"hidden\"\n      rounded=\"full\"\n      bg=\"surface\"\n      className={clsx(styles.track, className)}\n      style={{ \"--progress-height\": height } as CSSProperties}\n    >\n      <Box\n        position=\"absolute\"\n        inset={0}\n        rounded=\"full\"\n        bg={`${colorScheme}-default` as any}\n        className={clsx(\n          styles.fill,\n          isIndeterminate && styles.indeterminate\n        )}\n        style={\n          isIndeterminate\n            ? undefined\n            : ({ \"--progress-width\": `${percentage}%` } as CSSProperties)\n        }\n      />\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAsCA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAkBO,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,cAAc;AAAA,EACd,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB;AACF,GAAkB;AAChB,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAI,QAAQ,MAAO,GAAG,CAAC;AACjE,QAAM,SAAS,WAAW,IAAI;AAE9B,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,iBAAe,kBAAkB,SAAY;AAAA,MAC7C,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,UAAS;AAAA,MACT,UAAS;AAAA,MACT,SAAQ;AAAA,MACR,IAAG;AAAA,MACH,WAAW,KAAK,OAAO,OAAO,SAAS;AAAA,MACvC,OAAO,EAAE,qBAAqB,OAAA;AAAA,MAE9B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,OAAO;AAAA,UACP,SAAQ;AAAA,UACR,IAAI,GAAG,WAAW;AAAA,UAClB,WAAW;AAAA,YACT,OAAO;AAAA,YACP,mBAAmB,OAAO;AAAA,UAAA;AAAA,UAE5B,OACE,kBACI,SACC,EAAE,oBAAoB,GAAG,UAAU,IAAA;AAAA,QAAI;AAAA,MAAA;AAAA,IAEhD;AAAA,EAAA;AAGN;"}

package/dist/components/Progress/progress.module.css

@@ -0,0 +1,24 @@
+._track_hrq7y_1 {
+  height: var(--progress-height);
+  width: 100%;
+}
+
+._fill_hrq7y_6 {
+  width: var(--progress-width, 0%);
+  height: 100%;
+  transition: width 200ms ease-in-out;
+}
+
+._indeterminate_hrq7y_12 {
+  width: 40%;
+  animation: _indeterminate_hrq7y_12 1.5s ease-in-out infinite;
+}
+
+@keyframes _indeterminate_hrq7y_12 {
+  0% {
+    left: -40%;
+  }
+  100% {
+    left: 100%;
+  }
+}

package/dist/components/Progress/progress.module.css.js

@@ -0,0 +1,15 @@
+const track = "_track_hrq7y_1";
+const fill = "_fill_hrq7y_6";
+const indeterminate = "_indeterminate_hrq7y_12";
+const styles = {
+  track,
+  fill,
+  indeterminate
+};
+export {
+  styles as default,
+  fill,
+  indeterminate,
+  track
+};
+//# sourceMappingURL=progress.module.css.js.map

package/dist/components/Progress/progress.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/Radio/Radio.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./radio.module.css.js";
+const sizeConfig = {
+  sm: { circle: 16, fontSize: "sm" },
+  md: { circle: 20, fontSize: "md" },
+  lg: { circle: 24, fontSize: "lg" }
+};
+const Radio = forwardRef(function Radio2({
+  size = "md",
+  disabled = false,
+  isChecked,
+  label,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const sizeProps = sizeConfig[size];
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "label",
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 2,
+      cursor: disabled ? "not-allowed" : "pointer",
+      opacity: disabled ? "faint" : void 0,
+      className: clsx(styles.wrapper, className),
+      style,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "radio",
+            ref,
+            checked: isChecked,
+            disabled,
+            className: styles.input,
+            ...rest
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            as: "span",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            rounded: "full",
+            border: "thin",
+            borderColor: "border",
+            flexShrink: 0,
+            className: styles.circle,
+            style: {
+              width: sizeProps.circle,
+              height: sizeProps.circle
+            }
+          }
+        ),
+        label && /* @__PURE__ */ jsx(Box, { as: "span", fontSize: sizeProps.fontSize, color: "foreground", children: label })
+      ]
+    }
+  );
+});
+export {
+  Radio
+};
+//# sourceMappingURL=Radio.js.map

package/dist/components/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sources":["../../../src/components/Radio/Radio.tsx"],"sourcesContent":["import { type InputHTMLAttributes, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./radio.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type RadioSize = \"sm\" | \"md\" | \"lg\";\n\nexport type RadioProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\" | \"type\"\n> & {\n  /** Radio size affecting circle dimensions */\n  size?: RadioSize;\n  /** Whether the radio is disabled */\n  disabled?: boolean;\n  /** Controlled checked state */\n  isChecked?: boolean;\n  /** Optional label text displayed to the right */\n  label?: string;\n};\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { circle: 16, fontSize: \"sm\" },\n  md: { circle: 20, fontSize: \"md\" },\n  lg: { circle: 24, fontSize: \"lg\" },\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Radio - Radio button component\n *\n * A styled radio component that provides:\n * - Sizes: sm, md (default), lg\n * - Custom styled circle with inner dot\n * - Optional inline label\n * - Disabled state\n * - Focus ring styling\n * - Use name prop to group radios together\n */\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(\n  {\n    size = \"md\",\n    disabled = false,\n    isChecked,\n    label,\n    className,\n    style,\n    ...rest\n  },\n  ref\n) {\n  const sizeProps = sizeConfig[size];\n\n  return (\n    <Box\n      as=\"label\"\n      display=\"inline-flex\"\n      alignItems=\"center\"\n      gap={2}\n      cursor={disabled ? \"not-allowed\" : \"pointer\"}\n      opacity={disabled ? \"faint\" : undefined}\n      className={clsx(styles.wrapper, className)}\n      style={style}\n    >\n      {/* Hidden native radio */}\n      <input\n        type=\"radio\"\n        ref={ref}\n        checked={isChecked}\n        disabled={disabled}\n        className={styles.input}\n        {...rest}\n      />\n\n      {/* Custom visual radio circle */}\n      <Box\n        as=\"span\"\n        display=\"inline-flex\"\n        alignItems=\"center\"\n        justifyContent=\"center\"\n        rounded=\"full\"\n        border=\"thin\"\n        borderColor=\"border\"\n        flexShrink={0}\n        className={styles.circle}\n        style={{\n          width: sizeProps.circle,\n          height: sizeProps.circle,\n        }}\n      />\n\n      {/* Optional label */}\n      {label && (\n        <Box as=\"span\" fontSize={sizeProps.fontSize} color=\"foreground\">\n          {label}\n        </Box>\n      )}\n    </Box>\n  );\n});\n"],"names":["Radio"],"mappings":";;;;;AA6BA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,QAAQ,IAAI,UAAU,KAAA;AAAA,EAC5B,IAAI,EAAE,QAAQ,IAAI,UAAU,KAAA;AAAA,EAC5B,IAAI,EAAE,QAAQ,IAAI,UAAU,KAAA;AAC9B;AAiBO,MAAM,QAAQ,WAAyC,SAASA,OACrE;AAAA,EACE,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,WAAW,IAAI;AAEjC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,KAAK;AAAA,MACL,QAAQ,WAAW,gBAAgB;AAAA,MACnC,SAAS,WAAW,UAAU;AAAA,MAC9B,WAAW,KAAK,OAAO,SAAS,SAAS;AAAA,MACzC;AAAA,MAGA,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL;AAAA,YACA,SAAS;AAAA,YACT;AAAA,YACA,WAAW,OAAO;AAAA,YACjB,GAAG;AAAA,UAAA;AAAA,QAAA;AAAA,QAIN;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAG;AAAA,YACH,SAAQ;AAAA,YACR,YAAW;AAAA,YACX,gBAAe;AAAA,YACf,SAAQ;AAAA,YACR,QAAO;AAAA,YACP,aAAY;AAAA,YACZ,YAAY;AAAA,YACZ,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,cACL,OAAO,UAAU;AAAA,cACjB,QAAQ,UAAU;AAAA,YAAA;AAAA,UACpB;AAAA,QAAA;AAAA,QAID,SACC,oBAAC,KAAA,EAAI,IAAG,QAAO,UAAU,UAAU,UAAU,OAAM,cAChD,UAAA,MAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/Radio/radio.module.css

@@ -0,0 +1,48 @@
+/* Hidden native radio */
+._input_16wxn_2 {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Custom radio circle */
+._circle_16wxn_12 {
+  transition-duration: 150ms;
+  transition-property: border-color, background-color, box-shadow;
+  transition-timing-function: ease-in-out;
+  position: relative;
+}
+
+/* Inner dot (hidden by default) */
+._circle_16wxn_12::before {
+  content: "";
+  position: absolute;
+  display: none;
+  width: 50%;
+  height: 50%;
+  background-color: var(--t-color-primary-default);
+  border-radius: 50%;
+}
+
+/* Focus ring when input is focused */
+._input_16wxn_2:focus-visible ~ ._circle_16wxn_12 {
+  border-color: var(--t-color-primary-default);
+  box-shadow: 0 0 0 3px var(--t-color-primary-subtle);
+}
+
+/* Checked state */
+._input_16wxn_2:checked ~ ._circle_16wxn_12 {
+  border-color: var(--t-color-primary-default);
+}
+
+._input_16wxn_2:checked ~ ._circle_16wxn_12::before {
+  display: block;
+}
+
+/* Disabled state (handled via opacity on wrapper) */
+._input_16wxn_2:disabled ~ ._circle_16wxn_12 {
+  cursor: not-allowed;
+}

package/dist/components/Radio/radio.module.css.js

@@ -0,0 +1,12 @@
+const input = "_input_16wxn_2";
+const circle = "_circle_16wxn_12";
+const styles = {
+  input,
+  circle
+};
+export {
+  circle,
+  styles as default,
+  input
+};
+//# sourceMappingURL=radio.module.css.js.map

package/dist/components/Radio/radio.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}