@techsio/ui-kit 0.41.1 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -14,18 +14,22 @@
       "import": "./dist/types/zag.js"
     },
     "./tokens": {
+      "types": "./src/tokens/styles.d.ts",
       "style": "./src/tokens/tokens-only.css",
       "default": "./src/tokens/tokens-only.css"
     },
     "./tokens-with-tailwind": {
+      "types": "./src/tokens/styles.d.ts",
       "style": "./src/tokens/index.css",
       "default": "./src/tokens/index.css"
     },
     "./theme.css": {
+      "types": "./src/tokens/styles.d.ts",
       "style": "./src/tokens/theme.css",
       "default": "./src/tokens/theme.css"
     },
     "./tokens/*": {
+      "types": "./src/tokens/styles.d.ts",
       "style": "./src/tokens/*.css",
       "default": "./src/tokens/*.css"
     },
@@ -60,6 +64,7 @@
   ],
   "scripts": {
     "build": "rslib build",
+    "check:package": "cross-env RSLIB_CHECK_OUTPUT=true rslib build && node scripts/validate-package-exports.mjs",
     "build:storybook": "storybook build",
     "dev": "rslib build --watch",
     "storybook": "storybook dev",
@@ -69,9 +74,10 @@
     "storybook:a11y": "bash scripts/storybook-a11y.sh",
     "test:components": "node scripts/run-component-tests.mjs",
     "test:components:update": "node scripts/run-component-tests.mjs --update-snapshots",
+    "test:sidebar:ssr": "bun test ./test/sidebar.ssr.bun.tsx",
     "lint:tailwind": "eslint \"**/*.{js,jsx,ts,tsx}\" --config eslint.config.js",
     "lint:tailwind:fix": "eslint \"**/*.{js,jsx,ts,tsx}\" --config eslint.config.js --fix",
-    "prepare": "pnpm build",
+    "prepare": "node -e \"if (!process.env.RSLIB_CHECK_OUTPUT) require('node:child_process').execSync('pnpm build', { stdio: 'inherit' })\"",
     "check:unused-tokens": "bun scripts/check-unused-tokens.js",
     "validate:tokens": "bun scripts/validate-token-usage.js && bun scripts/validate-token-definitions.js",
     "validate:token-usage": "bun scripts/validate-token-usage.js",
@@ -92,27 +98,29 @@
     "@tanstack/react-charts": "^0.6.5",
     "@tanstack/react-table": "^9.1.2",
     "@tanstack/react-virtual": "^3.14.8",
-    "@zag-js/accordion": "^1.41.2",
-    "@zag-js/carousel": "^1.41.2",
-    "@zag-js/checkbox": "^1.41.2",
-    "@zag-js/combobox": "^1.41.2",
-    "@zag-js/dialog": "^1.41.2",
-    "@zag-js/i18n-utils": "^1.41.2",
-    "@zag-js/menu": "^1.41.2",
-    "@zag-js/number-input": "^1.41.2",
-    "@zag-js/pagination": "^1.41.2",
-    "@zag-js/popover": "^1.41.2",
-    "@zag-js/radio-group": "^1.41.2",
-    "@zag-js/rating-group": "^1.41.2",
-    "@zag-js/react": "^1.41.2",
-    "@zag-js/select": "^1.41.2",
-    "@zag-js/slider": "^1.41.2",
-    "@zag-js/steps": "^1.41.2",
-    "@zag-js/switch": "^1.41.2",
-    "@zag-js/tabs": "^1.41.2",
-    "@zag-js/toast": "^1.41.2",
-    "@zag-js/tooltip": "^1.41.2",
-    "@zag-js/tree-view": "^1.41.2",
+    "@zag-js/accordion": "1.43.3",
+    "@zag-js/carousel": "1.43.3",
+    "@zag-js/checkbox": "1.43.3",
+    "@zag-js/combobox": "1.43.3",
+    "@zag-js/dialog": "1.43.3",
+    "@zag-js/drawer": "1.43.3",
+    "@zag-js/i18n-utils": "1.43.3",
+    "@zag-js/menu": "1.43.3",
+    "@zag-js/number-input": "1.43.3",
+    "@zag-js/pagination": "1.43.3",
+    "@zag-js/popover": "1.43.3",
+    "@zag-js/presence": "1.43.3",
+    "@zag-js/radio-group": "1.43.3",
+    "@zag-js/rating-group": "1.43.3",
+    "@zag-js/react": "1.43.3",
+    "@zag-js/select": "1.43.3",
+    "@zag-js/slider": "1.43.3",
+    "@zag-js/steps": "1.43.3",
+    "@zag-js/switch": "1.43.3",
+    "@zag-js/tabs": "1.43.3",
+    "@zag-js/toast": "1.43.3",
+    "@zag-js/tooltip": "1.43.3",
+    "@zag-js/tree-view": "1.43.3",
     "better-themes": "^1.1.0",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
@@ -125,18 +133,18 @@
     "@eslint/js": "^9.39.1",
     "@figma/code-connect": "^2.0.0",
     "@iconify/json": "^2.2.409",
-    "@rsbuild/core": "1.6.7",
-    "@rsbuild/plugin-react": "^1.4.1",
-    "@rslib/core": "^0.18.0",
+    "@rsbuild/core": "2.2.2",
+    "@rsbuild/plugin-react": "^2.1.0",
+    "@rslib/core": "^1.0.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/commit-analyzer": "^13.0.1",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.2",
     "@semantic-release/npm": "^13.1.2",
     "@semantic-release/release-notes-generator": "^14.1.0",
-    "@storybook/addon-a11y": "^10.4.4",
-    "@storybook/addon-themes": "^10.4.4",
-    "@storybook/react": "^10.4.4",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-themes": "^10.6.0",
+    "@storybook/react": "^10.6.0",
     "@storybook/test-runner": "^0.24.4",
     "@tailwindcss/postcss": "^4.1.17",
     "@techsio/storybook-a11y-reporter": "0.1.3",
@@ -144,15 +152,17 @@
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.8",
     "@typescript-eslint/parser": "^8.47.0",
+    "cross-env": "^7.0.3",
     "eslint": "^9.39.1",
     "eslint-plugin-tailwindcss": "beta",
     "glob": "^11.0.2",
     "postcss": "^8.5.6",
-    "rsbuild-plugin-publint": "^0.3.3",
+    "rsbuild-plugin-arethetypeswrong": "0.3.1",
+    "rsbuild-plugin-publint": "^1.0.0",
     "semantic-release": "^25.0.2",
-    "storybook": "^10.4.4",
-    "storybook-addon-rslib": "^3.3.4",
-    "storybook-react-rsbuild": "^3.3.4",
+    "storybook": "^10.6.0",
+    "storybook-addon-rslib": "^3.4.2",
+    "storybook-react-rsbuild": "^3.4.2",
     "tailwindcss": "^4.1.17",
     "typescript": "^5.9.3"
   },

package/src/tokens/components/components.css

@@ -23,6 +23,7 @@
 @import "./molecules/_color-select.css";
 @import "./molecules/_combobox.css";
 @import "./molecules/_dialog.css";
+@import "./molecules/_drawer.css";
 @import "./molecules/_pagination.css";
 @import "./molecules/_popover.css";
 @import "./molecules/_radio-card.css";
@@ -43,3 +44,4 @@
 @import "./organisms/_footer.css";
 @import "./organisms/_header.css";
 @import "./organisms/_gallery.css";
+@import "./organisms/_sidebar.css";

package/src/tokens/components/molecules/_drawer.css

@@ -0,0 +1,369 @@
+@theme static {
+  /* BASE COLOR MAPPING */
+  --color-drawer-surface: var(--color-fill-surface);
+  --color-drawer-foreground: var(--color-fg-primary);
+  --color-drawer-muted-foreground: var(--color-fg-secondary);
+  --color-drawer-border: var(--color-border-primary);
+  --color-drawer-overlay: var(--color-bg-scrim);
+  --color-drawer-focus: var(--color-primary);
+
+  /* DERIVED COLORS */
+  --color-drawer-content-bg: var(--color-drawer-surface);
+  --color-drawer-content-fg: var(--color-drawer-foreground);
+  --color-drawer-content-border: var(--color-drawer-border);
+  --color-drawer-title-fg: var(--color-drawer-foreground);
+  --color-drawer-description-fg: var(--color-drawer-muted-foreground);
+  --color-drawer-backdrop-bg: var(--color-drawer-overlay);
+  --color-drawer-grabber-bg: var(--color-drawer-border);
+  --color-drawer-ring: var(--color-drawer-focus);
+
+  /* SPACING */
+  --padding-drawer-header: var(--dimension-24);
+  --padding-drawer-body: var(--dimension-24);
+  --padding-drawer-footer: var(--dimension-24);
+  --padding-drawer-grabber: var(--dimension-8);
+  --spacing-drawer-bleed: var(--dimension-48);
+  --spacing-drawer-indent-offset: var(--dimension-8);
+  --gap-drawer-header: var(--dimension-8);
+  --gap-drawer-footer: var(--dimension-10);
+
+  /* TYPOGRAPHY */
+  --text-drawer-title: var(--text-md);
+  --font-weight-drawer-title: var(--font-weight-semibold);
+  --text-drawer-description: var(--text-sm);
+
+  /* BORDERS & RADIUS */
+  --border-width-drawer: var(--border-width-sm);
+  --radius-drawer-content: var(--radius-md);
+  --radius-drawer-grabber: var(--radius-full);
+
+  /* SHADOWS */
+  --shadow-drawer-content: var(--shadow-xl);
+
+  /* FOCUS RINGS */
+  --outline-drawer-focus-style: var(--default-ring-style);
+  --outline-drawer-focus-width: var(--default-ring-width);
+  --outline-drawer-focus-offset: var(--default-ring-offset);
+
+  /* MOTION */
+  --duration-drawer-backdrop-enter: 200ms;
+  --duration-drawer-backdrop-exit: 160ms;
+  --duration-drawer-enter: 240ms;
+  --duration-drawer-exit: 180ms;
+  --duration-drawer-stack: 240ms;
+
+  /* SIZES */
+  --container-drawer-xs: var(--container-xs);
+  --container-drawer-sm: var(--container-sm);
+  --container-drawer-md: var(--container-md);
+  --container-drawer-lg: var(--container-lg);
+  --container-drawer-xl: var(--container-xl);
+  --height-drawer-xs: var(--container-xs);
+  --height-drawer-sm: var(--container-sm);
+  --height-drawer-md: var(--container-md);
+  --height-drawer-lg: var(--container-lg);
+  --height-drawer-xl: var(--container-xl);
+  --height-drawer-grabber-thickness: var(--dimension-4);
+  --width-drawer-grabber-thickness: var(--dimension-4);
+  --height-drawer-grabber-length: var(--dimension-40);
+  --width-drawer-grabber-length: var(--dimension-40);
+  --height-drawer-swipe-area: var(--dimension-16);
+  --width-drawer-swipe-area: var(--dimension-16);
+
+  /* LAYERS */
+  --z-drawer-layer: 50;
+  --z-drawer-swipe-area: 49;
+}
+
+@utility token-icon-drawer-close {
+  @apply token-icon-close;
+}
+
+@utility drawer-physical-axis {
+  direction: ltr;
+}
+
+@utility drawer-focus-ring {
+  outline-color: var(--color-drawer-ring);
+  outline-offset: var(--outline-drawer-focus-offset);
+  outline-style: var(--outline-drawer-focus-style);
+  outline-width: var(--outline-drawer-focus-width);
+}
+
+@utility drawer-title-typography {
+  font-size: var(--text-drawer-title);
+}
+
+@utility drawer-description-typography {
+  font-size: var(--text-drawer-description);
+}
+
+/* Zag Presence 1.43.x completes lifecycle callbacks on animationend. */
+@keyframes drawer-enter-presence {
+  from,
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes drawer-backdrop-out {
+  from {
+    opacity: calc(1 - var(--drawer-swipe-progress, 0));
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes drawer-exit-left {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes drawer-exit-right {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes drawer-exit-up {
+  to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes drawer-exit-down {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@utility drawer-backdrop-motion {
+  opacity: calc(1 - var(--drawer-swipe-progress, 0));
+  transition-duration: calc(
+    var(--duration-drawer-backdrop-enter) *
+    var(--drawer-swipe-strength, 1)
+  );
+  transition-property: opacity;
+  transition-timing-function: ease-out;
+
+  &[data-state="open"] {
+    animation: drawer-enter-presence
+      calc(
+        var(--duration-drawer-backdrop-enter) *
+        var(--drawer-swipe-strength, 1)
+      )
+      linear;
+  }
+
+  &[data-state="closed"] {
+    animation: drawer-backdrop-out
+      calc(
+        var(--duration-drawer-backdrop-exit) *
+        var(--drawer-swipe-strength, 1)
+      )
+      ease-in both;
+  }
+
+  &[data-swiping] {
+    transition-duration: 0ms;
+  }
+
+  @starting-style {
+    &[data-state="open"]:not([data-swiping]) {
+      opacity: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0s !important;
+    transition-duration: 0s;
+  }
+}
+
+@utility drawer-content-motion {
+  translate: 0 0;
+  transition-duration: calc(
+    var(--duration-drawer-enter) *
+    var(--drawer-swipe-strength, 1)
+  );
+  transition-property: transform, translate;
+  transition-timing-function: ease-out;
+
+  &[data-state="open"] {
+    animation: drawer-enter-presence
+      calc(var(--duration-drawer-enter) * var(--drawer-swipe-strength, 1))
+      linear;
+  }
+
+  &[data-state="closed"][data-swipe-direction="left"] {
+    animation: drawer-exit-left
+      calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1))
+      ease-in both;
+  }
+
+  &[data-state="closed"][data-swipe-direction="right"] {
+    animation: drawer-exit-right
+      calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1))
+      ease-in both;
+  }
+
+  &[data-state="closed"][data-swipe-direction="up"] {
+    animation: drawer-exit-up
+      calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1))
+      ease-in both;
+  }
+
+  &[data-state="closed"][data-swipe-direction="down"] {
+    animation: drawer-exit-down
+      calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1))
+      ease-in both;
+  }
+
+  @starting-style {
+    &[data-state="open"][data-swipe-direction="left"]:not([data-swiping]) {
+      translate: -100% 0;
+    }
+
+    &[data-state="open"][data-swipe-direction="right"]:not([data-swiping]) {
+      translate: 100% 0;
+    }
+
+    &[data-state="open"][data-swipe-direction="up"]:not([data-swiping]) {
+      translate: 0 -100%;
+    }
+
+    &[data-state="open"][data-swipe-direction="down"]:not([data-swiping]) {
+      translate: 0 100%;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    animation-duration: 0s !important;
+    transition-duration: 0s !important;
+  }
+}
+
+@utility drawer-backdrop-layer {
+  z-index: calc(var(--z-drawer-layer) + var(--layer-index, 0) - 1);
+}
+
+@utility drawer-positioner-layer {
+  z-index: calc(var(--z-drawer-layer) + var(--layer-index, 0));
+}
+
+@utility drawer-content-layer {
+  z-index: calc(var(--z-drawer-layer) + var(--layer-index, 0));
+}
+
+@utility drawer-swipe-area-layer {
+  z-index: var(--z-drawer-swipe-area);
+}
+
+@utility drawer-content-bleed {
+  --drawer-bleed: var(--spacing-drawer-bleed);
+
+  &::after {
+    position: absolute;
+    background: inherit;
+    content: "";
+    pointer-events: none;
+  }
+
+  &[data-swipe-direction="up"]::after {
+    right: 0;
+    bottom: 100%;
+    left: 0;
+    height: var(--drawer-bleed);
+  }
+
+  &[data-swipe-direction="down"]::after {
+    top: 100%;
+    right: 0;
+    left: 0;
+    height: var(--drawer-bleed);
+  }
+
+  &[data-swipe-direction="left"]::after {
+    top: 0;
+    right: 100%;
+    bottom: 0;
+    width: var(--drawer-bleed);
+  }
+
+  &[data-swipe-direction="right"]::after {
+    top: 0;
+    bottom: 0;
+    left: 100%;
+    width: var(--drawer-bleed);
+  }
+}
+
+@utility drawer-content-top {
+  border-radius: 0 0 var(--radius-drawer-content) var(--radius-drawer-content);
+}
+
+@utility drawer-content-bottom {
+  border-radius: var(--radius-drawer-content) var(--radius-drawer-content) 0 0;
+}
+
+@utility drawer-content-left {
+  border-radius: 0 var(--radius-drawer-content) var(--radius-drawer-content) 0;
+}
+
+@utility drawer-content-right {
+  border-radius: var(--radius-drawer-content) 0 0 var(--radius-drawer-content);
+}
+
+@utility drawer-indent {
+  --drawer-indent-progress: clamp(0, var(--drawer-swipe-progress, 0), 1);
+
+  position: relative;
+  transform-origin: center top;
+  transition:
+    transform var(--duration-drawer-stack) ease-out,
+    border-radius var(--duration-drawer-stack) ease-out;
+  will-change: transform;
+
+  &[data-active] {
+    border-radius: calc(
+      var(--radius-drawer-content) *
+      (1 - var(--drawer-indent-progress))
+    );
+    transform: scale(calc(0.97 + 0.03 * var(--drawer-indent-progress)))
+      translateY(
+        calc(
+          var(--spacing-drawer-indent-offset) *
+          (1 - var(--drawer-indent-progress))
+        )
+      );
+  }
+
+  &[data-inactive] {
+    border-radius: 0;
+    transform: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0s;
+  }
+}
+
+@utility drawer-indent-background {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--z-drawer-layer) - 1);
+  background: var(--color-drawer-content-bg);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--duration-drawer-stack) ease-out;
+
+  &[data-active] {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0s;
+  }
+}

package/src/tokens/components/organisms/_sidebar.css

@@ -0,0 +1,93 @@
+@theme static {
+  /* BASE COLOR MAPPING */
+  --color-sidebar-surface: var(--color-fill-surface);
+  --color-sidebar-base: var(--color-base);
+  --color-sidebar-foreground: var(--color-fg-primary);
+  --color-sidebar-muted-foreground: var(--color-fg-secondary);
+  --color-sidebar-border: var(--color-border-primary);
+  --color-sidebar-interactive: var(--color-fill-overlay);
+  --color-sidebar-focus: var(--color-primary);
+
+  /* DERIVED COLORS */
+  --color-sidebar-root-bg: var(--color-sidebar-base);
+  --color-sidebar-root-fg: var(--color-sidebar-foreground);
+  --color-sidebar-panel-bg: var(--color-sidebar-surface);
+  --color-sidebar-panel-fg: var(--color-sidebar-foreground);
+  --color-sidebar-panel-border: var(--color-sidebar-border);
+  --color-sidebar-inset-bg: var(--color-sidebar-base);
+  --color-sidebar-inset-fg: var(--color-sidebar-foreground);
+  --color-sidebar-group-label-fg: var(--color-sidebar-muted-foreground);
+  --color-sidebar-pane-border: var(--color-sidebar-border);
+  --color-sidebar-separator-bg: var(--color-sidebar-border);
+  --color-sidebar-trigger-bg: transparent;
+  --color-sidebar-trigger-bg-hover: var(--color-sidebar-interactive);
+  --color-sidebar-trigger-bg-active: var(--color-sidebar-interactive);
+  --color-sidebar-trigger-fg: var(--color-sidebar-foreground);
+  --color-sidebar-rail-bg-hover: var(--color-sidebar-interactive);
+  --color-sidebar-rail-fg: var(--color-sidebar-muted-foreground);
+  --color-sidebar-rail-indicator-bg: var(--color-sidebar-border);
+  --color-sidebar-ring: var(--color-sidebar-focus);
+
+  /* RESPONSIVE CONTRACT */
+  --breakpoint-sidebar-desktop: 64rem;
+
+  /* VIEWPORT AND WIDTHS */
+  --spacing-sidebar-offset: 0rem;
+  --height-sidebar-viewport: calc(100dvh - var(--spacing-sidebar-offset));
+  --width-sidebar-expanded: var(--container-3xs);
+  --width-sidebar-icon: var(--dimension-56);
+  --container-sidebar-mobile: var(--container-2xs);
+  --width-sidebar-rail: var(--dimension-12);
+  --width-sidebar-rail-indicator: var(--dimension-2);
+  --height-sidebar-rail-indicator: var(--dimension-32);
+  --height-sidebar-separator: var(--dimension-1);
+
+  /* SPACING */
+  --padding-sidebar-section: var(--dimension-16);
+  --padding-sidebar-section-compact: var(--dimension-8);
+  --padding-sidebar-content: var(--dimension-12);
+  --padding-sidebar-content-compact: var(--dimension-8);
+  --padding-sidebar-group-label: var(--dimension-8);
+  --gap-sidebar-section: var(--dimension-8);
+  --gap-sidebar-content: var(--dimension-16);
+  --gap-sidebar-group: var(--dimension-8);
+  --gap-sidebar-group-content: var(--dimension-4);
+  --gap-sidebar-menu: var(--dimension-4);
+  --spacing-sidebar-rail: 0rem;
+
+  /* TYPOGRAPHY */
+  --text-sidebar-group-label: var(--text-xs);
+  --font-weight-sidebar-group-label: var(--font-weight-semibold);
+
+  /* BORDER, RADIUS, MOTION, LAYER */
+  --border-width-sidebar: var(--border-width-sm);
+  --radius-sidebar-rail: var(--radius-full);
+  --outline-sidebar-focus-offset: var(--default-ring-offset);
+  --outline-sidebar-focus-style: var(--default-ring-style);
+  --outline-sidebar-focus-width: var(--default-ring-width);
+  --duration-sidebar: 200ms;
+  --z-sidebar-rail: 10;
+}
+
+@utility token-icon-sidebar-trigger {
+  @apply token-icon-menu;
+}
+
+@utility token-icon-sidebar-close {
+  @apply token-icon-close;
+}
+
+@utility sidebar-focus-ring {
+  outline-color: var(--color-sidebar-ring);
+  outline-offset: var(--outline-sidebar-focus-offset);
+  outline-style: var(--outline-sidebar-focus-style);
+  outline-width: var(--outline-sidebar-focus-width);
+}
+
+@utility sidebar-group-label-typography {
+  font-size: var(--text-sidebar-group-label);
+}
+
+@utility sidebar-rail-layer {
+  z-index: var(--z-sidebar-rail);
+}

package/src/tokens/styles.d.ts

@@ -0,0 +1,3 @@
+declare const stylesheet: string
+
+export default stylesheet