@nebutra/ui 2.0.0 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/{canonical-Bf4czR2u.d.ts → canonical-DEhT4VfS.d.ts} +71 -120
  2. package/dist/card-DunB1gKE.d.ts +105 -0
  3. package/dist/components/index.d.ts +33 -4
  4. package/dist/components/index.js +225 -89
  5. package/dist/components/index.js.map +1 -1
  6. package/dist/editorial/index.d.ts +2 -2
  7. package/dist/editorial/index.js +75 -1
  8. package/dist/editorial/index.js.map +1 -1
  9. package/dist/empty-state-bmfHCOuN.d.ts +86 -0
  10. package/dist/hooks/index.d.ts +18 -1
  11. package/dist/hooks/index.js +120 -5
  12. package/dist/hooks/index.js.map +1 -1
  13. package/dist/index.d.ts +1 -1
  14. package/dist/layout/index.d.ts +17 -58
  15. package/dist/layout/index.js +366 -126
  16. package/dist/layout/index.js.map +1 -1
  17. package/dist/layouts/index.d.ts +1 -1
  18. package/dist/layouts/index.js +89 -15
  19. package/dist/layouts/index.js.map +1 -1
  20. package/dist/patterns/index.d.ts +38 -44
  21. package/dist/patterns/index.js +470 -278
  22. package/dist/patterns/index.js.map +1 -1
  23. package/dist/primitives/canonical.d.ts +3 -1
  24. package/dist/primitives/canonical.js +495 -231
  25. package/dist/primitives/canonical.js.map +1 -1
  26. package/dist/primitives/index.d.ts +90 -62
  27. package/dist/primitives/index.js +1129 -1185
  28. package/dist/primitives/index.js.map +1 -1
  29. package/dist/tailwind.preset.d.ts +32 -32
  30. package/dist/tailwind.preset.js +24 -20
  31. package/dist/tailwind.preset.js.map +1 -1
  32. package/dist/theme/index.d.ts +1 -110
  33. package/dist/typography/fonts.css +8 -16
  34. package/dist/typography/index.d.ts +29 -45
  35. package/dist/typography/index.js +26 -14
  36. package/dist/typography/index.js.map +1 -1
  37. package/dist/utils/index.d.ts +18 -12
  38. package/dist/utils/index.js +94 -18
  39. package/dist/utils/index.js.map +1 -1
  40. package/package.json +6 -10
  41. package/src/typography/fonts.css +8 -16
  42. package/dist/styles/brand-override.css +0 -61
  43. package/src/styles/brand-override.css +0 -61
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/utils/auth-surfaces.ts","../../src/utils/cn.ts","../../src/utils/primitive-props.ts","../../src/utils/brand-colors.ts","../../src/utils/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Auth surface layout contracts — **server-safe pure strings**.\n *\n * Consumed by RSC AuthSplitLayout. Built as `utils/auth-surfaces` without a\n * `\"use client\"` stamp (see packages/design/ui/tsup.config.ts SERVER_ONLY).\n * Prefer `import { … } from \"@nebutra/ui/utils/auth-surfaces\"` in server\n * layouts so a future utils barrel regression cannot client-proxy these again.\n *\n * ## Width (root cause)\n * Do NOT use `w-full max-w-sm|xs` alone inside a flex/grid shell. Percentage\n * width resolves against the full right pane (~64vw); if max-width is ever\n * soft-failed (token miss, cascade, min-width:auto content), the column\n * expands to the pane. Force the used width with min() + min-w-0 + shrink-0.\n *\n * 360px matches the Neon / Clerk login-card band (not page-form 24rem).\n *\n * ## No card chrome on split shell\n * Do NOT wrap the credentials column in border / rounded-2xl / shadow card.\n * Split already has a marketing panel + white form pane; a nested card is\n * double framing. Fields sit on the pane like Neon console login.\n *\n * ## OAuth\n * Always a 2-column compact grid — never full-width stacked bars, never\n * \"stack when only two providers\". Buttons fill the *cell*, not the pane.\n */\nexport const AUTH_FORM_COLUMN_CLASS = \"relative mx-auto min-w-0 w-[min(100%,360px)] shrink-0\";\n\nexport const AUTH_PRIMARY_CTA_CLASS = \"h-11 w-full\";\n\n/** Compact OAuth: always 2 columns, tight gap. */\nexport const AUTH_OAUTH_GRID_CLASS = \"grid grid-cols-2 gap-2\";\n\n/** Compact OAuth chip — fills grid cell only. */\nexport const AUTH_OAUTH_BUTTON_CLASS =\n \"h-9 w-full justify-center gap-2 border-border bg-background px-2.5 text-sm font-medium text-foreground shadow-none hover:bg-muted\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import type * as React from \"react\";\n\n/**\n * Base UI (and some Radix peers) type `style` as CSSProperties | state-function.\n * Token merge helpers only need the plain object branch — drop functions so DTS\n * builds stay green across monorepo and standalone package mirrors.\n * Returns `{}` (never undefined) so spreads stay exactOptionalPropertyTypes-safe.\n */\nexport function asPlainStyle(style: unknown): React.CSSProperties {\n if (style == null || typeof style === \"function\") return {};\n return style as React.CSSProperties;\n}\n\nexport type PrimitiveProps<T> = React.PropsWithChildren<T & { className?: string | undefined }>;\n\nexport type PrimitiveComponent<TElement, TProps> = React.ForwardRefExoticComponent<\n PrimitiveProps<TProps> & React.RefAttributes<TElement>\n>;\n\n/**\n * Resolve the HTMLElement type for a given intrinsic element tag.\n */\ntype ElementForTag<E extends keyof React.JSX.IntrinsicElements> = E extends \"button\"\n ? HTMLButtonElement\n : E extends \"span\"\n ? HTMLSpanElement\n : E extends \"img\"\n ? HTMLImageElement\n : E extends \"label\"\n ? HTMLLabelElement\n : E extends \"input\"\n ? HTMLInputElement\n : E extends \"a\"\n ? HTMLAnchorElement\n : E extends \"p\"\n ? HTMLParagraphElement\n : E extends \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"\n ? HTMLHeadingElement\n : HTMLElement;\n\n/**\n * Workaround for Radix UI types not resolving HTML element props (className,\n * children, etc.) with React 19 + exactOptionalPropertyTypes.\n *\n * The optional second type parameter `Extra` allows preserving Radix-specific\n * props (e.g. `asChild`, `align`, `sideOffset`) that are not standard HTML attrs.\n *\n * Usage:\n * const Header = withHtmlProps<\"h3\">(AccordionPrimitive.Header);\n * const Trigger = withHtmlProps<\"button\", { asChild?: boolean }>(DialogPrimitive.Trigger);\n * const Content = withHtmlProps<\"div\", { align?: string; sideOffset?: number }>(PopoverPrimitive.Content);\n */\n\nexport function withHtmlProps<E extends keyof React.JSX.IntrinsicElements, Extra = object>(\n // biome-ignore lint/suspicious/noExplicitAny: polymorphic render — the element type is only known at the call site, and naming it here makes the emitted declaration a union of every intrinsic tag\n Component: any,\n): React.ForwardRefExoticComponent<\n React.ComponentPropsWithoutRef<E> & Extra & React.RefAttributes<ElementForTag<E>>\n> {\n return Component;\n}\n","/**\n * Runtime color resolution for APIs that cannot consume CSS variables\n * (Canvas, WebGL, some animation libs).\n *\n * Layers (do not mix):\n * - Product action / CTA: getProductPrimary() → semantic `--primary` (roles.action)\n * - Brand mark / AI badge / logo tint: getBrandMark() → `--brand-mark` (roles.brand)\n * - VI lock (print / legal assets): getBrandPrimary() → `--brand-primary` hex\n *\n * Prefer CSS / Tailwind in components:\n * - `bg-primary` for CTAs\n * - `bg-brand-mark` / `text-brand-mark` for Logo/AI badge (see recipe.css)\n *\n * @see packages/design/ARCHITECTURE.md\n * @see packages/design/tokens/recipe.css\n */\n\n/** SSR fallbacks when document is unavailable */\nexport const BRAND_FALLBACK = {\n /** VI 云毓蓝 — identity only */\n primary: \"#0033FE\",\n accent: \"#0BF1C3\",\n tertiary: \"#5c7cfa\",\n primaryDark: \"#002ad4\",\n backDark: \"#000830\",\n /** Soft product action (matches themes/light --primary ≈ #254bfa) */\n productPrimary: \"#254bfa\",\n /**\n * Brand mark fallback (= product action when factory brand has action≡brand).\n * Skins may diverge (e.g. Linear purple action + indigo mark).\n */\n brandMark: \"#254bfa\",\n brandMarkForeground: \"#ffffff\",\n} as const;\n\n/**\n * Read a CSS variable from :root and return its trimmed value.\n */\nexport function readCssVar(name: string, fallback: string): string {\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n return fallback;\n }\n const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n return value || fallback;\n}\n\n/** Turn HSL channel triple or full color into a CSS color string. */\nfunction asCssColor(value: string, fallback: string): string {\n const v = value.trim() || fallback;\n if (\n v.startsWith(\"#\") ||\n v.startsWith(\"rgb\") ||\n v.startsWith(\"hsl\") ||\n v.startsWith(\"oklch\") ||\n v.startsWith(\"color(\")\n ) {\n return v;\n }\n // shadcn-style \"228 85% 56%\"\n return `hsl(${v})`;\n}\n\n/**\n * Product action color — follows the active skin (`--primary`).\n * Use for shaders/canvas that must match buttons/CTAs.\n */\nexport function getProductPrimary(): string {\n return asCssColor(readCssVar(\"--primary\", \"228 85% 56%\"), BRAND_FALLBACK.productPrimary);\n}\n\n/** VI lock color — legal / print lockups only (not product chrome). */\nexport function getBrandPrimary(): string {\n return asCssVarColor(\"--brand-primary\", BRAND_FALLBACK.primary);\n}\n\n/**\n * Product brand-mark (roles.brand) — Logo tile, AI badge, identity chips.\n * Never use for default CTA (that is getProductPrimary / --primary).\n */\nexport function getBrandMark(): string {\n const raw = readCssVar(\"--brand-mark\", \"228 85% 56%\");\n // Factory recipe defaults `--brand-mark: var(--primary)` — resolve to action color.\n if (/var\\(\\s*--primary\\s*\\)/u.test(raw)) {\n return getProductPrimary();\n }\n return asCssColor(raw, BRAND_FALLBACK.brandMark);\n}\n\n/** Foreground on brand-mark surfaces. */\nexport function getBrandMarkForeground(): string {\n const raw = readCssVar(\"--brand-mark-foreground\", \"0 0% 100%\");\n if (/var\\(\\s*--primary-foreground\\s*\\)/u.test(raw)) {\n return asCssColor(\n readCssVar(\"--primary-foreground\", \"0 0% 100%\"),\n BRAND_FALLBACK.brandMarkForeground,\n );\n }\n return asCssColor(raw, BRAND_FALLBACK.brandMarkForeground);\n}\n\nfunction asCssVarColor(name: string, fallback: string): string {\n return asCssColor(readCssVar(name, fallback), fallback);\n}\n\nexport function getBrandAccent(): string {\n return asCssVarColor(\"--brand-accent\", BRAND_FALLBACK.accent);\n}\n\nexport function getBrandTertiary(): string {\n return asCssVarColor(\"--brand-tertiary\", BRAND_FALLBACK.tertiary);\n}\n","/**\n * Utility Functions\n */\n\n/** Auth split-shell + primary CTA contracts (width + ink CTA pairing). */\nexport {\n AUTH_FORM_COLUMN_CLASS,\n AUTH_OAUTH_BUTTON_CLASS,\n AUTH_OAUTH_GRID_CLASS,\n AUTH_PRIMARY_CTA_CLASS,\n} from \"./auth-surfaces\";\n/**\n * Merge class names — canonical implementation from ./cn.ts\n * Uses twMerge(clsx(...)) to correctly resolve Tailwind class conflicts.\n */\nexport { cn } from \"./cn\";\nexport {\n asPlainStyle,\n type PrimitiveComponent,\n type PrimitiveProps,\n withHtmlProps,\n} from \"./primitive-props\";\n\n/**\n * Breakpoint values (matches Primer)\n */\nexport const BREAKPOINTS = {\n xs: 0,\n sm: 544,\n md: 768,\n lg: 1012,\n xl: 1280,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/**\n * Check if viewport is at or above breakpoint\n */\nexport function isBreakpointUp(breakpoint: Breakpoint): boolean {\n if (typeof window === \"undefined\") return true;\n return window.innerWidth >= BREAKPOINTS[breakpoint];\n}\n\nexport {\n BRAND_FALLBACK,\n getBrandAccent,\n getBrandMark,\n getBrandMarkForeground,\n getBrandPrimary,\n getBrandTertiary,\n getProductPrimary,\n readCssVar,\n} from \"./brand-colors\";\n"]}
1
+ {"version":3,"sources":["../../src/utils/auth-surfaces.ts","../../src/utils/tw-merge-theme.generated.ts","../../src/utils/cn.ts","../../src/utils/primitive-props.ts","../../src/utils/brand-colors.ts","../../src/utils/index.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/**\n * Auth surface layout contracts — **server-safe pure strings**.\n *\n * Consumed by RSC AuthSplitLayout. Built as `utils/auth-surfaces` without a\n * `\"use client\"` stamp (see packages/design/ui/tsup.config.ts SERVER_ONLY).\n * Prefer `import { … } from \"@nebutra/ui/utils/auth-surfaces\"` in server\n * layouts so a future utils barrel regression cannot client-proxy these again.\n *\n * ## Width (root cause)\n * Do NOT use `w-full max-w-sm|xs` alone inside a flex/grid shell. Percentage\n * width resolves against the full right pane (~64vw); if max-width is ever\n * soft-failed (token miss, cascade, min-width:auto content), the column\n * expands to the pane. Force the used width with min() + min-w-0 + shrink-0.\n *\n * 360px matches the Neon / Clerk login-card band (not page-form 24rem).\n *\n * ## No card chrome on split shell\n * Do NOT wrap the credentials column in border / rounded-2xl / shadow card.\n * Split already has a marketing panel + white form pane; a nested card is\n * double framing. Fields sit on the pane like Neon console login.\n *\n * ## OAuth\n * Always a 2-column compact grid — never full-width stacked bars, never\n * \"stack when only two providers\". Buttons fill the *cell*, not the pane.\n */\nexport const AUTH_FORM_COLUMN_CLASS = \"relative mx-auto min-w-0 w-[min(100%,360px)] shrink-0\";\n\nexport const AUTH_PRIMARY_CTA_CLASS = \"h-11 w-full\";\n\n/** Compact OAuth: always 2 columns, tight gap. */\nexport const AUTH_OAUTH_GRID_CLASS = \"grid grid-cols-2 gap-2\";\n\n/** Compact OAuth chip — fills grid cell only. */\nexport const AUTH_OAUTH_BUTTON_CLASS =\n \"h-9 w-full justify-center gap-2 border-border bg-background px-2.5 text-sm font-medium text-foreground shadow-none hover:bg-muted\";\n","// GENERATED by packages/design/ui/scripts/gen-tw-merge-theme.mjs — do not edit.\n// Source: the @theme blocks in packages/design/tokens/{styles,recipe}.css.\n\nexport const TW_MERGE_THEME = {\n breakpoint: [\"3xl\", \"shell\", \"tight\", \"xs\"],\n container: [\"content\", \"text\", \"wide\"],\n ease: [\"brand\", \"in\", \"in-out\", \"out\", \"spring\"],\n font: [\"cn\", \"display\", \"heading\", \"mono\", \"sans\"],\n leading: [\"display\", \"heading\"],\n radius: [\"2xl\", \"3xl\", \"button\", \"card\", \"full\", \"lg\", \"md\", \"none\", \"panel\", \"sm\", \"xl\", \"xs\"],\n shadow: [\n \"2xl\",\n \"ambient-glow\",\n \"ambient-lg\",\n \"ambient-md\",\n \"ambient-sm\",\n \"brand\",\n \"brand-lg\",\n \"glass-lg\",\n \"glass-md\",\n \"glass-sm\",\n \"glow-accent\",\n \"glow-accent-lg\",\n \"glow-accent-sm\",\n \"glow-primary\",\n \"lg\",\n \"md\",\n \"sheen\",\n \"sm\",\n \"xl\",\n \"xs\",\n ],\n text: [\n \"2xl\",\n \"2xs\",\n \"3xl\",\n \"4xl\",\n \"5xl\",\n \"6xl\",\n \"7xl\",\n \"8xl\",\n \"9xl\",\n \"base\",\n \"body\",\n \"display\",\n \"label\",\n \"lg\",\n \"meta\",\n \"sm\",\n \"ui\",\n \"xl\",\n \"xs\",\n ],\n tracking: [\"display\", \"heading\", \"label\", \"tight\"],\n} as const;\n\nexport const TW_MERGE_CLASS_GROUPS = {\n duration: [{ duration: [\"cinematic\", \"flow\", \"micro\", \"reveal\"] }],\n} as const;\n","import { type ClassValue, clsx } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\nimport { TW_MERGE_CLASS_GROUPS, TW_MERGE_THEME } from \"./tw-merge-theme.generated\";\n\n/**\n * tailwind-merge only knows Tailwind's default scale. Every utility the design\n * tokens add (text-label, shadow-ambient-md, rounded-card, ease-brand,\n * max-w-wide, …) was otherwise an unknown class: `cn(\"text-label\n * text-destructive-strong\")` returned \"text-destructive-strong\" and the size fell away, and\n * `cn(\"rounded-card\", \"rounded-lg\")` kept both so the winner depended on\n * stylesheet order. The theme below is generated from the tokens' @theme blocks\n * (scripts/gen-tw-merge-theme.mjs), so a new token utility is known here the\n * moment it exists; a test fails if the generated file goes stale.\n */\nconst twMerge = extendTailwindMerge({\n extend: {\n theme: Object.fromEntries(\n Object.entries(TW_MERGE_THEME).map(([key, values]) => [key, [...values]]),\n ),\n classGroups: Object.fromEntries(\n Object.entries(TW_MERGE_CLASS_GROUPS).map(([key, groups]) => [\n key,\n groups.map((group) =>\n Object.fromEntries(Object.entries(group).map(([k, v]) => [k, [...v]])),\n ),\n ]),\n ),\n },\n});\n\n/** Kept for callers and tests that enumerate the design-system text steps. */\nexport const DESIGN_SYSTEM_TEXT_SIZES = TW_MERGE_THEME.text;\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import type * as React from \"react\";\n\n/**\n * Base UI (and some Radix peers) type `style` as CSSProperties | state-function.\n * Token merge helpers only need the plain object branch — drop functions so DTS\n * builds stay green across monorepo and standalone package mirrors.\n * Returns `{}` (never undefined) so spreads stay exactOptionalPropertyTypes-safe.\n */\nexport function asPlainStyle(style: unknown): React.CSSProperties {\n if (style == null || typeof style === \"function\") return {};\n return style as React.CSSProperties;\n}\n\nexport type PrimitiveProps<T> = React.PropsWithChildren<T & { className?: string | undefined }>;\n\nexport type PrimitiveComponent<TElement, TProps> = React.ForwardRefExoticComponent<\n PrimitiveProps<TProps> & React.RefAttributes<TElement>\n>;\n\n/**\n * Resolve the HTMLElement type for a given intrinsic element tag.\n */\ntype ElementForTag<E extends keyof React.JSX.IntrinsicElements> = E extends \"button\"\n ? HTMLButtonElement\n : E extends \"span\"\n ? HTMLSpanElement\n : E extends \"img\"\n ? HTMLImageElement\n : E extends \"label\"\n ? HTMLLabelElement\n : E extends \"input\"\n ? HTMLInputElement\n : E extends \"a\"\n ? HTMLAnchorElement\n : E extends \"p\"\n ? HTMLParagraphElement\n : E extends \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"\n ? HTMLHeadingElement\n : HTMLElement;\n\n/**\n * Workaround for Radix UI types not resolving HTML element props (className,\n * children, etc.) with React 19 + exactOptionalPropertyTypes.\n *\n * The optional second type parameter `Extra` allows preserving Radix-specific\n * props (e.g. `asChild`, `align`, `sideOffset`) that are not standard HTML attrs.\n *\n * Usage:\n * const Header = withHtmlProps<\"h3\">(AccordionPrimitive.Header);\n * const Trigger = withHtmlProps<\"button\", { asChild?: boolean }>(DialogPrimitive.Trigger);\n * const Content = withHtmlProps<\"div\", { align?: string; sideOffset?: number }>(PopoverPrimitive.Content);\n */\n\nexport function withHtmlProps<E extends keyof React.JSX.IntrinsicElements, Extra = object>(\n // biome-ignore lint/suspicious/noExplicitAny: polymorphic render — the element type is only known at the call site, and naming it here makes the emitted declaration a union of every intrinsic tag\n Component: any,\n): React.ForwardRefExoticComponent<\n React.ComponentPropsWithoutRef<E> & Extra & React.RefAttributes<ElementForTag<E>>\n> {\n return Component;\n}\n","/**\n * Runtime color resolution for APIs that cannot consume CSS variables\n * (Canvas, WebGL, some animation libs).\n *\n * Layers (do not mix):\n * - Product action / CTA: getProductPrimary() → semantic `--primary` (roles.action)\n * - Brand mark / AI badge / logo tint: getBrandMark() → `--brand-mark` (roles.brand)\n * - VI lock (print / legal assets): getBrandPrimary() → `--brand-primary` hex\n *\n * Prefer CSS / Tailwind in components:\n * - `bg-primary` for CTAs\n * - `bg-brand-mark` / `text-brand-mark` for Logo/AI badge (see recipe.css)\n *\n * @see packages/design/ARCHITECTURE.md\n * @see packages/design/tokens/recipe.css\n */\n\nimport { tokenColor, tokenValue } from \"@nebutra/tokens/values\";\n\n/**\n * SSR fallbacks when document is unavailable — the light-mode token values,\n * read from @nebutra/tokens/values rather than restated. Hand-copied, these\n * had drifted: the product action was still the old blue after --primary\n * became ink (a shader painted blue on the server and flipped to ink on\n * hydration) and tertiary named a colour --brand-tertiary does not hold.\n */\nexport const BRAND_FALLBACK = {\n /** VI 云毓蓝 — identity only */\n primary: tokenColor(\"--brand-primary\"),\n accent: tokenColor(\"--brand-accent\"),\n tertiary: tokenColor(\"--brand-tertiary\"),\n primaryDark: tokenColor(\"--nebutra-blue-600\"),\n backDark: tokenColor(\"--nebutra-blue-950\"),\n /** Product action — semantic --primary */\n productPrimary: tokenColor(\"--primary\"),\n /**\n * Brand mark fallback (= product action: the factory recipe sets\n * --brand-mark: var(--primary)). Skins may diverge.\n */\n brandMark: tokenColor(\"--primary\"),\n brandMarkForeground: tokenColor(\"--primary-foreground\"),\n} as const;\n\n/**\n * Read a CSS variable from :root and return its trimmed value.\n */\nexport function readCssVar(name: string, fallback: string): string {\n if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n return fallback;\n }\n const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();\n return value || fallback;\n}\n\n/** Turn HSL channel triple or full color into a CSS color string. */\nfunction asCssColor(value: string, fallback: string): string {\n const v = value.trim() || fallback;\n if (\n v.startsWith(\"#\") ||\n v.startsWith(\"rgb\") ||\n v.startsWith(\"hsl\") ||\n v.startsWith(\"oklch\") ||\n v.startsWith(\"color(\")\n ) {\n return v;\n }\n // shadcn-style \"228 85% 56%\"\n return `hsl(${v})`;\n}\n\n/**\n * Product action color — follows the active skin (`--primary`).\n * Use for shaders/canvas that must match buttons/CTAs.\n */\nexport function getProductPrimary(): string {\n return asCssColor(\n readCssVar(\"--primary\", tokenValue(\"--primary\")),\n BRAND_FALLBACK.productPrimary,\n );\n}\n\n/** VI lock color — legal / print lockups only (not product chrome). */\nexport function getBrandPrimary(): string {\n return asCssVarColor(\"--brand-primary\", BRAND_FALLBACK.primary);\n}\n\n/**\n * Product brand-mark (roles.brand) — Logo tile, AI badge, identity chips.\n * Never use for default CTA (that is getProductPrimary / --primary).\n */\nexport function getBrandMark(): string {\n const raw = readCssVar(\"--brand-mark\", tokenValue(\"--primary\"));\n // Factory recipe defaults `--brand-mark: var(--primary)` — resolve to action color.\n if (/var\\(\\s*--primary\\s*\\)/u.test(raw)) {\n return getProductPrimary();\n }\n return asCssColor(raw, BRAND_FALLBACK.brandMark);\n}\n\n/** Foreground on brand-mark surfaces. */\nexport function getBrandMarkForeground(): string {\n const raw = readCssVar(\"--brand-mark-foreground\", tokenValue(\"--primary-foreground\"));\n if (/var\\(\\s*--primary-foreground\\s*\\)/u.test(raw)) {\n return asCssColor(\n readCssVar(\"--primary-foreground\", tokenValue(\"--primary-foreground\")),\n BRAND_FALLBACK.brandMarkForeground,\n );\n }\n return asCssColor(raw, BRAND_FALLBACK.brandMarkForeground);\n}\n\nfunction asCssVarColor(name: string, fallback: string): string {\n return asCssColor(readCssVar(name, fallback), fallback);\n}\n\nexport function getBrandAccent(): string {\n return asCssVarColor(\"--brand-accent\", BRAND_FALLBACK.accent);\n}\n\nexport function getBrandTertiary(): string {\n return asCssVarColor(\"--brand-tertiary\", BRAND_FALLBACK.tertiary);\n}\n","/**\n * Utility Functions\n */\n\n/** Auth split-shell + primary CTA contracts (width + ink CTA pairing). */\nexport {\n AUTH_FORM_COLUMN_CLASS,\n AUTH_OAUTH_BUTTON_CLASS,\n AUTH_OAUTH_GRID_CLASS,\n AUTH_PRIMARY_CTA_CLASS,\n} from \"./auth-surfaces\";\n/**\n * Merge class names — canonical implementation from ./cn.ts\n * Uses twMerge(clsx(...)) to correctly resolve Tailwind class conflicts.\n */\nexport { cn } from \"./cn\";\nexport {\n asPlainStyle,\n type PrimitiveComponent,\n type PrimitiveProps,\n withHtmlProps,\n} from \"./primitive-props\";\n\n/**\n * Breakpoint values (matches Primer)\n */\nexport const BREAKPOINTS = {\n xs: 0,\n sm: 544,\n md: 768,\n lg: 1012,\n xl: 1280,\n} as const;\n\nexport type Breakpoint = keyof typeof BREAKPOINTS;\n\n/**\n * Check if viewport is at or above breakpoint\n */\nexport function isBreakpointUp(breakpoint: Breakpoint): boolean {\n if (typeof window === \"undefined\") return true;\n return window.innerWidth >= BREAKPOINTS[breakpoint];\n}\n\nexport {\n BRAND_FALLBACK,\n getBrandAccent,\n getBrandMark,\n getBrandMarkForeground,\n getBrandPrimary,\n getBrandTertiary,\n getProductPrimary,\n readCssVar,\n} from \"./brand-colors\";\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nebutra/ui",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "Nebutra design-system UI primitives, patterns, layouts, and token-integrated components",
5
5
  "private": false,
6
6
  "nebutra": {
@@ -150,13 +150,12 @@
150
150
  "tailwind-merge": "^3.5.0",
151
151
  "usehooks-ts": "^3.1.1",
152
152
  "vaul": "^1.1.2",
153
- "@nebutra/brand": "2.0.0",
154
- "@nebutra/graph-model": "2.0.0",
155
- "@nebutra/icons": "2.0.0",
156
- "@nebutra/tokens": "2.0.0"
153
+ "@nebutra/brand": "3.0.0",
154
+ "@nebutra/graph-model": "3.0.0",
155
+ "@nebutra/tokens": "3.0.0",
156
+ "@nebutra/icons": "3.0.0"
157
157
  },
158
158
  "peerDependencies": {
159
- "@clerk/nextjs": ">=5.0.0",
160
159
  "driver.js": "^1.4.0",
161
160
  "next": ">=14.0.0",
162
161
  "next-intl": "^4.12.0",
@@ -164,9 +163,6 @@
164
163
  "react-dom": ">=19.0.0"
165
164
  },
166
165
  "peerDependenciesMeta": {
167
- "@clerk/nextjs": {
168
- "optional": true
169
- },
170
166
  "driver.js": {
171
167
  "optional": true
172
168
  },
@@ -197,7 +193,7 @@
197
193
  "tsx": "^4.21.0",
198
194
  "typescript": "^5.9.3",
199
195
  "vitest": "^4.0.18",
200
- "@nebutra/design-tokens": "2.0.0"
196
+ "@nebutra/design-tokens": "3.0.0"
201
197
  },
202
198
  "homepage": "https://github.com/Nebutra/Nebutra-Sailor/tree/main/packages/design/ui#readme",
203
199
  "repository": {
@@ -6,9 +6,11 @@
6
6
  * Font loading (Next.js apps): each app's layout.tsx applies the loader classes
7
7
  * GeistSans → --font-geist-sans (variable, 100–900) Latin + numerals
8
8
  * GeistMono → --font-geist-mono (variable, 100–900) code
9
- * cjkFontClassName → --font-noto-sans-sc (@nebutra/fonts/next/cjk) CJK
10
- * and the token stacks reference those variables in that order, so Geist keeps
11
- * Latin and only CJK falls through to Noto Sans SC.
9
+ * cjkFontClassName → --font-dm-sans (@nebutra/fonts/next/cjk) Latin headings
10
+ * <CjkFontFace /> → MiSans @font-face, CDN-hosted (licence forbids shipping
11
+ * the file in this public repo) CJK
12
+ * and the token stacks reference those in order, so Geist keeps Latin body and
13
+ * numerals, DM Sans takes headings, and only CJK falls through to MiSans.
12
14
  *
13
15
  * IMPORT ORDER MATTERS: this file must come AFTER @nebutra/tokens/styles.css
14
16
  * (see ../styles/preset.css). It used to re-declare --font-sans / --font-heading /
@@ -29,7 +31,7 @@
29
31
  token already leads with the self-hosted face; the system families repeat
30
32
  here so this alias still degrades on its own. */
31
33
  --font-cjk:
32
- var(--font-cn), "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
34
+ var(--font-cn), "MiSans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
33
35
 
34
36
  /* Not a token: no Nebutra surface uses a serif, this exists for shadcn parity. */
35
37
  --font-serif: Georgia, Cambria, "Times New Roman", Times, serif;
@@ -79,18 +81,8 @@ body {
79
81
  font-weight: 400;
80
82
  }
81
83
 
82
- /* Headings */
83
- h1,
84
- h2,
85
- h3,
86
- h4,
87
- h5,
88
- h6 {
89
- font-family: var(--font-heading), var(--font-cjk);
90
- /* Theme/DESIGN can lighten headings via fontWeight.heading; default 600. */
91
- font-weight: var(--font-weight-heading, 600);
92
- line-height: 1.25;
93
- }
84
+ /* Headings: one rule, in @nebutra/design-tokens static/base.css
85
+ (--font-heading at --font-weight-heading). Not re-declared here. */
94
86
 
95
87
  /* Code */
96
88
  code,
@@ -1,61 +0,0 @@
1
- /**
2
- * brand-override.css — Custom Brand Configuration (legacy scale remap)
3
- *
4
- * Prefer the skin surface for product chrome:
5
- * @import "@nebutra/tokens/skins/<name>.css";
6
- * @see packages/design/tokens/skins/README.md
7
- *
8
- * This file remaps the **blue scale** only (residual `bg-blue-9` call sites).
9
- * New code should use semantic tokens (`bg-primary`, `border-border`).
10
- *
11
- * Drop into globals.css after tokens if you still need scale remapping:
12
- * @import "@nebutra/ui/styles/brand-override.css";
13
- *
14
- * ────────────────────────────────────────────────────────────
15
- * HOW THE CASCADE WORKS
16
- *
17
- * 1. You define: --your-primary-* (11 steps)
18
- * 2. System maps: --blue-9 → --your-primary-500 (solid fill)
19
- * --blue-3 → --your-primary-200 (component bg)
20
- * 3. Residual blue-N utilities follow your brand; semantic CSS still wins
21
- * for Button / Input that already use --primary.
22
- * ────────────────────────────────────────────────────────────
23
- */
24
-
25
- :root {
26
- /* ══════════════════════════════════════════════════════════
27
- PRIMARY BRAND COLOR — replace #0033FE with your primary
28
- ════════════════════════════════════════════════════════ */
29
- --nebutra-blue-50: #f0f4ff; /* lightest tint — backgrounds */
30
- --nebutra-blue-100: #dbe4ff;
31
- --nebutra-blue-200: #bac8ff;
32
- --nebutra-blue-300: #91a7ff;
33
- --nebutra-blue-400: #5c7cfa;
34
- --nebutra-blue-500: #0033fe; /* ← YOUR PRIMARY COLOR HERE */
35
- --nebutra-blue-600: #002ad4;
36
- --nebutra-blue-700: #0021ab;
37
- --nebutra-blue-800: #001882;
38
- --nebutra-blue-900: #000f59;
39
- --nebutra-blue-950: #000830; /* darkest — text */
40
-
41
- /* ══════════════════════════════════════════════════════════
42
- SECONDARY ACCENT COLOR — replace #0BF1C3 with your accent
43
- ════════════════════════════════════════════════════════ */
44
- --nebutra-cyan-50: #e6fff8; /* lightest tint */
45
- --nebutra-cyan-100: #b3ffec;
46
- --nebutra-cyan-200: #80ffe0;
47
- --nebutra-cyan-300: #4dfcd4;
48
- --nebutra-cyan-400: #1af7c8;
49
- --nebutra-cyan-500: #0bf1c3; /* ← YOUR ACCENT COLOR HERE */
50
- --nebutra-cyan-600: #09c9a3;
51
- --nebutra-cyan-700: #07a183;
52
- --nebutra-cyan-800: #057963;
53
- --nebutra-cyan-900: #035143;
54
- --nebutra-cyan-950: #012923; /* darkest */
55
-
56
- /* ══════════════════════════════════════════════════════════
57
- OPTIONAL: Brand name tokens (used in metadata / docs only)
58
- ════════════════════════════════════════════════════════ */
59
- /* --brand-name: "Your Brand"; */
60
- /* --brand-domain: "yourbrand.com"; */
61
- }
@@ -1,61 +0,0 @@
1
- /**
2
- * brand-override.css — Custom Brand Configuration (legacy scale remap)
3
- *
4
- * Prefer the skin surface for product chrome:
5
- * @import "@nebutra/tokens/skins/<name>.css";
6
- * @see packages/design/tokens/skins/README.md
7
- *
8
- * This file remaps the **blue scale** only (residual `bg-blue-9` call sites).
9
- * New code should use semantic tokens (`bg-primary`, `border-border`).
10
- *
11
- * Drop into globals.css after tokens if you still need scale remapping:
12
- * @import "@nebutra/ui/styles/brand-override.css";
13
- *
14
- * ────────────────────────────────────────────────────────────
15
- * HOW THE CASCADE WORKS
16
- *
17
- * 1. You define: --your-primary-* (11 steps)
18
- * 2. System maps: --blue-9 → --your-primary-500 (solid fill)
19
- * --blue-3 → --your-primary-200 (component bg)
20
- * 3. Residual blue-N utilities follow your brand; semantic CSS still wins
21
- * for Button / Input that already use --primary.
22
- * ────────────────────────────────────────────────────────────
23
- */
24
-
25
- :root {
26
- /* ══════════════════════════════════════════════════════════
27
- PRIMARY BRAND COLOR — replace #0033FE with your primary
28
- ════════════════════════════════════════════════════════ */
29
- --nebutra-blue-50: #f0f4ff; /* lightest tint — backgrounds */
30
- --nebutra-blue-100: #dbe4ff;
31
- --nebutra-blue-200: #bac8ff;
32
- --nebutra-blue-300: #91a7ff;
33
- --nebutra-blue-400: #5c7cfa;
34
- --nebutra-blue-500: #0033fe; /* ← YOUR PRIMARY COLOR HERE */
35
- --nebutra-blue-600: #002ad4;
36
- --nebutra-blue-700: #0021ab;
37
- --nebutra-blue-800: #001882;
38
- --nebutra-blue-900: #000f59;
39
- --nebutra-blue-950: #000830; /* darkest — text */
40
-
41
- /* ══════════════════════════════════════════════════════════
42
- SECONDARY ACCENT COLOR — replace #0BF1C3 with your accent
43
- ════════════════════════════════════════════════════════ */
44
- --nebutra-cyan-50: #e6fff8; /* lightest tint */
45
- --nebutra-cyan-100: #b3ffec;
46
- --nebutra-cyan-200: #80ffe0;
47
- --nebutra-cyan-300: #4dfcd4;
48
- --nebutra-cyan-400: #1af7c8;
49
- --nebutra-cyan-500: #0bf1c3; /* ← YOUR ACCENT COLOR HERE */
50
- --nebutra-cyan-600: #09c9a3;
51
- --nebutra-cyan-700: #07a183;
52
- --nebutra-cyan-800: #057963;
53
- --nebutra-cyan-900: #035143;
54
- --nebutra-cyan-950: #012923; /* darkest */
55
-
56
- /* ══════════════════════════════════════════════════════════
57
- OPTIONAL: Brand name tokens (used in metadata / docs only)
58
- ════════════════════════════════════════════════════════ */
59
- /* --brand-name: "Your Brand"; */
60
- /* --brand-domain: "yourbrand.com"; */
61
- }