anysystem-design 0.0.48 → 0.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +66 -7
  2. package/dist/components/AutoComplete/AutoCompleteBase.js +16 -16
  3. package/dist/components/AutoComplete/AutoCompleteMultiple.js +20 -20
  4. package/dist/components/Checkbox/CheckboxBase.js +10 -10
  5. package/dist/components/DataTable/components/FieldSelectbox.js +23 -23
  6. package/dist/components/Input/Input.d.ts +1 -1
  7. package/dist/components/PasswordInput/PasswordInput.js +1 -1
  8. package/dist/components/RadioGroup/RadioGroup.js +22 -22
  9. package/dist/components/Selectbox/SelectboxBase.js +48 -48
  10. package/dist/components/Selectbox/SelectboxMultiple.js +53 -53
  11. package/dist/index.css +1 -1
  12. package/package.json +12 -11
package/README.md CHANGED
@@ -1,27 +1,86 @@
1
1
  # Anysystem Design
2
2
  Powerful open source libraries for React and Tailwind CSS.
3
3
 
4
- ## Usage Guide
4
+ ## 📚 Documentation
5
+
6
+ **[View Complete Documentation](./docs/INDEX.md)**
7
+
8
+ - **[Getting Started Guide](./docs/GETTING_STARTED.md)** - Installation and setup
9
+ - **[Component Catalog](./docs/COMPONENT_CATALOG.md)** - Complete component reference
10
+ - **[API Documentation](./docs/README.md)** - Detailed API docs
11
+
12
+ ### Quick Links
13
+ - [Button](./docs/components/Button.md)
14
+ - [Input & Forms](./docs/components/Input.md)
15
+ - [Modal](./docs/components/Modal.md)
16
+ - [DataTable](./docs/components/DataTable.md)
17
+ - [Layouts](./docs/layouts/SideMenuLayout.md)
18
+
19
+ ## 🌐 Usage Guide
5
20
  Please visit [https://david-marstree.github.io/anysystem](https://david-marstree.github.io/anysystem)
6
21
 
7
- ## Getting started
22
+ ## ⚡ Quick Start
23
+
24
+ ### Installation
8
25
  ```bash
9
26
  npm install anysystem-design
10
27
  ```
11
- ### Basic usage
28
+
29
+ ### Basic Usage
12
30
 
13
31
  ```javascript
14
- import {
15
- AppProvider,
16
- Button
32
+ import {
33
+ AppProvider,
34
+ Button
17
35
  } from "anysystem-design";
18
36
 
19
37
  export default function App() {
20
38
  return (
21
39
  <AppProvider appName="anysystem">
22
- <Button>Button</Button>
40
+ <Button variant="primary">Click Me</Button>
23
41
  </AppProvider>
24
42
  );
25
43
  }
26
44
  ```
27
45
 
46
+ ### Form Example
47
+
48
+ ```javascript
49
+ import { Formik, Form } from 'formik';
50
+ import { FormControl, FormInput, Button } from 'anysystem-design';
51
+
52
+ function MyForm() {
53
+ return (
54
+ <Formik
55
+ initialValues={{ email: '' }}
56
+ onSubmit={(values) => console.log(values)}
57
+ >
58
+ <Form>
59
+ <FormControl name="email" label="Email" required>
60
+ <FormInput name="email" type="email" />
61
+ </FormControl>
62
+ <Button type="submit" variant="primary">Submit</Button>
63
+ </Form>
64
+ </Formik>
65
+ );
66
+ }
67
+ ```
68
+
69
+ ## 🎨 Features
70
+
71
+ - **20+ Components** - Complete UI component library
72
+ - **Form-First Design** - Extensive Formik integration
73
+ - **TypeScript Support** - Full type definitions
74
+ - **Responsive** - Mobile-first design
75
+ - **Tailwind CSS** - Utility-first styling
76
+ - **Accessible** - ARIA compliant components
77
+ - **Tree Shakeable** - Import only what you need
78
+
79
+ ## 📦 What's Included
80
+
81
+ - **Form Components**: Input, Select, Checkbox, Radio, DatePicker, etc.
82
+ - **Layout Components**: Container, Row, Column, SideMenuLayout
83
+ - **Interactive**: Button, Modal
84
+ - **Data Display**: DataTable, Text
85
+ - **Navigation**: Navbar, NavList
86
+
package/dist/components/AutoComplete/AutoCompleteBase.js CHANGED
@@ -4,43 +4,43 @@ import { t as f } from "../../bundle-mjs-SHnj3fHy.js";
4
4
  import { H as E } from "../../index-BVp57yIc.js";
5
5
  import { c as C } from "../../index-CBEJ8A3p.js";
6
6
  import { G as w } from "../../iconBase-Bipuk9tK.js";
7
- import { getValue as c } from "../Selectbox/helper.js";
7
+ import { getValue as d } from "../Selectbox/helper.js";
8
8
  import { N, G as A, H as L, z as S, K as H } from "../../combobox-BGEhR2HT.js";
9
- import { X as T } from "../../transition-6o20faRl.js";
10
- function R(t) {
9
+ import { X as k } from "../../transition-6o20faRl.js";
10
+ function T(t) {
11
11
  return w({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z" }, child: [] }] })(t);
12
12
  }
13
- const k = (t, a) => a.type === "SEARCH" ? {
13
+ const R = (t, a) => a.type === "SEARCH" ? {
14
14
  ...t,
15
15
  query: a.query,
16
16
  filterList: t.list.filter((l) => l.label.toLowerCase().includes(a.query.toLowerCase()))
17
17
  } : a.type === "SETVALUE" ? {
18
18
  ...t,
19
19
  value: a.value,
20
- selected: t.list.find((l) => c(l, t.valueField) === a.value) || null
20
+ selected: t.list.find((l) => d(l, t.valueField) === a.value) || null
21
21
  } : a.type === "SETSELECT" ? {
22
22
  ...t,
23
23
  selected: a.selected,
24
- value: c(a.selected, t.valueField) + ""
24
+ value: d(a.selected, t.valueField) + ""
25
25
  } : t, q = ({
26
26
  id: t,
27
27
  name: a,
28
28
  options: l,
29
29
  value: i = "",
30
- valueField: d = "value",
30
+ valueField: c = "value",
31
31
  onChange: u,
32
32
  onSearch: p,
33
33
  placeholder: v,
34
34
  closeButton: g = !0
35
35
  }, b) => {
36
- const [n, s] = y.useReducer(k, {
36
+ const [n, s] = y.useReducer(R, {
37
37
  list: l,
38
38
  query: "",
39
39
  filterList: l,
40
40
  value: i,
41
- valueField: d,
41
+ valueField: c,
42
42
  selected: l.find((e) => {
43
- const o = c(e, d);
43
+ const o = d(e, c);
44
44
  return i ? o === i : !1;
45
45
  }) || null
46
46
  });
@@ -55,7 +55,7 @@ const k = (t, a) => a.type === "SEARCH" ? {
55
55
  s({
56
56
  type: "SETSELECT",
57
57
  selected: e
58
- }), u && u(e ? c(e, d) : "");
58
+ }), u && u(e ? d(e, c) : "");
59
59
  },
60
60
  children: /* @__PURE__ */ m("div", { className: "relative", children: [
61
61
  /* @__PURE__ */ r(
@@ -75,14 +75,14 @@ const k = (t, a) => a.type === "SEARCH" ? {
75
75
  {
76
76
  type: "button",
77
77
  className: f(
78
- "size-5 text-gray-400 hover:text-gray-500 rounded-full hover:bg-gray-200 items-center flex justify-center",
78
+ "size-5 text-gray-400 hover:text-gray-500 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 items-center flex justify-center",
79
79
  n.value ? "" : "hidden",
80
80
  g ? "" : "!hidden"
81
81
  ),
82
82
  onClick: () => {
83
83
  s({ type: "SETVALUE", value: "" }), s({ type: "SEARCH", query: "" }), u && u("");
84
84
  },
85
- children: /* @__PURE__ */ r(R, {})
85
+ children: /* @__PURE__ */ r(T, {})
86
86
  }
87
87
  ),
88
88
  /* @__PURE__ */ r(L, { className: "items-center", children: /* @__PURE__ */ r(
@@ -105,7 +105,7 @@ const k = (t, a) => a.type === "SEARCH" ? {
105
105
  }
106
106
  ),
107
107
  /* @__PURE__ */ r(
108
- T,
108
+ k,
109
109
  {
110
110
  as: h,
111
111
  enter: "transition duration-100 ease-out",
@@ -119,8 +119,8 @@ const k = (t, a) => a.type === "SEARCH" ? {
119
119
  "li",
120
120
  {
121
121
  className: f(
122
- "relative flex cursor-pointer justify-between px-5 py-4 text-black hover:bg-primary-100 dark:text-white",
123
- (o || x) && "bg-primary-100 dark:bg-gray-700",
122
+ "relative flex cursor-pointer justify-between px-5 py-4 text-black hover:bg-primary-100 dark:text-white dark:hover:bg-primary-900",
123
+ (o || x) && "bg-primary-100 dark:bg-primary-900",
124
124
  e.enable === !1 && "cursor-not-allowed opacity-50"
125
125
  ),
126
126
  children: [
package/dist/components/AutoComplete/AutoCompleteMultiple.js CHANGED
@@ -6,7 +6,7 @@ import { H as C } from "../../index-BVp57yIc.js";
6
6
  import { c as w } from "../../index-CBEJ8A3p.js";
7
7
  import { g as N } from "../../index-Be1bsSGe.js";
8
8
  import { getValue as o } from "../Selectbox/helper.js";
9
- import { N as L, G as S, H as T, z as k, K as q } from "../../combobox-BGEhR2HT.js";
9
+ import { N as L, G as S, H as k, z as T, K as q } from "../../combobox-BGEhR2HT.js";
10
10
  import { X as A } from "../../transition-6o20faRl.js";
11
11
  const R = (r, t) => {
12
12
  if (t.type === "SEARCH")
@@ -20,8 +20,8 @@ const R = (r, t) => {
20
20
  ...r,
21
21
  value: t.value,
22
22
  selected: r.list.filter((a) => {
23
- const i = o(a, r.valueField);
24
- return t.value.includes(i);
23
+ const u = o(a, r.valueField);
24
+ return t.value.includes(u);
25
25
  }) || [],
26
26
  query: ""
27
27
  };
@@ -33,10 +33,10 @@ const R = (r, t) => {
33
33
  query: ""
34
34
  };
35
35
  if (t.type === "REMOVESELECT") {
36
- const a = o(t.selected, r.valueField), i = r.value.filter((n) => n !== a);
36
+ const a = o(t.selected, r.valueField), u = r.value.filter((n) => n !== a);
37
37
  return {
38
38
  ...r,
39
- value: i,
39
+ value: u,
40
40
  selected: r.selected ? r.selected.filter((n) => o(n, r.valueField) !== a) : []
41
41
  };
42
42
  }
@@ -45,7 +45,7 @@ const R = (r, t) => {
45
45
  id: r,
46
46
  name: t,
47
47
  value: a = [],
48
- options: i,
48
+ options: u,
49
49
  valueField: n = "value",
50
50
  onChange: f,
51
51
  onSearch: y,
@@ -54,13 +54,13 @@ const R = (r, t) => {
54
54
  var h;
55
55
  const [s, c] = p.useReducer(R, {
56
56
  query: "",
57
- list: i,
58
- filterList: i,
57
+ list: u,
58
+ filterList: u,
59
59
  value: a || [],
60
60
  valueField: n,
61
- selected: i.filter((e) => {
62
- const u = o(e, n);
63
- return x.some(a, (d) => d + "" == u + "");
61
+ selected: u.filter((e) => {
62
+ const i = o(e, n);
63
+ return x.some(a, (d) => d + "" == i + "");
64
64
  }) || []
65
65
  });
66
66
  return p.useImperativeHandle(b, () => ({
@@ -79,12 +79,12 @@ const R = (r, t) => {
79
79
  type: "SETSELECT",
80
80
  selected: e
81
81
  });
82
- const u = (e == null ? void 0 : e.map((d) => o(d, n))) || [];
83
- f && f(u);
82
+ const i = (e == null ? void 0 : e.map((d) => o(d, n))) || [];
83
+ f && f(i);
84
84
  },
85
85
  multiple: !0,
86
86
  children: /* @__PURE__ */ m("div", { className: "relative flex gap-1", children: [
87
- s.selected.length > 0 && /* @__PURE__ */ l("ul", { className: "flex form-control gap-1 transform translate-y-[12px]", children: (h = s.selected) == null ? void 0 : h.map((e, u) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ m("div", { className: "flex p-1 rounded bg-blue-50 dark:bg-blue-900", children: [
87
+ s.selected.length > 0 && /* @__PURE__ */ l("ul", { className: "flex form-control gap-1 transform translate-y-[12px]", children: (h = s.selected) == null ? void 0 : h.map((e, i) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ m("div", { className: "flex p-1 rounded bg-blue-50 dark:bg-blue-900", children: [
88
88
  /* @__PURE__ */ l("span", { className: "text-xs whitespace-nowrap", children: e.label }),
89
89
  /* @__PURE__ */ l(
90
90
  "button",
@@ -94,7 +94,7 @@ const R = (r, t) => {
94
94
  children: /* @__PURE__ */ l(N, { fontSize: 12, className: "font-bold" })
95
95
  }
96
96
  )
97
- ] }) }, u)) }),
97
+ ] }) }, i)) }),
98
98
  /* @__PURE__ */ l(
99
99
  S,
100
100
  {
@@ -112,7 +112,7 @@ const R = (r, t) => {
112
112
  autoComplete: "off"
113
113
  }
114
114
  ),
115
- /* @__PURE__ */ l(T, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ l(
115
+ /* @__PURE__ */ l(k, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ l(
116
116
  C,
117
117
  {
118
118
  className: "w-5 h-5 text-gray-400",
@@ -141,17 +141,17 @@ const R = (r, t) => {
141
141
  leaveFrom: "scale-100 transform opacity-100",
142
142
  leaveTo: "scale-95 transform opacity-0",
143
143
  afterLeave: () => c({ type: "SEARCH", query: "" }),
144
- children: /* @__PURE__ */ l(k, { className: "absolute w-full py-1 mt-10 overflow-auto text-base bg-white shadow-lg max-h-60 rounded-md ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: s.filterList.map((e) => /* @__PURE__ */ l(q, { as: v, value: e, children: ({ selected: u, focus: d }) => /* @__PURE__ */ m(
144
+ children: /* @__PURE__ */ l(T, { className: "absolute w-full py-1 mt-10 overflow-auto text-base bg-white shadow-lg max-h-60 rounded-md ring-1 ring-black/5 dark:ring-gray-700 focus:outline-none dark:bg-gray-900 sm:text-sm", children: s.filterList.map((e) => /* @__PURE__ */ l(q, { as: v, value: e, children: ({ selected: i, focus: d }) => /* @__PURE__ */ m(
145
145
  "li",
146
146
  {
147
147
  className: g(
148
- "relative flex cursor-pointer justify-between px-5 py-4 text-black hover:bg-primary-100 dark:text-white",
149
- (u || d) && "bg-primary-100 dark:bg-gray-700",
148
+ "relative flex cursor-pointer justify-between px-5 py-4 text-black hover:bg-primary-100 dark:text-white dark:hover:bg-primary-900",
149
+ (i || d) && "bg-primary-100 dark:bg-primary-900",
150
150
  e.enable === !1 && "cursor-not-allowed opacity-50"
151
151
  ),
152
152
  children: [
153
153
  /* @__PURE__ */ l("span", { className: "pl-5", children: e.label }),
154
- u ? /* @__PURE__ */ l(
154
+ i ? /* @__PURE__ */ l(
155
155
  "span",
156
156
  {
157
157
  className: g(
package/dist/components/Checkbox/CheckboxBase.js CHANGED
@@ -2,19 +2,19 @@ import { jsxs as i, jsx as r } from "react/jsx-runtime";
2
2
  import d from "react";
3
3
  import { b as s, c as u } from "../../index-Be1bsSGe.js";
4
4
  import { t as f } from "../../bundle-mjs-SHnj3fHy.js";
5
- const w = ({
5
+ const y = ({
6
6
  className: n,
7
7
  isError: c,
8
- inputProps: t,
8
+ inputProps: a,
9
9
  intermediate: o = !1,
10
10
  ...l
11
11
  }) => {
12
- const a = d.useRef(null);
12
+ const t = d.useRef(null);
13
13
  return /* @__PURE__ */ i("div", { className: "relative w-5 h-5 overflow-hidden rounded", children: [
14
14
  /* @__PURE__ */ r(
15
15
  "input",
16
16
  {
17
- ref: a,
17
+ ref: t,
18
18
  type: "checkbox",
19
19
  className: f(
20
20
  "relative ",
@@ -24,17 +24,17 @@ const w = ({
24
24
  c && "border-red-500",
25
25
  n
26
26
  ),
27
- value: (t == null ? void 0 : t.value) || (l == null ? void 0 : l.value) || "",
27
+ value: (a == null ? void 0 : a.value) || (l == null ? void 0 : l.value) || "",
28
28
  ...l
29
29
  }
30
30
  ),
31
31
  o === !0 && /* @__PURE__ */ r(
32
32
  "span",
33
33
  {
34
- className: "absolute left-1/2 top-1/2 flex h-[150%] w-[150%] -translate-x-1/2 -translate-y-1/2 transform items-center justify-center overflow-hidden rounded font-bold text-primary-600 dark:fill-primary-600 bg-white cursor-pointer",
34
+ className: "absolute left-1/2 top-1/2 flex h-[150%] w-[150%] -translate-x-1/2 -translate-y-1/2 transform items-center justify-center overflow-hidden rounded font-bold text-primary-600 dark:fill-primary-600 bg-white dark:bg-gray-900 cursor-pointer",
35
35
  onClick: () => {
36
36
  var e;
37
- return (e = a.current) == null ? void 0 : e.click();
37
+ return (e = t.current) == null ? void 0 : e.click();
38
38
  },
39
39
  children: /* @__PURE__ */ r(s, { className: "w-full h-full rounded" })
40
40
  }
@@ -42,10 +42,10 @@ const w = ({
42
42
  /* @__PURE__ */ r(
43
43
  "span",
44
44
  {
45
- className: "absolute left-1/2 top-1/2 hidden h-[150%] w-[150%] -translate-x-1/2 -translate-y-1/2 transform items-center justify-center overflow-hidden rounded font-bold text-primary-600 peer-checked:flex dark:fill-primary-600 bg-white cursor-pointer",
45
+ className: "absolute left-1/2 top-1/2 hidden h-[150%] w-[150%] -translate-x-1/2 -translate-y-1/2 transform items-center justify-center overflow-hidden rounded font-bold text-primary-600 peer-checked:flex dark:fill-primary-600 bg-white dark:bg-gray-900 cursor-pointer",
46
46
  onClick: () => {
47
47
  var e;
48
- return (e = a.current) == null ? void 0 : e.click();
48
+ return (e = t.current) == null ? void 0 : e.click();
49
49
  },
50
50
  children: /* @__PURE__ */ r(u, { className: "w-full h-full rounded" })
51
51
  }
@@ -53,5 +53,5 @@ const w = ({
53
53
  ] });
54
54
  };
55
55
  export {
56
- w as CheckboxBase
56
+ y as CheckboxBase
57
57
  };
package/dist/components/DataTable/components/FieldSelectbox.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsxs as n, jsx as s, Fragment as F } from "react/jsx-runtime";
2
- import w, { Fragment as k } from "react";
1
+ import { jsxs as n, jsx as a, Fragment as k } from "react/jsx-runtime";
2
+ import F, { Fragment as w } from "react";
3
3
  import { A as N, a as T } from "../../../index-Be1bsSGe.js";
4
4
  import { t as c } from "../../../bundle-mjs-SHnj3fHy.js";
5
5
  import { u as C, a as D, b as S, c as j, d as M, e as R } from "../../../calculate-active-index-DbdO98Z_.js";
@@ -8,15 +8,15 @@ import { o as E, f as P, s as U, a as _ } from "../../../floating-ui.react-dom-B
8
8
  import { M as B, U as G, G as I, V } from "../../../listbox-BHRihzeO.js";
9
9
  import { X } from "../../../transition-6o20faRl.js";
10
10
  const W = () => {
11
- const { fields: a, state: i, dispatch: m } = w.useContext(A), { refs: l, x: d, y: u, strategy: p, floatingStyles: f, context: o } = C({
11
+ const { fields: s, state: i, dispatch: d } = F.useContext(A), { refs: l, x: m, y: u, strategy: p, floatingStyles: f, context: r } = C({
12
12
  open: !0,
13
13
  middleware: [E(10), P(), U()],
14
14
  whileElementsMounted: _
15
15
  // placement: "bottom-end",
16
- }), h = D(o, { move: !1 }), y = S(o), g = j(o), x = M(o, { role: "tooltip" }), { getReferenceProps: v, getFloatingProps: b } = R([
17
- h,
16
+ }), y = D(r, { move: !1 }), g = S(r), h = j(r), x = M(r, { role: "tooltip" }), { getReferenceProps: v, getFloatingProps: b } = R([
18
17
  y,
19
18
  g,
19
+ h,
20
20
  x
21
21
  ]);
22
22
  return /* @__PURE__ */ n(
@@ -24,67 +24,67 @@ const W = () => {
24
24
  {
25
25
  as: "div",
26
26
  className: "absolute top-2 right-2",
27
- value: a.filter((t) => i.DTShowFields.includes(t.key)),
27
+ value: s.filter((t) => i.DTShowFields.includes(t.key)),
28
28
  multiple: !0,
29
29
  onChange: (t) => {
30
- const r = t.map((e) => e.key);
31
- m({
30
+ const o = t.map((e) => e.key);
31
+ d({
32
32
  type: "SET_FIELD",
33
- fields: t.length === 0 ? a.every((e) => !(e != null && e.default)) ? a : a.filter((e) => !!(e != null && e.default)) : a.filter((e) => r.includes(e.key))
33
+ fields: t.length === 0 ? s.every((e) => !(e != null && e.default)) ? s : s.filter((e) => !!(e != null && e.default)) : s.filter((e) => o.includes(e.key))
34
34
  });
35
35
  },
36
36
  ref: l.setReference,
37
37
  ...v(),
38
38
  children: [
39
- /* @__PURE__ */ s(G, { className: "inline-flex justify-between !p-0 focus:outline-none", children: /* @__PURE__ */ s(
39
+ /* @__PURE__ */ a(G, { className: "inline-flex justify-between !p-0 focus:outline-none", children: /* @__PURE__ */ a(
40
40
  N,
41
41
  {
42
42
  className: "w-5 h-5 text-gray-400 cursor-pointer",
43
43
  "aria-hidden": "true"
44
44
  }
45
45
  ) }),
46
- /* @__PURE__ */ s(
46
+ /* @__PURE__ */ a(
47
47
  X,
48
48
  {
49
- as: k,
49
+ as: w,
50
50
  enter: "transition duration-100 ease-out",
51
51
  enterFrom: "scale-95 transform opacity-0",
52
52
  enterTo: "scale-100 transform opacity-100",
53
53
  leave: "transition duration-75 ease-in",
54
54
  leaveFrom: "scale-100 transform opacity-100",
55
55
  leaveTo: "scale-95 transform opacity-0",
56
- children: /* @__PURE__ */ s(
56
+ children: /* @__PURE__ */ a(
57
57
  I,
58
58
  {
59
59
  anchor: "bottom",
60
- className: "z-[999] mt-2 inline-block w-48 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
60
+ className: "z-[999] mt-2 inline-block w-48 origin-top-right divide-y divide-gray-100 dark:divide-gray-700 rounded-md bg-white dark:bg-gray-950 shadow-lg ring-1 ring-black ring-opacity-5 dark:ring-gray-700 focus:outline-none",
61
61
  ref: l.setFloating,
62
62
  style: f,
63
63
  ...b({
64
64
  style: {
65
65
  position: p,
66
66
  top: u ?? "",
67
- left: d ?? ""
67
+ left: m ?? ""
68
68
  }
69
69
  }),
70
- children: /* @__PURE__ */ s("div", { className: "flex flex-col px-1 py-1", children: a.map((t) => {
71
- var r;
72
- return /* @__PURE__ */ s(
70
+ children: /* @__PURE__ */ a("div", { className: "flex flex-col px-1 py-1", children: s.map((t) => {
71
+ var o;
72
+ return /* @__PURE__ */ a(
73
73
  V,
74
74
  {
75
75
  className: c(
76
- "relative flex justify-between px-3 py-2 text-black cursor-pointer select-none hover:bg-primary-100"
76
+ "relative flex justify-between px-3 py-2 text-black dark:text-white cursor-pointer select-none hover:bg-primary-100 dark:hover:bg-primary-900"
77
77
  ),
78
78
  value: t,
79
- children: /* @__PURE__ */ n(F, { children: [
80
- /* @__PURE__ */ s("span", { className: "pl-6", children: t.label }),
81
- ((r = i.DTShowFields) == null ? void 0 : r.includes(t.key)) && /* @__PURE__ */ s(
79
+ children: /* @__PURE__ */ n(k, { children: [
80
+ /* @__PURE__ */ a("span", { className: "pl-6", children: t.label }),
81
+ ((o = i.DTShowFields) == null ? void 0 : o.includes(t.key)) && /* @__PURE__ */ a(
82
82
  "span",
83
83
  {
84
84
  className: c(
85
85
  "absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600"
86
86
  ),
87
- children: /* @__PURE__ */ s(T, { className: "w-5 h-4", "aria-hidden": "true" })
87
+ children: /* @__PURE__ */ a(T, { className: "w-5 h-4", "aria-hidden": "true" })
88
88
  }
89
89
  )
90
90
  ] })
package/dist/components/Input/Input.d.ts CHANGED
@@ -4,5 +4,5 @@ import { InputBaseProps } from './InputBase';
4
4
  export type InputProps = InputBaseProps;
5
5
  declare const _default: (props: InputProps & {
6
6
  ref?: React.Ref<HTMLInputElement>;
7
- }) => JSX.Element;
7
+ }) => React.ReactElement;
8
8
  export default _default;
package/dist/components/PasswordInput/PasswordInput.js CHANGED
@@ -21,7 +21,7 @@ const p = ({ type: o = "password", ...a }, n) => {
21
21
  {
22
22
  className: d(
23
23
  "mr-2 flex h-9 w-10 cursor-pointer items-center justify-center rounded-full text-gray-600",
24
- "hover:bg-gray-100 hover:duration-200",
24
+ "hover:bg-gray-100 dark:hover:bg-gray-700 hover:duration-200",
25
25
  "btn-show-password"
26
26
  ),
27
27
  onClick: () => f(!s),
package/dist/components/RadioGroup/RadioGroup.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsx as x, jsxs as he } from "react/jsx-runtime";
2
- import $, { createContext as re, useId as V, useReducer as ye, useRef as _, useMemo as C, useCallback as $e, useContext as te } from "react";
1
+ import { jsx as x, jsxs as Re } from "react/jsx-runtime";
2
+ import $, { createContext as re, useId as V, useReducer as he, useRef as _, useMemo as C, useCallback as $e, useContext as te } from "react";
3
3
  import { t as M } from "../../bundle-mjs-SHnj3fHy.js";
4
4
  import { a as ke, b as Ee } from "../../index-BVp57yIc.js";
5
5
  import { getValue as z } from "../Selectbox/helper.js";
@@ -42,15 +42,15 @@ function je(e, r) {
42
42
  }
43
43
  let He = "div";
44
44
  function ze(e, r) {
45
- let t = V(), a = de(), { id: s = `headlessui-radiogroup-${t}`, value: g, form: v, name: n, onChange: i, by: b, disabled: u = a || !1, defaultValue: m, ...N } = e, p = Te(b), [k, P] = ye(je, { options: [] }), d = k.options, [E, A] = le(), [D, T] = ce(), O = _(null), w = K(O, r), h = xe(m), [o, G] = Ce(g, i, h), S = C(() => d.find((l) => !l.propsRef.current.disabled), [d]), y = C(() => d.some((l) => p(l.propsRef.current.value, o)), [d, o]), c = U((l) => {
45
+ let t = V(), a = de(), { id: s = `headlessui-radiogroup-${t}`, value: g, form: v, name: n, onChange: i, by: b, disabled: u = a || !1, defaultValue: m, ...N } = e, p = Te(b), [k, P] = he(je, { options: [] }), d = k.options, [E, A] = le(), [D, T] = ce(), O = _(null), w = K(O, r), R = xe(m), [o, G] = Ce(g, i, R), S = C(() => d.find((l) => !l.propsRef.current.disabled), [d]), h = C(() => d.some((l) => p(l.propsRef.current.value, o)), [d, o]), c = U((l) => {
46
46
  var L;
47
47
  if (u || p(l, o)) return !1;
48
- let R = (L = d.find((j) => p(j.propsRef.current.value, l))) == null ? void 0 : L.propsRef.current;
49
- return R != null && R.disabled ? !1 : (G == null || G(l), !0);
48
+ let y = (L = d.find((j) => p(j.propsRef.current.value, l))) == null ? void 0 : L.propsRef.current;
49
+ return y != null && y.disabled ? !1 : (G == null || G(l), !0);
50
50
  }), fe = U((l) => {
51
51
  let L = O.current;
52
52
  if (!L) return;
53
- let R = Le(L), j = d.filter((f) => f.propsRef.current.disabled === !1).map((f) => f.element.current);
53
+ let y = Le(L), j = d.filter((f) => f.propsRef.current.disabled === !1).map((f) => f.element.current);
54
54
  switch (l.key) {
55
55
  case F.Enter:
56
56
  Ge(l.currentTarget);
@@ -58,40 +58,40 @@ function ze(e, r) {
58
58
  case F.ArrowLeft:
59
59
  case F.ArrowUp:
60
60
  if (l.preventDefault(), l.stopPropagation(), Z(j, H.Previous | H.WrapAround) === ee.Success) {
61
- let f = d.find((I) => I.element.current === (R == null ? void 0 : R.activeElement));
61
+ let f = d.find((I) => I.element.current === (y == null ? void 0 : y.activeElement));
62
62
  f && c(f.propsRef.current.value);
63
63
  }
64
64
  break;
65
65
  case F.ArrowRight:
66
66
  case F.ArrowDown:
67
67
  if (l.preventDefault(), l.stopPropagation(), Z(j, H.Next | H.WrapAround) === ee.Success) {
68
- let f = d.find((I) => I.element.current === (R == null ? void 0 : R.activeElement));
68
+ let f = d.find((I) => I.element.current === (y == null ? void 0 : y.activeElement));
69
69
  f && c(f.propsRef.current.value);
70
70
  }
71
71
  break;
72
72
  case F.Space:
73
73
  {
74
74
  l.preventDefault(), l.stopPropagation();
75
- let f = d.find((I) => I.element.current === (R == null ? void 0 : R.activeElement));
75
+ let f = d.find((I) => I.element.current === (y == null ? void 0 : y.activeElement));
76
76
  f && c(f.propsRef.current.value);
77
77
  }
78
78
  break;
79
79
  }
80
- }), Y = U((l) => (P({ type: 0, ...l }), () => P({ type: 1, id: l.id }))), me = C(() => ({ value: o, firstOption: S, containsCheckedOption: y, disabled: u, compare: p, ...k }), [o, S, y, u, p, k]), ve = C(() => ({ registerOption: Y, change: c }), [Y, c]), be = { ref: w, id: s, role: "radiogroup", "aria-labelledby": E, "aria-describedby": D, onKeyDown: fe }, ge = C(() => ({ value: o }), [o]), Re = $e(() => {
81
- if (h !== void 0) return c(h);
82
- }, [c, h]);
83
- return $.createElement(T, { name: "RadioGroup.Description" }, $.createElement(A, { name: "RadioGroup.Label" }, $.createElement(X.Provider, { value: ve }, $.createElement(B.Provider, { value: me }, n != null && $.createElement(Pe, { disabled: u, data: { [n]: o || "on" }, overrides: { type: "radio", checked: o != null }, form: v, onReset: Re }), q({ ourProps: be, theirProps: N, slot: ge, defaultTag: He, name: "RadioGroup" })))));
80
+ }), Y = U((l) => (P({ type: 0, ...l }), () => P({ type: 1, id: l.id }))), me = C(() => ({ value: o, firstOption: S, containsCheckedOption: h, disabled: u, compare: p, ...k }), [o, S, h, u, p, k]), ve = C(() => ({ registerOption: Y, change: c }), [Y, c]), be = { ref: w, id: s, role: "radiogroup", "aria-labelledby": E, "aria-describedby": D, onKeyDown: fe }, ge = C(() => ({ value: o }), [o]), ye = $e(() => {
81
+ if (R !== void 0) return c(R);
82
+ }, [c, R]);
83
+ return $.createElement(T, { name: "RadioGroup.Description" }, $.createElement(A, { name: "RadioGroup.Label" }, $.createElement(X.Provider, { value: ve }, $.createElement(B.Provider, { value: me }, n != null && $.createElement(Pe, { disabled: u, data: { [n]: o || "on" }, overrides: { type: "radio", checked: o != null }, form: v, onReset: ye }), q({ ourProps: be, theirProps: N, slot: ge, defaultTag: He, name: "RadioGroup" })))));
84
84
  }
85
85
  let Me = "div";
86
86
  function Ve(e, r) {
87
87
  var t;
88
88
  let a = J("RadioGroup.Option"), s = Q("RadioGroup.Option"), g = V(), { id: v = `headlessui-radiogroup-option-${g}`, value: n, disabled: i = a.disabled || !1, autoFocus: b = !1, ...u } = e, m = _(null), N = K(m, r), [p, k] = le(), [P, d] = ce(), E = ne({ value: n, disabled: i });
89
89
  se(() => s.registerOption({ id: v, element: m, propsRef: E }), [v, s, m, E]);
90
- let A = U((y) => {
90
+ let A = U((h) => {
91
91
  var c;
92
- if (oe(y.currentTarget)) return y.preventDefault();
92
+ if (oe(h.currentTarget)) return h.preventDefault();
93
93
  s.change(n) && ((c = m.current) == null || c.focus());
94
- }), D = ((t = a.firstOption) == null ? void 0 : t.id) === v, { isFocusVisible: T, focusProps: O } = ae({ autoFocus: b }), { isHovered: w, hoverProps: h } = ie({ isDisabled: i }), o = a.compare(a.value, n), G = ue({ ref: N, id: v, role: "radio", "aria-checked": o ? "true" : "false", "aria-labelledby": p, "aria-describedby": P, "aria-disabled": i ? !0 : void 0, tabIndex: i ? -1 : o || !a.containsCheckedOption && D ? 0 : -1, onClick: i ? void 0 : A, autoFocus: b }, O, h), S = C(() => ({ checked: o, disabled: i, active: T, hover: w, focus: T, autofocus: b }), [o, i, w, T, b]);
94
+ }), D = ((t = a.firstOption) == null ? void 0 : t.id) === v, { isFocusVisible: T, focusProps: O } = ae({ autoFocus: b }), { isHovered: w, hoverProps: R } = ie({ isDisabled: i }), o = a.compare(a.value, n), G = ue({ ref: N, id: v, role: "radio", "aria-checked": o ? "true" : "false", "aria-labelledby": p, "aria-describedby": P, "aria-disabled": i ? !0 : void 0, tabIndex: i ? -1 : o || !a.containsCheckedOption && D ? 0 : -1, onClick: i ? void 0 : A, autoFocus: b }, O, R), S = C(() => ({ checked: o, disabled: i, active: T, hover: w, focus: T, autofocus: b }), [o, i, w, T, b]);
95
95
  return $.createElement(d, { name: "RadioGroup.Description" }, $.createElement(k, { name: "RadioGroup.Label" }, q({ ourProps: G, theirProps: u, slot: S, defaultTag: Me, name: "RadioGroup.Option" })));
96
96
  }
97
97
  let _e = "span";
@@ -99,11 +99,11 @@ function We(e, r) {
99
99
  var t;
100
100
  let a = J("Radio"), s = Q("Radio"), g = V(), v = De(), n = de(), { id: i = v || `headlessui-radio-${g}`, value: b, disabled: u = a.disabled || n || !1, autoFocus: m = !1, ...N } = e, p = _(null), k = K(p, r), P = we(), d = Ne(), E = ne({ value: b, disabled: u });
101
101
  se(() => s.registerOption({ id: i, element: p, propsRef: E }), [i, s, p, E]);
102
- let A = U((y) => {
102
+ let A = U((h) => {
103
103
  var c;
104
- if (oe(y.currentTarget)) return y.preventDefault();
104
+ if (oe(h.currentTarget)) return h.preventDefault();
105
105
  s.change(b) && ((c = p.current) == null || c.focus());
106
- }), { isFocusVisible: D, focusProps: T } = ae({ autoFocus: m }), { isHovered: O, hoverProps: w } = ie({ isDisabled: u }), h = ((t = a.firstOption) == null ? void 0 : t.id) === i, o = a.compare(a.value, b), G = ue({ ref: k, id: i, role: "radio", "aria-checked": o ? "true" : "false", "aria-labelledby": P, "aria-describedby": d, "aria-disabled": u ? !0 : void 0, tabIndex: u ? -1 : o || !a.containsCheckedOption && h ? 0 : -1, autoFocus: m, onClick: u ? void 0 : A }, T, w), S = C(() => ({ checked: o, disabled: u, hover: O, focus: D, autofocus: m }), [o, u, O, D, m]);
106
+ }), { isFocusVisible: D, focusProps: T } = ae({ autoFocus: m }), { isHovered: O, hoverProps: w } = ie({ isDisabled: u }), R = ((t = a.firstOption) == null ? void 0 : t.id) === i, o = a.compare(a.value, b), G = ue({ ref: k, id: i, role: "radio", "aria-checked": o ? "true" : "false", "aria-labelledby": P, "aria-describedby": d, "aria-disabled": u ? !0 : void 0, tabIndex: u ? -1 : o || !a.containsCheckedOption && R ? 0 : -1, autoFocus: m, onClick: u ? void 0 : A }, T, w), S = C(() => ({ checked: o, disabled: u, hover: O, focus: D, autofocus: m }), [o, u, O, D, m]);
107
107
  return q({ ourProps: G, theirProps: N, slot: S, defaultTag: _e, name: "Radio" });
108
108
  }
109
109
  let Ke = W(ze), qe = W(Ve), pe = W(We), Be = Oe, Je = Fe, Xe = Object.assign(Ke, { Option: qe, Radio: pe, Label: Be, Description: Je });
@@ -131,7 +131,7 @@ const Qe = (e, r) => r.type === "SETVALUE" ? {
131
131
  return /* @__PURE__ */ x("div", { className: "w-full radio-group", children: /* @__PURE__ */ x(
132
132
  Xe,
133
133
  {
134
- value: g.selected,
134
+ value: g.selected ?? void 0,
135
135
  onChange: (n) => {
136
136
  v({
137
137
  type: "SETSELECT",
@@ -144,12 +144,12 @@ const Qe = (e, r) => r.type === "SETVALUE" ? {
144
144
  {
145
145
  value: n,
146
146
  className: ({ checked: i }) => M(
147
- "group relative flex cursor-pointer rounded border border-gray-400 transition focus:outline-none",
147
+ "group relative flex cursor-pointer rounded border border-gray-400 dark:border-gray-600 transition focus:outline-none",
148
148
  e === "sm" && "px-3 py-2 text-sm",
149
149
  e === "md" && "px-5 py-4 ",
150
150
  i && "border-primary-600 bg-primary-100 dark:border-gray-700 dark:bg-gray-800"
151
151
  ),
152
- children: ({ checked: i }) => /* @__PURE__ */ he("div", { className: "flex items-center justify-between w-full", children: [
152
+ children: ({ checked: i }) => /* @__PURE__ */ Re("div", { className: "flex items-center justify-between w-full", children: [
153
153
  /* @__PURE__ */ x("div", { className: "text-sm/6", children: /* @__PURE__ */ x("p", { className: "font-semibold", children: n.label }) }),
154
154
  i ? /* @__PURE__ */ x(
155
155
  ke,