@ztwoint/z-ui 0.1.97 → 0.1.98

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

@@ -1,7 +1,10 @@
 interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
     handleOnClick?: (id?: string) => void;
     className?: string;
     children: React.ReactNode;
 }
-declare function SegmentedControl({ handleOnClick, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControl({ value, defaultValue, onValueChange, handleOnClick, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
 export { SegmentedControl, type SegmentedControlProps };

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

@@ -1,22 +1,36 @@
-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(
+import { jsx as u } from "react/jsx-runtime";
+import { cn as b } from "../../lib/utils.js";
+import { useSegmentedControl as n } from "./use-segmented-control.hook.js";
+function l({
+  value: o,
+  defaultValue: m,
+  onValueChange: r,
+  handleOnClick: t,
+  className: d,
+  children: i,
+  ...s
+}) {
+  const { containerRef: f, handleClick: c } = n({
+    onSelect: (e) => {
+      e && (r == null || r(e), t == null || t(e));
+    },
+    defaultSelectedId: o ?? m
+  });
+  return /* @__PURE__ */ u(
     "div",
     {
-      ref: t,
-      onClick: i,
-      className: d(
+      ref: f,
+      onClick: c,
+      className: b(
         "inline-flex items-start bg-background-neutral-medium rounded-lg border-2 border-stroke-solid-medium",
-        o
+        d
       ),
-      ...n,
-      children: r
+      ...s,
+      "data-selected-id": o,
+      children: i
     }
   );
 }
 export {
-  a as SegmentedControl
+  l as SegmentedControl
 };

package/dist/components/segmented-control/use-segmented-control.hook.d.ts

@@ -1,5 +1,6 @@
 type UseSegmentedControlOptions = {
     onSelect?: (id?: string) => void;
+    defaultSelectedId?: string;
 };
 type UseSegmentedControlResult = {
     containerRef: React.RefObject<HTMLDivElement | null>;

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

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

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

@@ -1,7 +1,10 @@
 interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
     handleOnClick?: (id?: string) => void;
     className?: string;
     children: React.ReactNode;
 }
-declare function SegmentedControl({ handleOnClick, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControl({ value, defaultValue, onValueChange, handleOnClick, className, children, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
 export { SegmentedControl, type SegmentedControlProps };

package/dist/types/components/segmented-control/use-segmented-control.hook.d.ts

@@ -1,5 +1,6 @@
 type UseSegmentedControlOptions = {
     onSelect?: (id?: string) => void;
+    defaultSelectedId?: string;
 };
 type UseSegmentedControlResult = {
     containerRef: React.RefObject<HTMLDivElement | null>;

package/package.json

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