anysystem-design 0.0.32 → 0.0.33

package/README.md

@@ -1,30 +1,24 @@
-# React + TypeScript + Vite
+# Anysystem Design
+Powerful open source libraries for React.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
+## Getting started
+```bash
+npm install anysystem-design
+```
+### Basic usage
+
+```javascript
+import { 
+	AppProvider, 
+	Button 
+} from "anysystem-design";
+
+export default function App() {
+	return (
+		<AppProvider appName="anysystem">
+			<Button>Button</Button>
+		</AppProvider>
+	);
 }
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package/dist/Flow.css

@@ -0,0 +1 @@
+.react-flow{direction:ltr;--xy-edge-stroke-default: #b1b1b7;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #555;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(255, 255, 255, .5);--xy-minimap-background-color-default: #fff;--xy-minimap-mask-background-color-default: rgb(240, 240, 240, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #e2e2e2;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: transparent;--xy-background-pattern-dots-color-default: #91919a;--xy-background-pattern-lines-color-default: #eee;--xy-background-pattern-cross-color-default: #e2e2e2;background-color:var(--xy-background-color, var(--xy-background-color-default));--xy-node-color-default: inherit;--xy-node-border-default: 1px solid #1a192b;--xy-node-background-color-default: #fff;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #1a192b;--xy-node-border-radius-default: 3px;--xy-handle-background-color-default: #1a192b;--xy-handle-border-color-default: #fff;--xy-selection-background-color-default: rgba(0, 89, 220, .08);--xy-selection-border-default: 1px dotted rgba(0, 89, 220, .8);--xy-controls-button-background-color-default: #fefefe;--xy-controls-button-background-color-hover-default: #f4f4f4;--xy-controls-button-color-default: inherit;--xy-controls-button-color-hover-default: inherit;--xy-controls-button-border-color-default: #eee;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #ffffff;--xy-edge-label-color-default: inherit;--xy-resize-background-color-default: #3367d9}.react-flow.dark{--xy-edge-stroke-default: #3e3e3e;--xy-edge-stroke-width-default: 1;--xy-edge-stroke-selected-default: #727272;--xy-connectionline-stroke-default: #b1b1b7;--xy-connectionline-stroke-width-default: 1;--xy-attribution-background-color-default: rgba(150, 150, 150, .25);--xy-minimap-background-color-default: #141414;--xy-minimap-mask-background-color-default: rgb(60, 60, 60, .6);--xy-minimap-mask-stroke-color-default: transparent;--xy-minimap-mask-stroke-width-default: 1;--xy-minimap-node-background-color-default: #2b2b2b;--xy-minimap-node-stroke-color-default: transparent;--xy-minimap-node-stroke-width-default: 2;--xy-background-color-default: #141414;--xy-background-pattern-dots-color-default: #777;--xy-background-pattern-lines-color-default: #777;--xy-background-pattern-cross-color-default: #777;--xy-node-color-default: #f8f8f8;--xy-node-border-default: 1px solid #3c3c3c;--xy-node-background-color-default: #1e1e1e;--xy-node-group-background-color-default: rgba(240, 240, 240, .25);--xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, .08);--xy-node-boxshadow-selected-default: 0 0 0 .5px #999;--xy-handle-background-color-default: #bebebe;--xy-handle-border-color-default: #1e1e1e;--xy-selection-background-color-default: rgba(200, 200, 220, .08);--xy-selection-border-default: 1px dotted rgba(200, 200, 220, .8);--xy-controls-button-background-color-default: #2b2b2b;--xy-controls-button-background-color-hover-default: #3e3e3e;--xy-controls-button-color-default: #f8f8f8;--xy-controls-button-color-hover-default: #fff;--xy-controls-button-border-color-default: #5b5b5b;--xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, .08);--xy-edge-label-background-color-default: #141414;--xy-edge-label-color-default: #f8f8f8}.react-flow__background{background-color:var(--xy-background-color, var(--xy-background-color-props, var(--xy-background-color-default)));pointer-events:none;z-index:-1}.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1}.react-flow__pane.draggable{cursor:grab}.react-flow__pane.dragging{cursor:grabbing}.react-flow__pane.selection{cursor:pointer}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow__edge-path{stroke:var(--xy-edge-stroke, var(--xy-edge-stroke-default));stroke-width:var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));fill:none}.react-flow__connection-path{stroke:var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));stroke-width:var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));fill:none}.react-flow .react-flow__edges{position:absolute}.react-flow .react-flow__edges svg{overflow:visible;position:absolute;pointer-events:none}.react-flow__edge{pointer-events:visibleStroke}.react-flow__edge.selectable{cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge.selectable:focus .react-flow__edge-path,.react-flow__edge.selectable:focus-visible .react-flow__edge-path{stroke:var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default))}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;animation:dashdraw .5s linear infinite}svg.react-flow__connectionline{z-index:1001;overflow:visible;position:absolute}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:default}.react-flow__node.selectable{cursor:pointer}.react-flow__node.draggable{cursor:grab;pointer-events:all}.react-flow__node.draggable.dragging{cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background-color:var(--xy-handle-background-color, var(--xy-handle-background-color-default));border:1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));border-radius:100%}.react-flow__handle.connectingfrom{pointer-events:all}.react-flow__handle.connectionindicator{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:0;transform:translate(-50%,50%)}.react-flow__handle-top{top:0;left:50%;transform:translate(-50%,-50%)}.react-flow__handle-left{top:50%;left:0;transform:translate(-50%,-50%)}.react-flow__handle-right{top:50%;right:0;transform:translate(50%,-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;left:0;top:0}.react-flow__viewport-portal{position:absolute;width:100%;height:100%;left:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__minimap{background:var( --xy-minimap-background-color-props, var(--xy-minimap-background-color, var(--xy-minimap-background-color-default)) )}.react-flow__minimap-svg{display:block}.react-flow__minimap-mask{fill:var( --xy-minimap-mask-background-color-props, var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default)) );stroke:var( --xy-minimap-mask-stroke-color-props, var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default)) );stroke-width:var( --xy-minimap-mask-stroke-width-props, var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default)) )}.react-flow__minimap-node{fill:var( --xy-minimap-node-background-color-props, var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default)) );stroke:var( --xy-minimap-node-stroke-color-props, var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default)) );stroke-width:var( --xy-minimap-node-stroke-width-props, var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default)) )}.react-flow__background-pattern.dots{fill:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default)) )}.react-flow__background-pattern.lines{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default)) )}.react-flow__background-pattern.cross{stroke:var( --xy-background-pattern-color-props, var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default)) )}.react-flow__controls{display:flex;flex-direction:column;box-shadow:var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default))}.react-flow__controls.horizontal{flex-direction:row}.react-flow__controls-button{display:flex;justify-content:center;align-items:center;height:26px;width:26px;padding:4px;border:none;background:var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));border-bottom:1px solid var( --xy-controls-button-border-color-props, var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default)) );color:var( --xy-controls-button-color-props, var(--xy-controls-button-color, var(--xy-controls-button-color-default)) );cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px;fill:currentColor}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-input,.react-flow__node-default,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:var(--xy-node-border-radius, var(--xy-node-border-radius-default));width:150px;font-size:12px;color:var(--xy-node-color, var(--xy-node-color-default));text-align:center;border:var(--xy-node-border, var(--xy-node-border-default));background-color:var(--xy-node-background-color, var(--xy-node-background-color-default))}.react-flow__node-input.selectable:hover,.react-flow__node-default.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default))}.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default))}.react-flow__node-group{background-color:var(--xy-node-group-background-color, var(--xy-node-group-background-color-default))}.react-flow__nodesselection-rect,.react-flow__selection{background:var(--xy-selection-background-color, var(--xy-selection-background-color-default));border:var(--xy-selection-border, var(--xy-selection-border-default))}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls-button:hover{background:var( --xy-controls-button-background-color-hover-props, var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default)) );color:var( --xy-controls-button-color-hover-props, var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default)) )}.react-flow__controls-button:disabled{pointer-events:none}.react-flow__controls-button:disabled svg{fill-opacity:.4}.react-flow__controls-button:last-child{border-bottom:none}.react-flow__resize-control{position:absolute}.react-flow__resize-control.left,.react-flow__resize-control.right{cursor:ew-resize}.react-flow__resize-control.top,.react-flow__resize-control.bottom{cursor:ns-resize}.react-flow__resize-control.top.left,.react-flow__resize-control.bottom.right{cursor:nwse-resize}.react-flow__resize-control.bottom.left,.react-flow__resize-control.top.right{cursor:nesw-resize}.react-flow__resize-control.handle{width:4px;height:4px;border:1px solid #fff;border-radius:1px;background-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));transform:translate(-50%,-50%)}.react-flow__resize-control.handle.left{left:0;top:50%}.react-flow__resize-control.handle.right{left:100%;top:50%}.react-flow__resize-control.handle.top{left:50%;top:0}.react-flow__resize-control.handle.bottom{left:50%;top:100%}.react-flow__resize-control.handle.top.left,.react-flow__resize-control.handle.bottom.left{left:0}.react-flow__resize-control.handle.top.right,.react-flow__resize-control.handle.bottom.right{left:100%}.react-flow__resize-control.line{border-color:var(--xy-resize-background-color, var(--xy-resize-background-color-default));border-width:0;border-style:solid}.react-flow__resize-control.line.left,.react-flow__resize-control.line.right{width:1px;transform:translate(-50%);top:0;height:100%}.react-flow__resize-control.line.left{left:0;border-left-width:1px}.react-flow__resize-control.line.right{left:100%;border-right-width:1px}.react-flow__resize-control.line.top,.react-flow__resize-control.line.bottom{height:1px;transform:translateY(-50%);left:0;width:100%}.react-flow__resize-control.line.top{top:0;border-top-width:1px}.react-flow__resize-control.line.bottom{border-bottom-width:1px;top:100%}.react-flow__edge-textbg{fill:var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default))}.react-flow__edge-text{fill:var(--xy-edge-label-color, var(--xy-edge-label-color-default))}

package/dist/components/AutoComplete/AutoCompleteMultiple.js

@@ -6,9 +6,9 @@ import { H as C } from "../../index-BVp57yIc.js";
 import { c as w } from "../../index-CBEJ8A3p.js";
 import { f as N } from "../../index-CHNNgawm.js";
 import { getValue as o } from "../Selectbox/helper.js";
-import { N as L, G as S, H as T, z as q, K as A } from "../../combobox-DcjIgW1K.js";
-import { X as R } from "../../transition-6o20faRl.js";
-const k = (r, t) => {
+import { N as L, G as S, H as T, z as k, K as q } from "../../combobox-DcjIgW1K.js";
+import { X as A } from "../../transition-6o20faRl.js";
+const R = (r, t) => {
   if (t.type === "SEARCH")
     return {
       ...r,
@@ -20,8 +20,8 @@ const k = (r, t) => {
       ...r,
       value: t.value,
       selected: r.list.filter((a) => {
-        const u = o(a, r.valueField);
-        return t.value.includes(u);
+        const i = o(a, r.valueField);
+        return t.value.includes(i);
       }) || [],
       query: ""
     };
@@ -33,10 +33,10 @@ const k = (r, t) => {
       query: ""
     };
   if (t.type === "REMOVESELECT") {
-    const a = o(t.selected, r.valueField), u = r.value.filter((n) => n !== a);
+    const a = o(t.selected, r.valueField), i = r.value.filter((n) => n !== a);
     return {
       ...r,
-      value: u,
+      value: i,
       selected: r.selected ? r.selected.filter((n) => o(n, r.valueField) !== a) : []
     };
   }
@@ -45,22 +45,22 @@ const k = (r, t) => {
   id: r,
   name: t,
   value: a = [],
-  options: u,
+  options: i,
   valueField: n = "value",
   onChange: f,
   onSearch: y,
   placeholder: g
 }, b) => {
   var h;
-  const [s, c] = p.useReducer(k, {
+  const [s, c] = p.useReducer(R, {
     query: "",
-    list: u,
-    filterList: u,
+    list: i,
+    filterList: i,
     value: a || [],
     valueField: n,
-    selected: u.filter((e) => {
-      const i = o(e, n);
-      return x.some(a, (d) => d + "" == i + "");
+    selected: i.filter((e) => {
+      const u = o(e, n);
+      return x.some(a, (d) => d + "" == u + "");
     }) || []
   });
   return p.useImperativeHandle(b, () => ({
@@ -79,12 +79,12 @@ const k = (r, t) => {
           type: "SETSELECT",
           selected: e
         });
-        const i = (e == null ? void 0 : e.map((d) => o(d, n))) || [];
-        f && f(i);
+        const u = (e == null ? void 0 : e.map((d) => o(d, n))) || [];
+        f && f(u);
       },
       multiple: !0,
       children: /* @__PURE__ */ m("div", { className: "relative flex gap-1", children: [
-        s.selected.length > 0 && /* @__PURE__ */ l("ul", { className: "flex form-control gap-1", children: (h = s.selected) == null ? void 0 : h.map((e, i) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ m("div", { className: "flex p-1 rounded bg-indigo-50", children: [
+        s.selected.length > 0 && /* @__PURE__ */ l("ul", { className: "flex form-control gap-1", 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: [
           /* @__PURE__ */ l("span", { className: "text-xs whitespace-nowrap", children: e.label }),
           /* @__PURE__ */ l(
             "button",
@@ -94,7 +94,7 @@ const k = (r, t) => {
               children: /* @__PURE__ */ l(N, { fontSize: 12, className: "font-bold" })
             }
           )
-        ] }) }, i)) }),
+        ] }) }, u)) }),
         /* @__PURE__ */ l(
           S,
           {
@@ -131,7 +131,7 @@ const k = (r, t) => {
           }
         ),
         /* @__PURE__ */ l(
-          R,
+          A,
           {
             as: v,
             enter: "transition duration-100 ease-out",
@@ -141,23 +141,23 @@ const k = (r, t) => {
             leaveFrom: "scale-100 transform opacity-100",
             leaveTo: "scale-95 transform opacity-0",
             afterLeave: () => c({ type: "SEARCH", query: "" }),
-            children: /* @__PURE__ */ l(q, { 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(A, { as: v, value: e, children: ({ selected: i, focus: d }) => /* @__PURE__ */ m(
+            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(
               "li",
               {
                 className: E(
                   "relative flex cursor-pointer justify-between px-5 py-4 text-black hover:bg-primary-100 dark:text-white",
-                  (i || d) && "bg-primary-100 dark:bg-gray-700",
+                  (u || d) && "bg-primary-100 dark:bg-gray-700",
                   e.enable === !1 && "cursor-not-allowed opacity-50"
                 ),
                 children: [
                   /* @__PURE__ */ l("span", { className: "pl-5", children: e.label }),
-                  i ? /* @__PURE__ */ l(
+                  u ? /* @__PURE__ */ l(
                     "span",
                     {
                       className: E(
                         "absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600"
                       ),
-                      children: /* @__PURE__ */ l(w, { className: "h-5 w-5", "aria-hidden": "true" })
+                      children: /* @__PURE__ */ l(w, { className: "w-5 h-5", "aria-hidden": "true" })
                     }
                   ) : null
                 ]

package/dist/components/Container/Container.js

@@ -3,7 +3,7 @@ import { t as r } from "../../bundle-mjs-SHnj3fHy.js";
 const l = ({
   className: e,
   ...t
-}) => /* @__PURE__ */ m("div", { className: r("mx-auto w-full max-w-lg px-4 py-8", e), children: t == null ? void 0 : t.children });
+}) => /* @__PURE__ */ m("div", { className: r("w-full max-w-lg px-4 py-8 mx-auto ", e), children: t == null ? void 0 : t.children });
 export {
   l as Container
 };

package/dist/components/FormControl/FormControl.d.ts

@@ -3,5 +3,5 @@ import { SelectOption } from '../Selectbox';
 import { FormControlInputProps, FormControlDateTimeProps, FormControlRadioProps, FormControlSwitchProps, FormControlConfirmProps, FormControlTelephoneProps, FormControlSelectboxProps, FormControlAutoCompleteProps } from './type';
 
 export type FormControlProps<ListOption extends SelectOption> = FormControlInputProps | FormControlDateTimeProps | FormControlRadioProps<ListOption> | FormControlSwitchProps | FormControlConfirmProps | FormControlTelephoneProps | FormControlSelectboxProps<ListOption> | FormControlAutoCompleteProps<ListOption>;
-declare const FormControl: <ListOption extends SelectOption>({ type, onChange, ...props }: FormControlProps<ListOption>) => React.ReactElement;
+declare const FormControl: <ListOption extends SelectOption>({ type, onChange, variant, ...props }: FormControlProps<ListOption>) => React.ReactElement;
 export default FormControl;

package/dist/components/FormControl/FormControl.js

@@ -1,68 +1,85 @@
-import { jsx as r } from "react/jsx-runtime";
-import m, { Suspense as c } from "react";
-import e from "../RadioGroup/RadioGroup.js";
+import { jsx as l } from "react/jsx-runtime";
+import a, { Suspense as s } from "react";
+import d from "../RadioGroup/RadioGroup.js";
 import "../Selectbox/SelectboxBase.js";
 import "../Selectbox/SelectboxMultiple.js";
 import p from "../Selectbox/Selectbox.js";
-import d from "../AutoComplete/AutoComplete.js";
-const u = m.lazy(() => import("../Label/index.js")), f = m.lazy(() => import("../Input/index.js")), z = m.lazy(() => import("../PasswordInput/index.js")), n = m.lazy(() => import("../TelephoneInput/index.js")), b = m.lazy(() => import("../DatePicker/index.js")), w = m.lazy(() => import("../Switch/index.js")), x = m.lazy(() => import("../Checkbox/index.js")), _ = ({
-  type: o,
-  onChange: t,
-  ...a
+import u from "../AutoComplete/AutoComplete.js";
+const f = a.lazy(() => import("../Label/index.js")), b = a.lazy(() => import("../Input/index.js")), n = a.lazy(() => import("../PasswordInput/index.js")), z = a.lazy(() => import("../TelephoneInput/index.js")), w = a.lazy(() => import("../DatePicker/index.js")), k = a.lazy(() => import("../Switch/index.js")), x = a.lazy(() => import("../Checkbox/index.js")), _ = ({
+  type: t,
+  onChange: o,
+  variant: e = "md",
+  ...c
 }) => {
-  const { labelProps: s, ...l } = a;
-  return /* @__PURE__ */ r(c, { fallback: null, children: o !== "confirm" ? /* @__PURE__ */ r(
-    u,
+  const { labelProps: m, ...i } = c;
+  return /* @__PURE__ */ l(s, { fallback: null, children: t !== "confirm" ? /* @__PURE__ */ l(
+    f,
     {
-      type: o === "radio" ? "normal" : o === "switch" ? "horizontal" : void 0,
-      ...s || { label: "" },
-      children: o === "password" ? /* @__PURE__ */ r(
-        z,
+      className: e,
+      type: t === "radio" ? "normal" : t === "switch" ? "horizontal" : void 0,
+      ...m || { label: "" },
+      children: t === "password" ? /* @__PURE__ */ l(
+        n,
         {
-          ...l,
-          onChange: (i) => t && t(i.target.value)
+          ...i,
+          onChange: (r) => o && o(r.target.value)
         }
-      ) : o === "date" || o === "datetime" ? /* @__PURE__ */ r(
-        b,
+      ) : t === "date" || t === "datetime" ? /* @__PURE__ */ l(
+        w,
         {
-          ...l,
-          onChange: (i) => t && t(i + ""),
-          showTime: o === "datetime"
+          ...i,
+          onChange: (r) => o && o(r + ""),
+          showTime: t === "datetime"
         }
-      ) : o === "radio" ? /* @__PURE__ */ r(
-        e,
+      ) : t === "radio" ? /* @__PURE__ */ l(
+        d,
         {
-          ...l,
-          onChange: t
+          ...i,
+          variant: e,
+          onChange: o
         }
-      ) : o === "switch" ? /* @__PURE__ */ r(w, { ...l, onChange: t }) : o === "tel" ? /* @__PURE__ */ r(
-        n,
+      ) : t === "switch" ? /* @__PURE__ */ l(
+        k,
+        {
+          ...i,
+          onChange: o,
+          checked: !!i.value
+        }
+      ) : t === "tel" ? /* @__PURE__ */ l(
+        z,
         {
-          ...l,
-          onChange: t
+          ...i,
+          onChange: o
         }
-      ) : o === "select" ? /* @__PURE__ */ r(
+      ) : t === "select" ? /* @__PURE__ */ l(
         p,
         {
-          ...l,
-          onChange: (i) => t && t(i)
+          ...i,
+          onChange: (r) => o && o(r)
         }
-      ) : o === "autocomplete" ? /* @__PURE__ */ r(
-        d,
+      ) : t === "autocomplete" ? /* @__PURE__ */ l(
+        u,
         {
-          ...l,
-          onChange: t
+          ...i,
+          onChange: o
         }
-      ) : /* @__PURE__ */ r(
-        f,
+      ) : /* @__PURE__ */ l(
+        b,
         {
-          type: o,
-          onChange: (i) => t && t(typeof i == "string" ? i : i.target.value),
-          ...l
+          type: t,
+          onChange: (r) => o && o(typeof r == "string" ? r : r.target.value),
+          ...i
         }
       )
     }
-  ) : /* @__PURE__ */ r(x, { ...l, onChange: t }) });
+  ) : /* @__PURE__ */ l(
+    x,
+    {
+      ...i,
+      onChange: (r) => o && o(String(r.target.checked)),
+      label: m.label
+    }
+  ) });
 };
 export {
   _ as default

package/dist/components/FormControl/type.d.ts

@@ -37,51 +37,59 @@ export type FormField = {
     componentProps: FormFieldInputProps | FormFieldDateTimeProps | FormFieldRadioProps<SelectOption> | FormFieldSwitchProps | FormFieldConfirmProps | FormFieldTelephoneProps | FormFieldSelectboxProps<SelectOption> | FormFieldAutoCompleteProps<SelectOption>;
 };
 export type FormFieldWithStructure = (FormField | FormField[])[];
-export type FormControlInputProps = {
+export type FormControlInputProps = InputProps & {
     type: "password" | "text" | "number" | "email";
     labelProps: LabelBaseProps;
     onChange?: (value: string) => void;
-} & InputProps;
-export type FormFieldInputProps = Omit<FormControlInputProps, "name">;
+    variant?: "sm" | "md";
+};
+export type FormFieldInputProps = Omit<FormControlInputProps, "name" | "value" | "onChange">;
 export type FormControlDateTimeProps = DatePickerProps & {
     type: "date" | "datetime";
     labelProps: LabelBaseProps;
     onChange?: (value: string) => void;
+    variant?: "sm" | "md";
 };
 export type FormFieldDateTimeProps = Omit<FormControlDateTimeProps, "name" | "value" | "onChange">;
 export type FormControlRadioProps<ListOption extends SelectOption> = {
     type: "radio";
     labelProps: LabelBaseProps;
     onChange?: (value: string) => void;
+    variant?: "sm" | "md";
 } & RadioGroupProps<ListOption>;
 export type FormFieldRadioProps<ListOption extends SelectOption> = Omit<FormControlRadioProps<ListOption>, "name" | "value" | "onChange">;
 export type FormControlSwitchProps = {
     type: "switch";
     labelProps: LabelBaseProps;
     onChange?: (value: string) => void;
+    variant?: "sm" | "md";
 } & SwitchProps;
-export type FormFieldSwitchProps = Omit<FormControlSwitchProps, "name">;
+export type FormFieldSwitchProps = Omit<FormControlSwitchProps, "name" | "value" | "onChange">;
 export type FormControlConfirmProps = {
     type: "confirm";
     labelProps: LabelBaseProps;
     onChange?: (value: string) => void;
+    variant?: "sm" | "md";
 } & CheckboxProps;
-export type FormFieldConfirmProps = Omit<FormControlConfirmProps, "name">;
+export type FormFieldConfirmProps = Omit<FormControlConfirmProps, "name" | "label">;
 export type FormControlTelephoneProps = {
     type: "tel";
     labelProps: LabelBaseProps;
     onChange?: (value: string) => void;
+    variant?: "sm" | "md";
 } & TelephoneInputProps;
 export type FormFieldTelephoneProps = Omit<FormControlTelephoneProps, "name">;
 export type FormControlSelectboxProps<ListOption extends SelectOption> = {
     type: "select";
     labelProps: LabelBaseProps;
     onChange?: (value: string | string[]) => void;
+    variant?: "sm" | "md";
 } & SelectboxProps<ListOption>;
 export type FormFieldSelectboxProps<ListOption extends SelectOption> = Omit<FormControlSelectboxProps<ListOption>, "name" | "value" | "onChange">;
 export type FormControlAutoCompleteProps<ListOption extends SelectOption> = {
     type: "autocomplete";
     labelProps: LabelBaseProps;
     onChange?: (value: string | string[]) => void;
+    variant?: "sm" | "md";
 } & AutoCompleteProps<ListOption>;
 export type FormFieldAutoCompleteProps<ListOption extends SelectOption> = Omit<FormControlAutoCompleteProps<ListOption>, "name" | "value" | "onChange">;

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

@@ -1,6 +1,7 @@
 import { SelectOption, ValueField } from '../Selectbox/SelectboxBase';
 
 export type RadioGroupProps<ListOption extends SelectOption> = {
+    variant?: "sm" | "md";
     id?: string;
     name: string;
     options: ListOption[];
@@ -11,5 +12,5 @@ export type RadioGroupProps<ListOption extends SelectOption> = {
     onChange: (value: string) => void;
     valueField?: ValueField<ListOption>;
 };
-declare const RadioGroup: <ListOption extends SelectOption>({ options, value, valueField, onChange, }: RadioGroupProps<ListOption>) => import("react/jsx-runtime").JSX.Element;
+declare const RadioGroup: <ListOption extends SelectOption>({ variant, options, value, valueField, onChange, }: RadioGroupProps<ListOption>) => import("react/jsx-runtime").JSX.Element;
 export default RadioGroup;