@tosui/react 0.1.0 → 0.1.2

package/dist/components/Card/Card.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./card.module.css.js";
+function Card({
+  shadow = "sm",
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      bg: "surface",
+      border: "thin",
+      borderColor: "border",
+      rounded: "md",
+      overflow: "hidden",
+      shadow,
+      className: clsx(styles.card, className),
+      children
+    }
+  );
+}
+function CardHeader({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      px: 4,
+      py: 3,
+      borderBottom: "thin",
+      borderColor: "border",
+      className: clsx(styles.cardHeader, className),
+      children
+    }
+  );
+}
+function CardBody({ className, children }) {
+  return /* @__PURE__ */ jsx(Box, { p: 4, className: clsx(styles.cardBody, className), children });
+}
+function CardFooter({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      px: 4,
+      py: 3,
+      borderTop: "thin",
+      borderColor: "border",
+      className: clsx(styles.cardFooter, className),
+      children
+    }
+  );
+}
+export {
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader
+};
+//# sourceMappingURL=Card.js.map

package/dist/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import { type ReactNode } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport type { ShadowValue } from \"@/components/Box/shadows/shadows\";\nimport styles from \"./card.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type CardProps = {\n  /** Shadow level */\n  shadow?: ShadowValue;\n  /** Additional class name */\n  className?: string;\n  /** Card content */\n  children?: ReactNode;\n};\n\nexport type CardHeaderProps = {\n  /** Additional class name */\n  className?: string;\n  /** Header content */\n  children?: ReactNode;\n};\n\nexport type CardBodyProps = {\n  /** Additional class name */\n  className?: string;\n  /** Body content */\n  children?: ReactNode;\n};\n\nexport type CardFooterProps = {\n  /** Additional class name */\n  className?: string;\n  /** Footer content */\n  children?: ReactNode;\n};\n\n// ============================================================================\n// Components\n// ============================================================================\n\n/**\n * Card - Content container\n *\n * A flexible content container with:\n * - Surface background with border\n * - Optional shadow elevation\n * - Composable Header/Body/Footer sections\n */\nexport function Card({\n  shadow = \"sm\",\n  className,\n  children,\n}: CardProps) {\n  return (\n    <Box\n      bg=\"surface\"\n      border=\"thin\"\n      borderColor=\"border\"\n      rounded=\"md\"\n      overflow=\"hidden\"\n      shadow={shadow}\n      className={clsx(styles.card, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * CardHeader - Optional header section\n *\n * Use inside Card for header content with bottom border.\n */\nexport function CardHeader({ className, children }: CardHeaderProps) {\n  return (\n    <Box\n      px={4}\n      py={3}\n      borderBottom=\"thin\"\n      borderColor=\"border\"\n      className={clsx(styles.cardHeader, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n\n/**\n * CardBody - Main content section\n *\n * Use inside Card for main content with padding.\n */\nexport function CardBody({ className, children }: CardBodyProps) {\n  return (\n    <Box p={4} className={clsx(styles.cardBody, className)}>\n      {children}\n    </Box>\n  );\n}\n\n/**\n * CardFooter - Optional footer section\n *\n * Use inside Card for footer content with top border.\n */\nexport function CardFooter({ className, children }: CardFooterProps) {\n  return (\n    <Box\n      px={4}\n      py={3}\n      borderTop=\"thin\"\n      borderColor=\"border\"\n      className={clsx(styles.cardFooter, className)}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;;;AAoDO,SAAS,KAAK;AAAA,EACnB,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAc;AACZ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,SAAQ;AAAA,MACR,UAAS;AAAA,MACT;AAAA,MACA,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,MAErC;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAAS,WAAW,EAAE,WAAW,YAA6B;AACnE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,cAAa;AAAA,MACb,aAAY;AAAA,MACZ,WAAW,KAAK,OAAO,YAAY,SAAS;AAAA,MAE3C;AAAA,IAAA;AAAA,EAAA;AAGP;AAOO,SAAS,SAAS,EAAE,WAAW,YAA2B;AAC/D,SACE,oBAAC,KAAA,EAAI,GAAG,GAAG,WAAW,KAAK,OAAO,UAAU,SAAS,GAClD,SAAA,CACH;AAEJ;AAOO,SAAS,WAAW,EAAE,WAAW,YAA6B;AACnE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,WAAU;AAAA,MACV,aAAY;AAAA,MACZ,WAAW,KAAK,OAAO,YAAY,SAAS;AAAA,MAE3C;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Card/card.module.css

@@ -0,0 +1,16 @@
+._card_id7v0_1 {
+  display: flex;
+  flex-direction: column;
+}
+
+._cardHeader_id7v0_6 {
+  flex-shrink: 0;
+}
+
+._cardBody_id7v0_10 {
+  flex: 1;
+}
+
+._cardFooter_id7v0_14 {
+  flex-shrink: 0;
+}

package/dist/components/Card/card.module.css.js

@@ -0,0 +1,18 @@
+const card = "_card_id7v0_1";
+const cardHeader = "_cardHeader_id7v0_6";
+const cardBody = "_cardBody_id7v0_10";
+const cardFooter = "_cardFooter_id7v0_14";
+const styles = {
+  card,
+  cardHeader,
+  cardBody,
+  cardFooter
+};
+export {
+  card,
+  cardBody,
+  cardFooter,
+  cardHeader,
+  styles as default
+};
+//# sourceMappingURL=card.module.css.js.map

package/dist/components/Card/card.module.css.js.map

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

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import clsx from "clsx";
+import { Box } from "../Box/Box.js";
+import styles from "./checkbox.module.css.js";
+const sizeConfig = {
+  sm: { box: 16, fontSize: "sm" },
+  md: { box: 20, fontSize: "md" },
+  lg: { box: 24, fontSize: "lg" }
+};
+const Checkbox = forwardRef(
+  function Checkbox2({
+    size = "md",
+    disabled = false,
+    isInvalid = 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: "checkbox",
+              ref,
+              checked: isChecked,
+              disabled,
+              "aria-invalid": isInvalid || void 0,
+              className: styles.input,
+              ...rest
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Box,
+            {
+              as: "span",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              rounded: "sm",
+              border: "thin",
+              borderColor: isInvalid ? "error" : "border",
+              flexShrink: 0,
+              className: clsx(styles.box, isInvalid && styles.invalid),
+              style: {
+                width: sizeProps.box,
+                height: sizeProps.box
+              }
+            }
+          ),
+          label && /* @__PURE__ */ jsx(Box, { as: "span", fontSize: sizeProps.fontSize, color: "foreground", children: label })
+        ]
+      }
+    );
+  }
+);
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/Checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { type InputHTMLAttributes, forwardRef } from \"react\";\nimport clsx from \"clsx\";\nimport { Box } from \"@/components/Box/Box\";\nimport styles from \"./checkbox.module.css\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type CheckboxSize = \"sm\" | \"md\" | \"lg\";\n\nexport type CheckboxProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"size\" | \"type\"\n> & {\n  /** Checkbox size affecting box dimensions */\n  size?: CheckboxSize;\n  /** Whether the checkbox is disabled */\n  disabled?: boolean;\n  /** Whether the checkbox is in an invalid state */\n  isInvalid?: 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: { box: 16, fontSize: \"sm\" },\n  md: { box: 20, fontSize: \"md\" },\n  lg: { box: 24, fontSize: \"lg\" },\n} as const;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Checkbox - Toggle checkbox component\n *\n * A styled checkbox component that provides:\n * - Sizes: sm, md (default), lg\n * - Custom styled box with checkmark\n * - Optional inline label\n * - Disabled and invalid states\n * - Focus ring styling\n */\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  function Checkbox(\n    {\n      size = \"md\",\n      disabled = false,\n      isInvalid = 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 checkbox */}\n        <input\n          type=\"checkbox\"\n          ref={ref}\n          checked={isChecked}\n          disabled={disabled}\n          aria-invalid={isInvalid || undefined}\n          className={styles.input}\n          {...rest}\n        />\n\n        {/* Custom visual checkbox */}\n        <Box\n          as=\"span\"\n          display=\"inline-flex\"\n          alignItems=\"center\"\n          justifyContent=\"center\"\n          rounded=\"sm\"\n          border=\"thin\"\n          borderColor={isInvalid ? \"error\" : \"border\"}\n          flexShrink={0}\n          className={clsx(styles.box, isInvalid && styles.invalid)}\n          style={{\n            width: sizeProps.box,\n            height: sizeProps.box,\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);\n"],"names":["Checkbox"],"mappings":";;;;;AA+BA,MAAM,aAAa;AAAA,EACjB,IAAI,EAAE,KAAK,IAAI,UAAU,KAAA;AAAA,EACzB,IAAI,EAAE,KAAK,IAAI,UAAU,KAAA;AAAA,EACzB,IAAI,EAAE,KAAK,IAAI,UAAU,KAAA;AAC3B;AAgBO,MAAM,WAAW;AAAA,EACtB,SAASA,UACP;AAAA,IACE,OAAO;AAAA,IACP,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,KACA;AACA,UAAM,YAAY,WAAW,IAAI;AAEjC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,SAAQ;AAAA,QACR,YAAW;AAAA,QACX,KAAK;AAAA,QACL,QAAQ,WAAW,gBAAgB;AAAA,QACnC,SAAS,WAAW,UAAU;AAAA,QAC9B,WAAW,KAAK,OAAO,SAAS,SAAS;AAAA,QACzC;AAAA,QAGA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA,gBAAc,aAAa;AAAA,cAC3B,WAAW,OAAO;AAAA,cACjB,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAIN;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,SAAQ;AAAA,cACR,YAAW;AAAA,cACX,gBAAe;AAAA,cACf,SAAQ;AAAA,cACR,QAAO;AAAA,cACP,aAAa,YAAY,UAAU;AAAA,cACnC,YAAY;AAAA,cACZ,WAAW,KAAK,OAAO,KAAK,aAAa,OAAO,OAAO;AAAA,cACvD,OAAO;AAAA,gBACL,OAAO,UAAU;AAAA,gBACjB,QAAQ,UAAU;AAAA,cAAA;AAAA,YACpB;AAAA,UAAA;AAAA,UAID,SACC,oBAAC,KAAA,EAAI,IAAG,QAAO,UAAU,UAAU,UAAU,OAAM,cAChD,UAAA,MAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/components/Checkbox/checkbox.module.css

@@ -0,0 +1,65 @@
+/* Hidden native checkbox */
+._input_1hfvy_2 {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+}
+
+/* Custom checkbox box */
+._box_1hfvy_12 {
+  transition-duration: 150ms;
+  transition-property: border-color, background-color, box-shadow;
+  transition-timing-function: ease-in-out;
+  position: relative;
+}
+
+/* Checkmark icon (hidden by default) */
+._box_1hfvy_12::before {
+  content: "";
+  position: absolute;
+  display: none;
+  width: 40%;
+  height: 60%;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg) translate(-10%, -10%);
+}
+
+/* Focus ring when input is focused */
+._input_1hfvy_2:focus-visible ~ ._box_1hfvy_12 {
+  border-color: var(--t-color-primary-default);
+  box-shadow: 0 0 0 3px var(--t-color-primary-subtle);
+}
+
+/* Checked state */
+._input_1hfvy_2:checked ~ ._box_1hfvy_12 {
+  background-color: var(--t-color-primary-default);
+  border-color: var(--t-color-primary-default);
+}
+
+._input_1hfvy_2:checked ~ ._box_1hfvy_12::before {
+  display: block;
+}
+
+/* Invalid state */
+._box_1hfvy_12._invalid_1hfvy_48 {
+  border-color: var(--t-color-error-default);
+}
+
+._input_1hfvy_2:focus-visible ~ ._box_1hfvy_12._invalid_1hfvy_48 {
+  border-color: var(--t-color-error-default);
+  box-shadow: 0 0 0 3px var(--t-color-error-subtle);
+}
+
+._input_1hfvy_2:checked ~ ._box_1hfvy_12._invalid_1hfvy_48 {
+  background-color: var(--t-color-error-default);
+  border-color: var(--t-color-error-default);
+}
+
+/* Disabled state (handled via opacity on wrapper) */
+._input_1hfvy_2:disabled ~ ._box_1hfvy_12 {
+  cursor: not-allowed;
+}

package/dist/components/Checkbox/checkbox.module.css.js

@@ -0,0 +1,15 @@
+const input = "_input_1hfvy_2";
+const box = "_box_1hfvy_12";
+const invalid = "_invalid_1hfvy_48";
+const styles = {
+  input,
+  box,
+  invalid
+};
+export {
+  box,
+  styles as default,
+  input,
+  invalid
+};
+//# sourceMappingURL=checkbox.module.css.js.map

package/dist/components/Checkbox/checkbox.module.css.js.map

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

package/dist/components/Code/Code.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "../Box/Box.js";
+function Code({
+  as,
+  size,
+  color,
+  variant = "plain",
+  ...rest
+}) {
+  const isSubtle = variant === "subtle";
+  return (
+    // @ts-expect-error - Polymorphic component prop forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: as || "code",
+        fontSize: size,
+        fontFamily: "mono",
+        color,
+        bg: isSubtle ? "surface" : void 0,
+        rounded: isSubtle ? "sm" : void 0,
+        px: isSubtle ? 1 : void 0,
+        ...rest
+      }
+    )
+  );
+}
+export {
+  Code
+};
+//# sourceMappingURL=Code.js.map

package/dist/components/Code/Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","sources":["../../../src/components/Code/Code.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { Box, type BoxOwnProps } from \"../Box/Box\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\n\ntype FontSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\" | \"5xl\";\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 CodeVariant = \"plain\" | \"subtle\";\n\nexport type CodeOwnProps = Omit<\n  BoxOwnProps,\n  \"fontSize\" | \"fontFamily\" | \"color\" | \"bg\" | \"rounded\" | \"px\"\n> & {\n  /** Font size */\n  size?: FontSize;\n  /** Text color */\n  color?: Color;\n  /** Visual variant: plain (no background) or subtle (surface background) */\n  variant?: CodeVariant;\n};\n\nexport type CodeProps<T extends ElementType = \"code\"> = Polymorphic<\n  T,\n  CodeOwnProps\n>;\n\n/**\n * Code - Inline code styling component\n *\n * Built on top of Box with code-specific conveniences:\n * - Default element: <code>\n * - Always uses monospace font family\n * - Variants: plain (no background) or subtle (surface background with rounded corners)\n * - Can be changed to any element via `as` prop\n */\nexport function Code<T extends ElementType = \"code\">({\n  as,\n  size,\n  color,\n  variant = \"plain\",\n  ...rest\n}: CodeProps<T>) {\n  const isSubtle = variant === \"subtle\";\n\n  return (\n    // @ts-expect-error - Polymorphic component prop forwarding\n    <Box\n      as={as || \"code\"}\n      fontSize={size}\n      fontFamily=\"mono\"\n      color={color}\n      bg={isSubtle ? \"surface\" : undefined}\n      rounded={isSubtle ? \"sm\" : undefined}\n      px={isSubtle ? 1 : undefined}\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAqDO,SAAS,KAAqC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAAiB;AACf,QAAM,WAAW,YAAY;AAE7B;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,UAAU;AAAA,QACV,YAAW;AAAA,QACX;AAAA,QACA,IAAI,WAAW,YAAY;AAAA,QAC3B,SAAS,WAAW,OAAO;AAAA,QAC3B,IAAI,WAAW,IAAI;AAAA,QAClB,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA;AAGV;"}

package/dist/components/Container/Container.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "../Box/Box.js";
+const SIZE_MAP = {
+  sm: "640px",
+  md: "768px",
+  lg: "1024px",
+  xl: "1280px",
+  "2xl": "1536px",
+  full: "100%"
+};
+function Container({
+  as,
+  size = "lg",
+  centerContent = false,
+  px = 4,
+  children,
+  ...rest
+}) {
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: as || "div",
+        w: "100%",
+        maxW: SIZE_MAP[size],
+        mx: "auto",
+        px,
+        ...centerContent && {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center"
+        },
+        ...rest,
+        children
+      }
+    )
+  );
+}
+export {
+  Container
+};
+//# sourceMappingURL=Container.js.map

package/dist/components/Container/Container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.js","sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Container size preset */\nexport type ContainerSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"full\";\n\nexport type ContainerOwnProps = Omit<BoxOwnProps, \"maxW\" | \"mx\"> & {\n  /** Max-width preset: sm=640px, md=768px, lg=1024px, xl=1280px, 2xl=1536px, full=100% (default: lg) */\n  size?: ContainerSize;\n  /** Center children using flexbox (default: false) */\n  centerContent?: boolean;\n  /** Horizontal padding (default: 4 = 16px) */\n  px?: BoxOwnProps[\"px\"];\n};\n\nexport type ContainerProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  ContainerOwnProps\n>;\n\n// ============================================================================\n// Config\n// ============================================================================\n\nconst SIZE_MAP: Record<ContainerSize, string> = {\n  sm: \"640px\",\n  md: \"768px\",\n  lg: \"1024px\",\n  xl: \"1280px\",\n  \"2xl\": \"1536px\",\n  full: \"100%\",\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Container - Max-width centered content wrapper\n *\n * A polymorphic container for constraining content width:\n * - Default element: <div>\n * - Size presets: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px), full (100%)\n * - Default: lg (1024px max-width)\n * - Centered horizontally with mx=\"auto\"\n * - Optional centerContent to center children vertically with flex\n */\nexport function Container<T extends ElementType = \"div\">({\n  as,\n  size = \"lg\",\n  centerContent = false,\n  px = 4,\n  children,\n  ...rest\n}: ContainerProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      w=\"100%\"\n      maxW={SIZE_MAP[size]}\n      mx=\"auto\"\n      px={px}\n      {...(centerContent && {\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n      })}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AA6BA,MAAM,WAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,MAAM;AACR;AAgBO,SAAS,UAAyC;AAAA,EACvD;AAAA,EACA,OAAO;AAAA,EACP,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,GAAsB;AACpB;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,GAAE;AAAA,QACF,MAAM,SAAS,IAAI;AAAA,QACnB,IAAG;AAAA,QACH;AAAA,QACC,GAAI,iBAAiB;AAAA,UACpB,SAAS;AAAA,UACT,eAAe;AAAA,UACf,YAAY;AAAA,QAAA;AAAA,QAEb,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}

package/dist/components/Divider/Divider.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "../Box/Box.js";
+const COLOR_MAP = {
+  border: "var(--t-color-border)",
+  "border-muted": "var(--t-color-border-muted)",
+  primary: "var(--t-color-primary-default)",
+  accent: "var(--t-color-accent-default)",
+  success: "var(--t-color-success-default)",
+  warning: "var(--t-color-warning-default)",
+  error: "var(--t-color-error-default)",
+  info: "var(--t-color-info-default)"
+};
+function Divider({
+  as,
+  orientation = "horizontal",
+  color = "border-muted",
+  thickness = 1,
+  style,
+  ...rest
+}) {
+  const isHorizontal = orientation === "horizontal";
+  const defaultElement = isHorizontal ? "hr" : "div";
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: as || defaultElement,
+        role: "separator",
+        "aria-orientation": orientation,
+        w: isHorizontal ? "100%" : void 0,
+        h: isHorizontal ? void 0 : "100%",
+        style: {
+          backgroundColor: COLOR_MAP[color],
+          ...isHorizontal ? { height: `${thickness}px` } : { width: `${thickness}px` },
+          border: "none",
+          ...style
+        },
+        ...rest
+      }
+    )
+  );
+}
+export {
+  Divider
+};
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Divider color using semantic border color tokens */\nexport type DividerColor =\n  | \"border\"\n  | \"border-muted\"\n  | \"primary\"\n  | \"accent\"\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\";\n\nexport type DividerOwnProps = Omit<BoxOwnProps, \"w\" | \"h\" | \"bg\" | \"color\"> & {\n  /** Divider orientation (default: \"horizontal\") */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Divider color token (default: \"border-muted\") */\n  color?: DividerColor;\n  /** Divider thickness in pixels 1-4 (default: 1) */\n  thickness?: 1 | 2 | 3 | 4;\n};\n\nexport type DividerProps<T extends ElementType = \"hr\"> = Polymorphic<\n  T,\n  DividerOwnProps\n>;\n\n// ============================================================================\n// Config\n// ============================================================================\n\nconst COLOR_MAP: Record<DividerColor, string> = {\n  border: \"var(--t-color-border)\",\n  \"border-muted\": \"var(--t-color-border-muted)\",\n  primary: \"var(--t-color-primary-default)\",\n  accent: \"var(--t-color-accent-default)\",\n  success: \"var(--t-color-success-default)\",\n  warning: \"var(--t-color-warning-default)\",\n  error: \"var(--t-color-error-default)\",\n  info: \"var(--t-color-info-default)\",\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Divider - Visual separator between content sections\n *\n * A polymorphic divider component that provides:\n * - Default element: <hr> for horizontal, <div> for vertical\n * - Orientations: horizontal (default), vertical\n * - Customizable color and thickness\n * - Proper accessibility attributes (role=\"separator\", aria-orientation)\n */\nexport function Divider<T extends ElementType = \"hr\">({\n  as,\n  orientation = \"horizontal\",\n  color = \"border-muted\",\n  thickness = 1,\n  style,\n  ...rest\n}: DividerProps<T>) {\n  const isHorizontal = orientation === \"horizontal\";\n  const defaultElement = isHorizontal ? \"hr\" : \"div\";\n\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || defaultElement}\n      role=\"separator\"\n      aria-orientation={orientation}\n      w={isHorizontal ? \"100%\" : undefined}\n      h={isHorizontal ? undefined : \"100%\"}\n      style={{\n        backgroundColor: COLOR_MAP[color],\n        ...(isHorizontal\n          ? { height: `${thickness}px` }\n          : { width: `${thickness}px` }),\n        border: \"none\",\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n}\n"],"names":[],"mappings":";;;AAqCA,MAAM,YAA0C;AAAA,EAC9C,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR;AAeO,SAAS,QAAsC;AAAA,EACpD;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,eAAe,gBAAgB;AACrC,QAAM,iBAAiB,eAAe,OAAO;AAE7C;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,MAAK;AAAA,QACL,oBAAkB;AAAA,QAClB,GAAG,eAAe,SAAS;AAAA,QAC3B,GAAG,eAAe,SAAY;AAAA,QAC9B,OAAO;AAAA,UACL,iBAAiB,UAAU,KAAK;AAAA,UAChC,GAAI,eACA,EAAE,QAAQ,GAAG,SAAS,KAAA,IACtB,EAAE,OAAO,GAAG,SAAS,KAAA;AAAA,UACzB,QAAQ;AAAA,UACR,GAAG;AAAA,QAAA;AAAA,QAEJ,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA;AAGV;"}

package/dist/components/Flex/Flex.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "../Box/Box.js";
+function Flex({
+  as,
+  direction,
+  wrap,
+  justify,
+  align,
+  alignContent,
+  gap,
+  gapRow,
+  gapColumn,
+  basis,
+  grow,
+  shrink,
+  alignSelf,
+  children,
+  ...rest
+}) {
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: as || "div",
+        display: "flex",
+        flexDirection: direction,
+        flexWrap: wrap,
+        justifyContent: justify,
+        alignItems: align,
+        gap,
+        gapRow,
+        gapColumn,
+        flexBasis: basis,
+        flexGrow: grow,
+        flexShrink: shrink,
+        alignSelf,
+        ...rest,
+        children
+      }
+    )
+  );
+}
+export {
+  Flex
+};
+//# sourceMappingURL=Flex.js.map

package/dist/components/Flex/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type {\n  FlexDirectionValue,\n  JustifyContentValue,\n  AlignItemsValue,\n  AlignSelfValue,\n  FlexWrapValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type FlexOwnProps = Omit<\n  BoxOwnProps,\n  | \"display\"\n  | \"flexDirection\"\n  | \"justifyContent\"\n  | \"alignItems\"\n  | \"alignSelf\"\n  | \"flexWrap\"\n  | \"gap\"\n  | \"gapRow\"\n  | \"gapColumn\"\n  | \"flexBasis\"\n  | \"flexGrow\"\n  | \"flexShrink\"\n> & {\n  /** Flex direction: row (default), column, row-reverse, column-reverse */\n  direction?: FlexDirectionValue;\n  /** Flex wrapping: nowrap (default), wrap, wrap-reverse */\n  wrap?: FlexWrapValue;\n  /** Justify content along the main axis */\n  justify?: JustifyContentValue;\n  /** Align items along the cross axis */\n  align?: AlignItemsValue;\n  /** Align content when there are multiple lines */\n  alignContent?: JustifyContentValue;\n  /** Gap between children (0-32 spacing multiplier or string) */\n  gap?: SpacingValue;\n  /** Row gap between children (0-32 spacing multiplier or string) */\n  gapRow?: SpacingValue;\n  /** Column gap between children (0-32 spacing multiplier or string) */\n  gapColumn?: SpacingValue;\n  /** Flex basis of the container */\n  basis?: string;\n  /** Flex grow of the container */\n  grow?: number;\n  /** Flex shrink of the container */\n  shrink?: number;\n  /** Align self within parent flex container */\n  alignSelf?: AlignSelfValue;\n};\n\nexport type FlexProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  FlexOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Flex - Explicit flexbox layout component\n *\n * A polymorphic flex container with shorthand props:\n * - Default element: <div>\n * - Always renders with display=\"flex\"\n * - direction -> flexDirection (default: row)\n * - wrap -> flexWrap\n * - justify -> justifyContent\n * - align -> alignItems\n * - gap, gapRow, gapColumn\n * - basis, grow, shrink -> flexBasis, flexGrow, flexShrink\n */\nexport function Flex<T extends ElementType = \"div\">({\n  as,\n  direction,\n  wrap,\n  justify,\n  align,\n  alignContent,\n  gap,\n  gapRow,\n  gapColumn,\n  basis,\n  grow,\n  shrink,\n  alignSelf,\n  children,\n  ...rest\n}: FlexProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"flex\"\n      flexDirection={direction}\n      flexWrap={wrap}\n      justifyContent={justify}\n      alignItems={align}\n      gap={gap}\n      gapRow={gapRow}\n      gapColumn={gapColumn}\n      flexBasis={basis}\n      flexGrow={grow}\n      flexShrink={shrink}\n      alignSelf={alignSelf}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AA+EO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,eAAe;AAAA,QACf,UAAU;AAAA,QACV,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,UAAU;AAAA,QACV,YAAY;AAAA,QACZ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}

package/dist/components/FormField/FormField.js

@@ -0,0 +1,52 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, Children, isValidElement, cloneElement } from "react";
+import { Box } from "../Box/Box.js";
+import { Label } from "../Label/Label.js";
+import { VStack } from "../VStack/VStack.js";
+function FormField({
+  label,
+  helperText,
+  errorMessage,
+  isRequired = false,
+  isInvalid = false,
+  disabled = false,
+  id: providedId,
+  children
+}) {
+  const generatedId = useId();
+  const fieldId = providedId || generatedId;
+  const helperId = `${fieldId}-helper`;
+  const showError = isInvalid && errorMessage;
+  const message = showError ? errorMessage : helperText;
+  const hasMessage = Boolean(message);
+  const enhancedChild = Children.map(children, (child) => {
+    if (!isValidElement(child)) {
+      return child;
+    }
+    return cloneElement(child, {
+      id: fieldId,
+      isInvalid,
+      disabled,
+      "aria-describedby": hasMessage ? helperId : void 0,
+      "aria-invalid": isInvalid || void 0
+    });
+  });
+  return /* @__PURE__ */ jsxs(VStack, { gap: 1, align: "stretch", children: [
+    /* @__PURE__ */ jsx(Label, { htmlFor: fieldId, required: isRequired, children: label }),
+    enhancedChild,
+    hasMessage && /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "span",
+        id: helperId,
+        fontSize: "sm",
+        color: showError ? "error" : "foreground-muted",
+        children: message
+      }
+    )
+  ] });
+}
+export {
+  FormField
+};
+//# sourceMappingURL=FormField.js.map

package/dist/components/FormField/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sources":["../../../src/components/FormField/FormField.tsx"],"sourcesContent":["import { type ReactNode, useId, cloneElement, isValidElement, Children } from \"react\";\nimport { Box } from \"@/components/Box/Box\";\nimport { Label } from \"@/components/Label/Label\";\nimport { VStack } from \"@/components/VStack/VStack\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type FormFieldProps = {\n  /** Label text displayed above the control */\n  label: string;\n  /** Helper text displayed below the control (hidden when isInvalid) */\n  helperText?: string;\n  /** Error message displayed when isInvalid (replaces helperText) */\n  errorMessage?: string;\n  /** Whether the field is required (shows asterisk) */\n  isRequired?: boolean;\n  /** Whether the field is in an invalid state */\n  isInvalid?: boolean;\n  /** Whether the field is disabled */\n  disabled?: boolean;\n  /** Custom ID for the field (auto-generated if not provided) */\n  id?: string;\n  /** The form control to render */\n  children: ReactNode;\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * FormField - Form field wrapper component\n *\n * A composition component that provides:\n * - Label with required indicator\n * - Helper text for descriptions\n * - Error message for validation\n * - State propagation to child controls (isInvalid, disabled)\n * - Accessible aria-describedby linking\n */\nexport function FormField({\n  label,\n  helperText,\n  errorMessage,\n  isRequired = false,\n  isInvalid = false,\n  disabled = false,\n  id: providedId,\n  children,\n}: FormFieldProps) {\n  // Generate ID for accessibility linking\n  const generatedId = useId();\n  const fieldId = providedId || generatedId;\n  const helperId = `${fieldId}-helper`;\n\n  // Determine which message to show\n  const showError = isInvalid && errorMessage;\n  const message = showError ? errorMessage : helperText;\n  const hasMessage = Boolean(message);\n\n  // Clone child to pass props and aria attributes\n  const enhancedChild = Children.map(children, (child) => {\n    if (!isValidElement(child)) {\n      return child;\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    return cloneElement(child as React.ReactElement<any>, {\n      id: fieldId,\n      isInvalid,\n      disabled,\n      \"aria-describedby\": hasMessage ? helperId : undefined,\n      \"aria-invalid\": isInvalid || undefined,\n    });\n  });\n\n  return (\n    <VStack gap={1} align=\"stretch\">\n      {/* Label */}\n      <Label htmlFor={fieldId} required={isRequired}>\n        {label}\n      </Label>\n\n      {/* Form control */}\n      {enhancedChild}\n\n      {/* Helper text or error message */}\n      {hasMessage && (\n        <Box\n          as=\"span\"\n          id={helperId}\n          fontSize=\"sm\"\n          color={showError ? \"error\" : \"foreground-muted\"}\n        >\n          {message}\n        </Box>\n      )}\n    </VStack>\n  );\n}\n"],"names":[],"mappings":";;;;;AA0CO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,IAAI;AAAA,EACJ;AACF,GAAmB;AAEjB,QAAM,cAAc,MAAA;AACpB,QAAM,UAAU,cAAc;AAC9B,QAAM,WAAW,GAAG,OAAO;AAG3B,QAAM,YAAY,aAAa;AAC/B,QAAM,UAAU,YAAY,eAAe;AAC3C,QAAM,aAAa,QAAQ,OAAO;AAGlC,QAAM,gBAAgB,SAAS,IAAI,UAAU,CAAC,UAAU;AACtD,QAAI,CAAC,eAAe,KAAK,GAAG;AAC1B,aAAO;AAAA,IACT;AAGA,WAAO,aAAa,OAAkC;AAAA,MACpD,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA,oBAAoB,aAAa,WAAW;AAAA,MAC5C,gBAAgB,aAAa;AAAA,IAAA,CAC9B;AAAA,EACH,CAAC;AAED,SACE,qBAAC,QAAA,EAAO,KAAK,GAAG,OAAM,WAEpB,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAM,SAAS,SAAS,UAAU,YAChC,UAAA,OACH;AAAA,IAGC;AAAA,IAGA,cACC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAG;AAAA,QACH,IAAI;AAAA,QACJ,UAAS;AAAA,QACT,OAAO,YAAY,UAAU;AAAA,QAE5B,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GAEJ;AAEJ;"}

package/dist/components/Grid/Grid.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Box } from "../Box/Box.js";
+function Grid({
+  as,
+  columns,
+  rows,
+  gap,
+  gapRow,
+  gapColumn,
+  justify,
+  align,
+  justifyContent,
+  alignContent,
+  children,
+  ...rest
+}) {
+  return (
+    // @ts-expect-error - Polymorphic component type forwarding
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: as || "div",
+        display: "grid",
+        gridTemplateColumns: columns,
+        gridTemplateRows: rows,
+        gap,
+        gapRow,
+        gapColumn,
+        justifyContent: justify ?? justifyContent,
+        alignItems: align ?? alignContent,
+        ...rest,
+        children
+      }
+    )
+  );
+}
+export {
+  Grid
+};
+//# sourceMappingURL=Grid.js.map

package/dist/components/Grid/Grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["import { type ElementType } from \"react\";\nimport { type Polymorphic } from \"@/types/Polymorphic\";\nimport { Box, type BoxOwnProps } from \"@/components/Box/Box\";\nimport type {\n  JustifyContentValue,\n  AlignItemsValue,\n  SpacingValue,\n} from \"@/components/Box/flexbox/flexbox\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type GridOwnProps = Omit<\n  BoxOwnProps,\n  | \"display\"\n  | \"gridTemplateColumns\"\n  | \"gridTemplateRows\"\n  | \"gap\"\n  | \"gapRow\"\n  | \"gapColumn\"\n  | \"justifyContent\"\n  | \"alignItems\"\n> & {\n  /** Grid template columns (CSS value) */\n  columns?: string;\n  /** Grid template rows (CSS value) */\n  rows?: string;\n  /** Gap between grid items (0-32 spacing multiplier or string) */\n  gap?: SpacingValue;\n  /** Row gap between grid items (0-32 spacing multiplier or string) */\n  gapRow?: SpacingValue;\n  /** Column gap between grid items (0-32 spacing multiplier or string) */\n  gapColumn?: SpacingValue;\n  /** Justify items along the inline (row) axis */\n  justify?: JustifyContentValue;\n  /** Align items along the block (column) axis */\n  align?: AlignItemsValue;\n  /** Justify content (distribute rows) */\n  justifyContent?: JustifyContentValue;\n  /** Align content (distribute columns) */\n  alignContent?: JustifyContentValue;\n};\n\nexport type GridProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  GridOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Grid - Explicit CSS Grid layout component\n *\n * A polymorphic grid container with shorthand props:\n * - Default element: <div>\n * - Always renders with display=\"grid\"\n * - columns -> gridTemplateColumns\n * - rows -> gridTemplateRows\n * - gap, gapRow, gapColumn\n * - justify -> justifyItems (alignment within cells)\n * - align -> alignItems (alignment within cells)\n * - justifyContent, alignContent (distribution of grid tracks)\n */\nexport function Grid<T extends ElementType = \"div\">({\n  as,\n  columns,\n  rows,\n  gap,\n  gapRow,\n  gapColumn,\n  justify,\n  align,\n  justifyContent,\n  alignContent,\n  children,\n  ...rest\n}: GridProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Box\n      as={as || \"div\"}\n      display=\"grid\"\n      gridTemplateColumns={columns}\n      gridTemplateRows={rows}\n      gap={gap}\n      gapRow={gapRow}\n      gapColumn={gapColumn}\n      justifyContent={justify ?? justifyContent}\n      alignItems={align ?? alignContent}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n}\n"],"names":[],"mappings":";;;AAkEO,SAAS,KAAoC;AAAA,EAClD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,qBAAqB;AAAA,QACrB,kBAAkB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB,WAAW;AAAA,QAC3B,YAAY,SAAS;AAAA,QACpB,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA;AAGP;"}

package/dist/components/HStack/HStack.js

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

package/dist/components/HStack/HStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HStack.js","sources":["../../../src/components/HStack/HStack.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 HStackOwnProps = Omit<StackOwnProps, \"direction\">;\n\nexport type HStackProps<T extends ElementType = \"div\"> = Polymorphic<\n  T,\n  HStackOwnProps\n>;\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * HStack - Horizontal stack component\n *\n * A convenience wrapper around Stack with direction=\"row\".\n * - Default element: <div>\n * - Direction: row (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 HStack<T extends ElementType = \"div\">({\n  as,\n  children,\n  ...rest\n}: HStackProps<T>) {\n  return (\n    // @ts-expect-error - Polymorphic component type forwarding\n    <Stack as={as || \"div\"} direction=\"row\" {...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,OAAO,GAAG,MACzC,SAAA,CACH;AAAA;AAEJ;"}