anysystem-design 0.0.22 → 0.0.24

package/dist/components/AutoComplete/AutoComplete.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { SelectOption } from '../Selectbox';
 import { AutoCompleteBaseHandler, AutoCompleteBaseProps } from './AutoCompleteBase';
 import { AutoCompleteMultipleHandler, AutoCompleteMultipleProps } from './AutoCompleteMultiple';
 
@@ -7,8 +8,10 @@ export { default as AutoCompleteBase } from './AutoCompleteBase';
 export * from './AutoCompleteMultiple';
 export { default as AutoCompleteMultiple } from './AutoCompleteMultiple';
 export type AutoCompleteHandler = AutoCompleteBaseHandler | AutoCompleteMultipleHandler;
-export type AutoCompleteProps = (AutoCompleteBaseProps | AutoCompleteMultipleProps) & {
+export type AutoCompleteProps<ListOption extends SelectOption> = (AutoCompleteBaseProps<ListOption> | AutoCompleteMultipleProps<ListOption>) & {
     multiple?: boolean;
 };
-declare const _default: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<AutoCompleteHandler>>;
+declare const _default: <ListOption extends SelectOption>(props: AutoCompleteProps<ListOption> & {
+    ref?: React.Ref<AutoCompleteHandler>;
+}) => React.ReactElement;
 export default _default;

package/dist/components/AutoComplete/AutoCompleteBase.d.ts

@@ -5,16 +5,18 @@ export type AutoCompleteBaseHandler = {
     search: (query: string) => void;
     setValue: (value: string) => void;
 };
-export type AutoCompleteBaseProps = {
+export type AutoCompleteBaseProps<ListOption extends SelectOption> = {
     id?: string;
-    options: SelectOption[];
+    options: ListOption[];
     name: string;
     value?: string | number;
     readOnly?: boolean;
     className?: string;
     placeholder?: string;
     onChange?: (value: string | number) => void;
-    valueField?: ValueField;
+    valueField?: ValueField<ListOption>;
 };
-declare const _default: React.ForwardRefExoticComponent<AutoCompleteBaseProps & React.RefAttributes<AutoCompleteBaseHandler>>;
+declare const _default: <ListOption extends SelectOption>(props: AutoCompleteBaseProps<ListOption> & {
+    ref?: React.Ref<AutoCompleteBaseHandler>;
+}) => React.ReactElement;
 export default _default;

package/dist/components/AutoComplete/AutoCompleteBase.js

@@ -90,7 +90,7 @@ const H = (t, r) => r.type === "SEARCH" ? {
             leaveFrom: "scale-100 transform opacity-100",
             leaveTo: "scale-95 transform opacity-0",
             afterLeave: () => s({ type: "SEARCH", query: "" }),
-            children: /* @__PURE__ */ a(N, { className: "absolute z-50 mt-5 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm dark:bg-gray-900", children: m.filterList.map((e) => /* @__PURE__ */ a(L, { as: p, value: e, children: ({ selected: n, focus: g }) => /* @__PURE__ */ f(
+            children: /* @__PURE__ */ a(N, { className: "absolute z-50 mt-5 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: m.filterList.map((e) => /* @__PURE__ */ a(L, { as: p, value: e, children: ({ selected: n, focus: g }) => /* @__PURE__ */ f(
               "li",
               {
                 className: y(

package/dist/components/AutoComplete/AutoCompleteMultiple.d.ts

@@ -5,16 +5,18 @@ export type AutoCompleteMultipleHandler = {
     search: (query: string) => void;
     setValue: (value: string[]) => void;
 };
-export type AutoCompleteMultipleProps = {
+export type AutoCompleteMultipleProps<ListOption extends SelectOption> = {
     id?: string;
-    options: SelectOption[];
+    options: ListOption[];
     name: string;
     value?: string[] | number[];
     readOnly?: boolean;
     className?: string;
     placeholder?: string;
     onChange?: (value: string[] | number[]) => void;
-    valueField?: ValueField;
+    valueField?: ValueField<ListOption>;
 };
-declare const _default: React.ForwardRefExoticComponent<AutoCompleteMultipleProps & React.RefAttributes<AutoCompleteMultipleHandler>>;
+declare const _default: <ListOption extends SelectOption>(props: AutoCompleteMultipleProps<ListOption> & {
+    ref?: React.Ref<AutoCompleteMultipleHandler>;
+}) => React.ReactElement;
 export default _default;

package/dist/components/DataTable/DataTable.d.ts

@@ -1,12 +1,11 @@
-import { default as React } from 'react';
 import { DataTableField } from './libs/type';
 
-export type DataTableProps = {
-    data: object[];
-    fields: DataTableField[];
+export type DataTableProps<DataType extends object> = {
+    data: DataType[];
+    fields: DataTableField<DataType>[];
     selectable?: boolean;
     chooseFieldable?: boolean;
     name?: string;
 };
-declare const DataTable: React.FC<DataTableProps>;
+declare const DataTable: <DataType extends object>({ name, data, fields, selectable, chooseFieldable, }: DataTableProps<DataType>) => import("react/jsx-runtime").JSX.Element;
 export default DataTable;

package/dist/components/DataTable/DataTable.js

@@ -38,7 +38,13 @@ const w = (e, l) => l.type === "SELECT_ALL" ? {
   }, [i.DTShowFields]), /* @__PURE__ */ a(
     D,
     {
-      value: { selectable: d, fields: r, chooseFieldable: T, state: i, dispatch: t },
+      value: {
+        selectable: d,
+        fields: r,
+        chooseFieldable: T,
+        state: i,
+        dispatch: t
+      },
       children: /* @__PURE__ */ m("div", { className: "relative w-full", children: [
         /* @__PURE__ */ m("table", { className: "table", children: [
           /* @__PURE__ */ a(s, {}),

package/dist/components/DataTable/components/DataTableCell.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
 import { ValueKey, ValueNode } from '../libs/type';
 
-export type DataTableCellProps = {
+export type DataTableCellProps<DataType extends object> = {
     children?: React.ReactNode;
-    data?: object;
-    field?: string | ValueNode | ValueKey;
+    data?: DataType;
+    field?: string | ValueNode<DataType> | ValueKey;
 };
-declare const DataTableCell: React.FC<DataTableCellProps>;
+declare const DataTableCell: <DataType extends object>({ children, data, field, }: DataTableCellProps<DataType>) => React.ReactElement;
 export default DataTableCell;

package/dist/components/DataTable/components/DataTableHeadCell.d.ts

@@ -1,8 +1,8 @@
 import { default as React } from 'react';
 import { DataTableField } from '../libs/type';
 
-export type DataTableHeadCellProps = {
-    field: DataTableField;
+export type DataTableHeadCellProps<DataType extends object> = {
+    field: DataTableField<DataType>;
 };
-declare const DataTableHeadCell: React.FC<DataTableHeadCellProps>;
+declare const DataTableHeadCell: <DataType extends object>({ field, }: DataTableHeadCellProps<DataType>) => React.ReactElement;
 export default DataTableHeadCell;

package/dist/components/DataTable/components/DataTableHeadCell.js

@@ -1,5 +1,7 @@
 import { jsx as a } from "react/jsx-runtime";
-const t = ({ field: e }) => /* @__PURE__ */ a("th", { children: e.label });
+const t = ({
+  field: e
+}) => /* @__PURE__ */ a("th", { children: e.label });
 export {
   t as default
 };

package/dist/components/DataTable/components/DataTableRow.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
 
-export type DataRowProps = {
+export type DataRowProps<DataType extends object> = {
     children?: React.ReactNode;
-    row?: object;
+    row?: DataType;
     index: number;
 };
-declare const DataTableRow: React.FC<DataRowProps>;
+declare const DataTableRow: <DataType extends object>({ row, children, index, }: DataRowProps<DataType>) => React.ReactElement;
 export default DataTableRow;

package/dist/components/DataTable/components/DataTableRow.js

@@ -4,7 +4,11 @@ import { _ as p } from "../../../lodash-XYp3qmxI.js";
 import { DataTableContext as h } from "../contexts/DataTableContext.js";
 import { CheckboxBase as C } from "../../Checkbox/CheckboxBase.js";
 import b from "./DataTableCell.js";
-const j = ({ row: a, children: o, index: l }) => {
+const j = ({
+  row: a,
+  children: o,
+  index: l
+}) => {
   const { selectable: s, fields: m, state: r, dispatch: i } = n.useContext(h);
   return /* @__PURE__ */ d("tr", { children: [
     s && /* @__PURE__ */ e("td", { className: "w-[50px]", children: /* @__PURE__ */ e(

package/dist/components/DataTable/components/FieldSelectbox.d.ts

@@ -1,4 +1,2 @@
-import { default as React } from 'react';
-
-declare const FieldSelectbox: React.FC;
+declare const FieldSelectbox: <DataType extends object>() => import("react/jsx-runtime").JSX.Element;
 export default FieldSelectbox;

package/dist/components/DataTable/contexts/DataTableContext.d.ts

@@ -1,12 +1,16 @@
 import { default as React } from 'react';
 import { DataTableField, State, Action } from '../libs/type';
 
-export type DataTableContextType = {
+export type DataTableContextType<DataType extends object> = {
     selectable: boolean;
     chooseFieldable: boolean;
-    fields: DataTableField[];
-    state: State;
-    dispatch: React.Dispatch<Action>;
+    fields: DataTableField<DataType>[];
+    state: State<DataType>;
+    dispatch: React.Dispatch<Action<DataType>>;
 };
-export declare const DataTableContext: React.Context<DataTableContextType>;
-export declare const DataTableProvider: React.Provider<DataTableContextType>;
+export declare const DataTableContext: React.Context<DataTableContextType<any>>;
+export type DataTableProviderProps<DataType extends object> = {
+    value: DataTableContextType<DataType>;
+    children: React.ReactNode;
+};
+export declare const DataTableProvider: <DataType extends object>({ children, value, }: DataTableProviderProps<DataType>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/contexts/DataTableContext.js

@@ -1,13 +1,17 @@
-import e from "react";
-const t = e.createContext({
+import { jsx as a } from "react/jsx-runtime";
+import o from "react";
+const r = o.createContext({
   selectable: !1,
   chooseFieldable: !1,
   fields: [],
   state: { DTChecked: [], DTData: [], DTShowFields: [] },
   dispatch: () => {
   }
-}), o = t.Provider;
+}), c = ({
+  children: e,
+  value: t
+}) => /* @__PURE__ */ a(r.Provider, { value: t, children: e });
 export {
-  t as DataTableContext,
-  o as DataTableProvider
+  r as DataTableContext,
+  c as DataTableProvider
 };

package/dist/components/DataTable/libs/helper.d.ts

@@ -1,4 +1,4 @@
 import { ValueKey, ValueNode } from './type';
 
 export declare const isValueKey: (key: string) => key is ValueKey;
-export declare const getValueByKey: (data: unknown, key: ValueKey | ValueNode | string) => unknown;
+export declare const getValueByKey: <DataType extends object>(data: DataType, key: ValueKey | ValueNode<DataType> | string) => unknown;

package/dist/components/DataTable/libs/type.d.ts

@@ -1,11 +1,11 @@
 export type ValueKey = `$${string}`;
-export type ValueNode = (row: object) => React.ReactNode | string;
-export type State = {
-    DTData: object[];
+export type ValueNode<DataType extends object> = (row: DataType) => React.ReactNode | string;
+export type State<DataType extends object> = {
+    DTData: DataType[];
     DTChecked: boolean[];
     DTShowFields: string[];
 };
-export type Action = {
+export type Action<DataType extends object> = {
     type: "SELECT_ALL";
 } | {
     type: "SELECT_ROW";
@@ -15,11 +15,11 @@ export type Action = {
     fieldKey: string;
 } | {
     type: "SET_FIELD";
-    fields: DataTableField[];
+    fields: DataTableField<DataType>[];
 };
-export type DataTableField = {
+export type DataTableField<DataType extends object> = {
     key: string;
     label: string;
-    value: ValueKey | ValueNode | string;
+    value: ValueKey | ValueNode<DataType> | string;
     default?: boolean;
 };

package/dist/components/Input/Input.d.ts

@@ -1,7 +1,10 @@
 import { default as React } from 'react';
 import { InputBaseProps } from './InputBase';
 import { InputTelProps } from './InputTel';
+import { SelectOption } from '../Selectbox';
 
-export type InputProps = InputBaseProps | InputTelProps;
-declare const _default: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export type InputProps<ListOption extends SelectOption> = InputBaseProps | InputTelProps<ListOption>;
+declare const _default: <ListOption extends SelectOption>(props: InputProps<ListOption> & {
+    ref?: React.Ref<HTMLInputElement>;
+}) => JSX.Element;
 export default _default;

package/dist/components/Input/InputTel.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { SelectOption } from '../Selectbox';
 
-export type InputTelProps = React.InputHTMLAttributes<HTMLInputElement> & {
+export type InputTelProps<ListOption extends SelectOption> = React.InputHTMLAttributes<HTMLInputElement> & {
     type: "tel";
     name: string;
     className?: {
@@ -9,7 +9,7 @@ export type InputTelProps = React.InputHTMLAttributes<HTMLInputElement> & {
         input?: string;
     };
     inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
-    phonePrefixOptions: SelectOption[];
+    phonePrefixOptions: ListOption[];
     phonePrefix?: string;
     onChange?: (value: string) => void;
 };

package/dist/components/Input/InputTel.js

@@ -11,7 +11,14 @@ const E = (r, t) => t.type === "SETPREFIX" ? {
   ...r,
   content: t.value,
   realPhone: `${r.prefix}-${t.value}`
-} : r, N = ({ className: r, value: t, phonePrefix: i, phonePrefixOptions: f, onChange: a, ...p }, d) => {
+} : r, N = ({
+  className: r,
+  value: t,
+  phonePrefix: i,
+  phonePrefixOptions: f,
+  onChange: a,
+  ...p
+}, d) => {
   const v = o.useMemo(() => {
     let e = r || { container: void 0, input: void 0 };
     return e.container = T("w-1/2", (e == null ? void 0 : e.container) || ""), e;

package/dist/components/NavList/NavList.d.ts

@@ -6,6 +6,7 @@ export type NavItemObject = {
     icon?: string;
     title?: boolean;
     list?: NavItemObject[];
+    onClick?: () => void;
 };
 export type NavListProps = {
     list: NavItemObject[];

package/dist/components/NavList/NavList.js

@@ -1,139 +1,139 @@
-import { jsx as s, jsxs as T, Fragment as ae } from "react/jsx-runtime";
+import { jsx as s, jsxs as C, Fragment as ae } from "react/jsx-runtime";
 import { G as ne } from "../../iconBase-Bipuk9tK.js";
-import { t as S } from "../../bundle-mjs-SHnj3fHy.js";
+import { t as x } from "../../bundle-mjs-SHnj3fHy.js";
 import W from "../Icon/Icon.js";
 import { b as oe } from "../../index-qfA2zEnA.js";
-import { $ as se, a as ue, r as ie } from "../../bugs-CHTtT8VX.js";
-import h, { createContext as C, useRef as x, Fragment as Q, useReducer as ce, useMemo as E, useId as X, useEffect as Y, useContext as N } from "react";
+import { $ as se, a as ie, r as ue } from "../../bugs-CHTtT8VX.js";
+import y, { createContext as R, useRef as D, Fragment as Q, useReducer as ce, useMemo as w, useId as X, useEffect as Y, useContext as N } from "react";
 import { w as de, T as pe } from "../../use-resolve-button-type-DkEA2l9L.js";
-import { M as _, W as B, y as F, T as fe, o as D, u as M, H as L, I as Z, D as q } from "../../use-sync-refs-TDnk3jQt.js";
-import { c as me, i as w, u as ge, V as he, A as be, s as ye } from "../../open-closed-CowzTowH.js";
+import { M as _, W as B, y as F, T as fe, o as E, u as M, H as L, I as Z, D as q } from "../../use-sync-refs-TDnk3jQt.js";
+import { c as ge, i as T, u as he, V as ye, A as be, s as ke } from "../../open-closed-CowzTowH.js";
 import { u as ve } from "../../close-provider-Cs3ZWgEC.js";
-import { u as ke, o as I } from "../../keyboard-DnlWU23I.js";
+import { u as me, o as S } from "../../keyboard-DnlWU23I.js";
 var J;
-let Pe = (J = h.startTransition) != null ? J : function(e) {
+let Pe = (J = y.startTransition) != null ? J : function(e) {
   e();
 };
-var $e = ((e) => (e[e.Open = 0] = "Open", e[e.Closed = 1] = "Closed", e))($e || {}), Ie = ((e) => (e[e.ToggleDisclosure = 0] = "ToggleDisclosure", e[e.CloseDisclosure = 1] = "CloseDisclosure", e[e.SetButtonId = 2] = "SetButtonId", e[e.SetPanelId = 3] = "SetPanelId", e[e.LinkPanel = 4] = "LinkPanel", e[e.UnlinkPanel = 5] = "UnlinkPanel", e))(Ie || {});
-let Se = { 0: (e) => ({ ...e, disclosureState: M(e.disclosureState, { 0: 1, 1: 0 }) }), 1: (e) => e.disclosureState === 1 ? e : { ...e, disclosureState: 1 }, 4(e) {
+var $e = ((e) => (e[e.Open = 0] = "Open", e[e.Closed = 1] = "Closed", e))($e || {}), Se = ((e) => (e[e.ToggleDisclosure = 0] = "ToggleDisclosure", e[e.CloseDisclosure = 1] = "CloseDisclosure", e[e.SetButtonId = 2] = "SetButtonId", e[e.SetPanelId = 3] = "SetPanelId", e[e.LinkPanel = 4] = "LinkPanel", e[e.UnlinkPanel = 5] = "UnlinkPanel", e))(Se || {});
+let xe = { 0: (e) => ({ ...e, disclosureState: M(e.disclosureState, { 0: 1, 1: 0 }) }), 1: (e) => e.disclosureState === 1 ? e : { ...e, disclosureState: 1 }, 4(e) {
   return e.linkedPanel === !0 ? e : { ...e, linkedPanel: !0 };
 }, 5(e) {
   return e.linkedPanel === !1 ? e : { ...e, linkedPanel: !1 };
-}, 2(e, r) {
-  return e.buttonId === r.buttonId ? e : { ...e, buttonId: r.buttonId };
-}, 3(e, r) {
-  return e.panelId === r.panelId ? e : { ...e, panelId: r.panelId };
-} }, O = C(null);
+}, 2(e, t) {
+  return e.buttonId === t.buttonId ? e : { ...e, buttonId: t.buttonId };
+}, 3(e, t) {
+  return e.panelId === t.panelId ? e : { ...e, panelId: t.panelId };
+} }, O = R(null);
 O.displayName = "DisclosureContext";
 function H(e) {
-  let r = N(O);
-  if (r === null) {
-    let t = new Error(`<${e} /> is missing a parent <Disclosure /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(t, H), t;
+  let t = N(O);
+  if (t === null) {
+    let r = new Error(`<${e} /> is missing a parent <Disclosure /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(r, H), r;
   }
-  return r;
+  return t;
 }
-let j = C(null);
+let j = R(null);
 j.displayName = "DisclosureAPIContext";
 function ee(e) {
-  let r = N(j);
-  if (r === null) {
-    let t = new Error(`<${e} /> is missing a parent <Disclosure /> component.`);
-    throw Error.captureStackTrace && Error.captureStackTrace(t, ee), t;
+  let t = N(j);
+  if (t === null) {
+    let r = new Error(`<${e} /> is missing a parent <Disclosure /> component.`);
+    throw Error.captureStackTrace && Error.captureStackTrace(r, ee), r;
   }
-  return r;
+  return t;
 }
-let U = C(null);
+let U = R(null);
 U.displayName = "DisclosurePanelContext";
-function xe() {
+function De() {
   return N(U);
 }
-function De(e, r) {
-  return M(r.type, Se, e, r);
+function Ee(e, t) {
+  return M(t.type, xe, e, t);
 }
-let Ee = Q;
-function we(e, r) {
-  let { defaultOpen: t = !1, ...d } = e, a = x(null), u = F(r, fe((c) => {
-    a.current = c;
-  }, e.as === void 0 || e.as === Q)), n = x(null), l = x(null), o = ce(De, { disclosureState: t ? 0 : 1, linkedPanel: !1, buttonRef: l, panelRef: n, buttonId: null, panelId: null }), [{ disclosureState: m, buttonId: i }, g] = o, f = D((c) => {
-    g({ type: 1 });
-    let y = ke(a);
-    if (!y || !i) return;
-    let P = c ? c instanceof HTMLElement ? c : c.current instanceof HTMLElement ? c.current : y.getElementById(i) : y.getElementById(i);
+let we = Q;
+function Te(e, t) {
+  let { defaultOpen: r = !1, ...d } = e, n = D(null), i = F(t, fe((c) => {
+    n.current = c;
+  }, e.as === void 0 || e.as === Q)), l = D(null), a = D(null), o = ce(Ee, { disclosureState: r ? 0 : 1, linkedPanel: !1, buttonRef: a, panelRef: l, buttonId: null, panelId: null }), [{ disclosureState: g, buttonId: u }, h] = o, f = E((c) => {
+    h({ type: 1 });
+    let k = me(n);
+    if (!k || !u) return;
+    let P = c ? c instanceof HTMLElement ? c : c.current instanceof HTMLElement ? c.current : k.getElementById(u) : k.getElementById(u);
     P == null || P.focus();
-  }), v = E(() => ({ close: f }), [f]), b = E(() => ({ open: m === 0, close: f }), [m, f]), k = { ref: u };
-  return h.createElement(O.Provider, { value: o }, h.createElement(j.Provider, { value: v }, h.createElement(ve, { value: f }, h.createElement(me, { value: M(m, { 0: w.Open, 1: w.Closed }) }, L({ ourProps: k, theirProps: d, slot: b, defaultTag: Ee, name: "Disclosure" })))));
+  }), v = w(() => ({ close: f }), [f]), b = w(() => ({ open: g === 0, close: f }), [g, f]), m = { ref: i };
+  return y.createElement(O.Provider, { value: o }, y.createElement(j.Provider, { value: v }, y.createElement(ve, { value: f }, y.createElement(ge, { value: M(g, { 0: T.Open, 1: T.Closed }) }, L({ ourProps: m, theirProps: d, slot: b, defaultTag: we, name: "Disclosure" })))));
 }
-let Te = "button";
-function Re(e, r) {
-  let t = X(), { id: d = `headlessui-disclosure-button-${t}`, disabled: a = !1, autoFocus: u = !1, ...n } = e, [l, o] = H("Disclosure.Button"), m = xe(), i = m === null ? !1 : m === l.panelId, g = x(null), f = F(g, r, i ? null : l.buttonRef), v = Z();
+let Ce = "button";
+function Ie(e, t) {
+  let r = X(), { id: d = `headlessui-disclosure-button-${r}`, disabled: n = !1, autoFocus: i = !1, ...l } = e, [a, o] = H("Disclosure.Button"), g = De(), u = g === null ? !1 : g === a.panelId, h = D(null), f = F(h, t, u ? null : a.buttonRef), v = Z();
   Y(() => {
-    if (!i) return o({ type: 2, buttonId: d }), () => {
+    if (!u) return o({ type: 2, buttonId: d }), () => {
       o({ type: 2, buttonId: null });
     };
-  }, [d, o, i]);
-  let b = D((p) => {
+  }, [d, o, u]);
+  let b = E((p) => {
     var $;
-    if (i) {
-      if (l.disclosureState === 1) return;
+    if (u) {
+      if (a.disclosureState === 1) return;
       switch (p.key) {
-        case I.Space:
-        case I.Enter:
-          p.preventDefault(), p.stopPropagation(), o({ type: 0 }), ($ = l.buttonRef.current) == null || $.focus();
+        case S.Space:
+        case S.Enter:
+          p.preventDefault(), p.stopPropagation(), o({ type: 0 }), ($ = a.buttonRef.current) == null || $.focus();
           break;
       }
     } else switch (p.key) {
-      case I.Space:
-      case I.Enter:
+      case S.Space:
+      case S.Enter:
         p.preventDefault(), p.stopPropagation(), o({ type: 0 });
         break;
     }
-  }), k = D((p) => {
+  }), m = E((p) => {
     switch (p.key) {
-      case I.Space:
+      case S.Space:
         p.preventDefault();
         break;
     }
-  }), c = D((p) => {
+  }), c = E((p) => {
     var $;
-    ie(p.currentTarget) || a || (i ? (o({ type: 0 }), ($ = l.buttonRef.current) == null || $.focus()) : o({ type: 0 }));
-  }), { isFocusVisible: y, focusProps: P } = se({ autoFocus: u }), { isHovered: V, hoverProps: z } = ue({ isDisabled: a }), { pressed: A, pressProps: G } = de({ disabled: a }), re = E(() => ({ open: l.disclosureState === 0, hover: V, active: A, disabled: a, focus: y, autofocus: u }), [l, V, A, y, a, u]), K = pe(e, g), le = i ? q({ ref: f, type: K, disabled: a || void 0, autoFocus: u, onKeyDown: b, onClick: c }, P, z, G) : q({ ref: f, id: d, type: K, "aria-expanded": l.disclosureState === 0, "aria-controls": l.linkedPanel ? l.panelId : void 0, disabled: a || void 0, autoFocus: u, onKeyDown: b, onKeyUp: k, onClick: c }, P, z, G);
-  return L({ mergeRefs: v, ourProps: le, theirProps: n, slot: re, defaultTag: Te, name: "Disclosure.Button" });
+    ue(p.currentTarget) || n || (u ? (o({ type: 0 }), ($ = a.buttonRef.current) == null || $.focus()) : o({ type: 0 }));
+  }), { isFocusVisible: k, focusProps: P } = se({ autoFocus: i }), { isHovered: V, hoverProps: z } = ie({ isDisabled: n }), { pressed: A, pressProps: G } = de({ disabled: n }), te = w(() => ({ open: a.disclosureState === 0, hover: V, active: A, disabled: n, focus: k, autofocus: i }), [a, V, A, k, n, i]), K = pe(e, h), le = u ? q({ ref: f, type: K, disabled: n || void 0, autoFocus: i, onKeyDown: b, onClick: c }, P, z, G) : q({ ref: f, id: d, type: K, "aria-expanded": a.disclosureState === 0, "aria-controls": a.linkedPanel ? a.panelId : void 0, disabled: n || void 0, autoFocus: i, onKeyDown: b, onKeyUp: m, onClick: c }, P, z, G);
+  return L({ mergeRefs: v, ourProps: le, theirProps: l, slot: te, defaultTag: Ce, name: "Disclosure.Button" });
 }
-let Ce = "div", Ne = _.RenderStrategy | _.Static;
-function Be(e, r) {
-  let t = X(), { id: d = `headlessui-disclosure-panel-${t}`, transition: a = !1, ...u } = e, [n, l] = H("Disclosure.Panel"), { close: o } = ee("Disclosure.Panel"), m = Z(), i = F(r, n.panelRef, (c) => {
-    Pe(() => l({ type: c ? 4 : 5 }));
+let Re = "div", Ne = _.RenderStrategy | _.Static;
+function Be(e, t) {
+  let r = X(), { id: d = `headlessui-disclosure-panel-${r}`, transition: n = !1, ...i } = e, [l, a] = H("Disclosure.Panel"), { close: o } = ee("Disclosure.Panel"), g = Z(), u = F(t, l.panelRef, (c) => {
+    Pe(() => a({ type: c ? 4 : 5 }));
   });
-  Y(() => (l({ type: 3, panelId: d }), () => {
-    l({ type: 3, panelId: null });
-  }), [d, l]);
-  let g = ge(), [f, v] = he(a, n.panelRef, g !== null ? (g & w.Open) === w.Open : n.disclosureState === 0), b = E(() => ({ open: n.disclosureState === 0, close: o }), [n.disclosureState, o]), k = { ref: i, id: d, ...be(v) };
-  return h.createElement(ye, null, h.createElement(U.Provider, { value: n.panelId }, L({ mergeRefs: m, ourProps: k, theirProps: u, slot: b, defaultTag: Ce, features: Ne, visible: f, name: "Disclosure.Panel" })));
+  Y(() => (a({ type: 3, panelId: d }), () => {
+    a({ type: 3, panelId: null });
+  }), [d, a]);
+  let h = he(), [f, v] = ye(n, l.panelRef, h !== null ? (h & T.Open) === T.Open : l.disclosureState === 0), b = w(() => ({ open: l.disclosureState === 0, close: o }), [l.disclosureState, o]), m = { ref: u, id: d, ...be(v) };
+  return y.createElement(ke, null, y.createElement(U.Provider, { value: l.panelId }, L({ mergeRefs: g, ourProps: m, theirProps: i, slot: b, defaultTag: Re, features: Ne, visible: f, name: "Disclosure.Panel" })));
 }
-let Fe = B(we), R = B(Re), te = B(Be), Me = Object.assign(Fe, { Button: R, Panel: te });
+let Fe = B(Te), I = B(Ie), re = B(Be), Me = Object.assign(Fe, { Button: I, Panel: re });
 function Le(e) {
   return ne({ tag: "svg", attr: { fill: "currentColor", viewBox: "0 0 16 16" }, child: [{ tag: "path", attr: { fillRule: "evenodd", d: "M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708" }, child: [] }] })(e);
 }
 const Je = ({ list: e }) => {
-  const r = oe();
-  return /* @__PURE__ */ s("nav", { className: "w-full bg-white px-4 py-6 dark:bg-gray-950", children: /* @__PURE__ */ s("ul", { children: e && e.map((t, d) => /* @__PURE__ */ s("li", { children: t != null && t.title ? /* @__PURE__ */ s("div", { className: "px-3 py-2 text-sm font-bold dark:text-white", children: t.label }) : t.list ? /* @__PURE__ */ s(Me, { as: "div", children: ({ open: a }) => {
-    var u;
-    return /* @__PURE__ */ T(ae, { children: [
-      /* @__PURE__ */ T(
-        R,
+  const t = oe();
+  return /* @__PURE__ */ s("nav", { className: "w-full bg-white px-4 py-6 dark:bg-gray-950", children: /* @__PURE__ */ s("ul", { children: e && e.map((r, d) => /* @__PURE__ */ s("li", { children: r != null && r.title ? /* @__PURE__ */ s("div", { className: "px-3 py-2 text-sm font-bold dark:text-white", children: r.label }) : r.list ? /* @__PURE__ */ s(Me, { as: "div", children: ({ open: n }) => {
+    var i;
+    return /* @__PURE__ */ C(ae, { children: [
+      /* @__PURE__ */ C(
+        I,
         {
-          className: S(
+          className: x(
             "flex w-full items-center gap-2 rounded p-3 text-left font-semibold hover:bg-primary-50 dark:text-white dark:hover:bg-gray-700"
           ),
           children: [
-            t.icon && /* @__PURE__ */ s(W, { name: t.icon, size: 20 }),
-            /* @__PURE__ */ s("span", { children: t.label }),
+            r.icon && /* @__PURE__ */ s(W, { name: r.icon, size: 20 }),
+            /* @__PURE__ */ s("span", { children: r.label }),
             /* @__PURE__ */ s(
               Le,
               {
-                className: S(
-                  a ? "rotate-90 text-gray-500" : "text-gray-400",
+                className: x(
+                  n ? "rotate-90 text-gray-500" : "text-gray-400",
                   "ml-auto h-4 w-4 shrink-0"
                 ),
                 "aria-hidden": "true"
@@ -142,30 +142,32 @@ const Je = ({ list: e }) => {
           ]
         }
       ),
-      /* @__PURE__ */ s(te, { as: "ul", className: "mt-1 px-2", children: (u = t == null ? void 0 : t.list) == null ? void 0 : u.map((n, l) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
-        R,
+      /* @__PURE__ */ s(re, { as: "ul", className: "mt-1 px-2", children: (i = r == null ? void 0 : r.list) == null ? void 0 : i.map((l, a) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
+        I,
         {
           as: "a",
-          href: n.path,
-          className: S(
+          href: l == null ? void 0 : l.path,
+          className: x(
             "block rounded py-2 pl-9 pr-2 text-gray-700 hover:bg-primary-50 dark:text-white dark:hover:bg-gray-700",
-            r.pathname === n.path && "bg-primary-50 dark:bg-gray-700"
+            t.pathname === l.path && "bg-primary-50 dark:bg-gray-700"
           ),
-          children: n.label
+          onClick: l == null ? void 0 : l.onClick,
+          children: l.label
         }
-      ) }, l)) })
+      ) }, a)) })
     ] });
-  } }) : /* @__PURE__ */ T(
+  } }) : /* @__PURE__ */ C(
     "a",
     {
-      href: t.path,
-      className: S(
+      href: r == null ? void 0 : r.path,
+      className: x(
         "flex w-full items-center justify-start gap-2 rounded p-3 font-semibold hover:bg-primary-50 dark:text-white dark:hover:bg-gray-800",
-        r.pathname === t.path ? "bg-primary-50 dark:bg-gray-800" : ""
+        t.pathname === r.path ? "bg-primary-50 dark:bg-gray-800" : ""
       ),
+      onClick: r == null ? void 0 : r.onClick,
       children: [
-        t.icon && /* @__PURE__ */ s(W, { name: t.icon, size: 20 }),
-        /* @__PURE__ */ s("span", { children: t.label })
+        r.icon && /* @__PURE__ */ s(W, { name: r.icon, size: 20 }),
+        /* @__PURE__ */ s("span", { children: r.label })
       ]
     }
   ) }, d)) }) });

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,16 +1,15 @@
-import { default as React } from 'react';
 import { SelectOption, ValueField } from '../Selectbox/SelectboxBase';
 
-export type RadioGroupProps = {
+export type RadioGroupProps<ListOption extends SelectOption> = {
     id?: string;
     name: string;
-    options: SelectOption[];
+    options: ListOption[];
     value: string;
     readOnly?: boolean;
     className?: string;
     placeholder?: string;
     onChange: (value: string) => void;
-    valueField?: ValueField;
+    valueField?: ValueField<ListOption>;
 };
-declare const RadioGroup: React.FC<RadioGroupProps>;
+declare const RadioGroup: <ListOption extends SelectOption>({ options, value, valueField, onChange, }: RadioGroupProps<ListOption>) => import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;

package/dist/components/Selectbox/FormSelectbox.d.ts

@@ -1,8 +1,11 @@
 import { default as React } from 'react';
 import { SelectboxProps, SelectboxHandler } from './Selectbox';
+import { SelectOption } from './SelectboxBase';
 
-export type FormSelectboxProps = SelectboxProps & {
+export type FormSelectboxProps<ListOption extends SelectOption> = SelectboxProps<ListOption> & {
     name: string;
 };
-declare const _default: React.ForwardRefExoticComponent<FormSelectboxProps & React.RefAttributes<SelectboxHandler>>;
+declare const _default: <ListOption extends SelectOption>(props: FormSelectboxProps<ListOption> & {
+    ref?: React.Ref<SelectboxHandler>;
+}) => React.ReactElement;
 export default _default;

package/dist/components/Selectbox/Selectbox.d.ts

@@ -1,10 +1,12 @@
 import { default as React } from 'react';
-import { SelectboxBaseProps, SelectboxBaseHandler } from './SelectboxBase';
+import { SelectboxBaseProps, SelectboxBaseHandler, SelectOption } from './SelectboxBase';
 import { SelectboxMultipleProps, SelectboxMultipleHandler } from './SelectboxMultiple';
 
-export type SelectboxProps = (SelectboxBaseProps | SelectboxMultipleProps) & {
+export type SelectboxProps<ListOption extends SelectOption> = (SelectboxBaseProps<ListOption> | SelectboxMultipleProps<ListOption>) & {
     multiple?: boolean;
 };
 export type SelectboxHandler = SelectboxBaseHandler | SelectboxMultipleHandler;
-declare const _default: React.ForwardRefExoticComponent<SelectboxProps & React.RefAttributes<SelectboxHandler>>;
+declare const _default: <ListOption extends SelectOption>(props: SelectboxProps<ListOption> & {
+    ref?: React.Ref<SelectboxHandler>;
+}) => React.ReactElement;
 export default _default;

package/dist/components/Selectbox/SelectboxBase.d.ts

@@ -1,33 +1,35 @@
 import { default as React } from 'react';
 
-export type ValueCallback = (option: SelectOption) => string;
-export type ValueField = ValueCallback | "id" | "value" | "label" | string;
+export type ValueCallback<ListOption extends SelectOption> = (option: ListOption) => string;
+export type ValueField<ListOption extends SelectOption> = ValueCallback<ListOption> | "id" | "value" | "label" | string;
 export type SelectOption = {
     id: string | number;
     label: string;
     value: string | number;
     enable: boolean;
 };
-export type Action = {
+export type Action<ListOption extends SelectOption> = {
     type: "SETVALUE";
     value: string;
 } | {
     type: "SETSELECT";
-    selected: SelectOption;
+    selected: ListOption;
 };
-export type SelectboxBaseProps = {
+export type SelectboxBaseProps<ListOption extends SelectOption> = {
     id?: string;
     name: string;
-    options: SelectOption[];
+    options: ListOption[];
     value: string | number;
     readOnly?: boolean;
     className?: string;
     placeholder?: string;
     onChange: (value: string | number) => void;
-    valueField?: ValueField;
+    valueField?: ValueField<ListOption>;
 };
 export type SelectboxBaseHandler = {
     setValue: (value: string | number) => void;
 };
-declare const _default: React.ForwardRefExoticComponent<SelectboxBaseProps & React.RefAttributes<SelectboxBaseHandler>>;
+declare const _default: <ListOption extends SelectOption>(props: SelectboxBaseProps<ListOption> & {
+    ref?: React.Ref<SelectboxBaseHandler>;
+}) => React.ReactElement;
 export default _default;

package/dist/components/Selectbox/SelectboxMultiple.d.ts

@@ -4,16 +4,18 @@ import { SelectOption, ValueField } from './SelectboxBase';
 export type SelectboxMultipleHandler = {
     setValue: (value: string[]) => void;
 };
-export interface SelectboxMultipleProps {
+export interface SelectboxMultipleProps<ListOption extends SelectOption> {
     id?: string;
-    options: SelectOption[];
+    options: ListOption[];
     name: string;
     value?: string[] | number[];
     readOnly?: boolean;
     className?: string;
     placeholder?: string;
     onChange?: (value: string[] | number[]) => void;
-    valueField?: ValueField;
+    valueField?: ValueField<ListOption>;
 }
-declare const _default: React.ForwardRefExoticComponent<SelectboxMultipleProps & React.RefAttributes<SelectboxMultipleHandler>>;
+declare const _default: <ListOption extends SelectOption>(props: SelectboxMultipleProps<ListOption> & {
+    ref?: React.Ref<SelectboxMultipleHandler>;
+}) => React.ReactElement;
 export default _default;

package/dist/components/Selectbox/helper.d.ts

@@ -1,3 +1,3 @@
 import { SelectOption, ValueField } from './SelectboxBase';
 
-export declare const getValue: (option: SelectOption, valueField: ValueField) => string;
+export declare const getValue: <ListOption extends SelectOption>(option: ListOption, valueField: ValueField<ListOption>) => string;

package/dist/hooks/useLocalStorage.d.ts

@@ -1 +1 @@
-export declare const useLocalStorage: (name: string, defaultValue?: boolean | string | number | object | null) => any[];
+export declare const useLocalStorage: <ValueType extends unknown>(name: string, defaultValue?: ValueType) => any[];

package/dist/hooks/useLocalStorage.js

@@ -15,10 +15,7 @@ const f = (e, n) => {
     window.localStorage.setItem(
       r,
       JSON.stringify(
-        o.reduce(
-          (t, c, a) => a === e ? t : { ...t, [a]: c },
-          {}
-        )
+        o.reduce((t, c, a) => a === e ? t : { ...t, [a]: c }, {})
       )
     );
   }, [r]);

package/dist/layouts/SideMenu/SideMenu.js

@@ -1,6 +1,6 @@
-import { jsxs as i, Fragment as m, jsx as r } from "react/jsx-runtime";
-import o, { Fragment as c } from "react";
-import { useLocalStorage as w } from "../../hooks/useLocalStorage.js";
+import { jsxs as i, Fragment as m, jsx as n } from "react/jsx-runtime";
+import o, { Fragment as w } from "react";
+import { useLocalStorage as c } from "../../hooks/useLocalStorage.js";
 import { t as u } from "../../bundle-mjs-SHnj3fHy.js";
 import { X as h } from "../../transition-6o20faRl.js";
 const p = (e, t) => t.type === "toggleSmMenu" ? {
@@ -9,10 +9,10 @@ const p = (e, t) => t.type === "toggleSmMenu" ? {
 } : t.type === "toggleLgMenu" ? {
   ...e,
   showLgMenu: !e.showLgMenu
-} : e, M = ({ header: e, menu: t, menuType: n = "static", children: d }, f) => {
-  const [a, g] = w("menuOpen", !0), [l, s] = o.useReducer(p, {
+} : e, M = ({ header: e, menu: t, menuType: r = "static", children: d }, f) => {
+  const [a, g] = c("menuOpen", !0), [l, s] = o.useReducer(p, {
     showSmMenu: !1,
-    showLgMenu: n === "fixed" ? !1 : a
+    showLgMenu: r === "fixed" ? !1 : a
   });
   return o.useImperativeHandle(f, () => ({
     toggleMenu: () => {
@@ -24,10 +24,10 @@ const p = (e, t) => t.type === "toggleSmMenu" ? {
   })), o.useEffect(() => {
     s({
       type: "setLgMenu",
-      menuOpen: n === "fixed" ? !1 : a
+      menuOpen: r === "fixed" ? !1 : a
     });
-  }, [a, n]), /* @__PURE__ */ i(m, { children: [
-    /* @__PURE__ */ r("div", { className: "fixed top-0 w-full left-0 right-0 z-10", children: e }),
+  }, [a, r]), /* @__PURE__ */ i(m, { children: [
+    /* @__PURE__ */ n("div", { className: "fixed top-0 w-full left-0 right-0 z-10", children: e }),
     /* @__PURE__ */ i(
       "div",
       {
@@ -35,10 +35,10 @@ const p = (e, t) => t.type === "toggleSmMenu" ? {
           "flex min-h-full w-full min-w-min flex-col pt-[56px]"
         ),
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ n(
             h,
             {
-              as: c,
+              as: w,
               show: l.showSmMenu,
               enter: "transform transition duration-300",
               enterFrom: "-translate-y-0",
@@ -46,26 +46,27 @@ const p = (e, t) => t.type === "toggleSmMenu" ? {
               leave: "transform transition duration-200 ease-in-out",
               leaveFrom: "translate-y-0",
               leaveTo: "-translate-y-full",
-              children: /* @__PURE__ */ r("div", { className: "absolute bottom-0 top-14 z-10 flex w-full bg-white shadow dark:bg-gray-900 lg:hidden", children: t })
+              children: /* @__PURE__ */ n("div", { className: "absolute bottom-0 top-14 z-10 flex w-full bg-white shadow dark:bg-gray-900 lg:hidden", children: t })
             }
           ),
           /* @__PURE__ */ i("div", { className: "flex w-full flex-auto", children: [
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ n(
               "div",
               {
                 className: u(
-                  "hidden w-[320px] shadow dark:shadow-gray-800 dark:bg-gray-900 lg:flex fixed top-[56px] left-0 bottom-0 transform transition duration-300",
+                  "hidden w-[320px] shadow bg-white dark:shadow-gray-800 dark:bg-gray-900 lg:flex fixed top-[56px] left-0 bottom-0 transform transition duration-300",
+                  r === "fixed" && "z-50",
                   l.showLgMenu === !0 ? "translate-x-0" : "-translate-x-full"
                 ),
                 children: t
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ n(
               "div",
               {
                 className: u(
                   "grow",
-                  l.showLgMenu === !0 && n === "static" ? "lg:pl-[320px]" : ""
+                  l.showLgMenu === !0 && r === "static" ? "lg:pl-[320px]" : ""
                 ),
                 children: d
               }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anysystem-design",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",