@timmbr/ui 1.0.0-beta

package/dist/components/Input/Input.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { X, EyeOff, Eye, AlertCircle, Info } from '@timmbr/icons';
+import { resolveMotion } from '../../types/motion.js';
+import { inputFieldVariants, inputWrapperVariants } from './Input.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const Input = React.forwardRef(
+  ({
+    className,
+    containerClassName,
+    style,
+    variant,
+    size,
+    type = "text",
+    showPasswordToggle = true,
+    label,
+    floating = false,
+    motion,
+    helperText,
+    error,
+    leftAdornment,
+    rightAdornment,
+    clearable = false,
+    onClear,
+    disabled,
+    value,
+    defaultValue,
+    onChange,
+    onFocus,
+    onBlur,
+    placeholder,
+    id: customId,
+    ...props
+  }, ref) => {
+    const generatedId = React.useId();
+    const id = customId || generatedId;
+    const isError = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : void 0;
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate, motionClass } = resolveMotion(motion, globalMotion);
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [showPassword, setShowPassword] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState(
+      defaultValue !== void 0 ? String(defaultValue) : ""
+    );
+    const isControlled = value !== void 0;
+    const currentValue = isControlled ? String(value ?? "") : internalValue;
+    const isFloatingActive = isFocused || currentValue.length > 0;
+    const handleChange = (e) => {
+      if (!isControlled) {
+        setInternalValue(e.target.value);
+      }
+      onChange?.(e);
+    };
+    const handleFocus = (e) => {
+      setIsFocused(true);
+      onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+      setIsFocused(false);
+      onBlur?.(e);
+    };
+    const handleClear = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!isControlled) {
+        setInternalValue("");
+      }
+      onClear?.();
+    };
+    const showClearButton = clearable && !disabled && currentValue.length > 0;
+    const isPasswordField = type === "password" && showPasswordToggle;
+    const resolvedType = isPasswordField && showPassword ? "text" : type;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("flex flex-col gap-1.5 w-full font-sans", containerClassName),
+        style,
+        children: [
+          label && !floating && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: id,
+              className: "text-xs font-semibold text-foreground tracking-wide select-none text-left",
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                inputWrapperVariants({
+                  variant,
+                  size,
+                  isError,
+                  isDisabled: disabled
+                }),
+                "group relative",
+                floating && "h-11",
+                !shouldAnimate && "transition-none",
+                motionClass,
+                className
+              ),
+              children: [
+                leftAdornment && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mr-2 text-muted-foreground shrink-0", children: leftAdornment }),
+                /* @__PURE__ */ jsxs("div", { className: "relative flex-1 h-full flex items-center", children: [
+                  label && floating && /* @__PURE__ */ jsx(
+                    "label",
+                    {
+                      htmlFor: id,
+                      className: cn(
+                        "absolute pointer-events-none transition-all duration-200 select-none truncate max-w-full z-10",
+                        isFloatingActive ? "-top-2.5 left-0 px-1 bg-white dark:bg-grey-900 text-[11px] font-semibold leading-none rounded-xs" : "top-1/2 -translate-y-1/2 left-0 text-sm text-muted-foreground leading-none"
+                      ),
+                      style: {
+                        color: isFloatingActive ? isError ? "var(--color-destructive)" : "var(--color-primary)" : void 0
+                      },
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref,
+                      id,
+                      type: resolvedType,
+                      value,
+                      defaultValue,
+                      disabled,
+                      onChange: handleChange,
+                      onFocus: handleFocus,
+                      onBlur: handleBlur,
+                      placeholder: floating && !isFloatingActive ? void 0 : placeholder,
+                      className: cn(
+                        inputFieldVariants(),
+                        "text-sm leading-normal"
+                      ),
+                      "aria-invalid": isError ? "true" : void 0,
+                      "aria-describedby": errorMessage || helperText ? `${id}-desc` : void 0,
+                      ...props
+                    }
+                  )
+                ] }),
+                showClearButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: -1,
+                    onClick: handleClear,
+                    className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
+                    "aria-label": "Clear input",
+                    children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+                  }
+                ),
+                isPasswordField && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    tabIndex: -1,
+                    onClick: () => setShowPassword((prev) => !prev),
+                    className: "flex items-center justify-center ml-1.5 p-1 rounded-sm text-muted hover:text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 transition-colors cursor-pointer active:scale-95",
+                    "aria-label": showPassword ? "Hide password" : "Show password",
+                    children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4" })
+                  }
+                ),
+                rightAdornment && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center ml-2 text-muted shrink-0", children: rightAdornment })
+              ]
+            }
+          ),
+          (errorMessage || helperText) && /* @__PURE__ */ jsxs(
+            "p",
+            {
+              id: `${id}-desc`,
+              className: cn(
+                "text-xs mt-0.5 flex items-center gap-1.5 text-left",
+                isError ? "text-destructive font-medium" : "text-muted-foreground"
+              ),
+              children: [
+                isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-3.5 h-3.5 shrink-0 text-destructive", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5 shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx("span", { children: errorMessage || helperText })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

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

@@ -0,0 +1,10 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const inputWrapperVariants: (props?: ({
+    variant?: "outline" | "filled" | "subtle" | null | undefined;
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+    isError?: boolean | null | undefined;
+    isDisabled?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const inputFieldVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type InputVariants = VariantProps<typeof inputWrapperVariants>;
+//# sourceMappingURL=Input.styles.d.ts.map

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

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

package/dist/components/Input/Input.styles.js

@@ -0,0 +1,39 @@
+import { cva } from 'class-variance-authority';
+
+const inputWrapperVariants = cva(
+  "relative flex items-center w-full transition-all duration-150 rounded-[2px] border text-foreground outline-none",
+  {
+    variants: {
+      variant: {
+        outline: "border-grey-300 dark:border-grey-700 bg-white dark:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+        filled: "border-transparent bg-grey-100 dark:bg-grey-800 focus-within:bg-white dark:focus-within:bg-grey-900 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+        subtle: "border-grey-200 dark:border-grey-800 bg-grey-50 dark:bg-grey-900/50 focus-within:border-primary focus-within:ring-1 focus-within:ring-primary"
+      },
+      size: {
+        sm: "h-9 px-2.5 text-xs",
+        default: "h-11 px-3.5 text-sm",
+        md: "h-11 px-3.5 text-sm",
+        lg: "h-[52px] px-4 text-base"
+      },
+      isError: {
+        true: "border-destructive focus-within:border-destructive focus-within:ring-1 focus-within:ring-destructive text-destructive",
+        false: ""
+      },
+      isDisabled: {
+        true: "opacity-50 cursor-not-allowed bg-grey-100/60 dark:bg-grey-800/40 pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "default",
+      isError: false,
+      isDisabled: false
+    }
+  }
+);
+const inputFieldVariants = cva(
+  "w-full h-full bg-transparent font-sans border-0 p-0 text-foreground placeholder:text-muted focus:outline-none focus:ring-0 focus-visible:outline-none disabled:cursor-not-allowed"
+);
+
+export { inputFieldVariants, inputWrapperVariants };

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

@@ -0,0 +1,55 @@
+import type * as React from 'react';
+import type { InputVariants } from './Input.styles';
+import type { MotionProp } from '../../types/motion';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, InputVariants {
+    /**
+     * Field label displayed above the input or floating inside.
+     */
+    label?: string;
+    /**
+     * If true, enables animated floating label behavior.
+     */
+    floating?: boolean;
+    /**
+     * Additional classes applied to the outer wrapper container.
+     */
+    containerClassName?: string;
+    /**
+     * Motion transition control.
+     */
+    motion?: MotionProp;
+    /**
+     * Supporting message displayed below the input.
+     */
+    helperText?: string;
+    /**
+     * Error message or error state boolean.
+     */
+    error?: string | boolean;
+    /**
+     * Leading icon or content inside the input field.
+     */
+    leftAdornment?: React.ReactNode;
+    /**
+     * Trailing icon or content inside the input field.
+     */
+    rightAdornment?: React.ReactNode;
+    /**
+     * If true, shows a clear button when the input has content.
+     */
+    clearable?: boolean;
+    /**
+     * HTML input type (text, password, email, number, search, tel, url, date, etc.).
+     */
+    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'date' | 'time' | (string & {});
+    /**
+     * Whether to display an interactive show/hide password toggle button when type="password".
+     * Defaults to true.
+     */
+    showPasswordToggle?: boolean;
+    /**
+     * Callback fired when the clear button is clicked.
+     */
+    onClear?: () => void;
+}
+//# sourceMappingURL=Input.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,aAAa;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EACD,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,KAAK,GACL,KAAK,GACL,MAAM,GACN,MAAM,GACN,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAClB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

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

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

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

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

package/dist/components/Label/Label.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,KAAK,qFAuBhB,CAAC"}

package/dist/components/Label/Label.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '@timmbr/utils';
+import { labelVariants } from './Label.styles.js';
+
+const Label = React.forwardRef(({ className, size, required = false, disabled = false, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    LabelPrimitive.Root,
+    {
+      ref,
+      "data-slot": "label",
+      className: cn(
+        labelVariants({ size }),
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-destructive font-bold", "aria-hidden": "true", children: "*" })
+      ]
+    }
+  );
+});
+Label.displayName = "Label";
+
+export { Label };

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

@@ -0,0 +1,6 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const labelVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type LabelVariants = VariantProps<typeof labelVariants>;
+//# sourceMappingURL=Label.styles.d.ts.map

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

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

package/dist/components/Label/Label.styles.js

@@ -0,0 +1,20 @@
+import { cva } from 'class-variance-authority';
+
+const labelVariants = cva(
+  "font-sans font-semibold tracking-wide text-foreground select-none leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+
+export { labelVariants };

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

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import type { LabelVariants } from './Label.styles';
+export interface LabelProps extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, LabelVariants {
+    /**
+     * If true, displays a red required asterisk next to the label text.
+     */
+    required?: boolean;
+    /**
+     * If true, applies disabled visual styles.
+     */
+    disabled?: boolean;
+}
+//# sourceMappingURL=Label.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.types.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,cAAc,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EAChE,aAAa;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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

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

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

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

package/dist/components/List/List.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { ListProps, ListItemProps, ListItemIconProps, ListItemTextProps, ListItemActionProps } from './List.types';
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+export declare const ListItemIcon: React.ForwardRefExoticComponent<ListItemIconProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ListItemText: React.ForwardRefExoticComponent<ListItemTextProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ListItemAction: React.ForwardRefExoticComponent<ListItemActionProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=List.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,KAAK,EACV,SAAS,EACT,aAAa,EACb,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACpB,MAAM,cAAc,CAAC;AAEtB,eAAO,MAAM,IAAI,oFAShB,CAAC;AAGF,eAAO,MAAM,QAAQ,qFAmBpB,CAAC;AAGF,eAAO,MAAM,YAAY,0FASxB,CAAC;AAGF,eAAO,MAAM,YAAY,0FAiBxB,CAAC;AAGF,eAAO,MAAM,cAAc,4FAS1B,CAAC"}

package/dist/components/List/List.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { listVariants, listItemVariants, listItemActionVariants, listItemIconVariants, listItemTextVariants } from './List.styles.js';
+
+const List = React.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      "data-slot": "list",
+      className: cn(listVariants({ variant }), className),
+      ...props
+    }
+  )
+);
+List.displayName = "List";
+const ListItem = React.forwardRef(
+  ({ className, density, interactive, clickable, onClick, ...props }, ref) => {
+    const isInteractive = interactive || clickable || !!onClick;
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        "data-slot": "list-item",
+        onClick,
+        role: isInteractive ? "button" : void 0,
+        tabIndex: isInteractive ? 0 : void 0,
+        className: cn(
+          listItemVariants({ density, interactive: isInteractive }),
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+ListItem.displayName = "ListItem";
+const ListItemIcon = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "list-item-icon",
+      className: cn(listItemIconVariants(), className),
+      ...props
+    }
+  )
+);
+ListItemIcon.displayName = "ListItemIcon";
+const ListItemText = React.forwardRef(
+  ({ className, primary, secondary, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "list-item-text",
+      className: cn(listItemTextVariants(), className),
+      ...props,
+      children: [
+        primary && /* @__PURE__ */ jsx("div", { className: "font-medium text-foreground truncate", children: primary }),
+        secondary && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground truncate mt-0.5", children: secondary }),
+        children
+      ]
+    }
+  )
+);
+ListItemText.displayName = "ListItemText";
+const ListItemAction = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "list-item-action",
+      className: cn(listItemActionVariants(), className),
+      ...props
+    }
+  )
+);
+ListItemAction.displayName = "ListItemAction";
+
+export { List, ListItem, ListItemAction, ListItemIcon, ListItemText };

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

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const listVariants: (props?: ({
+    variant?: "default" | "bordered" | "divided" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const listItemVariants: (props?: ({
+    density?: "default" | "sm" | "lg" | null | undefined;
+    interactive?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const listItemIconVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const listItemTextVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const listItemActionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type ListVariants = VariantProps<typeof listVariants>;
+export type ListItemVariants = VariantProps<typeof listItemVariants>;
+//# sourceMappingURL=List.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.styles.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,YAAY;;8EAWvB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;8EAmB5B,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAEhC,CAAC;AAEF,eAAO,MAAM,oBAAoB,oFAAwB,CAAC;AAE1D,eAAO,MAAM,sBAAsB,oFAAkD,CAAC;AAEtF,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AAC7D,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/List/List.styles.js

@@ -0,0 +1,41 @@
+import { cva } from 'class-variance-authority';
+
+const listVariants = cva("w-full font-sans text-foreground", {
+  variants: {
+    variant: {
+      default: "",
+      bordered: "border border-grey-200 dark:border-grey-800 rounded-lg overflow-hidden",
+      divided: "divide-y divide-grey-200 dark:divide-grey-800"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+const listItemVariants = cva(
+  "relative flex items-center gap-3 transition-colors font-sans select-none",
+  {
+    variants: {
+      density: {
+        sm: "py-2 px-3 text-xs",
+        default: "py-3 px-4 text-sm",
+        lg: "py-4 px-5 text-base"
+      },
+      interactive: {
+        true: "cursor-pointer hover:bg-grey-100/70 dark:hover:bg-grey-800/60 active:bg-grey-200/50",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      density: "default",
+      interactive: false
+    }
+  }
+);
+const listItemIconVariants = cva(
+  "flex items-center justify-center shrink-0 text-muted-foreground"
+);
+const listItemTextVariants = cva("flex-1 min-w-0");
+const listItemActionVariants = cva("shrink-0 ml-auto flex items-center gap-2");
+
+export { listItemActionVariants, listItemIconVariants, listItemTextVariants, listItemVariants, listVariants };

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

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+import type { ListVariants, ListItemVariants } from './List.styles';
+export interface ListProps extends React.HTMLAttributes<HTMLUListElement>, ListVariants {
+}
+export interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement>, ListItemVariants {
+    clickable?: boolean;
+}
+export interface ListItemIconProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface ListItemTextProps extends React.HTMLAttributes<HTMLDivElement> {
+    primary?: React.ReactNode;
+    secondary?: React.ReactNode;
+}
+export interface ListItemActionProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+//# sourceMappingURL=List.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.types.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEpE,MAAM,WAAW,SACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAC5C,YAAY;CAAG;AAEnB,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC,EAC3C,gBAAgB;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,MAAM,WAAW,iBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import type { PaginationProps, PaginationContentProps, PaginationItemProps, PaginationLinkProps, PaginationPreviousProps, PaginationNextProps, PaginationEllipsisProps } from './Pagination.types';
+export declare const Pagination: React.FC<PaginationProps>;
+export declare const PaginationContent: React.ForwardRefExoticComponent<Omit<PaginationContentProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
+export declare const PaginationItem: React.ForwardRefExoticComponent<Omit<PaginationItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const PaginationPrevious: {
+    ({ className, ...props }: PaginationPreviousProps): React.JSX.Element;
+    displayName: string;
+};
+export declare const PaginationNext: {
+    ({ className, ...props }: PaginationNextProps): React.JSX.Element;
+    displayName: string;
+};
+export declare const PaginationEllipsis: {
+    ({ className, ...props }: PaginationEllipsisProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=Pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EACV,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,mBAAmB,EACnB,uBAAuB,EACxB,MAAM,oBAAoB,CAAC;AAE5B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAQhD,CAAC;AAGF,eAAO,MAAM,iBAAiB,8GAS7B,CAAC;AAGF,eAAO,MAAM,cAAc,wGAI1B,CAAC;AAGF,eAAO,MAAM,cAAc,+FAY1B,CAAC;AAGF,eAAO,MAAM,kBAAkB;8BAG5B,uBAAuB;;CASzB,CAAC;AAGF,eAAO,MAAM,cAAc;8BAGxB,mBAAmB;;CASrB,CAAC;AAGF,eAAO,MAAM,kBAAkB;8BAG5B,uBAAuB;;CAUzB,CAAC"}