@ztwoint/z-ui 0.1.96 → 0.1.97

package/dist/components/segmented-control/controller.d.ts

@@ -4,4 +4,4 @@ interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
 declare function SegmentedControl({ handleOnClick, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
-export { SegmentedControl };
+export { SegmentedControl, type SegmentedControlProps };

package/dist/components/segmented-control/controller.js

@@ -0,0 +1,22 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as d } from "../../lib/utils.js";
+import { useSegmentedControl as l } from "./use-segmented-control.hook.js";
+function a({ handleOnClick: e, className: o, children: r, ...n }) {
+  const { containerRef: t, handleClick: i } = l({ onSelect: e });
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: t,
+      onClick: i,
+      className: d(
+        "inline-flex items-start bg-background-neutral-medium rounded-lg border-2 border-stroke-solid-medium",
+        o
+      ),
+      ...n,
+      children: r
+    }
+  );
+}
+export {
+  a as SegmentedControl
+};

package/dist/components/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl, type SegmentedControlProps } from './controller';
+export { SegmentedControlItem, type SegmentedControlItemProps } from './item';

package/dist/components/segmented-control/item.js

@@ -0,0 +1,39 @@
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { cva as m } from "class-variance-authority";
+import { cn as o } from "../../lib/utils.js";
+const c = m(
+  o(
+    "inline-flex items-center justify-center rounded-lg text-neutral-secondary hover:text-neutral-primary hover:cursor-pointer leading-none-medium-sm",
+    "data-[selected=true]:text-neutral-primary",
+    "data-[selected=true]:bg-neutral-default",
+    "data-[selected=true]:box-shadow-button-default"
+  ),
+  {
+    variants: {
+      size: {
+        medium: "p-2 gap-1",
+        small: "p-1.5 gap-0.5"
+      }
+    },
+    defaultVariants: {
+      size: "small"
+    }
+  }
+), n = "w-4 h-4";
+function x({
+  leftIcon: t,
+  rightIcon: a,
+  id: s,
+  label: r,
+  size: l = "small",
+  ...i
+}) {
+  return /* @__PURE__ */ d("div", { "data-id": s, className: c({ size: l }), ...i, children: [
+    t && /* @__PURE__ */ e("span", { className: n, children: t }),
+    r && /* @__PURE__ */ e("span", { children: r }),
+    a && /* @__PURE__ */ e("span", { className: n, children: a })
+  ] });
+}
+export {
+  x as SegmentedControlItem
+};

package/dist/components/segmented-control/use-segmented-control.hook.js

@@ -0,0 +1,23 @@
+import { useRef as u, useEffect as c, useCallback as n } from "react";
+function o(d = {}) {
+  const { onSelect: t } = d, r = u(null);
+  c(() => {
+    if (!r.current) return;
+    const e = r.current.querySelector("[data-id]");
+    e && !e.hasAttribute("data-selected") && (e.setAttribute("data-selected", "true"), e.dataset.id && (t == null || t(e.dataset.id)));
+  }, [t]);
+  const s = n(
+    (e) => {
+      if (!r.current) return;
+      const a = e.target.closest("[data-id]");
+      a && (Array.from(r.current.children).forEach((i) => {
+        i.removeAttribute("data-selected");
+      }), a.setAttribute("data-selected", "true"), a.dataset.id && (t == null || t(a.dataset.id)));
+    },
+    [t]
+  );
+  return { containerRef: r, handleClick: s };
+}
+export {
+  o as useSegmentedControl
+};

package/dist/components/table/components/cell/avatar-cell.js

@@ -40,7 +40,8 @@ import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util
 import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
 import "@radix-ui/react-slot";
 import "@radix-ui/react-radio-group";
-const T = ({
+import "../../../segmented-control/item.js";
+const tt = ({
   avatar: m,
   value: a,
   rightIcon: o,
@@ -78,5 +79,5 @@ const T = ({
   }
 );
 export {
-  T as AvatarCell
+  tt as AvatarCell
 };

package/dist/components/table/table-provider.js

@@ -45,6 +45,7 @@ import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/chang
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
 import "@radix-ui/react-slot";
 import "@radix-ui/react-radio-group";
+import "../segmented-control/item.js";
 import { TableHeaderWrapper as T } from "./components/table-header-wrapper.js";
 import { TableHeaderContent as b } from "./components/table-header-content.js";
 import { TableFooter as s } from "./components/table-footer.js";

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

@@ -40,8 +40,9 @@ import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/util/chang
 import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dispatch-consumer-event.js";
 import "@radix-ui/react-slot";
 import "@radix-ui/react-radio-group";
+import "../segmented-control/item.js";
 import "../table/table.context.js";
-const we = ({
+const Be = ({
   dataSource: w,
   schema: B,
   loading: b,
@@ -197,5 +198,5 @@ const we = ({
   ] });
 };
 export {
-  we as default
+  Be as default
 };

package/dist/index.d.ts

@@ -24,5 +24,6 @@ export * from './components/tree-checkbox-select';
 export * from './components/breadcrumb/z2-breadcrumb';
 export * from './components/radio/z2-radio';
 export * from './components/assets/icons';
+export * from './components/segmented-control';
 export * from './lib/theme.hook';
 export * from './lib/utils';

package/dist/index.js

@@ -4,7 +4,7 @@ import { AlertCirclesIcon as m } from "./components/alert/icons/circles-icon.js"
 import { Button as x, buttonVariants as u } from "./components/button/button.js";
 import { Z2SideNavBarProvider as c } from "./components/collapsible-side-nav-bar/side-nav-bar-provider.js";
 import { Z2SideNavBar as s, Z2SidebarVariants as I } from "./components/collapsible-side-nav-bar/side-nav-bar.js";
-import { Z2SideNavBarHeader as b } from "./components/collapsible-side-nav-bar/side-nav-bar-header.js";
+import { Z2SideNavBarHeader as C } from "./components/collapsible-side-nav-bar/side-nav-bar-header.js";
 import { Z2SideNavBarContent as D } from "./components/collapsible-side-nav-bar/side-nav-bar-content.js";
 import { Z2SideNavBarFooter as T } from "./components/collapsible-side-nav-bar/side-nav-bar-footer.js";
 import { Z2SideNavBarGroup as v } from "./components/collapsible-side-nav-bar/side-nav-bar-group.js";
@@ -22,7 +22,7 @@ import { SIDEBAR_WIDTH as j, SIDEBAR_WIDTH_COLLAPSED as q } from "./components/c
 import { CountryFlags as K } from "./components/country-flags/country-flags.js";
 import { Z2Checkbox as oo } from "./components/checkbox/checkbox.js";
 import { Z2Dialog as ro, Z2DialogClose as to, Z2DialogContent as ao, Z2DialogDescription as po, Z2DialogFooter as no, Z2DialogHeader as fo, Z2DialogOverlay as lo, Z2DialogPortal as mo, Z2DialogTitle as xo, Z2DialogTrigger as uo } from "./components/dialog/dialog.js";
-import { DropdownContext as co, Z2Dropdown as Zo, Z2DropdownContent as so, Z2DropdownInput as Io, Z2DropdownItem as So, Z2DropdownSub as bo, Z2DropdownSubContent as Co, Z2DropdownSubItem as Do, Z2DropdownSubTrigger as go } from "./components/dropdown/z2-dropdown.js";
+import { DropdownContext as co, Z2Dropdown as Zo, Z2DropdownContent as so, Z2DropdownInput as Io, Z2DropdownItem as So, Z2DropdownSub as Co, Z2DropdownSubContent as bo, Z2DropdownSubItem as Do, Z2DropdownSubTrigger as go } from "./components/dropdown/z2-dropdown.js";
 import { Z2DropdownMenu as wo, Z2DropdownMenuCheckboxItem as vo, Z2DropdownMenuContent as Bo, Z2DropdownMenuGroup as Lo, Z2DropdownMenuItem as Mo, Z2DropdownMenuLabel as ho, Z2DropdownMenuPortal as Ao, Z2DropdownMenuRadioGroup as Po, Z2DropdownMenuRadioItem as No, Z2DropdownMenuSeparator as ko, Z2DropdownMenuShortcut as Eo, Z2DropdownMenuSub as Ro, Z2DropdownMenuSubContent as Ho, Z2DropdownMenuSubTrigger as yo, Z2DropdownMenuTrigger as Fo } from "./components/dropdown-menu/z2-dropdown-menu.js";
 import { FileUploadArea as Wo } from "./components/file-upload-area/file-upload-area.js";
 import { DEFAULT_ACCEPT as Vo } from "./components/file-upload-area/file-upload-area.const.js";
@@ -34,7 +34,7 @@ import { Z2Stepper as fe } from "./components/stepper/stepper.js";
 import { Z2StepperItem as me } from "./components/stepper-item/stepper-item.js";
 import { Z2Tabs as xe, Z2TabsContent as ue, Z2TabsList as ie, Z2TabsTrigger as ce } from "./components/tab/tab.js";
 import { Table as se, TableProvider as Ie } from "./components/table/table-provider.js";
-import { TableBody as be } from "./components/table/table.js";
+import { TableBody as Ce } from "./components/table/table.js";
 import { extractCellValue as De } from "./components/table/table.utils.js";
 import { DEFAULT_EMPTY_MESSAGE as Te, TABLE_CSS_CLASSES as we } from "./components/table/table.const.js";
 import { TableContext as Be, useTableContext as Le } from "./components/table/table.context.js";
@@ -61,7 +61,7 @@ import { PaginationQuickJumper as ir } from "./components/table/components/pagin
 import "react";
 import { Z2Tooltip as Zr } from "./components/tooltip/tooltip.js";
 import { default as Ir } from "./components/table-card/table-card.js";
-import { Badge as br, badgeVariants as Cr } from "./components/badge/badge.js";
+import { Badge as Cr, badgeVariants as br } from "./components/badge/badge.js";
 import { Avatar as gr, AvatarWithLabel as Tr } from "./components/avatar/avatar.js";
 import { Z2TextPreset as vr } from "./components/text-preset/text-preset.js";
 import { ColumnReOrder as Lr } from "./components/column-reorder/column-reorder.js";
@@ -83,7 +83,7 @@ import { InfoIcon as xt } from "./components/assets/icons/info-icon.js";
 import { default as it } from "./components/assets/icons/left-arrow.js";
 import { default as Zt } from "./components/assets/icons/link.js";
 import { default as It } from "./components/assets/icons/list-tree.js";
-import { default as bt } from "./components/assets/icons/media-record.js";
+import { default as Ct } from "./components/assets/icons/media-record.js";
 import { Minus as Dt } from "./components/assets/icons/minus.js";
 import { default as Tt } from "./components/assets/icons/octagon-warning-Copy.js";
 import { default as vt } from "./components/assets/icons/pin.js";
@@ -100,10 +100,12 @@ import { default as Xt } from "./components/assets/icons/vector_3.js";
 import { default as Qt } from "./components/assets/icons/table-cols-2.js";
 import { default as jt } from "./components/assets/icons/triangle-warning.js";
 import { default as zt } from "./components/assets/icons/arrow-left.js";
-import { useTheme as $t } from "./lib/theme.hook.js";
-import { cn as ea } from "./lib/utils.js";
-import { Z2PopoverTrigger as ta } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
-import { Z2PopoverContent as pa } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
+import { SegmentedControl as $t } from "./components/segmented-control/controller.js";
+import { SegmentedControlItem as ea } from "./components/segmented-control/item.js";
+import { useTheme as ta } from "./lib/theme.hook.js";
+import { cn as pa } from "./lib/utils.js";
+import { Z2PopoverTrigger as fa } from "./components/collapsible-side-nav-bar/popover/popover-trigger.js";
+import { Z2PopoverContent as ma } from "./components/collapsible-side-nav-bar/popover/popover-content.js";
 export {
   p as Alert,
   m as AlertCirclesIcon,
@@ -114,7 +116,7 @@ export {
   gr as Avatar,
   Ge as AvatarCell,
   Tr as AvatarWithLabel,
-  br as Badge,
+  Cr as Badge,
   ke as BooleanCell,
   x as Button,
   Xr as CheckIcon,
@@ -146,7 +148,7 @@ export {
   Zt as LinkIcon,
   It as ListTreeIcon,
   mr as MagnifierIcon,
-  bt as MediaRecordIcon,
+  Ct as MediaRecordIcon,
   Dt as MinusIcon,
   Jo as NavHeader,
   Yo as NavItem,
@@ -157,6 +159,8 @@ export {
   vt as PinIcon,
   j as SIDEBAR_WIDTH,
   q as SIDEBAR_WIDTH_COLLAPSED,
+  $t as SegmentedControl,
+  ea as SegmentedControlItem,
   J as SidebarLeftShowCopy,
   Q as SidebarLeftShowCopyIcon,
   Lt as SitemapIcon,
@@ -165,7 +169,7 @@ export {
   H as SubNavIndicatorIcon,
   we as TABLE_CSS_CLASSES,
   se as Table,
-  be as TableBody,
+  Ce as TableBody,
   Ir as TableCard,
   he as TableCell,
   Qt as TableCols2Icon,
@@ -227,14 +231,14 @@ export {
   Ho as Z2DropdownMenuSubContent,
   yo as Z2DropdownMenuSubTrigger,
   Fo as Z2DropdownMenuTrigger,
-  bo as Z2DropdownSub,
-  Co as Z2DropdownSubContent,
+  Co as Z2DropdownSub,
+  bo as Z2DropdownSubContent,
   Do as Z2DropdownSubItem,
   go as Z2DropdownSubTrigger,
   Gt as Z2Icon,
   k as Z2Popover,
-  pa as Z2PopoverContent,
-  ta as Z2PopoverTrigger,
+  ma as Z2PopoverContent,
+  fa as Z2PopoverTrigger,
   Gr as Z2RadioGroup,
   Wr as Z2RadioGroupIndicator,
   _r as Z2RadioGroupItem,
@@ -252,7 +256,7 @@ export {
   D as Z2SideNavBarContent,
   T as Z2SideNavBarFooter,
   v as Z2SideNavBarGroup,
-  b as Z2SideNavBarHeader,
+  C as Z2SideNavBarHeader,
   L as Z2SideNavBarItem,
   c as Z2SideNavBarProvider,
   h as Z2SideNavBarSeparator,
@@ -266,11 +270,11 @@ export {
   ce as Z2TabsTrigger,
   vr as Z2TextPreset,
   Zr as Z2Tooltip,
-  Cr as badgeVariants,
+  br as badgeVariants,
   u as buttonVariants,
-  ea as cn,
+  pa as cn,
   De as extractCellValue,
   Le as useTableContext,
-  $t as useTheme,
+  ta as useTheme,
   P as useZ2SideNavBar
 };

package/dist/types/components/segmented-control/controller.d.ts

@@ -4,4 +4,4 @@ interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
 }
 declare function SegmentedControl({ handleOnClick, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
-export { SegmentedControl };
+export { SegmentedControl, type SegmentedControlProps };

package/dist/types/components/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl, type SegmentedControlProps } from './controller';
+export { SegmentedControlItem, type SegmentedControlItemProps } from './item';

package/dist/types/index.d.ts

@@ -25,5 +25,6 @@ export * from './components/tree-checkbox-select';
 export * from './components/breadcrumb/z2-breadcrumb';
 export * from './components/radio/z2-radio';
 export * from './components/assets/icons';
+export * from './components/segmented-control';
 export * from './lib/theme.hook';
 export * from './lib/utils';

package/package.json

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