@ztwoint/z-ui 0.1.8

package/README.md

@@ -0,0 +1,24 @@
+# Z2Data UI Library
+
+A modern React UI component library built with TypeScript, Vite, and Tailwind CSS.
+
+## Features
+
+- 🚀 Built with React 18 and TypeScript
+- 🎨 Styled with Tailwind CSS
+- 📦 Tree-shakeable ES modules
+- 📚 Storybook documentation
+- 🎮 Interactive playground for development
+- 🔧 Fully customizable components
+- 🧪 Comprehensive test suite with Vitest
+
+## Installation
+
+```bash
+npm install @ztwoint/z-ui
+# or
+yarn add @ztwoint/z-ui
+```
+> Note: To use this package on a remote server, you need to set up an SSH key with access to this repository.
+
+This package will be published to npm registry later.

package/dist/css/config/colors/backgrounds.css

@@ -0,0 +1,20 @@
+/* neutral */
+@utility bg-neutral-default {
+  background-color: var(--color-neutral-00);
+}
+
+@utility bg-neutral-secondary {
+  background-color: var(--color-neutral-50);
+}
+
+@utility bg-neutral-elevated {
+  background-color: var(--color-neutral-75);
+}
+
+@utility bg-neutral-attention {
+  background-color: var(--color-neutral-200);
+}
+
+@utility bg-neutral-transparent {
+  background-color: var(--color-alpha-white-00);
+}

package/dist/css/config/colors/components/alert.css

@@ -0,0 +1,83 @@
+/* NEUTRAL */
+.c-alert-neutral-stroke {
+  border-color: var(--color-alpha-white-50);
+}
+
+.c-alert-neutral-bg {
+  background-color: var(--color-surface-neutral-default);
+}
+
+.c-alert-neutral-icon {
+  fill: var(--color-shape-neutral-default);
+}
+
+.c-alert-neutral-subtitle {
+  color: var(--color-subtitle-primary);
+}
+
+.c-alert-neutral-body {
+  color: var(--color-subtitle-secondary);
+}
+
+/* WARNING */
+.c-alert-warning-stroke {
+  border-color: var(--color-warning-200);
+}
+
+.c-alert-warning-bg {
+  background-color: var(--color-warning-50);
+}
+
+.c-alert-warning-icon {
+  fill: var(--color-warning-600);
+}
+
+.c-alert-warning-subtitle {
+  color: var(--color-warning-950);
+}
+
+.c-alert-warning-body {
+  color: rgba(69, 44, 3, 0.8);
+}
+
+/* DANGER */
+.c-alert-danger-stroke {
+  border-color: var(--color-danger-200);
+}
+
+.c-alert-danger-bg {
+  background-color: var(--color-danger-50);
+}
+
+.c-alert-danger-icon {
+  fill: var(--color-danger-600);
+}
+
+.c-alert-danger-subtitle {
+  color: var(--color-danger-950);
+}
+
+.c-alert-danger-body {
+  color: rgba(62, 20, 17, 0.8);
+}
+
+/* DESTRUCTIVE */
+.c-alert-destructive-stroke {
+  border-color: var(--color-danger-600);
+}
+
+.c-alert-destructive-bg {
+  background-color: var(--color-danger-100);
+}
+
+.c-alert-destructive-icon {
+  fill: var(--color-danger-600);
+}
+
+.c-alert-destructive-subtitle {
+  color: var(--color-danger-600);
+}
+
+.c-alert-destructive-body {
+  color: rgba(62, 20, 17, 0.8);
+}

package/dist/css/config/colors/components/avatar.css

@@ -0,0 +1,53 @@
+/* blue */
+.c-avatar-blue-surface {
+  background-color: var(--color-accent-100);
+}
+
+.c-avatar-blue-name {
+  color: var(--color-accent-950);
+}
+
+/* red */
+.c-avatar-red-surface {
+  background-color: var(--color-danger-100);
+}
+
+.c-avatar-red-name {
+  color: var(--color-danger-950);
+}
+
+/* yellow */
+.c-avatar-yellow-surface {
+  background-color: var(--color-warning-100);
+}
+
+.c-avatar-yellow-name {
+  color: var(--color-warning-950);
+}
+
+/* green */
+.c-avatar-green-surface {
+  background-color: var(--color-success-100);
+}
+
+.c-avatar-green-name {
+  color: var(--color-success-950);
+}
+
+/* purple */
+.c-avatar-purple-surface {
+  background-color: var(--color-purple-100);
+}
+
+.c-avatar-purple-name {
+  color: var(--color-purple-950);
+}
+
+/* sky */
+.c-avatar-sky-surface {
+  background-color: var(--color-sky-100);
+}
+
+.c-avatar-sky-name {
+  color: var(--color-sky-950);
+}

package/dist/css/config/colors/components/badge.css

@@ -0,0 +1,137 @@
+/* FILLED (background-color) */
+.c-badge-gray {
+  background-color: var(--color-neutral-900);
+}
+.c-badge-accent {
+  background-color: var(--color-accent-600);
+}
+.c-badge-danger {
+  background-color: var(--color-danger-600);
+}
+.c-badge-success {
+  background-color: var(--color-success-600);
+}
+.c-badge-warning {
+  background-color: var(--color-warning-600);
+}
+.c-badge-purple {
+  background-color: var(--color-purple-600);
+}
+.c-badge-sky {
+  background-color: var(--color-sky-600);
+}
+
+/* LIGHT (background-color) */
+.c-badge-gray-light {
+  background-color: var(--color-gray-25);
+}
+.c-badge-accent-light {
+  background-color: var(--color-accent-50);
+}
+.c-badge-danger-light {
+  background-color: var(--color-danger-50);
+}
+.c-badge-success-light {
+  background-color: var(--color-success-50);
+}
+.c-badge-warning-light {
+  background-color: var(--color-warning-50);
+}
+.c-badge-purple-light {
+  background-color: var(--color-purple-50);
+}
+.c-badge-sky-light {
+  background-color: var(--color-sky-50);
+}
+
+/* STROKE (border-color) */
+.c-badge-stroke-gray {
+  border-color: var(--color-gray-150);
+}
+.c-badge-stroke-accent {
+  border-color: var(--color-accent-100);
+}
+.c-badge-stroke-danger {
+  border-color: var(--color-danger-100);
+}
+.c-badge-stroke-success {
+  border-color: var(--color-success-100);
+}
+.c-badge-stroke-warning {
+  border-color: var(--color-warning-100);
+}
+.c-badge-stroke-purple {
+  border-color: var(--color-purple-100);
+}
+.c-badge-stroke-sky {
+  border-color: var(--color-sky-100);
+}
+
+/* TEXT (color) */
+.c-badge-text-gray {
+  color: var(--color-neutral-600);
+}
+.c-badge-text-accent {
+  color: var(--color-accent-600);
+}
+.c-badge-text-danger {
+  color: var(--color-danger-600);
+}
+.c-badge-text-success {
+  color: var(--color-success-600);
+}
+.c-badge-text-warning {
+  color: var(--color-warning-600);
+}
+.c-badge-text-purple {
+  color: var(--color-purple-600);
+}
+.c-badge-text-sky {
+  color: var(--color-sky-600);
+}
+
+/* SHAPE (fill) */
+.c-badge-shape-fill-gray {
+  fill: var(--color-neutral-600);
+}
+.c-badge-shape-fill-accent {
+  fill: var(--color-accent-600);
+}
+.c-badge-shape-fill-danger {
+  fill: var(--color-danger-600);
+}
+.c-badge-shape-fill-success {
+  fill: var(--color-success-600);
+}
+.c-badge-shape-fill-warning {
+  fill: var(--color-warning-600);
+}
+.c-badge-shape-fill-purple {
+  fill: var(--color-purple-600);
+}
+.c-badge-shape-fill-sky {
+  fill: var(--color-sky-600);
+}
+
+/* SHAPE (background-color) */
+.c-badge-shape-bg-gray {
+  background-color: var(--color-neutral-600);
+}
+.c-badge-shape-bg-accent {
+  background-color: var(--color-accent-600);
+}
+.c-badge-shape-bg-danger {
+  background-color: var(--color-danger-600);
+}
+.c-badge-shape-bg-success {
+  background-color: var(--color-success-600);
+}
+.c-badge-shape-bg-warning {
+  background-color: var(--color-warning-600);
+}
+.c-badge-shape-bg-purple {
+  background-color: var(--color-purple-600);
+}
+.c-badge-shape-bg-sky {
+  background-color: var(--color-sky-600);
+}

package/dist/css/config/colors/components/button.css

@@ -0,0 +1,93 @@
+/* Button utility classes for Tailwind CSS */
+
+/* Type: Filled Style : Neutral */
+@utility button-primary-neutral-surface-default {
+  background-color: var(--color-neutral-950);
+}
+
+@utility button-primary-neutral-surface-hover {
+  background-color: var(--color-neutral-900);
+}
+
+@utility button-primary-neutral-surface-pressed {
+  background-color: var(--color-neutral-500);
+}
+
+@utility button-primary-neutral-surface-disabled {
+  background-color: var(--color-neutral-50);
+}
+
+/* Type: Filled Style : Brand */
+@utility button-primary-brand-surface-default {
+  background-color: var(--color-accent-600);
+}
+
+@utility button-primary-brand-surface-hover {
+  background-color: var(--color-accent-700);
+}
+
+@utility button-primary-brand-surface-pressed {
+  background-color: var(--color-accent-500);
+}
+
+@utility button-primary-brand-surface-disabled {
+  background-color: var(--color-neutral-50);
+}
+
+/* Type : Filled Style : Danger */
+@utility button-primary-danger-surface-default {
+  background-color: var(--color-rose-600);
+}
+
+@utility button-primary-danger-surface-hover {
+  background-color: var(--color-rose-700);
+}
+
+@utility button-primary-danger-surface-pressed {
+  background-color: var(--color-rose-500);
+}
+
+@utility button-primary-danger-surface-disabled {
+  background-color: var(--color-neutral-50);
+}
+
+/* Type : Stroke Style : Neutral */
+@utility button-secondary-surface-default {
+  background-color: var(--color-neutral-00);
+}
+
+@utility button-secondary-surface-hover {
+  background-color: var(--color-neutral-50);
+}
+
+@utility button-secondary-surface-pressed {
+  background-color: var(--color-neutral-100);
+}
+
+@utility button-secondary-surface-disabled {
+  background-color: var(--color-neutral-50);
+}
+
+/* Text utility classes */
+@utility text-default-primary {
+  color: var(--color-neutral-950);
+}
+
+@utility text-default-secondary {
+  color: var(--color-neutral-600);
+}
+
+@utility text-default-disabled {
+  color: var(--color-neutral-400);
+}
+
+@utility text-default-danger {
+  color: var(--color-rose-600);
+}
+
+/* Shadow utility class */
+@utility shadown-default {
+  box-shadow:
+    0px 1px 2px 0px var(--color-alpha-dark-50),
+    0px 0px 0px var(0.5px) var(--color-neutral-150);
+}

package/dist/css/config/colors/components/checkbox.css

@@ -0,0 +1,7 @@
+.c-checkbox {
+  border-color: var(--color-neutral-200);
+}
+
+.c-checkbox-hover {
+  border-color: var(--color-neutral-300);
+}

package/dist/css/config/colors/components/featured-icon.css

@@ -0,0 +1,80 @@
+/* blue */
+.c-featured-icon-surface {
+  fill: var(--color-accent-100);
+}
+
+.c-featured-icon-icon {
+  fill: var(--color-accent-950);
+}
+
+.c-featured-icon-bg-icon {
+  background-color: var(--color-accent-950);
+}
+
+/* red */
+.c-featured-icon-surface {
+  fill: var(--color-danger-100);
+}
+
+.c-featured-icon-icon {
+  fill: var(--color-danger-950);
+}
+
+.c-featured-icon-bg-icon {
+  background-color: var(--color-danger-950);
+}
+
+/* yellow */
+.c-featured-icon-surface {
+  fill: var(--color-warning-100);
+}
+
+.c-featured-icon-icon {
+  fill: var(--color-warning-950);
+}
+
+.c-featured-icon-bg-icon {
+  background-color: var(--color-warning-950);
+}
+
+/* green */
+.c-featured-icon-surface {
+  fill: var(--color-success-100);
+}
+
+.c-featured-icon-icon {
+  fill: var(--color-success-950);
+}
+
+.c-featured-icon-bg-icon {
+  background-color: var(--color-success-950);
+}
+
+/* purple */
+.c-featured-icon-surface {
+  fill: var(--color-purple-100);
+}
+
+.c-featured-icon-icon {
+  fill: var(--color-purple-950);
+  &:icon {
+    padding: 40px;
+  }
+}
+
+.c-featured-icon-bg-icon {
+  background-color: var(--color-purple-950);
+}
+
+/* sky */
+.c-featured-icon-surface {
+  fill: var(--color-sky-100);
+}
+
+.c-featured-icon-icon {
+  fill: var(--color-sky-950);
+}
+
+.c-featured-icon-bg-icon {
+  background-color: var(--color-sky-950);
+}

package/dist/css/config/colors/components/progress-bar.css

@@ -0,0 +1,7 @@
+.c-progress-bar {
+  background-color: var(--color-neutral-200);
+}
+
+.c-progress-bar-active {
+  background-color: var(--color-accent-600);
+}

package/dist/css/config/colors/components/radio-button.css

@@ -0,0 +1,7 @@
+.c-radio-button {
+  border-color: var(--color-neutral-200);
+}
+
+.c-radio-button-hover {
+  border-color: var(--color-neutral-300);
+}

package/dist/css/config/colors/components/scroll-overlay.css

@@ -0,0 +1,17 @@
+/* white */
+.c-scroll-overlay-white {
+  background-color: var(--color-neutral-00);
+}
+
+.c-scroll-overlay-white-transparent {
+  background-color: rgba(255, 255, 255, 0);
+}
+
+/* secondary */
+.c-scroll-overlay-secondary {
+  background-color: var(--color-neutral-25);
+}
+
+.c-scroll-overlay-secondary-transparent {
+  background-color: rgba(249, 250, 250, 0);
+}

package/dist/css/config/colors/components/tab.css

@@ -0,0 +1,60 @@
+/* Tab component specific styles */
+
+/* Base underline for all tabs */
+[data-slot='tabs-trigger'] {
+  position: relative;
+}
+
+[data-slot='tabs-trigger']::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  transform: translateX(-50%);
+  width: calc(100% - 24px);
+  border-bottom: 0.5px solid #000000;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 10;
+}
+
+/* Active state for underline */
+[data-slot='tabs-trigger'][data-state='active']::after {
+  opacity: 1;
+}
+
+/* Active state for text */
+[data-slot='tabs-trigger'][data-state='active'] .tab-label {
+  color: var(--color-neutral-950) !important;
+}
+
+/* Active state for text */
+[data-slot='tabs-trigger'][data-state='active'] .tab-icon {
+  color: var(--color-neutral-950) !important;
+}
+
+/* Inactive state for text */
+[data-slot='tabs-trigger']:not([data-state='active']) .tab-label {
+  color: var(--color-neutral-600) !important;
+}
+
+/* Inactive state for text */
+[data-slot='tabs-trigger']:not([data-state='active']) .tab-icon {
+  color: var(--color-neutral-600) !important;
+}
+
+/* Icon size enforcement */
+[data-slot='tabs-trigger'] svg {
+  width: 14px !important;
+  height: 14px !important;
+}
+
+/* Hover state for text */
+[data-slot='tabs-trigger']:hover .tab-label {
+  color: var(--color-neutral-950) !important;
+}
+
+/* Hover state for icon */
+[data-slot='tabs-trigger']:hover .tab-icon {
+  color: var(--color-neutral-950) !important;
+}

package/dist/css/config/colors/components/text-button.css

@@ -0,0 +1,67 @@
+/* neutral */
+.c-text-button-neutral {
+  color: var(--color-neutral-950);
+}
+
+.c-text-button-neutral-hover {
+  color: var(--color-neutral-600);
+}
+
+.c-text-button-neutral-pressed {
+  color: var(--color-neutral-400);
+}
+
+.c-text-button-neutral-disabled {
+  color: var(--color-neutral-400);
+}
+
+/* accent */
+.c-text-button-accent {
+  color: var(--color-accent-600);
+}
+
+.c-text-button-accent-hover {
+  color: var(--color-accent-800);
+}
+
+.c-text-button-accent-pressed {
+  color: var(--color-accent-400);
+}
+
+.c-text-button-accent-disabled {
+  color: var(--color-neutral-400);
+}
+
+/* danger */
+.c-text-button-danger {
+  color: var(--color-danger-600);
+}
+
+.c-text-button-danger-hover {
+  color: var(--color-danger-800);
+}
+
+.c-text-button-danger-pressed {
+  color: var(--color-danger-400);
+}
+
+.c-text-button-danger-disabled {
+  color: var(--color-neutral-400);
+}
+
+/* success */
+.c-text-button-success {
+  color: var(--color-success-600);
+}
+
+.c-text-button-success-hover {
+  color: var(--color-success-800);
+}
+
+.c-text-button-success-pressed {
+  color: var(--color-success-400);
+}
+
+.c-text-button-success-disabled {
+  color: var(--color-neutral-400);
+}

package/dist/css/config/colors/components/toggle-switch.css

@@ -0,0 +1,3 @@
+.c-toggle-switch-surface {
+  background-color: var(--color-neutral-75);
+}

package/dist/css/config/colors/components/toggle.css

@@ -0,0 +1,25 @@
+/* surface */
+.c-toggle-surface {
+  background-color: var(--color-neutral-200);
+}
+
+.c-toggle-surface-unactive-hover {
+  background-color: var(--color-neutral-300);
+}
+
+.c-toggle-surface-active {
+  background-color: var(--color-accent-600);
+}
+
+.c-toggle-surface-active-hover {
+  background-color: var(--color-accent-700);
+}
+
+/* knob */
+.c-toggle-knob {
+  background-color: var(--color-neutral-00);
+}
+
+.c-toggle-knob-disabled {
+  background-color: var(--color-neutral-300);
+}