@dalshenekuda/candy-ui 2.0.0

package/package.json

@@ -0,0 +1,111 @@
+{
+  "name": "@dalshenekuda/candy-ui",
+  "version": "2.0.0",
+  "description": "A React UI components library with Tailwind CSS",
+  "type": "module",
+  "main": "./build/ui-kit.js",
+  "types": "./types/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./build/ui-kit.js"
+    },
+    "./style.css": "./build/style.css",
+    "./tailwind.preset": "./tailwind.preset.js"
+  },
+  "files": [
+    "build",
+    "types",
+    "tailwind.preset.js"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,json,css}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,json,css}\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "build:watch": "vite build --watch",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "npm run build && changeset publish"
+  },
+  "keywords": [
+    "react",
+    "ui-kit",
+    "components",
+    "button",
+    "dialog",
+    "tailwindcss",
+    "design-system",
+    "accessible",
+    "typescript"
+  ],
+  "engines": {
+    "node": ">=18.0.0 || >=20.0.0 || >=22.0.0",
+    "npm": ">=8.0.0"
+  },
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "overrides": {
+    "minimatch": "^10.2.3",
+    "esbuild": ">=0.25.0"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.31.0",
+    "@chromatic-com/storybook": "^5.0.1",
+    "@eslint/js": "^10.0.1",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
+    "@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",
+    "eslint": "^10.0.2",
+    "eslint-config-prettier": "^10.1.0",
+    "jsdom": "^27.2.0",
+    "minimatch": "^10.2.3",
+    "postcss": "^8.5.6",
+    "prettier": "^3.0.0",
+    "rollup": "^4.59.0",
+    "sass": "^1.99.0",
+    "storybook": "^10.3.6",
+    "tailwindcss": "^3.4.18",
+    "tailwindcss-animate": "^1.0.7",
+    "terser": "^5.46.2",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.0.0",
+    "unplugin-dts": "^1.0.0",
+    "vite": "^8.0.10",
+    "vitest": "^4.0.14"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "recharts": "^2.15.4",
+    "tailwind-merge": "^3.5.0"
+  }
+}

package/tailwind.preset.js

@@ -0,0 +1,151 @@
+/**
+ * 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.
+ */
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: 'class',
+  theme: {
+    extend: {
+      screens: {
+        sm:      '640px',
+        md:      '768px',
+        lg:      '1024px',
+        xl:      '1280px',
+        '2xl':   '1536px',
+        desktop: '992px',   // matches --bp-desktop / typography breakpoint
+      },
+
+      spacing: {
+        none: 'var(--spacing-none)',
+        px:   'var(--spacing-px)',
+        '2xs': 'var(--spacing-2xs)',
+        xs:   'var(--spacing-xs)',
+        sm:   'var(--spacing-sm)',
+        md:   'var(--spacing-md)',
+        lg:   'var(--spacing-lg)',
+        xl:   'var(--spacing-xl)',
+        '2xl': 'var(--spacing-2xl)',
+        '3xl': 'var(--spacing-3xl)',
+        '4xl': 'var(--spacing-4xl)',
+      },
+
+      colors: {
+        // Semantic tokens — use these in components
+        bg:      'var(--color-bg)',
+        surface: 'var(--color-surface)',
+        'surface-raised': 'var(--color-surface-raised)',
+
+        text: {
+          DEFAULT: 'var(--color-text)',
+          muted:   'var(--color-text-muted)',
+          subtle:  'var(--color-text-subtle)',
+          'on-brand': 'var(--color-text-on-brand)',
+        },
+
+        brand: {
+          DEFAULT: 'var(--color-brand)',
+          dark:    'var(--color-brand-dark)',
+          light:   'var(--color-brand-light)',
+        },
+
+        accent: {
+          DEFAULT: 'var(--color-accent)',
+          dark:    'var(--color-accent-dark)',
+          light:   'var(--color-accent-light)',
+          warm:    'var(--color-accent-warm)',
+        },
+
+        border: {
+          DEFAULT: 'var(--color-border)',
+          subtle:  'var(--color-border-subtle)',
+        },
+
+        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)',
+        },
+
+        // White alpha scale
+        'white-alpha': {
+          10:  'var(--palette-white-10)',
+          20:  'var(--palette-white-20)',
+          30:  'var(--palette-white-30)',
+          40:  'var(--palette-white-40)',
+          50:  'var(--palette-white-50)',
+          60:  'var(--palette-white-60)',
+          70:  'var(--palette-white-70)',
+          80:  'var(--palette-white-80)',
+          90:  'var(--palette-white-90)',
+          100: 'var(--palette-white-100)',
+        },
+      },
+
+      borderRadius: {
+        none: 'var(--radius-none)',
+        xs:   'var(--radius-xs)',
+        sm:   'var(--radius-sm)',
+        md:   'var(--radius-md)',
+        lg:   'var(--radius-lg)',
+        xl:   'var(--radius-xl)',
+        '2xl': 'var(--radius-2xl)',
+        full: 'var(--radius-full)',
+      },
+
+      fontWeight: {
+        light:    'var(--font-weight-light)',
+        regular:  'var(--font-weight-regular)',
+        medium:   'var(--font-weight-medium)',
+        semibold: 'var(--font-weight-semibold)',
+        bold:     'var(--font-weight-bold)',
+        black:    'var(--font-weight-black)',
+      },
+
+      boxShadow: {
+        sm: 'var(--shadow-sm)',
+        md: 'var(--shadow-md)',
+        lg: 'var(--shadow-lg)',
+        xl: 'var(--shadow-xl)',
+      },
+
+      transitionDuration: {
+        fast: 'var(--transition-fast)',
+        base: 'var(--transition-base)',
+        slow: 'var(--transition-slow)',
+      },
+    },
+  },
+};

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

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | 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;
+export { Badge, badgeVariants };

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

@@ -0,0 +1,11 @@
+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;
+} & import('class-variance-authority/dist/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/types/components/Card/Card.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/types/components/Chart/Chart.d.ts

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import * as RechartsPrimitive from 'recharts';
+declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: React.ReactNode;
+        icon?: React.ComponentType;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+declare const ChartContainer: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartStyle: ({ id, config }: {
+    id: string;
+    config: ChartConfig;
+}) => import("react/jsx-runtime").JSX.Element | null;
+declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
+declare const ChartTooltipContent: React.ForwardRefExoticComponent<Omit<RechartsPrimitive.DefaultTooltipContentProps<import('recharts/types/component/DefaultTooltipContent').ValueType, import('recharts/types/component/DefaultTooltipContent').NameType> & {
+    accessibilityLayer?: boolean;
+    active?: boolean | undefined;
+    includeHidden?: boolean | undefined;
+    allowEscapeViewBox?: import('recharts/types/util/types').AllowInDimension;
+    animationDuration?: import('recharts/types/util/types').AnimationDuration;
+    animationEasing?: import('recharts/types/util/types').AnimationTiming;
+    content?: import('recharts/types/component/Tooltip').ContentType<import('recharts/types/component/DefaultTooltipContent').ValueType, import('recharts/types/component/DefaultTooltipContent').NameType> | undefined;
+    coordinate?: Partial<import('recharts/types/util/types').Coordinate>;
+    cursor?: boolean | React.ReactElement | React.SVGProps<SVGElement>;
+    filterNull?: boolean;
+    defaultIndex?: number;
+    isAnimationActive?: boolean;
+    offset?: number;
+    payloadUniqBy?: import('recharts/types/util/payload/getUniqPayload').UniqueOption<import('recharts/types/component/DefaultTooltipContent').Payload<import('recharts/types/component/DefaultTooltipContent').ValueType, import('recharts/types/component/DefaultTooltipContent').NameType>> | undefined;
+    position?: Partial<import('recharts/types/util/types').Coordinate>;
+    reverseDirection?: import('recharts/types/util/types').AllowInDimension;
+    shared?: boolean;
+    trigger?: "hover" | "click";
+    useTranslate3d?: boolean;
+    viewBox?: import('recharts/types/util/types').CartesianViewBox;
+    wrapperStyle?: React.CSSProperties;
+} & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ChartLegend: typeof RechartsPrimitive.Legend;
+declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+}, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/types/components/Dialog/Dialog.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

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

@@ -0,0 +1,12 @@
+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 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 interface TextProps extends React.HTMLAttributes<HTMLElement> {
+    variant?: TextVariant;
+    as?: React.ElementType;
+    weight?: FontWeight;
+    color?: TextColor;
+}
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>>;
+export { Text };

package/types/index.d.ts

@@ -0,0 +1,8 @@
+export * from './components/Text/Text';
+export * from './components/Button/Button';
+export * from './components/Badge/Badge';
+export * from './components/Card/Card';
+export * from './components/Dialog/Dialog';
+export * from './components/Chart/Chart';
+/** Alias for Button — consumed by my-account-proxy and other apps as ActionButton */
+export { Button as ActionButton } from './components/Button/Button';

package/types/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

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

@@ -0,0 +1,6 @@
+/**
+ * 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

@@ -0,0 +1,6 @@
+/**
+ * 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

@@ -0,0 +1,6 @@
+/**
+ * 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';