@timmbr/ui 1.0.0-beta

package/dist/components/DataList/DataList.styles.js

@@ -0,0 +1,49 @@
+import { cva } from 'class-variance-authority';
+
+const dataListVariants = cva("font-sans text-foreground", {
+  variants: {
+    orientation: {
+      horizontal: "flex flex-col",
+      vertical: "flex flex-col"
+    },
+    size: {
+      sm: "text-xs gap-1.5",
+      default: "text-sm gap-2.5",
+      lg: "text-base gap-3.5"
+    },
+    divided: {
+      true: "divide-y divide-grey-200 dark:divide-grey-800",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "default",
+    divided: false
+  }
+});
+const dataListItemVariants = cva("flex", {
+  variants: {
+    orientation: {
+      horizontal: "flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-6",
+      vertical: "flex-col gap-1"
+    },
+    align: {
+      baseline: "sm:items-baseline",
+      center: "sm:items-center",
+      start: "sm:items-start"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    align: "baseline"
+  }
+});
+const dataListLabelVariants = cva(
+  "font-medium text-grey-500 dark:text-grey-400 shrink-0 flex items-center gap-1.5 select-none"
+);
+const dataListValueVariants = cva(
+  "font-normal text-foreground flex-1 min-w-0"
+);
+
+export { dataListItemVariants, dataListLabelVariants, dataListValueVariants, dataListVariants };

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

@@ -0,0 +1,59 @@
+import type * as React from 'react';
+import type { DataListVariants } from './DataList.styles';
+export interface DataListProps extends React.HTMLAttributes<HTMLDListElement>, DataListVariants {
+    /**
+     * Orientation layout of labels and values.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Scale size of fonts and spacing.
+     * @default 'default'
+     */
+    size?: 'sm' | 'default' | 'lg';
+    /**
+     * Whether to add dividers between items.
+     * @default false
+     */
+    divided?: boolean;
+    /**
+     * Content items.
+     */
+    children?: React.ReactNode;
+}
+export interface DataListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Item-level orientation override.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Vertical alignment of label and value in horizontal mode.
+     * @default 'baseline'
+     */
+    align?: 'baseline' | 'center' | 'start';
+    /**
+     * Content elements.
+     */
+    children?: React.ReactNode;
+}
+export interface DataListLabelProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Minimum width for the label column in horizontal mode.
+     */
+    minWidth?: string | number;
+    /**
+     * Optional icon node beside the label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Content element.
+     */
+    children?: React.ReactNode;
+}
+export interface DataListValueProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Content element.
+     */
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=DataList.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataList.types.d.ts","sourceRoot":"","sources":["../../../src/components/DataList/DataList.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,gBAAgB;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DataList/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { DialogProps, DialogContentProps, DialogHeaderProps, DialogFooterProps } from './Dialog.types';
+export declare const Dialog: React.FC<DialogProps>;
+export declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+export declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DialogHeader: React.FC<DialogHeaderProps>;
+export declare const DialogFooter: React.FC<DialogFooterProps>;
+export declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=Dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAa1D,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAC;AAClE,eAAO,MAAM,aAAa,8GAA0B,CAAC;AACrD,eAAO,MAAM,YAAY,6CAAyB,CAAC;AACnD,eAAO,MAAM,WAAW,4GAAwB,CAAC;AAEjD,eAAO,MAAM,aAAa,8JAUxB,CAAC;AAGH,eAAO,MAAM,aAAa,2FAkCxB,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,WAAW,oKAUtB,CAAC;AAGH,eAAO,MAAM,iBAAiB,8KAU5B,CAAC"}

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,86 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '@timmbr/utils';
+import { X } from '@timmbr/icons';
+import { resolveMotion } from '../../types/motion.js';
+import { dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogTitleVariants } from './Dialog.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "dialog-overlay",
+    className: cn(dialogOverlayVariants(), className),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DialogContent = React.forwardRef(({ className, children, motion, ...props }, ref) => {
+  const globalMotion = useGlobalAnimation();
+  const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
+  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none", children: /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "data-slot": "dialog-content",
+        className: cn(
+          dialogContentVariants(),
+          !shouldAnimate && "transition-none animate-none",
+          motionClass,
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "absolute right-4 top-4 rounded-sm p-1 text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-primary cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+const DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn(dialogHeaderVariants(), className), ...props });
+DialogHeader.displayName = "DialogHeader";
+const DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn(dialogFooterVariants(), className), ...props });
+DialogFooter.displayName = "DialogFooter";
+const DialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Title,
+  {
+    ref,
+    "data-slot": "dialog-title",
+    className: cn(dialogTitleVariants(), className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+const DialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    "data-slot": "dialog-description",
+    className: cn(dialogDescriptionVariants(), className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

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

@@ -0,0 +1,7 @@
+export declare const dialogOverlayVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogContentVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const dialogDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+//# sourceMappingURL=Dialog.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,mBAAmB,oFAE/B,CAAC;AAEF,eAAO,MAAM,yBAAyB,oFAErC,CAAC"}

package/dist/components/Dialog/Dialog.styles.js

@@ -0,0 +1,22 @@
+import { cva } from 'class-variance-authority';
+
+const dialogOverlayVariants = cva(
+  "fixed inset-0 z-50 bg-black/60 backdrop-blur-xs transition-opacity duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+);
+const dialogContentVariants = cva(
+  "relative pointer-events-auto grid w-full max-w-lg gap-4 rounded-xl border border-grey-200 dark:border-grey-800 bg-white dark:bg-grey-900 p-6 shadow-xl font-sans text-foreground data-[state=open]:animate-dialog-scale-in data-[state=closed]:animate-dialog-scale-out"
+);
+const dialogHeaderVariants = cva(
+  "flex flex-col space-y-1.5 text-left"
+);
+const dialogFooterVariants = cva(
+  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 mt-4"
+);
+const dialogTitleVariants = cva(
+  "text-xl font-display font-semibold leading-none tracking-tight text-foreground"
+);
+const dialogDescriptionVariants = cva(
+  "text-sm text-muted-foreground font-sans leading-relaxed"
+);
+
+export { dialogContentVariants, dialogDescriptionVariants, dialogFooterVariants, dialogHeaderVariants, dialogOverlayVariants, dialogTitleVariants };

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

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { MotionProp } from '../../types/motion';
+export interface DialogProps extends DialogPrimitive.DialogProps {
+}
+export interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Motion transition control.
+     */
+    motion?: MotionProp;
+}
+export interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+//# sourceMappingURL=Dialog.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,WAAY,SAAQ,eAAe,CAAC,WAAW;CAAG;AAEnE,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC;IACtE;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAClF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG"}

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

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

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

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

package/dist/components/Divider/Divider.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEpD,eAAO,MAAM,OAAO,qFAkEnB,CAAC"}

package/dist/components/Divider/Divider.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cn } from '@timmbr/utils';
+import { dividerVariants } from './Divider.styles.js';
+
+const Divider = React.forwardRef(
+  ({
+    className,
+    style,
+    orientation = "horizontal",
+    variant = "solid",
+    thickness = "default",
+    color = "default",
+    labelPosition = "center",
+    icon,
+    decorative = true,
+    label,
+    children,
+    ...props
+  }, ref) => {
+    const displayLabel = label ?? children;
+    const hasContent = Boolean(displayLabel || icon);
+    if (hasContent && orientation === "horizontal") {
+      const lineClass = dividerVariants({ orientation: "horizontal", variant, thickness, color });
+      const leftLineClass = cn(
+        lineClass,
+        labelPosition === "start" ? "w-8 shrink-0" : "w-auto flex-1"
+      );
+      const rightLineClass = cn(
+        lineClass,
+        labelPosition === "end" ? "w-8 shrink-0" : "w-auto flex-1"
+      );
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          role: decorative ? "none" : "separator",
+          "aria-orientation": "horizontal",
+          "data-slot": "divider",
+          "data-testid": "timmbr-divider",
+          style,
+          className: cn("flex items-center w-full my-4 gap-3 text-xs font-medium text-grey-500 dark:text-grey-400", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: leftLineClass }),
+            /* @__PURE__ */ jsxs("span", { className: "shrink-0 flex items-center gap-1.5 uppercase tracking-wider select-none", children: [
+              icon && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center justify-center text-grey-400 dark:text-grey-500", children: icon }),
+              displayLabel
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: rightLineClass })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      SeparatorPrimitive.Root,
+      {
+        ref,
+        decorative,
+        orientation,
+        "data-slot": "divider",
+        "data-testid": "timmbr-divider",
+        style,
+        className: cn(dividerVariants({ orientation, variant, thickness, color, className })),
+        ...props
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+
+export { Divider };

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

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "dashed" | "dotted" | "solid" | null | undefined;
+    thickness?: "default" | "thick" | "thin" | null | undefined;
+    color?: "default" | "primary" | "brand" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type DividerVariants = VariantProps<typeof dividerVariants>;
+//# sourceMappingURL=Divider.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,eAAe;;;;;8EA2C1B,CAAC;AAEH,MAAM,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/Divider/Divider.styles.js

@@ -0,0 +1,48 @@
+import { cva } from 'class-variance-authority';
+
+const dividerVariants = cva("shrink-0 transition-colors", {
+  variants: {
+    orientation: {
+      horizontal: "w-full",
+      vertical: "h-full"
+    },
+    variant: {
+      solid: "border-solid",
+      dashed: "border-dashed bg-transparent",
+      dotted: "border-dotted bg-transparent"
+    },
+    thickness: {
+      thin: "",
+      default: "",
+      thick: ""
+    },
+    color: {
+      default: "border-grey-200 dark:border-grey-800 bg-grey-200 dark:bg-grey-800",
+      primary: "border-primary bg-primary",
+      muted: "border-grey-100 dark:border-grey-800 bg-grey-100 dark:bg-grey-800",
+      brand: "border-primary-500 bg-primary-500"
+    }
+  },
+  compoundVariants: [
+    { orientation: "horizontal", variant: "solid", thickness: "thin", className: "h-px" },
+    { orientation: "horizontal", variant: "solid", thickness: "default", className: "h-px" },
+    { orientation: "horizontal", variant: "solid", thickness: "thick", className: "h-0.5" },
+    { orientation: "horizontal", variant: ["dashed", "dotted"], thickness: "thin", className: "border-t" },
+    { orientation: "horizontal", variant: ["dashed", "dotted"], thickness: "default", className: "border-t-2" },
+    { orientation: "horizontal", variant: ["dashed", "dotted"], thickness: "thick", className: "border-t-4" },
+    { orientation: "vertical", variant: "solid", thickness: "thin", className: "w-px" },
+    { orientation: "vertical", variant: "solid", thickness: "default", className: "w-px" },
+    { orientation: "vertical", variant: "solid", thickness: "thick", className: "w-0.5" },
+    { orientation: "vertical", variant: ["dashed", "dotted"], thickness: "thin", className: "border-l" },
+    { orientation: "vertical", variant: ["dashed", "dotted"], thickness: "default", className: "border-l-2" },
+    { orientation: "vertical", variant: ["dashed", "dotted"], thickness: "thick", className: "border-l-4" }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid",
+    thickness: "default",
+    color: "default"
+  }
+});
+
+export { dividerVariants };

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

@@ -0,0 +1,47 @@
+import type * as React from 'react';
+import type { DividerVariants } from './Divider.styles';
+export interface DividerProps extends React.HTMLAttributes<HTMLDivElement>, DividerVariants {
+    /**
+     * Orientation of the divider.
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Line border pattern.
+     * @default 'solid'
+     */
+    variant?: 'solid' | 'dashed' | 'dotted';
+    /**
+     * Line thickness.
+     * @default 'default'
+     */
+    thickness?: 'thin' | 'default' | 'thick';
+    /**
+     * Semantic color theme.
+     * @default 'default'
+     */
+    color?: 'default' | 'primary' | 'muted' | 'brand';
+    /**
+     * Positioning of label text relative to divider line.
+     * @default 'center'
+     */
+    labelPosition?: 'start' | 'center' | 'end';
+    /**
+     * Optional custom decorative icon node.
+     */
+    icon?: React.ReactNode;
+    /**
+     * If true, screen readers will ignore the element as purely decorative.
+     * @default true
+     */
+    decorative?: boolean;
+    /**
+     * Optional centered label content (e.g. "OR" or category).
+     */
+    label?: React.ReactNode;
+    /**
+     * If true, renders child element via Radix Slot.
+     */
+    asChild?: boolean;
+}
+//# sourceMappingURL=Divider.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.types.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExD,MAAM,WAAW,YACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,eAAe;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;IACzC;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IAC3C;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

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

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

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

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

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { DrawerProps, DrawerContentProps, DrawerHeaderProps, DrawerFooterProps } from './Drawer.types';
+export declare const Drawer: React.FC<DrawerProps>;
+export declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+export declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const DrawerHeader: React.FC<DrawerHeaderProps>;
+export declare const DrawerFooter: React.FC<DrawerFooterProps>;
+export declare const DrawerTitle: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+export declare const DrawerDescription: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=Drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAW1D,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EAClB,MAAM,gBAAgB,CAAC;AAExB,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAwB,CAAC;AAClE,eAAO,MAAM,aAAa,8GAA0B,CAAC;AACrD,eAAO,MAAM,YAAY,6CAAyB,CAAC;AACnD,eAAO,MAAM,WAAW,4GAAwB,CAAC;AAEjD,eAAO,MAAM,aAAa,8JAUxB,CAAC;AAGH,eAAO,MAAM,aAAa,2FAmCxB,CAAC;AAGH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAEpD,CAAC;AAGF,eAAO,MAAM,WAAW,6GAAwB,CAAC;AACjD,eAAO,MAAM,iBAAiB,qHAA8B,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cn } from '@timmbr/utils';
+import { X } from '@timmbr/icons';
+import { resolveMotion } from '../../types/motion.js';
+import { drawerContentVariants, drawerFooterVariants, drawerHeaderVariants, drawerOverlayVariants } from './Drawer.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const Drawer = DialogPrimitive.Root;
+const DrawerTrigger = DialogPrimitive.Trigger;
+const DrawerPortal = DialogPrimitive.Portal;
+const DrawerClose = DialogPrimitive.Close;
+const DrawerOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "drawer-overlay",
+    className: cn(drawerOverlayVariants(), className),
+    ...props
+  }
+));
+DrawerOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const DrawerContent = React.forwardRef(({ className, children, side = "right", motion, ...props }, ref) => {
+  const globalMotion = useGlobalAnimation();
+  const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "data-slot": "drawer-content",
+        className: cn(
+          drawerContentVariants({ side }),
+          !shouldAnimate && "transition-none animate-none",
+          motionClass,
+          className
+        ),
+        ...props,
+        children: [
+          side === "bottom" && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 h-1.5 w-12 rounded-full bg-grey-300 dark:bg-grey-700" }),
+          children,
+          /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "drawer-close",
+              className: "absolute right-4 top-4 rounded-sm p-1 text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-primary cursor-pointer",
+              children: [
+                /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+});
+DrawerContent.displayName = "DrawerContent";
+const DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn(drawerHeaderVariants(), className), ...props });
+DrawerHeader.displayName = "DrawerHeader";
+const DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn(drawerFooterVariants(), className), ...props });
+DrawerFooter.displayName = "DrawerFooter";
+const DrawerTitle = DialogPrimitive.Title;
+const DrawerDescription = DialogPrimitive.Description;
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger };

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

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const drawerOverlayVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const drawerContentVariants: (props?: ({
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const drawerHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const drawerFooterVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type DrawerContentVariants = VariantProps<typeof drawerContentVariants>;
+//# sourceMappingURL=Drawer.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,qBAAqB,oFAEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;8EAejC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/components/Drawer/Drawer.styles.js

@@ -0,0 +1,29 @@
+import { cva } from 'class-variance-authority';
+
+const drawerOverlayVariants = cva(
+  "fixed inset-0 z-50 bg-black/60 backdrop-blur-xs transition-opacity duration-300 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
+);
+const drawerContentVariants = cva(
+  "fixed z-50 gap-4 bg-white dark:bg-grey-900 p-6 shadow-2xl transition ease-in-out duration-300 font-sans text-foreground border-grey-200 dark:border-grey-800",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=open]:animate-slide-in-from-top data-[state=closed]:animate-slide-out-to-top",
+        bottom: "inset-x-0 bottom-0 border-t rounded-t-2xl max-h-[85vh] data-[state=open]:animate-slide-in-from-bottom data-[state=closed]:animate-slide-out-to-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r data-[state=open]:animate-slide-in-from-left data-[state=closed]:animate-slide-out-to-left",
+        right: "inset-y-0 right-0 h-full w-3/4 max-w-md border-l data-[state=open]:animate-slide-in-from-right data-[state=closed]:animate-slide-out-to-right"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+const drawerHeaderVariants = cva(
+  "flex flex-col space-y-1.5 text-left"
+);
+const drawerFooterVariants = cva(
+  "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-2 mt-auto pt-4"
+);
+
+export { drawerContentVariants, drawerFooterVariants, drawerHeaderVariants, drawerOverlayVariants };