@flikk/ui 1.0.0-beta.24 → 1.0.0-beta.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.24",
+  "version": "1.0.0-beta.26",
   "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/styles/theme.css

@@ -88,12 +88,23 @@
   --color-text-inverse: var(--color-neutral-50);
 
   /* generic colors */
-  --color-border: oklch(90% 0 0);
+  --color-border: oklch(93% 0 0);
   --color-border-secondary: oklch(87% 0 0);
+  /* Surface elevation ladder: surface-sunken < background (floor) < surface < surface-raised < surface-overlay.
+     In light mode raised surfaces are ~white (elevation via shadow + border); sunken is recessed below the floor. */
+  --color-surface-sunken: oklch(94% 0 0);
   --color-surface: oklch(100% 0 0);
+  --color-surface-raised: oklch(100% 0 0);
+  --color-surface-overlay: oklch(100% 0 0);
+  /* Interaction fill (the one tokenized state): translucent tint so it composites correctly
+     over ANY surface level — darkens in light, lightens in dark. For hover/active highlights. */
+  --color-surface-hover: oklch(0% 0 0 / 0.05);
   --color-chart-track: rgba(0, 0, 0, 0.06);
   --color-background: oklch(98.5% 0.002 247.839);
-  --color-background-secondary: oklch(98.5% 0 0);
+  /* DEPRECATED (remove next major): alias of --color-surface. Use the surface ladder. */
+  --color-background-secondary: var(--color-surface);
+  /* DEPRECATED (remove next major): recessed/subtle fills. Migrate per-usage to --color-surface-sunken
+     (dark values below are inverted vs. a correct sunken token, so no blind alias). */
   --color-background-tertiary: oklch(90% 0.002 247.839);
   --color-background-quaternary: oklch(85% 0.002 247.839);
   --color-background-quinary: oklch(80% 0.002 247.839);
@@ -122,26 +133,37 @@
   --font-weight-extrabold: 800;
 
   /* 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: 8px; /* pb-2 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 */
+  --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: 8px;
+  /* pb-2 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: 8px; /* Base radius token */
+  --radius-base: 8px;
+  /* Base radius token */
 
   /* Forms & Controls (1x base = 8px) */
   --form-radius: var(--radius-base);
@@ -208,14 +230,21 @@
   --segmented-min-h-lg: var(--form-min-h-lg);
 
   /* Segmented padding */
-  --segmented-px-sm: var(--form-px-sm);
-  --segmented-px-md: var(--form-px-md);
-  --segmented-px-lg: var(--form-px-lg);
+  --segmented-px-sm: 8px;
+  --segmented-px-md: 10px;
+  --segmented-px-lg: 12px;
 
   --segmented-py-sm: var(--form-py-sm);
   --segmented-py-md: var(--form-py-md);
   --segmented-py-lg: var(--form-py-lg);
 
+  /* Segmented inner offset — drives wrapper padding AND inner radius so
+     the sliding background + items stay concentric with the outer shell.
+     border (1px) + padding (--segmented-padding) = total inset. */
+  --segmented-padding: 0.125rem;
+  /* 2px */
+  --segmented-inner-radius: calc(var(--segmented-radius) - var(--segmented-padding) - 1px);
+
   /* Segmented sliding background */
   --segmented-active-bg: #ffffff;
   --segmented-active-shadow:
@@ -227,39 +256,46 @@
   --glass-layer-inner-offset: 1.5px;
 
   /* Glass effect gradient variables */
-  --glass-gradient-outer: linear-gradient(
-    to bottom,
-    rgba(250, 250, 250, 0.8) 0%,
-    rgba(229, 229, 229, 0.8) 30%,
-    rgba(242, 242, 242, 0.8) 70%,
-    rgba(250, 250, 250, 0.8) 100%
-  );
-  --glass-gradient-inner: linear-gradient(
-    to bottom,
-    rgba(242, 242, 242, 0.8) 0%,
-    rgba(250, 250, 250, 0.8) 100%
-  );
+  --glass-gradient-outer: linear-gradient(to bottom,
+      rgba(250, 250, 250, 0.8) 0%,
+      rgba(229, 229, 229, 0.8) 30%,
+      rgba(242, 242, 242, 0.8) 70%,
+      rgba(250, 250, 250, 0.8) 100%);
+  --glass-gradient-inner: linear-gradient(to bottom,
+      rgba(242, 242, 242, 0.8) 0%,
+      rgba(250, 250, 250, 0.8) 100%);
 
   /* Chat message variables */
   --chat-bubble-border-sender: rgba(255, 255, 255, 0.4);
   --chat-bubble-border-receiver: rgba(255, 255, 255, 1);
 
   /* 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-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 */
 
   /* Carousel Variables */
-  --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: 16px; /* gap between slides */
-  --carousel-controls-size: 48px; /* control button size */
-  --carousel-controls-offset: 16px; /* distance from edge */
+  --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: 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:
@@ -278,16 +314,20 @@
 
   /* NavItem variables */
   --nav-item-radius: var(--radius-base);
-  --nav-item-min-h: 40px; /* h-10 in Tailwind */
+  --nav-item-min-h: 40px;
+  /* h-10 in Tailwind */
 
   /* NavItem padding — fixed px */
-  --nav-item-px: 12px; /* px-3 in Tailwind */
-  --nav-item-py: 10px; /* py-2.5 in Tailwind */
+  --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);
   --overlay-blur: 2px;
-  --color-scale-background: oklch(0% 0 0); /* backdrop behind scaled content */
+  --color-scale-background: oklch(0% 0 0);
+  /* backdrop behind scaled content */
   /* Modal radius - now defined in radius system above */
 
   /* Shadow color presets for utility generation */
@@ -325,21 +365,17 @@
     inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.4),
     inset -1px -1px 2px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.06),
     0 2px 4px rgba(0, 0, 0, 0.04);
-  --neu-raised-border: linear-gradient(
-    145deg,
-    rgba(255, 255, 255, 0.7) 0%,
-    rgba(255, 255, 255, 0.35) 30%,
-    transparent 50%,
-    rgba(0, 0, 0, 0.06) 100%
-  );
-  --neu-inset-border: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0.1) 0%,
-    rgba(0, 0, 0, 0.04) 25%,
-    rgba(255, 255, 255, 0.15) 50%,
-    rgba(255, 255, 255, 0.35) 75%,
-    rgba(255, 255, 255, 0.5) 100%
-  );
+  --neu-raised-border: linear-gradient(145deg,
+      rgba(255, 255, 255, 0.7) 0%,
+      rgba(255, 255, 255, 0.35) 30%,
+      transparent 50%,
+      rgba(0, 0, 0, 0.06) 100%);
+  --neu-inset-border: linear-gradient(180deg,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(0, 0, 0, 0.04) 25%,
+      rgba(255, 255, 255, 0.15) 50%,
+      rgba(255, 255, 255, 0.35) 75%,
+      rgba(255, 255, 255, 0.5) 100%);
 }
 
 /* ============================================
@@ -360,7 +396,7 @@
     --color-text-primary: var(--color-neutral-50);
     --color-text-secondary: var(--color-neutral-400);
     --color-text-placeholder: var(--color-neutral-600);
-    --color-text-muted: var(--color-neutral-500);
+    --color-text-muted: var(--color-neutral-600);
     --color-text-disabled: var(--color-neutral-400);
     --color-text-inverse: var(--color-neutral-950);
 
@@ -379,9 +415,16 @@
     --color-secondary-contrast: var(--color-neutral-50);
 
     /* Background colors - dark equivalents */
-    --color-surface: oklch(14.5% 0 0);
+    /* Surface elevation ladder: sunken sits below the floor; surface levels ascend so each reads as raised. */
+    --color-surface-sunken: oklch(13% 0 0);
+    --color-surface: oklch(18% 0 0);
+    --color-surface-raised: oklch(22% 0 0);
+    --color-surface-overlay: oklch(25% 0 0);
+    --color-surface-hover: oklch(100% 0 0 / 0.07);
     --color-background: oklch(14.5% 0 0);
-    --color-background-secondary: oklch(18% 0 0);
+    /* DEPRECATED (remove next major): alias of --color-surface. */
+    --color-background-secondary: var(--color-surface);
+    /* DEPRECATED (remove next major): migrate per-usage to --color-surface-sunken / surface ladder. */
     --color-background-tertiary: oklch(22% 0 0);
     --color-background-quaternary: oklch(26% 0 0);
     --color-background-quinary: oklch(30% 0 0);
@@ -396,18 +439,14 @@
     --color-chart-track: rgba(255, 255, 255, 0.05);
 
     /* Glass effect gradients - dark mode */
-    --glass-gradient-outer: linear-gradient(
-      135deg,
-      var(--color-background-tertiary) 0%,
-      var(--color-background-secondary) 30%,
-      var(--color-background) 70%,
-      var(--color-background-tertiary) 100%
-    );
-    --glass-gradient-inner: linear-gradient(
-      to bottom,
-      var(--color-background-secondary) 0%,
-      var(--color-background) 100%
-    );
+    --glass-gradient-outer: linear-gradient(135deg,
+        var(--color-background-tertiary) 0%,
+        var(--color-background-secondary) 30%,
+        var(--color-background) 70%,
+        var(--color-background-tertiary) 100%);
+    --glass-gradient-inner: linear-gradient(to bottom,
+        var(--color-background-secondary) 0%,
+        var(--color-background) 100%);
 
     /* Scrollbar - dark mode */
     --ui-scrollbar-thumb-rest: rgba(75, 85, 99, 0.3);
@@ -444,20 +483,16 @@
       inset -0.5px -0.5px 1px rgba(255, 255, 255, 0.04),
       inset -1px -1px 2px rgba(255, 255, 255, 0.03),
       0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.2);
-    --neu-raised-border: linear-gradient(
-      145deg,
-      rgba(255, 255, 255, 0.2) 0%,
-      rgba(255, 255, 255, 0.08) 30%,
-      transparent 50%,
-      rgba(0, 0, 0, 0.12) 100%
-    );
-    --neu-inset-border: linear-gradient(
-      180deg,
-      rgba(0, 0, 0, 0.4) 0%,
-      rgba(0, 0, 0, 0.15) 25%,
-      rgba(255, 255, 255, 0.03) 50%,
-      rgba(255, 255, 255, 0.08) 75%,
-      rgba(255, 255, 255, 0.12) 100%
-    );
+    --neu-raised-border: linear-gradient(145deg,
+        rgba(255, 255, 255, 0.2) 0%,
+        rgba(255, 255, 255, 0.08) 30%,
+        transparent 50%,
+        rgba(0, 0, 0, 0.12) 100%);
+    --neu-inset-border: linear-gradient(180deg,
+        rgba(0, 0, 0, 0.4) 0%,
+        rgba(0, 0, 0, 0.15) 25%,
+        rgba(255, 255, 255, 0.03) 50%,
+        rgba(255, 255, 255, 0.08) 75%,
+        rgba(255, 255, 255, 0.12) 100%);
   }
-}
+}

package/dist/components/core/Sidebar/SidebarSubmenu.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-export interface SidebarSubmenuProps {
-    children: React.ReactNode;
-    isOpen: boolean;
-    className?: string;
-}
-export declare const SidebarSubmenu: ({ children, isOpen, className, }: SidebarSubmenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/core/Sidebar/SidebarSubmenu.js

@@ -1,12 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { AnimatePresence, motion } from 'motion/react';
-import { cn } from '../../../utils/cn.js';
-
-const SidebarSubmenu = ({ children, isOpen, className, }) => {
-    return (jsx(AnimatePresence, { initial: false, children: isOpen && (jsx(motion.div, { initial: "collapsed", animate: "open", exit: "collapsed", variants: {
-                open: { opacity: 1, height: "auto" },
-                collapsed: { opacity: 0, height: 0 },
-            }, transition: { duration: 0.2, ease: "easeInOut" }, className: cn("overflow-hidden", className), children: children })) }));
-};
-
-export { SidebarSubmenu };