@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/Pagination/Pagination.js

@@ -1,14 +1,15 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@timmbr/utils';
-import { MoreHorizontal, ChevronRight, ChevronLeft } from '@timmbr/icons';
+import { MoreHorizontal, ChevronLeft, ChevronRight } from '@timmbr/icons';
 import { paginationLinkVariants } from './Pagination.styles.js';
+import { Text } from '../Text/Text.js';
 
 const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "nav",
   {
-    role: "navigation",
     "aria-label": "pagination",
     "data-slot": "pagination",
     className: cn("mx-auto flex w-full justify-center font-sans", className),
@@ -33,52 +34,72 @@ const PaginationItem = React.forwardRef(
 );
 PaginationItem.displayName = "PaginationItem";
 const PaginationLink = React.forwardRef(
-  ({ className, isActive, size = "default", ...props }, ref) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      "aria-current": isActive ? "page" : void 0,
-      "data-slot": "pagination-link",
-      "data-active": isActive,
-      className: cn(paginationLinkVariants({ isActive, size }), className),
-      ...props
-    }
-  )
+  ({ className, isActive, size = "default", asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        ...asChild ? {} : { type: "button" },
+        "aria-current": isActive ? "page" : void 0,
+        "data-slot": "pagination-link",
+        "data-active": isActive,
+        className: cn(paginationLinkVariants({ isActive, size }), className),
+        ...props
+      }
+    );
+  }
 );
 PaginationLink.displayName = "PaginationLink";
-const PaginationPrevious = ({
+const DefaultLink = ({ href, children, ...rest }) => /* @__PURE__ */ jsx("a", { href, ...rest, children });
+function StepLink({
+  direction,
+  href,
+  linkComponent: LinkComponent = DefaultLink,
+  label,
+  ariaLabel,
+  disabled,
   className,
+  children,
   ...props
-}) => /* @__PURE__ */ jsxs(
-  PaginationLink,
-  {
-    "aria-label": "Go to previous page",
-    className: cn("gap-1 pl-2.5", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4" }),
-      /* @__PURE__ */ jsx("span", { children: "Previous" })
-    ]
+}) {
+  const icon = direction === "previous" ? /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" });
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    direction === "previous" && icon,
+    /* @__PURE__ */ jsx("span", { children: children ?? label }),
+    direction === "next" && icon
+  ] });
+  const classes = cn("gap-1", direction === "previous" ? "pl-2.5" : "pr-2.5", className);
+  if (href && !disabled) {
+    return /* @__PURE__ */ jsx(PaginationLink, { asChild: true, "aria-label": ariaLabel, className: classes, ...props, children: /* @__PURE__ */ jsx(LinkComponent, { href, children: content }) });
   }
-);
+  return /* @__PURE__ */ jsx(PaginationLink, { "aria-label": ariaLabel, disabled, className: classes, ...props, children: content });
+}
+const PaginationPrevious = ({
+  label = "Previous",
+  ariaLabel = "Go to previous page",
+  ...props
+}) => /* @__PURE__ */ jsx(StepLink, { direction: "previous", label, ariaLabel, ...props });
 PaginationPrevious.displayName = "PaginationPrevious";
 const PaginationNext = ({
-  className,
+  label = "Next",
+  ariaLabel = "Go to next page",
   ...props
-}) => /* @__PURE__ */ jsxs(
-  PaginationLink,
+}) => /* @__PURE__ */ jsx(StepLink, { direction: "next", label, ariaLabel, ...props });
+PaginationNext.displayName = "PaginationNext";
+const PaginationSummary = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Text,
   {
-    "aria-label": "Go to next page",
-    className: cn("gap-1 pr-2.5", className),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("span", { children: "Next" }),
-      /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
-    ]
+    as: "span",
+    variant: "body-2",
+    foreground: "muted",
+    "aria-live": "polite",
+    "data-slot": "pagination-summary",
+    className: cn("px-2", className),
+    ...props
   }
 );
-PaginationNext.displayName = "PaginationNext";
+PaginationSummary.displayName = "PaginationSummary";
 const PaginationEllipsis = ({
   className,
   ...props
@@ -97,4 +118,4 @@ const PaginationEllipsis = ({
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
-export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, PaginationSummary };

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

@@ -1,5 +1,5 @@
 export declare const paginationLinkVariants: (props?: ({
     isActive?: boolean | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //# sourceMappingURL=Pagination.styles.d.ts.map

package/dist/components/Pagination/Pagination.styles.js

@@ -1,17 +1,17 @@
 import { cva } from 'class-variance-authority';
 
 const paginationLinkVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-[2px] font-sans text-xs font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer active:scale-95",
+  "inline-flex items-center justify-center whitespace-nowrap rounded-[2px] text-body-3 font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer active:scale-95",
   {
     variants: {
       isActive: {
-        true: "bg-primary text-white shadow-xs hover:bg-primary-600",
+        true: "bg-primary text-grey-50 shadow-xs hover:bg-primary-600",
         false: "text-foreground hover:bg-grey-100 dark:hover:bg-grey-800 border border-grey-200 dark:border-grey-800"
       },
       size: {
         sm: "h-8 min-w-8 px-2",
         default: "h-9 min-w-9 px-3",
-        lg: "h-11 min-w-11 px-4 text-sm"
+        lg: "h-11 min-w-11 px-4 text-body-2"
       }
     },
     defaultVariants: {

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

@@ -68,24 +68,32 @@ export interface PaginationLinkProps extends React.ButtonHTMLAttributes<HTMLButt
      */
     children?: React.ReactNode;
 }
-/**
- * Previous page action button.
- */
-export interface PaginationPreviousProps extends PaginationLinkProps {
-    /**
-     * Custom label or override text for Previous button.
-     */
+/** Props of the link component used by Previous / Next (e.g. next/link). */
+export interface PaginationLinkComponentProps {
+    href: string;
     children?: React.ReactNode;
+    className?: string;
+}
+interface PaginationStepProps extends Omit<PaginationLinkProps, 'asChild'> {
+    /** Page URL: renders a link (URL-based paging) instead of a button. */
+    href?: string;
+    /** Link to render `href` with (e.g. next/link). Defaults to `<a>`. */
+    linkComponent?: React.ComponentType<PaginationLinkComponentProps>;
+    /** Visible text (localise it). */
+    label?: React.ReactNode;
+    /** Accessible name (localise it). */
+    ariaLabel?: string;
 }
 /**
- * Next page action button.
+ * Previous page action (link with `href`, otherwise a button).
  */
-export interface PaginationNextProps extends PaginationLinkProps {
-    /**
-     * Custom label or override text for Next button.
-     */
-    children?: React.ReactNode;
-}
+export type PaginationPreviousProps = PaginationStepProps;
+/**
+ * Next page action (link with `href`, otherwise a button).
+ */
+export type PaginationNextProps = PaginationStepProps;
+/** "Page x of y" text. */
+export type PaginationSummaryProps = React.ComponentProps<'span'>;
 /**
  * Decorative ellipsis indicator representing omitted pages in the range.
  */
@@ -95,4 +103,5 @@ export interface PaginationEllipsisProps extends React.ComponentProps<'span'> {
      */
     className?: string;
 }
+export {};
 //# sourceMappingURL=Pagination.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.types.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAClE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;IACxE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;IACrE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,mBAAmB;IAClE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IAC3E;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"Pagination.types.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IAClE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;IACxE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC;IACrE;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;IAC/B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,4EAA4E;AAC5E,MAAM,WAAW,4BAA4B;IAC3C,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC;IACxE,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,4BAA4B,CAAC,CAAC;IAClE,kCAAkC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,mBAAmB,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,mBAAmB,CAAC;AAEtD,0BAA0B;AAC1B,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;AAElE;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC;IAC3E;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/components/Popover/Popover.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const popoverContentVariants = cva(
-  "z-50 w-72 rounded-md border border-grey-200 dark:border-grey-700 bg-white dark:bg-grey-900 p-4 text-foreground shadow-md outline-none font-sans transition-all duration-150 data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out"
+  "z-50 w-72 rounded-md border border-grey-200 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 p-4 text-foreground shadow-md outline-none font-sans transition-all duration-150 data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out"
 );
 
 export { popoverContentVariants };

package/dist/components/Price/Price.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { PriceProps } from './Price.types';
+/** Whole-number saving of `amount` against `compareAt`, or `null` when there is none. */
+export declare function discountPercent(amount: number, compareAt?: number | null): number | null;
+/**
+ * A price with an optional struck-through original price and the saving,
+ * e.g. ₹32,999 ~~₹66,999~~ 51% Off.
+ */
+export declare const Price: React.ForwardRefExoticComponent<PriceProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Price.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Price.d.ts","sourceRoot":"","sources":["../../../src/components/Price/Price.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,yFAAyF;AACzF,wBAAgB,eAAe,CAAC,MAAM,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAIxF;AAID;;;GAGG;AACH,eAAO,MAAM,KAAK,mFAwCjB,CAAC"}

package/dist/components/Price/Price.js

@@ -0,0 +1,49 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { formatCurrency, cn } from '@timmbr/utils';
+import { priceAmountVariants, priceCompareVariants, priceDiscountVariants, priceVariants } from './Price.styles.js';
+
+function discountPercent(amount, compareAt) {
+  if (compareAt == null || compareAt <= 0 || compareAt <= amount) return null;
+  const percent = Math.round((compareAt - amount) / compareAt * 100);
+  return percent > 0 ? percent : null;
+}
+const defaultFormatDiscount = (percent) => `${percent}% Off`;
+const Price = React.forwardRef(
+  ({
+    amount,
+    compareAt,
+    currency = "INR",
+    locale = "en-IN",
+    showDiscount = true,
+    formatDiscount = defaultFormatDiscount,
+    srLabels,
+    size,
+    className,
+    ...props
+  }, ref) => {
+    const percent = discountPercent(amount, compareAt);
+    return /* @__PURE__ */ jsxs("div", { ref, "data-slot": "price", className: cn(priceVariants({ size }), className), ...props, children: [
+      /* @__PURE__ */ jsxs("span", { className: priceAmountVariants({ size }), "data-slot": "price-amount", children: [
+        srLabels?.price && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          srLabels.price,
+          " "
+        ] }),
+        formatCurrency(amount, currency, locale)
+      ] }),
+      percent !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("s", { className: priceCompareVariants({ size }), "data-slot": "price-compare", children: [
+          srLabels?.compareAt && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            srLabels.compareAt,
+            " "
+          ] }),
+          formatCurrency(compareAt, currency, locale)
+        ] }),
+        showDiscount && /* @__PURE__ */ jsx("span", { className: priceDiscountVariants({ size }), "data-slot": "price-discount", children: formatDiscount(percent) })
+      ] })
+    ] });
+  }
+);
+Price.displayName = "Price";
+
+export { Price, discountPercent };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Price.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Price/Price.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;8EASxB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;8EAS9B,CAAC;AAEH,eAAO,MAAM,oBAAoB;;8EAS/B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;8EAShC,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/Price/Price.styles.js

@@ -0,0 +1,44 @@
+import { cva } from 'class-variance-authority';
+
+const priceVariants = cva("inline-flex flex-wrap items-baseline font-sans text-foreground", {
+  variants: {
+    size: {
+      sm: "gap-x-1.5",
+      md: "gap-x-1",
+      lg: "gap-x-2"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+const priceAmountVariants = cva("font-semibold", {
+  variants: {
+    size: {
+      sm: "text-body-1",
+      md: "text-subtitle-1",
+      lg: "text-h5 font-sans"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+const priceCompareVariants = cva("text-muted-foreground line-through", {
+  variants: {
+    size: {
+      sm: "text-body-3",
+      md: "text-body-3",
+      lg: "text-body-2"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+const priceDiscountVariants = cva("font-semibold text-success", {
+  variants: {
+    size: {
+      sm: "text-body-3",
+      md: "ms-1 text-body-2",
+      lg: "text-body-1"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+
+export { priceAmountVariants, priceCompareVariants, priceDiscountVariants, priceVariants };

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

@@ -0,0 +1,22 @@
+import type * as React from 'react';
+import type { PriceVariants } from './Price.styles';
+export interface PriceProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, PriceVariants {
+    /** Selling price. */
+    amount: number;
+    /** Original price; shown struck through when higher than `amount`. */
+    compareAt?: number | null;
+    /** ISO 4217 code (default `INR`). */
+    currency?: string;
+    /** BCP 47 locale for formatting (default `en-IN`). */
+    locale?: string;
+    /** Show the saving as a percentage, e.g. "51% Off" (default `true`). */
+    showDiscount?: boolean;
+    /** Text of the discount, from the rounded percentage (default `"51% Off"`). */
+    formatDiscount?: (percent: number) => string;
+    /** Screen-reader prefixes for the two prices. */
+    srLabels?: {
+        price?: string;
+        compareAt?: string;
+    };
+}
+//# sourceMappingURL=Price.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Price.types.d.ts","sourceRoot":"","sources":["../../../src/components/Price/Price.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAEpD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,aAAa;IACvG,qBAAqB;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wEAAwE;IACxE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,+EAA+E;IAC/E,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC;IAC7C,iDAAiD;IACjD,QAAQ,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACnD"}

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

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

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

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

package/dist/components/Progress/Progress.js

@@ -24,9 +24,9 @@ const Progress = React.forwardRef(
     const safeValue = Math.min(Math.max(value ?? 0, 0), max);
     const percentage = Math.round(safeValue / max * 100);
     return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5 w-full font-sans", className), children: [
-      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-xs text-foreground font-medium select-none", children: [
+      (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-body-3 text-foreground font-medium select-none", children: [
         label && /* @__PURE__ */ jsx("span", { children: label }),
-        showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground font-mono ml-auto", children: [
+        showValue && !indeterminate && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground tabular-nums ml-auto", children: [
           percentage,
           "%"
         ] })

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

@@ -1,6 +1,6 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const progressRootVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const progressIndicatorVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "primary" | null | undefined;

package/dist/components/Radio/Radio.js

@@ -50,13 +50,13 @@ const RadioItem = React.forwardRef(
           {
             htmlFor: id,
             className: cn(
-              "text-sm font-medium text-foreground cursor-pointer leading-tight",
+              "text-body-2 font-medium text-foreground cursor-pointer leading-tight",
               disabled && "opacity-50 cursor-not-allowed"
             ),
             children: label
           }
         ),
-        description && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground mt-0.5 leading-normal", children: description })
+        description && /* @__PURE__ */ jsx("span", { className: "text-body-3 text-muted-foreground mt-0.5 leading-normal", children: description })
       ] })
     ] });
   }
@@ -79,7 +79,7 @@ const RadioGroup = React.forwardRef(
     const isError = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
     return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 font-sans w-full", style, children: [
-      label && /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold text-foreground tracking-wide select-none", children: label }),
+      label && /* @__PURE__ */ jsx("span", { className: "text-body-3 font-semibold text-foreground tracking-wide select-none", children: label }),
       /* @__PURE__ */ jsx(
         RadioGroupPrimitive.Root,
         {
@@ -110,7 +110,7 @@ const RadioGroup = React.forwardRef(
         "p",
         {
           className: cn(
-            "text-xs mt-1 flex items-center gap-1.5",
+            "text-body-3 mt-1 flex items-center gap-1.5",
             isError ? "text-destructive font-medium" : "text-muted"
           ),
           children: [

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

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

package/dist/components/Radio/Radio.styles.js

@@ -1,7 +1,7 @@
 import { cva } from 'class-variance-authority';
 
 const radioItemVariants = cva(
-  "aspect-square rounded-full border border-grey-300 dark:border-grey-700 bg-white dark:bg-grey-900 text-primary transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer flex items-center justify-center data-[state=checked]:border-primary",
+  "aspect-square rounded-full border border-grey-300 dark:border-grey-700 bg-grey-50 dark:bg-grey-900 text-primary transition-all duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer flex items-center justify-center data-[state=checked]:border-primary",
   {
     variants: {
       size: {

package/dist/components/RangeSlider/RangeSlider.js

@@ -57,7 +57,7 @@ const RangeSlider = React.forwardRef(
         className: cn("flex flex-col gap-2 w-full font-sans select-none", className),
         style,
         children: [
-          (label || showReadouts) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
+          (label || showReadouts) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-body-2", children: [
             label && /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: label }),
             showReadouts && /* @__PURE__ */ jsxs(
               "div",
@@ -112,7 +112,7 @@ const RangeSlider = React.forwardRef(
                 type: "button",
                 onClick: handleReset,
                 disabled,
-                className: "text-xs font-medium text-muted hover:text-foreground transition-colors cursor-pointer disabled:opacity-50",
+                className: "text-body-3 font-medium text-muted hover:text-foreground transition-colors cursor-pointer disabled:opacity-50",
                 children: resetLabel
               }
             ),
@@ -123,7 +123,7 @@ const RangeSlider = React.forwardRef(
                 variant: "primary",
                 onClick: handleApply,
                 disabled,
-                className: "h-8 px-4 text-xs font-medium",
+                className: "h-8 px-4 text-body-3 font-medium",
                 children: applyLabel
               }
             )

package/dist/components/RangeSlider/RangeSlider.styles.js

@@ -10,7 +10,7 @@ const rangeSliderRangeVariants = cva(
   "absolute h-full bg-primary rounded-full"
 );
 const rangeSliderThumbVariants = cva(
-  "block h-5 w-5 rounded-full border-2 border-primary bg-white shadow-md transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing"
+  "block h-5 w-5 rounded-full border-2 border-primary bg-grey-50 shadow-md transition-transform hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing"
 );
 
 export { rangeSliderRangeVariants, rangeSliderRootVariants, rangeSliderThumbVariants, rangeSliderTrackVariants };

package/dist/components/Rating/Rating.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { RatingProps } from './Rating.types';
+/** Read-only average rating: "4.5 ★ (817)". */
+export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Rating.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,+CAA+C;AAC/C,eAAO,MAAM,MAAM,oFA4BlB,CAAC"}

package/dist/components/Rating/Rating.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { cn } from '@timmbr/utils';
+import { Star } from '@timmbr/icons';
+import { ratingVariants } from './Rating.styles.js';
+
+const Rating = React.forwardRef(
+  ({ value, max = 5, count, locale = "en-IN", label, size, className, ...props }, ref) => {
+    const shown = new Intl.NumberFormat(locale, { maximumFractionDigits: 1 }).format(value);
+    const counted = count !== void 0 ? new Intl.NumberFormat(locale).format(count) : void 0;
+    const accessibleName = label ?? `Rated ${shown} out of ${max}${counted !== void 0 ? ` from ${counted} ratings` : ""}`;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "img",
+        "aria-label": accessibleName,
+        "data-slot": "rating",
+        className: cn(ratingVariants({ size }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "inline-flex items-center gap-0.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: shown }),
+            /* @__PURE__ */ jsx(Star, { className: "fill-warning text-warning" })
+          ] }),
+          counted !== void 0 && /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "text-muted-foreground", children: [
+            "(",
+            counted,
+            ")"
+          ] })
+        ]
+      }
+    );
+  }
+);
+Rating.displayName = "Rating";
+
+export { Rating };

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

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

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

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

package/dist/components/Rating/Rating.styles.js

@@ -0,0 +1,13 @@
+import { cva } from 'class-variance-authority';
+
+const ratingVariants = cva("inline-flex items-center font-sans text-foreground", {
+  variants: {
+    size: {
+      sm: "gap-1 text-body-3 [&_svg]:size-3.5",
+      md: "gap-1.5 text-body-2 [&_svg]:size-4"
+    }
+  },
+  defaultVariants: { size: "sm" }
+});
+
+export { ratingVariants };

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

@@ -0,0 +1,18 @@
+import type * as React from 'react';
+import type { RatingVariants } from './Rating.styles';
+export interface RatingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, RatingVariants {
+    /** Average rating, e.g. 4.5. */
+    value: number;
+    /** Highest possible rating (default 5). */
+    max?: number;
+    /** Number of ratings or reviews, shown as "(817)". */
+    count?: number;
+    /** BCP 47 locale for the numbers (default `en-IN`). */
+    locale?: string;
+    /**
+     * Accessible description; the visible "4.5 ★ (817)" is hidden from screen
+     * readers. Default: "Rated 4.5 out of 5 from 817 ratings".
+     */
+    label?: string;
+}
+//# sourceMappingURL=Rating.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Rating.types.d.ts","sourceRoot":"","sources":["../../../src/components/Rating/Rating.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAAE,cAAc;IACzG,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

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

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