@becket-ui/react 0.1.0

package/dist/components/SimpleGrid.js

@@ -0,0 +1,98 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { css } from "@becket-ui/tokens/css";
+import { grid } from "@becket-ui/tokens/patterns";
+import { normalizeGapValue, normalizeResponsiveValue } from "../helpers/responsive";
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+function columnCountToTemplate(count) {
+  return `repeat(${count}, minmax(0, 1fr))`;
+}
+function resolveGridTemplateColumns(columns) {
+  const resolved = normalizeResponsiveValue(columns);
+  if (typeof resolved === "number") {
+    return columnCountToTemplate(resolved);
+  }
+  if (Array.isArray(resolved)) {
+    return resolved.map((value) => value == null ? void 0 : columnCountToTemplate(value));
+  }
+  if (typeof resolved === "object" && resolved !== null) {
+    const out = {};
+    for (const [breakpoint, value] of Object.entries(resolved)) {
+      if (typeof value === "number") out[breakpoint] = columnCountToTemplate(value);
+    }
+    return out;
+  }
+  return void 0;
+}
+function buildGridStyles({
+  columns,
+  minChildWidth,
+  gap = "md",
+  rowGap,
+  columnGap
+}) {
+  if (columns != null) {
+    return {
+      display: "grid",
+      gridTemplateColumns: resolveGridTemplateColumns(columns),
+      gap,
+      ...rowGap != null && { rowGap },
+      ...columnGap != null && { columnGap }
+    };
+  }
+  return grid.raw({
+    ...minChildWidth != null && { minChildWidth },
+    gap,
+    ...rowGap != null && { rowGap },
+    ...columnGap != null && { columnGap }
+  });
+}
+const SimpleGrid = forwardRef(
+  ({
+    columns,
+    minChildWidth,
+    gap = "md",
+    rowGap,
+    columnGap,
+    as: Component = "div",
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const recipeClassName = css(
+      buildGridStyles({
+        columns,
+        minChildWidth,
+        gap: normalizeGapValue(gap),
+        rowGap: normalizeGapValue(rowGap),
+        columnGap: normalizeGapValue(columnGap)
+      }),
+      {
+        width: "100%",
+        justifyItems: "stretch",
+        alignItems: "stretch",
+        "& > *": {
+          minWidth: "0",
+          width: "100%",
+          maxWidth: "100%"
+        }
+      }
+    );
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        ...props,
+        style,
+        className: mergeClassName(recipeClassName, className)
+      }
+    );
+  }
+);
+SimpleGrid.displayName = "SimpleGrid";
+export {
+  SimpleGrid
+};
+//# sourceMappingURL=SimpleGrid.js.map

package/dist/components/SimpleGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/SimpleGrid.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementType } from 'react';\nimport { css } from '@becket-ui/tokens/css';\nimport { grid } from '@becket-ui/tokens/patterns';\nimport type { SystemStyleObject } from '@becket-ui/tokens/types';\n\nimport { normalizeGapValue, normalizeResponsiveValue, type GapValue, type ResponsiveValue } from '../helpers/responsive';\n\ntype GridOptions = NonNullable<Parameters<typeof grid>[0]>;\ntype ColumnCount = NonNullable<GridOptions['columns']>;\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nfunction columnCountToTemplate(count: number): string {\n  return `repeat(${count}, minmax(0, 1fr))`;\n}\n\nfunction resolveGridTemplateColumns(columns: ColumnCount): SystemStyleObject['gridTemplateColumns'] {\n  const resolved = normalizeResponsiveValue(columns) as ColumnCount;\n  if (typeof resolved === 'number') {\n    return columnCountToTemplate(resolved);\n  }\n  if (Array.isArray(resolved)) {\n    return resolved.map((value) => (value == null ? undefined : columnCountToTemplate(value)));\n  }\n  if (typeof resolved === 'object' && resolved !== null) {\n    const out: Record<string, string> = {};\n    for (const [breakpoint, value] of Object.entries(resolved)) {\n      if (typeof value === 'number') out[breakpoint] = columnCountToTemplate(value);\n    }\n    return out;\n  }\n  return undefined;\n}\n\nfunction buildGridStyles({\n  columns,\n  minChildWidth,\n  gap = 'md',\n  rowGap,\n  columnGap,\n}: {\n  columns?: GridOptions['columns'];\n  minChildWidth?: GridOptions['minChildWidth'];\n  gap?: GridOptions['gap'];\n  rowGap?: GridOptions['rowGap'];\n  columnGap?: GridOptions['columnGap'];\n}): SystemStyleObject {\n  if (columns != null) {\n    return {\n      display: 'grid',\n      gridTemplateColumns: resolveGridTemplateColumns(columns),\n      gap,\n      ...(rowGap != null && { rowGap }),\n      ...(columnGap != null && { columnGap }),\n    };\n  }\n\n  return grid.raw({\n    ...(minChildWidth != null && { minChildWidth }),\n    gap,\n    ...(rowGap != null && { rowGap }),\n    ...(columnGap != null && { columnGap }),\n  });\n}\n\nexport type SimpleGridProps = ComponentPropsWithoutRef<'div'> & {\n  columns?: ResponsiveValue<number> | GridOptions['columns'];\n  minChildWidth?: GridOptions['minChildWidth'];\n  gap?: GapValue;\n  rowGap?: GapValue;\n  columnGap?: GapValue;\n  as?: ElementType;\n};\n\n/**\n * Responsive CSS grid layout. Pass `columns` (number or breakpoint object)\n * or `minChildWidth` for auto-fit tracks. App-specific presets belong in consumers.\n */\nexport const SimpleGrid = forwardRef<HTMLDivElement, SimpleGridProps>(\n  (\n    {\n      columns,\n      minChildWidth,\n      gap = 'md',\n      rowGap,\n      columnGap,\n      as: Component = 'div',\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const recipeClassName = css(\n      buildGridStyles({\n        columns,\n        minChildWidth,\n        gap: normalizeGapValue(gap) as GridOptions['gap'],\n        rowGap: normalizeGapValue(rowGap) as GridOptions['rowGap'],\n        columnGap: normalizeGapValue(columnGap) as GridOptions['columnGap'],\n      }),\n      {\n        width: '100%',\n        justifyItems: 'stretch',\n        alignItems: 'stretch',\n        '& > *': {\n          minWidth: '0',\n          width: '100%',\n          maxWidth: '100%',\n        },\n      },\n    );\n\n    return (\n      <Component\n        ref={ref}\n        {...props}\n        style={style}\n        className={mergeClassName(recipeClassName, className)}\n      />\n    );\n  },\n);\n\nSimpleGrid.displayName = 'SimpleGrid';\n"],"mappings":"AAoHM;AApHN,SAAS,kBAAmE;AAC5E,SAAS,WAAW;AACpB,SAAS,YAAY;AAGrB,SAAS,mBAAmB,gCAAqE;AAKjG,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAEA,SAAS,sBAAsB,OAAuB;AACpD,SAAO,UAAU,KAAK;AACxB;AAEA,SAAS,2BAA2B,SAAgE;AAClG,QAAM,WAAW,yBAAyB,OAAO;AACjD,MAAI,OAAO,aAAa,UAAU;AAChC,WAAO,sBAAsB,QAAQ;AAAA,EACvC;AACA,MAAI,MAAM,QAAQ,QAAQ,GAAG;AAC3B,WAAO,SAAS,IAAI,CAAC,UAAW,SAAS,OAAO,SAAY,sBAAsB,KAAK,CAAE;AAAA,EAC3F;AACA,MAAI,OAAO,aAAa,YAAY,aAAa,MAAM;AACrD,UAAM,MAA8B,CAAC;AACrC,eAAW,CAAC,YAAY,KAAK,KAAK,OAAO,QAAQ,QAAQ,GAAG;AAC1D,UAAI,OAAO,UAAU,SAAU,KAAI,UAAU,IAAI,sBAAsB,KAAK;AAAA,IAC9E;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AACF,GAMsB;AACpB,MAAI,WAAW,MAAM;AACnB,WAAO;AAAA,MACL,SAAS;AAAA,MACT,qBAAqB,2BAA2B,OAAO;AAAA,MACvD;AAAA,MACA,GAAI,UAAU,QAAQ,EAAE,OAAO;AAAA,MAC/B,GAAI,aAAa,QAAQ,EAAE,UAAU;AAAA,IACvC;AAAA,EACF;AAEA,SAAO,KAAK,IAAI;AAAA,IACd,GAAI,iBAAiB,QAAQ,EAAE,cAAc;AAAA,IAC7C;AAAA,IACA,GAAI,UAAU,QAAQ,EAAE,OAAO;AAAA,IAC/B,GAAI,aAAa,QAAQ,EAAE,UAAU;AAAA,EACvC,CAAC;AACH;AAeO,MAAM,aAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,kBAAkB;AAAA,MACtB,gBAAgB;AAAA,QACd;AAAA,QACA;AAAA,QACA,KAAK,kBAAkB,GAAG;AAAA,QAC1B,QAAQ,kBAAkB,MAAM;AAAA,QAChC,WAAW,kBAAkB,SAAS;AAAA,MACxC,CAAC;AAAA,MACD;AAAA,QACE,OAAO;AAAA,QACP,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,SAAS;AAAA,UACP,UAAU;AAAA,UACV,OAAO;AAAA,UACP,UAAU;AAAA,QACZ;AAAA,MACF;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA,WAAW,eAAe,iBAAiB,SAAS;AAAA;AAAA,IACtD;AAAA,EAEJ;AACF;AAEA,WAAW,cAAc;","names":[]}

package/dist/components/Spinner.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithoutRef } from 'react';
+type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerProps = ComponentPropsWithoutRef<'span'> & {
+    size?: SpinnerSize;
+};
+export declare const Spinner: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    size?: SpinnerSize;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+export {};
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAGlE,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IAC5D,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,CAAC;AAMF,eAAO,MAAM,OAAO;WAPX,WAAW;mDAmBnB,CAAC"}

package/dist/components/Spinner.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { spinner as spinnerRecipe } from "@becket-ui/tokens/recipes";
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Spinner = forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: "status",
+        ...props,
+        "aria-label": props["aria-label"] ?? "Loading",
+        className: mergeClassName(spinnerRecipe({ size }), className)
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+export {
+  Spinner
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react';\nimport { spinner as spinnerRecipe } from '@becket-ui/tokens/recipes';\n\ntype SpinnerSize = 'sm' | 'md' | 'lg';\n\nexport type SpinnerProps = ComponentPropsWithoutRef<'span'> & {\n  size?: SpinnerSize;\n};\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(\n  ({ size = 'md', className, ...props }, ref) => {\n    return (\n      <span\n        ref={ref}\n        role=\"status\"\n        {...props}\n        aria-label={props['aria-label'] ?? 'Loading'}\n        className={mergeClassName(spinnerRecipe({ size }), className)}\n      />\n    );\n  },\n);\n\nSpinner.displayName = 'Spinner';\n"],"mappings":"AAgBM;AAhBN,SAAS,kBAAiD;AAC1D,SAAS,WAAW,qBAAqB;AAQzC,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAEO,MAAM,UAAU;AAAA,EACrB,CAAC,EAAE,OAAO,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,cAAY,MAAM,YAAY,KAAK;AAAA,QACnC,WAAW,eAAe,cAAc,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA;AAAA,IAC9D;AAAA,EAEJ;AACF;AAEA,QAAQ,cAAc;","names":[]}

package/dist/components/Stack.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+import { stack } from '@becket-ui/tokens/patterns';
+import { type GradientBorderToken } from '../helpers/gradientBorder';
+import { type GapValue, type ResponsiveValue } from '../helpers/responsive';
+type StackOptions = NonNullable<Parameters<typeof stack>[0]>;
+type AlignVariant = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+type JustifyVariant = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+type BorderProp = StackOptions['border'] | GradientBorderToken;
+export type StackProps = ComponentPropsWithoutRef<'div'> & {
+    direction?: StackOptions['direction'];
+    gap?: GapValue;
+    align?: AlignVariant;
+    justify?: JustifyVariant;
+    border?: BorderProp;
+    /** Flex/grid order — responsive object supported. */
+    order?: ResponsiveValue<number>;
+    as?: ElementType;
+};
+export declare const Stack: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    direction?: StackOptions['direction'];
+    gap?: GapValue;
+    align?: AlignVariant;
+    justify?: JustifyVariant;
+    border?: BorderProp;
+    /** Flex/grid order — responsive object supported. */
+    order?: ResponsiveValue<number>;
+    as?: ElementType;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const HStack: import("react").ForwardRefExoticComponent<Omit<StackProps, "direction"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const VStack: import("react").ForwardRefExoticComponent<Omit<StackProps, "direction"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=Stack.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/components/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,wBAAwB,EAAE,KAAK,WAAW,EAAE,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAGL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAA+C,KAAK,QAAQ,EAAE,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEzH,KAAK,YAAY,GAAG,WAAW,CAAC,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7D,KAAK,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AACxE,KAAK,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACnF,KAAK,UAAU,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG,mBAAmB,CAAC;AAuB/D,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACzD,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAChC,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,KAAK;gBAVJ,YAAY,CAAC,WAAW,CAAC;UAC/B,QAAQ;YACN,YAAY;cACV,cAAc;aACf,UAAU;IACnB,qDAAqD;YAC7C,eAAe,CAAC,MAAM,CAAC;SAC1B,WAAW;kDAoDjB,CAAC;AAIF,eAAO,MAAM,MAAM,0HAEjB,CAAC;AAGH,eAAO,MAAM,MAAM,0HAEjB,CAAC"}

package/dist/components/Stack.js

@@ -0,0 +1,81 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { css } from "@becket-ui/tokens/css";
+import { stack } from "@becket-ui/tokens/patterns";
+import {
+  getGradientBorderClassName,
+  isGradientBorderToken
+} from "../helpers/gradientBorder";
+import { normalizeGapValue, normalizeResponsiveValue } from "../helpers/responsive";
+const ALIGN_MAP = {
+  start: "start",
+  center: "center",
+  end: "end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+const JUSTIFY_MAP = {
+  start: "start",
+  center: "center",
+  end: "end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly"
+};
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Stack = forwardRef(
+  ({
+    direction = "column",
+    gap = "md",
+    align,
+    justify,
+    border,
+    order,
+    as: Component = "div",
+    className,
+    style,
+    ...props
+  }, ref) => {
+    const isGradientBorder = isGradientBorderToken(border);
+    const resolvedGap = normalizeGapValue(gap);
+    const resolvedDirection = normalizeResponsiveValue(direction);
+    const resolvedOrder = order != null ? normalizeResponsiveValue(order) : void 0;
+    const recipeClassName = css({
+      ...stack.raw({
+        direction: resolvedDirection,
+        gap: resolvedGap,
+        ...align && { align: ALIGN_MAP[align] },
+        ...justify && { justify: JUSTIFY_MAP[justify] },
+        ...border && !isGradientBorder && { border }
+      }),
+      ...resolvedOrder != null && { order: resolvedOrder }
+    });
+    const gradientBorderClassName = isGradientBorder ? getGradientBorderClassName(border) : void 0;
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        ...props,
+        style,
+        className: mergeClassName(
+          recipeClassName,
+          gradientBorderClassName,
+          className
+        )
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+const HStack = forwardRef((props, ref) => /* @__PURE__ */ jsx(Stack, { ref, direction: "row", ...props }));
+HStack.displayName = "HStack";
+const VStack = forwardRef((props, ref) => /* @__PURE__ */ jsx(Stack, { ref, direction: "column", ...props }));
+VStack.displayName = "VStack";
+export {
+  HStack,
+  Stack,
+  VStack
+};
+//# sourceMappingURL=Stack.js.map

package/dist/components/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Stack.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementType } from 'react';\nimport { css } from '@becket-ui/tokens/css';\nimport { stack } from '@becket-ui/tokens/patterns';\nimport {\n  getGradientBorderClassName,\n  isGradientBorderToken,\n  type GradientBorderToken,\n} from '../helpers/gradientBorder';\nimport { normalizeGapValue, normalizeResponsiveValue, type GapValue, type ResponsiveValue } from '../helpers/responsive';\n\ntype StackOptions = NonNullable<Parameters<typeof stack>[0]>;\ntype AlignVariant = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\ntype JustifyVariant = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\ntype BorderProp = StackOptions['border'] | GradientBorderToken;\n\nconst ALIGN_MAP: Record<AlignVariant, string> = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n  stretch: 'stretch',\n  baseline: 'baseline',\n};\n\nconst JUSTIFY_MAP: Record<JustifyVariant, string> = {\n  start: 'start',\n  center: 'center',\n  end: 'end',\n  between: 'space-between',\n  around: 'space-around',\n  evenly: 'space-evenly',\n};\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport type StackProps = ComponentPropsWithoutRef<'div'> & {\n  direction?: StackOptions['direction'];\n  gap?: GapValue;\n  align?: AlignVariant;\n  justify?: JustifyVariant;\n  border?: BorderProp;\n  /** Flex/grid order — responsive object supported. */\n  order?: ResponsiveValue<number>;\n  as?: ElementType;\n};\n\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(\n  (\n    {\n      direction = 'column',\n      gap = 'md',\n      align,\n      justify,\n      border,\n      order,\n      as: Component = 'div',\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    const isGradientBorder = isGradientBorderToken(border);\n    const resolvedGap = normalizeGapValue(gap);\n    const resolvedDirection = normalizeResponsiveValue(direction);\n    const resolvedOrder = order != null ? normalizeResponsiveValue(order) : undefined;\n\n    const recipeClassName = css({\n      ...stack.raw({\n        direction: resolvedDirection as StackOptions['direction'],\n        gap: resolvedGap as StackOptions['gap'],\n        ...(align && { align: ALIGN_MAP[align] }),\n        ...(justify && { justify: JUSTIFY_MAP[justify] }),\n        ...(border && !isGradientBorder && { border }),\n      }),\n      ...(resolvedOrder != null && { order: resolvedOrder }),\n    });\n\n    const gradientBorderClassName = isGradientBorder\n      ? getGradientBorderClassName(border)\n      : undefined;\n\n    return (\n      <Component\n        ref={ref}\n        {...props}\n        style={style}\n        className={mergeClassName(\n          recipeClassName,\n          gradientBorderClassName,\n          className,\n        )}\n      />\n    );\n  },\n);\n\nStack.displayName = 'Stack';\n\nexport const HStack = forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>((props, ref) => (\n  <Stack ref={ref} direction=\"row\" {...props} />\n));\nHStack.displayName = 'HStack';\n\nexport const VStack = forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>((props, ref) => (\n  <Stack ref={ref} direction=\"column\" {...props} />\n));\nVStack.displayName = 'VStack';\n"],"mappings":"AAoFM;AApFN,SAAS,kBAAmE;AAC5E,SAAS,WAAW;AACpB,SAAS,aAAa;AACtB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP,SAAS,mBAAmB,gCAAqE;AAOjG,MAAM,YAA0C;AAAA,EAC9C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,UAAU;AACZ;AAEA,MAAM,cAA8C;AAAA,EAClD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAaO,MAAM,QAAQ;AAAA,EACnB,CACE;AAAA,IACE,YAAY;AAAA,IACZ,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,IAAI,YAAY;AAAA,IAChB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,mBAAmB,sBAAsB,MAAM;AACrD,UAAM,cAAc,kBAAkB,GAAG;AACzC,UAAM,oBAAoB,yBAAyB,SAAS;AAC5D,UAAM,gBAAgB,SAAS,OAAO,yBAAyB,KAAK,IAAI;AAExE,UAAM,kBAAkB,IAAI;AAAA,MAC1B,GAAG,MAAM,IAAI;AAAA,QACX,WAAW;AAAA,QACX,KAAK;AAAA,QACL,GAAI,SAAS,EAAE,OAAO,UAAU,KAAK,EAAE;AAAA,QACvC,GAAI,WAAW,EAAE,SAAS,YAAY,OAAO,EAAE;AAAA,QAC/C,GAAI,UAAU,CAAC,oBAAoB,EAAE,OAAO;AAAA,MAC9C,CAAC;AAAA,MACD,GAAI,iBAAiB,QAAQ,EAAE,OAAO,cAAc;AAAA,IACtD,CAAC;AAED,UAAM,0BAA0B,mBAC5B,2BAA2B,MAAM,IACjC;AAEJ,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;AAEb,MAAM,SAAS,WAA0D,CAAC,OAAO,QACtF,oBAAC,SAAM,KAAU,WAAU,OAAO,GAAG,OAAO,CAC7C;AACD,OAAO,cAAc;AAEd,MAAM,SAAS,WAA0D,CAAC,OAAO,QACtF,oBAAC,SAAM,KAAU,WAAU,UAAU,GAAG,OAAO,CAChD;AACD,OAAO,cAAc;","names":[]}

package/dist/components/Switch.d.ts

@@ -0,0 +1,20 @@
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+type SwitchSize = 'sm' | 'md' | 'lg';
+export type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'role'> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: SwitchSize;
+    /** Visible name. Prefer this over a control-only `aria-label`. */
+    label?: ReactNode;
+};
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "role"> & {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: SwitchSize;
+    /** Visible name. Prefer this over a control-only `aria-label`. */
+    label?: ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IAC7F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kEAAkE;IAClE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAMF,eAAO,MAAM,MAAM;cAZP,OAAO;qBACA,OAAO;sBACN,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI;WACrC,UAAU;IACjB,kEAAkE;YAC1D,SAAS;qDAuFlB,CAAC"}

package/dist/components/Switch.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useState
+} from "react";
+import { switchRecipe } from "@becket-ui/tokens/recipes";
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Switch = forwardRef(
+  ({
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    size = "md",
+    disabled = false,
+    className,
+    id: idProp,
+    label,
+    onClick,
+    onKeyDown,
+    ...props
+  }, ref) => {
+    const generatedId = useId();
+    const id = idProp ?? generatedId;
+    const isControlled = checkedProp !== void 0;
+    const [uncontrolled, setUncontrolled] = useState(defaultChecked);
+    const checked = isControlled ? Boolean(checkedProp) : uncontrolled;
+    const setChecked = useCallback(
+      (next) => {
+        if (!isControlled) setUncontrolled(next);
+        onCheckedChange?.(next);
+      },
+      [isControlled, onCheckedChange]
+    );
+    const toggle = () => {
+      if (disabled) return;
+      setChecked(!checked);
+    };
+    const styles = switchRecipe({ size, checked });
+    const control = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        id,
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        disabled,
+        className: mergeClassName(styles.root, className),
+        ...props,
+        onClick: (event) => {
+          onClick?.(event);
+          if (!event.defaultPrevented) toggle();
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) return;
+          if (event.key === " " || event.key === "Enter") {
+            event.preventDefault();
+            toggle();
+          }
+        },
+        children: /* @__PURE__ */ jsx("span", { className: styles.track, "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: styles.thumb }) })
+      }
+    );
+    if (label == null) {
+      return control;
+    }
+    return /* @__PURE__ */ jsxs("span", { className: styles.wrap, children: [
+      control,
+      /* @__PURE__ */ jsx("label", { className: styles.label, htmlFor: id, children: label })
+    ] });
+  }
+);
+Switch.displayName = "Switch";
+export {
+  Switch
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Switch.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useId,\n  useState,\n  type ButtonHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { switchRecipe } from '@becket-ui/tokens/recipes';\n\ntype SwitchSize = 'sm' | 'md' | 'lg';\n\nexport type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'role'> & {\n  checked?: boolean;\n  defaultChecked?: boolean;\n  onCheckedChange?: (checked: boolean) => void;\n  size?: SwitchSize;\n  /** Visible name. Prefer this over a control-only `aria-label`. */\n  label?: ReactNode;\n};\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      checked: checkedProp,\n      defaultChecked = false,\n      onCheckedChange,\n      size = 'md',\n      disabled = false,\n      className,\n      id: idProp,\n      label,\n      onClick,\n      onKeyDown,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = useId();\n    const id = idProp ?? generatedId;\n    const isControlled = checkedProp !== undefined;\n    const [uncontrolled, setUncontrolled] = useState(defaultChecked);\n    const checked = isControlled ? Boolean(checkedProp) : uncontrolled;\n\n    const setChecked = useCallback(\n      (next: boolean) => {\n        if (!isControlled) setUncontrolled(next);\n        onCheckedChange?.(next);\n      },\n      [isControlled, onCheckedChange],\n    );\n\n    const toggle = () => {\n      if (disabled) return;\n      setChecked(!checked);\n    };\n\n    const styles = switchRecipe({ size, checked });\n\n    const control = (\n      <button\n        ref={ref}\n        id={id}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={checked}\n        disabled={disabled}\n        className={mergeClassName(styles.root, className)}\n        {...props}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) toggle();\n        }}\n        onKeyDown={(event: KeyboardEvent<HTMLButtonElement>) => {\n          onKeyDown?.(event);\n          if (event.defaultPrevented) return;\n          if (event.key === ' ' || event.key === 'Enter') {\n            event.preventDefault();\n            toggle();\n          }\n        }}\n      >\n        <span className={styles.track} aria-hidden=\"true\">\n          <span className={styles.thumb} />\n        </span>\n      </button>\n    );\n\n    if (label == null) {\n      return control;\n    }\n\n    return (\n      <span className={styles.wrap}>\n        {control}\n        <label className={styles.label} htmlFor={id}>\n          {label}\n        </label>\n      </span>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n"],"mappings":";AA0FU,cAUJ,YAVI;AAxFV;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,oBAAoB;AAa7B,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAEO,MAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,cAAc,MAAM;AAC1B,UAAM,KAAK,UAAU;AACrB,UAAM,eAAe,gBAAgB;AACrC,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,cAAc;AAC/D,UAAM,UAAU,eAAe,QAAQ,WAAW,IAAI;AAEtD,UAAM,aAAa;AAAA,MACjB,CAAC,SAAkB;AACjB,YAAI,CAAC,aAAc,iBAAgB,IAAI;AACvC,0BAAkB,IAAI;AAAA,MACxB;AAAA,MACA,CAAC,cAAc,eAAe;AAAA,IAChC;AAEA,UAAM,SAAS,MAAM;AACnB,UAAI,SAAU;AACd,iBAAW,CAAC,OAAO;AAAA,IACrB;AAEA,UAAM,SAAS,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE7C,UAAM,UACJ;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAc;AAAA,QACd;AAAA,QACA,WAAW,eAAe,OAAO,MAAM,SAAS;AAAA,QAC/C,GAAG;AAAA,QACJ,SAAS,CAAC,UAAU;AAClB,oBAAU,KAAK;AACf,cAAI,CAAC,MAAM,iBAAkB,QAAO;AAAA,QACtC;AAAA,QACA,WAAW,CAAC,UAA4C;AACtD,sBAAY,KAAK;AACjB,cAAI,MAAM,iBAAkB;AAC5B,cAAI,MAAM,QAAQ,OAAO,MAAM,QAAQ,SAAS;AAC9C,kBAAM,eAAe;AACrB,mBAAO;AAAA,UACT;AAAA,QACF;AAAA,QAEA,8BAAC,UAAK,WAAW,OAAO,OAAO,eAAY,QACzC,8BAAC,UAAK,WAAW,OAAO,OAAO,GACjC;AAAA;AAAA,IACF;AAGF,QAAI,SAAS,MAAM;AACjB,aAAO;AAAA,IACT;AAEA,WACE,qBAAC,UAAK,WAAW,OAAO,MACrB;AAAA;AAAA,MACD,oBAAC,WAAM,WAAW,OAAO,OAAO,SAAS,IACtC,iBACH;AAAA,OACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}

package/dist/components/Switch.test.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { assertNoAxeViolations } from "@becket-ui/a11y";
+import { Switch } from "./Switch";
+describe("Switch", () => {
+  it("gets its accessible name from label", () => {
+    render(/* @__PURE__ */ jsx(Switch, { label: "Notifications" }));
+    expect(screen.getByRole("switch", { name: "Notifications" })).toBeTruthy();
+  });
+  it("toggles on Space and Enter", async () => {
+    const user = userEvent.setup();
+    render(/* @__PURE__ */ jsx(Switch, { label: "Notifications" }));
+    const control = screen.getByRole("switch", { name: "Notifications" });
+    expect(control.getAttribute("aria-checked")).toBe("false");
+    control.focus();
+    await user.keyboard(" ");
+    expect(control.getAttribute("aria-checked")).toBe("true");
+    await user.keyboard("{Enter}");
+    expect(control.getAttribute("aria-checked")).toBe("false");
+  });
+  it("has no axe violations with a visible label", async () => {
+    const { container } = render(/* @__PURE__ */ jsx(Switch, { label: "Notifications" }));
+    await assertNoAxeViolations(container);
+  });
+});
+//# sourceMappingURL=Switch.test.js.map

package/dist/components/Switch.test.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Switch.test.tsx"],"sourcesContent":["import { describe, expect, it } from 'vitest';\nimport { render, screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { assertNoAxeViolations } from '@becket-ui/a11y';\n\nimport { Switch } from './Switch';\n\ndescribe('Switch', () => {\n  it('gets its accessible name from label', () => {\n    render(<Switch label=\"Notifications\" />);\n    expect(screen.getByRole('switch', { name: 'Notifications' })).toBeTruthy();\n  });\n\n  it('toggles on Space and Enter', async () => {\n    const user = userEvent.setup();\n    render(<Switch label=\"Notifications\" />);\n    const control = screen.getByRole('switch', { name: 'Notifications' });\n    expect(control.getAttribute('aria-checked')).toBe('false');\n    control.focus();\n    await user.keyboard(' ');\n    expect(control.getAttribute('aria-checked')).toBe('true');\n    await user.keyboard('{Enter}');\n    expect(control.getAttribute('aria-checked')).toBe('false');\n  });\n\n  it('has no axe violations with a visible label', async () => {\n    const { container } = render(<Switch label=\"Notifications\" />);\n    await assertNoAxeViolations(container);\n  });\n});\n"],"mappings":"AASW;AATX,SAAS,UAAU,QAAQ,UAAU;AACrC,SAAS,QAAQ,cAAc;AAC/B,OAAO,eAAe;AACtB,SAAS,6BAA6B;AAEtC,SAAS,cAAc;AAEvB,SAAS,UAAU,MAAM;AACvB,KAAG,uCAAuC,MAAM;AAC9C,WAAO,oBAAC,UAAO,OAAM,iBAAgB,CAAE;AACvC,WAAO,OAAO,UAAU,UAAU,EAAE,MAAM,gBAAgB,CAAC,CAAC,EAAE,WAAW;AAAA,EAC3E,CAAC;AAED,KAAG,8BAA8B,YAAY;AAC3C,UAAM,OAAO,UAAU,MAAM;AAC7B,WAAO,oBAAC,UAAO,OAAM,iBAAgB,CAAE;AACvC,UAAM,UAAU,OAAO,UAAU,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACpE,WAAO,QAAQ,aAAa,cAAc,CAAC,EAAE,KAAK,OAAO;AACzD,YAAQ,MAAM;AACd,UAAM,KAAK,SAAS,GAAG;AACvB,WAAO,QAAQ,aAAa,cAAc,CAAC,EAAE,KAAK,MAAM;AACxD,UAAM,KAAK,SAAS,SAAS;AAC7B,WAAO,QAAQ,aAAa,cAAc,CAAC,EAAE,KAAK,OAAO;AAAA,EAC3D,CAAC;AAED,KAAG,8CAA8C,YAAY;AAC3D,UAAM,EAAE,UAAU,IAAI,OAAO,oBAAC,UAAO,OAAM,iBAAgB,CAAE;AAC7D,UAAM,sBAAsB,SAAS;AAAA,EACvC,CAAC;AACH,CAAC;","names":[]}

package/dist/components/Table.d.ts

@@ -0,0 +1,23 @@
+import { type ComponentPropsWithoutRef } from 'react';
+type TableSize = 'sm' | 'md';
+export type TableProps = ComponentPropsWithoutRef<'table'> & {
+    size?: TableSize;
+};
+export declare const Table: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
+    size?: TableSize;
+} & import("react").RefAttributes<HTMLTableElement>>;
+export declare const TableCaption: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLTableCaptionElement>>;
+export declare const TableHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const TableFooter: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const TableRow: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare const TableColumnHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare const Thead: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const Tbody: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const Tfoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+export declare const Tr: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+export declare const Th: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+export declare const Td: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+export {};
+//# sourceMappingURL=Table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/components/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyC,KAAK,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAG7F,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAQ7B,MAAM,MAAM,UAAU,GAAG,wBAAwB,CAAC,OAAO,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,KAAK;WAHT,SAAS;oDAYjB,CAAC;AAQF,eAAO,MAAM,YAAY,8MAKxB,CAAC;AAGF,eAAO,MAAM,WAAW,sOAKvB,CAAC;AAGF,eAAO,MAAM,SAAS,sOAKrB,CAAC;AAGF,eAAO,MAAM,WAAW,sOAKvB,CAAC;AAGF,eAAO,MAAM,QAAQ,0NAKpB,CAAC;AAGF,eAAO,MAAM,iBAAiB,2OAK7B,CAAC;AAGF,eAAO,MAAM,SAAS,uOAKrB,CAAC;AAGF,eAAO,MAAM,KAAK,sOAAc,CAAC;AACjC,eAAO,MAAM,KAAK,sOAAY,CAAC;AAC/B,eAAO,MAAM,KAAK,sOAAc,CAAC;AACjC,eAAO,MAAM,EAAE,0NAAW,CAAC;AAC3B,eAAO,MAAM,EAAE,2OAAoB,CAAC;AACpC,eAAO,MAAM,EAAE,uOAAY,CAAC"}

package/dist/components/Table.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext } from "react";
+import { table as tableRecipe } from "@becket-ui/tokens/recipes";
+const TableContext = createContext("md");
+function mergeClassName(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+const Table = forwardRef(
+  ({ size = "md", className, ...props }, ref) => {
+    const styles = tableRecipe({ size });
+    return /* @__PURE__ */ jsx(TableContext.Provider, { value: size, children: /* @__PURE__ */ jsx("table", { ref, ...props, className: mergeClassName(styles.root, className) }) });
+  }
+);
+Table.displayName = "Table";
+function useTableSize() {
+  return useContext(TableContext);
+}
+const TableCaption = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = tableRecipe({ size: useTableSize() });
+    return /* @__PURE__ */ jsx("caption", { ref, ...props, className: mergeClassName(styles.caption, className) });
+  }
+);
+TableCaption.displayName = "TableCaption";
+const TableHeader = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = tableRecipe({ size: useTableSize() });
+    return /* @__PURE__ */ jsx("thead", { ref, ...props, className: mergeClassName(styles.thead, className) });
+  }
+);
+TableHeader.displayName = "TableHeader";
+const TableBody = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = tableRecipe({ size: useTableSize() });
+    return /* @__PURE__ */ jsx("tbody", { ref, ...props, className: mergeClassName(styles.tbody, className) });
+  }
+);
+TableBody.displayName = "TableBody";
+const TableFooter = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = tableRecipe({ size: useTableSize() });
+    return /* @__PURE__ */ jsx("tfoot", { ref, ...props, className: mergeClassName(styles.tfoot, className) });
+  }
+);
+TableFooter.displayName = "TableFooter";
+const TableRow = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = tableRecipe({ size: useTableSize() });
+    return /* @__PURE__ */ jsx("tr", { ref, ...props, className: mergeClassName(styles.tr, className) });
+  }
+);
+TableRow.displayName = "TableRow";
+const TableColumnHeader = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = tableRecipe({ size: useTableSize() });
+    return /* @__PURE__ */ jsx("th", { ref, ...props, className: mergeClassName(styles.th, className) });
+  }
+);
+TableColumnHeader.displayName = "TableColumnHeader";
+const TableCell = forwardRef(
+  ({ className, ...props }, ref) => {
+    const styles = tableRecipe({ size: useTableSize() });
+    return /* @__PURE__ */ jsx("td", { ref, ...props, className: mergeClassName(styles.td, className) });
+  }
+);
+TableCell.displayName = "TableCell";
+const Thead = TableHeader;
+const Tbody = TableBody;
+const Tfoot = TableFooter;
+const Tr = TableRow;
+const Th = TableColumnHeader;
+const Td = TableCell;
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableColumnHeader,
+  TableFooter,
+  TableHeader,
+  TableRow,
+  Tbody,
+  Td,
+  Tfoot,
+  Th,
+  Thead,
+  Tr
+};
+//# sourceMappingURL=Table.js.map

package/dist/components/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Table.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, forwardRef, useContext, type ComponentPropsWithoutRef } from 'react';\nimport { table as tableRecipe } from '@becket-ui/tokens/recipes';\n\ntype TableSize = 'sm' | 'md';\n\nconst TableContext = createContext<TableSize>('md');\n\nfunction mergeClassName(...classes: (string | undefined)[]): string {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport type TableProps = ComponentPropsWithoutRef<'table'> & {\n  size?: TableSize;\n};\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  ({ size = 'md', className, ...props }, ref) => {\n    const styles = tableRecipe({ size });\n    return (\n      <TableContext.Provider value={size}>\n        <table ref={ref} {...props} className={mergeClassName(styles.root, className)} />\n      </TableContext.Provider>\n    );\n  },\n);\n\nTable.displayName = 'Table';\n\nfunction useTableSize() {\n  return useContext(TableContext);\n}\n\nexport const TableCaption = forwardRef<HTMLTableCaptionElement, ComponentPropsWithoutRef<'caption'>>(\n  ({ className, ...props }, ref) => {\n    const styles = tableRecipe({ size: useTableSize() });\n    return <caption ref={ref} {...props} className={mergeClassName(styles.caption, className)} />;\n  },\n);\nTableCaption.displayName = 'TableCaption';\n\nexport const TableHeader = forwardRef<HTMLTableSectionElement, ComponentPropsWithoutRef<'thead'>>(\n  ({ className, ...props }, ref) => {\n    const styles = tableRecipe({ size: useTableSize() });\n    return <thead ref={ref} {...props} className={mergeClassName(styles.thead, className)} />;\n  },\n);\nTableHeader.displayName = 'TableHeader';\n\nexport const TableBody = forwardRef<HTMLTableSectionElement, ComponentPropsWithoutRef<'tbody'>>(\n  ({ className, ...props }, ref) => {\n    const styles = tableRecipe({ size: useTableSize() });\n    return <tbody ref={ref} {...props} className={mergeClassName(styles.tbody, className)} />;\n  },\n);\nTableBody.displayName = 'TableBody';\n\nexport const TableFooter = forwardRef<HTMLTableSectionElement, ComponentPropsWithoutRef<'tfoot'>>(\n  ({ className, ...props }, ref) => {\n    const styles = tableRecipe({ size: useTableSize() });\n    return <tfoot ref={ref} {...props} className={mergeClassName(styles.tfoot, className)} />;\n  },\n);\nTableFooter.displayName = 'TableFooter';\n\nexport const TableRow = forwardRef<HTMLTableRowElement, ComponentPropsWithoutRef<'tr'>>(\n  ({ className, ...props }, ref) => {\n    const styles = tableRecipe({ size: useTableSize() });\n    return <tr ref={ref} {...props} className={mergeClassName(styles.tr, className)} />;\n  },\n);\nTableRow.displayName = 'TableRow';\n\nexport const TableColumnHeader = forwardRef<HTMLTableCellElement, ComponentPropsWithoutRef<'th'>>(\n  ({ className, ...props }, ref) => {\n    const styles = tableRecipe({ size: useTableSize() });\n    return <th ref={ref} {...props} className={mergeClassName(styles.th, className)} />;\n  },\n);\nTableColumnHeader.displayName = 'TableColumnHeader';\n\nexport const TableCell = forwardRef<HTMLTableCellElement, ComponentPropsWithoutRef<'td'>>(\n  ({ className, ...props }, ref) => {\n    const styles = tableRecipe({ size: useTableSize() });\n    return <td ref={ref} {...props} className={mergeClassName(styles.td, className)} />;\n  },\n);\nTableCell.displayName = 'TableCell';\n\nexport const Thead = TableHeader;\nexport const Tbody = TableBody;\nexport const Tfoot = TableFooter;\nexport const Tr = TableRow;\nexport const Th = TableColumnHeader;\nexport const Td = TableCell;\n"],"mappings":";AAsBQ;AApBR,SAAS,eAAe,YAAY,kBAAiD;AACrF,SAAS,SAAS,mBAAmB;AAIrC,MAAM,eAAe,cAAyB,IAAI;AAElD,SAAS,kBAAkB,SAAyC;AAClE,SAAO,QAAQ,OAAO,OAAO,EAAE,KAAK,GAAG;AACzC;AAMO,MAAM,QAAQ;AAAA,EACnB,CAAC,EAAE,OAAO,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ;AAC7C,UAAM,SAAS,YAAY,EAAE,KAAK,CAAC;AACnC,WACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,MAC5B,8BAAC,WAAM,KAAW,GAAG,OAAO,WAAW,eAAe,OAAO,MAAM,SAAS,GAAG,GACjF;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc;AAEpB,SAAS,eAAe;AACtB,SAAO,WAAW,YAAY;AAChC;AAEO,MAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,SAAS,YAAY,EAAE,MAAM,aAAa,EAAE,CAAC;AACnD,WAAO,oBAAC,aAAQ,KAAW,GAAG,OAAO,WAAW,eAAe,OAAO,SAAS,SAAS,GAAG;AAAA,EAC7F;AACF;AACA,aAAa,cAAc;AAEpB,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,SAAS,YAAY,EAAE,MAAM,aAAa,EAAE,CAAC;AACnD,WAAO,oBAAC,WAAM,KAAW,GAAG,OAAO,WAAW,eAAe,OAAO,OAAO,SAAS,GAAG;AAAA,EACzF;AACF;AACA,YAAY,cAAc;AAEnB,MAAM,YAAY;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,SAAS,YAAY,EAAE,MAAM,aAAa,EAAE,CAAC;AACnD,WAAO,oBAAC,WAAM,KAAW,GAAG,OAAO,WAAW,eAAe,OAAO,OAAO,SAAS,GAAG;AAAA,EACzF;AACF;AACA,UAAU,cAAc;AAEjB,MAAM,cAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,SAAS,YAAY,EAAE,MAAM,aAAa,EAAE,CAAC;AACnD,WAAO,oBAAC,WAAM,KAAW,GAAG,OAAO,WAAW,eAAe,OAAO,OAAO,SAAS,GAAG;AAAA,EACzF;AACF;AACA,YAAY,cAAc;AAEnB,MAAM,WAAW;AAAA,EACtB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,SAAS,YAAY,EAAE,MAAM,aAAa,EAAE,CAAC;AACnD,WAAO,oBAAC,QAAG,KAAW,GAAG,OAAO,WAAW,eAAe,OAAO,IAAI,SAAS,GAAG;AAAA,EACnF;AACF;AACA,SAAS,cAAc;AAEhB,MAAM,oBAAoB;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,SAAS,YAAY,EAAE,MAAM,aAAa,EAAE,CAAC;AACnD,WAAO,oBAAC,QAAG,KAAW,GAAG,OAAO,WAAW,eAAe,OAAO,IAAI,SAAS,GAAG;AAAA,EACnF;AACF;AACA,kBAAkB,cAAc;AAEzB,MAAM,YAAY;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,SAAS,YAAY,EAAE,MAAM,aAAa,EAAE,CAAC;AACnD,WAAO,oBAAC,QAAG,KAAW,GAAG,OAAO,WAAW,eAAe,OAAO,IAAI,SAAS,GAAG;AAAA,EACnF;AACF;AACA,UAAU,cAAc;AAEjB,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,KAAK;AACX,MAAM,KAAK;AACX,MAAM,KAAK;","names":[]}

package/dist/components/Tabs.d.ts

@@ -0,0 +1,21 @@
+import { type ButtonHTMLAttributes, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type TabsProps = ComponentPropsWithoutRef<'div'> & {
+    value?: string;
+    defaultValue: string;
+    onValueChange?: (value: string) => void;
+    children?: ReactNode;
+};
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    value?: string;
+    defaultValue: string;
+    onValueChange?: (value: string) => void;
+    children?: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Tab: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
+    value: string;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabPanel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    value: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../src/components/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,wBAAwB,EAE7B,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAuBf,MAAM,MAAM,SAAS,GAAG,wBAAwB,CAAC,KAAK,CAAC,GAAG;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,IAAI;YANP,MAAM;kBACA,MAAM;oBACJ,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;eAC5B,SAAS;kDA6BrB,CAAC;AAIF,eAAO,MAAM,OAAO,2MA4CnB,CAAC;AAQF,eAAO,MAAM,GAAG;WAHP,MAAM;qDA0Bd,CAAC;AAQF,eAAO,MAAM,QAAQ;WAHZ,MAAM;kDAsBd,CAAC"}