sdaia-ui 1.0.1 → 1.0.2

package/src/lib/cn.ts

@@ -1,42 +0,0 @@
-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

@@ -1,120 +0,0 @@
-/**
- * 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

@@ -1,242 +0,0 @@
-/*
- * @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;
-  }
-}