@techsio/ui-kit 0.52.0 → 0.53.0

package/dist/molecules/availability-status.js

@@ -0,0 +1,99 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "../atoms/icon.js";
+import { Skeleton } from "../atoms/skeleton.js";
+import { tv } from "../utils.js";
+const availabilityStatusVariants = tv({
+    slots: {
+        root: "flex min-w-0 flex-col gap-availability-status",
+        summary: "flex min-w-0 items-start gap-availability-status-summary",
+        icon: "size-availability-status-icon shrink-0 self-start",
+        content: "flex min-w-0 flex-col gap-availability-status-content",
+        label: "break-words font-availability-status-label text-availability-status-label-size",
+        detail: "break-words text-availability-status-detail-fg text-availability-status-detail-size",
+        pending: "w-availability-status-pending max-w-full gap-availability-status-pending",
+        pendingLine: "h-availability-status-pending-line"
+    },
+    variants: {
+        status: {
+            available: {
+                icon: "text-availability-status-fg-available",
+                label: "text-availability-status-fg-available"
+            },
+            limited: {
+                icon: "text-availability-status-fg-limited",
+                label: "text-availability-status-fg-limited"
+            },
+            preorder: {
+                icon: "text-availability-status-fg-preorder",
+                label: "text-availability-status-fg-preorder"
+            },
+            unavailable: {
+                icon: "text-availability-status-fg-unavailable",
+                label: "text-availability-status-fg-unavailable"
+            },
+            unknown: {
+                icon: "text-availability-status-fg-unknown",
+                label: "text-availability-status-fg-unknown"
+            },
+            pending: {}
+        }
+    }
+});
+const defaultIcons = {
+    available: "token-icon-availability-status-available",
+    limited: "token-icon-availability-status-limited",
+    preorder: "token-icon-availability-status-preorder",
+    unavailable: "token-icon-availability-status-unavailable",
+    unknown: "token-icon-availability-status-unknown"
+};
+function AvailabilityStatus({ status, label, detail, icon, showIcon = true, pendingLabel, className, ref, ...props }) {
+    const styles = availabilityStatusVariants({
+        status
+    });
+    return /*#__PURE__*/ jsx("div", {
+        className: styles.root({
+            className
+        }),
+        ...props,
+        "data-status": status,
+        ref: ref,
+        children: "pending" === status ? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    className: "sr-only",
+                    children: pendingLabel
+                }),
+                /*#__PURE__*/ jsx(Skeleton.Text, {
+                    "aria-hidden": "true",
+                    className: styles.pendingLine(),
+                    containerClassName: styles.pending(),
+                    isLoaded: false,
+                    noOfLines: 2,
+                    size: "sm"
+                })
+            ]
+        }) : /*#__PURE__*/ jsxs("div", {
+            className: styles.summary(),
+            children: [
+                showIcon ? /*#__PURE__*/ jsx(Icon, {
+                    className: styles.icon(),
+                    icon: icon ?? defaultIcons[status]
+                }) : null,
+                /*#__PURE__*/ jsxs("div", {
+                    className: styles.content(),
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            className: styles.label(),
+                            children: label
+                        }),
+                        detail ? /*#__PURE__*/ jsx("span", {
+                            className: styles.detail(),
+                            children: detail
+                        }) : null
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { AvailabilityStatus };

package/dist/molecules/price-block.js

@@ -0,0 +1,122 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge } from "../atoms/badge.js";
+import { Skeleton } from "../atoms/skeleton.js";
+import { tv } from "../utils.js";
+const priceBlockVariants = tv({
+    slots: {
+        root: "flex min-w-0 flex-col gap-price-block",
+        primaryRow: "flex min-w-0 flex-wrap items-baseline gap-price-block-primary",
+        prefix: "break-words text-price-block-prefix-fg text-price-block-prefix-size",
+        amount: "break-words font-price-block-amount text-price-block-amount-fg text-price-block-amount-size",
+        original: "break-words text-price-block-original-fg text-price-block-original-size",
+        metadata: "flex min-w-0 flex-wrap items-center gap-price-block-metadata text-price-block-metadata-fg text-price-block-metadata-size",
+        separator: "text-price-block-separator-fg",
+        detail: "break-words text-price-block-detail-fg text-price-block-detail-size",
+        pending: "w-price-block-pending max-w-full gap-price-block-pending",
+        pendingLine: "h-price-block-pending-line"
+    }
+});
+function PriceMetadata({ taxLabel, unitLabel }) {
+    const styles = priceBlockVariants();
+    if (!(taxLabel || unitLabel)) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        className: styles.metadata(),
+        children: [
+            taxLabel ? /*#__PURE__*/ jsx("span", {
+                children: taxLabel
+            }) : null,
+            taxLabel && unitLabel ? /*#__PURE__*/ jsx("span", {
+                "aria-hidden": "true",
+                className: styles.separator(),
+                children: "\xb7"
+            }) : null,
+            unitLabel ? /*#__PURE__*/ jsx("span", {
+                children: unitLabel
+            }) : null
+        ]
+    });
+}
+function PriceBlock({ state, amountLabel, originalLabel, originalSrLabel, discountLabel, taxLabel, unitLabel, prefix, label, detail, pendingLabel, className, ref, ...props }) {
+    const styles = priceBlockVariants();
+    return /*#__PURE__*/ jsxs("div", {
+        className: styles.root({
+            className
+        }),
+        ...props,
+        "data-state": state,
+        ref: ref,
+        children: [
+            "pending" === state ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "sr-only",
+                        children: pendingLabel
+                    }),
+                    /*#__PURE__*/ jsx(Skeleton.Text, {
+                        "aria-hidden": "true",
+                        className: styles.pendingLine(),
+                        containerClassName: styles.pending(),
+                        isLoaded: false,
+                        noOfLines: 2,
+                        size: "sm"
+                    })
+                ]
+            }) : null,
+            "on-request" === state ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: styles.primaryRow(),
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: styles.amount(),
+                            children: label
+                        })
+                    }),
+                    detail ? /*#__PURE__*/ jsx("span", {
+                        className: styles.detail(),
+                        children: detail
+                    }) : null
+                ]
+            }) : null,
+            "known" === state || "from" === state || "discounted" === state ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: styles.primaryRow(),
+                        children: [
+                            "from" === state ? /*#__PURE__*/ jsx("span", {
+                                className: styles.prefix(),
+                                children: prefix
+                            }) : null,
+                            /*#__PURE__*/ jsx("span", {
+                                className: styles.amount(),
+                                children: amountLabel
+                            }),
+                            "discounted" === state ? /*#__PURE__*/ jsxs("del", {
+                                className: styles.original(),
+                                children: [
+                                    /*#__PURE__*/ jsxs("span", {
+                                        className: "sr-only",
+                                        children: [
+                                            originalSrLabel,
+                                            " "
+                                        ]
+                                    }),
+                                    originalLabel
+                                ]
+                            }) : null,
+                            "discounted" === state && discountLabel ? /*#__PURE__*/ jsx(Badge, {
+                                size: "sm",
+                                variant: "discount",
+                                children: discountLabel
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(PriceMetadata, {
+                        taxLabel: taxLabel,
+                        unitLabel: unitLabel
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+export { PriceBlock };

package/dist/src/molecules/availability-status.d.ts

@@ -0,0 +1,37 @@
+/**
+ * AvailabilityStatus — @techsio/ui-kit molecule.
+ *
+ * @component AvailabilityStatus
+ * @componentVersion v1.0.0
+ * @skill availability-status-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ *
+ * Versioning is enforced at commit by scripts/check-skill-sync.mjs: @componentVersion must match
+ * the availability-status-usage skill's component_version and a changelog entry. Bump all three together.
+ */
+import type { HTMLAttributes, Ref } from "react";
+import { type IconType } from "../atoms/icon.js";
+type AvailabilityStatusNativeProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+type SettledAvailability = "available" | "limited" | "preorder" | "unavailable" | "unknown";
+type SettledAvailabilityProps = {
+    status: SettledAvailability;
+    label: string;
+    detail?: string;
+    icon?: IconType;
+    showIcon?: boolean;
+    pendingLabel?: never;
+};
+type PendingAvailabilityProps = {
+    status: "pending";
+    pendingLabel: string;
+    label?: never;
+    detail?: never;
+    icon?: never;
+    showIcon?: never;
+};
+export type AvailabilityStatusProps = AvailabilityStatusNativeProps & (SettledAvailabilityProps | PendingAvailabilityProps);
+export declare function AvailabilityStatus({ status, label, detail, icon, showIcon, pendingLabel, className, ref, ...props }: AvailabilityStatusProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=availability-status.d.ts.map

package/dist/src/molecules/availability-status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-status.d.ts","sourceRoot":"","sources":["../../../src/molecules/availability-status.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAChD,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAqDnD,KAAK,6BAA6B,GAAG,IAAI,CACxC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACV,GAAG;IACH,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CACzB,CAAA;AAED,KAAK,mBAAmB,GACrB,WAAW,GACX,SAAS,GACT,UAAU,GACV,aAAa,GACb,SAAS,CAAA;AAEZ,KAAK,wBAAwB,GAAG;IAC/B,MAAM,EAAE,mBAAmB,CAAA;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,KAAK,CAAA;CACpB,CAAA;AAED,KAAK,wBAAwB,GAAG;IAC/B,MAAM,EAAE,SAAS,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,MAAM,CAAC,EAAE,KAAK,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG,6BAA6B,GAClE,CAAC,wBAAwB,GAAG,wBAAwB,CAAC,CAAA;AAEtD,wBAAgB,kBAAkB,CAAC,EAClC,MAAM,EACN,KAAK,EACL,MAAM,EACN,IAAI,EACJ,QAAe,EACf,YAAY,EACZ,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACR,EAAE,uBAAuB,2CAsCzB"}

package/dist/src/molecules/price-block.d.ts

@@ -0,0 +1,84 @@
+/**
+ * PriceBlock — @techsio/ui-kit molecule.
+ *
+ * @component PriceBlock
+ * @componentVersion v1.0.0
+ * @skill price-block-usage
+ * @changelog libs/ui/stories/changelog/changelog.stories.tsx
+ *
+ * Versioning is enforced at commit by scripts/check-skill-sync.mjs: @componentVersion must match
+ * the price-block-usage skill's component_version and a changelog entry. Bump all three together.
+ */
+import type { HTMLAttributes, Ref } from "react";
+type PriceBlockNativeProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: Ref<HTMLDivElement>;
+};
+type KnownPriceProps = {
+    state: "known";
+    amountLabel: string;
+    taxLabel?: string;
+    unitLabel?: string;
+    prefix?: never;
+    originalLabel?: never;
+    originalSrLabel?: never;
+    discountLabel?: never;
+    label?: never;
+    detail?: never;
+    pendingLabel?: never;
+};
+type FromPriceProps = {
+    state: "from";
+    prefix: string;
+    amountLabel: string;
+    taxLabel?: string;
+    unitLabel?: string;
+    originalLabel?: never;
+    originalSrLabel?: never;
+    discountLabel?: never;
+    label?: never;
+    detail?: never;
+    pendingLabel?: never;
+};
+type DiscountedPriceProps = {
+    state: "discounted";
+    amountLabel: string;
+    originalLabel: string;
+    originalSrLabel: string;
+    discountLabel?: string;
+    taxLabel?: string;
+    unitLabel?: string;
+    prefix?: never;
+    label?: never;
+    detail?: never;
+    pendingLabel?: never;
+};
+type OnRequestPriceProps = {
+    state: "on-request";
+    label: string;
+    detail?: string;
+    amountLabel?: never;
+    originalLabel?: never;
+    originalSrLabel?: never;
+    discountLabel?: never;
+    taxLabel?: never;
+    unitLabel?: never;
+    prefix?: never;
+    pendingLabel?: never;
+};
+type PendingPriceProps = {
+    state: "pending";
+    pendingLabel: string;
+    amountLabel?: never;
+    originalLabel?: never;
+    originalSrLabel?: never;
+    discountLabel?: never;
+    taxLabel?: never;
+    unitLabel?: never;
+    prefix?: never;
+    label?: never;
+    detail?: never;
+};
+export type PriceBlockProps = PriceBlockNativeProps & (KnownPriceProps | FromPriceProps | DiscountedPriceProps | OnRequestPriceProps | PendingPriceProps);
+export declare function PriceBlock({ state, amountLabel, originalLabel, originalSrLabel, discountLabel, taxLabel, unitLabel, prefix, label, detail, pendingLabel, className, ref, ...props }: PriceBlockProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=price-block.d.ts.map

package/dist/src/molecules/price-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-block.d.ts","sourceRoot":"","sources":["../../../src/molecules/price-block.tsx"],"names":[],"mappings":"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"}

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAwRtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAiStD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

package/dist/stories/molecules/availability-status.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AvailabilityStatus, type AvailabilityStatusProps } from "../../src/molecules/availability-status.js";
+declare const meta: Meta<typeof AvailabilityStatus>;
+export default meta;
+type Story = Omit<StoryObj<typeof meta>, "args"> & {
+    args?: Partial<AvailabilityStatusProps>;
+};
+type PlaygroundStory = StoryObj<Extract<AvailabilityStatusProps, {
+    label: string;
+}>>;
+export declare const Playground: PlaygroundStory;
+export declare const States: Story;
+export declare const LongContent: Story;
+//# sourceMappingURL=availability-status.stories.d.ts.map

package/dist/stories/molecules/availability-status.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"availability-status.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/availability-status.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EACL,kBAAkB,EAClB,KAAK,uBAAuB,EAC7B,MAAM,yCAAyC,CAAA;AAGhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAOzC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAA;CACxC,CAAA;AACD,KAAK,eAAe,GAAG,QAAQ,CAC7B,OAAO,CAAC,uBAAuB,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CACpD,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,eAqBxB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA6CpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAqBzB,CAAA"}

package/dist/stories/molecules/price-block.stories.d.ts

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PriceBlock, type PriceBlockProps } from "../../src/molecules/price-block.js";
+declare const meta: Meta<typeof PriceBlock>;
+export default meta;
+type Story = Omit<StoryObj<typeof meta>, "args"> & {
+    args?: Partial<PriceBlockProps>;
+};
+type PlaygroundStory = StoryObj<Extract<PriceBlockProps, {
+    state: "discounted";
+}>>;
+export declare const Playground: PlaygroundStory;
+export declare const States: Story;
+export declare const LongContent: Story;
+//# sourceMappingURL=price-block.stories.d.ts.map

package/dist/stories/molecules/price-block.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-block.stories.d.ts","sourceRoot":"","sources":["../../../stories/molecules/price-block.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EACN,UAAU,EACV,KAAK,eAAe,EACpB,MAAM,iCAAiC,CAAA;AAExC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAOjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,EAAE,MAAM,CAAC,GAAG;IAClD,IAAI,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CAC/B,CAAA;AACD,KAAK,eAAe,GAAG,QAAQ,CAC9B,OAAO,CAAC,eAAe,EAAE;IAAE,KAAK,EAAE,YAAY,CAAA;CAAE,CAAC,CACjD,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,eAuBxB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAkCpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAkCzB,CAAA"}

package/dist/test/price-availability.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=price-availability.spec.d.ts.map

package/dist/test/price-availability.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"price-availability.spec.d.ts","sourceRoot":"","sources":["../../test/price-availability.spec.ts"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "license": "MIT",
   "type": "module",
   "repository": {

package/src/tokens/components/components.css

@@ -18,6 +18,7 @@
 @import "./atoms/_tooltip.css";
 
 @import "./molecules/_accordion.css";
+@import "./molecules/_availability-status.css";
 @import "./molecules/_breadcrumb.css";
 @import "./molecules/_carousel.css";
 @import "./molecules/_cascade-select.css";
@@ -32,6 +33,7 @@
 @import "./molecules/_form-error-summary.css";
 @import "./molecules/_pagination.css";
 @import "./molecules/_popover.css";
+@import "./molecules/_price-block.css";
 @import "./molecules/_radio-card.css";
 @import "./molecules/_radio-group.css";
 @import "./molecules/_menu.css";

package/src/tokens/components/molecules/_availability-status.css

@@ -0,0 +1,74 @@
+@theme static {
+  /* Reference layer */
+  --color-availability-status-available: var(--color-fg-status-success);
+  --color-availability-status-limited: var(--color-fg-status-warning);
+  --color-availability-status-preorder: var(--color-fg-accent-primary);
+  --color-availability-status-unavailable: var(--color-fg-status-error);
+  --color-availability-status-unknown: var(--color-fg-secondary);
+  --color-availability-status-muted: var(--color-fg-secondary);
+
+  --spacing-availability-status-compact: var(--spacing-100);
+  --spacing-availability-status-icon-base: var(--spacing-250);
+  --spacing-availability-status-pending-line-base: var(--spacing-250);
+  --spacing-availability-status-pending-width-base: calc(
+    var(--spacing-950) *
+    2
+  );
+
+  /* Derived color layer */
+  --color-availability-status-fg-available: var(
+    --color-availability-status-available
+  );
+  --color-availability-status-fg-limited: var(
+    --color-availability-status-limited
+  );
+  --color-availability-status-fg-preorder: var(
+    --color-availability-status-preorder
+  );
+  --color-availability-status-fg-unavailable: var(
+    --color-availability-status-unavailable
+  );
+  --color-availability-status-fg-unknown: var(
+    --color-availability-status-unknown
+  );
+  --color-availability-status-detail-fg: var(--color-availability-status-muted);
+
+  /* Derived layout and typography layer */
+  --gap-availability-status: var(--spacing-availability-status-compact);
+  --gap-availability-status-summary: var(--spacing-availability-status-compact);
+  --gap-availability-status-content: var(--spacing-availability-status-compact);
+  --gap-availability-status-pending: var(--spacing-availability-status-compact);
+  --spacing-availability-status-icon: var(
+    --spacing-availability-status-icon-base
+  );
+  --spacing-availability-status-pending-line: var(
+    --spacing-availability-status-pending-line-base
+  );
+  --spacing-availability-status-pending: var(
+    --spacing-availability-status-pending-width-base
+  );
+
+  --text-availability-status-label-size: var(--text-sm);
+  --text-availability-status-detail-size: var(--text-xs);
+  --font-weight-availability-status-label: var(--font-weight-medium);
+}
+
+@utility token-icon-availability-status-available {
+  @apply token-icon-check-circle;
+}
+
+@utility token-icon-availability-status-limited {
+  @apply token-icon-alert;
+}
+
+@utility token-icon-availability-status-preorder {
+  @apply icon-[mdi--clock-outline];
+}
+
+@utility token-icon-availability-status-unavailable {
+  @apply icon-[mdi--close-circle-outline];
+}
+
+@utility token-icon-availability-status-unknown {
+  @apply icon-[mdi--help-circle-outline];
+}

package/src/tokens/components/molecules/_price-block.css

@@ -0,0 +1,35 @@
+@theme static {
+  /* Reference layer */
+  --color-price-block-content: var(--color-fg-primary);
+  --color-price-block-muted: var(--color-fg-secondary);
+
+  --spacing-price-block-compact: var(--spacing-50);
+  --spacing-price-block-related: var(--spacing-100);
+  --spacing-price-block-pending-line-base: var(--spacing-350);
+  --spacing-price-block-pending-width-base: calc(var(--spacing-950) * 2);
+
+  /* Derived color layer */
+  --color-price-block-amount-fg: var(--color-price-block-content);
+  --color-price-block-prefix-fg: var(--color-price-block-muted);
+  --color-price-block-original-fg: var(--color-price-block-muted);
+  --color-price-block-metadata-fg: var(--color-price-block-muted);
+  --color-price-block-separator-fg: var(--color-price-block-muted);
+  --color-price-block-detail-fg: var(--color-price-block-muted);
+
+  /* Derived layout and typography layer */
+  --gap-price-block: var(--spacing-price-block-related);
+  --gap-price-block-primary: var(--spacing-price-block-related);
+  --gap-price-block-metadata: var(--spacing-price-block-compact);
+  --gap-price-block-pending: var(--spacing-price-block-compact);
+  --spacing-price-block-pending-line: var(
+    --spacing-price-block-pending-line-base
+  );
+  --spacing-price-block-pending: var(--spacing-price-block-pending-width-base);
+
+  --text-price-block-amount-size: var(--text-lg);
+  --text-price-block-prefix-size: var(--text-sm);
+  --text-price-block-original-size: var(--text-sm);
+  --text-price-block-metadata-size: var(--text-xs);
+  --text-price-block-detail-size: var(--text-sm);
+  --font-weight-price-block-amount: var(--font-weight-medium);
+}