@cdx-ui/components 0.0.1-beta.102 → 0.0.1-beta.104

package/lib/typescript/styles/primitives.d.ts

@@ -1,123 +0,0 @@
-/** @deprecated Use `bg-surface-primary` (--color-surface-primary) instead. */
-export declare const COLOR_BG_PRIMARY = "bg-white";
-/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
-export declare const COLOR_BG_SUBTLE = "bg-slate-50";
-/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
-export declare const COLOR_BG_MUTED = "bg-slate-100";
-/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
-export declare const COLOR_BG_INVERSE = "bg-slate-900";
-/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
-export declare const COLOR_BORDER_DEFAULT = "border-slate-200";
-/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
-export declare const COLOR_BORDER_STRONG = "border-slate-300";
-/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
-export declare const COLOR_BORDER_FOCUS = "border-slate-900";
-/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
-export declare const COLOR_BORDER_INVALID = "border-red-500";
-/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
-export declare const COLOR_TEXT_PRIMARY = "text-slate-900";
-/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
-export declare const COLOR_TEXT_SECONDARY = "text-slate-500";
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export declare const 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). */
-export declare const COLOR_TEXT_INVERSE = "text-white";
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export declare const COLOR_TEXT_PLACEHOLDER = "text-slate-400";
-/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
-export declare const COLOR_TEXT_INVALID = "text-red-600";
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export declare const COLOR_BRAND_DEFAULT = "bg-slate-900";
-/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
-export declare const COLOR_BRAND_HOVER = "bg-slate-800";
-/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
-export declare const COLOR_BRAND_ACTIVE = "bg-slate-700";
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export declare const COLOR_ACCENT_DEFAULT = "bg-slate-900";
-/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
-export declare const 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.
- */
-export declare const SEMANTIC_COLORS: {
-    readonly action: {
-        readonly bg: "bg-slate-900";
-        readonly bgHover: "bg-slate-800";
-        readonly bgActive: "bg-slate-700";
-        readonly border: "border-slate-900";
-        readonly text: "text-slate-900";
-        readonly ring: "ring-slate-400/50";
-    };
-    readonly danger: {
-        readonly bg: "bg-red-600";
-        readonly bgHover: "bg-red-700";
-        readonly bgActive: "bg-red-800";
-        readonly border: "border-red-600";
-        readonly text: "text-red-600";
-        readonly ring: "ring-red-400/50";
-    };
-    readonly warning: {
-        readonly bg: "bg-amber-500";
-        readonly bgHover: "bg-amber-600";
-        readonly bgActive: "bg-amber-700";
-        readonly border: "border-amber-500";
-        readonly text: "text-amber-600";
-        readonly ring: "ring-amber-400/50";
-    };
-    readonly success: {
-        readonly bg: "bg-green-600";
-        readonly bgHover: "bg-green-700";
-        readonly bgActive: "bg-green-800";
-        readonly border: "border-green-600";
-        readonly text: "text-green-600";
-        readonly ring: "ring-green-400/50";
-    };
-    readonly info: {
-        readonly bg: "bg-sky-500";
-        readonly bgHover: "bg-sky-600";
-        readonly bgActive: "bg-sky-700";
-        readonly border: "border-sky-500";
-        readonly text: "text-sky-600";
-        readonly ring: "ring-sky-400/50";
-    };
-};
-/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
-export declare const FOCUS_RING = "ring-2 ring-slate-400/50 ring-offset-2";
-/** @deprecated Use `rounded-[var(--border-radius-button)]` for buttons/inputs or `rounded-[var(--border-radius-default)]` for containers. */
-export declare const RADIUS_SM = "rounded-lg";
-/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
-export declare const RADIUS_MD = "rounded-xl";
-/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
-export declare const RADIUS_FULL = "rounded-full";
-/** @deprecated Use `shadow-sm` directly instead */
-export declare const SHADOW_SM = "shadow-sm";
-/** @deprecated Use `shadow-md` directly instead */
-export declare const SHADOW_MD = "shadow-md";
-/** @deprecated */
-export declare const SIZE_SCALE: {
-    readonly default: {
-        readonly height: "h-10";
-        readonly px: "px-4";
-        readonly gap: "gap-2";
-        readonly text: "text-base";
-    };
-    readonly small: {
-        readonly height: "h-8";
-        readonly px: "px-3";
-        readonly gap: "gap-1.5";
-        readonly text: "text-sm";
-    };
-};
-export declare const TRANSITION_COLORS = "transition-colors duration-150";
-export declare const DISABLED_OPACITY = "data-[disabled=true]:opacity-50";
-export declare const DISABLED_CURSOR = "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none";
-//# sourceMappingURL=primitives.d.ts.map

package/lib/typescript/styles/primitives.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../src/styles/primitives.ts"],"names":[],"mappings":"AAKA,8EAA8E;AAC9E,eAAO,MAAM,gBAAgB,aAAa,CAAC;AAC3C,kFAAkF;AAClF,eAAO,MAAM,eAAe,gBAAgB,CAAC;AAC7C,4FAA4F;AAC5F,eAAO,MAAM,cAAc,iBAAiB,CAAC;AAC7C,gEAAgE;AAChE,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAG/C,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,qBAAqB,CAAC;AACvD,4EAA4E;AAC5E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AACtD,4EAA4E;AAC5E,eAAO,MAAM,kBAAkB,qBAAqB,CAAC;AACrD,8EAA8E;AAC9E,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAGrD,gFAAgF;AAChF,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,oFAAoF;AACpF,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AACrD,kFAAkF;AAClF,eAAO,MAAM,gBAAgB,mBAAmB,CAAC;AACjD,uKAAuK;AACvK,eAAO,MAAM,kBAAkB,eAAe,CAAC;AAC/C,kFAAkF;AAClF,eAAO,MAAM,sBAAsB,mBAAmB,CAAC;AACvD,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,mBAAmB,iBAAiB,CAAC;AAClD,sGAAsG;AACtG,eAAO,MAAM,iBAAiB,iBAAiB,CAAC;AAChD,wGAAwG;AACxG,eAAO,MAAM,kBAAkB,iBAAiB,CAAC;AAGjD,0FAA0F;AAC1F,eAAO,MAAM,oBAAoB,iBAAiB,CAAC;AACnD,8EAA8E;AAC9E,eAAO,MAAM,mBAAmB,qBAAqB,CAAC;AAEtD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyClB,CAAC;AAGX,yGAAyG;AACzG,eAAO,MAAM,UAAU,2CAA2C,CAAC;AAGnE,6IAA6I;AAC7I,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,qFAAqF;AACrF,eAAO,MAAM,SAAS,eAAe,CAAC;AACtC,iHAAiH;AACjH,eAAO,MAAM,WAAW,iBAAiB,CAAC;AAI1C,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AACrC,mDAAmD;AACnD,eAAO,MAAM,SAAS,cAAc,CAAC;AAMrC,kBAAkB;AAClB,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAGb,CAAC;AAGX,eAAO,MAAM,iBAAiB,mCAAmC,CAAC;AAGlE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAClE,eAAO,MAAM,eAAe,qFACwD,CAAC"}

package/src/styles/index.ts

@@ -1 +0,0 @@
-export * from './primitives';

package/src/styles/primitives.ts

@@ -1,143 +0,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. */
-export const COLOR_BG_PRIMARY = 'bg-white';
-/** @deprecated Use `bg-surface-secondary` (--color-surface-secondary) instead. */
-export const COLOR_BG_SUBTLE = 'bg-slate-50';
-/** @deprecated Use `bg-surface-neutral-subtle` (--color-surface-neutral-subtle) instead. */
-export const COLOR_BG_MUTED = 'bg-slate-100';
-/** @deprecated Use `bg-base-950` (--color-base-950) instead. */
-export const COLOR_BG_INVERSE = 'bg-slate-900';
-
-// Border
-/** @deprecated Use `border-stroke-secondary` (--color-stroke-secondary) instead. */
-export const COLOR_BORDER_DEFAULT = 'border-slate-200';
-/** @deprecated Use `border-stroke-hover` (--color-stroke-hover) instead. */
-export const COLOR_BORDER_STRONG = 'border-slate-300';
-/** @deprecated Use `border-stroke-focus` (--color-stroke-focus) instead. */
-export const COLOR_BORDER_FOCUS = 'border-slate-900';
-/** @deprecated Use `border-stroke-danger` (--color-stroke-danger) instead. */
-export const COLOR_BORDER_INVALID = 'border-red-500';
-
-// Text
-/** @deprecated Use `text-content-primary` (--color-content-primary) instead. */
-export const COLOR_TEXT_PRIMARY = 'text-slate-900';
-/** @deprecated Use `text-content-secondary` (--color-content-secondary) instead. */
-export const COLOR_TEXT_SECONDARY = 'text-slate-500';
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export const 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). */
-export const COLOR_TEXT_INVERSE = 'text-white';
-/** @deprecated Use `text-content-tertiary` (--color-content-tertiary) instead. */
-export const COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
-/** @deprecated Use `text-content-danger` (--color-content-danger) instead. */
-export const COLOR_TEXT_INVALID = 'text-red-600';
-
-// Brand / Action
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export const COLOR_BRAND_DEFAULT = 'bg-slate-900';
-/** @deprecated Use `bg-surface-action-strong-hover` (--color-surface-action-strong-hover) instead. */
-export const COLOR_BRAND_HOVER = 'bg-slate-800';
-/** @deprecated Use `bg-surface-action-strong-active` (--color-surface-action-strong-active) instead. */
-export const COLOR_BRAND_ACTIVE = 'bg-slate-700';
-
-// Accent (for checked states, active indicators)
-/** @deprecated Use `bg-surface-action-strong` (--color-surface-action-strong) instead. */
-export const COLOR_ACCENT_DEFAULT = 'bg-slate-900';
-/** @deprecated Use `border-stroke-action` (--color-stroke-action) instead. */
-export const 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.
- */
-export const 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',
-  },
-} as const;
-
-// ─── Focus ───────────────────────────────────────────────
-/** @deprecated Use `ring-2 ring-[--color-stroke-focus] ring-offset-2` (--color-stroke-focus) instead. */
-export const 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. */
-export const RADIUS_SM = 'rounded-lg';
-/** @deprecated Use `rounded-[var(--border-radius-default)]` for cards/containers. */
-export const RADIUS_MD = 'rounded-xl';
-/** @deprecated Use `rounded-[var(--border-radius-round)]` for circular elements (icon buttons, radio, pills). */
-export const RADIUS_FULL = 'rounded-full';
-
-// ─── Shadows ─────────────────────────────────────────────
-
-/** @deprecated Use `shadow-sm` directly instead */
-export const SHADOW_SM = 'shadow-sm';
-/** @deprecated Use `shadow-md` directly instead */
-export const 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 */
-export const 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' },
-} as const;
-
-// ─── 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';