@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.27

package/dist/utils/dateUtils.js

@@ -191,5 +191,15 @@ function getDaysBetween(a, b) {
     const end = toDate(b);
     return Math.round((end.getTime() - start.getTime()) / 86400000) + 1;
 }
+/**
+ * Get the ISO week number for a date.
+ */
+function getWeekNumber(date) {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    d.setDate(d.getDate() + 3 - ((d.getDay() + 6) % 7));
+    const yearStart = new Date(d.getFullYear(), 0, 1);
+    return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
+}
 
-export { addDays, formatDateCustom, formatTimestamp, getDaysBetween, getLastMonth, getLastWeek, getThisMonth, getThisWeek, isSameDay, isWeekend, toDate };
+export { addDays, formatDateCustom, formatTimestamp, getDaysBetween, getLastMonth, getLastWeek, getThisMonth, getThisWeek, getWeekNumber, isSameDay, isWeekend, toDate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flikk/ui",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.27",
   "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",
@@ -59,6 +59,7 @@
     "./tailwind.preset.cjs": "./tailwind.preset.cjs",
     "./shadcn-compat.css": "./dist/shadcn-compat.css",
     "./theme.css": "./dist/theme.css",
+    "./registry.json": "./dist/registry.json",
     "./bg/*": "./dist/bg/*"
   },
   "files": [
@@ -70,8 +71,9 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c && npm run build:css && npm run build:assets && npm run build:copy-css",
+    "build": "rollup -c && npm run build:css && npm run build:assets && npm run build:copy-css && npm run build:registry",
     "build:assets": "cp -r public/bg dist/bg",
+    "build:registry": "FLIKK_REGISTRY_OUT=dist/registry.json packages/mcp/node_modules/.bin/tsx packages/mcp/scripts/extract.ts",
     "build:copy-css": "cp src/shadcn-compat.css dist/shadcn-compat.css && cp src/theme-plugin.css dist/theme.css",
     "build:css": "tailwindcss -m -i ./src/tailwind-config.css -o ./dist/styles.css",
     "analyze": "ANALYZE=true rollup -c && open stats.html",

package/src/global.scss

@@ -274,14 +274,9 @@
 
 /* Global overlay scrollbar styling */
 @layer base {
-  :root {
-    /* Scrollbar styling */
-    --ui-scrollbar-size: 4px;
-    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.3);
-    --ui-scrollbar-thumb-active: rgb(209 213 219);
-    --ui-scrollbar-track-rest: transparent;
-    --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
-  }
+  /* Scrollbar token defaults (light + .dark) live in styles/theme.css under
+     @layer theme so the dark override actually wins the cascade. See the note
+     there. The webkit/Firefox rules below just consume those vars. */
 
   * {
     /* Firefox - use thin scrollbar with custom colors */
@@ -897,6 +892,32 @@ body {
   input[type="number"] {
     -moz-appearance: textfield;
   }
+
+  /* Style the native search clear (×) button to match the Tag dismiss icon —
+     muted by default, darkens on hover. Webkit only (Chrome/Safari/Edge);
+     Firefox doesn't render this pseudo-element. */
+  input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 0.875rem;
+    width: 0.875rem;
+    margin-left: 0.25rem;
+    background-color: var(--color-text-muted);
+    cursor: pointer;
+    transition: background-color 200ms ease;
+    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M6 6l12 12'/></svg>");
+            mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 18 18 6M6 6l12 12'/></svg>");
+    -webkit-mask-size: contain;
+            mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+            mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+            mask-position: center;
+  }
+
+  input[type="search"]::-webkit-search-cancel-button:hover {
+    background-color: var(--color-text-primary);
+  }
 }
 
 /* Heatmap flicker animation */

package/src/styles/theme.css

@@ -88,12 +88,26 @@
   --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);
+  /* Interaction border (hover/focus-adjacent) — darkens in light for a clear
+     edge, mirror of --color-surface-hover but on the border axis. */
+  --color-border-hover: oklch(80% 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 +136,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 +233,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 +259,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 +317,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 +368,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%);
 }
 
 /* ============================================
@@ -354,18 +393,48 @@
    Tailwind's generated theme styles.
    ============================================ */
 @layer theme {
+  /* Scrollbar - light mode defaults.
+     These MUST live in @layer theme (not @layer base) alongside the .dark
+     override below. The layer order is `theme, base, ...`, so values in
+     @layer base win over @layer theme — if these defaults sat in base, the
+     .dark override here would never apply and the scrollbar would render with
+     the light (bright) thumb in dark mode. Keeping both in @layer theme means
+     the .dark block (later source order, equal specificity) wins. */
+  :root {
+    /* Tell the UA which palette to paint native chrome (scrollbars, form
+       controls, etc.). Our custom `::-webkit-scrollbar` track/thumb are mostly
+       transparent, so without this the browser composites its *default light*
+       scrollbar underneath — in dark mode the visible (active) track then reads
+       as an opaque white bar showing through the faint dark tint. `.dark` flips
+       this to `dark` below so the UA scrollbar matches the surface. */
+    color-scheme: light;
+    --ui-scrollbar-size: 4px;
+    --ui-scrollbar-thumb-rest: rgba(209, 213, 219, 0.3);
+    --ui-scrollbar-thumb-active: rgb(209 213 219);
+    --ui-scrollbar-track-rest: transparent;
+    --ui-scrollbar-track-active: rgba(209, 213, 219, 0.1);
+  }
+
   .dark {
+    /* Paint native UA chrome (scrollbars, form controls) with the dark palette.
+       Pairs with `color-scheme: light` on :root — fixes the white native
+       scrollbar track that showed through our transparent custom track in dark
+       mode (Select, RichTextEditor dropdowns, any native-overflow surface). */
+    color-scheme: dark;
+
     /* Text colors - inverted for dark backgrounds */
 
+    /* Neutral text ramp (Linear's text reads essentially neutral off-white;
+       slate was too blue against the low-chroma surfaces). */
     --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);
 
     /* Base theme colors */
-    --color-primary: var(--color-primary-600);
+    --color-primary: var(--color-primary-400);
     --color-success: var(--color-success-400);
     --color-warning: var(--color-warning-400);
     --color-danger: var(--color-danger-400);
@@ -379,39 +448,48 @@
     --color-secondary-contrast: var(--color-neutral-50);
 
     /* Background colors - dark equivalents */
-    --color-surface: oklch(14.5% 0 0);
-    --color-background: oklch(14.5% 0 0);
-    --color-background-secondary: oklch(18% 0 0);
+    /* Surface elevation ladder: sunken sits below the floor; surface levels ascend so each reads as raised. */
+    /* Linear-mapped: near-black floor with a *faint* cool tint (chroma ~0.004,
+       far subtler than slate — closest to Linear's #08090a / #1c1d20 grays). */
+    --color-surface-sunken: oklch(11% 0.004 255);
+    --color-surface: oklch(17% 0.004 255);
+    --color-surface-raised: oklch(20% 0.004 255);
+    --color-surface-overlay: oklch(23% 0.005 255);
+    --color-surface-hover: oklch(100% 0 0 / 0.07);
+    --color-background: oklch(12.5% 0.004 255);
+    /* 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);
     --color-background-disabled: var(--color-neutral-800);
 
     /* Scale backdrop */
-    --color-scale-background: oklch(8% 0 0);
-
-    /* Border - darker for dark mode */
-    --color-border: oklch(30% 0 0 / 0.8);
-    --color-border-secondary: oklch(35% 0 0 / 0.8);
+    --color-scale-background: oklch(8% 0.004 255);
+
+    /* Border - Linear-style subtle light hairline (a faint lift that catches
+       light on the dark surface, rather than a flat mid-gray line). */
+    --color-border: oklch(100% 0.01 255 / 0.05);
+    --color-border-secondary: oklch(100% 0.01 255 / 0.10);
+    /* Interaction border — lightens in dark (higher alpha) so an edge "lifts"
+       on hover, matching the --color-surface-hover lighten-in-dark behavior. */
+    --color-border-hover: oklch(100% 0.01 255 / 0.18);
     --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);
-    --ui-scrollbar-thumb-active: rgb(75 85 99);
+    --ui-scrollbar-thumb-active: rgb(75 85 99, 0.75);
     --ui-scrollbar-track-rest: transparent;
     --ui-scrollbar-track-active: rgba(55, 65, 81, 0.1);
 
@@ -444,20 +522,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 };