@ztwoint/z-ui 0.1.128 → 0.1.130

package/dist/types/components/button/button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "stroke" | "filled" | "ghost" | null | undefined;
+    variant?: "stroke" | "filled" | "colored-stroke" | "ghost" | null | undefined;
     shade?: "danger" | "neutral" | "brand" | null | undefined;
     size?: "small" | "large" | "medium" | null | undefined;
     iconOnly?: boolean | null | undefined;

package/dist/types/components/number-badge/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberBadge, numberBadgeVariants } from './number-badge';
+export type { NumberBadgeProps } from './number-badge';

package/dist/types/components/number-badge/number-badge.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const numberBadgeVariants: (props?: ({
+    textColor?: "danger" | "neutral" | "brand" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export interface NumberBadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof numberBadgeVariants> {
+    number: number;
+}
+declare const NumberBadge: React.ForwardRefExoticComponent<NumberBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+export { NumberBadge, numberBadgeVariants };

package/dist/types/components/table/table.const.d.ts

@@ -24,7 +24,7 @@ export declare const TABLE_CSS_CLASSES: {
     readonly headerCellContent: "flex items-center justify-between";
     readonly sortIcon: "ml-2 w-4 h-4 text-gray-400";
     readonly sortIconActive: "ml-2 w-4 h-4 text-gray-600";
-    readonly row: " transition-colors duration-200 text-text-neutral-primary";
+    readonly row: " transition-colors duration-200 text-text-neutral-primary hover:bg-background-neutral-light";
     readonly emptyState: "px-4 py-8 text-center text-gray-500";
     readonly dataErrorState: "px-4 py-8 text-center text-text-danger-primary";
     readonly loading: "px-4 py-8 text-center text-gray-500";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ztwoint/z-ui",
-  "version": "0.1.128",
+  "version": "0.1.130",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

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

@@ -1,32 +0,0 @@
-/* neutral */
-@utility bg-neutral-default {
-  background-color: var(--color-background-neutral-default);
-}
-
-@utility bg-neutral-on-top {
-  background-color: var(--color-background-neutral-on-top);
-}
-
-@utility bg-neutral-light {
-  background-color: var(--color-background-neutral-light);
-}
-
-@utility bg-neutral-high {
-  background-color: var(--color-background-neutral-high);
-}
-
-@utility bg-neutral-medium {
-  background-color: var(--color-background-neutral-medium);
-}
-
-@utility bg-neutral-inverted-elevated {
-  background-color: var(--color-surface-inverted-default);
-}
-
-@utility bg-neutral-inverted-attention {
-  background-color: var(--color-surface-inverted-hover);
-}
-
-@utility bg-neutral-inverted-brand {
-  background-color: var(--color-surface-accent-default);
-}

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

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

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

@@ -1,137 +0,0 @@
-/* FILLED (background-color) */
-.c-badge-gray {
-  background-color: var(--color-surface-neutral-pressed);
-}
-.c-badge-accent {
-  background-color: var(--color-surface-accent-default);
-}
-.c-badge-danger {
-  background-color: var(--color-surface-danger-default);
-}
-.c-badge-success {
-  background-color: var(--color-surface-success-default);
-}
-.c-badge-warning {
-  background-color: var(--color-surface-warning-default);
-}
-.c-badge-purple {
-  background-color: var(--color-surface-purple-default);
-}
-.c-badge-sky {
-  background-color: var(--color-surface-accent-default);
-}
-
-/* LIGHT (background-color) */
-.c-badge-gray-light {
-  background-color: var(--color-surface-neutral-hover);
-}
-.c-badge-accent-light {
-  background-color: var(--alert-surface-accent);
-}
-.c-badge-danger-light {
-  background-color: var(--alert-surface-danger);
-}
-.c-badge-success-light {
-  background-color: var(--alert-surface-success);
-}
-.c-badge-warning-light {
-  background-color: var(--alert-surface-warning);
-}
-.c-badge-purple-light {
-  background-color: var(--color-surface-inverted-default);
-}
-.c-badge-sky-light {
-  background-color: var(--color-surface-inverted-default);
-}
-
-/* STROKE (border-color) */
-.c-badge-stroke-gray {
-  border-color: var(--color-stroke-solid-medium);
-}
-.c-badge-stroke-accent {
-  border-color: var(--alert-stroke-accent);
-}
-.c-badge-stroke-danger {
-  border-color: var(--alert-stroke-danger);
-}
-.c-badge-stroke-success {
-  border-color: var(--alert-stroke-success);
-}
-.c-badge-stroke-warning {
-  border-color: var(--alert-stroke-warning);
-}
-.c-badge-stroke-purple {
-  border-color: var(--color-stroke-solid-medium);
-}
-.c-badge-stroke-sky {
-  border-color: var(--color-stroke-solid-medium);
-}
-
-/* TEXT (color) */
-.c-badge-text-gray {
-  color: var(--color-text-neutral-secondary);
-}
-.c-badge-text-accent {
-  color: var(--color-text-brand-secondary);
-}
-.c-badge-text-danger {
-  color: var(--color-text-danger-secondary);
-}
-.c-badge-text-success {
-  color: var(--color-text-success-secondary);
-}
-.c-badge-text-warning {
-  color: var(--color-text-warning-secondary);
-}
-.c-badge-text-purple {
-  color: var(--color-text-purple-secondary);
-}
-.c-badge-text-sky {
-  color: var(--color-text-brand-secondary);
-}
-
-/* SHAPE (fill) */
-.c-badge-shape-fill-gray {
-  fill: var(--color-text-neutral-secondary);
-}
-.c-badge-shape-fill-accent {
-  fill: var(--color-text-brand-secondary);
-}
-.c-badge-shape-fill-danger {
-  fill: var(--color-text-danger-secondary);
-}
-.c-badge-shape-fill-success {
-  fill: var(--color-text-success-secondary);
-}
-.c-badge-shape-fill-warning {
-  fill: var(--color-text-warning-secondary);
-}
-.c-badge-shape-fill-purple {
-  fill: var(--color-text-purple-secondary);
-}
-.c-badge-shape-fill-sky {
-  fill: var(--color-text-brand-secondary);
-}
-
-/* SHAPE (background-color) */
-.c-badge-shape-bg-gray {
-  background-color: var(--color-surface-neutral-pressed);
-}
-.c-badge-shape-bg-accent {
-  background-color: var(--color-surface-accent-default);
-}
-.c-badge-shape-bg-danger {
-  background-color: var(--color-surface-danger-default);
-}
-.c-badge-shape-bg-success {
-  background-color: var(--color-surface-success-default);
-}
-.c-badge-shape-bg-warning {
-  background-color: var(--color-surface-warning-default);
-}
-.c-badge-shape-bg-purple {
-  background-color: var(--color-surface-purple-default);
-}
-.c-badge-shape-bg-sky {
-  background-color: var(--color-surface-accent-default);
-}

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

@@ -1,7 +0,0 @@
-.c-checkbox {
-  border-color: var(--color-stroke-solid-high);
-}
-
-.c-checkbox-hover {
-  border-color: var(--color-stroke-solid-hover);
-}

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

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

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

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

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

@@ -1,7 +0,0 @@
-.c-radio-button {
-  border-color: var(--color-stroke-solid-high);
-}
-
-.c-radio-button-hover {
-  border-color: var(--color-stroke-solid-hover);
-}

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

@@ -1,17 +0,0 @@
-/* white */
-.c-scroll-overlay-white {
-  background-color: var(--color-background-neutral-default);
-}
-
-.c-scroll-overlay-white-transparent {
-  background-color: var(--color-alpha-two-0);
-}
-
-/* secondary */
-.c-scroll-overlay-secondary {
-  background-color: var(--color-background-neutral-light);
-}
-
-.c-scroll-overlay-secondary-transparent {
-  background-color: var(--color-alpha-two-0);
-}

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

@@ -1,59 +0,0 @@
-/* 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 var(--color-stroke-solid-attention);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-/* 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-text-neutral-primary) !important;
-}
-
-/* Active state for text */
-[data-slot='tabs-trigger'][data-state='active'] .tab-icon {
-  color: var(--color-text-neutral-primary) !important;
-}
-
-/* Inactive state for text */
-[data-slot='tabs-trigger']:not([data-state='active']) .tab-label {
-  color: var(--color-text-neutral-secondary) !important;
-}
-
-/* Inactive state for text */
-[data-slot='tabs-trigger']:not([data-state='active']) .tab-icon {
-  color: var(--color-text-neutral-secondary) !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-text-neutral-primary) !important;
-}
-
-/* Hover state for icon */
-[data-slot='tabs-trigger']:hover .tab-icon {
-  color: var(--color-text-neutral-primary) !important;
-}

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

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

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

@@ -1,25 +0,0 @@
-/* surface */
-.c-toggle-surface {
-  background-color: var(--color-surface-neutral-pressed);
-}
-
-.c-toggle-surface-unactive-hover {
-  background-color: var(--color-surface-neutral-focused);
-}
-
-.c-toggle-surface-active {
-  background-color: var(--color-surface-accent-default);
-}
-
-.c-toggle-surface-active-hover {
-  background-color: var(--color-surface-accent-hover);
-}
-
-/* knob */
-.c-toggle-knob {
-  background-color: var(--color-surface-neutral-default);
-}
-
-.c-toggle-knob-disabled {
-  background-color: var(--color-surface-neutral-disabled);
-}

package/dist/css/config/colors/icons.css

@@ -1,81 +0,0 @@
-/* neutral */
-@utility icon-neutral {
-  fill: var(--color-text-neutral-secondary);
-}
-
-@utility icon-neutral-transparent {
-  fill: var(--color-stroke-transparent-hover);
-}
-
-@utility icon-neutral-disabled {
-  fill: var(--color-text-neutral-muted);
-}
-
-@utility icon-neutral-pale {
-  fill: var(--color-stroke-solid-hover);
-}
-
-@utility icon-neutral-attention {
-  fill: var(--color-text-neutral-primary);
-}
-
-@utility icon-neutral-accent {
-  fill: var(--color-text-brand-secondary);
-}
-
-@utility icon-neutral-danger {
-  fill: var(--color-text-danger-secondary);
-}
-
-@utility icon-neutral-warning {
-  fill: var(--color-text-warning-secondary);
-}
-
-@utility icon-neutral-success {
-  fill: var(--color-text-success-secondary);
-}
-
-@utility icon-neutral-purple {
-  fill: var(--color-text-purple-secondary);
-}
-
-@utility icon-neutral-sky {
-  fill: var(--color-text-brand-secondary);
-}
-
-/* inverted */
-@utility icon-inverted {
-  fill: var(--color-text-inverted-secondary);
-}
-
-@utility icon-inverted-disabled {
-  fill: var(--color-stroke-inverted-default);
-}
-
-@utility icon-inverted-attention {
-  fill: var(--color-text-inverted-primary);
-}
-
-@utility icon-inverted-accent {
-  fill: var(--color-text-brand-secondary);
-}
-
-@utility icon-inverted-danger {
-  fill: var(--color-text-danger-secondary);
-}
-
-@utility icon-inverted-warning {
-  fill: var(--color-text-warning-secondary);
-}
-
-@utility icon-inverted-success {
-  fill: var(--color-text-success-secondary);
-}
-
-@utility icon-inverted-purple {
-  fill: var(--color-text-purple-secondary);
-}
-
-@utility icon-inverted-sky {
-  fill: var(--color-text-brand-secondary);
-}

package/dist/css/config/colors/overlay.css

@@ -1,3 +0,0 @@
-@utility overlay {
-  background-color: var(--color-overlay-default);
-}