@timmbr/ui 1.11.0 → 1.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAShE,OAAO,KAAK,EAGV,qBAAqB,EACtB,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,SAAS,8JAA0B,CAAC;AAEjD,eAAO,MAAM,aAAa,iKASxB,CAAC;AAGH,eAAO,MAAM,gBAAgB,0KAc3B,CAAC;AAGH,eAAO,MAAM,gBAAgB,8FAoB3B,CAAC"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAC;AAShE,OAAO,KAAK,EAGV,qBAAqB,EACtB,MAAM,mBAAmB,CAAC;AAE3B,eAAO,MAAM,SAAS,8JAA0B,CAAC;AAEjD,eAAO,MAAM,aAAa,iKASxB,CAAC;AAGH,eAAO,MAAM,gBAAgB,0KAsB3B,CAAC;AAGH,eAAO,MAAM,gBAAgB,8FAoB3B,CAAC"}

package/dist/components/Accordion/Accordion.js

@@ -17,18 +17,29 @@ const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
-  AccordionPrimitive.Trigger,
-  {
-    ref,
-    className: cn(accordionTriggerVariants(), className),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 text-grey-500 transition-transform duration-200" })
-    ]
-  }
-) }));
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => {
+  const globalMotion = useGlobalAnimation();
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(accordionTriggerVariants(), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: cn(
+              "h-4 w-4 shrink-0 text-grey-500",
+              globalMotion ? "transition-transform duration-200" : "transition-none"
+            )
+          }
+        )
+      ]
+    }
+  ) });
+});
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 const AccordionContent = React.forwardRef(({ className, children, motion = true, ...props }, ref) => {
   const globalMotion = useGlobalAnimation();

package/dist/components/AuthModal/AuthModal.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const authModalContainerVariants = cva(
-  "relative flex w-full max-w-[675px] bg-grey-50 overflow-hidden rounded-sm shadow-[0px_12px_24px_-4px_rgba(0,0,0,0.15)] flex-col sm:flex-row sm:min-h-[454px] max-h-[calc(100dvh-24px)] sm:max-h-[calc(100dvh-32px)]"
+  "relative flex w-full max-w-[675px] bg-grey-50 overflow-hidden rounded-sm shadow-2xl flex-col sm:flex-row sm:min-h-[454px] max-h-[calc(100dvh-24px)] sm:max-h-[calc(100dvh-32px)]"
 );
 const authModalBannerVariants = cva(
   "relative hidden sm:flex shrink-0 w-[320px] flex-col justify-between p-8 overflow-hidden select-none"

package/dist/components/AuthModal/subcomponents/AuthModalParts.d.ts

@@ -32,7 +32,7 @@ export declare function AuthDestination({ value, onEdit, disabled, }: {
     onEdit?: () => void;
     disabled?: boolean;
 }): React.JSX.Element;
-type PasswordFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type'> & {
+type PasswordFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'size'> & {
     id: string;
     label: string;
     onValueChange?: (value: string) => void;

package/dist/components/AuthModal/subcomponents/AuthModalParts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthModalParts.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalParts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,yEAAyE;AACzE,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAaA;AAED,yFAAyF;AACzF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,YAAoB,GACrB,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,qBAcA;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAO1F;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAmBA;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAWA;AAED,mFAAmF;AACnF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAYA;AAED,KAAK,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACjG,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACd,EAAE,kBAAkB,qBA+BpB"}
+{"version":3,"file":"AuthModalParts.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalParts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,yEAAyE;AACzE,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAaA;AAED,yFAAyF;AACzF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,QAAQ,EACR,YAAoB,GACrB,EAAE;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,qBAcA;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,4BAO1F;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAYA;AAED,wBAAgB,YAAY,CAAC,EAC3B,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,qBAWA;AAED,mFAAmF;AACnF,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,MAAM,EACN,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,qBAYA;AAED,KAAK,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC,GAAG;IAC1G,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,KAAK,EACL,aAAa,EACb,OAAO,EACP,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACd,EAAE,kBAAkB,qBAcpB"}

package/dist/components/AuthModal/subcomponents/AuthModalParts.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { cn } from '@timmbr/utils';
-import { EyeOff, Eye } from '@timmbr/icons';
 import { useAuthModalLabels } from '../AuthModal.labels.js';
-import { authModalHeadingVariants, authModalSubtitleVariants, authModalSubmitButtonVariants, authModalLinkVariants, authModalInputVariants } from '../AuthModal.styles.js';
-import { Spinner } from '../../Spinner/Spinner.js';
+import { authModalHeadingVariants, authModalSubtitleVariants, authModalLinkVariants } from '../AuthModal.styles.js';
+import { Button } from '../../Button/Button.js';
+import { Input } from '../../Input/Input.js';
 
 function AuthForm({
   onSubmit,
@@ -49,16 +49,14 @@ function AuthSubmitButton({
   children
 }) {
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
       type: "submit",
-      disabled: disabled || isLoading,
-      "aria-busy": isLoading || void 0,
-      className: authModalSubmitButtonVariants(),
-      children: isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "white", decorative: true }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children })
-      ] }) : children
+      variant: "primary",
+      fullWidth: true,
+      loading: isLoading,
+      disabled,
+      children
     }
   );
 }
@@ -99,36 +97,20 @@ function AuthPasswordField({
   className,
   ...inputProps
 }) {
-  const labels = useAuthModalLabels();
-  const [visible, setVisible] = React.useState(false);
-  return /* @__PURE__ */ jsxs("div", { className, children: [
-    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "sr-only", children: label }),
-    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id,
-          type: visible ? "text" : "password",
-          onChange: (e) => onValueChange?.(e.target.value),
-          "aria-invalid": invalid || void 0,
-          "aria-describedby": describedBy,
-          className: cn(authModalInputVariants({ invalid: !!invalid }), "pr-12"),
-          ...inputProps
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => setVisible((v) => !v),
-          "aria-label": visible ? labels.hidePassword : labels.showPassword,
-          "aria-pressed": visible,
-          className: "absolute inset-y-0 right-0 flex w-12 items-center justify-center text-grey-600 hover:text-grey-950 focus:outline-none focus-visible:text-primary cursor-pointer",
-          children: visible ? /* @__PURE__ */ jsx(EyeOff, { className: "size-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { className: "size-5", "aria-hidden": "true" })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      id,
+      type: "password",
+      showPasswordToggle: true,
+      "aria-label": label,
+      "aria-describedby": describedBy,
+      error: invalid,
+      containerClassName: className,
+      onChange: (e) => onValueChange?.(e.target.value),
+      ...inputProps
+    }
+  );
 }
 
 export { AuthDestination, AuthFieldError, AuthForm, AuthPasswordField, AuthStepHeader, AuthSubmitButton, AuthTextLink };

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,uFAqGlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,uFAsGlB,CAAC"}

package/dist/components/Button/Button.js

@@ -63,6 +63,7 @@ const Button = React.forwardRef(
         ref,
         type: "button",
         disabled: isDisabled,
+        "aria-busy": loading || void 0,
         "data-slot": "button",
         "data-testid": "timmbr-button",
         style,

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,QAAQ,yFAwFpB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,eAAO,MAAM,QAAQ,yFA+FpB,CAAC"}

package/dist/components/Checkbox/Checkbox.js

@@ -4,7 +4,9 @@ import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from '@timmbr/icons';
 import { cn } from '@timmbr/utils';
+import { resolveMotion } from '../../types/motion.js';
 import { checkboxIndicatorVariants, checkboxVariants } from './Checkbox.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
 
 const Checkbox = React.forwardRef(
   ({
@@ -16,6 +18,7 @@ const Checkbox = React.forwardRef(
     description,
     error,
     checked,
+    motion,
     id: customId,
     disabled,
     ...props
@@ -24,6 +27,8 @@ const Checkbox = React.forwardRef(
     const id = customId || generatedId;
     const isError = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate } = resolveMotion(motion, globalMotion);
     const checkboxElement = /* @__PURE__ */ jsx(
       CheckboxPrimitive.Root,
       {
@@ -31,7 +36,11 @@ const Checkbox = React.forwardRef(
         id,
         disabled,
         ...checked !== void 0 ? { checked } : {},
-        className: cn(checkboxVariants({ size, isError }), !label && className),
+        className: cn(
+          checkboxVariants({ size, isError }),
+          shouldAnimate ? "transition-all" : "transition-none",
+          !label && className
+        ),
         style: !label ? style : void 0,
         ...props,
         children: /* @__PURE__ */ jsxs(

package/dist/components/Checkbox/Checkbox.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const checkboxVariants = cva(
-  "peer shrink-0 rounded-[2px] border border-grey-300 dark:border-grey-600 bg-grey-50 dark:bg-grey-900 transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-grey-50 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-grey-50 cursor-pointer flex items-center justify-center",
+  "peer shrink-0 rounded-[2px] border border-grey-300 dark:border-grey-600 bg-grey-50 dark:bg-grey-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-grey-50 data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-grey-50 cursor-pointer flex items-center justify-center",
   {
     variants: {
       size: {

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

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import type * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import type { CheckboxVariants } from './Checkbox.styles';
+import type { MotionProp } from '../../types/motion';
 export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'size'>, CheckboxVariants {
     /**
      * Primary label text displayed next to the checkbox.
@@ -18,5 +19,7 @@ export interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeo
      * Custom className for the outer container wrapper.
      */
     containerClassName?: string;
+    /** Override animation behaviour. `false` disables transitions; omit to inherit global setting. */
+    motion?: MotionProp;
 }
 //# sourceMappingURL=Checkbox.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,WAAW,aACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EAC7D,MAAM,CACP,EACD,gBAAgB;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}
+{"version":3,"file":"Checkbox.types.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AACnE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,WAAW,aACf,SAAQ,IAAI,CACR,KAAK,CAAC,wBAAwB,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,EAC7D,MAAM,CACP,EACD,gBAAgB;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kGAAkG;IAClG,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB"}

package/dist/components/Chip/Chip.js

@@ -70,7 +70,7 @@ const Chip = React.forwardRef(
               tabIndex: isInteractive ? -1 : void 0,
               onClick: handleRemove,
               "aria-label": removeLabel,
-              className: "shrink-0 -mr-1 size-4 rounded-full inline-flex items-center justify-center opacity-70 hover:opacity-100 hover:bg-grey-1000/10 dark:hover:bg-grey-50/20 transition-all cursor-pointer focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              className: "shrink-0 -mr-1 min-w-[28px] min-h-[28px] rounded-full inline-flex items-center justify-center opacity-70 hover:opacity-100 hover:bg-grey-1000/10 dark:hover:bg-grey-50/20 transition-all cursor-pointer focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
               children: /* @__PURE__ */ jsx(X, { className: "size-3" })
             }
           )

package/dist/components/Dialog/Dialog.js

@@ -45,7 +45,7 @@ const DialogContent = React.forwardRef(({ className, children, motion, ...props
             DialogPrimitive.Close,
             {
               "data-slot": "dialog-close",
-              className: "absolute right-4 top-4 z-20 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",
+              className: "absolute right-3 top-3 z-20 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
               children: [
                 /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })

package/dist/components/Drawer/Drawer.js

@@ -53,7 +53,7 @@ const DrawerContent = React.forwardRef(({ className, children, side = "right", s
             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",
+              className: "absolute right-3 top-3 flex items-center justify-center min-w-[44px] min-h-[44px] rounded-sm text-muted hover:text-foreground opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus-visible:ring-2 focus-visible:ring-primary cursor-pointer",
               children: [
                 /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
                 /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })

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

@@ -1 +1 @@
-{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../../src/components/FilterChips/FilterChips.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAExE;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,EAAE,EAC7D,KAAK,EACL,QAAQ,EACR,UAAU,EACV,aAA2B,EAC3B,WAA0C,EAC1C,SAAS,GACV,EAAE,gBAAgB,CAAC,CAAC,CAAC,4BA8BrB"}
+{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../../src/components/FilterChips/FilterChips.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAExE;;;GAGG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,EAAE,EAC7D,KAAK,EACL,QAAQ,EACR,UAAU,EACV,aAA2B,EAC3B,WAA0C,EAC1C,SAAS,GACV,EAAE,gBAAgB,CAAC,CAAC,CAAC,4BA0BrB"}

package/dist/components/FilterChips/FilterChips.js

@@ -2,6 +2,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { cn } from '@timmbr/utils';
 import { Chip } from '../Chip/Chip.js';
+import { Button } from '../Button/Button.js';
 
 function FilterChips({
   chips,
@@ -22,15 +23,7 @@ function FilterChips({
       ),
       children: [
         /* @__PURE__ */ jsx("ul", { className: "flex shrink-0 items-center gap-2 sm:flex-wrap", children: chips.map((chip) => /* @__PURE__ */ jsx("li", { className: "shrink-0", children: /* @__PURE__ */ jsx(Chip, { color: "primary", onRemove: () => onRemove(chip), removeLabel: removeLabel(String(chip.label)), children: chip.label }) }, chip.id)) }),
-        onClearAll && chips.length > 1 && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onClearAll,
-            className: "shrink-0 rounded-sm px-1 font-sans text-body-3 font-semibold text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            children: clearAllLabel
-          }
-        )
+        onClearAll && chips.length > 1 && /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", className: "shrink-0", onClick: onClearAll, children: clearAllLabel })
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FilterPanel/FilterPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,qBAAqB,EAAE,iBAYnC,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,gBAAgB,GAAI,QAAQ,YAAY,YAAgE,CAAC;AActH;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,KAAS,EACT,eAAoB,EACpB,MAAM,EAAE,cAAc,EACtB,SAAS,GACV,EAAE,qBAAqB,qBA2DvB;AAED,uDAAuD;AACvD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,4BAmBA;AAED,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,MAAM,EAAE,cAAc,EACtB,aAAa,EACb,WAAkB,GACnB,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,qBAkCA;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,yFA2FvB,CAAC"}
+{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../src/components/FilterPanel/FilterPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B,OAAO,EAEL,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAC;AAE7B,eAAO,MAAM,qBAAqB,EAAE,iBAYnC,CAAC;AAEF,iGAAiG;AACjG,eAAO,MAAM,gBAAgB,GAAI,QAAQ,YAAY,YAAgE,CAAC;AActH;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,KAAS,EACT,eAAoB,EACpB,MAAM,EAAE,cAAc,EACtB,SAAS,GACV,EAAE,qBAAqB,qBA2DvB;AAED,uDAAuD;AACvD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,4BAmBA;AAED,gFAAgF;AAChF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,MAAM,EAAE,cAAc,EACtB,aAAa,EACb,WAAkB,GACnB,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,kFAAkF;IAClF,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,qBAkCA;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,yFA4FvB,CAAC"}

package/dist/components/FilterPanel/FilterPanel.js

@@ -3,10 +3,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Search } from '@timmbr/icons';
 import { cn } from '@timmbr/utils';
-import { filterOptionRowVariants, filterLinkButtonVariants, filterPanelTitleVariants, filterPanelHeaderVariants, filterToggleListVariants, filterSectionTriggerVariants, filterSectionContentVariants, filterPanelBodyVariants, filterPanelVariants, filterOptionCountVariants, filterOptionLabelVariants } from './FilterPanel.styles.js';
+import { filterOptionRowVariants, filterPanelTitleVariants, filterPanelHeaderVariants, filterToggleListVariants, filterSectionTriggerVariants, filterSectionContentVariants, filterPanelBodyVariants, filterPanelVariants, filterOptionCountVariants, filterOptionLabelVariants } from './FilterPanel.styles.js';
 import { PRICE_GROUP_KEY } from './FilterPanel.types.js';
 import { Input } from '../Input/Input.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
+import { Button } from '../Button/Button.js';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '../Accordion/Accordion.js';
 import { RangeSlider } from '../RangeSlider/RangeSlider.js';
 import { Switch } from '../Switch/Switch.js';
@@ -88,10 +89,10 @@ function FilterOptionList({
       visible.length === 0 && /* @__PURE__ */ jsx("li", { className: "text-body-3 text-grey-500", children: labels.noMatches })
     ] }),
     !needle && (hidden > 0 || expanded) && matching.length > limit && /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
-        type: "button",
-        className: filterLinkButtonVariants(),
+        variant: "link",
+        size: "sm",
         "aria-expanded": expanded,
         onClick: () => setExpanded((e) => !e),
         children: expanded ? labels.showLess : labels.showMore(hidden)
@@ -208,10 +209,11 @@ const FilterPanel = React.forwardRef(
               ] }) }),
               /* @__PURE__ */ jsxs(AccordionContent, { className: filterSectionContentVariants(), children: [
                 count > 0 && onClearGroup && /* @__PURE__ */ jsx(
-                  "button",
+                  Button,
                   {
-                    type: "button",
-                    className: cn(filterLinkButtonVariants(), "mb-3"),
+                    variant: "link",
+                    size: "sm",
+                    className: "mb-3",
                     onClick: () => onClearGroup(group.key),
                     children: labels.clear
                   }

package/dist/components/ImageUpload/subcomponents/ImageUploadThumbnailCard.js

@@ -51,7 +51,7 @@ const ImageUploadThumbnailCard = ({
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 z-10 flex items-center gap-1.5 pointer-events-none", children: index === 0 ? /* @__PURE__ */ jsxs("div", { className: "bg-grey-1000/65 backdrop-blur-md text-grey-50 text-caption font-semibold px-2 py-0.5 rounded-full border border-grey-50/20 shadow-md flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-success shadow-[0_0_6px_rgba(52,211,153,0.8)]" }),
+          /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-success shadow-[0_0_6px_color-mix(in_srgb,var(--color-success)_80%,transparent)]" }),
           /* @__PURE__ */ jsx("span", { children: "Cover" })
         ] }) : /* @__PURE__ */ jsxs("div", { className: "bg-grey-1000/55 backdrop-blur-md text-grey-50/90 text-caption font-medium px-2 py-0.5 rounded-full border border-grey-50/10 shadow-sm", children: [
           "#",

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

@@ -1 +1 @@
-{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,oFAoDlB,CAAC"}
+{"version":3,"file":"Inline.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,oFAqDlB,CAAC"}

package/dist/components/Inline/Inline.js

@@ -17,11 +17,12 @@ const Inline = React.forwardRef(
     justify = "start",
     wrap = true,
     divider,
+    as,
     asChild = false,
     children,
     ...props
   }, ref) => {
-    const Component = asChild ? Slot : "div";
+    const Component = asChild ? Slot : as ?? "div";
     const gapClass = formatGap(gap);
     const renderChildren = () => {
       if (!divider) return children;

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

@@ -14,6 +14,11 @@ export interface InlineProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * Optional divider element rendered between each inline child.
      */
     divider?: React.ReactNode;
+    /**
+     * Renders as a different HTML element or component while keeping Inline styles.
+     * e.g. `as="nav"`, `as="footer"`. Ignored when `asChild` is true.
+     */
+    as?: React.ElementType;
     /**
      * If true, renders child element via Radix Slot.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"Inline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC;IAC7B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"Inline.types.d.ts","sourceRoot":"","sources":["../../../src/components/Inline/Inline.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,EACvD,IAAI,CAAC,cAAc,EAAE,KAAK,CAAC;IAC7B;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB,kEAAkE;IAClE,MAAM,CAAC,EAAE,QAAQ,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}

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

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

package/dist/components/Input/Input.js

@@ -112,7 +112,8 @@ const Input = React.forwardRef(
                     {
                       htmlFor: id,
                       className: cn(
-                        "absolute pointer-events-none transition-all duration-200 select-none truncate max-w-full z-10",
+                        "absolute pointer-events-none select-none truncate max-w-full z-10",
+                        shouldAnimate ? "transition-all duration-200" : "transition-none",
                         isFloatingActive ? "-top-2.5 left-0 px-1 bg-grey-50 dark:bg-grey-900 text-caption-lg font-semibold leading-none rounded-xs" : "top-1/2 -translate-y-1/2 left-0 text-body-2 text-muted-foreground leading-none"
                       ),
                       style: {

package/dist/components/NavFooter/NavFooter.styles.js

@@ -6,7 +6,7 @@ const navFooterRootVariants = cva(
     variants: {
       tone: {
         dark: "bg-surface-dark text-bg-2",
-        light: "bg-[var(--color-bg-2,#F7F1E6)] text-[var(--color-grey-800,#3C3C3C)] border-t border-border-warm"
+        light: "bg-bg-2 text-grey-800 border-t border-border-warm"
       }
     },
     defaultVariants: {

package/dist/components/NavFooter/subcomponents/FooterBrand.js

@@ -25,7 +25,7 @@ const DefaultFooterWordmark = ({ className }) => /* @__PURE__ */ jsxs(
         {
           x: "0",
           y: "38",
-          fill: "#D39375",
+          fill: "currentColor",
           fontFamily: "Outfit, sans-serif",
           fontWeight: "700",
           fontSize: "40",

package/dist/components/NavHeader/NavHeader.js

@@ -504,7 +504,7 @@ const NavHeader = React.forwardRef(
                 ]
               }
             ),
-            isSearchVisible && resolvedMobileSearchMode !== "icon" && /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-6 pb-2.5 pt-0.5 bg-[var(--color-bg-2,#F7F1E6)]", children: /* @__PURE__ */ jsxs(
+            isSearchVisible && resolvedMobileSearchMode !== "icon" && /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-6 pb-2.5 pt-0.5 bg-bg-2", children: /* @__PURE__ */ jsxs(
               "button",
               {
                 type: "button",

package/dist/components/NavHeader/NavHeader.styles.js

@@ -4,11 +4,11 @@ const offerBannerVariants = cva(
   "w-full bg-surface-dark text-bg-2 font-title! text-body-3 font-semibold uppercase tracking-[0.14em] py-2 px-4 flex items-center justify-center relative transition-all duration-200 z-50 border-b border-grey-1000/20"
 );
 const navHeaderVariants = cva(
-  "w-full bg-[var(--color-bg-2,#F7F1E6)] text-[var(--color-grey-800,#3C3C3C)] border-b border-border-warm relative z-40 transition-colors",
+  "w-full bg-bg-2 text-grey-800 border-b border-border-warm relative z-40 transition-colors",
   {
     variants: {
       sticky: {
-        true: "sticky top-0 shadow-sm backdrop-blur-md bg-[var(--color-bg-2,#F7F1E6)]/95",
+        true: "sticky top-0 shadow-sm backdrop-blur-md bg-bg-2/95",
         false: "relative"
       }
     },
@@ -110,7 +110,7 @@ const actionOverflowItemVariants = cva(
   }
 );
 const mobileTabSliderVariants = cva(
-  "w-full overflow-x-auto flex items-center gap-6 px-4 py-2 border-b border-border-warm bg-[var(--color-bg-2,#F7F1E6)] select-none scroll-smooth [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+  "w-full overflow-x-auto flex items-center gap-6 px-4 py-2 border-b border-border-warm bg-bg-2 select-none scroll-smooth [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
 );
 const mobileTabItemVariants = cva(
   "relative text-body-3 sm:text-body-2 tracking-tight whitespace-nowrap py-1.5 px-1 font-semibold transition-colors cursor-pointer select-none",
@@ -135,7 +135,7 @@ const mobileTabContentPanelVariants = cva(
   "w-full bg-grey-50 border-b border-border-warm shadow-md overflow-hidden"
 );
 const mobileSearchDrawerVariants = cva(
-  "fixed inset-0 z-[9999] h-[100dvh] w-screen bg-[var(--color-bg-2,#F7F1E6)] flex flex-col overflow-hidden"
+  "fixed inset-0 z-[9999] h-[100dvh] w-screen bg-bg-2 flex flex-col overflow-hidden"
 );
 
 export { actionOverflowItemVariants, actionOverflowPopoverVariants, megaMenuCardVariants, mobileSearchDrawerVariants, mobileTabContentPanelVariants, mobileTabItemVariants, mobileTabSliderVariants, navActionVariants, navHeaderContainerVariants, navHeaderItemVariants, navHeaderVariants, offerBannerVariants, searchPanelOptionVariants, searchPanelSectionTitleVariants, searchPanelTextButtonVariants, searchPopoverCardVariants };

package/dist/components/PageProgress/PageProgress.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { PageProgressProps } from './PageProgress.types';
+/**
+ * NProgress-style slim line fixed at the very top of the viewport. Mount it (or set
+ * `loading={true}`) to show; unmount (or `loading={false}`) to fade out.
+ *
+ * Indeterminate mode (no `progress`): the bar sweeps left-to-right continuously until
+ * loading ends, matching the Progress component's indeterminate style.
+ * Determinate mode (`progress` 0–100): bar grows to the given percentage.
+ */
+export declare const PageProgress: React.ForwardRefExoticComponent<PageProgressProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=PageProgress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageProgress.d.ts","sourceRoot":"","sources":["../../../src/components/PageProgress/PageProgress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,0FA0DxB,CAAC"}

package/dist/components/PageProgress/PageProgress.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { resolveMotion } from '../../types/motion.js';
+import { pageProgressBarVariants, pageProgressVariants } from './PageProgress.styles.js';
+import { useGlobalAnimation } from '../../providers/AnimationProvider.js';
+
+const PageProgress = React.forwardRef(
+  ({ loading = true, progress, height = 3, zIndex = 9999, color = "bg-primary", motion }, ref) => {
+    const globalMotion = useGlobalAnimation();
+    const { shouldAnimate } = resolveMotion(motion, globalMotion);
+    const isIndeterminate = progress === void 0;
+    const safeProgress = isIndeterminate ? void 0 : Math.min(Math.max(progress, 0), 100);
+    const [visible, setVisible] = React.useState(loading);
+    const [fading, setFading] = React.useState(false);
+    React.useEffect(() => {
+      if (loading) {
+        setVisible(true);
+        setFading(false);
+      } else if (visible) {
+        if (!shouldAnimate) {
+          setVisible(false);
+          return;
+        }
+        setFading(true);
+        const t = setTimeout(() => {
+          setVisible(false);
+          setFading(false);
+        }, 350);
+        return () => clearTimeout(t);
+      }
+    }, [loading, shouldAnimate]);
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": safeProgress,
+        "aria-label": "Page loading",
+        "data-slot": "page-progress",
+        style: { height, zIndex },
+        className: pageProgressVariants({ fading: fading && shouldAnimate }),
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "page-progress-bar",
+            className: cn(
+              pageProgressBarVariants({
+                indeterminate: isIndeterminate && !fading,
+                animated: shouldAnimate
+              }),
+              color,
+              !isIndeterminate && shouldAnimate && "transition-[width] duration-300 ease-out"
+            ),
+            style: isIndeterminate ? void 0 : { width: `${safeProgress}%` }
+          }
+        )
+      }
+    );
+  }
+);
+PageProgress.displayName = "PageProgress";
+
+export { PageProgress };

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

@@ -0,0 +1,8 @@
+export declare const pageProgressVariants: (props?: ({
+    fading?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const pageProgressBarVariants: (props?: ({
+    indeterminate?: boolean | null | undefined;
+    animated?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//# sourceMappingURL=PageProgress.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageProgress.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageProgress/PageProgress.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;;8EAWhC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;8EAenC,CAAC"}