@tosui/react 0.1.0 → 0.1.2

package/dist/components/Tabs/tabs.module.css

@@ -0,0 +1,55 @@
+._tabs_qgiou_1 {
+  width: 100%;
+}
+
+._tabList_qgiou_5 {
+  margin-bottom: 0;
+}
+
+._tab_qgiou_1 {
+  position: relative;
+  transition: color 0.15s ease;
+  margin-bottom: -1px;
+}
+
+._tab_qgiou_1:hover:not(:disabled) {
+  color: var(--t-color-primary-default);
+}
+
+/* Line variant - bottom border indicator */
+._line_qgiou_20 ._tab_qgiou_1::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: transparent;
+  transition: background 0.15s ease;
+}
+
+._line_qgiou_20 ._tab_qgiou_1._active_qgiou_31::after {
+  background: var(--t-color-primary-default);
+}
+
+/* Enclosed variant - tab-like borders */
+._enclosed_qgiou_36 ._tabList_qgiou_5 {
+  border-bottom: none;
+}
+
+._enclosed_qgiou_36 ._tab_qgiou_1 {
+  border: 1px solid transparent;
+  border-bottom: 1px solid var(--t-color-border);
+  border-radius: var(--t-radius-md) var(--t-radius-md) 0 0;
+  margin-bottom: -1px;
+}
+
+._enclosed_qgiou_36 ._tab_qgiou_1._active_qgiou_31 {
+  border-color: var(--t-color-border);
+  border-bottom-color: var(--t-color-background);
+  background: var(--t-color-background);
+}
+
+._tabPanel_qgiou_53 {
+  /* Panel styles */
+}

package/dist/components/Tabs/tabs.module.css.js

@@ -0,0 +1,27 @@
+const tabs = "_tabs_qgiou_1";
+const tabList = "_tabList_qgiou_5";
+const tab = "_tab_qgiou_1";
+const line = "_line_qgiou_20";
+const active = "_active_qgiou_31";
+const enclosed = "_enclosed_qgiou_36";
+const tabPanel = "_tabPanel_qgiou_53";
+const styles = {
+  tabs,
+  tabList,
+  tab,
+  line,
+  active,
+  enclosed,
+  tabPanel
+};
+export {
+  active,
+  styles as default,
+  enclosed,
+  line,
+  tab,
+  tabList,
+  tabPanel,
+  tabs
+};
+//# sourceMappingURL=tabs.module.css.js.map

package/dist/components/Tabs/tabs.module.css.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACjF,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAC5D,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AACzD,KAAK,KAAK,GACN,YAAY,GACZ,kBAAkB,GAClB,mBAAmB,GACnB,qBAAqB,GACrB,2BAA2B,GAC3B,4BAA4B,GAC5B,QAAQ,GACR,iBAAiB,GACjB,SAAS,GACT,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,eAAe,CAAC;AAEpB,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,WAAW,EACX,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAClD,GAAG;IACF,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,IAAI,WAAW,CACjE,CAAC,EACD,YAAY,CACb,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,EAAE,EACnD,EAAE,EACF,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAiBd"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AACnD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAIvD,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACjF,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAC5D,KAAK,SAAS,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AACzD,KAAK,KAAK,GACN,YAAY,GACZ,kBAAkB,GAClB,mBAAmB,GACnB,qBAAqB,GACrB,2BAA2B,GAC3B,4BAA4B,GAC5B,QAAQ,GACR,iBAAiB,GACjB,SAAS,GACT,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,SAAS,GACT,kBAAkB,GAClB,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,eAAe,CAAC;AAEpB,MAAM,MAAM,YAAY,GAAG,IAAI,CAC7B,WAAW,EACX,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,OAAO,CAClD,GAAG;IACF,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,IAAI,WAAW,CACjE,CAAC,EACD,YAAY,CACb,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,EAAE,EACnD,EAAE,EACF,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAoB,EACpB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,CAAC,CAAC,CAAC,2CAiBd"}

package/dist/components/Text/Text.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./text.module.css.js";
+function Text({
+  as,
+  size,
+  weight,
+  align,
+  color = "foreground",
+  truncate,
+  italic,
+  className,
+  ...rest
+}) {
+  return (
+    // @ts-expect-error - Polymorphic component prop forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as,
+        fontSize: size,
+        fontWeight: weight,
+        textAlign: align,
+        color,
+        className: clsx(
+          truncate && styles.truncate,
+          italic && styles.italic,
+          className
+        ),
+        ...rest
+      }
+    )
+  );
+}
+export {
+  Text
+};
+//# sourceMappingURL=Text.js.map

package/dist/components/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport clsx from \"clsx\";\nimport { Box, type BoxOwnProps } from \"../Box/Box\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport styles from \"./text.module.css\";\n\n// Import types from Box styleParts\ntype FontSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\";\ntype FontWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\ntype TextAlign = \"left\" | \"center\" | \"right\" | \"justify\";\ntype Color =\n  | \"foreground\"\n  | \"foreground-muted\"\n  | \"foreground-subtle\"\n  | \"foreground-inverted\"\n  | \"foreground-inverted-muted\"\n  | \"foreground-inverted-subtle\"\n  | \"accent\"\n  | \"accent-emphasis\"\n  | \"primary\"\n  | \"primary-emphasis\"\n  | \"success\"\n  | \"success-emphasis\"\n  | \"warning\"\n  | \"warning-emphasis\"\n  | \"error\"\n  | \"error-emphasis\"\n  | \"info\"\n  | \"info-emphasis\";\n\nexport type TextOwnProps = Omit<\n  BoxOwnProps,\n  \"fontSize\" | \"fontWeight\" | \"textAlign\" | \"color\"\n> & {\n  size?: FontSize;\n  weight?: FontWeight;\n  align?: TextAlign;\n  color?: Color;\n  truncate?: boolean;\n  italic?: boolean;\n};\n\nexport type TextProps<T extends ElementType = \"span\"> = Polymorphic<\n  T,\n  TextOwnProps\n>;\n\n/**\n * Text - Semantic text component for body copy, labels, captions, etc.\n *\n * Built on top of Box with text-specific conveniences:\n * - Default element: <span> (inline)\n * - Shorthand props: size, weight, align, color\n * - Utility props: truncate (ellipsis), italic\n * - Can be changed to any element via `as` prop\n */\nexport function Text<T extends ElementType = \"span\">({\n  as,\n  size,\n  weight,\n  align,\n  color = \"foreground\",\n  truncate,\n  italic,\n  className,\n  ...rest\n}: TextProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component prop forwarding\n    <Box\n      as={as}\n      fontSize={size}\n      fontWeight={weight}\n      textAlign={align}\n      color={color}\n      className={clsx(\n        truncate && styles.truncate,\n        italic && styles.italic,\n        className\n      )}\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAwDO,SAAS,KAAqC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,WAAW;AAAA,QACX;AAAA,QACA,WAAW;AAAA,UACT,YAAY,OAAO;AAAA,UACnB,UAAU,OAAO;AAAA,UACjB;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA;AAGV;"}

package/dist/components/Text/text.module.css

@@ -0,0 +1,9 @@
+._truncate_1v1ys_1 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+._italic_1v1ys_7 {
+  font-style: italic;
+}

package/dist/components/Text/text.module.css.js

@@ -0,0 +1,12 @@
+const truncate = "_truncate_1v1ys_1";
+const italic = "_italic_1v1ys_7";
+const styles = {
+  truncate,
+  italic
+};
+export {
+  styles as default,
+  italic,
+  truncate
+};
+//# sourceMappingURL=text.module.css.js.map

package/dist/components/Text/text.module.css.js.map

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

package/dist/components/Textarea/Textarea.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./textarea.module.css.js";
+const sizeConfig = {
+  sm: { p: 2, fontSize: "sm", rounded: "sm" },
+  md: { p: 3, fontSize: "md", rounded: "md" },
+  lg: { p: 4, fontSize: "lg", rounded: "md" }
+};
+const resizeClassMap = {
+  none: styles.resizeNone,
+  vertical: styles.resizeVertical,
+  horizontal: styles.resizeHorizontal,
+  both: styles.resizeBoth
+};
+function Textarea({
+  as,
+  size = "md",
+  variant = "outline",
+  disabled = false,
+  isInvalid = false,
+  rows = 3,
+  resize = "vertical",
+  className,
+  ...rest
+}) {
+  const Component = as || "textarea";
+  const sizeProps = sizeConfig[size];
+  const variantStyles = variant === "outline" ? {
+    bg: "transparent",
+    border: "thin",
+    borderColor: "border"
+  } : {
+    bg: "surface",
+    border: "thin",
+    borderColor: "border-muted"
+  };
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: Component,
+        p: sizeProps.p,
+        fontSize: sizeProps.fontSize,
+        rounded: sizeProps.rounded,
+        bg: variantStyles.bg,
+        border: variantStyles.border,
+        borderColor: variantStyles.borderColor,
+        w: "100%",
+        color: "foreground",
+        rows,
+        className: clsx(
+          styles.textarea,
+          isInvalid && styles.invalid,
+          resizeClassMap[resize],
+          className
+        ),
+        disabled,
+        "aria-invalid": isInvalid || void 0,
+        ...rest
+      }
+    )
+  );
+}
+export {
+  Textarea
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport clsx from \"clsx\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport styles from \"./textarea.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type TextareaSize = \"sm\" | \"md\" | \"lg\";\nexport type TextareaVariant = \"outline\" | \"filled\";\nexport type TextareaResize = \"none\" | \"vertical\" | \"horizontal\" | \"both\";\n\nexport type TextareaOwnProps = Omit<\n  BoxOwnProps,\n  \"as\" | \"fontSize\" | \"rounded\" | \"border\" | \"borderColor\" | \"bg\"\n> & {\n  /** Textarea size affecting font size and padding */\n  size?: TextareaSize;\n  /** Visual variant: outline (border) or filled (surface background) */\n  variant?: TextareaVariant;\n  /** Whether the textarea is disabled */\n  disabled?: boolean;\n  /** Whether the textarea is in an invalid state */\n  isInvalid?: boolean;\n  /** Number of visible text rows */\n  rows?: number;\n  /** Resize behavior */\n  resize?: TextareaResize;\n};\n\nexport type TextareaProps<T extends ElementType = \"textarea\"> = Polymorphic<\n  T,\n  TextareaOwnProps\n>;\n\n// ============================================================================\n// Size configurations\n// ============================================================================\n\nconst sizeConfig = {\n  sm: { p: 2, fontSize: \"sm\", rounded: \"sm\" },\n  md: { p: 3, fontSize: \"md\", rounded: \"md\" },\n  lg: { p: 4, fontSize: \"lg\", rounded: \"md\" },\n} as const;\n\n// ============================================================================\n// Resize class map\n// ============================================================================\n\nconst resizeClassMap: Record<TextareaResize, string> = {\n  none: styles.resizeNone,\n  vertical: styles.resizeVertical,\n  horizontal: styles.resizeHorizontal,\n  both: styles.resizeBoth,\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Textarea - Multiline text input component\n *\n * A polymorphic textarea component that provides:\n * - Default element: <textarea>\n * - Sizes: sm, md (default), lg\n * - Variants: outline (default), filled\n * - Disabled and invalid states\n * - Configurable rows and resize behavior\n */\nexport function Textarea<T extends ElementType = \"textarea\">({\n  as,\n  size = \"md\",\n  variant = \"outline\",\n  disabled = false,\n  isInvalid = false,\n  rows = 3,\n  resize = \"vertical\",\n  className,\n  ...rest\n}: TextareaProps<T>) {\n  const Component = as || \"textarea\";\n  const sizeProps = sizeConfig[size];\n\n  // Variant-specific styling\n  const variantStyles =\n    variant === \"outline\"\n      ? {\n          bg: \"transparent\" as const,\n          border: \"thin\" as const,\n          borderColor: \"border\" as const,\n        }\n      : {\n          bg: \"surface\" as const,\n          border: \"thin\" as const,\n          borderColor: \"border-muted\" as const,\n        };\n\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={Component}\n      // Size props\n      p={sizeProps.p}\n      fontSize={sizeProps.fontSize}\n      rounded={sizeProps.rounded}\n      // Variant props\n      bg={variantStyles.bg}\n      border={variantStyles.border}\n      borderColor={variantStyles.borderColor}\n      // Full width by default\n      w=\"100%\"\n      // Colors\n      color=\"foreground\"\n      // Native props\n      rows={rows}\n      // CSS module for states and resize\n      className={clsx(\n        styles.textarea,\n        isInvalid && styles.invalid,\n        resizeClassMap[resize],\n        className\n      )}\n      // Native disabled\n      disabled={disabled}\n      aria-invalid={isInvalid || undefined}\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;AAyCA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,GAAG,GAAG,UAAU,MAAM,SAAS,KAAA;AAAA,EACrC,IAAI,EAAE,GAAG,GAAG,UAAU,MAAM,SAAS,KAAA;AAAA,EACrC,IAAI,EAAE,GAAG,GAAG,UAAU,MAAM,SAAS,KAAA;AACvC;AAMA,MAAM,iBAAiD;AAAA,EACrD,MAAM,OAAO;AAAA,EACb,UAAU,OAAO;AAAA,EACjB,YAAY,OAAO;AAAA,EACnB,MAAM,OAAO;AACf;AAgBO,SAAS,SAA6C;AAAA,EAC3D;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,YAAY,MAAM;AACxB,QAAM,YAAY,WAAW,IAAI;AAGjC,QAAM,gBACJ,YAAY,YACR;AAAA,IACE,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA,IAEf;AAAA,IACE,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,aAAa;AAAA,EAAA;AAGrB;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI;AAAA,QAEJ,GAAG,UAAU;AAAA,QACb,UAAU,UAAU;AAAA,QACpB,SAAS,UAAU;AAAA,QAEnB,IAAI,cAAc;AAAA,QAClB,QAAQ,cAAc;AAAA,QACtB,aAAa,cAAc;AAAA,QAE3B,GAAE;AAAA,QAEF,OAAM;AAAA,QAEN;AAAA,QAEA,WAAW;AAAA,UACT,OAAO;AAAA,UACP,aAAa,OAAO;AAAA,UACpB,eAAe,MAAM;AAAA,UACrB;AAAA,QAAA;AAAA,QAGF;AAAA,QACA,gBAAc,aAAa;AAAA,QAC1B,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA;AAGV;"}

package/dist/components/Textarea/textarea.module.css

@@ -0,0 +1,46 @@
+._textarea_1rmu7_1 {
+  transition-duration: 150ms;
+  transition-property: border-color, background-color, box-shadow;
+  transition-timing-function: ease-in-out;
+}
+
+._textarea_1rmu7_1::placeholder {
+  color: var(--t-color-foreground-subtle);
+}
+
+._textarea_1rmu7_1:focus-visible {
+  outline: none;
+  border-color: var(--t-color-primary-default);
+  box-shadow: 0 0 0 3px var(--t-color-primary-subtle);
+}
+
+._textarea_1rmu7_1:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+._textarea_1rmu7_1._invalid_1rmu7_22 {
+  border-color: var(--t-color-error-default);
+}
+
+._textarea_1rmu7_1._invalid_1rmu7_22:focus-visible {
+  border-color: var(--t-color-error-default);
+  box-shadow: 0 0 0 3px var(--t-color-error-subtle);
+}
+
+/* Resize control */
+._resizeNone_1rmu7_32 {
+  resize: none;
+}
+
+._resizeVertical_1rmu7_36 {
+  resize: vertical;
+}
+
+._resizeHorizontal_1rmu7_40 {
+  resize: horizontal;
+}
+
+._resizeBoth_1rmu7_44 {
+  resize: both;
+}

package/dist/components/Textarea/textarea.module.css.js

@@ -0,0 +1,24 @@
+const textarea = "_textarea_1rmu7_1";
+const invalid = "_invalid_1rmu7_22";
+const resizeNone = "_resizeNone_1rmu7_32";
+const resizeVertical = "_resizeVertical_1rmu7_36";
+const resizeHorizontal = "_resizeHorizontal_1rmu7_40";
+const resizeBoth = "_resizeBoth_1rmu7_44";
+const styles = {
+  textarea,
+  invalid,
+  resizeNone,
+  resizeVertical,
+  resizeHorizontal,
+  resizeBoth
+};
+export {
+  styles as default,
+  invalid,
+  resizeBoth,
+  resizeHorizontal,
+  resizeNone,
+  resizeVertical,
+  textarea
+};
+//# sourceMappingURL=textarea.module.css.js.map

package/dist/components/Textarea/textarea.module.css.js.map

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.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,KAAK,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AAMF;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAiB,EACjB,SAAa,EACb,UAAc,EACd,QAAgB,EAChB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,YAAY,2CA6Hd"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.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,KAAK,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,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;AAMF;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,SAAiB,EACjB,SAAa,EACb,UAAc,EACd,QAAgB,EAChB,MAAM,EAAE,gBAAgB,EACxB,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,GACT,EAAE,YAAY,2CA6Hd"}

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,135 @@
+"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 "./tooltip.module.css.js";
+function Tooltip({
+  label,
+  placement = "top",
+  openDelay = 0,
+  closeDelay = 0,
+  disabled = false,
+  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 tooltipRef = useRef(null);
+  const openTimeoutRef = useRef(null);
+  const closeTimeoutRef = useRef(null);
+  const updatePosition = () => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const gap = 8;
+    let top = 0;
+    let left = 0;
+    switch (placement) {
+      case "top":
+        top = triggerRect.top - tooltipRect.height - gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case "bottom":
+        top = triggerRect.bottom + gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case "left":
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - gap;
+        break;
+      case "right":
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + gap;
+        break;
+    }
+    setPosition({ top: top + window.scrollY, left: left + window.scrollX });
+  };
+  useEffect(() => {
+    if (isOpen) updatePosition();
+  }, [isOpen, placement]);
+  const setOpen = (open) => {
+    if (!isControlled) {
+      setInternalIsOpen(open);
+    }
+    if (open) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  };
+  const handleOpen = () => {
+    if (disabled) return;
+    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    if (openDelay > 0) {
+      openTimeoutRef.current = window.setTimeout(() => setOpen(true), openDelay);
+    } else {
+      setOpen(true);
+    }
+  };
+  const handleClose = () => {
+    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
+    if (closeDelay > 0) {
+      closeTimeoutRef.current = window.setTimeout(
+        () => setOpen(false),
+        closeDelay
+      );
+    } else {
+      setOpen(false);
+    }
+  };
+  useEffect(() => {
+    return () => {
+      if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
+      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "span",
+        ref: triggerRef,
+        display: "inline-block",
+        onMouseEnter: handleOpen,
+        onMouseLeave: handleClose,
+        onFocus: handleOpen,
+        onBlur: handleClose,
+        children
+      }
+    ),
+    isOpen && createPortal(
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          ref: tooltipRef,
+          position: "absolute",
+          px: 2,
+          py: 1,
+          bg: "foreground",
+          color: "foreground-inverted",
+          fontSize: "sm",
+          rounded: "sm",
+          shadow: "md",
+          zIndex: "tooltip",
+          className: clsx(styles.tooltip, styles[placement], className),
+          style: { top: position.top, left: position.left },
+          role: "tooltip",
+          children: label
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.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 \"./tooltip.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport type TooltipProps = {\n  /** Tooltip content */\n  label: ReactNode;\n  /** Placement of tooltip */\n  placement?: TooltipPlacement;\n  /** Delay before showing (ms) */\n  openDelay?: number;\n  /** Delay before hiding (ms) */\n  closeDelay?: number;\n  /** Whether tooltip is disabled */\n  disabled?: boolean;\n  /** Controlled open state */\n  isOpen?: boolean;\n  /** Callback when tooltip opens */\n  onOpen?: () => void;\n  /** Callback when tooltip closes */\n  onClose?: () => void;\n  /** Additional class name */\n  className?: string;\n  /** Trigger element */\n  children: ReactNode;\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Tooltip - Hover-triggered information overlay\n *\n * A tooltip component that:\n * - Shows on hover and focus\n * - Positions relative to trigger element\n * - Supports configurable delays\n * - Supports controlled mode via isOpen/onOpen/onClose\n * - Renders via portal\n */\nexport function Tooltip({\n  label,\n  placement = \"top\",\n  openDelay = 0,\n  closeDelay = 0,\n  disabled = false,\n  isOpen: controlledIsOpen,\n  onOpen,\n  onClose,\n  className,\n  children,\n}: TooltipProps) {\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 tooltipRef = useRef<HTMLDivElement>(null);\n  const openTimeoutRef = useRef<number | null>(null);\n  const closeTimeoutRef = useRef<number | null>(null);\n\n  const updatePosition = () => {\n    if (!triggerRef.current || !tooltipRef.current) return;\n\n    const triggerRect = triggerRef.current.getBoundingClientRect();\n    const tooltipRect = tooltipRef.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 - tooltipRect.height - gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case \"bottom\":\n        top = triggerRect.bottom + gap;\n        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;\n        break;\n      case \"left\":\n        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;\n        left = triggerRect.left - tooltipRect.width - gap;\n        break;\n      case \"right\":\n        top = triggerRect.top + (triggerRect.height - tooltipRect.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  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 handleOpen = () => {\n    if (disabled) return;\n    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);\n\n    if (openDelay > 0) {\n      openTimeoutRef.current = window.setTimeout(() => setOpen(true), openDelay);\n    } else {\n      setOpen(true);\n    }\n  };\n\n  const handleClose = () => {\n    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);\n\n    if (closeDelay > 0) {\n      closeTimeoutRef.current = window.setTimeout(\n        () => setOpen(false),\n        closeDelay\n      );\n    } else {\n      setOpen(false);\n    }\n  };\n\n  useEffect(() => {\n    return () => {\n      if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);\n      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);\n    };\n  }, []);\n\n  return (\n    <>\n      <Box\n        as=\"span\"\n        ref={triggerRef}\n        display=\"inline-block\"\n        onMouseEnter={handleOpen}\n        onMouseLeave={handleClose}\n        onFocus={handleOpen}\n        onBlur={handleClose}\n      >\n        {children}\n      </Box>\n      {isOpen &&\n        createPortal(\n          <Box\n            ref={tooltipRef}\n            position=\"absolute\"\n            px={2}\n            py={1}\n            bg=\"foreground\"\n            color=\"foreground-inverted\"\n            fontSize=\"sm\"\n            rounded=\"sm\"\n            shadow=\"md\"\n            zIndex=\"tooltip\"\n            className={clsx(styles.tooltip, styles[placement], className)}\n            style={{ top: position.top, left: position.left }}\n            role=\"tooltip\"\n          >\n            {label}\n          </Box>,\n          document.body\n        )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Tooltip/tooltip.module.css

@@ -0,0 +1,4 @@
+._tooltip_11r2r_1 {
+  pointer-events: none;
+  white-space: nowrap;
+}

package/dist/components/Tooltip/tooltip.module.css.js

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

package/dist/components/Tooltip/tooltip.module.css.js.map

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

package/dist/components/VStack/VStack.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Stack } from "../Stack/Stack.js";
+function VStack({
+  as,
+  children,
+  ...rest
+}) {
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(Stack, { as: as || "div", direction: "column", ...rest, children })
+  );
+}
+export {
+  VStack
+};
+//# sourceMappingURL=VStack.js.map

package/dist/components/VStack/VStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStack.js","sources":["../../../src/components/VStack/VStack.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Stack, type StackOwnProps } from \"@/components/Stack/Stack\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type VStackOwnProps = Omit<StackOwnProps, \"direction\">;\n\nexport type VStackProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  VStackOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * VStack - Vertical stack component\n *\n * A convenience wrapper around Stack with direction=\"column\".\n * - Default element: <div>\n * - Direction: column (fixed)\n * - Gap: spacing multiplier (0-32)\n * - Align: cross-axis alignment\n * - Justify: main-axis alignment\n * - Wrap: enable flex wrapping\n */\nexport function VStack<T extends ElementType = \"div\">({\n  as,\n  children,\n  ...rest\n}: VStackProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Stack as={as || \"div\"} direction=\"column\" {...rest}>\n      {children}\n    </Stack>\n  );\n}\n"],"names":[],"mappings":";;;AA8BO,SAAS,OAAsC;AAAA,EACpD;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB;AAAA;AAAA,IAEE,oBAAC,SAAM,IAAI,MAAM,OAAO,WAAU,UAAU,GAAG,MAC5C,SAAA,CACH;AAAA;AAEJ;"}

package/dist/fonts.css

@@ -1 +1,23 @@
-@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap";:root{--t-font-family-heading: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--t-font-family-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--t-font-family-mono: "IBM Plex Mono", "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
+/**
+ * Tosui Default Fonts - IBM Plex
+ *
+ * Usage:
+ *   import '@tosui/react/styles.css';
+ *   import '@tosui/react/fonts.css';
+ */
+
+/* IBM Plex Sans - Regular (400) */
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
+
+/* IBM Plex Mono - Regular (400) */
+@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");
+
+/* Override font family variables to use IBM Plex */
+:root {
+  --t-font-family-heading: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --t-font-family-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --t-font-family-mono: "IBM Plex Mono", "SF Mono", Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}