@timmbr/native-ui 0.0.0-stage → 1.0.0

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { ModalProps, ModalBackdropProps, ModalContentProps, ModalHeaderProps, ModalCloseButtonProps, ModalBodyProps, ModalFooterProps, ModalContextValue } from './Modal.types';
+export declare const useModalContext: () => ModalContextValue;
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalBackdrop: React.ForwardRefExoticComponent<ModalBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalHeader: React.ForwardRefExoticComponent<ModalHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalCloseButton: React.ForwardRefExoticComponent<ModalCloseButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ModalBody: React.ForwardRefExoticComponent<ModalBodyProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalFooter: React.ForwardRefExoticComponent<ModalFooterProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,eAAe,CAAC;AAQvB,eAAO,MAAM,eAAe,yBAAuC,CAAC;AAEpE,eAAO,MAAM,KAAK,mFAkBjB,CAAC;AAIF,eAAO,MAAM,aAAa,2FAkBzB,CAAC;AAIF,eAAO,MAAM,YAAY,0FAaxB,CAAC;AAIF,eAAO,MAAM,WAAW,yFAQvB,CAAC;AAIF,eAAO,MAAM,gBAAgB,iGAsB3B,CAAC;AAIH,eAAO,MAAM,SAAS,uFAQrB,CAAC;AAIF,eAAO,MAAM,WAAW,yFAQvB,CAAC"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,102 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { modalStyle, modalBackdropStyle, modalBodyStyle, modalCloseButtonStyle, modalContentStyle, modalFooterStyle, modalHeaderStyle } from './Modal.styles.js';
+import { cn } from '@timmbr/utils';
+
+const ModalContext = React.createContext({
+  isOpen: false,
+  size: "md"
+});
+const useModalContext = () => React.useContext(ModalContext);
+const Modal = React.forwardRef(
+  ({ isOpen = false, onClose, size = "md", className, children, ...props }, ref) => {
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx(ModalContext.Provider, { value: { isOpen, onClose, size }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "dialog",
+        "aria-modal": "true",
+        className: cn(modalStyle(), className),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+Modal.displayName = "Modal";
+const ModalBackdrop = React.forwardRef(
+  ({ className, onClick, ...props }, ref) => {
+    const { onClose } = useModalContext();
+    const handleClick = (e) => {
+      onClose?.();
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        className: cn(modalBackdropStyle(), className),
+        onClick: handleClick,
+        ...props
+      }
+    );
+  }
+);
+ModalBackdrop.displayName = "ModalBackdrop";
+const ModalContent = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { size } = useModalContext();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(modalContentStyle({ size }), className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ModalContent.displayName = "ModalContent";
+const ModalHeader = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(modalHeaderStyle(), className), ...props, children });
+  }
+);
+ModalHeader.displayName = "ModalHeader";
+const ModalCloseButton = React.forwardRef(({ className, children, onClick, ...props }, ref) => {
+  const { onClose } = useModalContext();
+  const handleClick = (e) => {
+    onClose?.();
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      "aria-label": "Close",
+      className: cn(modalCloseButtonStyle(), className),
+      onClick: handleClick,
+      ...props,
+      children: children || "✕"
+    }
+  );
+});
+ModalCloseButton.displayName = "ModalCloseButton";
+const ModalBody = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(modalBodyStyle(), className), ...props, children });
+  }
+);
+ModalBody.displayName = "ModalBody";
+const ModalFooter = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(modalFooterStyle(), className), ...props, children });
+  }
+);
+ModalFooter.displayName = "ModalFooter";
+
+export { Modal, ModalBackdrop, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, useModalContext };

package/dist/components/Modal/Modal.styles.d.ts

@@ -0,0 +1,43 @@
+export declare const modalStyle: (props?: ({
+    [x: string]: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+export declare const modalBackdropStyle: (props?: ({
+    [x: string]: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+export declare const modalContentStyle: (props?: ({
+    size?: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+export declare const modalHeaderStyle: (props?: ({
+    [x: string]: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+export declare const modalCloseButtonStyle: (props?: ({
+    [x: string]: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+export declare const modalBodyStyle: (props?: ({
+    [x: string]: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+export declare const modalFooterStyle: (props?: ({
+    [x: string]: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+//# sourceMappingURL=Modal.styles.d.ts.map

package/dist/components/Modal/Modal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;yBAErB,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;yBAE7B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;yBAc5B,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;yBAE3B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;;yBAEhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;yBAEzB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;yBAE3B,CAAC"}

package/dist/components/Modal/Modal.styles.js

@@ -0,0 +1,37 @@
+import { tva } from '../../theme/config.js';
+
+const modalStyle = tva({
+  base: "fixed inset-0 z-50 flex items-center justify-center p-4 font-sans"
+});
+const modalBackdropStyle = tva({
+  base: "fixed inset-0 bg-black/60 backdrop-blur-xs transition-opacity"
+});
+const modalContentStyle = tva({
+  base: "relative z-10 w-full rounded-2xl bg-card text-card-foreground p-6 shadow-2xl border border-border flex flex-col max-h-[90vh] overflow-y-auto animate-in fade-in zoom-in-95 duration-150",
+  variants: {
+    size: {
+      xs: "max-w-xs",
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      full: "max-w-full h-full rounded-none"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const modalHeaderStyle = tva({
+  base: "flex items-center justify-between pb-3 border-b border-border"
+});
+const modalCloseButtonStyle = tva({
+  base: "inline-flex items-center justify-center size-8 rounded-full text-muted-foreground hover:bg-muted/50 hover:text-foreground transition-colors cursor-pointer"
+});
+const modalBodyStyle = tva({
+  base: "py-4 text-sm text-foreground leading-relaxed flex-1"
+});
+const modalFooterStyle = tva({
+  base: "flex items-center justify-end gap-2 pt-3 border-t border-border"
+});
+
+export { modalBackdropStyle, modalBodyStyle, modalCloseButtonStyle, modalContentStyle, modalFooterStyle, modalHeaderStyle, modalStyle };

package/dist/components/Modal/Modal.types.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'full';
+export interface ModalContextValue {
+    isOpen: boolean;
+    onClose?: () => void;
+    size?: ModalSize;
+}
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+    isOpen?: boolean;
+    onClose?: () => void;
+    size?: ModalSize;
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface ModalBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+}
+export interface ModalContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface ModalCloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface ModalBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: React.ReactNode;
+}
+export interface ModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=Modal.types.d.ts.map

package/dist/components/Modal/Modal.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Modal';
+export * from './Modal.types';
+export * from './Modal.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC"}

package/dist/components/Pressable/Pressable.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { PressableProps } from './Pressable.types';
+export declare const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Pressable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.d.ts","sourceRoot":"","sources":["../../../src/components/Pressable/Pressable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,eAAO,MAAM,SAAS,0FAuCrB,CAAC"}

package/dist/components/Pressable/Pressable.js

@@ -0,0 +1,43 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { pressableStyle } from './Pressable.styles.js';
+import { cn } from '@timmbr/utils';
+
+const Pressable = React.forwardRef(
+  ({
+    isDisabled = false,
+    disabled = false,
+    onPress,
+    onClick,
+    className,
+    children,
+    type = "button",
+    ...props
+  }, ref) => {
+    const isActuallyDisabled = isDisabled || disabled;
+    const handleClick = (e) => {
+      if (isActuallyDisabled) {
+        e.preventDefault();
+        return;
+      }
+      onPress?.(e);
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        disabled: isActuallyDisabled,
+        "aria-disabled": isActuallyDisabled,
+        className: cn(pressableStyle({ isDisabled: isActuallyDisabled }), className),
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+Pressable.displayName = "Pressable";
+
+export { Pressable };

package/dist/components/Pressable/Pressable.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const pressableStyle: (props?: ({
+    isDisabled?: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+//# sourceMappingURL=Pressable.styles.d.ts.map

package/dist/components/Pressable/Pressable.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Pressable/Pressable.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;yBAWzB,CAAC"}

package/dist/components/Pressable/Pressable.styles.js

@@ -0,0 +1,16 @@
+import { tva } from '../../theme/config.js';
+
+const pressableStyle = tva({
+  base: "inline-flex items-center justify-center transition-all select-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none active:scale-[0.99] cursor-pointer",
+  variants: {
+    isDisabled: {
+      true: "opacity-50 pointer-events-none cursor-not-allowed",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    isDisabled: false
+  }
+});
+
+export { pressableStyle };

package/dist/components/Pressable/Pressable.types.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface PressableProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'> {
+    isDisabled?: boolean;
+    disabled?: boolean;
+    onPress?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=Pressable.types.d.ts.map

package/dist/components/Pressable/Pressable.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pressable.types.d.ts","sourceRoot":"","sources":["../../../src/components/Pressable/Pressable.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/components/Pressable/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Pressable';
+export * from './Pressable.types';
+export * from './Pressable.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Pressable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pressable/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC"}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SpinnerProps } from './Spinner.types';
+export declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,eAAO,MAAM,OAAO,sFAiCnB,CAAC"}

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { spinnerStyle } from './Spinner.styles.js';
+import { cn } from '@timmbr/utils';
+
+const Spinner = React.forwardRef(
+  ({ size = "md", color, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        role: "status",
+        "aria-label": "Loading",
+        className: cn(spinnerStyle({ size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            className: "size-full",
+            xmlns: "http://www.w3.org/2000/svg",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: "opacity-25",
+                  cx: "12",
+                  cy: "12",
+                  r: "10",
+                  stroke: color || "currentColor",
+                  strokeWidth: "4"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: "opacity-75",
+                  fill: color || "currentColor",
+                  d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+export { Spinner };

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

@@ -0,0 +1,7 @@
+export declare const spinnerStyle: (props?: ({
+    size?: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+//# sourceMappingURL=Spinner.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;yBAevB,CAAC"}

package/dist/components/Spinner/Spinner.styles.js

@@ -0,0 +1,20 @@
+import { tva } from '../../theme/config.js';
+
+const spinnerStyle = tva({
+  base: "inline-block animate-spin text-primary shrink-0",
+  variants: {
+    size: {
+      xs: "size-3.5",
+      sm: "size-4",
+      md: "size-6",
+      lg: "size-8",
+      small: "size-4",
+      large: "size-8"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+export { spinnerStyle };

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'small' | 'large';
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: SpinnerSize;
+    color?: string;
+    className?: string;
+}
+//# sourceMappingURL=Spinner.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/Spinner.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC;AAExE,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACzE,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,4 @@
+export * from './Spinner';
+export * from './Spinner.types';
+export * from './Spinner.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC"}

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SwitchProps } from './Switch.types';
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGlD,eAAO,MAAM,MAAM,uFAiDlB,CAAC"}

package/dist/components/Switch/Switch.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { switchThumbStyle, switchStyle } from './Switch.styles.js';
+import { cn } from '@timmbr/utils';
+
+const Switch = React.forwardRef(
+  ({
+    value: controlledValue,
+    defaultValue = false,
+    onValueChange,
+    size = "md",
+    isDisabled = false,
+    disabled,
+    className,
+    onClick,
+    ...props
+  }, ref) => {
+    const isActuallyDisabled = isDisabled || disabled;
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const isChecked = controlledValue !== void 0 ? controlledValue : uncontrolledValue;
+    const handleToggle = (e) => {
+      if (isActuallyDisabled) return;
+      const next = !isChecked;
+      if (controlledValue === void 0) {
+        setUncontrolledValue(next);
+      }
+      onValueChange?.(next);
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: "switch",
+        "aria-checked": isChecked,
+        disabled: isActuallyDisabled,
+        "aria-disabled": isActuallyDisabled,
+        "data-state": isChecked ? "checked" : "unchecked",
+        className: cn(switchStyle({ size, isChecked, isDisabled: isActuallyDisabled }), className),
+        onClick: handleToggle,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-state": isChecked ? "checked" : "unchecked",
+            className: switchThumbStyle({ size, isChecked })
+          }
+        )
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+export { Switch };

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

@@ -0,0 +1,16 @@
+export declare const switchStyle: (props?: ({
+    size?: string | boolean | undefined;
+    isChecked?: string | boolean | undefined;
+    isDisabled?: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+export declare const switchThumbStyle: (props?: ({
+    size?: string | boolean | undefined;
+    isChecked?: string | boolean | undefined;
+} & {
+    class?: string;
+    className?: string;
+}) | undefined) => string;
+//# sourceMappingURL=Switch.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW;;;;;;;yBAsBtB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;yBAsB3B,CAAC"}

package/dist/components/Switch/Switch.styles.js

@@ -0,0 +1,50 @@
+import { tva } from '../../theme/config.js';
+
+const switchStyle = tva({
+  base: "inline-flex items-center shrink-0 cursor-pointer rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 p-0.5",
+  variants: {
+    size: {
+      sm: "h-5 w-9",
+      md: "h-6 w-11",
+      lg: "h-7 w-14"
+    },
+    isChecked: {
+      true: "bg-primary",
+      false: "bg-muted-foreground/30"
+    },
+    isDisabled: {
+      true: "opacity-50 pointer-events-none cursor-not-allowed",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    isChecked: false,
+    isDisabled: false
+  }
+});
+const switchThumbStyle = tva({
+  base: "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 ease-in-out",
+  variants: {
+    size: {
+      sm: "size-4",
+      md: "size-5",
+      lg: "size-6"
+    },
+    isChecked: {
+      true: "",
+      false: "translate-x-0"
+    }
+  },
+  compoundVariants: [
+    { size: "sm", isChecked: true, class: "translate-x-4" },
+    { size: "md", isChecked: true, class: "translate-x-5" },
+    { size: "lg", isChecked: true, class: "translate-x-7" }
+  ],
+  defaultVariants: {
+    size: "md",
+    isChecked: false
+  }
+});
+
+export { switchStyle, switchThumbStyle };

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export type SwitchSize = 'sm' | 'md' | 'lg';
+export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange'> {
+    value?: boolean;
+    defaultValue?: boolean;
+    onValueChange?: (value: boolean) => void;
+    size?: SwitchSize;
+    isDisabled?: boolean;
+    className?: string;
+}
+//# sourceMappingURL=Switch.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.types.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,CAAC;IAC7H,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,4 @@
+export * from './Switch';
+export * from './Switch.types';
+export * from './Switch.styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC"}