@cdx-ui/components 0.0.1-beta.98 → 0.1.0

package/src/providers/toast/provider.tsx

@@ -9,7 +9,9 @@ import {
 } from 'react';
 import { Platform, View } from 'react-native';
 import { useSharedValue } from 'react-native-reanimated';
+import { createPortalFn, useOverlayStackRegistration } from '@cdx-ui/primitives';
 import { DefaultToast } from '../../components/Toast';
+import type { ToastPlacement } from '../../components/Toast/types';
 import { InsetsContainer } from './insets-container';
 import { ToastLifecycleContext, type ToastLifecycleContextValue } from './lifecycle.context';
 import { toastReducer } from './reducer';
@@ -26,6 +28,54 @@ import type {
 } from './types';
 
 const DEFAULT_DURATION = 4000;
+const TOAST_PLACEMENTS: readonly ToastPlacement[] = [
+  'top-start',
+  'top',
+  'top-end',
+  'bottom-start',
+  'bottom',
+  'bottom-end',
+];
+
+function useToastPlacementStacks() {
+  const topStartTotal = useSharedValue(0);
+  const topStartHeights = useSharedValue<Record<string, number>>({});
+  const topTotal = useSharedValue(0);
+  const topHeights = useSharedValue<Record<string, number>>({});
+  const topEndTotal = useSharedValue(0);
+  const topEndHeights = useSharedValue<Record<string, number>>({});
+  const bottomStartTotal = useSharedValue(0);
+  const bottomStartHeights = useSharedValue<Record<string, number>>({});
+  const bottomTotal = useSharedValue(0);
+  const bottomHeights = useSharedValue<Record<string, number>>({});
+  const bottomEndTotal = useSharedValue(0);
+  const bottomEndHeights = useSharedValue<Record<string, number>>({});
+
+  return useMemo(
+    () => ({
+      'top-start': { total: topStartTotal, heights: topStartHeights },
+      top: { total: topTotal, heights: topHeights },
+      'top-end': { total: topEndTotal, heights: topEndHeights },
+      'bottom-start': { total: bottomStartTotal, heights: bottomStartHeights },
+      bottom: { total: bottomTotal, heights: bottomHeights },
+      'bottom-end': { total: bottomEndTotal, heights: bottomEndHeights },
+    }),
+    [
+      bottomEndHeights,
+      bottomEndTotal,
+      bottomHeights,
+      bottomStartHeights,
+      bottomStartTotal,
+      bottomTotal,
+      topEndHeights,
+      topEndTotal,
+      topHeights,
+      topStartHeights,
+      topStartTotal,
+      topTotal,
+    ],
+  );
+}
 
 /**
  * Context for toast manager
@@ -68,7 +118,7 @@ function createStringToastComponent(
 ): (props: ToastComponentProps) => React.ReactElement {
   return (props: ToastComponentProps) => {
     const mergedConfig = mergeToastConfig(globalConfig, {
-      color: 'default',
+      color: 'neutral',
     });
     return (
       <DefaultToast
@@ -137,19 +187,30 @@ export function ToastProvider({
 
   const isToastVisible = toasts.length > 0;
 
-  const heights = useSharedValue<Record<string, number>>({});
-
-  const total = useSharedValue<number>(0);
+  const placementStacks = useToastPlacementStacks();
 
   /**
-   * Derive total from toasts.length so the animated opacity/scale/translateY
-   * interpolations always use the real count.  Manual increment/decrement
-   * was prone to drift when hide + show ran in the same tick or when
-   * auto-dismiss raced with a manual hide (stale-closure mismatch).
+   * Each placement owns independent animation metrics. A toast at bottom-end
+   * must not compress or fade because unrelated toasts are open at top-start.
    */
   useEffect(() => {
-    total.set(toasts.length);
-  }, [toasts.length, total]);
+    const totals: Record<ToastPlacement, number> = {
+      'top-start': 0,
+      top: 0,
+      'top-end': 0,
+      'bottom-start': 0,
+      bottom: 0,
+      'bottom-end': 0,
+    };
+
+    for (const toast of toasts) {
+      totals[toast.placement] += 1;
+    }
+
+    for (const placement of TOAST_PLACEMENTS) {
+      placementStacks[placement].total.set(totals[placement]);
+    }
+  }, [placementStacks, toasts]);
 
   const idCounter = useRef(0);
 
@@ -199,17 +260,21 @@ export function ToastProvider({
 
       dispatch({ type: 'REMOVE', payload: { ids: idsArray } });
 
-      heights.modify(<T extends Record<string, number>>(value: T): T => {
-        'worklet';
-        const result = { ...value };
-        for (const id of idsArray) {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-          delete result[id];
-        }
-        return result;
-      });
+      for (const placement of TOAST_PLACEMENTS) {
+        placementStacks[placement].heights.modify(
+          <T extends Record<string, number>>(value: T): T => {
+            'worklet';
+            const result = { ...value };
+            for (const id of idsArray) {
+              // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+              delete result[id];
+            }
+            return result;
+          },
+        );
+      }
     },
-    [heights],
+    [placementStacks],
   );
 
   /**
@@ -358,18 +423,18 @@ export function ToastProvider({
 
   const lifecycleContextValue = useMemo<ToastLifecycleContextValue>(() => {
     const pending = new Set<string>();
-    let frontmostId: string | null = null;
+    const frontmostByPlacement = new Map<ToastPlacement, string>();
     for (const toast of toasts) {
       if (toast.pendingRemoval) {
         pending.add(toast.id);
       } else {
-        frontmostId = toast.id;
+        frontmostByPlacement.set(toast.placement, toast.id);
       }
     }
     return {
       remove: (id: string) => remove([id]),
       pendingRemovalIds: pending,
-      frontmostId,
+      frontmostIds: new Set(frontmostByPlacement.values()),
     };
   }, [remove, toasts]);
 
@@ -391,6 +456,7 @@ export function ToastProvider({
         normalizedOptions = {
           id: undefined,
           component: createStringToastComponent(options, globalConfig),
+          placement: globalConfig?.placement,
           duration: DEFAULT_DURATION,
         };
         duration = DEFAULT_DURATION;
@@ -404,6 +470,7 @@ export function ToastProvider({
         normalizedOptions = {
           id: config.id,
           component: createConfigToastComponent(config, globalConfig),
+          placement: config.placement,
           duration,
           onShow: config.onShow,
           onHide: config.onHide,
@@ -418,6 +485,7 @@ export function ToastProvider({
 
       const id =
         normalizedOptions.id ?? `toast-${String(Date.now())}-${String(idCounter.current++)}`;
+      const placement = normalizedOptions.placement ?? globalConfig?.placement ?? 'bottom';
 
       // If an explicit ID was provided, check if a toast with that ID already exists
       // If it exists, skip adding a new toast and return the existing ID
@@ -432,6 +500,7 @@ export function ToastProvider({
         type: 'SHOW',
         payload: {
           id,
+          placement,
           component: normalizedOptions.component,
           duration,
           onShow: normalizedOptions.onShow,
@@ -497,40 +566,70 @@ export function ToastProvider({
     [show, hide, pauseAll, resumeAll, isToastVisible],
   );
 
+  useOverlayStackRegistration({
+    active: toasts.length > 0,
+    capabilities: [],
+    id: 'forge-ui-toast-viewport',
+    groupId: 'forge-ui-notifications',
+    layer: 'notification',
+  });
+
+  const placementIndexes: Record<ToastPlacement, number> = {
+    'top-start': 0,
+    top: 0,
+    'top-end': 0,
+    'bottom-start': 0,
+    bottom: 0,
+    'bottom-end': 0,
+  };
+
+  const toastViewport =
+    toasts.length > 0 ? (
+      <InsetsContainer
+        insets={insets}
+        announceLabel={announceLabel}
+        contentWrapper={contentWrapper}
+        disableFullWindowOverlay={disableFullWindowOverlay}
+        unstable_accessibilityContainerViewIsModal={unstable_accessibilityContainerViewIsModal}
+        pauseAll={pauseAll}
+        resumeAll={resumeAll}
+        hide={hide}
+      >
+        <View className="flex-1">
+          {toasts.map((toastItem) => {
+            const placement = toastItem.placement;
+            const index = placementIndexes[placement];
+            const stack = placementStacks[placement];
+            placementIndexes[placement] += 1;
+
+            return (
+              <ToastItemRenderer
+                key={toastItem.id}
+                toastItem={toastItem}
+                show={show}
+                hide={hide}
+                index={index}
+                total={stack.total}
+                heights={stack.heights}
+                maxVisibleToasts={maxVisibleToasts}
+              />
+            );
+          })}
+        </View>
+      </InsetsContainer>
+    ) : null;
+
+  const renderedToastViewport =
+    Platform.OS === 'web' && toastViewport && createPortalFn && typeof document !== 'undefined'
+      ? createPortalFn(toastViewport, document.body)
+      : toastViewport;
+
   return (
     <ToastConfigContext.Provider value={globalConfig}>
       <ToasterContext.Provider value={contextValue}>
         <ToastLifecycleContext.Provider value={lifecycleContextValue}>
           {children}
-          {toasts.length > 0 && (
-            <InsetsContainer
-              insets={insets}
-              announceLabel={announceLabel}
-              contentWrapper={contentWrapper}
-              disableFullWindowOverlay={disableFullWindowOverlay}
-              unstable_accessibilityContainerViewIsModal={
-                unstable_accessibilityContainerViewIsModal
-              }
-              pauseAll={pauseAll}
-              resumeAll={resumeAll}
-              hide={hide}
-            >
-              <View className="flex-1">
-                {toasts.map((toastItem, index) => (
-                  <ToastItemRenderer
-                    key={toastItem.id}
-                    toastItem={toastItem}
-                    show={show}
-                    hide={hide}
-                    index={index}
-                    total={total}
-                    heights={heights}
-                    maxVisibleToasts={maxVisibleToasts}
-                  />
-                ))}
-              </View>
-            </InsetsContainer>
-          )}
+          {renderedToastViewport}
         </ToastLifecycleContext.Provider>
       </ToasterContext.Provider>
     </ToastConfigContext.Provider>

package/src/providers/toast/toast-item-renderer.tsx

@@ -13,6 +13,7 @@ export const ToastItemRenderer = memo(
 
     const content = toastItem.component({
       id: toastItem.id,
+      placement: toastItem.placement,
       index,
       total,
       heights,
@@ -33,8 +34,11 @@ export const ToastItemRenderer = memo(
     return (
       prevProps.toastItem.id === nextProps.toastItem.id &&
       prevProps.toastItem.component === nextProps.toastItem.component &&
+      prevProps.toastItem.placement === nextProps.toastItem.placement &&
       prevProps.toastItem.pendingRemoval === nextProps.toastItem.pendingRemoval &&
-      prevProps.index === nextProps.index
+      prevProps.index === nextProps.index &&
+      prevProps.total === nextProps.total &&
+      prevProps.heights === nextProps.heights
     );
   },
 );

package/src/providers/toast/types.ts

@@ -1,5 +1,5 @@
 import type { SharedValue } from 'react-native-reanimated';
-import type { ToastProps } from '../../components/Toast/types';
+import type { ToastPlacement, ToastProps } from '../../components/Toast/types';
 
 /**
  * Global toast configuration
@@ -120,15 +120,19 @@ export interface ToastComponentProps {
    */
   id: string;
   /**
-   * The index of the toast in the array (0-based)
+   * Placement used to isolate this toast's stack metrics.
+   */
+  placement: ToastPlacement;
+  /**
+   * The index of the toast within its placement stack (0-based).
    */
   index: number;
   /**
-   * The total number of toasts currently displayed
+   * The total number of toasts currently displayed at this placement.
    */
   total: SharedValue<number>;
   /**
-   * Heights of all toast items, keyed by toast ID
+   * Heights of toast items at this placement, keyed by toast ID.
    */
   heights: SharedValue<Record<string, number>>;
   /**
@@ -225,6 +229,11 @@ export interface ToastShowOptionsWithComponent {
    * A function that receives toast props and returns a React element
    */
   component: (props: ToastComponentProps) => React.ReactElement;
+  /**
+   * Placement used for stack isolation and passed to the custom component.
+   * @default ToastProvider default placement, then 'bottom'
+   */
+  placement?: ToastPlacement;
   /**
    * Duration in milliseconds before the toast automatically disappears
    * Set to `'persistent'` to prevent auto-hide (toast will remain until manually dismissed)
@@ -243,7 +252,7 @@ export interface ToastShowOptionsWithComponent {
 
 /**
  * Conditional type for toast show options
- * - If component is provided: only id, component, onShow, onHide are allowed
+ * - If component is provided: lifecycle options plus placement are allowed
  * - If component is NOT provided: all config props are available
  */
 export type ToastShowOptions =
@@ -258,6 +267,11 @@ export interface ToastItem {
    * Unique identifier for the toast
    */
   id: string;
+  /**
+   * Resolved placement used to isolate stack animation metrics.
+   * @internal
+   */
+  placement: ToastPlacement;
   /**
    * A function that receives toast props and returns a React element
    */
@@ -388,15 +402,15 @@ export interface ToastItemRendererProps {
    */
   toastItem: ToastItem;
   /**
-   * The index of the toast in the array (0-based)
+   * The index of the toast within its placement stack (0-based).
    */
   index: number;
   /**
-   * The total number of toasts currently displayed
+   * The total number of toasts currently displayed at this placement.
    */
   total: SharedValue<number>;
   /**
-   * Heights of all toast items, keyed by toast ID
+   * Heights of toast items at this placement, keyed by toast ID.
    */
   heights: SharedValue<Record<string, number>>;
   /**

package/src/styles/constants.ts

@@ -0,0 +1,10 @@
+// packages/components/src/styles/constants.ts
+// Semantic constants for Forge UI component styling.
+
+// ─── Transitions ─────────────────────────────────────────
+export const TRANSITION_COLORS = 'transition-colors duration-150';
+
+// ─── Disabled ────────────────────────────────────────────
+export const DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
+export const DISABLED_CURSOR =
+  'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';

package/src/styles.css

@@ -1 +1,2 @@
 @source './**/*.{ts,tsx}';
+@source '../../data-grid/src/**/*.{ts,tsx}';

package/lib/commonjs/metro/withCdxMetroConfig.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "withCdxMetroConfig", {
-  enumerable: true,
-  get: function () {
-    return _withForgeMetroConfig.withForgeMetroConfig;
-  }
-});
-var _withForgeMetroConfig = require("./withForgeMetroConfig");
-//# sourceMappingURL=withCdxMetroConfig.js.map

package/lib/commonjs/metro/withCdxMetroConfig.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_withForgeMetroConfig","require"],"sourceRoot":"../../../src","sources":["metro/withCdxMetroConfig.ts"],"mappings":";;;;;;;;;;;AACA,IAAAA,qBAAA,GAAAC,OAAA","ignoreList":[]}

package/lib/commonjs/metro/withForgeMetroConfig.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withForgeMetroConfig = withForgeMetroConfig;
-var _metro = require("uniwind/metro");
-/**
- * Wraps a Metro config with Forge UI's styling-layer configuration.
- *
- * Today this delegates to Uniwind. If the styling layer is swapped (see
- * `docs/research/uniwind-to-nativewind-contingency.md`), only the internals
- * of this function change — consuming Metro configs stay the same.
- *
- * Must be the **outermost** Metro config wrapper (after any other wrappers
- * like `withStorybook`).
- */
-function withForgeMetroConfig(config, options) {
-  return (0, _metro.withUniwindConfig)(config, {
-    cssEntryFile: options.cssEntryFile,
-    dtsFile: options.generatedTypesFile
-  });
-}
-//# sourceMappingURL=withForgeMetroConfig.js.map

package/lib/commonjs/metro/withForgeMetroConfig.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_metro","require","withForgeMetroConfig","config","options","withUniwindConfig","cssEntryFile","dtsFile","generatedTypesFile"],"sourceRoot":"../../../src","sources":["metro/withForgeMetroConfig.ts"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,oBAAoBA,CAClCC,MAAS,EACTC,OAAgC,EAC7B;EACH,OAAO,IAAAC,wBAAiB,EAACF,MAAM,EAAE;IAC/BG,YAAY,EAAEF,OAAO,CAACE,YAAY;IAClCC,OAAO,EAAEH,OAAO,CAACI;EACnB,CAAC,CAAC;AACJ","ignoreList":[]}

package/lib/commonjs/styles/index.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _primitives = require("./primitives");
-Object.keys(_primitives).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _primitives[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _primitives[key];
-    }
-  });
-});
-//# sourceMappingURL=index.js.map

package/lib/commonjs/styles/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_primitives","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../src","sources":["styles/index.ts"],"mappings":";;;;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,WAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/lib/commonjs/styles/primitives.js

@@ -1,159 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TRANSITION_COLORS = exports.SIZE_SCALE = exports.SHADOW_SM = exports.SHADOW_MD = exports.SEMANTIC_COLORS = exports.RADIUS_SM = exports.RADIUS_MD = exports.RADIUS_FULL = exports.FOCUS_RING = exports.DISABLED_OPACITY = exports.DISABLED_CURSOR = exports.COLOR_TEXT_SECONDARY = exports.COLOR_TEXT_PRIMARY = exports.COLOR_TEXT_PLACEHOLDER = exports.COLOR_TEXT_MUTED = exports.COLOR_TEXT_INVERSE = exports.COLOR_TEXT_INVALID = exports.COLOR_BRAND_HOVER = exports.COLOR_BRAND_DEFAULT = exports.COLOR_BRAND_ACTIVE = exports.COLOR_BORDER_STRONG = exports.COLOR_BORDER_INVALID = exports.COLOR_BORDER_FOCUS = exports.COLOR_BORDER_DEFAULT = exports.COLOR_BG_SUBTLE = exports.COLOR_BG_PRIMARY = exports.COLOR_BG_MUTED = exports.COLOR_BG_INVERSE = exports.COLOR_ACCENT_DEFAULT = exports.COLOR_ACCENT_BORDER = void 0;
-// packages/components/src/styles/primitives.ts
-// Semantic constants for Forge UI component styling.
-
-// ─── Colors ──────────────────────────────────────────────
-// Surface & background
-/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
-const COLOR_BG_PRIMARY = exports.COLOR_BG_PRIMARY = 'bg-white';
-/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
-const COLOR_BG_SUBTLE = exports.COLOR_BG_SUBTLE = 'bg-slate-50';
-/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
-const COLOR_BG_MUTED = exports.COLOR_BG_MUTED = 'bg-slate-100';
-/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
-const COLOR_BG_INVERSE = exports.COLOR_BG_INVERSE = 'bg-slate-900';
-
-// Border
-/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
-const COLOR_BORDER_DEFAULT = exports.COLOR_BORDER_DEFAULT = 'border-slate-200';
-/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
-const COLOR_BORDER_STRONG = exports.COLOR_BORDER_STRONG = 'border-slate-300';
-/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
-const COLOR_BORDER_FOCUS = exports.COLOR_BORDER_FOCUS = 'border-slate-900';
-/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
-const COLOR_BORDER_INVALID = exports.COLOR_BORDER_INVALID = 'border-red-500';
-
-// Text
-/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
-const COLOR_TEXT_PRIMARY = exports.COLOR_TEXT_PRIMARY = 'text-slate-900';
-/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
-const COLOR_TEXT_SECONDARY = exports.COLOR_TEXT_SECONDARY = 'text-slate-500';
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-const COLOR_TEXT_MUTED = exports.COLOR_TEXT_MUTED = 'text-slate-400';
-/** @deprecated Use the appropriate `text-content-*-on-strong` token for the surface color, e.g. `text-content-action-on-strong` (--color-content-action-on-strong). */
-const COLOR_TEXT_INVERSE = exports.COLOR_TEXT_INVERSE = 'text-white';
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-const COLOR_TEXT_PLACEHOLDER = exports.COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
-/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
-const COLOR_TEXT_INVALID = exports.COLOR_TEXT_INVALID = 'text-red-600';
-
-// Brand / Action
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-const COLOR_BRAND_DEFAULT = exports.COLOR_BRAND_DEFAULT = 'bg-slate-900';
-/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
-const COLOR_BRAND_HOVER = exports.COLOR_BRAND_HOVER = 'bg-slate-800';
-/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
-const COLOR_BRAND_ACTIVE = exports.COLOR_BRAND_ACTIVE = 'bg-slate-700';
-
-// Accent (for checked states, active indicators)
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-const COLOR_ACCENT_DEFAULT = exports.COLOR_ACCENT_DEFAULT = 'bg-slate-900';
-/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
-const COLOR_ACCENT_BORDER = exports.COLOR_ACCENT_BORDER = 'border-slate-900';
-
-/**
- * @deprecated Use semantic token classes directly instead. Map each color key to its
- * corresponding `--color-surface-*`, `--color-stroke-*`, and `--color-content-*` tokens:
- * - `bg` → `bg-surface-{color}-strong` (--color-surface-{color}-strong)
- * - `bgHover` → `bg-surface-{color}-strong-hover` (--color-surface-{color}-strong-hover)
- * - `bgActive` → `bg-surface-{color}-strong-active` (--color-surface-{color}-strong-active)
- * - `border` → `border-stroke-{color}` (--color-stroke-{color})
- * - `text` → `text-content-{color}` (--color-content-{color})
- * - `ring` → `ring-[--color-stroke-focus]` (--color-stroke-focus)
- *
- * See Button/styles.ts for a complete migration example.
- */
-const SEMANTIC_COLORS = exports.SEMANTIC_COLORS = {
-  action: {
-    bg: 'bg-slate-900',
-    bgHover: 'bg-slate-800',
-    bgActive: 'bg-slate-700',
-    border: 'border-slate-900',
-    text: 'text-slate-900',
-    ring: 'ring-slate-400/50'
-  },
-  danger: {
-    bg: 'bg-red-600',
-    bgHover: 'bg-red-700',
-    bgActive: 'bg-red-800',
-    border: 'border-red-600',
-    text: 'text-red-600',
-    ring: 'ring-red-400/50'
-  },
-  warning: {
-    bg: 'bg-amber-500',
-    bgHover: 'bg-amber-600',
-    bgActive: 'bg-amber-700',
-    border: 'border-amber-500',
-    text: 'text-amber-600',
-    ring: 'ring-amber-400/50'
-  },
-  success: {
-    bg: 'bg-green-600',
-    bgHover: 'bg-green-700',
-    bgActive: 'bg-green-800',
-    border: 'border-green-600',
-    text: 'text-green-600',
-    ring: 'ring-green-400/50'
-  },
-  info: {
-    bg: 'bg-sky-500',
-    bgHover: 'bg-sky-600',
-    bgActive: 'bg-sky-700',
-    border: 'border-sky-500',
-    text: 'text-sky-600',
-    ring: 'ring-sky-400/50'
-  }
-};
-
-// ─── Focus ───────────────────────────────────────────────
-/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
-const FOCUS_RING = exports.FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
-
-// ─── Radius ──────────────────────────────────────────────
-/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
-const RADIUS_SM = exports.RADIUS_SM = 'rounded-lg';
-/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
-const RADIUS_MD = exports.RADIUS_MD = 'rounded-xl';
-/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
-const RADIUS_FULL = exports.RADIUS_FULL = 'rounded-full';
-
-// ─── Shadows ─────────────────────────────────────────────
-
-/** @deprecated Use `shadow-sm` directly instead */
-const SHADOW_SM = exports.SHADOW_SM = 'shadow-sm';
-/** @deprecated Use `shadow-md` directly instead */
-const SHADOW_MD = exports.SHADOW_MD = 'shadow-md';
-
-// ─── Sizing ──────────────────────────────────────────────
-// Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
-// Only two sizes: 'default' (regular) and 'small' (compact).
-// NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
-/** @deprecated */
-const SIZE_SCALE = exports.SIZE_SCALE = {
-  default: {
-    height: 'h-10',
-    px: 'px-4',
-    gap: 'gap-2',
-    text: 'text-base'
-  },
-  small: {
-    height: 'h-8',
-    px: 'px-3',
-    gap: 'gap-1.5',
-    text: 'text-sm'
-  }
-};
-
-// ─── Transitions ─────────────────────────────────────────
-const TRANSITION_COLORS = exports.TRANSITION_COLORS = 'transition-colors duration-150';
-
-// ─── Disabled ────────────────────────────────────────────
-const DISABLED_OPACITY = exports.DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
-const DISABLED_CURSOR = exports.DISABLED_CURSOR = 'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';
-//# sourceMappingURL=primitives.js.map

package/lib/commonjs/styles/primitives.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["COLOR_BG_PRIMARY","exports","COLOR_BG_SUBTLE","COLOR_BG_MUTED","COLOR_BG_INVERSE","COLOR_BORDER_DEFAULT","COLOR_BORDER_STRONG","COLOR_BORDER_FOCUS","COLOR_BORDER_INVALID","COLOR_TEXT_PRIMARY","COLOR_TEXT_SECONDARY","COLOR_TEXT_MUTED","COLOR_TEXT_INVERSE","COLOR_TEXT_PLACEHOLDER","COLOR_TEXT_INVALID","COLOR_BRAND_DEFAULT","COLOR_BRAND_HOVER","COLOR_BRAND_ACTIVE","COLOR_ACCENT_DEFAULT","COLOR_ACCENT_BORDER","SEMANTIC_COLORS","action","bg","bgHover","bgActive","border","text","ring","danger","warning","success","info","FOCUS_RING","RADIUS_SM","RADIUS_MD","RADIUS_FULL","SHADOW_SM","SHADOW_MD","SIZE_SCALE","default","height","px","gap","small","TRANSITION_COLORS","DISABLED_OPACITY","DISABLED_CURSOR"],"sourceRoot":"../../../src","sources":["styles/primitives.ts"],"mappings":"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","ignoreList":[]}