@psnext/design-system 1.0.0 → 1.2.0

package/dist/styles/base/global.css

@@ -1,305 +0,0 @@
-/* ============================================================
-   Global Base Styles
-   ============================================================ */
-
-/* Radial gradient background (applied by themes) */
-body::before {
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  background: var(--radial-gradient-bg);
-  pointer-events: none;
-}
-
-body {
-  position: relative;
-}
-
-/* Hide scrollbars while preserving scroll */
-* {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-*::-webkit-scrollbar {
-  display: none;
-}
-
-main,
-.content-wrapper {
-  position: relative;
-  z-index: 1;
-}
-
-/* Reduce motion */
-@media (prefers-reduced-motion: reduce) {
-  body::before {
-    animation: none;
-    transition: none;
-  }
-}
-
-/* High contrast */
-@media (prefers-contrast: high) {
-  body::before {
-    opacity: 0.3;
-  }
-}
-
-/* ── Keyframes ─────────────────────────────────────────── */
-
-@keyframes hierarchyHighlightPulse {
-  0% {
-    box-shadow: 0 0 0 0 var(--hierarchy-highlight-glow, rgba(99, 102, 241, 0.45));
-  }
-  40% {
-    box-shadow: 0 0 0 4px var(--hierarchy-highlight-glow, rgba(99, 102, 241, 0.25));
-  }
-  100% {
-    box-shadow: 0 0 0 0 var(--hierarchy-highlight-glow, rgba(99, 102, 241, 0));
-  }
-}
-
-@keyframes hierarchyExpandIn {
-  from {
-    opacity: 0;
-    max-height: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    max-height: 200px;
-    transform: translateY(0);
-  }
-}
-
-@keyframes typingDot {
-  0%,
-  60%,
-  100% {
-    opacity: 0.3;
-    transform: translateY(0);
-  }
-  30% {
-    opacity: 1;
-    transform: translateY(-3px);
-  }
-}
-
-@property --chat-border-angle {
-  syntax: "<angle>";
-  initial-value: 0deg;
-  inherits: false;
-}
-
-@keyframes chatBorderSpin {
-  from {
-    --chat-border-angle: 0deg;
-  }
-  to {
-    --chat-border-angle: 360deg;
-  }
-}
-
-@keyframes chatBorderGlow {
-  0%,
-  100% {
-    box-shadow: 0 0 12px 1px var(--chat-glow-shadow), 0 0 24px 2px var(--chat-glow-shadow-outer);
-  }
-  50% {
-    box-shadow: 0 0 20px 4px var(--chat-glow-shadow), 0 0 40px 8px var(--chat-glow-shadow-outer);
-  }
-}
-
-.chat-input-glow-active {
-  animation: chatBorderGlow 2s ease-in-out infinite;
-}
-
-.chat-input-glow-active::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  border: 2px solid transparent;
-  background: conic-gradient(
-      from var(--chat-border-angle),
-      var(--chat-glow-1),
-      var(--chat-glow-2),
-      var(--chat-glow-3),
-      var(--chat-glow-2),
-      var(--chat-glow-1)
-    )
-    border-box;
-  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
-  -webkit-mask-composite: xor;
-  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
-  mask-composite: exclude;
-  animation: chatBorderSpin 3s linear infinite;
-  pointer-events: none;
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Micro-interactions — Step 1: Global transition defaults
-   Applied only when the user has not requested reduced motion.
-   All values use short durations (150ms) so they feel snappy,
-   not sluggish. Components can override via inline styles.
-───────────────────────────────────────────────────────────── */
-@media (prefers-reduced-motion: no-preference) {
-  button,
-  [role="button"],
-  a,
-  input,
-  select,
-  textarea,
-  label[for] {
-    transition:
-      background-color 150ms ease,
-      color 150ms ease,
-      border-color 150ms ease,
-      box-shadow 150ms ease,
-      opacity 150ms ease,
-      transform 150ms ease;
-  }
-
-  /* Active / press feedback — subtle scale-down on click */
-  button:active,
-  [role="button"]:active {
-    transform: scale(0.97);
-  }
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Micro-interactions — Step 3: Page transition (fade + rise)
-   Re-triggers every time .animate-page-enter is mounted.
-   Skipped when user prefers reduced motion.
-───────────────────────────────────────────────────────────── */
-@keyframes pageEnter {
-  from {
-    opacity: 0;
-    transform: translateY(6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .animate-page-enter {
-    animation: pageEnter 200ms ease-out both;
-  }
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Micro-interactions — Nav stagger: items appear top → bottom
-   Each item gets an index-based delay via inline style.
-   The animation is short (180ms) and subtle (8px rise + fade).
-   Skipped for reduced-motion users.
-───────────────────────────────────────────────────────────── */
-@keyframes navItemEnter {
-  from {
-    opacity: 0;
-    transform: translateY(-6px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .nav-item-enter {
-    animation: navItemEnter 180ms ease-out both;
-  }
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Micro-interactions — Step 6: Drawer panel transition
-   Replaces the generic `ease-out` on all drawer panels with a
-   spring-like cubic-bezier that starts fast and decelerates
-   naturally — more polished than the default browser ease-out.
-   Reduced-motion: falls back to no transform transition.
-───────────────────────────────────────────────────────────── */
-.drawer-panel {
-  transition-property: transform;
-  transition-duration: 280ms;
-  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .drawer-panel {
-    transition: none;
-  }
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Micro-interactions — Step 5: Skeleton shimmer
-   Replaces the default Tailwind animate-pulse with a directional
-   gradient sweep. Uses var(--muted) and var(--accent) so it
-   automatically adapts to light / dark mode.
-───────────────────────────────────────────────────────────── */
-@keyframes shimmer {
-  from {
-    background-position: -200% center;
-  }
-  to {
-    background-position: 200% center;
-  }
-}
-
-.skeleton-shimmer {
-  background: linear-gradient(90deg, var(--muted) 25%, var(--accent) 50%, var(--muted) 75%);
-  background-size: 200% 100%;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .skeleton-shimmer {
-    animation: shimmer 1.6s ease-in-out infinite;
-  }
-}
-
-/* Reduced-motion fallback — static muted block, no animation */
-@media (prefers-reduced-motion: reduce) {
-  .skeleton-shimmer {
-    background: var(--muted);
-  }
-}
-
-/* ─────────────────────────────────────────────────────────────
-   Radix Accordion open/close — drives `animate-accordion-down/up`
-   utilities (mapped in theme.css) used by the Accordion primitive.
-───────────────────────────────────────────────────────────── */
-@keyframes accordion-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}
-
-@keyframes accordion-up {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
-
-/* Blinking caret for the InputOTP primitive (`animate-caret-blink`). */
-@keyframes caret-blink {
-  0%,
-  70%,
-  100% {
-    opacity: 1;
-  }
-  20%,
-  50% {
-    opacity: 0;
-  }
-}

package/dist/styles/base/radius.css

@@ -1,22 +0,0 @@
-/* ============================================================
-   Border Radius Tokens
-   Source: Figma border radius variable set
-   ============================================================ */
-
-:root {
-  --rounded-none: 0px;
-  --rounded-xs: 2px;
-  --rounded-sm: 4px;
-  --rounded-md: 6px;
-  --rounded-lg: 8px;
-  --radius: 10px; /* default system radius */
-  --rounded-xl: 12px;
-  --rounded-2xl: 16px;
-  --rounded-3xl: 24px;
-  --rounded-full: 9999px;
-
-  /* Component-specific */
-  --radius-button: 8px;
-  --radius-card: 8px;
-  --radius-dialog: 10px;
-}

package/dist/styles/base/semantic-aliases.css

@@ -1,53 +0,0 @@
-/* ============================================================
-   Semantic Aliases
-   Maps Style Dictionary–generated vars (--bg-*, --content-*, etc.)
-   to the component-facing names used by primitives and patterns.
-
-   Generated vars come from styles/generated/light.css (and dark.css).
-   This file must be imported AFTER the generated files.
-   ============================================================ */
-
-:root {
-  /* ── Surfaces ─────────────────────────────────────────── */
-  --background: var(--bg-background);
-  --foreground: var(--content-foreground);
-  --card: var(--card-100);
-  --card-foreground: var(--content-foreground);
-  --popover: var(--bg-secondary);
-  --popover-foreground: var(--content-secondary-foreground);
-
-  /* ── Interactive ──────────────────────────────────────── */
-  --primary: var(--bg-primary);
-  --primary-foreground: var(--content-primary-foreground);
-  --secondary: var(--bg-secondary);
-  --secondary-foreground: var(--content-secondary-foreground);
-  --muted: var(--bg-muted);
-  --muted-foreground: var(--content-muted-foreground);
-  --accent: var(--bg-accent);
-  --accent-foreground: var(--content-accent-foreground);
-
-  /* ── States ───────────────────────────────────────────── */
-  --destructive: var(--bg-destructive);
-  --destructive-foreground: var(--content-destructive);
-
-  /* ── UI structure ─────────────────────────────────────── */
-  --border: var(--border-2);
-  --input: var(--bg-input);
-  --input-background: var(--bg-input);
-  --ring: var(--focus-ring);
-
-  /* ── Card opacity scale ───────────────────────────────── */
-  --card-90: var(--card-90);
-  --card-80: var(--card-80);
-  --card-60: var(--card-60);
-  --card-40: var(--card-40);
-  --card-20: var(--card-20);
-  --card-10: var(--card-10);
-
-  /* ── Border scale ─────────────────────────────────────── */
-  --border-0: var(--border-0);
-  --border-1: var(--border-1);
-  --border-3: var(--border-3);
-  --border-4: var(--border-4);
-  --border-5: var(--border-5);
-}

package/dist/styles/base/spacing.css

@@ -1,33 +0,0 @@
-/* ============================================================
-   Spacing Tokens
-   Source: Figma Spacing1 variable set
-   ============================================================ */
-
-:root {
-  /* Semantic scale */
-  --spacing-0: 0px;
-  --spacing-3xs: 2px;
-  --spacing-2xs: 4px;
-  --spacing-xs: 8px;
-  --spacing-sm: 12px;
-  --spacing-md: 16px;
-  --spacing-lg: 20px;
-  --spacing-xl: 24px;
-  --spacing-2xl: 32px;
-  --spacing-3xl: 40px;
-  --spacing-4xl: 48px;
-  --spacing-5xl: 64px;
-
-  /* Precision values — use sparingly when semantic tokens don't fit */
-  --spacing-3: 3px;
-  --spacing-6: 6px;
-  --spacing-7: 7px;
-  --spacing-9: 9px;
-  --spacing-10: 10px;
-  --spacing-14: 14px;
-  --spacing-5p5: 5.5px;
-  --spacing-7p5: 7.5px;
-  --spacing-8p5: 8.5px;
-  --spacing-9p5: 9.5px;
-  --spacing-15p5: 15.5px;
-}

package/dist/styles/base/typography.css

@@ -1,48 +0,0 @@
-/* ============================================================
-   Typography Tokens
-   Source: PS AI Helix - Core Figma library
-   ============================================================ */
-
-:root {
-  /* Font families */
-  --font-heading: "Outfit", sans-serif;
-  --font-body: "Inter", sans-serif;
-  --font-mono: "Geist Mono", monospace;
-
-  /* Font weights */
-  --font-weight-normal: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-
-  /* Font sizes */
-  --text-4xl: 48px; /* h1 */
-  --text-3xl: 30px; /* h2 */
-  --text-2xl: 24px; /* h3 */
-  --text-xl: 20px; /* h4 */
-  --text-lg: 18px; /* paragraph large */
-  --text-base: 16px; /* paragraph regular / h5 */
-  --text-sm: 14px; /* paragraph small / h6 / label */
-  --text-xs: 12px; /* paragraph mini / h7 / caption */
-
-  /* Line heights — headings */
-  --leading-h1: 48px;
-  --leading-h2: 30px;
-  --leading-h3: 28.8px;
-  --leading-h4: 24px;
-  --leading-h5: 24px;
-  --leading-h6: 24px;
-  --leading-h7: 24px;
-
-  /* Line heights — body */
-  --leading-body-lg: 27px;
-  --leading-body: 24px;
-  --leading-body-sm: 20px;
-  --leading-body-xs: 16px;
-
-  /* Line heights — special */
-  --leading-caption: 21px;
-  --leading-mono: 24px;
-
-  /* Letter spacing */
-  --tracking-caption: 1.5px;
-}

package/dist/styles/generated/bodhi-vars.css

@@ -1,34 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-.theme-bodhi {
-  --brand-neutrals-50: #F9FAFB;
-  --brand-neutrals-100: #F3F4F6;
-  --brand-neutrals-200: #E5E7EB;
-  --brand-neutrals-300: #D1D5DB;
-  --brand-neutrals-400: #9CA3AF;
-  --brand-neutrals-500: #6B7280;
-  --brand-neutrals-600: #4B5563;
-  --brand-neutrals-700: #374151;
-  --brand-neutrals-800: #1F2937;
-  --brand-neutrals-900: #111827;
-  --brand-neutrals-950: #030712;
-  --brand-shades-50: #EFF6FF;
-  --brand-shades-100: #DBEAFE;
-  --brand-shades-200: #BFDBFE;
-  --brand-shades-300: #93C5FD;
-  --brand-shades-400: #60A5FA;
-  --brand-shades-500: #EF4444;
-  --brand-shades-600: #2563EB;
-  --brand-shades-700: #1D4ED8;
-  --brand-shades-800: #1E40AF;
-  --brand-shades-900: #1E3A8A;
-  --brand-shades-950: #172554;
-  --brand-combinations-1-brand: #EF4444;
-  --brand-combinations-1-brand-foreground: #FFFFFF;
-  --brand-combinations-2-brand: #BFDBFE;
-  --brand-combinations-2-brand-foreground: #1E40AF;
-  --brand-combinations-3-brand: #172554;
-  --brand-combinations-3-brand-foreground: #93C5FD;
-}

package/dist/styles/generated/dark.css

@@ -1,87 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-html.dark {
-  --bg-background: #1F2832; /** Use for general backgrounds. */
-  --bg-primary: #F3F4F6;
-  --bg-secondary: #1F2937;
-  --bg-accent: #111827; /** Level 1, official */
-  --bg-muted: #111827;
-  --bg-destructive: #7F1D1D;
-  --bg-destructive-alpha: rgba(127, 29, 29, 0.2);
-  --bg-destructive-subtle: #450A0A;
-  --bg-input: rgba(255, 255, 255, 0.05);
-  --bg-page-bg-brand: #450A0A;
-  --bg-page-bg-neutral: #030712;
-  --bg-info: #075985;
-  --bg-info-subtle: #0C4A6E;
-  --bg-success: #3F6212;
-  --bg-success-subtle: #365314;
-  --bg-warning: #9A3412;
-  --bg-warning-subtle: #431407;
-  --bg-error: #991B1B;
-  --bg-error-subtle: #7F1D1D;
-  --bg-backdrop: rgba(31, 40, 50, 0.4);
-  --content-foreground: #F9FAFB;
-  --content-primary-foreground: #030712;
-  --content-secondary-foreground: #F3F4F6;
-  --content-accent-foreground: #F3F4F6;
-  --content-muted-foreground: #9CA3AF;
-  --content-destructive-foreground: #FFFFFF;
-  --content-info: #38BDF8;
-  --content-info-bold: #7DD3FC;
-  --content-success: #84CC16;
-  --content-success-bold: #BEF264;
-  --content-warning: #F97316;
-  --content-warning-bold: #FDBA74;
-  --content-error: #EF4444;
-  --content-error-bold: #FCA5A5;
-  --content-destructive: #F87171;
-  --content-destructive-subtle: #B91C1C;
-  --card-100: #1F2832;
-  --card-90: rgba(31, 40, 50, 0.9);
-  --card-80: rgba(31, 40, 50, 0.8);
-  --card-60: rgba(31, 40, 50, 0.6);
-  --card-40: rgba(31, 40, 50, 0.4);
-  --card-20: rgba(31, 40, 50, 0.2);
-  --card-10: rgba(31, 40, 50, 0.1);
-  --card-foreground: #FFFFFF;
-  --popover: #FFFFFF;
-  --popover-foreground: #1F2832;
-  --unofficial-foreground-alt: #D1D5DB; /** Please use this for body text. */
-  --unofficial-body-background: #030712;
-  --unofficial-mid-alt: #9CA3AF;
-  --unofficial-ghost-foreground: #E5E7EB;
-  --unofficial-ghost: rgba(255, 255, 255, 0.0001);
-  --unofficial-ghost-hover: rgba(255, 255, 255, 0.1);
-  --unofficial-primary-hover: #D1D5DB;
-  --unofficial-secondary-hover: #111827;
-  --unofficial-outline: rgba(255, 255, 255, 0.05);
-  --unofficial-outline-hover: rgba(255, 255, 255, 0.1);
-  --unofficial-outline-active: rgba(255, 255, 255, 0.15);
-  --unofficial-accent-0: #030712;
-  --unofficial-accent-2: #1F2937;
-  --unofficial-accent-3: #374151;
-  --border-0: #030712;
-  --border-1: #111827;
-  --border-2: #374151; /** level 2, official. See docs. */
-  --border-3: #374151;
-  --border-4: #4B5563;
-  --border-5: #6B7280;
-  --border-destructive-border: #F87171;
-  --focus-ring: #374151; /** Focus ring */
-  --focus-ring-error: #6D2E2F; /** Focus ring error */
-  --focus-ring-success: #BEF264; /** Focus ring error */
-  --sidebar: #030712;
-  --sidebar-foreground: #D1D5DB;
-  --sidebar-accent: #111827;
-  --sidebar-accent-foreground: #F3F4F6;
-  --sidebar-primary: #F9FAFB;
-  --sidebar-primary-foreground: #111827;
-  --sidebar-border: #1F2937;
-  --sidebar-ring: #374151;
-  --sidebar-unofficial-sidebar-muted: #6B7280;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #111628;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #201D1B;
-}

package/dist/styles/generated/light.css

@@ -1,87 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --bg-background: #FFFFFF; /** Use for general backgrounds. */
-  --bg-primary: #111827;
-  --bg-secondary: #F3F4F6;
-  --bg-accent: #F3F4F6; /** Level 1, official */
-  --bg-muted: #F3F4F6;
-  --bg-destructive: #DC2626;
-  --bg-destructive-alpha: rgba(220, 38, 38, 0.2);
-  --bg-destructive-subtle: #FEF2F2;
-  --bg-input: #FFFFFF;
-  --bg-page-bg-brand: #FECACA;
-  --bg-page-bg-neutral: #E2E8F0;
-  --bg-info: #BAE6FD;
-  --bg-info-subtle: #E0F2FE;
-  --bg-success: #D9F99D;
-  --bg-success-subtle: #ECFCCB;
-  --bg-warning: #FED7AA;
-  --bg-warning-subtle: #FFEDD5;
-  --bg-error: #FECACA;
-  --bg-error-subtle: #FFE2E2;
-  --bg-backdrop: rgba(31, 40, 50, 0.4);
-  --content-foreground: #030712;
-  --content-primary-foreground: #F9FAFB;
-  --content-secondary-foreground: #111827;
-  --content-accent-foreground: #111827;
-  --content-muted-foreground: #6B7280;
-  --content-destructive-foreground: #FFFFFF;
-  --content-info: #0284C7;
-  --content-info-bold: #075985;
-  --content-success: #65A30D;
-  --content-success-bold: #3F6212;
-  --content-warning: #EA580C;
-  --content-warning-bold: #9A3412;
-  --content-error: #DC2626;
-  --content-error-bold: #991B1B;
-  --content-destructive: #DC2626;
-  --content-destructive-subtle: #FCA5A5;
-  --card-100: #FFFFFF;
-  --card-90: rgba(255, 255, 255, 0.9);
-  --card-80: rgba(255, 255, 255, 0.8);
-  --card-60: rgba(255, 255, 255, 0.6);
-  --card-40: rgba(255, 255, 255, 0.4);
-  --card-20: rgba(255, 255, 255, 0.2);
-  --card-10: rgba(255, 255, 255, 0.1);
-  --card-foreground: #030712;
-  --popover: #1F2832;
-  --popover-foreground: #FFFFFF;
-  --unofficial-foreground-alt: #374151; /** Please use this for body text. */
-  --unofficial-body-background: #FFFFFF;
-  --unofficial-mid-alt: #4B5563;
-  --unofficial-ghost-foreground: #374151;
-  --unofficial-ghost: rgba(255, 255, 255, 0.0001);
-  --unofficial-ghost-hover: rgba(31, 40, 50, 0.05);
-  --unofficial-primary-hover: #374151;
-  --unofficial-secondary-hover: #F9FAFB;
-  --unofficial-outline: rgba(255, 255, 255, 0.1);
-  --unofficial-outline-hover: rgba(31, 40, 50, 0.0333);
-  --unofficial-outline-active: rgba(31, 40, 50, 0.05);
-  --unofficial-accent-0: #F9FAFB;
-  --unofficial-accent-2: #E5E7EB;
-  --unofficial-accent-3: #D1D5DB;
-  --border-0: #F9FAFB;
-  --border-1: #F3F4F6;
-  --border-2: #E5E7EB; /** level 2, official. See docs. */
-  --border-3: #D1D5DB;
-  --border-4: #9CA3AF;
-  --border-5: #6B7280;
-  --border-destructive-border: #DC2626;
-  --focus-ring: #D1D5DB; /** Focus ring */
-  --focus-ring-error: #FCA5A5; /** Focus ring error */
-  --focus-ring-success: #65A30D; /** Focus ring error */
-  --sidebar: #F9FAFB;
-  --sidebar-foreground: #374151;
-  --sidebar-accent: #F3F4F6;
-  --sidebar-accent-foreground: #111827;
-  --sidebar-primary: #111827;
-  --sidebar-primary-foreground: #F9FAFB;
-  --sidebar-border: #E5E7EB;
-  --sidebar-ring: #D1D5DB;
-  --sidebar-unofficial-sidebar-muted: #6B7280;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #BFDBFE;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #FEF9C3;
-}