@techsio/ui-kit 0.54.0 → 0.54.1

package/dist/atoms/button.js

@@ -6,7 +6,8 @@ const buttonVariants = tv({
         "relative",
         "inline-flex cursor-pointer items-center justify-center",
         "font-medium",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
+        "motion-safe:not-disabled:active:scale-97",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-button-ring",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
@@ -265,7 +266,7 @@ function Button({ variant, theme, size, block, isLoading, loadingText, icon, ico
         children: isLoading ? /*#__PURE__*/ jsxs(Fragment, {
             children: [
                 /*#__PURE__*/ jsx(Icon, {
-                    className: "mr-2",
+                    className: "me-2",
                     icon: "token-icon-button-spinner"
                 }),
                 loadingText || children

package/dist/atoms/checkbox.js

@@ -23,7 +23,7 @@ const checkboxVariants = tv({
         "disabled:checked:bg-checkbox-bg-disabled",
         "disabled:checked:text-checkbox-fg-disabled",
         "disabled:checked:border-checkbox-border-disabled",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-checkbox-ring-focus",
         "focus-visible:outline-offset-(length:--default-ring-offset)",

package/dist/atoms/input.js

@@ -10,13 +10,17 @@ const inputVariants = tv({
         "placeholder:text-input-fg-placeholder",
         "border-(length:--border-width-input) border-input-border-base",
         "rounded-input",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
         "hover:border-input-border-hover hover:bg-input-bg-hover",
         "focus:border-input-border-focus focus:bg-input-bg-focus",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-input-ring",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
-        "disabled:cursor-not-allowed disabled:hover:bg-input-bg-disabled"
+        "disabled:cursor-not-allowed disabled:hover:bg-input-bg-disabled",
+        "user-invalid:border-(length:--border-width-validation)",
+        "user-invalid:border-input-border-danger-base",
+        "user-invalid:hover:border-input-border-danger-hover",
+        "user-invalid:focus:border-input-border-danger-focus"
     ],
     variants: {
         size: {

package/dist/atoms/numeric-input.js

@@ -13,7 +13,7 @@ const numericInputVariants = tv({
         container: [
             "group form-control-base relative flex",
             "border-numeric-input-border",
-            "items-center overflow-hidden",
+            "min-w-0 items-center overflow-clip",
             "hover:border-numeric-input-border-hover",
             "focus-within:border-numeric-input-border-focus",
             "data-disabled:bg-numeric-input-bg-disabled",
@@ -37,7 +37,7 @@ const numericInputVariants = tv({
             "hover:bg-numeric-input-input-bg-hover",
             "disabled:hover:bg-numeric-input-input-bg",
             "disabled:cursor-not-allowed",
-            "focus-visible:outline-none",
+            "focus-visible:outline-hidden",
             "duration-0 data-invalid:focus:border-input-border-danger-focus"
         ],
         triggerContainer: [
@@ -61,19 +61,19 @@ const numericInputVariants = tv({
                 root: "gap-numeric-input-sm text-numeric-input-sm",
                 container: "h-form-control-sm rounded-numeric-input-sm",
                 trigger: "text-numeric-input-sm",
-                input: "pl-numeric-input-input-sm text-numeric-input-sm"
+                input: "ps-numeric-input-input-sm text-numeric-input-sm"
             },
             md: {
                 root: "gap-numeric-input-md text-numeric-input-md",
                 container: "h-form-control-md rounded-numeric-input-md",
                 trigger: "text-numeric-input-md",
-                input: "pl-numeric-input-input-md text-numeric-input-md"
+                input: "ps-numeric-input-input-md text-numeric-input-md"
             },
             lg: {
                 root: "gap-numeric-input-lg text-numeric-input-lg",
                 container: "h-form-control-lg rounded-numeric-input-lg",
                 trigger: "text-numeric-input-lg",
-                input: "pl-numeric-input-input-lg text-numeric-input-lg"
+                input: "ps-numeric-input-input-lg text-numeric-input-lg"
             }
         }
     },

package/dist/atoms/skeleton.js

@@ -4,7 +4,7 @@ import { tv } from "../utils.js";
 const skeletonVariants = tv({
     slots: {
         root: [
-            "relative overflow-hidden"
+            "relative min-w-0 overflow-clip"
         ],
         rectangle: "w-full",
         circle: [

package/dist/atoms/textarea.js

@@ -10,13 +10,17 @@ const textareaVariants = tv({
         "placeholder:text-textarea-fg-placeholder",
         "border-(length:--border-width-textarea) border-textarea-border",
         "rounded-textarea",
-        "transition-all duration-200 motion-reduce:transition-none",
+        "transition duration-200 motion-reduce:transition-none",
         "hover:border-textarea-border-hover hover:bg-textarea-bg-hover",
         "focus:border-textarea-border-focus focus:bg-textarea-bg-focus",
         "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
         "focus-visible:outline-textarea-ring",
         "focus-visible:outline-offset-(length:--default-ring-offset)",
-        "disabled:pointer-events-none disabled:border-textarea-border-disabled disabled:bg-textarea-bg-disabled disabled:text-textarea-fg-disabled"
+        "disabled:pointer-events-none disabled:border-textarea-border-disabled disabled:bg-textarea-bg-disabled disabled:text-textarea-fg-disabled",
+        "user-invalid:border-(length:--border-width-validation)",
+        "user-invalid:border-textarea-border-danger-base",
+        "user-invalid:hover:border-textarea-border-danger-hover",
+        "user-invalid:focus:border-textarea-border-danger-focus"
     ],
     variants: {
         variant: {

package/dist/internal/organisms/sidebar.styles.js

@@ -9,7 +9,7 @@ const sidebarVariants = tv({
         desktopPanel: [
             "group/sidebar-panel sticky top-sidebar-offset hidden h-sidebar-viewport shrink-0 flex-col overflow-hidden",
             "sidebar-desktop:flex bg-sidebar-panel-bg text-sidebar-panel-fg",
-            "border-sidebar-panel-border transition-all duration-(--duration-sidebar) motion-reduce:transition-none",
+            "border-sidebar-panel-border transition-[width,background-color,border-color] duration-(--duration-sidebar) motion-reduce:transition-none",
             "focus-visible:sidebar-focus-ring",
             "data-[side=start]:border-e-(length:--border-width-sidebar)",
             "data-[side=end]:border-s-(length:--border-width-sidebar)"

package/dist/molecules/accordion.js

@@ -10,8 +10,7 @@ const accordionVariants = tv({
         root: [
             "flex w-full flex-col",
             "rounded-accordion bg-accordion-bg",
-            "transition-all duration-200",
-            "transition-all duration-200 motion-reduce:transition-none"
+            "transition duration-200 motion-reduce:transition-none"
         ],
         item: "",
         title: "grid place-items-start",
@@ -21,7 +20,7 @@ const accordionVariants = tv({
             "font-accordion-title",
             "bg-accordion-title-bg text-accordion-title-fg",
             "hover:bg-accordion-title-bg-hover",
-            "pr-accordion-icon-right",
+            "pe-accordion-icon-right",
             "data-[disabled=true]:cursor-not-allowed"
         ],
         subtitle: [

package/dist/molecules/cascade-select.js

@@ -23,7 +23,7 @@ const cascadeSelectVariants = tv({
             "form-control-base group w-full",
             "flex items-center justify-between gap-0",
             "border-cascade-select-trigger-border",
-            "text-left font-normal",
+            "text-start font-normal",
             "hover:border-cascade-select-trigger-border-hover",
             "hover:bg-cascade-select-trigger-bg-hover",
             "focus:border-cascade-select-trigger-border-focus",
@@ -48,7 +48,7 @@ const cascadeSelectVariants = tv({
             "data-[validation=warning]:outline-offset-(length:--default-ring-offset)",
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
-        clearTrigger: "-translate-y-1/2 absolute top-1/2 right-cascade-select-right data-readonly:hidden",
+        clearTrigger: "-translate-y-1/2 absolute end-cascade-select-right top-1/2 data-readonly:hidden",
         content: [
             "popup-surface-base flex w-max min-w-(--reference-width) max-w-(--available-width) overflow-x-auto",
             "duration-200 ease-out motion-safe:transition-[opacity,display,translate,scale]",

package/dist/molecules/color-select.js

@@ -10,8 +10,8 @@ const colorSelectVariants = tv({
         cell: "grid",
         atom: [
             "relative cursor-pointer p-color-select-atom",
-            "aspect-square overflow-hidden",
-            "border-2 transition-all duration-200 motion-reduce:transition-none",
+            "aspect-square min-w-0 overflow-clip",
+            "border-2 transition duration-200 motion-reduce:transition-none",
             "border-color-select-border shadow-color-select hover:border-color-select-border-hover",
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
             "focus-visible:outline-color-select-ring",

package/dist/molecules/combobox.js

@@ -18,7 +18,7 @@ const comboboxVariants = tv({
             "block font-label text-label-md"
         ],
         control: [
-            "form-control-base relative flex w-full items-center overflow-hidden",
+            "form-control-base relative flex w-full min-w-0 items-center overflow-clip",
             "bg-combobox-bg-base",
             "transition-colors duration-200 ease-in-out motion-reduce:transition-none",
             "hover:border-combobox-border-hover hover:bg-combobox-bg-hover",
@@ -36,7 +36,7 @@ const comboboxVariants = tv({
         ],
         input: [
             "relative h-full min-w-0 flex-1 border-none bg-combobox-input-bg-base",
-            "hover:bg-combobox-input-bg-hover focus-visible:outline-none",
+            "hover:bg-combobox-input-bg-hover focus-visible:outline-hidden",
             "focus:bg-combobox-input-bg-focus",
             "placeholder:text-combobox-fg-placeholder",
             "data-disabled:text-combobox-fg-disabled",

package/dist/molecules/date-picker.js

@@ -32,13 +32,13 @@ const datePickerVariants = tv({
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         segments: [
-            "date-picker-scrollbar-hidden flex min-w-0 flex-1 items-center overflow-x-auto overflow-y-hidden outline-none",
+            "date-picker-scrollbar-hidden flex min-w-0 flex-1 items-center overflow-x-auto overflow-y-hidden outline-hidden",
             "data-disabled:overflow-hidden"
         ],
         segmentGroup: "flex min-w-0 items-center",
         rangeSeparator: "shrink-0 px-date-picker-range-separator text-date-picker-range-separator-fg",
         segment: [
-            "date-picker-segment-size inline-flex shrink-0 items-center justify-center rounded-date-picker-day px-date-picker-segment tabular-nums outline-none",
+            "date-picker-segment-size inline-flex shrink-0 items-center justify-center rounded-date-picker-day px-date-picker-segment tabular-nums outline-hidden",
             "data-placeholder-shown:text-date-picker-segment-fg-placeholder",
             "focus:bg-date-picker-segment-bg-focus",
             "data-[type=literal]:min-h-0 data-[type=literal]:min-w-0 data-[type=literal]:px-0 data-[type=literal]:text-date-picker-control-fg",
@@ -74,7 +74,7 @@ const datePickerVariants = tv({
             "data-[selection-mode=range]:w-date-picker-content-range",
             "border-(length:--border-width-date-picker-content) border-date-picker-content-border",
             "rounded-date-picker-content bg-date-picker-content-bg text-date-picker-content-fg shadow-date-picker-content",
-            "outline-none duration-200 ease-out",
+            "outline-hidden duration-200 ease-out",
             "motion-safe:transition motion-reduce:transition-none",
             "starting:-translate-y-date-picker-enter-offset starting:opacity-0"
         ],
@@ -84,7 +84,7 @@ const datePickerVariants = tv({
         ],
         monthPanel: [
             "grid min-w-0 content-start gap-date-picker-calendar",
-            "sm:data-[index=1]:border-date-picker-month-divider-border sm:data-[index=1]:border-l sm:data-[index=1]:pl-date-picker-content"
+            "sm:data-[index=1]:border-date-picker-month-divider-border sm:data-[index=1]:border-s sm:data-[index=1]:ps-date-picker-content"
         ],
         view: "min-w-0",
         viewControl: "flex min-w-0 items-center justify-between gap-date-picker-calendar",
@@ -120,8 +120,8 @@ const datePickerVariants = tv({
             "data-today:border-date-picker-day-today-border",
             "data-in-range:rounded-none data-in-range:bg-date-picker-day-bg-range",
             "data-in-hover-range:rounded-none data-in-hover-range:bg-date-picker-day-bg-range-hover",
-            "data-range-start:rounded-date-picker-day data-range-start:rounded-r-none",
-            "data-range-end:rounded-date-picker-day data-range-end:rounded-l-none",
+            "data-range-start:rounded-date-picker-day data-range-start:rounded-e-none",
+            "data-range-end:rounded-date-picker-day data-range-end:rounded-s-none",
             "data-range-start:bg-date-picker-day-bg-selected data-range-end:bg-date-picker-day-bg-selected",
             "data-range-start:text-date-picker-day-fg-selected data-range-end:text-date-picker-day-fg-selected",
             "data-selected:bg-date-picker-day-bg-selected data-selected:text-date-picker-day-fg-selected",
@@ -150,7 +150,7 @@ const datePickerVariants = tv({
         timeGroup: [
             "flex min-w-0 items-center gap-date-picker-time",
             "data-[index=1]:border-date-picker-time-border data-[index=1]:border-t data-[index=1]:pt-date-picker-time",
-            "sm:data-[index=1]:border-l sm:data-[index=1]:border-t-0 sm:data-[index=1]:pt-0 sm:data-[index=1]:pl-date-picker-time"
+            "sm:data-[index=1]:border-s sm:data-[index=1]:border-t-0 sm:data-[index=1]:pt-0 sm:data-[index=1]:ps-date-picker-time"
         ],
         timeGroupLabel: "shrink-0 font-date-picker-view text-date-picker-time-label-fg text-date-picker-time-label",
         timeFields: "flex min-w-0 items-center gap-date-picker-indicator",

package/dist/molecules/dialog.js

@@ -31,7 +31,7 @@ const dialogVariants = tv({
         ],
         trigger: [],
         closeTrigger: [
-            "absolute top-dialog-close-trigger-offset right-dialog-close-trigger-offset"
+            "absolute end-dialog-close-trigger-offset top-dialog-close-trigger-offset"
         ],
         actions: "mt-auto flex shrink-0 justify-end gap-dialog-actions pt-dialog-actions-top"
     },
@@ -43,11 +43,11 @@ const dialogVariants = tv({
             },
             left: {
                 positioner: "items-stretch justify-start",
-                content: "h-full rounded-dialog-content-side border-l-0"
+                content: "h-full rounded-dialog-content-side border-s-0"
             },
             right: {
                 positioner: "items-stretch justify-end",
-                content: "h-full rounded-dialog-content-side border-r-0"
+                content: "h-full rounded-dialog-content-side border-e-0"
             },
             top: {
                 positioner: "items-start justify-stretch",

package/dist/molecules/file-upload.js

@@ -34,7 +34,7 @@ const fileUploadStyles = tv({
             "data-disabled:text-file-upload-item-disabled-fg"
         ],
         itemPreview: [
-            "flex size-file-upload-item-preview shrink-0 items-center justify-center overflow-hidden rounded-file-upload-item-preview text-file-upload-item-preview-fg",
+            "flex size-file-upload-item-preview shrink-0 items-center justify-center overflow-clip rounded-file-upload-item-preview text-file-upload-item-preview-fg",
             "data-disabled:text-file-upload-item-disabled-fg"
         ],
         itemPreviewImage: "size-full object-cover",

package/dist/molecules/form-checkbox.js

@@ -13,7 +13,7 @@ const checkboxVariants = tv({
             "rounded-checkbox border border-checkbox-border-base",
             "bg-checkbox-bg-base",
             "flex items-center justify-center",
-            "transition-all duration-200 motion-reduce:transition-none",
+            "transition duration-200 motion-reduce:transition-none",
             "data-[state=checked]:bg-checkbox-bg-checked",
             "data-[state=checked]:border-checkbox-border-checked",
             "data-[state=indeterminate]:bg-checkbox-bg-indeterminate",
@@ -42,7 +42,7 @@ const checkboxVariants = tv({
             "data-disabled:text-label-fg-disabled"
         ],
         hiddenInput: "sr-only",
-        textIndented: "data-[icon=false]:pl-form-checkbox-text-offset"
+        textIndented: "data-[icon=false]:ps-form-checkbox-text-offset"
     },
     variants: {
         size: {

package/dist/molecules/phone-input.js

@@ -51,7 +51,7 @@ const phoneInputVariants = tv({
         ],
         control: [
             "form-control-base",
-            "relative flex w-full items-center overflow-hidden",
+            "relative flex w-full min-w-0 items-center overflow-clip",
             "text-phone-input-fg",
             "hover:border-phone-input-border-hover hover:bg-phone-input-bg-hover",
             "phone-input-focus",
@@ -84,7 +84,7 @@ const phoneInputVariants = tv({
             "bg-phone-input-trigger-bg-base",
             "hover:bg-phone-input-trigger-bg-hover",
             "border-(length:--border-phone-input-trigger)",
-            "focus-visible:outline-none",
+            "focus-visible:outline-hidden",
             "w-phone-input-trigger",
             "focus-visible:bg-phone-input-trigger-bg-hover",
             "rounded-e-none"
@@ -107,7 +107,7 @@ const phoneInputVariants = tv({
             "placeholder:text-phone-input-fg-placeholder",
             "hover:bg-phone-input-input-bg-hover",
             "focus:bg-phone-input-input-bg-focus",
-            "focus-visible:outline-none",
+            "focus-visible:outline-hidden",
             "disabled:text-phone-input-fg-disabled"
         ],
         itemContent: [

package/dist/molecules/popover.js

@@ -20,7 +20,7 @@ const popoverVariants = tv({
             "bg-popover-bg",
             "text-popover-fg",
             "rounded-popover",
-            "outline-none",
+            "outline-hidden",
             "z-50",
             "relative"
         ],
@@ -36,7 +36,7 @@ const popoverVariants = tv({
             "leading-normal"
         ],
         closeTrigger: [
-            "absolute top-2 right-2"
+            "absolute end-2 top-2"
         ]
     },
     variants: {

package/dist/molecules/radio-card.js

@@ -11,7 +11,7 @@ const radioCardVariants = tv({
             "flex w-full flex-col"
         ],
         item: [
-            "relative flex min-w-0 flex-col overflow-hidden",
+            "relative flex min-w-0 flex-col overflow-clip",
             "rounded-radio-card-item",
             "border-(length:--border-width-radio-card)",
             "border-radio-card-item-border",
@@ -223,9 +223,9 @@ const radioCardVariants = tv({
             start: {
                 itemControl: "items-start",
                 itemContent: "items-start",
-                itemText: "text-left",
-                itemDescription: "text-left",
-                itemAddon: "text-left"
+                itemText: "text-start",
+                itemDescription: "text-start",
+                itemAddon: "text-start"
             },
             center: {
                 itemControl: "items-center",
@@ -237,9 +237,9 @@ const radioCardVariants = tv({
             end: {
                 itemControl: "items-end",
                 itemContent: "items-end",
-                itemText: "text-right",
-                itemDescription: "text-right",
-                itemAddon: "text-right"
+                itemText: "text-end",
+                itemDescription: "text-end",
+                itemAddon: "text-end"
             }
         },
         justify: {

package/dist/molecules/select.js

@@ -34,7 +34,7 @@ const selectVariants = tv({
             "group",
             "flex items-center justify-between gap-0",
             "font-normal",
-            "text-left",
+            "text-start",
             "hover:bg-select-trigger-bg-hover",
             "hover:border-select-trigger-border-hover",
             "focus:border-select-trigger-border-focus",
@@ -60,7 +60,7 @@ const selectVariants = tv({
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         clearTrigger: [
-            "-translate-y-1/2 absolute top-1/2 right-select-right"
+            "-translate-y-1/2 absolute end-select-right top-1/2"
         ],
         content: [
             "popup-surface-base",

package/dist/molecules/slider.js

@@ -74,7 +74,7 @@ const sliderVariants = tv({
         ],
         markerText: [
             "absolute top-full",
-            "data-[orientation=vertical]:top-0 data-[orientation=vertical]:left-full",
+            "data-[orientation=vertical]:top-0 data-[orientation=vertical]:start-full",
             "data-[orientation=vertical]:h-full",
             "data-[orientation=vertical]:p-marker-text"
         ]

package/dist/molecules/steps.js

@@ -28,7 +28,7 @@ const stepsVariants = tv({
         ],
         trigger: [
             "group relative flex min-w-0 items-center justify-start gap-steps-trigger",
-            "text-left",
+            "text-start",
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
             "focus-visible:outline-steps-ring",
             "focus-visible:outline-offset-(length:--default-ring-offset)",
@@ -75,7 +75,7 @@ const stepsVariants = tv({
             "transition-colors duration-200 motion-reduce:transition-none"
         ],
         progress: [
-            "relative overflow-hidden rounded-steps-progress bg-steps-progress-bg",
+            "relative min-w-0 overflow-clip rounded-steps-progress bg-steps-progress-bg",
             "data-[orientation=horizontal]:h-steps-progress data-[orientation=horizontal]:w-full",
             "data-[orientation=vertical]:w-steps-progress data-[orientation=vertical]:self-stretch"
         ],

package/dist/molecules/toast.js

@@ -9,7 +9,7 @@ const toastVariants = tv({
         root: [
             "relative flex flex-col rounded-toast-root",
             "border-(length:--border-width-toast) bg-toast-bg shadow-lg",
-            "w-toast-width overflow-hidden p-toast-root",
+            "w-toast-width min-w-0 overflow-clip p-toast-root",
             "data-[type=error]:border-toast-error-border data-[type=error]:bg-toast-error-bg",
             "data-[type=success]:border-toast-success-border data-[type=success]:bg-toast-success-bg",
             "data-[type=info]:border-toast-info-border data-[type=info]:bg-toast-info-bg",

package/dist/molecules/tour.js

@@ -10,7 +10,7 @@ const tourStyles = tv({
         backdrop: "tour-layer bg-tour-backdrop-bg",
         spotlight: "tour-layer tour-spotlight-border",
         positioner: "tour-layer tour-positioner",
-        content: "tour-layer tour-content tour-border relative flex flex-col gap-tour-content rounded-tour bg-tour-bg p-tour text-tour-fg shadow-tour outline-none",
+        content: "tour-layer tour-content tour-border relative flex flex-col gap-tour-content rounded-tour bg-tour-bg p-tour text-tour-fg shadow-tour outline-hidden",
         arrow: "tour-arrow",
         arrowTip: "bg-tour-arrow-bg",
         title: "pe-tour-title font-tour-title text-tour-title-size",

package/dist/molecules/tree-view.js

@@ -39,7 +39,7 @@ const treeViewVariants = tv({
         branchIndicator: [
             "group-hover:text-tree-view-fg-hover",
             "data-[state=open]:token-icon-tree-indicator-open cursor-pointer hover:scale-125",
-            "transition-all duration-200 motion-reduce:transition-none"
+            "transition duration-200 motion-reduce:transition-none"
         ],
         branchContent: [
             "relative",

package/dist/organisms/data-table.js

@@ -44,7 +44,7 @@ const dataTableVariants = tv({
         ],
         sortButton: [
             "inline-flex items-center gap-100 whitespace-nowrap",
-            "cursor-pointer select-none bg-transparent text-left",
+            "cursor-pointer select-none bg-transparent text-start",
             "data-[disabled=true]:cursor-default"
         ],
         sortIcon: [

package/dist/organisms/gallery.js

@@ -15,7 +15,7 @@ const galleryVariants = tv({
             "relative shrink-0",
             "size-(--gallery-thumbnail-size)",
             "aspect-square",
-            "overflow-hidden rounded-gallery-trigger border border-gallery-trigger-border bg-gallery-trigger-bg",
+            "min-w-0 overflow-clip rounded-gallery-trigger border border-gallery-trigger-border bg-gallery-trigger-bg",
             "cursor-pointer p-gallery-trigger",
             "focus-visible:outline-(style:--default-ring-style) focus-visible:outline-(length:--default-ring-width)",
             "focus-visible:outline-gallery-trigger-ring",
@@ -25,7 +25,7 @@ const galleryVariants = tv({
             "shadow-gallery-trigger",
             "brightness-gallery-trigger",
             "hover:brightness-gallery-trigger-active data-active:brightness-gallery-trigger-active",
-            "transition-all duration-200 motion-reduce:transition-none",
+            "transition duration-200 motion-reduce:transition-none",
             "*:h-full *:w-full *:object-cover"
         ]
     },

package/dist/organisms/table.js

@@ -92,8 +92,8 @@ const tableVariants = tv({
         },
         showColumnBorder: {
             true: {
-                columnHeader: "border-r-(length:--border-table-width) border-table-border",
-                cell: "border-r-(length:--border-table-width) border-table-border"
+                columnHeader: "border-e-(length:--border-table-width) border-table-border",
+                cell: "border-e-(length:--border-table-width) border-table-border"
             }
         },
         captionPlacement: {

package/dist/src/atoms/button.d.ts

@@ -2,7 +2,7 @@
  * Button — @techsio/ui-kit atom.
  *
  * @component Button
- * @componentVersion v0.3.2
+ * @componentVersion v0.3.3
  * @skill button-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/atoms/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/atoms/button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAE5C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDA+OzB,CAAA;AAEF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,SAAS,CAAA;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,IAAI,EACJ,YAAqB,EACrB,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,GAAG,KAAK,EACT,EAAE,WAAW,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,2CAkChD"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/atoms/button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAE5C,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAiPzB,CAAA;AAEF,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,EAC/D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC/B,QAAQ,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,SAAS,CAAA;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,IAAI,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,IAAI,EACJ,YAAqB,EACrB,QAAQ,EACR,SAAiB,EACjB,QAAQ,EACR,SAAS,EACT,QAAQ,EAAE,YAAY,EACtB,GAAG,KAAK,EACT,EAAE,WAAW,GAAG;IAAE,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAA;CAAE,2CAkChD"}

package/dist/src/atoms/checkbox.d.ts

@@ -2,7 +2,7 @@
  * Checkbox — @techsio/ui-kit atom.
  *
  * @component Checkbox
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill checkbox-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/atoms/input.d.ts

@@ -2,7 +2,7 @@
  * Input — @techsio/ui-kit atom.
  *
  * @component Input
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill input-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/atoms/input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/atoms/input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAmEjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC5B;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,EACH,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAeZ"}
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/atoms/input.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAyEjB,CAAA;AAEF,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC5B;AAED,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,EACH,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,UAAU,2CAeZ"}

package/dist/src/atoms/numeric-input.d.ts

@@ -2,7 +2,7 @@
  * NumericInput — @techsio/ui-kit atom.
  *
  * @component NumericInput
- * @componentVersion v1.1.0
+ * @componentVersion v1.1.1
  * @skill numeric-input-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/atoms/skeleton.d.ts

@@ -2,7 +2,7 @@
  * Skeleton — @techsio/ui-kit atom.
  *
  * @component Skeleton
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill skeleton-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/atoms/textarea.d.ts

@@ -2,7 +2,7 @@
  * Textarea — @techsio/ui-kit atom.
  *
  * @component Textarea
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill textarea-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/atoms/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/atoms/textarea.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAoEpB,CAAA;AAEF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAC/B;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,2CAef;yBAvBe,QAAQ"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/atoms/textarea.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,GAAG,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAyEpB,CAAA;AAEF,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,EAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,GAAG,CAAC,EAAE,GAAG,CAAC,mBAAmB,CAAC,CAAA;CAC/B;AAED,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,2CAef;yBAvBe,QAAQ"}

package/dist/src/molecules/accordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/molecules/accordion.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,GAAG,EAGT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGnE,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA8ErB,CAAA;AA2CF,MAAM,WAAW,cACf,SAAQ,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAC5C,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAED,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,YAAY,EACZ,KAAK,EACL,WAAkB,EAClB,QAAgB,EAChB,GAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,2CAiChB;yBAjDe,SAAS;wEAiEtB,kBAAkB;yDA2BlB,oBAAoB;0DA8BpB,qBAAqB;kEA8BrB,uBAAuB;wDA4BvB,mBAAmB;2DAoBnB,sBAAsB;;AApJzB,UAAU,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AA2BD,UAAU,oBAAqB,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACvE,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CACvB;AA4BD,UAAU,qBAAsB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAyBD,KAAK,uBAAuB,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IAChE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B,CAAA;AA2BD,UAAU,mBAAoB,SAAQ,wBAAwB,CAAC,MAAM,CAAC;IACpE,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B;AAkBD,UAAU,sBAAuB,SAAQ,wBAAwB,CAAC,MAAM,CAAC;IACvE,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B"}
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../src/molecules/accordion.tsx"],"names":[],"mappings":"AAaA,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,GAAG,EAGT,MAAM,OAAO,CAAA;AACd,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,EAAQ,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAGnE,QAAA,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA6ErB,CAAA;AA2CF,MAAM,WAAW,cACf,SAAQ,YAAY,CAAC,OAAO,iBAAiB,CAAC,EAC5C,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnD,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAED,wBAAgB,SAAS,CAAC,EACxB,EAAE,EACF,YAAY,EACZ,KAAK,EACL,WAAkB,EAClB,QAAgB,EAChB,GAAW,EACX,QAAQ,EACR,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,QAAQ,EACR,GAAG,EACH,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,cAAc,2CAiChB;yBAjDe,SAAS;wEAiEtB,kBAAkB;yDA2BlB,oBAAoB;0DA8BpB,qBAAqB;kEA8BrB,uBAAuB;wDA4BvB,mBAAmB;2DAoBnB,sBAAsB;;AApJzB,UAAU,kBAAmB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IAClE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AA2BD,UAAU,oBAAqB,SAAQ,wBAAwB,CAAC,QAAQ,CAAC;IACvE,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAA;CACvB;AA4BD,UAAU,qBAAsB,SAAQ,wBAAwB,CAAC,KAAK,CAAC;IACrE,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;CAC1B;AAyBD,KAAK,uBAAuB,GAAG,wBAAwB,CAAC,MAAM,CAAC,GAAG;IAChE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,CAAA;IAC5B,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B,CAAA;AA2BD,UAAU,mBAAoB,SAAQ,wBAAwB,CAAC,MAAM,CAAC;IACpE,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B;AAkBD,UAAU,sBAAuB,SAAQ,wBAAwB,CAAC,MAAM,CAAC;IACvE,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAA;CAC3B"}

package/dist/src/molecules/cascade-select.d.ts

@@ -2,7 +2,7 @@
  * CascadeSelect — @techsio/ui-kit molecule.
  *
  * @component CascadeSelect
- * @componentVersion v1.0.1
+ * @componentVersion v1.0.2
  * @skill cascade-select-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *