@jbpark/ui-kit 4.1.0 → 5.1.0

package/dist/providers/config/registry.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry.mjs","names":[],"sources":["../../../src/providers/config/registry.tsx"],"sourcesContent":["'use client';\n\nimport { Context } from './context';\nimport type { ContextValue } from './types';\n\n// The imperative stack (Modal.*/Toast.*, see organisms/imperative-stack.tsx)\n// renders into its own React root, outside any <Config> ancestor — there's\n// no call-site component to read useConfig() from, since these are plain\n// function calls, not JSX. This module-level registry is how that root\n// finds a Config to inherit anyway: the app's root Config registers its\n// current context value here, and the stack re-wraps itself with it as a\n// snapshot at render time (not a live subscription — a Modal/Toast that's\n// already open won't pick up a Config change made after it was created,\n// same \"reflects state at creation\" behavior as everything else about the\n// imperative API being a one-shot call).\n//\n// Only the root Config (no Config ancestor of its own — see\n// `isRoot` in config.tsx) registers. A section-local nested Config (used\n// for one-off theming of part of a page) intentionally does not — an app-\n// wide `Modal.confirm()` call has no natural association with whichever\n// nested Config happened to render most recently, so it should inherit\n// the app's actual root configuration instead.\nlet currentValue: ContextValue | null = null;\n\nexport const registerRootConfig = (value: ContextValue): (() => void) => {\n  currentValue = value;\n\n  return () => {\n    if (currentValue === value) {\n      currentValue = null;\n    }\n  };\n};\n\nexport const getRootConfigValue = (): ContextValue | null => currentValue;\n\n// Wraps the imperative stack's rendered items with whatever the root\n// Config's snapshot currently is, so useConfig() inside Modal/Toast (and\n// anything they render) resolves theme/locale/componentSize/etc instead of\n// the raw context default. A no-op passthrough when no root Config has\n// registered (e.g. no <Config> anywhere in the app).\nexport const ConfigSnapshotProvider = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  const value = getRootConfigValue();\n\n  if (!value) {\n    return children;\n  }\n\n  return <Context.Provider value={value}>{children}</Context.Provider>;\n};\n"],"mappings":";;;;;;AAsBA,IAAI,eAAoC;AAExC,MAAa,sBAAsB,UAAsC;AACvE,gBAAe;AAEf,cAAa;AACX,MAAI,iBAAiB,MACnB,gBAAe;;;AAKrB,MAAa,2BAAgD;AAO7D,MAAa,0BAA0B,EACrC,eAGI;CACJ,MAAM,QAAQ,oBAAoB;AAElC,KAAI,CAAC,MACH,QAAO;AAGT,QAAO,oBAAC,QAAQ;EAAgB;EAAQ;GAA4B"}

package/dist/providers/config/types.d.mts

@@ -19,10 +19,31 @@ interface ThemeToken {
   colorInput?: string;
   colorRing?: string;
   borderRadius?: string;
+  btnBackground?: string;
+  btnBackgroundHover?: string;
+  btnBackgroundActive?: string;
+  btnBorder?: string;
+  btnForeground?: string;
+  sidebar?: string;
+  sidebarForeground?: string;
+  sidebarPrimary?: string;
+  sidebarPrimaryForeground?: string;
+  sidebarAccent?: string;
+  sidebarAccentForeground?: string;
+  sidebarBorder?: string;
+  sidebarRing?: string;
+  chart1?: string;
+  chart2?: string;
+  chart3?: string;
+  chart4?: string;
+  chart5?: string;
+  fontSans?: string;
+  fontMono?: string;
 }
 interface ThemeConfig {
   token?: ThemeToken;
-  dark?: boolean;
+  darkToken?: ThemeToken;
+  dark?: 'light' | 'dark' | 'system';
 }
 interface Locale {
   close?: string;
@@ -31,12 +52,21 @@ interface Locale {
   loading?: string;
   expand?: string;
   collapse?: string;
+  back?: string;
+  ok?: string;
+  cancel?: string;
 }
+type ComponentSize = 'small' | 'middle' | 'large';
+type DefaultProps = Record<string, Record<string, unknown>>;
 interface ContextValue {
   theme: ThemeConfig;
   locale: Locale;
+  direction?: 'ltr' | 'rtl';
   getContainer: () => HTMLElement | undefined;
+  componentSize?: ComponentSize;
+  defaultProps?: DefaultProps;
+  isConfigured: boolean;
 }
 //#endregion
-export { ContextValue, Locale, ThemeConfig, ThemeToken };
+export { ComponentSize, ContextValue, DefaultProps, Locale, ThemeConfig, ThemeToken };
 //# sourceMappingURL=types.d.mts.map

package/dist/providers/config/types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/providers/config/types.ts"],"mappings":";UAAiB,UAAA;EAEf,YAAA;EACA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,SAAA;EACA,mBAAA;EACA,YAAA;EACA,sBAAA;EACA,cAAA;EACA,wBAAA;EACA,UAAA;EACA,oBAAA;EACA,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EAGA,YAAA;AAAA;AAAA,UAGe,WAAA;EACf,KAAA,GAAQ,UAAA;EACR,IAAA;AAAA;AAAA,UAQe,MAAA;EACf,KAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;AAAA;AAAA,UAGe,YAAA;EACf,KAAA,EAAO,WAAA;EACP,MAAA,EAAQ,MAAA;EAUR,YAAA,QAAoB,WAAA;AAAA"}
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../../src/providers/config/types.ts"],"mappings":";UAAiB,UAAA;EAEf,YAAA;EACA,sBAAA;EACA,eAAA;EACA,eAAA;EACA,SAAA;EACA,mBAAA;EACA,YAAA;EACA,sBAAA;EACA,cAAA;EACA,wBAAA;EACA,UAAA;EACA,oBAAA;EACA,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,WAAA;EACA,UAAA;EACA,SAAA;EASA,YAAA;EAIA,aAAA;EACA,kBAAA;EACA,mBAAA;EACA,SAAA;EACA,aAAA;EAGA,OAAA;EACA,iBAAA;EACA,cAAA;EACA,wBAAA;EACA,aAAA;EACA,uBAAA;EACA,aAAA;EACA,WAAA;EAGA,MAAA;EACA,MAAA;EACA,MAAA;EACA,MAAA;EACA,MAAA;EAGA,QAAA;EACA,QAAA;AAAA;AAAA,UAGe,WAAA;EACf,KAAA,GAAQ,UAAA;EAKR,SAAA,GAAY,UAAA;EASZ,IAAA;AAAA;AAAA,UAQe,MAAA;EACf,KAAA;EACA,KAAA;EACA,SAAA;EACA,OAAA;EACA,MAAA;EACA,QAAA;EACA,IAAA;EACA,EAAA;EACA,MAAA;AAAA;AAAA,KAMU,aAAA;AAAA,KAYA,YAAA,GAAe,MAAA,SAAe,MAAA;AAAA,UAEzB,YAAA;EACf,KAAA,EAAO,WAAA;EACP,MAAA,EAAQ,MAAA;EACR,SAAA;EAUA,YAAA,QAAoB,WAAA;EACpB,aAAA,GAAgB,aAAA;EAChB,YAAA,GAAe,YAAA;EAKf,YAAA;AAAA"}

package/dist/providers.d.mts

@@ -1,5 +1,6 @@
-import { Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
+import { ComponentSize, DefaultProps, Locale, ThemeConfig, ThemeToken } from "./providers/config/types.mjs";
 import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
 import { Config, Props } from "./providers/config/config.mjs";
+import { ConfigSnapshotProvider, getRootConfigValue } from "./providers/config/registry.mjs";
 import "./providers/config/index.mjs";
-export { Config, type Props as ConfigProps, DEFAULT_LOCALE, type Locale, type ThemeConfig, type ThemeToken, useConfig };
+export { type ComponentSize, Config, type Props as ConfigProps, ConfigSnapshotProvider, DEFAULT_LOCALE, type DefaultProps, type Locale, type ThemeConfig, type ThemeToken, getRootConfigValue, useConfig };

package/dist/providers.mjs

@@ -1,4 +1,5 @@
 import { DEFAULT_LOCALE, useConfig } from "./providers/config/context.mjs";
+import { ConfigSnapshotProvider, getRootConfigValue } from "./providers/config/registry.mjs";
 import Config from "./providers/config/config.mjs";
 
-export { Config, DEFAULT_LOCALE, useConfig };
+export { Config, ConfigSnapshotProvider, DEFAULT_LOCALE, getRootConfigValue, useConfig };

package/dist/style.css

@@ -3,6 +3,8 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
+    --font-sans: var(--font-geist-sans);
+    --font-mono: var(--font-geist-mono);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-yellow-400: oklch(85.2% 0.199 91.936);
     --color-yellow-500: oklch(79.5% 0.184 86.047);
@@ -54,6 +56,8 @@
     --leading-snug: 1.375;
     --leading-normal: 1.5;
     --radius-xs: 0.125rem;
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-lg: var(--radius);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
@@ -1426,6 +1430,9 @@
   .text-yellow-600 {
     color: var(--color-yellow-600);
   }
+  .lowercase {
+    text-transform: lowercase;
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -3592,6 +3599,46 @@
   [data-slot='button'][data-color='gold'] {
     --btn-bg: #f59e0b;
   }
+  [data-slot='col'] {
+    flex-basis: calc(var(--col-span-xs) / 24 * 100%);
+    max-width: calc(var(--col-span-xs) / 24 * 100%);
+    margin-left: calc(var(--col-offset-xs, 0) / 24 * 100%);
+  }
+  @media (width >= 40rem) {
+    [data-slot='col'] {
+      flex-basis: calc(var(--col-span-sm) / 24 * 100%);
+      max-width: calc(var(--col-span-sm) / 24 * 100%);
+      margin-left: calc(var(--col-offset-sm, 0) / 24 * 100%);
+    }
+  }
+  @media (width >= 48rem) {
+    [data-slot='col'] {
+      flex-basis: calc(var(--col-span-md) / 24 * 100%);
+      max-width: calc(var(--col-span-md) / 24 * 100%);
+      margin-left: calc(var(--col-offset-md, 0) / 24 * 100%);
+    }
+  }
+  @media (width >= 64rem) {
+    [data-slot='col'] {
+      flex-basis: calc(var(--col-span-lg) / 24 * 100%);
+      max-width: calc(var(--col-span-lg) / 24 * 100%);
+      margin-left: calc(var(--col-offset-lg, 0) / 24 * 100%);
+    }
+  }
+  @media (width >= 80rem) {
+    [data-slot='col'] {
+      flex-basis: calc(var(--col-span-xl) / 24 * 100%);
+      max-width: calc(var(--col-span-xl) / 24 * 100%);
+      margin-left: calc(var(--col-offset-xl, 0) / 24 * 100%);
+    }
+  }
+  @media (width >= 96rem) {
+    [data-slot='col'] {
+      flex-basis: calc(var(--col-span-2xl) / 24 * 100%);
+      max-width: calc(var(--col-span-2xl) / 24 * 100%);
+      margin-left: calc(var(--col-offset-2xl, 0) / 24 * 100%);
+    }
+  }
 }
 @property --tw-translate-x {
   syntax: "*";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "4.1.0",
+  "version": "5.1.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -131,6 +131,7 @@
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-direction": "^1.1.1",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",