@ztwoint/z-ui 0.1.129 → 0.1.131

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/checkbox-filter/checkbox-filter-popover-field.d.ts

@@ -0,0 +1,8 @@
+import { CheckboxFilterProps } from './checkbox-filter.type';
+interface CheckboxFilterPopoverFieldProps extends Omit<CheckboxFilterProps, 'value' | 'onChange'> {
+    placeholder?: string;
+    value?: string[];
+    onChange: (value: string[]) => void;
+}
+export declare const CheckboxFilterPopoverField: React.FC<CheckboxFilterPopoverFieldProps>;
+export {};

package/dist/types/components/checkbox-filter/checkbox-filter-popover-field.hook.d.ts

@@ -0,0 +1,11 @@
+interface UseCheckboxFilterPopoverFieldProps {
+    placeholder?: string;
+    value?: string | string[];
+}
+export declare const useCheckboxFilterPopoverField: ({ value, placeholder, }: UseCheckboxFilterPopoverFieldProps) => {
+    isOpen: boolean;
+    displayText: string;
+    handleOpenChange: (open: boolean) => void;
+    handleInputClick: () => void;
+};
+export {};

package/dist/types/components/checkbox-filter/checkbox-filter.d.ts

@@ -0,0 +1,2 @@
+import { CheckboxFilterProps } from './checkbox-filter.type';
+export declare const CheckboxFilter: React.FC<CheckboxFilterProps>;

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

@@ -0,0 +1,11 @@
+import { FilterOption } from '../table-filter/table-filter.type';
+import { CheckboxFilterProps } from './checkbox-filter.type';
+export declare const useCheckboxFilter: ({ value, onChange, filterOptions }: CheckboxFilterProps) => {
+    selectedValues: string[];
+    searchValue: string;
+    filteredOptions: FilterOption[];
+    onSearchChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleCheckboxChange: (optionValue: string, checked: boolean) => void;
+    onClearSearch: () => void;
+    isSelected: (optionValue: string) => boolean;
+};

package/dist/types/components/checkbox-filter/checkbox-filter.type.d.ts

@@ -0,0 +1,2 @@
+import { FilterComponentProps } from '../table-filter/table-filter.type';
+export type CheckboxFilterProps = FilterComponentProps;

package/dist/types/components/checkbox-filter/index.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxFilter } from './checkbox-filter';
+import { CheckboxFilterPopoverField } from './checkbox-filter-popover-field';
+declare const CheckboxFilterComponent: typeof CheckboxFilter & {
+    PopoverField: typeof CheckboxFilterPopoverField;
+};
+export { CheckboxFilterComponent as CheckboxFilter };
+export type { CheckboxFilterProps } from './checkbox-filter.type';

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/primitives/popover-compact/index.d.ts

@@ -0,0 +1,2 @@
+export { PopoverCompact } from './popover-compact';
+export type { PopoverCompactProps } from './popover-compact';

package/dist/types/components/primitives/popover-compact/popover-compact.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export interface PopoverCompactProps {
+    trigger: ReactNode;
+    children: ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    contentClassName?: string;
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    width?: string;
+}
+export declare function PopoverCompact({ trigger, children, open: controlledOpen, onOpenChange: controlledOnOpenChange, contentClassName, sideOffset, align, width, }: PopoverCompactProps): import("react/jsx-runtime").JSX.Element;

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/dist/types/components/table-filter/filters/index.d.ts

@@ -1,4 +1,3 @@
 export * from './text';
 export * from './boolean';
 export * from './number';
-export * from './checkbox';

package/dist/types/index.d.ts

@@ -4,6 +4,7 @@ export * from './components/button/button';
 export * from './components/collapsible-side-nav-bar';
 export * from './components/country-flags/country-flags';
 export * from './components/checkbox/checkbox';
+export * from './components/checkbox-filter';
 export * from './components/dialog/dialog';
 export * from './components/dropdown/z2-dropdown';
 export * from './components/dropdown-menu/z2-dropdown-menu';
@@ -12,6 +13,7 @@ export * from './components/input/input';
 export * from './components/nav-header';
 export * from './components/select/z2-select';
 export * from './components/primitives/select-compact/select-compact';
+export * from './components/primitives/popover-compact';
 export * from './components/stepper';
 export * from './components/stepper-item/stepper-item';
 export * from './components/tab/tab';

package/package.json

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

package/dist/components/table-filter/filters/checkbox.js

@@ -1,70 +0,0 @@
-import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { useState as d, useEffect as h } from "react";
-import { Virtuoso as k } from "react-virtuoso";
-import { MagnifierIcon as y } from "../../assets/icons/magnifier-icon.js";
-import S from "../../assets/icons/x.js";
-import { Z2Checkbox as w } from "../../checkbox/checkbox.js";
-const E = ({ value: n, onChange: f, filterOptions: r = [] }) => {
-  const [c, o] = d([]), [m, u] = d(""), [x, i] = d(r), p = (l) => {
-    u(l.target.value);
-    const e = r.filter(
-      (a) => a.label.toLowerCase().includes(l.target.value.toLowerCase())
-    );
-    i(e);
-  };
-  h(() => {
-    n && Array.isArray(n.value) ? o(n.value.filter(Boolean) ?? []) : o([]);
-  }, [n]), h(() => {
-    i(r);
-  }, [r]);
-  const b = (l, e) => {
-    let a;
-    e ? a = [...c, l] : a = c.filter((N) => N !== l), o(a), f({ value: a });
-  }, C = () => {
-    u(""), i(r);
-  }, g = (l) => c.includes(l), v = (l, e) => /* @__PURE__ */ s("div", { className: "flex justify-between items-center py-2 px-3", children: [
-    /* @__PURE__ */ s("label", { className: "flex items-center space-x-2 cursor-pointer", children: [
-      /* @__PURE__ */ t(
-        w,
-        {
-          checked: g(e.value),
-          onCheckedChange: (a) => b(e.value, a === !0)
-        }
-      ),
-      /* @__PURE__ */ t("span", { className: "text-text-neutral-primary leading-none-medium-sm", children: e.label })
-    ] }),
-    e.total && /* @__PURE__ */ s("span", { className: "text-text-neutral-muted text-sm", children: [
-      "[",
-      e.total,
-      "]"
-    ] })
-  ] });
-  return r.length === 0 ? /* @__PURE__ */ t("div", { className: "text-text-neutral-muted text-sm p-4", children: "No filter options available for this column" }) : /* @__PURE__ */ s("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ s("div", { className: "relative border-b border-stroke-solid-medium", children: [
-      /* @__PURE__ */ t(y, { className: "absolute left-3 top-3.5 text-text-neutral-muted" }),
-      /* @__PURE__ */ t(
-        "input",
-        {
-          placeholder: "Search options",
-          value: m,
-          onChange: p,
-          className: "border-none outline-none bg-surface-neutral-default text-text-neutral-primary rounded p-3 pl-8 leading-none-medium-sm w-full"
-        }
-      ),
-      m && /* @__PURE__ */ t("span", { className: "absolute right-3 top-3.5", onClick: C, children: /* @__PURE__ */ t(S, {}) })
-    ] }),
-    /* @__PURE__ */ t("div", { className: "flex-1", children: /* @__PURE__ */ t(
-      k,
-      {
-        data: x,
-        itemContent: v,
-        className: "h-full min-h-60",
-        style: { height: "100%" },
-        overscan: 5
-      }
-    ) })
-  ] });
-};
-export {
-  E as default
-};

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);
-}