@dalshenekuda/candy-ui 2.0.1 → 2.1.0

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@dalshenekuda/candy-ui",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "A React UI components library with Tailwind CSS",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dalshenekuda/CandyUI.git"
+  },
+  "homepage": "https://main--6ab56ef1aed13efbc107d427.chromatic.com/",
+  "bugs": {
+    "url": "https://github.com/dalshenekuda/CandyUI/issues"
+  },
   "type": "module",
   "main": "./build/ui-kit.js",
   "types": "./types/index.d.ts",
@@ -37,10 +45,11 @@
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "build:watch": "vite build --watch",
+    "build:watch": "VITE_BUILD_WATCH=true vite build --watch",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "release": "npm run build && changeset publish"
+    "release": "npm run build && changeset publish",
+    "chromatic": "node --env-file-if-exists=.env.local ./node_modules/chromatic/dist/bin.js"
   },
   "keywords": [
     "react",
@@ -73,11 +82,14 @@
     "@eslint/js": "^10.0.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
     "@types/node": "^24.10.1",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/ui": "^4.0.14",
     "autoprefixer": "^10.4.22",
+    "chromatic": "^13.3.5",
     "concurrently": "^9.2.1",
     "eslint": "^10.0.2",
     "eslint-config-prettier": "^10.1.0",

package/tailwind.preset.js

@@ -1,12 +1,6 @@
 /**
- * Tailwind preset for candy-ui consumers.
- *
- * Import in your tailwind.config.js:
- *   import uiKitPreset from 'candy-ui/tailwind.preset';
- *   export default { presets: [uiKitPreset], content: [...] };
- *
- * All values reference CSS custom properties from src/tokens/*.css.
- * Import src/styles/style.css once in your app entry — tokens won't work without it.
+ * Tailwind preset for @dalshenekuda/candy-ui consumers.
+ * Import '@dalshenekuda/candy-ui/style.css' once in your app entry.
  */
 
 /** @type {import('tailwindcss').Config} */
@@ -20,7 +14,12 @@ export default {
         lg:      '1024px',
         xl:      '1280px',
         '2xl':   '1536px',
-        desktop: '992px',   // matches --bp-desktop / typography breakpoint
+        desktop: '992px',
+      },
+
+      fontFamily: {
+        display: 'var(--font-display)',
+        body:    'var(--font-body)',
       },
 
       spacing: {
@@ -35,13 +34,16 @@ export default {
         '2xl': 'var(--spacing-2xl)',
         '3xl': 'var(--spacing-3xl)',
         '4xl': 'var(--spacing-4xl)',
+        '5xl': 'var(--spacing-5xl)',
+        '6xl': 'var(--spacing-6xl)',
+        '7xl': 'var(--spacing-7xl)',
       },
 
       colors: {
-        // Semantic tokens — use these in components
         bg:      'var(--color-bg)',
         surface: 'var(--color-surface)',
         'surface-raised': 'var(--color-surface-raised)',
+        'surface-sunken': 'var(--color-surface-sunken)',
 
         text: {
           DEFAULT: 'var(--color-text)',
@@ -52,6 +54,7 @@ export default {
 
         brand: {
           DEFAULT: 'var(--color-brand)',
+          hover:   'var(--color-brand-hover)',
           dark:    'var(--color-brand-dark)',
           light:   'var(--color-brand-light)',
         },
@@ -61,45 +64,62 @@ export default {
           dark:    'var(--color-accent-dark)',
           light:   'var(--color-accent-light)',
           warm:    'var(--color-accent-warm)',
+          alt:     'var(--color-accent-alt)',
         },
 
         border: {
           DEFAULT: 'var(--color-border)',
           subtle:  'var(--color-border-subtle)',
+          strong:  'var(--color-border-strong)',
+        },
+
+        tone: {
+          bg:     'var(--tone-bg)',
+          ink:    'var(--tone-ink)',
+          border: 'var(--tone-border)',
+          accent: 'var(--tone-accent)',
         },
 
         danger:  'var(--color-danger)',
         success: 'var(--color-success)',
         warning: 'var(--color-warning)',
 
-        // Palette primitives — for Storybook / design token docs
         palette: {
-          'teal-900': 'var(--palette-teal-900)',
-          'teal-600': 'var(--palette-teal-600)',
-          'teal-400': 'var(--palette-teal-400)',
-          'teal-200': 'var(--palette-teal-200)',
-          'cream-ink': 'var(--palette-cream-ink)',
-          'cream-100': 'var(--palette-cream-100)',
-          'cream-50':  'var(--palette-cream-50)',
-          'grey-1000': 'var(--palette-grey-1000)',
-          'grey-900':  'var(--palette-grey-900)',
-          'grey-800':  'var(--palette-grey-800)',
-          'grey-700':  'var(--palette-grey-700)',
-          'grey-600':  'var(--palette-grey-600)',
-          'grey-500':  'var(--palette-grey-500)',
-          'grey-400':  'var(--palette-grey-400)',
-          'grey-300':  'var(--palette-grey-300)',
-          'grey-200':  'var(--palette-grey-200)',
-          'grey-100':  'var(--palette-grey-100)',
-          'coral-700': 'var(--palette-coral-700)',
-          'coral-500': 'var(--palette-coral-500)',
-          'coral-300': 'var(--palette-coral-300)',
-          'amber-500': 'var(--palette-amber-500)',
-          'olive-500': 'var(--palette-olive-500)',
-          'sage-500':  'var(--palette-sage-500)',
+          'ink-1000': 'var(--palette-ink-1000)',
+          'ink-900':  'var(--palette-ink-900)',
+          'ink-800':  'var(--palette-ink-800)',
+          'ink-600':  'var(--palette-ink-600)',
+          'ink-500':  'var(--palette-ink-500)',
+          'ink-300':  'var(--palette-ink-300)',
+          'ink-200':  'var(--palette-ink-200)',
+          'ink-100':  'var(--palette-ink-100)',
+          paper:      'var(--palette-paper)',
+          white:      'var(--palette-white)',
+          'blueras-700': 'var(--palette-blueras-700)',
+          'blueras-500': 'var(--palette-blueras-500)',
+          'blueras-400': 'var(--palette-blueras-400)',
+          'blueras-200': 'var(--palette-blueras-200)',
+          'night-text': 'var(--palette-night-text)',
+          'night-border-strong': 'var(--palette-night-border-strong)',
+          'dark-base': 'var(--palette-dark-base)',
+          'dark-surface': 'var(--palette-dark-surface)',
+          'dark-raised': 'var(--palette-dark-raised)',
+          'dark-border': 'var(--palette-dark-border)',
+          'dark-border-subtle': 'var(--palette-dark-border-subtle)',
+          'raspberry-700': 'var(--palette-raspberry-700)',
+          'raspberry-600': 'var(--palette-raspberry-600)',
+          'raspberry-200': 'var(--palette-raspberry-200)',
+          'spearmint-700': 'var(--palette-spearmint-700)',
+          'spearmint-500': 'var(--palette-spearmint-500)',
+          'spearmint-200': 'var(--palette-spearmint-200)',
+          'lemon-700': 'var(--palette-lemon-700)',
+          'lemon-600': 'var(--palette-lemon-600)',
+          'lemon-200': 'var(--palette-lemon-200)',
+          'lime-700': 'var(--palette-lime-700)',
+          'lime-500': 'var(--palette-lime-500)',
+          'lime-200': 'var(--palette-lime-200)',
         },
 
-        // White alpha scale
         'white-alpha': {
           10:  'var(--palette-white-10)',
           20:  'var(--palette-white-20)',
@@ -125,6 +145,10 @@ export default {
         full: 'var(--radius-full)',
       },
 
+      borderWidth: {
+        print: 'var(--border-print)',
+      },
+
       fontWeight: {
         light:    'var(--font-weight-light)',
         regular:  'var(--font-weight-regular)',
@@ -135,10 +159,13 @@ export default {
       },
 
       boxShadow: {
-        sm: 'var(--shadow-sm)',
-        md: 'var(--shadow-md)',
-        lg: 'var(--shadow-lg)',
-        xl: 'var(--shadow-xl)',
+        sm:    'var(--shadow-sm)',
+        md:    'var(--shadow-md)',
+        lg:    'var(--shadow-lg)',
+        xl:    'var(--shadow-xl)',
+        press: 'var(--shadow-press)',
+        hover: 'var(--shadow-hover)',
+        lift:  'var(--shadow-lift)',
       },
 
       transitionDuration: {
@@ -146,6 +173,11 @@ export default {
         base: 'var(--transition-base)',
         slow: 'var(--transition-slow)',
       },
+
+      transitionTimingFunction: {
+        'out-quart': 'var(--ease-out-quart)',
+        spring:      'var(--ease-spring)',
+      },
     },
   },
 };

package/types/components/AddToCartStepper/AddToCartStepper.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export type AddToCartStepperVariant = 'default' | 'compact' | 'compact-pill';
+export interface AddToCartStepperProps {
+    quantity: number;
+    onAdd?: () => void;
+    onIncrease?: () => void;
+    onDecrease?: () => void;
+    addButton?: React.ReactNode;
+    decreaseButton?: React.ReactNode;
+    increaseButton?: React.ReactNode;
+    disabled?: boolean;
+    loading?: boolean;
+    addLabel?: string;
+    /** Height and max width for the default (full-width cart) layout; ignored for compact variants. */
+    size?: 'sm' | 'default';
+    variant?: AddToCartStepperVariant;
+    className?: string;
+}
+export declare function AddToCartStepper({ quantity, onAdd, onIncrease, onDecrease, addButton, decreaseButton, increaseButton, disabled, loading, addLabel, size, variant, className, }: AddToCartStepperProps): import("react/jsx-runtime").JSX.Element;

package/types/components/Aside/Aside.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const Aside: React.FC<DialogPrimitive.DialogProps>;
+declare const AsideTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AsidePortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const AsideClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AsideOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const asideContentVariants: (props?: ({
+    side?: "left" | "right" | null | undefined;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export interface AsideContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof asideContentVariants> {
+}
+declare const AsideContent: React.ForwardRefExoticComponent<AsideContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const AsideHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AsideBody: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AsideFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const AsideTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AsideDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AsideCloseButton: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Aside, AsidePortal, AsideOverlay, AsideTrigger, AsideClose, AsideContent, AsideHeader, AsideBody, AsideFooter, AsideTitle, AsideDescription, AsideCloseButton, };

package/types/components/Badge/Badge.d.ts

@@ -1,9 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "tone" | "success" | "warning" | "sale" | "soldout" | "new" | "ink" | "print" | null | undefined;
+    rotate?: "none" | "left" | "right" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
-declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+declare function Badge({ className, variant, rotate, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export { Badge, badgeVariants };

package/types/components/Button/Button.d.ts

@@ -1,11 +1,12 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "tone" | "cart" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "xl" | "pill" | null | undefined;
 } & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
+    loading?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button, buttonVariants };

package/types/components/ProductCard/ProductCard.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export type ProductCardTone = 'blueras' | 'raspberry' | 'spearmint' | 'lemon' | 'lime';
+export interface ProductCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    imageSrc?: string;
+    imageAlt: string;
+    imageLoading?: 'eager' | 'lazy';
+    /** cover = fill frame; contain = cutout on tone field */
+    fit?: 'cover' | 'contain';
+    /** Flavor tone — vars resolve via data-tone-vars; fill on hover/focus (or rest when toneMode="rest") */
+    tone?: ProductCardTone | null;
+    /** hover = transparent rest + tone on group-hover/focus-within; rest = always filled (Storybook) */
+    toneMode?: 'hover' | 'rest';
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Meta line e.g. flavor label */
+    meta?: React.ReactNode;
+    /** Price label on media (top-left); page-colored field, print border on hover */
+    price?: React.ReactNode;
+    compareAtPrice?: React.ReactNode;
+    badgeTopLeft?: React.ReactNode;
+    badgeTopRight?: React.ReactNode;
+    footer?: React.ReactNode;
+}
+declare const ProductCard: React.ForwardRefExoticComponent<ProductCardProps & React.RefAttributes<HTMLDivElement>>;
+export { ProductCard };

package/types/components/Text/Text.d.ts

@@ -1,12 +1,14 @@
 import * as React from 'react';
-export type TextVariant = 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'subtitle-lg' | 'subtitle-md' | 'body-lg' | 'body-md' | 'body-sm' | 'caption-md' | 'caption-sm' | 'overline';
+export type TextVariant = 'display-2xl' | 'display-xl' | 'display-lg' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'meta-md' | 'meta-sm' | 'subtitle-lg' | 'subtitle-md' | 'body-lg' | 'body-md' | 'body-sm' | 'caption-md' | 'caption-sm' | 'overline';
 export type FontWeight = 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'black';
-export type TextColor = 'color-text' | 'color-text-muted' | 'color-text-subtle' | 'color-text-on-brand' | 'color-brand' | 'color-brand-dark' | 'color-brand-light' | 'color-accent' | 'color-accent-dark' | 'color-accent-light' | 'color-accent-warm' | 'color-danger' | 'color-success' | 'color-warning';
+export type TextColor = 'color-text' | 'color-text-muted' | 'color-text-subtle' | 'color-text-on-brand' | 'color-brand' | 'color-brand-dark' | 'color-brand-light' | 'color-accent' | 'color-accent-dark' | 'color-accent-light' | 'color-accent-alt' | 'color-accent-warm' | 'color-danger' | 'color-success' | 'color-warning' | 'tone-ink' | 'tone-accent';
 export interface TextProps extends React.HTMLAttributes<HTMLElement> {
     variant?: TextVariant;
     as?: React.ElementType;
     weight?: FontWeight;
     color?: TextColor;
+    /** Applies text-wrap: balance for display headings */
+    balance?: boolean;
 }
 declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
 export { Text };

package/types/index.d.ts

@@ -2,6 +2,7 @@ export * from './components/Text/Text';
 export * from './components/Button/Button';
 export * from './components/Badge/Badge';
 export * from './components/Card/Card';
+export * from './components/ProductCard/ProductCard';
+export * from './components/AddToCartStepper/AddToCartStepper';
 export * from './components/Dialog/Dialog';
-/** Alias for Button — consumed by my-account-proxy and other apps as ActionButton */
-export { Button as ActionButton } from './components/Button/Button';
+export * from './components/Aside/Aside';

package/types/tokens/colors/colors.d.ts

@@ -1,6 +0,0 @@
-/**
- * Valid semantic color token names from src/tokens/theme-light.css and theme-dark.css.
- * Use as: style.color = `var(--${color})` or color prop on Text component.
- * No hex values here — colors resolve at runtime via CSS custom properties.
- */
-export type TextColor = 'color-text' | 'color-text-muted' | 'color-text-subtle' | 'color-text-on-brand' | 'color-brand' | 'color-brand-dark' | 'color-brand-light' | 'color-accent' | 'color-accent-dark' | 'color-accent-light' | 'color-accent-warm' | 'color-danger' | 'color-success' | 'color-warning';

package/types/tokens/spacing/spacing.d.ts

@@ -1,6 +0,0 @@
-/**
- * Spacing token names — match --spacing-* CSS custom properties
- * defined in src/tokens/spacing.css.
- * Usage: style.padding = `var(--spacing-${token})`
- */
-export type SpacingToken = 'none' | 'px' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';

package/types/tokens/typography/typography.d.ts

@@ -1,6 +0,0 @@
-/**
- * Font weight token names — match --font-weight-* CSS custom properties
- * defined in src/tokens/typography-variables.scss.
- * Usage: style.fontWeight = `var(--font-weight-${weight})`
- */
-export type FontWeight = 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'black';