@ztwoint/z-ui 0.1.47 → 0.1.49

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

@@ -4,6 +4,3 @@ export declare const alertVariants: (props?: ({
 export declare const iconVariants: (props?: ({
     variant?: "success" | "warning" | "danger" | "accent" | "neutral" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-export declare const buttonVariants: (props?: ({
-    appearance?: "stroke" | "ghost" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
-    variant?: "stroke" | "ghost" | "filled" | null | undefined;
-    shade?: "danger" | "neutral" | "brand" | "neutralGhost" | null | undefined;
-    size?: "small" | "large" | null | undefined;
+    variant?: "stroke" | "filled" | "ghost" | null | undefined;
+    shade?: "danger" | "neutral" | "brand" | null | undefined;
+    size?: "small" | "large" | "medium" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, 'iconOnly'> {

package/dist/types/components/nav-header/nav-item/nav-item.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
-import { ButtonProps } from '../../button/button';
-export interface NavItemProps extends ButtonProps {
+export interface NavItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     isActive?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    label?: string;
 }
 export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/components/table/components/table-filter/close-filter-confirm/filter-confirmation-dialog.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface FilterConfirmationDialogProps {
+    onClose: () => void;
+    onKeepChanges: () => void;
+    onRevertChanges: () => void;
+    onApplyChanges: () => void;
+    hasUnsavedChanges: boolean;
+}
+export declare const FilterConfirmationDialog: React.FC<FilterConfirmationDialogProps>;
+export {};

package/dist/types/components/table/components/table-filter/close-filter-confirm/filter-confirmation-dialog.utils.d.ts

@@ -0,0 +1,13 @@
+import { FilterRule } from '../../../table.type';
+/**
+ * Compares two filter arrays to determine if they are different
+ */
+export declare const areFiltersEqual: (filters1: FilterRule[], filters2: FilterRule[]) => boolean;
+/**
+ * Checks if there are unsaved changes by comparing temporary filters with applied filters
+ */
+export declare const hasUnsavedFilterChanges: (tempFilters: FilterRule[], appliedFilters: FilterRule[]) => boolean;
+/**
+ * Checks if there are unsaved changes for a specific column filter
+ */
+export declare const hasUnsavedFilterChangesForColumn: (columnName: string, tempFilters: FilterRule[], appliedFilters: FilterRule[]) => boolean;

package/dist/types/components/table/components/table-filter/table-filter.context.d.ts

@@ -9,6 +9,7 @@ export interface TableFilterContextValue {
     hasAppliedFilterForColumn: (columnKey: string) => boolean;
     updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
     clearAllFilters: () => void;
+    resetToAppliedFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
     filterableFields: TableSchema;

package/dist/types/components/table/components/table-filter/table-filter.hook.d.ts

@@ -9,6 +9,7 @@ declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
     hasAppliedFilterForColumn: (columnKey: string) => boolean;
     updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
     clearAllFilters: () => void;
+    resetToAppliedFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
     tempFilters: FilterRule[];

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

@@ -1,19 +1,23 @@
 export declare const DEFAULT_EMPTY_MESSAGE = "No data available";
 export declare const TABLE_CSS_CLASSES: {
     readonly table: "w-full";
-    readonly header: "bg-background-neutral-medium text-text-neutral-secondary";
+    readonly bordered: {
+        readonly true: "[&_td:first-child]:border-l-1 [&_th:first-child]:border-l-1 ";
+        readonly false: "";
+    };
+    readonly header: "bg-background-neutral-medium text-text-neutral-secondary table-fixed";
     readonly cell: {
-        readonly default: "p-0 align-middle relative h-4";
+        readonly default: "p-0 align-middle relative h-4 ";
         readonly hasBorder: {
-            readonly true: "border-r border-b border-stroke-solid-light";
+            readonly true: "border-r border-b border-stroke-solid-light ";
             readonly false: "border-b border-stroke-solid-light";
         };
     };
     readonly headerCell: {
-        readonly default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider";
+        readonly default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider border-stroke-solid-light";
         readonly hasBorder: {
-            readonly true: "border-none [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)]";
-            readonly false: "border-none [box-shadow:inset_0_-1px_0_0_var(--color-stroke-solid-light)]";
+            readonly true: " [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)] border-stroke-solid-light dark:shadow-none dark:border-0";
+            readonly false: "border-stroke-solid-light ";
         };
     };
     readonly sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200";

package/package.json

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

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

@@ -1,84 +0,0 @@
-/* SUCCESS */
-@utility alert-success-stroke {
-  border-color: var(--color-green-300);
-}
-@utility alert-success-bg {
-  background-color: var(--color-green-50);
-}
-@utility alert-success-title {
-  color: var(--color-green-900);
-}
-@utility alert-success-body {
-  color: var(--color-green-900);
-}
-@utility alert-success-icon {
-  color: var(--color-green-600);
-}
-
-/* WARNING */
-@utility alert-warning-stroke {
-  border-color: var(--color-amber-400);
-}
-@utility alert-warning-bg {
-  background-color: var(--color-amber-50);
-}
-@utility alert-warning-title {
-  color: var(--color-amber-900);
-}
-@utility alert-warning-body {
-  color: var(--color-amber-900);
-}
-@utility alert-warning-icon {
-  color: var(--color-amber-600);
-}
-
-/* DANGER */
-@utility alert-danger-stroke {
-  border-color: var(--color-red-400);
-}
-@utility alert-danger-bg {
-  background-color: var(--color-red-50);
-}
-@utility alert-danger-title {
-  color: var(--color-red-900);
-}
-@utility alert-danger-body {
-  color: var(--color-red-600);
-}
-@utility alert-danger-icon {
-  color: var(--color-red-600);
-}
-
-/* ACCENT */
-@utility alert-accent-stroke {
-  border-color: var(--color-accent-200);
-}
-@utility alert-accent-bg {
-  background-color: var(--color-accent-50);
-}
-@utility alert-accent-title {
-  color: var(--color-accent-950);
-}
-@utility alert-accent-body {
-  color: var(--color-accent-950);
-}
-@utility alert-accent-icon {
-  color: var(--color-accent-600);
-}
-
-/* NEUTRAL */
-@utility alert-neutral-stroke {
-  border-color: var(--color-neutral-800);
-}
-@utility alert-neutral-bg {
-  background-color: var(--color-neutral-25);
-}
-@utility alert-neutral-title {
-  color: var(--color-neutral-950);
-}
-@utility alert-neutral-body {
-  color: var(--color-neutral-950);
-}
-@utility alert-neutral-icon {
-  color: var(--color-neutral-950);
-}

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

@@ -1,93 +0,0 @@
-/* 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-red-600);
-}
-
-@utility button-primary-danger-surface-hover {
-  background-color: var(--color-red-700);
-}
-
-@utility button-primary-danger-surface-pressed {
-  background-color: var(--color-red-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-red-600);
-}
-
-/* Shadow utility class */
-@utility shadow-default {
-  box-shadow:
-    0px 1px 2px 0px var(--color-alpha-one-50),
-    0px 0px 0px 0.5px var(--color-neutral-150);
-}

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

@@ -1,128 +0,0 @@
-@layer utilities {
-  .z2-select-trigger {
-    @apply flex items-center justify-center w-full text-sm gap-[6px] p-2 rounded-md self-stretch transition-all cursor-pointer;
-    @apply data-[size=sm]:gap-[4px] data-[size=sm]:p-[6px];
-    @apply focus:outline-none outline-none focus-visible:outline-none focus-visible:ring-0;
-    font-size: 14px;
-    line-height: 1;
-    background: var(--input-surface-default, color(display-p3 1 1 1));
-    box-shadow:
-      0px 1px 2px 0px var(--drop-shadow-5, color(display-p3 0 0 0 / 0.05)),
-      0px 0px 0px var(--stroke-default, 0.5px)
-        var(--input-stroke-default, color(display-p3 0.8784 0.8784 0.8784));
-  }
-
-  .z2-select-trigger:hover {
-    background: var(--input-surface-hover, color(display-p3 0.9647 0.9647 0.9647));
-    box-shadow:
-      0px 1px 2px 0px var(--drop-shadow-5, color(display-p3 0 0 0 / 0.05)),
-      0px 0px 0px var(--stroke-default, 0.5px)
-        var(--input-stroke-hover, color(display-p3 0.8196 0.8196 0.8196));
-  }
-
-  .z2-select-trigger:focus {
-    background: var(--input-surface-pressed, color(display-p3 0.9059 0.9059 0.9059));
-    box-shadow:
-      0px 1px 2px 0px transparent,
-      0px 0px 0px var(--stroke-default, 0.5px) transparent;
-  }
-
-  .z2-select-trigger[data-state='open'] {
-    background: var(--input-surface-open, color(display-p3 0.941 0.941 0.941));
-    box-shadow:
-      0px 2px 4px 0px var(--drop-shadow-10, color(display-p3 0 0 0 / 0.1)),
-      0px 0px 0px var(--stroke-default, 0.5px)
-        var(--input-stroke-open, color(display-p3 0.6 0.6 0.6));
-  }
-
-  .z2-select-trigger[data-filled='true'] {
-    background: var(--input-surface-filled, color(display-p3 0.9804 0.9804 0.9804));
-    box-shadow:
-      0px 1px 2px 0px var(--drop-shadow-5, color(display-p3 0 0 0 / 0.05)),
-      0px 0px 0px var(--stroke-default, 0.5px)
-        var(--input-stroke-filled, color(display-p3 0.7 0.7 0.7));
-  }
-
-  .z2-select-trigger[data-disabled] {
-    background-color: var(--color-neutral-50);
-    pointer-events: none;
-    cursor: not-allowed;
-  }
-
-  .z2-select-trigger[data-placeholder] {
-    color: var(--text-neutral-muted, color(display-p3 0.5333 0.5333 0.5333));
-    font-size: 14px;
-    font-weight: 450;
-    line-height: 1;
-    letter-spacing: -0.2px;
-  }
-
-  [data-slot='select-value'] {
-    @apply w-full self-center items-start text-left flex gap-1;
-  }
-
-  /* ITEM/CONTENT/GROUP/ICON -- unchanged */
-  .z2-select-item {
-    @apply border-none;
-    @apply w-full relative self-stretch flex items-center justify-between gap-2 cursor-pointer outline-none rounded-md;
-    @apply data-[disabled]:pointer-events-none;
-    padding: var(--spacing-2, 8px);
-  }
-
-  .z2-select-item[data-state='active'],
-  .z2-select-item:hover {
-    background-color: var(--surface-neutral-focused, color(display-p3 0.9412 0.9412 0.9412));
-  }
-
-  .z2-select-content {
-    @apply min-w-[var(--radix-select-trigger-width)] flex flex-col items-start relative z-50 p-1;
-    /* @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2; */
-    border-radius: var(--border-radius-rounded-xl, 12px);
-    background:
-      linear-gradient(
-        0deg,
-        var(--background-neutral-on-top, color(display-p3 1 1 1)) 0%,
-        var(--background-neutral-on-top, color(display-p3 1 1 1)) 100%
-      ),
-      var(--background-neutral-default, color(display-p3 1 1 1));
-    box-shadow:
-      0px 16px 32px 0px var(--drop-shadow-10, color(display-p3 0 0 0 / 0.1)),
-      0px 0px 0px var(--stroke-default, 0.5px)
-        var(--stroke-solid-light, color(display-p3 0.9059 0.9059 0.9059));
-  }
-
-  .z2-select-group {
-    @apply flex w-full flex-col items-start gap-1 relative rounded-none;
-  }
-
-  .z2-trigger-icon {
-    @apply shrink-0;
-    width: 14px;
-    height: 14px;
-    aspect-ratio: 1 / 1;
-    color: var(--color-neutral-400);
-  }
-
-  .z2-select-label {
-    display: flex;
-    padding: var(--spacing-2, 8px) var(--spacing-2, 8px) var(--spacing-1, 4px) var(--spacing-2, 8px);
-    align-items: center;
-    gap: 4px;
-    align-self: stretch;
-    color: var(--color-neutral-600);
-    /* text small/leading-none/medium */
-    font-size: var(--base-sizes-small-font-size, 14px);
-    font-style: normal;
-    font-weight: var(--font-weight-medium, 450);
-    line-height: 100%; /* 14px */
-    letter-spacing: var(--font-letter-spacing-bittight, -0.2px);
-  }
-
-  .z2-select-item-text {
-    @apply flex items-center justify-center gap-2 flex-1 overflow-hidden text-ellipsis text-[14px] font-[450] leading-[100%] tracking-[-0.2px];
-  }
-
-  .z2-select-item-indicator {
-    @apply flex w-[14px] h-[14px] items-center justify-center;
-  }
-}

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

@@ -1,67 +0,0 @@
-/* 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);
-}