@raydenui/ui 0.9.6 → 0.10.0

package/dist/blocks/commerce.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../utils/cn.js";
+export const commerceControl = "cursor-pointer min-h-11 rounded-lg border border-surface-border-strong bg-surface px-3 py-2 text-base text-grey-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary motion-safe:transition-colors motion-safe:duration-150 hover:border-grey-500 disabled:cursor-not-allowed disabled:opacity-50";
+export const commerceAction = "inline-flex min-h-11 items-center justify-center rounded-lg bg-action-primary px-5 py-2.5 text-center text-sm font-semibold text-white hover:bg-action-primary-hover focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary disabled:cursor-not-allowed disabled:opacity-50";
+export function formatCommerceMoney(amount, currency = "GBP", locale = "en-GB") {
+    const format = new Intl.NumberFormat(locale, { style: "currency", currency });
+    const digits = format.resolvedOptions().maximumFractionDigits ?? 2;
+    return format.format(amount / 10 ** digits);
+}
+export function CommerceHeading({ title, description, headingLevel: Heading = "h2", id, }) {
+    return (_jsxs("header", { className: "space-y-3", children: [_jsx(Heading, { id: id, className: "max-w-[20ch] text-[clamp(1.75rem,4cqi,2.75rem)] leading-[1.12] font-semibold tracking-[-0.035em]", children: title }), description && (_jsx("p", { className: "max-w-[56ch] text-base leading-relaxed text-grey-600", children: description }))] }));
+}
+export function CommerceFrame({ title, description, headingLevel, className, children, busy, }) {
+    const id = useId();
+    return (_jsxs("section", { "aria-labelledby": id, "aria-busy": busy || undefined, className: cn("@container min-w-0 w-full bg-surface text-grey-900 [overflow-wrap:anywhere]", className), children: [_jsx("div", { className: "mb-8 @min-[760px]:mb-10", children: _jsx(CommerceHeading, { id: id, title: title, description: description, headingLevel: headingLevel }) }), children] }));
+}
+export function CommercePhoto({ image, className, priority = false, }) {
+    return image ? (_jsx("img", { src: image.src, alt: image.alt, loading: priority ? "eager" : "lazy", width: 640, height: 640, className: cn("aspect-square w-full rounded-lg bg-surface-muted object-cover", className) })) : (_jsx("div", { role: "img", "aria-label": "Product image unavailable", className: cn("flex aspect-square items-center justify-center rounded-xl bg-surface-muted p-4 text-center text-sm text-grey-600", className), children: "Image unavailable" }));
+}
+export function CommerceQuantity({ name, quantity, max, disabled, onChange, }) {
+    return (_jsxs("div", { role: "group", "aria-label": `Quantity for ${name}`, className: "inline-flex shrink-0 items-center rounded-lg border border-surface-border-strong bg-surface", children: [_jsx("button", { type: "button", "aria-label": `Decrease quantity for ${name}`, disabled: disabled || quantity <= 1, className: cn(commerceControl, "w-11 border-0 bg-transparent px-0 hover:bg-surface-muted"), onClick: () => onChange(quantity - 1), children: "\u2212" }), _jsx("output", { "aria-label": `Quantity for ${name}`, className: "min-w-7 px-1 text-center tabular-nums", children: quantity }), _jsx("button", { type: "button", "aria-label": `Increase quantity for ${name}`, disabled: disabled || quantity >= (max ?? 99), className: cn(commerceControl, "w-11 border-0 bg-transparent px-0 hover:bg-surface-muted"), onClick: () => onChange(quantity + 1), children: "+" })] }));
+}
+export function CommerceTotals({ items, shipping = 0, tax = 0, discount = 0, currency, locale, }) {
+    const subtotal = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
+    const total = Math.max(0, subtotal + shipping + tax - discount);
+    const rows = [
+        ["Subtotal", subtotal],
+        ["Delivery", shipping],
+        ["Tax", tax],
+        ...(discount ? [["Discount", -discount]] : []),
+        ["Total", total],
+    ];
+    return (_jsx("dl", { className: "space-y-3 text-sm", children: rows.map(([label, amount]) => (_jsxs("div", { className: cn("flex items-baseline justify-between gap-4", label === "Total" && "border-t border-surface-border-strong pt-5 text-xl font-semibold"), children: [_jsx("dt", { children: label }), _jsx("dd", { className: "text-right tabular-nums", children: formatCommerceMoney(amount, currency, locale) })] }, label))) }));
+}

package/dist/blocks/index.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommandPaletteBlock = exports.WorkspaceSwitcherBlock = exports.PageHeaderBlock = exports.ApplicationShellBlock = exports.TaskListBlock = exports.TableBlock = exports.SiteFooterBlock = exports.ShoppingCartBlock = exports.SearchableTableBlock = exports.RecentTransactionsBlock = exports.QuickSendBlock = exports.ProfileSettingsBlock = exports.defaultProfileTimeZones = exports.ProductHeroBlock = exports.ProductDetailBlock = exports.ProductCollectionBlock = exports.PricingPlansBlock = exports.NotificationsBlock = exports.LoginBlock = exports.KpiOverviewBlock = exports.HeaderBlock = exports.FeatureOverviewBlock = exports.EmptyStateBlock = exports.CreateAccountBlock = exports.defaultCreateAccountPasswordRules = exports.CheckoutReviewBlock = void 0;
+var CheckoutReviewBlock_1 = require("./CheckoutReviewBlock.cjs");
+Object.defineProperty(exports, "CheckoutReviewBlock", { enumerable: true, get: function () { return CheckoutReviewBlock_1.CheckoutReviewBlock; } });
+var CreateAccountBlock_1 = require("./CreateAccountBlock.cjs");
+Object.defineProperty(exports, "defaultCreateAccountPasswordRules", { enumerable: true, get: function () { return CreateAccountBlock_1.defaultCreateAccountPasswordRules; } });
+Object.defineProperty(exports, "CreateAccountBlock", { enumerable: true, get: function () { return CreateAccountBlock_1.CreateAccountBlock; } });
+var EmptyStateBlock_1 = require("./EmptyStateBlock.cjs");
+Object.defineProperty(exports, "EmptyStateBlock", { enumerable: true, get: function () { return EmptyStateBlock_1.EmptyStateBlock; } });
+var FeatureOverviewBlock_1 = require("./FeatureOverviewBlock.cjs");
+Object.defineProperty(exports, "FeatureOverviewBlock", { enumerable: true, get: function () { return FeatureOverviewBlock_1.FeatureOverviewBlock; } });
+var HeaderBlock_1 = require("./HeaderBlock.cjs");
+Object.defineProperty(exports, "HeaderBlock", { enumerable: true, get: function () { return HeaderBlock_1.HeaderBlock; } });
+var KpiOverviewBlock_1 = require("./KpiOverviewBlock.cjs");
+Object.defineProperty(exports, "KpiOverviewBlock", { enumerable: true, get: function () { return KpiOverviewBlock_1.KpiOverviewBlock; } });
+var LoginBlock_1 = require("./LoginBlock.cjs");
+Object.defineProperty(exports, "LoginBlock", { enumerable: true, get: function () { return LoginBlock_1.LoginBlock; } });
+var NotificationsBlock_1 = require("./NotificationsBlock.cjs");
+Object.defineProperty(exports, "NotificationsBlock", { enumerable: true, get: function () { return NotificationsBlock_1.NotificationsBlock; } });
+var PricingPlansBlock_1 = require("./PricingPlansBlock.cjs");
+Object.defineProperty(exports, "PricingPlansBlock", { enumerable: true, get: function () { return PricingPlansBlock_1.PricingPlansBlock; } });
+var ProductCollectionBlock_1 = require("./ProductCollectionBlock.cjs");
+Object.defineProperty(exports, "ProductCollectionBlock", { enumerable: true, get: function () { return ProductCollectionBlock_1.ProductCollectionBlock; } });
+var ProductDetailBlock_1 = require("./ProductDetailBlock.cjs");
+Object.defineProperty(exports, "ProductDetailBlock", { enumerable: true, get: function () { return ProductDetailBlock_1.ProductDetailBlock; } });
+var ProductHeroBlock_1 = require("./ProductHeroBlock.cjs");
+Object.defineProperty(exports, "ProductHeroBlock", { enumerable: true, get: function () { return ProductHeroBlock_1.ProductHeroBlock; } });
+var ProfileSettingsBlock_1 = require("./ProfileSettingsBlock.cjs");
+Object.defineProperty(exports, "defaultProfileTimeZones", { enumerable: true, get: function () { return ProfileSettingsBlock_1.defaultProfileTimeZones; } });
+Object.defineProperty(exports, "ProfileSettingsBlock", { enumerable: true, get: function () { return ProfileSettingsBlock_1.ProfileSettingsBlock; } });
+var QuickSendBlock_1 = require("./QuickSendBlock.cjs");
+Object.defineProperty(exports, "QuickSendBlock", { enumerable: true, get: function () { return QuickSendBlock_1.QuickSendBlock; } });
+var RecentTransactionsBlock_1 = require("./RecentTransactionsBlock.cjs");
+Object.defineProperty(exports, "RecentTransactionsBlock", { enumerable: true, get: function () { return RecentTransactionsBlock_1.RecentTransactionsBlock; } });
+var SearchableTableBlock_1 = require("./SearchableTableBlock.cjs");
+Object.defineProperty(exports, "SearchableTableBlock", { enumerable: true, get: function () { return SearchableTableBlock_1.SearchableTableBlock; } });
+var ShoppingCartBlock_1 = require("./ShoppingCartBlock.cjs");
+Object.defineProperty(exports, "ShoppingCartBlock", { enumerable: true, get: function () { return ShoppingCartBlock_1.ShoppingCartBlock; } });
+var SiteFooterBlock_1 = require("./SiteFooterBlock.cjs");
+Object.defineProperty(exports, "SiteFooterBlock", { enumerable: true, get: function () { return SiteFooterBlock_1.SiteFooterBlock; } });
+var TableBlock_1 = require("./TableBlock.cjs");
+Object.defineProperty(exports, "TableBlock", { enumerable: true, get: function () { return TableBlock_1.TableBlock; } });
+var TaskListBlock_1 = require("./TaskListBlock.cjs");
+Object.defineProperty(exports, "TaskListBlock", { enumerable: true, get: function () { return TaskListBlock_1.TaskListBlock; } });
+var ApplicationShellBlock_1 = require("./ApplicationShellBlock.cjs");
+Object.defineProperty(exports, "ApplicationShellBlock", { enumerable: true, get: function () { return ApplicationShellBlock_1.ApplicationShellBlock; } });
+var PageHeaderBlock_1 = require("./PageHeaderBlock.cjs");
+Object.defineProperty(exports, "PageHeaderBlock", { enumerable: true, get: function () { return PageHeaderBlock_1.PageHeaderBlock; } });
+var WorkspaceSwitcherBlock_1 = require("./WorkspaceSwitcherBlock.cjs");
+Object.defineProperty(exports, "WorkspaceSwitcherBlock", { enumerable: true, get: function () { return WorkspaceSwitcherBlock_1.WorkspaceSwitcherBlock; } });
+var CommandPaletteBlock_1 = require("./CommandPaletteBlock.cjs");
+Object.defineProperty(exports, "CommandPaletteBlock", { enumerable: true, get: function () { return CommandPaletteBlock_1.CommandPaletteBlock; } });

package/dist/blocks/index.js

@@ -0,0 +1,24 @@
+export { CheckoutReviewBlock } from "./CheckoutReviewBlock.js";
+export { defaultCreateAccountPasswordRules, CreateAccountBlock } from "./CreateAccountBlock.js";
+export { EmptyStateBlock } from "./EmptyStateBlock.js";
+export { FeatureOverviewBlock } from "./FeatureOverviewBlock.js";
+export { HeaderBlock } from "./HeaderBlock.js";
+export { KpiOverviewBlock } from "./KpiOverviewBlock.js";
+export { LoginBlock } from "./LoginBlock.js";
+export { NotificationsBlock } from "./NotificationsBlock.js";
+export { PricingPlansBlock } from "./PricingPlansBlock.js";
+export { ProductCollectionBlock } from "./ProductCollectionBlock.js";
+export { ProductDetailBlock } from "./ProductDetailBlock.js";
+export { ProductHeroBlock } from "./ProductHeroBlock.js";
+export { defaultProfileTimeZones, ProfileSettingsBlock } from "./ProfileSettingsBlock.js";
+export { QuickSendBlock } from "./QuickSendBlock.js";
+export { RecentTransactionsBlock } from "./RecentTransactionsBlock.js";
+export { SearchableTableBlock } from "./SearchableTableBlock.js";
+export { ShoppingCartBlock } from "./ShoppingCartBlock.js";
+export { SiteFooterBlock } from "./SiteFooterBlock.js";
+export { TableBlock } from "./TableBlock.js";
+export { TaskListBlock } from "./TaskListBlock.js";
+export { ApplicationShellBlock } from "./ApplicationShellBlock.js";
+export { PageHeaderBlock } from "./PageHeaderBlock.js";
+export { WorkspaceSwitcherBlock } from "./WorkspaceSwitcherBlock.js";
+export { CommandPaletteBlock } from "./CommandPaletteBlock.js";