@techsio/ui-kit 0.3.1 → 0.4.0

package/src/tokens/components/atoms/_icon.css

@@ -26,7 +26,6 @@
   @apply icon-[mdi-light--information];
 }
 
-
 @utility token-icon-close {
   @apply icon-[mdi--close];
 }
@@ -48,7 +47,6 @@
   @apply token-icon-info;
 }
 
-
 /* Navigation icons */
 @utility token-icon-chevron-down {
   @apply icon-[mdi--chevron-down];
@@ -67,14 +65,58 @@
 }
 
 /* Action icons */
+@utility token-icon-spinner {
+  @apply icon-[svg-spinners--ring-resize];
+}
+
+@utility token-icon-play {
+  @apply icon-[mdi--play];
+}
+
+@utility token-icon-pause {
+  @apply icon-[mdi--pause];
+}
+
+@utility token-icon-menu {
+  @apply icon-[mdi--menu];
+}
+
 @utility token-icon-plus {
   @apply icon-[mdi--plus];
 }
 
+@utility token-icon-minus {
+  @apply icon-[mdi--minus];
+}
+
 @utility token-icon-folder {
   @apply icon-[mdi--folder];
 }
 
+@utility token-icon-folder-open {
+  @apply icon-[mdi--folder-open];
+}
+
+@utility token-icon-file-document {
+  @apply icon-[mdi--file-document];
+}
+
+@utility token-icon-home {
+  @apply icon-[mdi--home];
+}
+
+@utility token-icon-shopping-bag {
+  @apply icon-[mdi--shopping];
+}
+
+@utility token-icon-cpu {
+  @apply icon-[mdi--cpu-64-bit];
+}
+
+@utility token-icon-smartphone {
+  @apply icon-[mdi--smartphone];
+}
+
 @utility token-icon-save {
   @apply icon-[mdi--content-save];
 }
@@ -103,6 +145,42 @@
   @apply icon-[mdi--check];
 }
 
+@utility token-icon-check-bold {
+  @apply icon-[mdi--check-bold];
+}
+
+@utility token-icon-check-circle {
+  @apply icon-[mdi--check-circle];
+}
+
+@utility token-icon-alert {
+  @apply icon-[mdi--alert];
+}
+
+@utility token-icon-alert-circle {
+  @apply icon-[mdi--alert-circle];
+}
+
+@utility token-icon-information {
+  @apply icon-[mdi--information];
+}
+
+@utility token-icon-ellipsis-horizontal {
+  @apply icon-[mdi--ellipsis-horizontal];
+}
+
+@utility token-icon-circle {
+  @apply icon-[mdi--circle];
+}
+
+@utility token-icon-star {
+  @apply icon-[mdi--star];
+}
+
+@utility token-icon-star-half {
+  @apply icon-[mdi--star-half];
+}
+
 /* product card icons */
 
 @utility token-icon-cart {
@@ -120,3 +198,13 @@
 @utility token-icon-search {
   @apply icon-[mdi--magnify];
 }
+
+/* Semantic action aliases decoupled from concrete icon glyphs. */
+
+@utility token-icon-increment {
+  @apply token-icon-chevron-up;
+}
+
+@utility token-icon-decrement {
+  @apply token-icon-chevron-down;
+}

package/src/tokens/components/atoms/_image.css

@@ -0,0 +1,5 @@
+@theme static {
+  --size-image-sm: 5rem;
+  --size-image-md: 10rem;
+  --size-image-lg: 15rem;
+}

package/src/tokens/components/atoms/_input.css

@@ -51,22 +51,13 @@
   --color-input-fg-disabled: var(--color-fg-disabled);
   --color-input-fg-placeholder: var(--color-fg-placeholder);
 
-  /* Label colors */
-  --color-label-fg: var(--color-input-fg);
-  --color-label-disabled: var(--color-input-fg-disabled);
-  --color-label-required: var(--color-input-danger);
-
-  /* Error/Helper/Extra colors */
-  --color-error-fg: var(--color-danger);
-  --color-helper-fg: var(--color-input-fg);
-
   /* Focus ring colors - using consistent opacity */
   --color-input-ring: var(--color-ring);
 
   /* Spacing - keeping your existing values */
-  --padding-input-sm: var(--spacing-250) var(--spacing-250);
-  --padding-input-md: var(--spacing-350) var(--spacing-250);
-  --padding-input-lg: var(--spacing-450) var(--spacing-350);
+  --padding-input-sm: var(--spacing-100) var(--spacing-100);
+  --padding-input-md: var(--spacing-150) var(--spacing-150);
+  --padding-input-lg: var(--spacing-200) var(--spacing-200);
   --padding-with-button: var(--spacing-950);
 
   /* Typography */
@@ -75,24 +66,12 @@
   --text-input-lg: var(--text-lg);
 
   /* Border */
-  --border-width-input: 1px;
-  --radius-input: var(--radius-md);
-
-  /* Label */
-
-  --font-label: var(--font-bold);
-  --text-label-sm: var(--text-input-sm);
-  --text-label-md: var(--text-input-md);
-  --text-label-lg: var(--text-input-lg);
-
-  /* Error message */
-  --text-error-sm: var(--text-input-sm);
-  --text-error-md: var(--text-input-md);
-  --text-error-lg: var(--text-input-lg);
-
-  /* Helper text / Extra text */
-  --text-helper-sm: var(--text-input-sm);
-  --text-helper-md: var(--text-input-md);
-  --text-helper-lg: var(--text-input-lg);
-  --color-helper-fg: var(--color-fg-secondary);
+  --border-width-input: 2px;
+  --radius-input: var(--radius-form-control);
+  --radius-input-sm: var(--radius-form-control-sm);
+  --radius-input-md: var(--radius-form-control-md);
+  --radius-input-lg: var(--radius-form-control-lg);
+
+  /* Form field spacing */
+  --spacing-form-field-gap: var(--spacing-50);
 }

package/src/tokens/components/atoms/_label.css

@@ -0,0 +1,11 @@
+@theme {
+  /* Label colors */
+  --color-label-fg: var(--color-input-fg);
+  --color-label-fg-disabled: var(--color-input-fg-disabled);
+  --color-label-fg-required: var(--color-input-danger);
+
+  --font-label: var(--font-bold);
+  --text-label-sm: var(--text-input-sm);
+  --text-label-md: var(--text-input-md);
+  --text-label-lg: var(--text-input-lg);
+}

package/src/tokens/components/atoms/_numeric-input.css

@@ -1,22 +1,26 @@
 @theme static {
   /* === BASE TOKEN MAPPING === */
-  --color-numeric-input-bg: var(--color-surface);
+  --color-numeric-input-bg: var(--color-form-control-bg);
   --color-numeric-input-hover: oklch(
     from var(--color-numeric-input-bg) calc(l + var(--state-hover)) c h
   );
   --color-numeric-input-focus: oklch(
-    from var(--color-numeric-input-bg) calc(l + var(--state-hover)) c h
+    from var(--color-numeric-input-bg) calc(l + var(--state-active)) c h
   );
-  --color-numeric-input-border: var(--color-input-border);
+  --color-numeric-input-border: var(--color-form-control-border);
+  --color-numeric-input-border-hover: var(--color-form-control-border-hover);
+  --color-numeric-input-border-focus: var(--color-form-control-border-focus);
   --color-numeric-input-fg: var(--color-input-fg);
 
+  --color-numeric-input-bg-disabled: var(--color-form-control-bg-disabled);
+  --color-numeric-input-fg-disabled: var(--color-form-control-fg-disabled);
+  --color-numeric-input-border-disabled: var(
+    --color-form-control-border-disabled
+  );
+
   --color-numeric-input-invalid-border: var(--color-danger);
   --color-numeric-input-invalid-bg: --alpha(var(--color-danger) / 10%);
 
-  --gap-numeric-input-root-sm: var(--spacing-150);
-  --gap-numeric-input-root-md: var(--spacing-200);
-  --gap-numeric-input-root-lg: var(--spacing-250);
-
   /* ==== TYPOGRAPHY ==== */
   --text-numeric-input-sm: var(--text-sm);
   --text-numeric-input-md: var(--text-md);
@@ -26,10 +30,12 @@
   --color-numeric-input-input-bg: transparent;
   --color-numeric-input-input-bg-hover: var(--color-numeric-input-hover);
   --color-numeric-input-input-bg-focus: var(--color-numeric-input-focus);
-  --padding-numeric-input-input: 0 0 0 var(--spacing-150);
+  --padding-numeric-input-input-sm: var(--spacing-100);
+  --padding-numeric-input-input-md: var(--spacing-150);
+  --padding-numeric-input-input-lg: var(--spacing-200);
 
   /* === TRIGGER === */
-  --color-numeric-input-trigger-container-bg: var(--color-numeric-input-bg);
+  --color-numeric-input-trigger-container-bg: var(--color-form-control-border);
   --color-numeric-input-trigger-bg: var(--color-numeric-input-bg);
   --color-numeric-input-trigger-bg-hover: oklch(
     from var(--color-numeric-input-trigger-bg) calc(l + var(--state-hover)) c h
@@ -37,11 +43,19 @@
   --color-numeric-input-trigger-fg: var(--color-numeric-input-fg);
   --color-numeric-input-trigger-fg-hover: var(--color-primary);
   --padding-numeric-input-trigger-x: var(--spacing-150);
-  --padding-numeric-input-trigger-y: var(--spacing-100);
+  --padding-numeric-input-trigger-y: 0rem;
+
+  /* === ROOT GAP === */
+  --gap-numeric-input-root-sm: 0rem;
+  --gap-numeric-input-root-md: 0rem;
+  --gap-numeric-input-root-lg: 0rem;
 
   /* === INCREMENT BUTTON === */
 
-  --radius-numeric-input: var(--radius-sm);
+  --radius-numeric-input: var(--radius-form-control);
+  --radius-numeric-input-sm: var(--radius-form-control-sm);
+  --radius-numeric-input-md: var(--radius-form-control-md);
+  --radius-numeric-input-lg: var(--radius-form-control-lg);
   --border-width-numeric-input: var(--border-width-input);
 
   /* === FOCUS RING === */
@@ -49,9 +63,9 @@
 }
 
 @utility token-icon-numeric-input-increment {
-  @apply icon-[mdi--chevron-up];
+  @apply token-icon-increment;
 }
 
 @utility token-icon-numeric-input-decrement {
-  @apply icon-[mdi--chevron-down];
+  @apply token-icon-decrement;
 }

package/src/tokens/components/atoms/_rating.css

@@ -22,9 +22,9 @@
 
 /* Semantic tokens for rating icons */
 @utility token-icon-rating {
-  @apply icon-[mdi--star];
+  @apply token-icon-star;
 }
 
 @utility token-icon-rating-half {
-  @apply icon-[mdi--star-half];
+  @apply token-icon-star-half;
 }

package/src/tokens/components/atoms/_status-text.css

@@ -0,0 +1,32 @@
+@theme {
+  /* Status colors */
+  --color-status-text-fg-error: var(--color-danger);
+  --color-status-text-fg-success: var(--color-success);
+  --color-status-text-fg-warning: var(--color-warning);
+  --color-status-text-fg-default: var(--color-fg-secondary);
+
+  /* Text sizes - inherit from input sizing */
+  --text-status-text-sm: var(--text-input-sm);
+  --text-status-text-md: var(--text-input-md);
+  --text-status-text-lg: var(--text-input-lg);
+
+  /* Icon gap - spacing between icon and text */
+  --spacing-status-text-icon-gap-sm: var(--spacing-50);
+  --spacing-status-text-icon-gap-md: var(--spacing-100);
+  --spacing-status-text-icon-gap-lg: var(--spacing-200);
+
+  --spacing-status-text-icon: var(--spacing-50);
+  --spacing-status-text-icon-long-text: var(--spacing-100);
+}
+
+@utility token-icon-status-text-success {
+  @apply token-icon-success;
+}
+
+@utility token-icon-status-text-warning {
+  @apply token-icon-warning;
+}
+
+@utility token-icon-status-text-error {
+  @apply token-icon-error;
+}

package/src/tokens/components/atoms/_textarea.css

@@ -1,8 +1,7 @@
 @theme static {
   --opacity-borderless: 60%;
   /* === BASE COLOR MAPPING === */
-  --color-textarea-base: var(--color-fill-base);
-  --color-textarea-accent: var(--color-primary);
+  --color-textarea-base: var(--color-form-control-bg);
   --color-textarea-success: var(--color-success);
   --color-textarea-warning: var(--color-warning);
   --color-textarea-danger: var(--color-danger);
@@ -17,18 +16,15 @@
 
   /* Foreground colors */
   --color-textarea-fg: var(--color-fg-primary);
-  --color-textarea-placeholder: --alpha(
-    var(--color-fg-primary) /
-    var(--opacity-placeholder)
-  );
-  --color-textarea-fg-disabled: var(--color-fg-disabled);
+  --color-textarea-placeholder: var(--color-form-control-placeholder);
+  --color-textarea-fg-disabled: var(--color-form-control-fg-disabled);
 
   /* Border colors */
-  --color-textarea-border: var(--color-border-primary);
+  --color-textarea-border: var(--color-form-control-border);
   --color-textarea-border-success: var(--color-textarea-success);
   --color-textarea-border-warning: var(--color-textarea-warning);
   --color-textarea-border-danger: var(--color-textarea-danger);
-  --color-textarea-border-disabled: var(--color-border-disabled);
+  --color-textarea-border-disabled: var(--color-form-control-border-disabled);
 
   /* === STATE VARIATIONS === */
   /* Default hover/focus states */
@@ -40,7 +36,7 @@
   );
 
   /* Border states */
-  --color-textarea-border-hover: var(--color-textarea-accent);
+  --color-textarea-border-hover: var(--color-form-control-border-hover);
   --color-textarea-border-focus: var(--color-textarea-accent);
 
   /* === VALIDATION STATES === */
@@ -72,12 +68,12 @@
   --color-textarea-bg-borderless-focus: var(--color-textarea-base);
 
   /* === DISABLED STATES === */
-  --color-textarea-bg-disabled: var(--color-bg-disabled);
+  --color-textarea-bg-disabled: var(--color-form-control-bg-disabled);
 
   /* === SPACING === */
-  --padding-textarea-sm: var(--spacing-100) var(--spacing-150);
-  --padding-textarea-md: var(--spacing-150) var(--spacing-200);
-  --padding-textarea-lg: var(--spacing-150) var(--spacing-250);
+  --padding-textarea-sm: var(--padding-input-sm);
+  --padding-textarea-md: var(--padding-input-md);
+  --padding-textarea-lg: var(--padding-input-lg);
 
   /* === TYPOGRAPHY === */
   --text-textarea-sm: var(--text-sm);
@@ -85,9 +81,11 @@
   --text-textarea-lg: var(--text-lg);
 
   /* === BORDERS & RADIUS === */
-  --border-textarea-width: 1px;
-  --radius-textarea: var(--radius-md);
+  --border-textarea-width: var(--border-width-form-control);
+  --radius-textarea: var(--radius-form-control);
+  --radius-textarea-sm: var(--radius-form-control-sm);
+  --radius-textarea-md: var(--radius-form-control-md);
 
   /* === FOCUS RING === */
-  --color-textarea-ring: var(--color-ring);
+  --color-textarea-ring: var(--color-form-control-ring);
 }

package/src/tokens/components/components.css

@@ -1,7 +1,13 @@
+@import "./_form-control.css";
+
 @import "./atoms/_badge.css";
 @import "./atoms/_button.css";
+@import "./atoms/_status-text.css";
+@import "./atoms/_checkbox.css";
 @import "./atoms/_icon.css";
+@import "./atoms/_image.css";
 @import "./atoms/_input.css";
+@import "./atoms/_label.css";
 @import "./atoms/_numeric-input.css";
 @import "./atoms/_rating.css";
 @import "./atoms/_skeleton.css";
@@ -11,18 +17,20 @@
 @import "./molecules/_accordion.css";
 @import "./molecules/_breadcrumb.css";
 @import "./molecules/_carousel.css";
-@import "./molecules/_checkbox.css";
 @import "./molecules/_color-select.css";
 @import "./molecules/_combobox.css";
 @import "./molecules/_dialog.css";
 @import "./molecules/_pagination.css";
 @import "./molecules/_popover.css";
+@import "./molecules/_radio-card.css";
+@import "./molecules/_radio-group.css";
 @import "./molecules/_menu.css";
 @import "./molecules/_tabs.css";
 @import "./molecules/_product-card.css";
 @import "./molecules/_slider.css";
 @import "./molecules/_search-form.css";
 @import "./molecules/_select.css";
+@import "./molecules/_phone-input.css";
 @import "./molecules/_steps.css";
 @import "./molecules/_switch.css";
 @import "./molecules/_toast.css";
@@ -31,3 +39,4 @@
 @import "./organisms/_table.css";
 @import "./organisms/_footer.css";
 @import "./organisms/_header.css";
+@import "./organisms/_gallery.css";

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

@@ -2,7 +2,6 @@
   /* === BASE COLOR MAPPING === */
   --color-accordion-base: var(--color-surface);
   --color-accordion-border: var(--color-border-primary);
-  --color-accordion-accent: var(--color-primary);
 
   /* === DERIVED COLORS === */
   /* Background colors */
@@ -31,9 +30,6 @@
   /* === VALIDATION STATES === */
   /* Validation states will be added here when needed */
 
-  /* === DISABLED STATES === */
-  --color-accordion-fg-disabled: var(--color-fg-disabled);
-
   /* === SPACING === */
   --padding-accordion-title-sm: var(--spacing-100) var(--spacing-150);
   --padding-accordion-title-md: var(--spacing-150) var(--spacing-200);
@@ -71,12 +67,9 @@
   --shadow-accordion-root-md: var(--shadow-xl);
   --shadow-accordion-content-sm: var(--shadow-sm);
   --shadow-accordion-content-md: var(--shadow-primary);
-
-  /* === FOCUS RINGS === */
-  --color-accordion-ring: var(--color-ring);
 }
 
 /* Semantic tokens for accordion icons */
 @utility token-icon-accordion-chevron {
-  @apply icon-[mdi--chevron-down];
+  @apply token-icon-chevron-down;
 }

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

@@ -1,44 +1,66 @@
 @theme static {
   /* === BASE COLOR MAPPING === */
-  /* Reference layer - single source of truth for theming */
-  --color-breadcrumb: var(--color-surface);
+  --color-breadcrumb-base: var(--color-surface);
   --color-breadcrumb-accent: var(--color-primary);
+  --color-breadcrumb-muted: var(--color-fg-secondary);
 
   /* === DERIVED COLORS === */
-  /* Background colors */
-  --color-breadcrumb-bg: var(--color-breadcrumb);
-
-  /* Foreground colors */
-  --color-breadcrumb-fg: var(--color-fg-primary);
-  --color-breadcrumb-fg-secondary: var(--color-fg-secondary);
-  --color-breadcrumb-fg-current: var(--color-breadcrumb-accent);
-
-  /* Slot-specific colors */
-  --color-breadcrumb-item-fg: var(--color-breadcrumb-fg);
-  --color-breadcrumb-separator-fg: var(--color-breadcrumb-fg-secondary);
-  --color-breadcrumb-ellipsis-fg: var(--color-breadcrumb-fg-secondary);
+  --color-breadcrumb-bg: var(--color-breadcrumb-base);
+  --color-breadcrumb-list-fg: var(--color-fg-primary);
+  --color-breadcrumb-item-fg: var(--color-fg-primary);
+  --color-breadcrumb-link-fg: var(--color-fg-primary);
+  --color-breadcrumb-current-link-fg: var(--color-breadcrumb-accent);
+  --color-breadcrumb-separator-fg: var(--color-breadcrumb-muted);
+  --color-breadcrumb-ellipsis-fg: var(--color-breadcrumb-muted);
 
   /* === STATE VARIATIONS === */
-  --color-breadcrumb-fg-hover: var(--color-breadcrumb-accent);
+  --color-breadcrumb-link-fg-hover: var(--color-breadcrumb-accent);
 
   /* === SPACING === */
-  --spacing-breadcrumb-sm: var(--spacing-100);
-  --spacing-breadcrumb-md: var(--spacing-150);
-  --spacing-breadcrumb-lg: var(--spacing-200);
+  --padding-breadcrumb-root-sm: var(--spacing-100);
+  --padding-breadcrumb-root-md: var(--spacing-150);
+  --padding-breadcrumb-root-lg: var(--spacing-200);
+
+  --gap-breadcrumb-list-sm: var(--spacing-100);
+  --gap-breadcrumb-list-md: var(--spacing-150);
+  --gap-breadcrumb-list-lg: var(--spacing-200);
+
+  --gap-breadcrumb-link-sm: var(--spacing-100);
+  --gap-breadcrumb-link-md: var(--spacing-150);
+  --gap-breadcrumb-link-lg: var(--spacing-200);
+
+  --gap-breadcrumb-separator-sm: var(--spacing-100);
+  --gap-breadcrumb-separator-md: var(--spacing-150);
+  --gap-breadcrumb-separator-lg: var(--spacing-200);
 
   /* === TYPOGRAPHY === */
   --text-breadcrumb-sm: var(--text-xs);
   --text-breadcrumb-md: var(--text-sm);
   --text-breadcrumb-lg: var(--text-md);
 
+  --text-breadcrumb-icon-sm: var(--text-breadcrumb-sm);
+  --text-breadcrumb-icon-md: var(--text-breadcrumb-md);
+  --text-breadcrumb-icon-lg: var(--text-breadcrumb-lg);
+
+  --text-breadcrumb-separator-icon-sm: var(--text-breadcrumb-sm);
+  --text-breadcrumb-separator-icon-md: var(--text-breadcrumb-md);
+  --text-breadcrumb-separator-icon-lg: var(--text-breadcrumb-lg);
+
+  --text-breadcrumb-ellipsis-icon-sm: var(--text-breadcrumb-sm);
+  --text-breadcrumb-ellipsis-icon-md: var(--text-breadcrumb-md);
+  --text-breadcrumb-ellipsis-icon-lg: var(--text-breadcrumb-lg);
+
+  /* === BORDERS & RADIUS === */
+  --radius-breadcrumb-link: var(--radius-sm);
+
   /* === FOCUS RINGS === */
   --color-breadcrumb-ring: var(--color-ring);
 }
 
 @utility token-icon-breadcrumb-separator {
-  @apply icon-[mdi--chevron-right];
+  @apply token-icon-chevron-right;
 }
 
 @utility token-icon-breadcrumb-ellipsis {
-  @apply icon-[mdi--ellipsis-horizontal];
+  @apply token-icon-ellipsis-horizontal;
 }

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

@@ -64,9 +64,17 @@
 }
 
 @utility token-icon-carousel-prev {
-  @apply icon-[mdi--chevron-left];
+  @apply token-icon-chevron-left;
 }
 
 @utility token-icon-carousel-next {
-  @apply icon-[mdi--chevron-right];
+  @apply token-icon-chevron-right;
 }
+
+@utility token-icon-carousel-play {
+  @apply token-icon-play;
+}
+
+@utility token-icon-carousel-pause {
+  @apply token-icon-pause;
+}

package/src/tokens/components/molecules/_color-select.css

@@ -12,7 +12,7 @@
 
 @theme static {
   /* === DERIVED COLORS === */
-  --color-color-select-accent: var(--color-primary);
+  --color-color-select-accent: var(--color-fg-primary);
   --color-color-select-border: var(--color-highlight);
   --color-color-select-border-hover: var(--color-color-select-accent);
   --color-color-select-selected: var(--color-color-select-accent);
@@ -25,7 +25,7 @@
   --spacing-color-select-group-sm: var(--spacing-100);
   --spacing-color-select-group-md: var(--spacing-200);
   --spacing-color-select-group-lg: var(--spacing-300);
-
+  
   --spacing-color-select-sm: var(--spacing-250);
   --spacing-color-select-md: var(--spacing-350);
   --spacing-color-select-lg: var(--spacing-450);
@@ -49,7 +49,7 @@
 }
 
 @utility token-icon-color-select {
-  @apply icon-[mdi--check-bold];
+  @apply token-icon-check-bold;
 }
 
 @utility select-disabled {