sdaia-ui 1.0.1

package/src/lib/cn.ts

@@ -0,0 +1,42 @@
+import { clsx, type ClassValue } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+/**
+ * Extended tailwind-merge that understands our custom `@utility` typography
+ * classes (defined in globals.css / packages/ui/src/styles.css):
+ *
+ *   text-text-2xs / text-text-xs / text-text-sm / text-text-md / text-text-lg / text-text-xl
+ *   text-display-xs / -sm / -md / -lg / -xl / -2xl
+ *
+ * Without this extension, tailwind-merge sees `text-text-sm` and thinks it is
+ * a `text-<color>` class, so when it is combined with a real arbitrary text
+ * colour like `text-[rgba(31,42,55,1)]`, it *dedupes* the two into a single
+ * "text" utility — keeping the colour and dropping the font-size. That is why
+ * typography classes defined in variant files were silently lost when merged
+ * with colour classes on the same element.
+ *
+ * Registering the custom utilities under the correct class groups fixes this.
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [
+        { 'text-text': ['2xs', 'xs', 'sm', 'md', 'lg', 'xl'] },
+        { 'text-display': ['xs', 'sm', 'md', 'lg', 'xl', '2xl'] },
+      ],
+    },
+  },
+});
+
+/**
+ * Combines class names with `clsx` and resolves Tailwind conflicts with
+ * an extended `twMerge` that knows about our custom typography utilities.
+ *
+ * Usage:
+ * ```ts
+ * cn('px-4 py-2', isActive && 'bg-blue-500', className)
+ * ```
+ */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/styles/motion.css

@@ -0,0 +1,120 @@
+/**
+ * SDAIA Design System — Motion
+ * Version: 1.0.0
+ * Source of truth: Figma JnxIDV6Ev4yznMM0njgo5i → Motion collection
+ */
+
+:root {
+  --motion-duration-instant:  0ms;
+  --motion-duration-fast:     150ms;
+  --motion-duration-base:     250ms;
+  --motion-duration-moderate: 350ms;
+  --motion-duration-slow:     500ms;
+
+  --motion-easing-linear:     cubic-bezier(0, 0, 1, 1);
+  --motion-easing-standard:   cubic-bezier(0.2, 0, 0, 1);
+  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
+  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
+
+  --motion-feedback-duration: var(--motion-duration-fast);
+  --motion-feedback-easing:   var(--motion-easing-standard);
+  --motion-enter-duration:    var(--motion-duration-base);
+  --motion-enter-easing:      var(--motion-easing-decelerate);
+  --motion-exit-duration:     var(--motion-duration-fast);
+  --motion-exit-easing:       var(--motion-easing-accelerate);
+  --motion-expand-duration:   var(--motion-duration-moderate);
+  --motion-expand-easing:     var(--motion-easing-standard);
+  --motion-transition-duration: var(--motion-duration-base);
+  --motion-transition-easing:   var(--motion-easing-standard);
+  --motion-emphasis-duration: var(--motion-duration-moderate);
+  --motion-emphasis-easing:   var(--motion-easing-emphasized);
+  --motion-loop-duration:     var(--motion-duration-slow);
+  --motion-loop-easing:       var(--motion-easing-linear);
+}
+
+.motion-feedback {
+  transition-property: color, background-color, border-color, box-shadow;
+  transition-duration: var(--motion-feedback-duration);
+  transition-timing-function: var(--motion-feedback-easing);
+}
+.motion-enter {
+  transition-property: opacity, transform;
+  transition-duration: var(--motion-enter-duration);
+  transition-timing-function: var(--motion-enter-easing);
+}
+.motion-exit {
+  transition-property: opacity, transform;
+  transition-duration: var(--motion-exit-duration);
+  transition-timing-function: var(--motion-exit-easing);
+}
+.motion-expand {
+  transition-property: max-height, opacity;
+  transition-duration: var(--motion-expand-duration);
+  transition-timing-function: var(--motion-expand-easing);
+}
+.motion-expand-rotate {
+  transition-property: transform;
+  transition-duration: var(--motion-expand-duration);
+  transition-timing-function: var(--motion-expand-easing);
+}
+.motion-transition {
+  transition-property: opacity, transform;
+  transition-duration: var(--motion-transition-duration);
+  transition-timing-function: var(--motion-transition-easing);
+}
+.motion-transition-indicator {
+  transition-property: left, width, right;
+  transition-duration: var(--motion-transition-duration);
+  transition-timing-function: var(--motion-transition-easing);
+}
+.motion-emphasis {
+  transition-property: transform, opacity;
+  transition-duration: var(--motion-emphasis-duration);
+  transition-timing-function: var(--motion-emphasis-easing);
+}
+
+@keyframes sdaia-spin {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+@keyframes sdaia-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+@keyframes sdaia-shimmer {
+  from { background-position: -200% center; }
+  to   { background-position:  200% center; }
+}
+
+.motion-loop-spin    { animation: sdaia-spin    var(--motion-loop-duration) var(--motion-loop-easing) infinite; }
+.motion-loop-pulse   { animation: sdaia-pulse   calc(var(--motion-loop-duration) * 2) var(--motion-loop-easing) infinite; }
+.motion-loop-shimmer {
+  animation: sdaia-shimmer calc(var(--motion-loop-duration) * 3) var(--motion-loop-easing) infinite;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.4) 50%,
+    transparent 100%
+  ) var(--shimmer-base, rgba(243, 244, 246, 1));
+  background-size: 200% 100%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --motion-duration-instant:  0ms;
+    --motion-duration-fast:     100ms;
+    --motion-duration-base:     100ms;
+    --motion-duration-moderate: 0ms;
+    --motion-duration-slow:     0ms;
+  }
+  .motion-loop-spin,
+  .motion-loop-pulse,
+  .motion-loop-shimmer { animation: none; }
+  .motion-enter,
+  .motion-exit,
+  .motion-expand,
+  .motion-transition   { transition-property: opacity; }
+  .motion-expand-rotate,
+  .motion-emphasis     { transition: none; }
+}

package/src/styles.css

@@ -0,0 +1,242 @@
+/*
+ * @sdaia/ui — Portable theme layer
+ * -----------------------------------------------------------
+ * Consumers import this file ONCE from their root stylesheet:
+ *
+ *   @import "@sdaia/ui/styles.css";
+ *
+ * It provides:
+ *   1. Responsive `--ds-*` design tokens (spacing, icons, typography)
+ *      at mobile / tablet (≥768px) / desktop (≥1280px) breakpoints.
+ *   2. A Tailwind v4 `@theme` mapping that exposes those tokens as
+ *      utility classes: `ps-spacing-3xl`, `gap-spacing-lg`,
+ *      `w-icon-md`, etc.
+ *   3. Typography utilities: `text-text-md`, `text-display-sm`, ...
+ *   4. A `dark` variant hook bound to `.dark` on any ancestor.
+ *
+ * NOTE for Tailwind v4 consumers: you must also add
+ *
+ *   @source "../node_modules/@sdaia/ui/dist";
+ *
+ * to your root CSS so Tailwind scans the shipped component code for
+ * class strings. Otherwise utilities referenced by the components
+ * will be tree-shaken out of your build.
+ * ----------------------------------------------------------- */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ── Mobile-first token defaults ─────────────────────────────── */
+:root {
+  --ds-spacing-none: 0px;
+  --ds-spacing-xxs: 2px;
+  --ds-spacing-xs: 4px;
+  --ds-spacing-sm: 6px;
+  --ds-spacing-md: 8px;
+  --ds-spacing-lg: 8px;
+  --ds-spacing-xl: 12px;
+  --ds-spacing-2xl: 12px;
+  --ds-spacing-3xl: 16px;
+  --ds-spacing-4xl: 20px;
+  --ds-spacing-5xl: 24px;
+  --ds-spacing-6xl: 32px;
+  --ds-spacing-7xl: 40px;
+  --ds-spacing-8xl: 48px;
+  --ds-spacing-9xl: 64px;
+  --ds-spacing-10xl: 80px;
+  --ds-spacing-11xl: 96px;
+
+  --ds-icon-xs: 12px;
+  --ds-icon-sm: 12px;
+  --ds-icon-ms: 16px;
+  --ds-icon-md: 16px;
+  --ds-icon-lg: 20px;
+  --ds-icon-xl: 20px;
+  --ds-icon-xxl: 24px;
+
+  --ds-typo-display-2xl: 48px;
+  --ds-typo-display-xl: 40px;
+  --ds-typo-display-lg: 32px;
+  --ds-typo-display-md: 24px;
+  --ds-typo-display-sm: 20px;
+  --ds-typo-display-xs: 18px;
+
+  --ds-typo-text-xl: 16px;
+  --ds-typo-text-lg: 14px;
+  --ds-typo-text-md: 12px;
+  --ds-typo-text-sm: 10px;
+  --ds-typo-text-xs: 8px;
+  --ds-typo-text-2xs: 8px;
+}
+
+/* ── Tablet (≥768px) ─────────────────────────────────────────── */
+@media (min-width: 768px) {
+  :root {
+    --ds-spacing-lg: 12px;
+    --ds-spacing-2xl: 16px;
+    --ds-spacing-3xl: 20px;
+    --ds-spacing-4xl: 24px;
+    --ds-spacing-5xl: 32px;
+    --ds-spacing-6xl: 40px;
+    --ds-spacing-7xl: 48px;
+    --ds-spacing-8xl: 64px;
+    --ds-spacing-9xl: 80px;
+    --ds-spacing-10xl: 96px;
+    --ds-spacing-11xl: 128px;
+
+    --ds-icon-ms: 18px;
+    --ds-icon-xl: 24px;
+    --ds-icon-xxl: 28px;
+
+    --ds-typo-display-2xl: 56px;
+    --ds-typo-display-xl: 48px;
+    --ds-typo-display-lg: 36px;
+    --ds-typo-display-md: 30px;
+    --ds-typo-display-sm: 24px;
+    --ds-typo-display-xs: 20px;
+
+    --ds-typo-text-xl: 18px;
+    --ds-typo-text-lg: 16px;
+    --ds-typo-text-md: 14px;
+    --ds-typo-text-sm: 12px;
+    --ds-typo-text-xs: 10px;
+    --ds-typo-text-2xs: 8px;
+  }
+}
+
+/* ── Desktop (≥1280px) ───────────────────────────────────────── */
+@media (min-width: 1280px) {
+  :root {
+    --ds-spacing-sm: 8px;
+    --ds-spacing-xl: 16px;
+    --ds-spacing-2xl: 20px;
+    --ds-spacing-3xl: 24px;
+    --ds-spacing-4xl: 32px;
+    --ds-spacing-5xl: 40px;
+    --ds-spacing-6xl: 48px;
+    --ds-spacing-7xl: 64px;
+    --ds-spacing-8xl: 80px;
+    --ds-spacing-9xl: 96px;
+    --ds-spacing-10xl: 128px;
+    --ds-spacing-11xl: 160px;
+
+    --ds-icon-sm: 16px;
+    --ds-icon-md: 20px;
+    --ds-icon-lg: 24px;
+    --ds-icon-xl: 28px;
+    --ds-icon-xxl: 32px;
+
+    --ds-typo-display-2xl: 72px;
+    --ds-typo-display-xl: 60px;
+    --ds-typo-display-lg: 48px;
+    --ds-typo-display-md: 36px;
+    --ds-typo-display-sm: 30px;
+    --ds-typo-display-xs: 24px;
+
+    --ds-typo-text-xl: 20px;
+    --ds-typo-text-lg: 18px;
+    --ds-typo-text-md: 16px;
+    --ds-typo-text-sm: 14px;
+    --ds-typo-text-xs: 12px;
+    --ds-typo-text-2xs: 10px;
+  }
+}
+
+/* ── Tailwind v4 theme mapping ───────────────────────────────── */
+@theme {
+  --spacing-spacing-none: var(--ds-spacing-none);
+  --spacing-spacing-xxs: var(--ds-spacing-xxs);
+  --spacing-spacing-xs: var(--ds-spacing-xs);
+  --spacing-spacing-sm: var(--ds-spacing-sm);
+  --spacing-spacing-md: var(--ds-spacing-md);
+  --spacing-spacing-lg: var(--ds-spacing-lg);
+  --spacing-spacing-xl: var(--ds-spacing-xl);
+  --spacing-spacing-2xl: var(--ds-spacing-2xl);
+  --spacing-spacing-3xl: var(--ds-spacing-3xl);
+  --spacing-spacing-4xl: var(--ds-spacing-4xl);
+  --spacing-spacing-5xl: var(--ds-spacing-5xl);
+  --spacing-spacing-6xl: var(--ds-spacing-6xl);
+  --spacing-spacing-7xl: var(--ds-spacing-7xl);
+  --spacing-spacing-8xl: var(--ds-spacing-8xl);
+  --spacing-spacing-9xl: var(--ds-spacing-9xl);
+  --spacing-spacing-10xl: var(--ds-spacing-10xl);
+  --spacing-spacing-11xl: var(--ds-spacing-11xl);
+
+  --spacing-icon-xs: var(--ds-icon-xs);
+  --spacing-icon-sm: var(--ds-icon-sm);
+  --spacing-icon-ms: var(--ds-icon-ms);
+  --spacing-icon-md: var(--ds-icon-md);
+  --spacing-icon-lg: var(--ds-icon-lg);
+  --spacing-icon-xl: var(--ds-icon-xl);
+  --spacing-icon-xxl: var(--ds-icon-xxl);
+}
+
+/* ── Responsive typography utilities ─────────────────────────── */
+@utility text-display-2xl { font-size: var(--ds-typo-display-2xl); }
+@utility text-display-xl  { font-size: var(--ds-typo-display-xl); }
+@utility text-display-lg  { font-size: var(--ds-typo-display-lg); }
+@utility text-display-md  { font-size: var(--ds-typo-display-md); }
+@utility text-display-sm  { font-size: var(--ds-typo-display-sm); }
+@utility text-display-xs  { font-size: var(--ds-typo-display-xs); }
+
+@utility text-text-xl  { font-size: var(--ds-typo-text-xl); }
+@utility text-text-lg  { font-size: var(--ds-typo-text-lg); }
+@utility text-text-md  { font-size: var(--ds-typo-text-md); }
+@utility text-text-sm  { font-size: var(--ds-typo-text-sm); }
+@utility text-text-xs  { font-size: var(--ds-typo-text-xs); }
+@utility text-text-2xs { font-size: var(--ds-typo-text-2xs); }
+
+/* ── Motion tokens ───────────────────────────────────────── */
+/*
+ * Consumed by components via data-motion="<name>" attributes.
+ * All animations respect `prefers-reduced-motion` — they collapse
+ * to instant visibility changes so content is always reachable.
+ *
+ * External consumers: the tokens and keyframes are shipped in this
+ * file so every animation works identically when the package is
+ * installed in another project.
+ */
+:root {
+  --motion-duration-fast:   150ms;
+  --motion-duration-normal: 200ms;
+  --motion-duration-slow:   300ms;
+  --motion-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-ease-in:         cubic-bezier(0.7,  0, 0.84, 0);
+  --motion-ease-inout:      cubic-bezier(0.45, 0, 0.55,  1);
+}
+
+/* ── Keyframes ───────────────────────────────────────────── */
+
+/* Opacity */
+@keyframes sdaia-fade-in  { from { opacity: 0 } to { opacity: 1 } }
+@keyframes sdaia-fade-out { from { opacity: 1 } to { opacity: 0 } }
+
+/* Slide from / to inline-end (right in LTR, left in RTL) */
+@keyframes sdaia-slide-in-end  { from { transform: translateX(100%) } to { transform: translateX(0) } }
+@keyframes sdaia-slide-out-end { from { transform: translateX(0)    } to { transform: translateX(100%) } }
+
+/* Slide from / to inline-start (left in LTR, right in RTL) */
+@keyframes sdaia-slide-in-start  { from { transform: translateX(-100%) } to { transform: translateX(0) } }
+@keyframes sdaia-slide-out-start { from { transform: translateX(0)     } to { transform: translateX(-100%) } }
+
+/* Scale + fade — modals, popovers, dropdowns */
+@keyframes sdaia-scale-in  { from { opacity: 0; transform: scale(0.96) } to { opacity: 1; transform: scale(1) } }
+@keyframes sdaia-scale-out { from { opacity: 1; transform: scale(1)    } to { opacity: 0; transform: scale(0.96) } }
+
+/* ── data-motion attribute selectors ─────────────────────── */
+
+[data-motion="fade-in"]         { animation: sdaia-fade-in         var(--motion-duration-normal) var(--motion-ease-out)  both; }
+[data-motion="fade-out"]        { animation: sdaia-fade-out        var(--motion-duration-normal) var(--motion-ease-in)   both; }
+[data-motion="slide-in-end"]    { animation: sdaia-slide-in-end    var(--motion-duration-slow)   var(--motion-ease-out)  both; }
+[data-motion="slide-out-end"]   { animation: sdaia-slide-out-end   var(--motion-duration-slow)   var(--motion-ease-in)   both; }
+[data-motion="slide-in-start"]  { animation: sdaia-slide-in-start  var(--motion-duration-slow)   var(--motion-ease-out)  both; }
+[data-motion="slide-out-start"] { animation: sdaia-slide-out-start var(--motion-duration-slow)   var(--motion-ease-in)   both; }
+[data-motion="scale-in"]        { animation: sdaia-scale-in        var(--motion-duration-normal) var(--motion-ease-out)  both; }
+[data-motion="scale-out"]       { animation: sdaia-scale-out       var(--motion-duration-normal) var(--motion-ease-in)   both; }
+
+/* ── Reduced-motion override ─────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  [data-motion] {
+    animation:  none !important;
+    transition: none !important;
+  }
+}