@tuturuuu/ui 0.17.0 → 0.19.0

package/src/components/ui/finance/wallets/form.test.tsx

@@ -96,12 +96,12 @@ describe('WalletForm', () => {
     mocks.updateWallet.mockResolvedValue({ message: 'success' });
     // biome-ignore lint/suspicious/noDocumentCookie: test resets the finance visibility cookie.
     document.cookie =
-      'finance-confidential-mode=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/';
+      'finance-confidential-mode=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;Secure';
   });
 
   it('masks the disabled balance field when finance numbers are globally hidden', () => {
     // biome-ignore lint/suspicious/noDocumentCookie: test sets the finance visibility cookie.
-    document.cookie = 'finance-confidential-mode=true;path=/';
+    document.cookie = 'finance-confidential-mode=true;path=/;Secure';
 
     renderWalletForm();
 
@@ -112,7 +112,7 @@ describe('WalletForm', () => {
 
   it('shows the disabled balance field when finance numbers are globally visible', async () => {
     // biome-ignore lint/suspicious/noDocumentCookie: test sets the finance visibility cookie.
-    document.cookie = 'finance-confidential-mode=false;path=/';
+    document.cookie = 'finance-confidential-mode=false;path=/;Secure';
 
     renderWalletForm();
 

package/src/components/ui/finance/wallets/wallets-data-table.test.tsx

@@ -105,6 +105,16 @@ describe('wallets data table infinite loading', () => {
     mocks.searchParams = new URLSearchParams();
 
     globalThis.IntersectionObserver = class IntersectionObserver {
+      readonly callback: IntersectionObserverCallback;
+      readonly options?: IntersectionObserverInit;
+
+      constructor(
+        callback: IntersectionObserverCallback,
+        options?: IntersectionObserverInit
+      ) {
+        this.callback = callback;
+        this.options = options;
+      }
       disconnect() {}
       observe() {}
       takeRecords() {

package/src/components/ui/legacy/calendar/calendar-cell.tsx

@@ -804,7 +804,7 @@ export const CalendarCell = ({ date, hour }: CalendarCellProps) => {
           maxWidth: 200,
           zIndex: 10000,
           whiteSpace: 'nowrap',
-          opacity: showTooltip ? 1 : 0,
+          opacity: 1,
           transition: 'opacity 0.15s',
         }}
       >

package/src/components/ui/storefront/accent-button.tsx

@@ -5,11 +5,13 @@ import type { ReactNode } from 'react';
 
 export function AccentButton({
   children,
+  className,
   disabled,
   onClick,
   radius,
 }: {
   children: ReactNode;
+  className?: string;
   disabled?: boolean;
   onClick?: () => void;
   radius: string;
@@ -21,7 +23,8 @@ export function AccentButton({
         'bg-primary text-primary-foreground hover:bg-primary/90',
         '[--accent-bg:var(--storefront-accent,var(--primary))] [--accent-fg:var(--storefront-accent-foreground,var(--primary-foreground))]',
         'bg-[var(--accent-bg)] text-[var(--accent-fg)] hover:opacity-90',
-        radius
+        radius,
+        className
       )}
       disabled={disabled}
       onClick={onClick}

package/src/components/ui/storefront/browse-panel.tsx

@@ -16,12 +16,14 @@ type BrowseFilter = 'all' | 'bundle' | 'product';
 export function StorefrontBrowsePanel({
   compactLayout,
   emptyListings,
+  flushTop = false,
   labels,
   listings,
   renderListing,
 }: {
   compactLayout: boolean;
   emptyListings: ReactNode;
+  flushTop?: boolean;
   labels: StorefrontSurfaceLabels;
   listings: InventoryStorefrontListing[];
   renderListing: (listing: InventoryStorefrontListing) => ReactNode;
@@ -47,7 +49,10 @@ export function StorefrontBrowsePanel({
   const hasActiveFilters = filter !== 'all' || query.trim().length > 0;
 
   return (
-    <section aria-labelledby="storefront-shop-heading" className="mt-10">
+    <section
+      aria-labelledby="storefront-shop-heading"
+      className={flushTop ? undefined : 'mt-10'}
+    >
       <div className="flex flex-col gap-5 border-border border-b pb-5 lg:flex-row lg:items-end lg:justify-between">
         <div>
           <p className="font-mono text-muted-foreground text-xs uppercase tracking-[0.16em]">

package/src/components/ui/storefront/cart-summary-parts.tsx

@@ -14,6 +14,7 @@ import { AccentButton } from './accent-button';
 import type {
   StorefrontBuyerDefaults,
   StorefrontCartEntry,
+  StorefrontLinkComponent,
   StorefrontSurfaceLabels,
 } from './types';
 import {
@@ -68,6 +69,7 @@ export function CartActions({
   isPreview,
   isSubmitting,
   labels,
+  linkComponent,
   onCheckoutOpen,
   onInstantCheckout,
   radius,
@@ -78,13 +80,20 @@ export function CartActions({
   isPreview: boolean;
   isSubmitting: boolean;
   labels: StorefrontSurfaceLabels;
+  linkComponent?: StorefrontLinkComponent;
   onCheckoutOpen?: () => void;
   onInstantCheckout?: () => void;
   radius: string;
 }) {
+  const NavigationLink = linkComponent ?? 'a';
   if (isPreview || isCheckoutDisabled) {
     return (
-      <Button className={cn('w-full', radius)} disabled type="button">
+      <Button
+        className={cn('w-full', radius)}
+        disabled
+        type="button"
+        variant="secondary"
+      >
         {labels.checkoutDisabled}
       </Button>
     );
@@ -92,7 +101,12 @@ export function CartActions({
 
   if (!canOpenCheckout) {
     return (
-      <Button className={cn('w-full', radius)} disabled type="button">
+      <Button
+        className={cn('w-full', radius)}
+        disabled
+        type="button"
+        variant="secondary"
+      >
         {labels.checkout}
         <ArrowRight className="size-4 shrink-0" />
       </Button>
@@ -122,10 +136,10 @@ export function CartActions({
         </AccentButton>
       ) : (
         <Button asChild className={cn('w-full', radius)} variant="outline">
-          <a href={checkoutHref}>
+          <NavigationLink href={checkoutHref ?? '#'}>
             {labels.checkout}
             <ArrowRight className="size-4 shrink-0" />
-          </a>
+          </NavigationLink>
         </Button>
       )}
     </div>

package/src/components/ui/storefront/cart-summary.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ArrowRight } from '@tuturuuu/icons';
+import { ArrowRight, ShoppingCart } from '@tuturuuu/icons';
 import type { InventoryStorefront } from '@tuturuuu/internal-api/inventory';
 import { cn } from '@tuturuuu/utils/format';
 import type { FormEvent } from 'react';
@@ -15,6 +15,7 @@ import {
 import type {
   StorefrontBuyerDefaults,
   StorefrontCartEntry,
+  StorefrontLinkComponent,
   StorefrontSurfaceLabels,
 } from './types';
 import { formatStorefrontPrice, storefrontSurfaceClasses } from './utils';
@@ -31,6 +32,7 @@ export function StorefrontCartSummary({
   isPreview,
   isSubmitting,
   labels,
+  linkComponent,
   onCheckoutOpen,
   onCheckoutSubmit,
   onInstantCheckout,
@@ -48,6 +50,7 @@ export function StorefrontCartSummary({
   isPreview: boolean;
   isSubmitting: boolean;
   labels: StorefrontSurfaceLabels;
+  linkComponent?: StorefrontLinkComponent;
   onCheckoutOpen?: () => void;
   onCheckoutSubmit?: (formData: FormData) => void;
   onInstantCheckout?: () => void;
@@ -113,19 +116,31 @@ export function StorefrontCartSummary({
       className={cn(
         'h-fit',
         presentation === 'panel'
-          ? cn('p-4', storefrontSurfaceClasses[storefront.surfaceStyle], radius)
+          ? cn(
+              'grid gap-5 p-5 sm:p-6',
+              storefrontSurfaceClasses[storefront.surfaceStyle],
+              radius
+            )
           : 'grid gap-4',
         className
       )}
     >
-      <div>
-        <div className="flex items-center justify-between gap-3">
-          <p className="font-semibold">{labels.cart}</p>
+      <div className="grid gap-2">
+        <div className="flex items-center gap-3">
+          <span
+            className={cn(
+              'grid size-9 shrink-0 place-items-center border border-border bg-background',
+              radius
+            )}
+          >
+            <ShoppingCart className="size-4" />
+          </span>
+          <p className="min-w-0 flex-1 font-semibold">{labels.cart}</p>
           <Badge className="border-border bg-background" variant="outline">
             {cartEntries.length}
           </Badge>
         </div>
-        <p className="mt-2 text-muted-foreground text-sm leading-6">
+        <p className="text-pretty text-muted-foreground text-sm leading-6">
           {labels.reservedCopy}
         </p>
       </div>
@@ -146,6 +161,7 @@ export function StorefrontCartSummary({
         isPreview={isPreview}
         isSubmitting={isSubmitting}
         labels={labels}
+        linkComponent={linkComponent}
         onCheckoutOpen={onCheckoutOpen}
         onInstantCheckout={onInstantCheckout}
         radius={radius}

package/src/components/ui/storefront/hero-panel.tsx

@@ -21,6 +21,8 @@ export function StorefrontHeroPanel({
 }) {
   const heroImage = storefront.coverImageUrl ?? storefront.heroImageUrl;
 
+  if (!heroImage) return null;
+
   return (
     <section
       className={cn(
@@ -38,9 +40,11 @@ export function StorefrontHeroPanel({
           <h2 className="text-balance font-semibold text-4xl tracking-[-0.035em] sm:text-5xl lg:text-6xl">
             {storefront.name}
           </h2>
-          <p className="mt-4 max-w-xl text-pretty text-muted-foreground leading-7">
-            {storefront.description ?? labels.fallbackDescription}
-          </p>
+          {storefront.description?.trim() ? (
+            <p className="mt-4 max-w-xl text-pretty text-muted-foreground leading-7">
+              {storefront.description.trim()}
+            </p>
+          ) : null}
           <div className="mt-6 flex flex-wrap gap-2">
             <Badge className="border-border bg-background" variant="outline">
               {listingsCount} {labels.product}
@@ -58,20 +62,12 @@ export function StorefrontHeroPanel({
       </div>
 
       <div className="relative min-h-64 border-border border-t md:min-h-full md:border-t-0 md:border-l">
-        {heroImage ? (
-          <StorefrontImagePanel
-            className="absolute inset-0 h-full w-full"
-            imageUrl={heroImage}
-            label={storefront.name}
-            priority
-          />
-        ) : (
-          <div className="absolute inset-0 grid place-items-center bg-muted/35">
-            <div className="grid size-24 place-items-center rounded-xl border border-border bg-background/80">
-              <Store className="size-8 text-muted-foreground" />
-            </div>
-          </div>
-        )}
+        <StorefrontImagePanel
+          className="absolute inset-0 h-full w-full"
+          imageUrl={heroImage}
+          label={storefront.name}
+          priority
+        />
       </div>
     </section>
   );

package/src/components/ui/storefront/index.ts

@@ -6,11 +6,13 @@ export type {
   StorefrontBuyerDefaults,
   StorefrontCartEntry,
   StorefrontCartLine,
+  StorefrontLinkComponent,
   StorefrontSurfaceLabels,
   StorefrontSurfaceMode,
 } from './types';
 export {
   formatStorefrontPrice,
+  getAccentStyle,
   getStorefrontLinePrice,
   getStorefrontListingFromPrice,
   getStorefrontListingLimit,

package/src/components/ui/storefront/listing-card.tsx

@@ -59,7 +59,7 @@ export function StorefrontListingCard({
       className={cn(
         surfaceClassName,
         radius,
-        'group relative overflow-hidden transition duration-200 hover:border-foreground/20 hover:shadow-foreground/5 hover:shadow-sm',
+        'group relative overflow-hidden transition duration-200 [contain-intrinsic-size:auto_420px] [content-visibility:auto] hover:border-foreground/20 hover:shadow-foreground/5 hover:shadow-sm',
         isList
           ? 'grid gap-4 p-3 sm:grid-cols-[112px_minmax(0,1fr)_auto] sm:items-center'
           : 'flex min-h-full flex-col'
@@ -106,9 +106,11 @@ export function StorefrontListingCard({
             {listing.listingType === 'bundle' ? labels.bundle : labels.product}
           </Badge>
         </div>
-        <p className="mt-1 line-clamp-2 text-muted-foreground text-sm leading-6">
-          {listing.description ?? labels.fallbackDescription}
-        </p>
+        {listing.description?.trim() ? (
+          <p className="mt-1 line-clamp-2 text-muted-foreground text-sm leading-6">
+            {listing.description.trim()}
+          </p>
+        ) : null}
         {showInventoryBadges ? (
           <p className="mt-2 text-muted-foreground text-xs">
             {limit === 0

package/src/components/ui/storefront/product-detail.tsx

@@ -20,7 +20,11 @@ import { Badge } from '../badge';
 import { Button } from '../button';
 import { AccentButton } from './accent-button';
 import { StorefrontImagePanel } from './image-panel';
-import type { StorefrontCartLine, StorefrontSurfaceLabels } from './types';
+import type {
+  StorefrontCartLine,
+  StorefrontLinkComponent,
+  StorefrontSurfaceLabels,
+} from './types';
 import {
   formatStorefrontPrice,
   getStorefrontLinePrice,
@@ -43,6 +47,7 @@ export function StorefrontProductDetail({
   currency,
   isSubmitting = false,
   labels,
+  linkComponent,
   listing,
   onBuyNow,
   onDecrement,
@@ -59,6 +64,7 @@ export function StorefrontProductDetail({
   currency: string;
   isSubmitting?: boolean;
   labels: StorefrontSurfaceLabels;
+  linkComponent?: StorefrontLinkComponent;
   listing: InventoryStorefrontListing;
   onBuyNow?: (listingId: string, variantId?: string | null) => void;
   onDecrement?: (listingId: string, variantId?: string | null) => void;
@@ -73,6 +79,7 @@ export function StorefrontProductDetail({
   showInventoryBadges: boolean;
   surfaceClassName: string;
 }) {
+  const NavigationLink = linkComponent ?? 'a';
   const options = listing.options ?? [];
   const variants = useMemo(
     () => getStorefrontListingVariants(listing),
@@ -130,13 +137,15 @@ export function StorefrontProductDetail({
   const isDialog = presentation === 'dialog';
   const isSquareTerminal = checkoutMode === 'square_terminal';
   const isPolar = checkoutMode === 'polar';
+  const description = listing.description?.trim();
+  const hasMatchedActions = canChange && Boolean(onBuyNow);
 
   return (
     <div
       className={cn(
         'grid min-w-0',
         isDialog
-          ? 'lg:grid-cols-[minmax(0,1.08fr)_minmax(22rem,0.92fr)]'
+          ? 'lg:h-[min(44rem,88dvh)] lg:grid-cols-[minmax(0,1.08fr)_minmax(22rem,0.92fr)]'
           : 'gap-6 lg:grid-cols-2'
       )}
     >
@@ -150,7 +159,7 @@ export function StorefrontProductDetail({
         <StorefrontImagePanel
           className={cn(
             isDialog
-              ? 'aspect-[4/3] min-h-72 lg:aspect-auto lg:h-full lg:min-h-[36rem]'
+              ? 'aspect-[4/3] min-h-72 lg:aspect-auto lg:h-full lg:min-h-0'
               : 'aspect-square'
           )}
           imageUrl={imageUrl}
@@ -162,8 +171,7 @@ export function StorefrontProductDetail({
       <div
         className={cn(
           'flex min-w-0 flex-col gap-5',
-          isDialog &&
-            'p-5 sm:p-7 lg:max-h-[min(44rem,90dvh)] lg:overflow-y-auto lg:p-9'
+          isDialog && 'p-5 sm:p-7 lg:h-full lg:overflow-y-auto lg:p-9'
         )}
       >
         <div className="flex flex-wrap items-center gap-2">
@@ -253,9 +261,11 @@ export function StorefrontProductDetail({
           </p>
         ) : null}
 
-        <p className="text-pretty text-muted-foreground leading-7">
-          {listing.description ?? labels.fallbackDescription}
-        </p>
+        {description ? (
+          <p className="text-pretty text-muted-foreground leading-7">
+            {description}
+          </p>
+        ) : null}
 
         {isSquareTerminal || isPolar ? (
           <div
@@ -291,14 +301,24 @@ export function StorefrontProductDetail({
           </div>
         ) : null}
 
-        <div className="mt-auto flex flex-wrap items-center gap-3 border-border border-t pt-5">
+        <div
+          className={cn(
+            'mt-auto grid w-full grid-cols-1 gap-2 border-border border-t pt-5',
+            hasMatchedActions && 'grid-cols-2'
+          )}
+        >
           {canChange ? (
             needsSelection ? (
-              <Button className={cn('h-11', radius)} disabled type="button">
+              <Button
+                className={cn('h-11 w-full', radius)}
+                disabled
+                type="button"
+                variant="secondary"
+              >
                 {labels.selectOptions}
               </Button>
             ) : cartQuantity > 0 ? (
-              <div className="flex items-center gap-1">
+              <div className="grid h-11 w-full grid-cols-[2.75rem_minmax(2.5rem,1fr)_2.75rem] items-center gap-1">
                 <Button
                   aria-label={`${labels.quantity} -`}
                   className={cn('h-11 w-11 p-0', radius)}
@@ -323,36 +343,46 @@ export function StorefrontProductDetail({
                 </Button>
               </div>
             ) : (
-              <AccentButton
+              <Button
+                className={cn('h-11 w-full', radius)}
                 disabled={addDisabled}
                 onClick={() => onIncrement?.(listing.id, limit, variantId)}
-                radius={radius}
+                type="button"
+                variant="secondary"
               >
                 <Plus className="h-4 w-4" />
                 {soldOut ? labels.soldOut : labels.add}
-              </AccentButton>
+              </Button>
             )
           ) : null}
 
           {onBuyNow ? (
-            <Button
-              className={cn('h-11', radius)}
+            <AccentButton
+              className="h-11 w-full"
               disabled={buyNowDisabled}
               onClick={() => onBuyNow(listing.id, variantId)}
-              type="button"
+              radius={radius}
             >
               <Zap className="size-4 shrink-0" />
               {labels.buyNow}
-            </Button>
+            </AccentButton>
           ) : null}
 
           {cartHref && cartQuantity > 0 ? (
-            <Button asChild className={cn('h-11', radius)} variant="outline">
-              <a href={cartHref}>
+            <Button
+              asChild
+              className={cn(
+                'h-11 w-full',
+                hasMatchedActions && 'col-span-2',
+                radius
+              )}
+              variant="outline"
+            >
+              <NavigationLink href={cartHref}>
                 <ShoppingCart className="size-4 shrink-0" />
                 {labels.cart}
                 <ArrowRight className="size-4 shrink-0" />
-              </a>
+              </NavigationLink>
             </Button>
           ) : null}
         </div>

package/src/components/ui/storefront/product-dialog.tsx

@@ -3,7 +3,11 @@
 import type { InventoryStorefrontListing } from '@tuturuuu/internal-api/inventory';
 import { Dialog, DialogContent, DialogTitle } from '../dialog';
 import { StorefrontProductDetail } from './product-detail';
-import type { StorefrontCartLine, StorefrontSurfaceLabels } from './types';
+import type {
+  StorefrontCartLine,
+  StorefrontLinkComponent,
+  StorefrontSurfaceLabels,
+} from './types';
 
 /**
  * Large product detail dialog opened from a listing card. Reuses the same
@@ -17,6 +21,7 @@ export function StorefrontProductDialog({
   currency,
   isSubmitting,
   labels,
+  linkComponent,
   listing,
   onBuyNow,
   onDecrement,
@@ -32,6 +37,7 @@ export function StorefrontProductDialog({
   currency: string;
   isSubmitting?: boolean;
   labels: StorefrontSurfaceLabels;
+  linkComponent?: StorefrontLinkComponent;
   listing: InventoryStorefrontListing | null;
   onBuyNow?: (listingId: string, variantId?: string | null) => void;
   onDecrement?: (listingId: string, variantId?: string | null) => void;
@@ -58,6 +64,7 @@ export function StorefrontProductDialog({
               currency={currency}
               isSubmitting={isSubmitting}
               labels={labels}
+              linkComponent={linkComponent}
               listing={listing}
               onBuyNow={onBuyNow}
               onDecrement={onDecrement}