@ztwoint/z-ui 0.1.129 → 0.1.131

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { 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/components/button/button.js

@@ -1,4 +1,4 @@
-import { jsx as e, jsxs as x, Fragment as h } from "react/jsx-runtime";
+import { jsx as e, jsxs as f, Fragment as h } from "react/jsx-runtime";
 import k from "react";
 import { Slot as w } from "@radix-ui/react-slot";
 import { cva as N } from "class-variance-authority";
@@ -10,9 +10,12 @@ const C = N(
       variant: {
         filled: [""],
         stroke: [
-          "ring-[0.5px] ring-btn-secondary-stroke-default hover:ring-btn-secondary-stroke-hover active:ring-btn-secondary-stroke-pressed disabled:ring-btn-secondary-stroke-disabled",
+          "ring-[1px] ring-btn-secondary-stroke-default hover:ring-btn-secondary-stroke-hover active:ring-btn-secondary-stroke-pressed disabled:ring-btn-secondary-stroke-disabled",
           "bg-btn-secondary-surface-default hover:bg-btn-secondary-surface-hover active:bg-btn-secondary-surface-pressed disabled:bg-btn-secondary-surface-disabled"
         ],
+        "colored-stroke": [
+          "ring-[1px] bg-btn-secondary-surface-default hover:bg-btn-secondary-surface-hover active:bg-btn-secondary-surface-pressed disabled:bg-btn-secondary-surface-disabled"
+        ],
         ghost: [
           "hover:text-text-neutral-secondary active:text-text-neutral-muted disabled:text-text-neutral-muted"
         ]
@@ -35,17 +38,17 @@ const C = N(
       {
         variant: "filled",
         shade: "brand",
-        class: "bg-btn-primary-brand-surface-default hover:bg-btn-primary-brand-surface-hover active:bg-btn-primary-brand-surface-pressed disabled:bg-btn-primary-brand-surface-disabled ring-[0.5px] ring-btn-primary-brand-stroke-default hover:ring-btn-primary-brand-stroke-hover active:ring-btn-primary-brand-stroke-pressed disabled:ring-btn-primary-brand-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
+        class: "bg-btn-primary-brand-surface-default hover:bg-btn-primary-brand-surface-hover active:bg-btn-primary-brand-surface-pressed disabled:bg-btn-primary-brand-surface-disabled ring-[1px] ring-btn-primary-brand-stroke-default hover:ring-btn-primary-brand-stroke-hover active:ring-btn-primary-brand-stroke-pressed disabled:ring-btn-primary-brand-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
       },
       {
         variant: "filled",
         shade: "neutral",
-        class: "bg-btn-primary-neutral-surface-default hover:bg-btn-primary-neutral-surface-hover active:bg-btn-primary-neutral-surface-pressed disabled:bg-btn-primary-neutral-surface-disabled ring-[0.5px] ring-btn-primary-neutral-stroke-default hover:ring-btn-primary-neutral-stroke-hover active:ring-btn-primary-neutral-stroke-pressed disabled:ring-btn-primary-neutral-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
+        class: "bg-btn-primary-neutral-surface-default hover:bg-btn-primary-neutral-surface-hover active:bg-btn-primary-neutral-surface-pressed disabled:bg-btn-primary-neutral-surface-disabled ring-[1px] ring-btn-primary-neutral-stroke-default hover:ring-btn-primary-neutral-stroke-hover active:ring-btn-primary-neutral-stroke-pressed disabled:ring-btn-primary-neutral-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
       },
       {
         variant: "filled",
         shade: "danger",
-        class: "bg-btn-primary-danger-surface-default hover:bg-btn-primary-danger-surface-hover active:bg-btn-primary-danger-surface-pressed disabled:bg-btn-primary-danger-surface-disabled ring-[0.5px] ring-btn-primary-danger-stroke-default hover:ring-btn-primary-danger-stroke-hover active:ring-btn-primary-danger-stroke-pressed disabled:ring-btn-primary-danger-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
+        class: "bg-btn-primary-danger-surface-default hover:bg-btn-primary-danger-surface-hover active:bg-btn-primary-danger-surface-pressed disabled:bg-btn-primary-danger-surface-disabled ring-[1px] ring-btn-primary-danger-stroke-default hover:ring-btn-primary-danger-stroke-hover active:ring-btn-primary-danger-stroke-pressed disabled:ring-btn-primary-danger-stroke-disabled text-text-inverted-primary disabled:text-text-neutral-muted"
       },
       {
         variant: "stroke",
@@ -62,6 +65,21 @@ const C = N(
         shade: "danger",
         class: "text-text-danger-secondary disabled:text-text-neutral-muted"
       },
+      {
+        variant: "colored-stroke",
+        shade: "neutral",
+        class: "text-text-neutral-primary ring-text-neutral-primary hover:ring-text-neutral-primary active:ring-text-neutral-primary disabled:text-text-neutral-muted disabled:ring-text-neutral-muted"
+      },
+      {
+        variant: "colored-stroke",
+        shade: "brand",
+        class: "text-text-neutral-primary ring-text-brand-secondary hover:ring-text-brand-secondary active:ring-text-brand-secondary disabled:text-text-neutral-muted disabled:ring-text-neutral-muted"
+      },
+      {
+        variant: "colored-stroke",
+        shade: "danger",
+        class: "text-text-neutral-primary ring-text-danger-secondary hover:ring-text-danger-secondary active:ring-text-danger-secondary disabled:text-text-neutral-muted disabled:ring-text-neutral-muted"
+      },
       {
         variant: "ghost",
         shade: "neutral",
@@ -90,19 +108,19 @@ const C = N(
     className: b,
     shade: u = "neutral",
     size: c,
-    variant: m = "filled",
+    variant: g = "filled",
     asChild: i = !1,
     leftIcon: r,
     rightIcon: t,
-    label: p,
+    label: m,
     children: l,
-    ...g
-  }, y) => {
-    const f = i ? w : "button", a = p || l, n = !a && !!(r || t), o = n ? r || t : null, v = d(
-      C({ shade: u, size: c, variant: m, iconOnly: n }),
+    ...p
+  }, x) => {
+    const y = i ? w : "button", a = m || l, n = !a && !!(r || t), o = n ? r || t : null, v = d(
+      C({ shade: u, size: c, variant: g, iconOnly: n }),
       b
     ), s = "w-3.5 h-3.5 min-w-max";
-    return /* @__PURE__ */ e(f, { className: v, ref: y, ...g, children: i ? l : n ? o ? /* @__PURE__ */ e("span", { className: s, children: o }) : null : /* @__PURE__ */ x(h, { children: [
+    return /* @__PURE__ */ e(y, { className: v, ref: x, ...p, children: i ? l : n ? o ? /* @__PURE__ */ e("span", { className: s, children: o }) : null : /* @__PURE__ */ f(h, { children: [
       r && /* @__PURE__ */ e("span", { className: d(s), children: r }),
       a && /* @__PURE__ */ e("span", { children: a }),
       t && /* @__PURE__ */ e("span", { className: d(s), children: t })

package/dist/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/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/components/checkbox-filter/checkbox-filter-popover-field.hook.js

@@ -0,0 +1,23 @@
+import { useState as c } from "react";
+const h = ({
+  value: t,
+  placeholder: n = "Search options"
+}) => {
+  const [r, s] = c(!1), o = (() => {
+    const e = t && Array.isArray(t) ? t.length : 0;
+    return e === 0 ? n : `${n} (${e} selected)`;
+  })();
+  return {
+    isOpen: r,
+    displayText: o,
+    handleOpenChange: (e) => {
+      s(e);
+    },
+    handleInputClick: () => {
+      s(!0);
+    }
+  };
+};
+export {
+  h as useCheckboxFilterPopoverField
+};

package/dist/components/checkbox-filter/checkbox-filter-popover-field.js

@@ -0,0 +1,44 @@
+import { jsx as e } from "react/jsx-runtime";
+import { PopoverCompact as s } from "../primitives/popover-compact/popover-compact.js";
+import { CheckboxFilter as m } from "./checkbox-filter.js";
+import { Input as h } from "../input/input.js";
+import { MagnifierIcon as d } from "../assets/icons/magnifier-icon.js";
+import v from "../assets/icons/chevron-down.js";
+import { useCheckboxFilterPopoverField as g } from "./checkbox-filter-popover-field.hook.js";
+const O = ({
+  value: n,
+  onChange: r,
+  filterOptions: i = [],
+  placeholder: p = "Search options"
+}) => {
+  const { isOpen: t, displayText: l, handleOpenChange: c, handleInputClick: a } = g(
+    {
+      value: n,
+      placeholder: p
+    }
+  );
+  return /* @__PURE__ */ e(s, { trigger: /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+    h,
+    {
+      leftIcon: /* @__PURE__ */ e(d, {}),
+      size: "large",
+      placeholder: l,
+      rightIcon: /* @__PURE__ */ e(v, {}),
+      readOnly: !0,
+      onClick: a,
+      className: "cursor-pointer"
+    }
+  ) }), open: t, onOpenChange: c, children: /* @__PURE__ */ e("div", { className: "h-[400px] flex flex-col", children: /* @__PURE__ */ e(
+    m,
+    {
+      value: { value: n },
+      onChange: (o) => {
+        Array.isArray(o.value) ? r(o.value) : o.value !== void 0 && o.value !== null ? r([o.value]) : r([]);
+      },
+      filterOptions: i
+    }
+  ) }) });
+};
+export {
+  O as CheckboxFilterPopoverField
+};

package/dist/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/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/components/checkbox-filter/checkbox-filter.hook.js

@@ -0,0 +1,31 @@
+import { useState as o, useEffect as u } from "react";
+const k = ({ value: s, onChange: d, filterOptions: a = [] }) => {
+  const [c, l] = o([]), [C, h] = o(""), [S, r] = o(a);
+  return u(() => {
+    s && Array.isArray(s.value) ? l(s.value.filter(Boolean) ?? []) : l([]);
+  }, [s]), u(() => {
+    r(a);
+  }, [a]), {
+    selectedValues: c,
+    searchValue: C,
+    filteredOptions: S,
+    onSearchChange: (e) => {
+      h(e.target.value);
+      const n = a.filter(
+        (t) => t.label.toLowerCase().includes(e.target.value.toLowerCase())
+      );
+      r(n);
+    },
+    handleCheckboxChange: (e, n) => {
+      let t;
+      n ? t = [...c, e] : t = c.filter((i) => i !== e), l(t), d({ value: t });
+    },
+    onClearSearch: () => {
+      h(""), r(a);
+    },
+    isSelected: (e) => c.includes(e)
+  };
+};
+export {
+  k as useCheckboxFilter
+};

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

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

package/dist/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/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/components/checkbox-filter/index.js

@@ -0,0 +1,7 @@
+import { CheckboxFilter as o } from "./checkbox-filter.js";
+import { CheckboxFilterPopoverField as e } from "./checkbox-filter-popover-field.js";
+const r = o;
+r.PopoverField = e;
+export {
+  r as CheckboxFilter
+};

package/dist/components/column-reorder/column-reorder.js

@@ -4,35 +4,35 @@ import { cn as f } from "../../lib/utils.js";
 import { ColumnItem as p } from "./components/column-item/column-item.js";
 import { useColumnReorder as c } from "./column-reorder.hook.js";
 const C = ({
-  columns: o,
+  columns: e,
   onReorder: d,
   onRemove: i,
   onEdit: l,
-  renderAction: t,
-  className: m,
-  disabled: n = !1,
-  editable: s = !1
+  renderAction: m,
+  className: t,
+  disabled: s = !1,
+  editable: n = !1
 }) => {
-  const { internalColumns: a } = c({ columns: o, onReorder: d });
+  const { internalColumns: a } = c({ columns: e, onReorder: d });
   return /* @__PURE__ */ r(
     "div",
     {
       className: f(
-        "rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden",
-        m
+        "rounded-2xl border-[1px] border-stroke-solid-light bg-background-neutral-default overflow-hidden box-shadow-medium-10",
+        t
       ),
-      children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: a.map((e, u) => /* @__PURE__ */ r(
+      children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: a.map((o, u) => /* @__PURE__ */ r(
         p,
         {
-          column: e,
+          column: o,
           index: u,
           onRemove: i,
           onEdit: l,
-          renderAction: t,
-          disabled: n,
-          editable: s
+          renderAction: m,
+          disabled: s,
+          editable: n
         },
-        e.id
+        o.id
       )) })
     }
   );

package/dist/components/dropdown/z2-dropdown.js

@@ -71,7 +71,7 @@ function B({
     "div",
     {
       className: d(
-        "flex items-center justify-center gap-1.5 p-2 self-stretch relative cursor-pointer rounded-lg bg-white border-[0.5px] border-[#E0E0E0] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:border-neutral-300 ",
+        "flex items-center justify-center gap-1.5 p-2 self-stretch relative cursor-pointer rounded-lg bg-white border-[1px] border-[#E0E0E0] shadow-[0px_1px_2px_0px_rgba(0,0,0,0.05)] hover:border-neutral-300 ",
         o
       ),
       children: [
@@ -133,7 +133,7 @@ function F({
       align: a,
       sideOffset: 8,
       className: d(
-        "bg-white max-w-fit w-[var(--radix-popover-trigger-width)] p-1 flex flex-col items-start rounded-2xl border-[0.5px] border-[#E0E0E0] shadow-lg min-w-fit",
+        "bg-white max-w-fit w-[var(--radix-popover-trigger-width)] p-1 flex flex-col items-start rounded-2xl border-[1px] border-[#E0E0E0] shadow-lg min-w-fit",
         e
       ),
       ...o
@@ -222,7 +222,7 @@ function L({
       side: l,
       className: d(
         "min-w-md min-h-fit h-[var(--radix-popover-content-height)]",
-        "bg-white w-full p-1 flex flex-col items-start rounded-2xl border-[0.5px] border-[#E0E0E0] shadow-lg",
+        "bg-white w-full p-1 flex flex-col items-start rounded-2xl border-[1px] border-[#E0E0E0] shadow-lg",
         e
       ),
       ...r

package/dist/components/input/input.js

@@ -15,7 +15,7 @@ const d = _("", {
     "div",
     {
       className: e(
-        "rounded-lg bg-input-surface-default flex items-center shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.default)] hover:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.hover)] focus-within:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] focus-within:hover:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] has-[:disabled]:shadow-[inset_0_0_0_0.5px_theme(colors.input.stroke.disabled)]",
+        "rounded-lg bg-input-surface-default flex items-center shadow-[inset_0_0_0_1px_theme(colors.input.stroke.default)] hover:shadow-[inset_0_0_0_1px_theme(colors.input.stroke.hover)] focus-within:shadow-[inset_0_0_0_1px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] focus-within:hover:shadow-[inset_0_0_0_1px_theme(colors.input.stroke.active),0_1px_2px_0_rgba(0,0,0,0.05)] has-[:disabled]:shadow-[inset_0_0_0_1px_theme(colors.input.stroke.disabled)]",
         d({ size: s }),
         o
       ),

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

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

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { 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/components/number-badge/number-badge.js

@@ -0,0 +1,27 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import m from "react";
+import { cva as d } from "class-variance-authority";
+import { cn as o } from "../../lib/utils.js";
+const i = d("inline-flex items-center leading-none-medium-sm", {
+  variants: {
+    textColor: {
+      neutral: "text-text-neutral-primary",
+      brand: "text-text-brand-secondary",
+      danger: "text-text-danger-secondary"
+    }
+  },
+  defaultVariants: {
+    textColor: "neutral"
+  }
+}), x = m.forwardRef(
+  ({ className: t, textColor: r = "neutral", number: a, ...n }, s) => /* @__PURE__ */ l("span", { className: o(i({ textColor: r }), t), ref: s, ...n, children: [
+    /* @__PURE__ */ e("span", { className: "text-text-neutral-muted pr-[1px]", children: "[" }),
+    /* @__PURE__ */ e("span", { children: a }),
+    /* @__PURE__ */ e("span", { className: "text-text-neutral-muted pl-[1px]", children: "]" })
+  ] })
+);
+x.displayName = "NumberBadge";
+export {
+  x as NumberBadge,
+  i as numberBadgeVariants
+};

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

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

package/dist/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/components/primitives/popover-compact/popover-compact.js

@@ -0,0 +1,30 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import { useState as g } from "react";
+import * as e from "@radix-ui/react-popover";
+function x({
+  trigger: t,
+  children: s,
+  open: r,
+  onOpenChange: i,
+  contentClassName: a,
+  sideOffset: l = 8,
+  align: d = "start",
+  width: p = "w-80"
+}) {
+  const [c, h] = g(!1), n = r !== void 0, m = n ? r : c, f = n ? i : h;
+  return /* @__PURE__ */ u(e.Root, { open: m, onOpenChange: f, children: [
+    /* @__PURE__ */ o(e.Trigger, { asChild: !0, children: t }),
+    /* @__PURE__ */ o(e.Portal, { children: /* @__PURE__ */ o(
+      e.Content,
+      {
+        className: `${p} bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg z-50 ${a || ""}`,
+        sideOffset: l,
+        align: d,
+        children: s
+      }
+    ) })
+  ] });
+}
+export {
+  x as PopoverCompact
+};

package/dist/components/primitives/table-card/table-card.js

@@ -18,6 +18,7 @@ import "../../collapsible-side-nav-bar/popover/popover.js";
 import "react-country-flag";
 import "classnames";
 import "@radix-ui/react-checkbox";
+import "../../checkbox-filter/index.js";
 import "@radix-ui/react-dialog";
 import "../../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
@@ -27,6 +28,7 @@ import "../../input/input.js";
 import "../../nav-header/nav-header.js";
 import "../../nav-header/nav-item/nav-item.js";
 import "@radix-ui/react-select";
+import "@radix-ui/react-popover";
 import "../../stepper/stepper.js";
 import "../../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
@@ -41,7 +43,6 @@ import "../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/
 import "@radix-ui/react-slot";
 import "../../radio/z2-radio.js";
 import "../../segmented-control/item.js";
-import "@radix-ui/react-popover";
 import "../popconfirm/popconfirm.js";
 import "../../dynamic-table/z2-table.js";
 import "../../dynamic-table/z2-table-context.js";
@@ -56,7 +57,7 @@ import "../../z2map/components/map-controls.js";
 import "../../z2map/components/map-zoom-control.js";
 import "../../z2map/components/map-style-control.js";
 import "../../table/table.context.js";
-const Dt = ({
+const Gt = ({
   dataSource: w,
   schema: B,
   loading: b,
@@ -164,7 +165,7 @@ const Dt = ({
         r.Footer,
         {
           className: d(
-            "flex-shrink-0 border-stroke-solid-light border-t-[0.5px] mt-[-2px]",
+            "flex-shrink-0 border-stroke-solid-light border-t-[1px] mt-[-2px]",
             n && "border",
             c && "rounded-b-xl",
             T
@@ -212,5 +213,5 @@ const Dt = ({
   ] });
 };
 export {
-  Dt as default
+  Gt as default
 };