@djangocfg/ui-core 2.1.592 → 2.1.594

package/README.md

@@ -50,16 +50,26 @@ import { UiProviders, Button, Card } from '@djangocfg/ui-core';
 
 | Group | Examples |
 |---|---|
-| `components/data/` | Avatar · Badge · Card · Table · BalancedText · Skeleton |
-| `components/forms/` | Button · Input · Textarea · Select · Switch · Checkbox · Slider · Form · DateField · TimeField · DateTimeField · MoneyField · FilterButton · FilterMenu |
-| `components/feedback/` | Alert · Toast · Banner · Progress · Spinner |
-| `components/overlay/` | Dialog · Drawer · Popover · Tooltip · HoverCard · Sheet · ContextMenu · DropdownMenu |
-| `components/navigation/` | Sidebar · Tabs · Breadcrumb · Pagination · NavigationMenu · Command · Disclosure |
-| `components/layout/` | Container · Grid · Stack · Separator · ScrollArea · Sticky · FilterBar |
-| `components/select/` | Combobox · MultiSelect |
-| `components/effects/` | Glass · Marquee · Backdrop |
-| `components/specialized/` | Accordion · Collapsible · Toggle · Calendar · DatePicker (legacy — prefer forms/DateField) |
-| `components/boundary/` | ErrorBoundary |
+| `components/data/` | Avatar · AvatarGroup · Badge · BadgeOverflow · Card · Table · BalancedText · Skeleton · Stat · Status · Progress · CircularProgress · Carousel · Calendar · Toggle · ToggleGroup · RelativeTimeCard (`timeZone` prop) · Chart (subpath `/chart`) |
+| `components/forms/` | Button · DownloadButton · ButtonGroup · Input · InputGroup · InputAffix · InputOTP · OTPInput · PhoneInput · MaskInput · SegmentedInput · TagsInput · Textarea · Switch · Checkbox · CheckboxGroup · RadioGroup · Slider · Form · Field · Editable · SettingRow / SettingsBlock · DateField · TimeField · DateTimeField · MoneyField · FilterButton · FilterMenu · PopoverActionButton · TimePicker (legacy) |
+| `components/select/` | Select · Combobox · ComboboxAsync · MultiSelect · MultiSelectPro · CountrySelect · LanguageSelect · TimezoneSelect |
+| `components/feedback/` | Alert · Toast (sonner) · Banner · Empty · Preloader · Spinner |
+| `components/overlay/` | Dialog · AlertDialog · Drawer · Sheet · ResponsiveSheet · SidePanel · Popover · Tooltip · HoverCard |
+| `components/navigation/` | **MenuBuilder** · DropdownMenu · ContextMenu · Menubar · NavigationMenu · Sidebar · Tabs · Breadcrumb · Pagination · Stepper · Accordion · Collapsible · Disclosure · Command · Link · PopoverRowButton |
+| `components/layout/` | Card · Stack · Section · KeyValue · Separator · ScrollArea · Resizable · AspectRatio · Sticky · FilterBar · Skeleton |
+| `components/effects/` | GlowBackground · Swap |
+| `components/specialized/` | CopyButton · CopyField · Kbd · Flag · ImageWithFallback · Item · TokenIcon · Portal · Presence · Primitive · VisuallyHidden |
+| `components/boundary/` | Boundary (error boundary, mounted by `UiProviders`) |
+
+### MenuBuilder
+
+Declarative menus: pass `MenuItem[]` and a trigger, it renders through the
+`DropdownMenu*` primitives. `kind` is the discriminator (`item`, `submenu`,
+checkbox / radio rows, separators, labels); rows take `icon`, `description`,
+`shortcut`, `href`, `hidden`, `disabled`, `variant: 'destructive'`. Row text is
+`text-sm`. `@djangocfg/layouts` builds its user menu with it
+(`useAccountMenuItems` / `AccountMenuButton`) — reuse that instead of a custom
+menu when you need an account menu.
 
 Imports stay flat — group folders are organisational. Native-engine date/time
 fields (`DateField` / `TimeField` / `DateTimeField`) have their own reference in
@@ -189,6 +199,20 @@ fill's luminance requires it.
 
 Tailwind's `text-*` size utilities are bridged to the preset `--font-size-*` scale. Product-specific density belongs in a small CSS override after the static preset import — never in a runtime token builder. See `src/styles/README.md`.
 
+**Type scale.** Plain `text-xs … text-xl` and the body size come from the
+preset's `--font-size-*` (macOS preset 13/12/11px, default 14/13px). A consuming
+app must **not** reset `:root --font-size-*` — that makes the same `text-sm`
+differ between products and defeats the shared theme. Product-specific names
+(`text-meta`, `text-body`) belong in the app's own `@theme`, not in an override
+of the base scale.
+
+**Overlays.** `bg-overlay` is the modal scrim; its frosting is `--overlay-blur`
+(default `5px`, `0px` disables). Only the unprefixed `backdrop-filter` is
+written because lightningcss adds `-webkit-` itself and drops the unprefixed one
+when both exist. A blurred surface needs a translucent background, and nothing
+inside an ancestor that has `backdrop-filter` can blur the page behind it —
+portal it to `body`. Details: `src/styles/README.md` § Overlays and glass.
+
 **Programmatic theme colors** for Canvas / SVG / Mermaid:
 
 ```ts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.592",
+  "version": "2.1.594",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -126,12 +126,13 @@
   ],
   "scripts": {
     "lint": "eslint .",
-    "check": "tsc --noEmit && node scripts/check-preset-contrast.mjs",
-    "check:contrast": "node scripts/check-preset-contrast.mjs"
+    "check": "tsc --noEmit && node scripts/check-preset-contrast.mjs && node scripts/check-docs.mjs",
+    "check:contrast": "node scripts/check-preset-contrast.mjs",
+    "check:docs": "node scripts/check-docs.mjs"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.592",
-    "@djangocfg/i18n": "^2.1.592",
+    "@djangocfg/api": "^2.1.594",
+    "@djangocfg/i18n": "^2.1.594",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -207,10 +208,10 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.592",
-    "@djangocfg/eslint-config": "^2.1.592",
-    "@djangocfg/i18n": "^2.1.592",
-    "@djangocfg/typescript-config": "^2.1.592",
+    "@djangocfg/api": "^2.1.594",
+    "@djangocfg/eslint-config": "^2.1.594",
+    "@djangocfg/i18n": "^2.1.594",
+    "@djangocfg/typescript-config": "^2.1.594",
     "@storybook/react-vite": "^10.5.0",
     "@types/node": "^24.13.3",
     "@types/react": "19.2.15",

package/src/components/navigation/dropdown-menu/index.tsx

@@ -127,7 +127,7 @@ const DropdownMenuItem = React.forwardRef<
   }
 >(({ className, inset, href, variant = "default", children, ...props }, ref) => {
   const classes = cn(
-    "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1 text-base outline-none transition-colors focus:bg-foreground/[0.07] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+    "relative flex cursor-default select-none items-center gap-2 rounded-[var(--radius-sm)] px-2.5 py-1 text-sm outline-none transition-colors focus:bg-foreground/[0.07] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
     "data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive",
     inset && "pl-8",
     className

package/src/styles/css/utilities/glass.css

@@ -16,7 +16,6 @@
  */
 .glass-macos {
   backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
   background-color: color-mix(in oklab, var(--background) 72%, transparent);
 }
 
@@ -27,7 +26,6 @@
  */
 .glass-win11 {
   backdrop-filter: blur(60px) saturate(125%);
-  -webkit-backdrop-filter: blur(60px) saturate(125%);
   background-color: color-mix(in oklab, var(--background) 85%, transparent);
 }
 
@@ -38,7 +36,6 @@
  */
 .glass-liquid {
   backdrop-filter: blur(12px) saturate(180%);
-  -webkit-backdrop-filter: blur(12px) saturate(180%);
   background-color: color-mix(in oklab, var(--card) 60%, transparent);
   border: 1px solid color-mix(in oklab, var(--foreground) 8%, transparent);
   box-shadow:
@@ -52,7 +49,6 @@
  */
 .glass-header {
   backdrop-filter: blur(8px) saturate(160%);
-  -webkit-backdrop-filter: blur(8px) saturate(160%);
   background-color: color-mix(in oklab, var(--background) 80%, transparent);
 }
 
@@ -64,7 +60,6 @@
  */
 .nav-dropdown-glass {
   backdrop-filter: blur(var(--overlay-blur, 5px)) saturate(150%);
-  -webkit-backdrop-filter: blur(var(--overlay-blur, 5px)) saturate(150%);
   background-color: color-mix(in oklab, var(--background) 55%, transparent);
 }
 

package/src/styles/css/utilities/overlay.css

@@ -12,6 +12,9 @@
  * override it per theme/preset to make the backdrop crisper or softer, or set
  * it to `0px` to disable frosting entirely without touching the scrim color.
  *
+ * Only the unprefixed `backdrop-filter` is written: lightningcss (Tailwind v4, Next) adds `-webkit-` itself, and when both are
+ * written it DROPS the unprefixed one (verified), leaving Chromium with no blur at all.
+ *
  * Plain CSS (NOT a JIT-scanned Tailwind utility) so it compiles regardless of
  * which package's source the Tailwind content scan covers — same rationale as
  * `divider.css`.
@@ -20,7 +23,6 @@
 .bg-overlay {
   /* `--overlay-blur` defaults in base.css; a 0px value cleanly no-ops the blur. */
   backdrop-filter: blur(var(--overlay-blur, 0px));
-  -webkit-backdrop-filter: blur(var(--overlay-blur, 0px));
 }
 
 /**