@flikk/ui 1.0.0-beta.12 → 1.0.0-beta.14

package/dist/utils/index.d.ts

@@ -14,3 +14,4 @@ export * from "./formValidation";
 export { calculateVelocity, clampScroll, detectScrollDirection, isReducedMotion, lerp, calculateScrollProgress, normalizeWheelDelta, isScrollable, getMaxScroll, throttle, } from './smoothScrollUtils';
 export { PerformanceMonitor, usePerformanceMonitor } from './performanceMonitor';
 export { type SemanticColor, semanticBgColors, semanticTextColors, semanticSpinnerColors, } from './colorUtils';
+export { generatePalette, generateThemeCSS, type PaletteStep, type GeneratedPalette, type GeneratePaletteOptions, } from './paletteGenerator';

package/dist/utils/paletteGenerator.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Palette Generator Utility
+ *
+ * Converts a hex color to an 11-step OKLCH palette using
+ * Tailwind-matched lightness/chroma curves. The hue is extracted
+ * from the input color and applied across all steps.
+ */
+export interface PaletteStep {
+    /** Tailwind step number: 50, 100, 200 ... 950 */
+    step: number;
+    /** OKLCH CSS string, e.g. "oklch(0.9778 0.0108 270)" */
+    oklch: string;
+    /** Approximate sRGB hex for preview swatches */
+    hex: string;
+}
+export interface GeneratedPalette {
+    /** Semantic name, e.g. "primary" */
+    name: string;
+    /** Extracted OKLCH hue (degrees) */
+    hue: number;
+    /** 11 palette steps from 50 to 950 */
+    steps: PaletteStep[];
+    /** Auto-calculated contrast color (hex) for text on the base step */
+    contrast: 'light' | 'dark';
+}
+export interface GeneratePaletteOptions {
+    /** Scales chroma up/down. Default 1.0 */
+    vibrancy?: number;
+}
+/**
+ * Generate an 11-step OKLCH palette from a single hex color.
+ * Extracts the hue from the input and applies Tailwind-matched
+ * lightness and chroma curves.
+ */
+export declare function generatePalette(hex: string, name?: string, options?: GeneratePaletteOptions): GeneratedPalette | null;
+/**
+ * Generate a complete CSS variable block for all semantic colors.
+ *
+ * @param palettes - Map of semantic name → hex color
+ * @param options - Generation options (vibrancy)
+ * @returns Object with `theme` (for @theme block) and `root` (for :root block) CSS strings
+ */
+export declare function generateThemeCSS(palettes: Record<string, string>, options?: GeneratePaletteOptions): {
+    theme: string;
+    root: string;
+} | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.14",
   "description": "A modern React component library built with TypeScript, Tailwind CSS v4, and Framer Motion. Follows the shadcn philosophy with complete className override support.",
   "type": "module",
   "main": "dist/index.js",

package/src/global.scss

@@ -579,6 +579,7 @@
 html,
 body {
   font-family: var(--font-family-base);
+  font-size: 14px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/src/styles/theme.css

@@ -81,7 +81,7 @@
 
   /* text color */
   --color-text-primary: var(--color-neutral-950);
-  --color-text-secondary: var(--color-neutral-800);
+  --color-text-secondary: var(--color-neutral-700);
   --color-text-placeholder: var(--color-neutral-400);
   --color-text-muted: var(--color-neutral-500);
   --color-text-disabled: var(--color-neutral-400);
@@ -112,7 +112,7 @@
   --color-neutral-950: oklch(14.5% 0 0);
 
   /* Font family variables */
-  --font-family-base: "Geist", sans-serif;
+  --font-family-base: var(--font-sans);
   --font-cursive: "Birthstone", cursive;
   --font-weight-light: 300;
   --font-weight-normal: 400;
@@ -121,28 +121,27 @@
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;
 
-  /* Form element variables with explicit values that match Tailwind's scale */
-  --form-min-h-sm: 2rem; /* 32px = h-8 in Tailwind */
-  --form-min-h-md: 2.5rem; /* 40px = h-10 in Tailwind */
-  --form-min-h-lg: 3rem; /* 48px = h-12 in Tailwind */
+  /* Form element variables — fixed px so they don't scale with root font-size */
+  --form-min-h-sm: 32px; /* h-8 in Tailwind */
+  --form-min-h-md: 40px; /* h-10 in Tailwind */
+  --form-min-h-lg: 48px; /* h-12 in Tailwind */
 
-  --form-label-pb: 0.5rem; /* 8px = pb-2 in Tailwind */
+  --form-label-pb: 8px; /* pb-2 in Tailwind */
 
-  --form-px-sm: 0.75rem; /* 12px = px-3 in Tailwind */
-  --form-px-md: 0.875rem; /* 14px = px-3.5 in Tailwind */
-  --form-px-lg: 1rem; /* 16px = px-4 in Tailwind */
-
-  --form-py-sm: 0.5rem; /* 0.5rem 8px = py-1 in Tailwind */
-  --form-py-md: 0.625rem; /* 0.625rem 10px = py-2 in Tailwind */
-  --form-py-lg: 0.75rem; /* 0.75rem 12px = py-3 in Tailwind */
+  --form-px-sm: 12px; /* px-3 in Tailwind */
+  --form-px-md: 14px; /* px-3.5 in Tailwind */
+  --form-px-lg: 16px; /* px-4 in Tailwind */
 
+  --form-py-sm: 8px; /* py-1 in Tailwind */
+  --form-py-md: 10px; /* py-2 in Tailwind */
+  --form-py-lg: 12px; /* py-3 in Tailwind */
 
   /* ============================================
      BORDER RADIUS SYSTEM
      Change --radius-base to adjust the entire UI.
      Individual --*-radius variables can be overridden independently.
      ============================================ */
-  --radius-base: 0.5rem; /* 8px - Base radius token */
+  --radius-base: 8px; /* Base radius token */
 
   /* Forms & Controls (1x base = 8px) */
   --form-radius: var(--radius-base);
@@ -160,8 +159,8 @@
   --metric-radius: calc(var(--radius-base) * 2);
 
   /* Surfaces (3x base = 24px) */
-  --card-radius: calc(var(--radius-base) * 3);
-  --modal-radius: calc(var(--radius-base) * 3);
+  --card-radius: calc(var(--radius-base) * 2);
+  --modal-radius: calc(var(--radius-base) * 2);
 
   /* Special shapes - not part of scale */
   --segmented-radius: var(--form-radius);
@@ -182,25 +181,24 @@
   --button-min-h-md: var(--form-min-h-md);
   --button-min-h-lg: var(--form-min-h-lg);
 
-  /* Button padding */
-  --button-px-sm: 0.75rem; /* 12px */
-  --button-py-sm: 0; /* 6px */
-  --button-px-md: 0.875rem; /* 14px */
-  --button-py-md: 0; /* 10px */
-  --button-px-lg: 1.25rem; /* 20px */
-  --button-py-lg: 0; /* 12px */
+  /* Button padding — fixed px */
+  --button-px-sm: 12px;
+  --button-py-sm: 0;
+  --button-px-md: 14px;
+  --button-py-md: 0;
+  --button-px-lg: 20px;
+  --button-py-lg: 0;
 
-  /* Button icon-only padding */
-  --button-icon-p-sm: 0.375rem; /* 6px */
-  --button-icon-p-md: 0.5rem; /* 8px */
-  --button-icon-p-lg: 0.625rem; /* 10px */
+  /* Button icon-only padding — fixed px */
+  --button-icon-p-sm: 6px;
+  --button-icon-p-md: 8px;
+  --button-icon-p-lg: 10px;
 
   /* Button icon-only sizes */
   --button-icon-size-sm: var(--form-min-h-sm);
   --button-icon-size-md: var(--form-min-h-md);
   --button-icon-size-lg: var(--form-min-h-lg);
 
-
   /* Badge variables */
   --badge-radius: var(--form-radius);
 
@@ -218,7 +216,6 @@
   --segmented-py-md: var(--form-py-md);
   --segmented-py-lg: var(--form-py-lg);
 
-
   /* Segmented sliding background */
   --segmented-active-bg: #ffffff;
   --segmented-active-shadow:
@@ -247,13 +244,12 @@
   --chat-bubble-border-sender: rgba(255, 255, 255, 0.4);
   --chat-bubble-border-receiver: rgba(255, 255, 255, 1);
 
-  /* Avatar variables */
-  --avatar-size-xs: 1.5rem; /* 24px = size-6 in Tailwind */
-  --avatar-size-sm: 2rem; /* 32px = size-8 in Tailwind */
-  --avatar-size-md: 2.5rem; /* 40px = size-10 in Tailwind */
-  --avatar-size-lg: 3rem; /* 48px = size-12 in Tailwind */
-  --avatar-size-xl: 4rem; /* 64px = size-16 in Tailwind */
-
+  /* Avatar variables — fixed px */
+  --avatar-size-xs: 24px; /* size-6 in Tailwind */
+  --avatar-size-sm: 32px; /* size-8 in Tailwind */
+  --avatar-size-md: 40px; /* size-10 in Tailwind */
+  --avatar-size-lg: 48px; /* size-12 in Tailwind */
+  --avatar-size-xl: 64px; /* size-16 in Tailwind */
 
   /* Avatar radius - now defined in radius system above */
 
@@ -261,32 +257,32 @@
   --carousel-container-width: 100%; /* Full width container */
   --carousel-slide-width: 66vw; /* Default slide width - can be overridden */
   --carousel-slide-height: 44rem; /* 384px = h-96 */
-  --carousel-slide-gap: 1rem; /* 16px gap between slides */
-  --carousel-controls-size: 3rem; /* 48px control button size */
-  --carousel-controls-offset: 1rem; /* Distance from edge */
+  --carousel-slide-gap: 16px; /* gap between slides */
+  --carousel-controls-size: 48px; /* control button size */
+  --carousel-controls-offset: 16px; /* distance from edge */
 
   /* Popover variables - radius now defined in radius system above */
   --popover-shadow:
     0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --popover-border-width: 1px;
   --popover-backdrop-opacity: 0.5;
-  --popover-offset-sm: 0.5rem;
-  --popover-offset-md: 0.5rem;
-  --popover-offset-lg: 0.75rem;
-  --popover-max-width-sm: 16rem;
-  --popover-max-width-md: 24rem;
-  --popover-max-width-lg: 32rem;
-  --popover-padding-sm: 0.75rem;
-  --popover-padding-md: 0.75rem;
-  --popover-padding-lg: 1rem;
+  --popover-offset-sm: 8px;
+  --popover-offset-md: 8px;
+  --popover-offset-lg: 12px;
+  --popover-max-width-sm: 256px;
+  --popover-max-width-md: 384px;
+  --popover-max-width-lg: 512px;
+  --popover-padding-sm: 12px;
+  --popover-padding-md: 12px;
+  --popover-padding-lg: 16px;
 
   /* NavItem variables */
   --nav-item-radius: var(--radius-base);
-  --nav-item-min-h: 2.5rem; /* 40px = h-10 in Tailwind */
+  --nav-item-min-h: 40px; /* h-10 in Tailwind */
 
-  /* NavItem padding */
-  --nav-item-px: 0.75rem; /* 12px = px-3 in Tailwind */
-  --nav-item-py: 0.625rem; /* 10px = py-2.5 in Tailwind */
+  /* NavItem padding — fixed px */
+  --nav-item-px: 12px; /* px-3 in Tailwind */
+  --nav-item-py: 10px; /* py-2.5 in Tailwind */
 
   /* Modal and Drawer */
   --overlay-bg: rgba(0, 0, 0, 0.65);
@@ -325,7 +321,7 @@
     --color-text-inverse: var(--color-neutral-950);
 
     /* Base theme colors */
-    --color-primary: var(--color-primary-400);
+    --color-primary: var(--color-primary-600);
     --color-success: var(--color-success-400);
     --color-warning: var(--color-warning-400);
     --color-danger: var(--color-danger-400);

package/dist/components/core/Loader/Loader.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import { LoaderProps } from './Loader.types';
-/**
- * Loader component - Supports both circular (spinner) and linear (progress bar) variants
- *
- * Features:
- * - Circular variant: Spinning loader for indeterminate loading
- * - Linear variant: Progress bar with determinate (value) or indeterminate modes
- * - Multiple sizes and semantic colors
- * - Optional percentage/label display for linear variant
- * - Full theme customization
- *
- * @example
- * // Circular loader
- * <Loader variant="circular" size="md" />
- *
- * // Linear progress bar (determinate)
- * <Loader variant="linear" value={60} showLabel />
- *
- * // Linear loading bar (indeterminate)
- * <Loader variant="linear" />
- */
-declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
-export { Loader };

package/dist/components/core/Loader/Loader.js

@@ -1,57 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useMemo } from 'react';
-import { loaderTheme } from './Loader.theme.js';
-import { cn } from '../../../utils/cn.js';
-
-/**
- * Loader component - Supports both circular (spinner) and linear (progress bar) variants
- *
- * Features:
- * - Circular variant: Spinning loader for indeterminate loading
- * - Linear variant: Progress bar with determinate (value) or indeterminate modes
- * - Multiple sizes and semantic colors
- * - Optional percentage/label display for linear variant
- * - Full theme customization
- *
- * @example
- * // Circular loader
- * <Loader variant="circular" size="md" />
- *
- * // Linear progress bar (determinate)
- * <Loader variant="linear" value={60} showLabel />
- *
- * // Linear loading bar (indeterminate)
- * <Loader variant="linear" />
- */
-const Loader = React__default.forwardRef(({ variant = 'circular', size = 'md', color = 'primary', value, max = 100, showLabel = false, label, className, theme: customTheme, ...props }, ref) => {
-    var _a, _b;
-    // Merge custom theme with default theme
-    const theme = useMemo(() => customTheme ? { ...loaderTheme, ...customTheme } : loaderTheme, [customTheme]);
-    // Calculate percentage for linear variant
-    const percentage = useMemo(() => {
-        if (value === undefined || value === null)
-            return 0;
-        const pct = Math.min(Math.max((value / max) * 100, 0), 100);
-        return Math.round(pct);
-    }, [value, max]);
-    // Determine if this is indeterminate mode (no value provided)
-    const isIndeterminate = value === undefined || value === null;
-    // Get theme values for current size and color
-    const sizeStyles = ((_a = theme.sizes) === null || _a === void 0 ? void 0 : _a[size]) || theme.sizes['md'];
-    const colorStyles = ((_b = theme.colors) === null || _b === void 0 ? void 0 : _b[color]) || theme.colors['primary'];
-    // Render circular variant (spinner)
-    if (variant === 'circular') {
-        return (jsx("div", { ref: ref, className: cn(theme.baseStyle, className), role: "status", "aria-label": "loading", ...props, children: jsx("div", { className: cn(theme.circularStyle, theme.animation, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.circular, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.circular) }) }));
-    }
-    // Render linear variant (progress bar)
-    return (jsxs("div", { ref: ref, className: cn(theme.linearContainerStyle, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": max, "aria-valuenow": isIndeterminate ? undefined : value, "aria-label": isIndeterminate ? "loading" : `${percentage}% complete`, ...props, children: [jsx("div", { className: cn(theme.linearTrackStyle, sizeStyles === null || sizeStyles === void 0 ? void 0 : sizeStyles.linear), children: isIndeterminate ? (
-                // Indeterminate loading animation
-                jsx("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear, "w-1/3 animate-[shimmer_2s_ease-in-out_infinite]"), style: {
-                        backgroundImage: `linear-gradient(90deg, transparent, currentColor, transparent)`,
-                    } })) : (
-                // Determinate progress bar
-                jsx("div", { className: cn(theme.linearBarStyle, colorStyles === null || colorStyles === void 0 ? void 0 : colorStyles.linear), style: { width: `${percentage}%` } })) }), showLabel && !isIndeterminate && (jsx("span", { className: theme.linearLabelStyle, children: label || `${percentage}%` }))] }));
-});
-Loader.displayName = 'Loader';
-
-export { Loader };

package/dist/components/core/Loader/Loader.theme.d.ts

@@ -1,27 +0,0 @@
-import { LoaderSize, LoaderColor } from "./Loader.types";
-/**
- * Internal theme structure for the Loader component
- */
-interface LoaderTheme {
-    baseStyle: string;
-    circularStyle: string;
-    linearContainerStyle: string;
-    linearTrackStyle: string;
-    linearBarStyle: string;
-    linearLabelStyle: string;
-    sizes: Record<LoaderSize, {
-        circular: string;
-        linear: string;
-    }>;
-    colors: Record<LoaderColor, {
-        circular: string;
-        linear: string;
-    }>;
-    animation: string;
-}
-/**
- * Default theme for the Loader component
- * Uses production-ready CSS variables from global.scss
- */
-export declare const loaderTheme: LoaderTheme;
-export {};

package/dist/components/core/Loader/Loader.theme.js

@@ -1,60 +0,0 @@
-/**
- * Default theme for the Loader component
- * Uses production-ready CSS variables from global.scss
- */
-const loaderTheme = {
-    // Base styles for the loader container
-    baseStyle: "inline-flex items-center justify-center",
-    // Circular variant (spinner) styles
-    circularStyle: "rounded-full",
-    // Linear variant container
-    linearContainerStyle: "w-full flex items-center gap-3",
-    // Linear track (background)
-    linearTrackStyle: "flex-1 h-2 rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
-    // Linear bar (foreground)
-    linearBarStyle: "h-full rounded-full transition-all duration-300 ease-out",
-    // Label text for linear variant
-    linearLabelStyle: "text-base font-medium text-[var(--color-text-secondary)] min-w-[3ch] tabular-nums",
-    // Size variants for both circular and linear
-    sizes: {
-        sm: {
-            circular: "size-4 border-2",
-            linear: "h-1.5",
-        },
-        md: {
-            circular: "size-5 border-[3px]",
-            linear: "h-2",
-        },
-        lg: {
-            circular: "size-6 border-[3px]",
-            linear: "h-3",
-        },
-    },
-    // Color variants using correct CSS variables
-    colors: {
-        primary: {
-            circular: "border-[var(--color-primary)] border-t-transparent",
-            linear: "bg-[var(--color-primary)]",
-        },
-        success: {
-            circular: "border-[var(--color-success)] border-t-transparent",
-            linear: "bg-[var(--color-success)]",
-        },
-        warning: {
-            circular: "border-[var(--color-warning)] border-t-transparent",
-            linear: "bg-[var(--color-warning)]",
-        },
-        danger: {
-            circular: "border-[var(--color-danger)] border-t-transparent",
-            linear: "bg-[var(--color-danger)]",
-        },
-        muted: {
-            circular: "border-[var(--color-text-muted)] border-t-transparent",
-            linear: "bg-[var(--color-text-muted)]",
-        },
-    },
-    // Animation class for circular spinner
-    animation: "animate-[spin_1s_linear_infinite]",
-};
-
-export { loaderTheme };

package/dist/components/core/Loader/Loader.types.d.ts

@@ -1,71 +0,0 @@
-/**
- * Loader component props
- * Supports both circular (spinner) and linear (progress bar) variants
- */
-export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The variant of the loader
-     * @default "circular"
-     */
-    variant?: LoaderVariant;
-    /**
-     * The size of the loader
-     * @default "md"
-     */
-    size?: LoaderSize;
-    /**
-     * The color of the loader
-     * @default "primary"
-     */
-    color?: LoaderColor;
-    /**
-     * Current progress value (0-100)
-     * Only applies to linear variant
-     * If not provided, shows indeterminate loading animation
-     */
-    value?: number;
-    /**
-     * Maximum value for progress
-     * @default 100
-     */
-    max?: number;
-    /**
-     * Show percentage label
-     * Only applies to linear variant with value prop
-     * @default false
-     */
-    showLabel?: boolean;
-    /**
-     * Custom label text (overrides percentage)
-     * Only applies to linear variant
-     */
-    label?: string;
-    /**
-     * Custom CSS class to apply to the loader
-     */
-    className?: string;
-    /**
-     * Theme overrides for the loader
-     */
-    theme?: LoaderThemeOverrides;
-}
-export type LoaderVariant = "circular" | "linear";
-export type LoaderSize = "sm" | "md" | "lg";
-export type LoaderColor = "primary" | "success" | "warning" | "danger" | "muted";
-export interface LoaderThemeOverrides {
-    baseStyle?: string;
-    circularStyle?: string;
-    linearContainerStyle?: string;
-    linearTrackStyle?: string;
-    linearBarStyle?: string;
-    linearLabelStyle?: string;
-    sizes?: Partial<Record<LoaderSize, {
-        circular: string;
-        linear: string;
-    }>>;
-    colors?: Partial<Record<LoaderColor, {
-        circular: string;
-        linear: string;
-    }>>;
-    animation?: string;
-}

package/dist/components/core/Loader/index.d.ts

@@ -1,2 +0,0 @@
-export { Loader } from './Loader';
-export type { LoaderProps, LoaderVariant, LoaderSize, LoaderColor } from './Loader.types';