@iziui/react 0.0.96-rc → 0.0.98-rc

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 (48) hide show
  1. package/dist/.types/fields/Select/Select.d.ts +2 -0
  2. package/dist/.types/fields/Select/Select.d.ts.map +1 -1
  3. package/dist/.types/lab/Form/index.d.ts +3 -0
  4. package/dist/.types/lab/Form/index.d.ts.map +1 -1
  5. package/dist/.types/navigation/Menu/Menu.d.ts +2 -0
  6. package/dist/.types/navigation/Menu/Menu.d.ts.map +1 -1
  7. package/dist/.types/navigation/Tabs/TabContent.d.ts.map +1 -1
  8. package/dist/chunks/Option-COyiqmg0.cjs +2 -0
  9. package/dist/chunks/Option-COyiqmg0.cjs.map +1 -0
  10. package/dist/chunks/Option-CzDngSSk.js +2 -0
  11. package/dist/chunks/Option-CzDngSSk.js.map +1 -0
  12. package/dist/chunks/useForm-CD-_L271.cjs +2 -0
  13. package/dist/chunks/{useForm-BNLOy0E6.cjs.map → useForm-CD-_L271.cjs.map} +1 -1
  14. package/dist/chunks/{useForm-iwGfb88g.js → useForm-CRRXYOep.js} +2 -2
  15. package/dist/chunks/{useForm-iwGfb88g.js.map → useForm-CRRXYOep.js.map} +1 -1
  16. package/dist/chunks/useMenu-B49hOh6R.js +2 -0
  17. package/dist/chunks/useMenu-B49hOh6R.js.map +1 -0
  18. package/dist/chunks/useMenu-BfWmrq4L.cjs +2 -0
  19. package/dist/chunks/useMenu-BfWmrq4L.cjs.map +1 -0
  20. package/dist/chunks/useTabs-C10MlXVP.js +2 -0
  21. package/dist/chunks/{useTabs-DG53jo4T.js.map → useTabs-C10MlXVP.js.map} +1 -1
  22. package/dist/chunks/useTabs-DXjPVKGl.cjs +2 -0
  23. package/dist/chunks/{useTabs-Dcksp_re.cjs.map → useTabs-DXjPVKGl.cjs.map} +1 -1
  24. package/dist/components/ColorPicker/index.cjs +1 -1
  25. package/dist/components/ColorPicker/index.js +1 -1
  26. package/dist/components/Menu/index.cjs +1 -1
  27. package/dist/components/Menu/index.js +1 -1
  28. package/dist/components/Select/index.cjs +1 -1
  29. package/dist/components/Select/index.js +1 -1
  30. package/dist/components/Tabs/index.cjs +1 -1
  31. package/dist/components/Tabs/index.js +1 -1
  32. package/dist/index.cjs +1 -1
  33. package/dist/index.js +1 -1
  34. package/dist/lab/Form/index.cjs +1 -1
  35. package/dist/lab/Form/index.js +1 -1
  36. package/dist/style.css +4 -4
  37. package/package.json +1 -1
  38. package/dist/chunks/Option-B1l_zN4-.cjs +0 -2
  39. package/dist/chunks/Option-B1l_zN4-.cjs.map +0 -1
  40. package/dist/chunks/Option-BvxuW39r.js +0 -2
  41. package/dist/chunks/Option-BvxuW39r.js.map +0 -1
  42. package/dist/chunks/useForm-BNLOy0E6.cjs +0 -2
  43. package/dist/chunks/useMenu-CizlB9PU.js +0 -2
  44. package/dist/chunks/useMenu-CizlB9PU.js.map +0 -1
  45. package/dist/chunks/useMenu-D9-CcpCS.cjs +0 -2
  46. package/dist/chunks/useMenu-D9-CcpCS.cjs.map +0 -1
  47. package/dist/chunks/useTabs-DG53jo4T.js +0 -2
  48. package/dist/chunks/useTabs-Dcksp_re.cjs +0 -2
@@ -1,11 +1,13 @@
1
1
  import { InputHTMLAttributes } from 'react';
2
2
  import { Colors } from '../../_internal/core/theme';
3
+ import { MenuProps } from '../../navigation/Menu';
3
4
  export interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {
4
5
  error?: boolean;
5
6
  autoClose?: boolean;
6
7
  label?: string;
7
8
  helperText?: string;
8
9
  color?: Colors;
10
+ position?: MenuProps['position'];
9
11
  startIcon?: React.JSX.Element | boolean;
10
12
  children: React.JSX.Element | React.JSX.Element[];
11
13
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/fields/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EAEzB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAShD,OAAO,sCAAsC,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;CACnD;;AAsGD,wBAAuC"}
1
+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/fields/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,mBAAmB,EAEzB,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAIhD,OAAO,EAAQ,KAAK,SAAS,EAAW,MAAM,mBAAmB,CAAC;AAKlE,OAAO,sCAAsC,CAAC;AAE9C,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChG,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,OAAO,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;CACnD;;AAwGD,wBAAuC"}
@@ -3,4 +3,7 @@ export { default as Control } from './Control';
3
3
  export { default as useForm } from './useForm';
4
4
  export { default as useControl } from './useControl';
5
5
  export { default as useFormGroup } from './useFormGroup';
6
+ export { default as FormGroup } from './FormGroup';
7
+ export { default as FormControl } from './FormControl';
8
+ export * from './AbstractControl';
6
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lab/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lab/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,cAAc,mBAAmB,CAAC"}
@@ -1,10 +1,12 @@
1
1
  import { CSSProperties, HTMLAttributes } from 'react';
2
2
  type Direction = 'left' | 'right' | 'center';
3
+ type Position = 'top' | 'bottom';
3
4
  export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
4
5
  open: boolean;
5
6
  autoClose?: boolean;
6
7
  maxHeight?: CSSProperties['maxHeight'];
7
8
  direction?: Direction;
9
+ position?: Position;
8
10
  anchorEl: HTMLElement | null;
9
11
  width?: CSSProperties['width'];
10
12
  children: React.JSX.Element | React.JSX.Element[];
@@ -1 +1 @@
1
- {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/navigation/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAcf,OAAO,oCAAoC,CAAC;AAE5C,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAM7C,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IAClD,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;;AAoID,wBAAqC"}
1
+ {"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/navigation/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,cAAc,EAEpB,MAAM,OAAO,CAAC;AAcf,OAAO,oCAAoC,CAAC;AAE5C,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAC7C,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,CAAC;AAMjC,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC;IAClD,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;;AA0ID,wBAAqC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TabContent.d.ts","sourceRoot":"","sources":["../../../../src/navigation/Tabs/TabContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,mDAUzF"}
1
+ {"version":3,"file":"TabContent.d.ts","sourceRoot":"","sources":["../../../../src/navigation/Tabs/TabContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,mDAQzF"}
@@ -0,0 +1,2 @@
1
+ "use strict";const t=require("react/jsx-runtime"),a=require("react"),e=require("./index-DYxwT4uW.cjs"),n=require("./joinClass-Jk3EszKD.cjs"),E=require("./Icon-BN4Kp4Aq.cjs"),j=require("./useMenu-BfWmrq4L.cjs"),M=require("./createComponent-Bls5N6x8.cjs");function O({error:o,color:c="grey",position:p="bottom",label:u,helperText:i,startIcon:x,children:f,disabled:l,onChange:_,...r}){const C=a.Children.toArray(f),$=a.useMemo(()=>C.find(s=>s.props.value===r.value)?.props.children||"",[r.value]),[N,b,d]=j.useMenu(),h=n.joinClass(`${e.prefix}-select-container`),y=n.joinClass(`${e.prefix}-select-label`,o&&`${e.prefix}-select-label--error`),v=n.joinClass(`${e.prefix}-select`,l&&`${e.prefix}-select--disabled`,o&&`${e.prefix}-select--error`,r.className),q=n.joinClass(`${e.prefix}-select__helper-text`,i&&`${e.prefix}-select__helper-text--visible`,o&&`${e.prefix}-select__helper-text--error`),g=s=>a.cloneElement(s,{className:n.joinClass(s.props.className,`${e.prefix}-select__icon--left`),type:"button",style:{color:c},onClick:m=>{m.stopPropagation(),s.props.onClick&&!l&&s.props.onClick(m)}}),k=()=>C.map(s=>a.cloneElement(s,{color:c,className:n.joinClass(s.props.className,s.props.value===r.value&&`${e.prefix}-select__option--selected`),onClick:m=>{!s.props.disabled&&_&&_(m)}}));return t.jsxs("div",{className:h,children:[u&&t.jsxs("label",{className:y,children:[u," ",r.required&&"*"]}),t.jsxs("button",{type:"button",className:v,onClick:d,disabled:l,children:[t.jsx("div",{children:x&&g(x)}),t.jsx("input",{...r,readOnly:!0,type:"text",value:$,disabled:l}),t.jsx(E.Icon,{name:"angle-down",sx:{color:({grey:s})=>s.main},className:`${e.prefix}-select__icon--right`})]}),t.jsx(j.Menu,{autoClose:!0,position:p,direction:"center",open:N,anchorEl:b,onClose:d,children:k()}),t.jsx("span",{className:q,children:i})]})}const S=M.createComponent(O);function w({children:o,color:c,startIcon:p,disabled:u,...i}){const x=n.joinClass(`${e.prefix}-select__option`,u&&`${e.prefix}-select__option--disabled`,c&&`${e.prefix}-select__option--${c}`,i.className),f=l=>a.cloneElement(l,{type:"button",className:n.joinClass(l.props.className,`${e.prefix}-select__option__icon`)});return t.jsxs("button",{type:"button",...i,className:x,children:[p&&f(p),o]})}exports.Option=w;exports.Select_default=S;
2
+ //# sourceMappingURL=Option-COyiqmg0.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Option-COyiqmg0.cjs","sources":["../../src/fields/Select/Select.tsx","../../src/fields/Select/Option.tsx"],"sourcesContent":["import {\n useMemo,\n Children,\n cloneElement,\n type ReactElement,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport Icon from '@/display/Icon';\nimport { Menu, type MenuProps, useMenu } from '@/navigation/Menu';\n\nimport type { OptionProps } from './Option';\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Select.scss';\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {\n error?: boolean;\n autoClose?: boolean;\n label?: string;\n helperText?: string;\n color?: Colors;\n position?: MenuProps['position'];\n startIcon?: React.JSX.Element | boolean;\n children: React.JSX.Element | React.JSX.Element[];\n}\n\nfunction Select({\n error,\n color = 'grey',\n position = 'bottom',\n label,\n helperText,\n startIcon,\n children,\n disabled,\n onChange,\n ...props\n}: SelectProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<OptionProps>[];\n\n const newValue = useMemo(() => {\n return arrayChildren.find((child) =>\n child.props.value === props.value)?.props.children || '';\n }, [props.value]);\n\n const [open, el, toggle] = useMenu();\n\n const containerClss = joinClass(\n `${prefix}-select-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-select-label`,\n error && `${prefix}-select-label--error`,\n );\n\n const clss = joinClass(\n `${prefix}-select`,\n disabled && `${prefix}-select--disabled`,\n error && `${prefix}-select--error`,\n props.className\n );\n\n const helperTextClss = joinClass(\n `${prefix}-select__helper-text`,\n helperText && `${prefix}-select__helper-text--visible`,\n error && `${prefix}-select__helper-text--error`\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-select__icon--left`\n ),\n type: 'button',\n style: { color },\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const renderOption = () => {\n return arrayChildren.map((child) => {\n return cloneElement(child, {\n color,\n className: joinClass(\n child.props.className,\n child.props.value === props.value && `${prefix}-select__option--selected`,\n ),\n onClick: (e) => {\n if (!child.props.disabled && onChange) { onChange(e as any); }\n }\n });\n });\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <button type=\"button\" className={clss} onClick={toggle} disabled={disabled}>\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input {...props} readOnly type=\"text\" value={newValue} disabled={disabled} />\n <Icon\n name=\"angle-down\"\n sx={{ color: ({ grey }) => grey.main }}\n className={`${prefix}-select__icon--right`}\n />\n </button>\n <Menu\n autoClose\n position={position}\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {renderOption()}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Select);\n","import { ButtonHTMLAttributes, cloneElement, ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport type { Colors } from '@iziui/core/theme';\n\nexport interface OptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n value: any;\n children: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n}\nexport default function Option({ children, color, startIcon, disabled, ...props }: OptionProps) {\n const className = joinClass(\n `${prefix}-select__option`,\n disabled && `${prefix}-select__option--disabled`,\n color && `${prefix}-select__option--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n type: 'button',\n className: joinClass(\n icon.props.className,\n `${prefix}-select__option__icon`,\n ),\n });\n };\n\n return (\n <button type=\"button\" {...props} className={className}>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n {children}\n </button>\n );\n};"],"names":["Select","error","color","position","label","helperText","startIcon","children","disabled","onChange","props","arrayChildren","Children","newValue","useMemo","child","open","el","toggle","useMenu","containerClss","joinClass","prefix","labelClss","clss","helperTextClss","renderIcon","icon","cloneElement","e","renderOption","jsxs","jsx","Icon","grey","Menu","Select_default","createComponent","Option","className"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{jsxs as _,jsx as a}from"react/jsx-runtime";import{Children as O,useMemo as I,cloneElement as d}from"react";import{p as e}from"./index-CZ41y9Hn.js";import{j as s}from"./joinClass-anSpaauN.js";import{I as S}from"./Icon-DTU52KQE.js";import{u as w,M as E}from"./useMenu-B49hOh6R.js";import{c as q}from"./createComponent-BmdhWozT.js";function A({error:o,color:r="grey",position:i="bottom",label:p,helperText:c,startIcon:m,children:$,disabled:n,onChange:f,...l}){const N=O.toArray($),b=I(()=>N.find(t=>t.props.value===l.value)?.props.children||"",[l.value]),[h,y,C]=w(),v=s(`${e}-select-container`),x=s(`${e}-select-label`,o&&`${e}-select-label--error`),g=s(`${e}-select`,n&&`${e}-select--disabled`,o&&`${e}-select--error`,l.className),k=s(`${e}-select__helper-text`,c&&`${e}-select__helper-text--visible`,o&&`${e}-select__helper-text--error`),j=t=>d(t,{className:s(t.props.className,`${e}-select__icon--left`),type:"button",style:{color:r},onClick:u=>{u.stopPropagation(),t.props.onClick&&!n&&t.props.onClick(u)}}),M=()=>N.map(t=>d(t,{color:r,className:s(t.props.className,t.props.value===l.value&&`${e}-select__option--selected`),onClick:u=>{!t.props.disabled&&f&&f(u)}}));return _("div",{className:v,children:[p&&_("label",{className:x,children:[p," ",l.required&&"*"]}),_("button",{type:"button",className:g,onClick:C,disabled:n,children:[a("div",{children:m&&j(m)}),a("input",{...l,readOnly:!0,type:"text",value:b,disabled:n}),a(S,{name:"angle-down",sx:{color:({grey:t})=>t.main},className:`${e}-select__icon--right`})]}),a(E,{autoClose:!0,position:i,direction:"center",open:h,anchorEl:y,onClose:C,children:M()}),a("span",{className:k,children:c})]})}const H=q(A);function J({children:o,color:r,startIcon:i,disabled:p,...c}){const m=s(`${e}-select__option`,p&&`${e}-select__option--disabled`,r&&`${e}-select__option--${r}`,c.className);return _("button",{type:"button",...c,className:m,children:[i&&(n=>d(n,{type:"button",className:s(n.props.className,`${e}-select__option__icon`)}))(i),o]})}export{J as O,H as S};
2
+ //# sourceMappingURL=Option-CzDngSSk.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Option-CzDngSSk.js","sources":["../../src/fields/Select/Select.tsx","../../src/fields/Select/Option.tsx"],"sourcesContent":["import {\n useMemo,\n Children,\n cloneElement,\n type ReactElement,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport Icon from '@/display/Icon';\nimport { Menu, type MenuProps, useMenu } from '@/navigation/Menu';\n\nimport type { OptionProps } from './Option';\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Select.scss';\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {\n error?: boolean;\n autoClose?: boolean;\n label?: string;\n helperText?: string;\n color?: Colors;\n position?: MenuProps['position'];\n startIcon?: React.JSX.Element | boolean;\n children: React.JSX.Element | React.JSX.Element[];\n}\n\nfunction Select({\n error,\n color = 'grey',\n position = 'bottom',\n label,\n helperText,\n startIcon,\n children,\n disabled,\n onChange,\n ...props\n}: SelectProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<OptionProps>[];\n\n const newValue = useMemo(() => {\n return arrayChildren.find((child) =>\n child.props.value === props.value)?.props.children || '';\n }, [props.value]);\n\n const [open, el, toggle] = useMenu();\n\n const containerClss = joinClass(\n `${prefix}-select-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-select-label`,\n error && `${prefix}-select-label--error`,\n );\n\n const clss = joinClass(\n `${prefix}-select`,\n disabled && `${prefix}-select--disabled`,\n error && `${prefix}-select--error`,\n props.className\n );\n\n const helperTextClss = joinClass(\n `${prefix}-select__helper-text`,\n helperText && `${prefix}-select__helper-text--visible`,\n error && `${prefix}-select__helper-text--error`\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-select__icon--left`\n ),\n type: 'button',\n style: { color },\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const renderOption = () => {\n return arrayChildren.map((child) => {\n return cloneElement(child, {\n color,\n className: joinClass(\n child.props.className,\n child.props.value === props.value && `${prefix}-select__option--selected`,\n ),\n onClick: (e) => {\n if (!child.props.disabled && onChange) { onChange(e as any); }\n }\n });\n });\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <button type=\"button\" className={clss} onClick={toggle} disabled={disabled}>\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input {...props} readOnly type=\"text\" value={newValue} disabled={disabled} />\n <Icon\n name=\"angle-down\"\n sx={{ color: ({ grey }) => grey.main }}\n className={`${prefix}-select__icon--right`}\n />\n </button>\n <Menu\n autoClose\n position={position}\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {renderOption()}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Select);\n","import { ButtonHTMLAttributes, cloneElement, ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport type { Colors } from '@iziui/core/theme';\n\nexport interface OptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n value: any;\n children: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n}\nexport default function Option({ children, color, startIcon, disabled, ...props }: OptionProps) {\n const className = joinClass(\n `${prefix}-select__option`,\n disabled && `${prefix}-select__option--disabled`,\n color && `${prefix}-select__option--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n type: 'button',\n className: joinClass(\n icon.props.className,\n `${prefix}-select__option__icon`,\n ),\n });\n };\n\n return (\n <button type=\"button\" {...props} className={className}>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n {children}\n </button>\n );\n};"],"names":["Select","error","color","position","label","helperText","startIcon","children","disabled","onChange","props","arrayChildren","Children","newValue","useMemo","child","open","el","toggle","useMenu","containerClss","joinClass","prefix","labelClss","clss","helperTextClss","renderIcon","icon","cloneElement","e","renderOption","jsxs","jsx","Icon","grey","Menu","Select_default","createComponent","Option","className"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ "use strict";const l=require("react"),c=require("react/jsx-runtime"),f=l.createContext(null);function b({formGroup:s,debug:t=!1,children:r,...e}){const n=u=>{u.preventDefault(),s.submit()};return c.jsxs(f,{value:s,children:[c.jsx("form",{...e,style:{width:"100%",...e.style},onSubmit:n,noValidate:!0,children:r}),t&&c.jsx("pre",{style:{width:"100%",maxHeight:350,padding:15,borderRadius:4,overflow:"auto",color:"#333",background:"#e5e5e5",boxShadow:"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)"},children:JSON.stringify(s,null,2)})]})}function v(){const s=l.useContext(f);if(!s)throw new Error("useFormGroup must be used inside <FormProvider> (or <Form />).");return s}function m(s){const t=v();return{control:t.controls[s],update:n=>{t.setValues(u=>(u[s]=n,u))}}}function C({controlName:s,field:t,action:r="input"}){const{control:e,update:n}=m(s);return(i=>{const a=o=>["radio","checkbox"].includes(o.type)?o.target.checked:o.target.value;return l.cloneElement(i,{onBlur:o=>{r==="blur"&&n(a(o)),i.props.onBlur&&i.props.onBlur(o)},onInput:o=>{r==="input"&&n(a(o)),i.props.onInput&&i.props.onInput(o)},onChange:o=>{r==="change"&&n(a(o)),i.props.onChange&&i.props.onChange(o)}})})(t(e))}class h{constructor(t,r,e){this.controls=t,this.handle=r,this.validator=e}controls;handle;validator;_valid=!1;_hydrate;get hydrate(){return this._hydrate}set hydrate(t){this._hydrate=t}get isValid(){return this._valid}set isValid(t){this._valid=t}get errors(){return Object.values(this.controls).filter(t=>t.error)}get values(){const t={};return this.eachControl((r,e)=>({[e]:r.value})).forEach(r=>{for(const e in r)t[e]=r[e]}),t}setValues(t){const r=typeof t=="function"?t(this.values):t;for(const e of Object.keys(r))this.controls[e].value=r[e];this.validate(),this.hydrate(this),this.handle.change&&this.handle.change(this)}eachControl(t){return Object.keys(this.controls).map(r=>t(this.controls[r],r))}submit(){this.handle.submit&&(this.eachControl(t=>{t.dirty=!0}),this.validate(),this.hydrate(this),this.handle.submit(this))}reset(){this.eachControl(t=>t.reset()),this.hydrate(this)}validate(){Object.entries(this.controls).map(([t,r])=>{let e=r.validate();this.validator&&this.validator[t]&&(e=this.validator[t](this)||""),r.error=e}),this.isValid=!this.errors.length,this.hydrate(this)}}class y{_value;defaultValue;validators=[];type;error="";dirty=!1;constructor({defaultValue:t,type:r="text",validators:e}){this.type=r,this._value=t,this.defaultValue=t,e&&(this.validators=e)}get value(){return this._value}set value(t){this.dirty=!0,this._value=t,this.validate()}get isInvalid(){return!!(this.dirty&&this.error)}reset(){this.value=this.defaultValue,this.dirty=!1}validate(){const t=this.validators.map(r=>r(this)).filter(Boolean);return this.error=t[0]||"",this.error}}function p(s){return Object.entries(s).reduce((t,r)=>{const e=r[0],n=r[1];return t[e]=new y(n),t},{})}function x({form:s,handle:t,validator:r},e){const[n,u]=l.useState(new h(p(s),t,r));l.useEffect(()=>{u(new h(p(s),t,r))},[...e]);const i=a=>{u(o=>{const g=a.controls,d=new h(g,t,r);return d.hydrate=o.hydrate,d})};return n.hydrate=i,n}exports.Control=C;exports.Form=b;exports.FormControl=y;exports.FormGroup=h;exports.useControl=m;exports.useForm=x;exports.useFormGroup=v;
2
+ //# sourceMappingURL=useForm-CD-_L271.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useForm-BNLOy0E6.cjs","sources":["../../src/lab/Form/Form.tsx","../../src/lab/Form/useFormGroup.ts","../../src/lab/Form/useControl.ts","../../src/lab/Form/Control.tsx","../../src/lab/Form/FormGroup.ts","../../src/lab/Form/FormControl.ts","../../src/lab/Form/useForm.ts"],"sourcesContent":["import { createContext, SubmitEvent, HTMLAttributes } from 'react';\n\nimport type FormGroup from './FormGroup';\n\nexport const FormContext = createContext<FormGroup<any> | null>(null);\n\ninterface FormProps<T extends Record<string, any>> extends HTMLAttributes<HTMLFormElement> {\n formGroup: FormGroup<T>;\n debug?: boolean;\n}\n\nexport default function Form<T extends Record<string, any>>({\n formGroup,\n debug = false,\n children,\n ...props\n}: FormProps<T>) {\n const submit = (event: SubmitEvent<HTMLFormElement>) => {\n event.preventDefault();\n formGroup.submit();\n };\n\n return (\n <FormContext value={formGroup}>\n <form\n {...props}\n style={{ width: '100%', ...props.style }}\n onSubmit={submit}\n noValidate\n >\n {children}\n </form>\n {\n debug && (\n <pre style={{\n width: '100%',\n maxHeight: 350,\n padding: 15,\n borderRadius: 4,\n overflow: 'auto',\n color: '#333',\n background: '#e5e5e5',\n boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',\n }}>\n {JSON.stringify(formGroup, null, 2)}\n </pre>\n )\n }\n </FormContext>\n );\n}","import { useContext } from 'react';\n\nimport type FormGroup from './FormGroup';\nimport { FormContext } from './Form';\n\nexport default function useFormGroup<T extends Record<string, any>>() {\n const context = useContext(FormContext);\n\n if (!context) throw new Error('useFormGroup must be used inside <FormProvider> (or <Form />).');\n\n return context as FormGroup<T>;\n}","import useFormGroup from './useFormGroup';\n\nexport default function useControl<\n T extends Record<string, any>,\n K extends keyof T = keyof T,\n>(controlName: K) {\n const formGroup = useFormGroup<T>();\n const control = formGroup.controls[controlName];\n\n const update = (value: T[K]) => {\n formGroup.setValues((data) => {\n data[controlName] = value;\n\n return data;\n });\n };\n\n return { control, update };\n}","import { ChangeEvent, cloneElement, InputEvent, InputHTMLAttributes, ReactElement } from 'react';\n\nimport useControl from './useControl';\nimport type { AbstractControl } from './AbstractControl';\n\ninterface ControlProps<\n T extends Record<string, any>,\n K extends keyof T,\n> {\n controlName: K;\n action?: 'change' | 'input' | 'blur';\n field: (control: AbstractControl<T>[K]) => React.JSX.Element;\n}\n\nexport default function Control<\n T extends Record<string, any>,\n K extends keyof T\n>({\n controlName,\n field,\n action = 'input'\n}: ControlProps<T, K>) {\n const { control, update } = useControl<T, K>(controlName);\n\n const renderChildren = (child: ReactElement<InputHTMLAttributes<HTMLInputElement>>) => {\n const getValue = (e: ChangeEvent<HTMLInputElement> | InputEvent<HTMLInputElement>) => {\n if (['radio', 'checkbox'].includes(e.type)) { return e.target['checked']; }\n\n return e.target['value'];\n };\n\n return cloneElement(child, {\n onBlur: (e) => {\n if (action === 'blur') { update(getValue(e)); };\n\n if (child.props.onBlur) { child.props.onBlur(e); }\n },\n onInput: (e) => {\n if (action === 'input') { update(getValue(e)); };\n\n if (child.props.onInput) { child.props.onInput(e); }\n },\n onChange: (e) => {\n if (action === 'change') { update(getValue(e)); };\n\n if (child.props.onChange) { child.props.onChange(e); }\n },\n });\n };\n\n return (\n renderChildren(field(control))\n );\n}","import type { AbstractControl } from './AbstractControl';\nimport type FormControl from './FormControl';\n\ntype Hydrate<T extends Record<string, any>> = (data: FormGroup<T>) => void;\ntype SetValues<F> = Partial<F> | ((values: F) => Partial<F>);\n\nexport type Validator<T extends Record<string, any>> = Partial<{\n [K in keyof T]: (data: FormGroup<T>) => string | void;\n}>\n\nexport interface Handle<T extends Record<string, any>> {\n change?: (form: FormGroup<T>) => void;\n submit?: (form: FormGroup<T>) => void;\n}\n\nexport default class FormGroup<T extends Record<string, any>> {\n private _valid = false;\n private _hydrate!: Hydrate<T>;\n\n constructor(\n public controls: AbstractControl<T>,\n public handle: Handle<T>,\n public validator?: Validator<T>,\n ) { }\n\n /**\n * Atualiza o estado interno do componente.\n * @private\n * @description Este método é usado internamente pela biblioteca.\n * Para atualizar valores externamente, use {@link setValues}.\n*/\n get hydrate() { return this._hydrate; }\n set hydrate(fn: (values: FormGroup<T>) => any) { this._hydrate = fn; }\n\n get isValid(): boolean { return this._valid; }\n set isValid(validity: boolean) { this._valid = validity; }\n\n get errors() {\n return Object.values<FormControl<T[keyof T]>>(this.controls)\n .filter(c => c.error);\n }\n\n get values(): T {\n const values: Record<string, any> = {};\n\n this.eachControl((control, key) => ({ [key as string]: control.value }))\n .forEach(control => { for (const prop in control) { values[prop] = control[prop]; } });\n\n return values as T;\n }\n\n public setValues(fn: SetValues<T>): void;\n public setValues(partialForm: Partial<T>): void;\n public setValues(arg: Partial<T> | SetValues<T>) {\n const partial =\n typeof arg === 'function'\n ? arg(this.values)\n : arg;\n\n for (const key of Object.keys(partial)) {\n this.controls[key].value = partial[key] as T[keyof T];\n }\n\n this.validate();\n\n this.hydrate(this);\n\n if (!this.handle.change) { return; }\n\n this.handle.change(this);\n }\n\n private eachControl(fn: <K extends keyof T>(control: FormControl<T[K]>, key?: K) => any) {\n return Object.keys(this.controls).map(k => fn(this.controls[k], k));\n }\n\n public submit() {\n if (!this.handle.submit) { return; }\n\n this.eachControl((control) => { control.dirty = true; });\n\n this.validate();\n\n this.hydrate(this);\n this.handle.submit(this);\n }\n\n public reset() {\n this.eachControl((control) => control.reset());\n this.hydrate(this);\n }\n\n public validate() {\n Object.entries(this.controls).map(([key, control]) => {\n let error = control.validate();\n\n if (this.validator && this.validator[key]) {\n error = this.validator[key](this) || '';\n }\n\n control.error = error;\n });\n\n this.isValid = !this.errors.length;\n this.hydrate(this);\n }\n}","type Type = 'text' | 'email';\ntype Validator<C> = (control: FormControl<C>) => string | false | void;\n\ntype Data<T> = {\n defaultValue: T;\n type?: Type;\n validators?: Validator<T>[];\n}\n\nexport type Constructor<V> = ConstructorParameters<typeof FormControl<V>>[number];\n\nexport default class FormControl<V> implements Pick<Data<V>, 'type'> {\n private _value!: V;\n private defaultValue: V;\n private validators: Validator<V>[] = [];\n\n public type: Type;\n public error = '';\n public dirty = false;\n\n constructor({\n defaultValue,\n type = 'text',\n validators,\n }: Data<V>) {\n this.type = type;\n this._value = defaultValue;\n this.defaultValue = defaultValue;\n\n if (validators) { this.validators = validators; }\n }\n\n get value(): V { return this._value; }\n set value(value: V) {\n this.dirty = true;\n this._value = value;\n this.validate();\n }\n\n get isInvalid() { return Boolean(this.dirty && this.error); }\n\n public reset() {\n this.value = this.defaultValue;\n this.dirty = false;\n }\n\n public validate() {\n const errors = this.validators\n .map(v => v(this))\n .filter(Boolean);\n\n this.error = errors[0] || '';\n\n return this.error;\n }\n}\n","import { useEffect, useState } from 'react';\n\nimport FormGroup from './FormGroup';\nimport FormControl from './FormControl';\nimport type { Constructor } from './FormControl';\nimport type { Handle, Validator } from './FormGroup';\nimport type { AbstractControl } from './AbstractControl';\n\ntype UseForm<T extends Record<string, any>> = {\n form: { [K in keyof T]: Constructor<T[K]> };\n handle: Handle<T>;\n validator?: Validator<T>;\n}\n\nfunction makingControls<T extends Record<string, any>>(form: { [K in keyof T]: Constructor<T[K]> }) {\n return Object.entries(form)\n .reduce((acc, data) => {\n const key = data[0] as keyof T;\n const value = data[1] as Constructor<T[keyof T]>;\n\n acc[key] = new FormControl(value);\n\n return acc;\n }, {} as AbstractControl<T>);\n}\n\nexport default function useForm<T extends Record<any, any>>({\n form,\n handle,\n validator\n}: UseForm<T>, deps: readonly unknown[]) {\n const [formGroup, setFormGroup] = useState<FormGroup<T>>(\n new FormGroup(\n makingControls(form),\n handle,\n validator\n )\n );\n\n useEffect(() => {\n setFormGroup(new FormGroup(makingControls(form), handle, validator));\n }, [...deps]);\n\n const hydrate = (form: FormGroup<T>) => {\n setFormGroup(prev => {\n const controls = form.controls;\n\n const newFormGroup = new FormGroup(controls, handle, validator);\n newFormGroup.hydrate = prev.hydrate;\n\n return newFormGroup;\n });\n };\n\n formGroup.hydrate = hydrate;\n\n return formGroup;\n}"],"names":["FormContext","createContext","Form","formGroup","debug","children","props","submit","event","jsxs","jsx","useFormGroup","context","useContext","useControl","controlName","value","data","Control","field","action","control","update","child","getValue","e","cloneElement","FormGroup","controls","handle","validator","fn","validity","c","values","key","prop","arg","partial","k","error","FormControl","defaultValue","type","validators","errors","v","makingControls","form","acc","useForm","deps","setFormGroup","useState","useEffect","hydrate","prev","newFormGroup"],"mappings":"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"}
1
+ {"version":3,"file":"useForm-CD-_L271.cjs","sources":["../../src/lab/Form/Form.tsx","../../src/lab/Form/useFormGroup.ts","../../src/lab/Form/useControl.ts","../../src/lab/Form/Control.tsx","../../src/lab/Form/FormGroup.ts","../../src/lab/Form/FormControl.ts","../../src/lab/Form/useForm.ts"],"sourcesContent":["import { createContext, SubmitEvent, HTMLAttributes } from 'react';\n\nimport type FormGroup from './FormGroup';\n\nexport const FormContext = createContext<FormGroup<any> | null>(null);\n\ninterface FormProps<T extends Record<string, any>> extends HTMLAttributes<HTMLFormElement> {\n formGroup: FormGroup<T>;\n debug?: boolean;\n}\n\nexport default function Form<T extends Record<string, any>>({\n formGroup,\n debug = false,\n children,\n ...props\n}: FormProps<T>) {\n const submit = (event: SubmitEvent<HTMLFormElement>) => {\n event.preventDefault();\n formGroup.submit();\n };\n\n return (\n <FormContext value={formGroup}>\n <form\n {...props}\n style={{ width: '100%', ...props.style }}\n onSubmit={submit}\n noValidate\n >\n {children}\n </form>\n {\n debug && (\n <pre style={{\n width: '100%',\n maxHeight: 350,\n padding: 15,\n borderRadius: 4,\n overflow: 'auto',\n color: '#333',\n background: '#e5e5e5',\n boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',\n }}>\n {JSON.stringify(formGroup, null, 2)}\n </pre>\n )\n }\n </FormContext>\n );\n}","import { useContext } from 'react';\n\nimport type FormGroup from './FormGroup';\nimport { FormContext } from './Form';\n\nexport default function useFormGroup<T extends Record<string, any>>() {\n const context = useContext(FormContext);\n\n if (!context) throw new Error('useFormGroup must be used inside <FormProvider> (or <Form />).');\n\n return context as FormGroup<T>;\n}","import useFormGroup from './useFormGroup';\n\nexport default function useControl<\n T extends Record<string, any>,\n K extends keyof T = keyof T,\n>(controlName: K) {\n const formGroup = useFormGroup<T>();\n const control = formGroup.controls[controlName];\n\n const update = (value: T[K]) => {\n formGroup.setValues((data) => {\n data[controlName] = value;\n\n return data;\n });\n };\n\n return { control, update };\n}","import { ChangeEvent, cloneElement, InputEvent, InputHTMLAttributes, ReactElement } from 'react';\n\nimport useControl from './useControl';\nimport type { AbstractControl } from './AbstractControl';\n\ninterface ControlProps<\n T extends Record<string, any>,\n K extends keyof T,\n> {\n controlName: K;\n action?: 'change' | 'input' | 'blur';\n field: (control: AbstractControl<T>[K]) => React.JSX.Element;\n}\n\nexport default function Control<\n T extends Record<string, any>,\n K extends keyof T\n>({\n controlName,\n field,\n action = 'input'\n}: ControlProps<T, K>) {\n const { control, update } = useControl<T, K>(controlName);\n\n const renderChildren = (child: ReactElement<InputHTMLAttributes<HTMLInputElement>>) => {\n const getValue = (e: ChangeEvent<HTMLInputElement> | InputEvent<HTMLInputElement>) => {\n if (['radio', 'checkbox'].includes(e.type)) { return e.target['checked']; }\n\n return e.target['value'];\n };\n\n return cloneElement(child, {\n onBlur: (e) => {\n if (action === 'blur') { update(getValue(e)); };\n\n if (child.props.onBlur) { child.props.onBlur(e); }\n },\n onInput: (e) => {\n if (action === 'input') { update(getValue(e)); };\n\n if (child.props.onInput) { child.props.onInput(e); }\n },\n onChange: (e) => {\n if (action === 'change') { update(getValue(e)); };\n\n if (child.props.onChange) { child.props.onChange(e); }\n },\n });\n };\n\n return (\n renderChildren(field(control))\n );\n}","import type { AbstractControl } from './AbstractControl';\nimport type FormControl from './FormControl';\n\ntype Hydrate<T extends Record<string, any>> = (data: FormGroup<T>) => void;\ntype SetValues<F> = Partial<F> | ((values: F) => Partial<F>);\n\nexport type Validator<T extends Record<string, any>> = Partial<{\n [K in keyof T]: (data: FormGroup<T>) => string | void;\n}>\n\nexport interface Handle<T extends Record<string, any>> {\n change?: (form: FormGroup<T>) => void;\n submit?: (form: FormGroup<T>) => void;\n}\n\nexport default class FormGroup<T extends Record<string, any>> {\n private _valid = false;\n private _hydrate!: Hydrate<T>;\n\n constructor(\n public controls: AbstractControl<T>,\n public handle: Handle<T>,\n public validator?: Validator<T>,\n ) { }\n\n /**\n * Atualiza o estado interno do componente.\n * @private\n * @description Este método é usado internamente pela biblioteca.\n * Para atualizar valores externamente, use {@link setValues}.\n*/\n get hydrate() { return this._hydrate; }\n set hydrate(fn: (values: FormGroup<T>) => any) { this._hydrate = fn; }\n\n get isValid(): boolean { return this._valid; }\n set isValid(validity: boolean) { this._valid = validity; }\n\n get errors() {\n return Object.values<FormControl<T[keyof T]>>(this.controls)\n .filter(c => c.error);\n }\n\n get values(): T {\n const values: Record<string, any> = {};\n\n this.eachControl((control, key) => ({ [key as string]: control.value }))\n .forEach(control => { for (const prop in control) { values[prop] = control[prop]; } });\n\n return values as T;\n }\n\n public setValues(fn: SetValues<T>): void;\n public setValues(partialForm: Partial<T>): void;\n public setValues(arg: Partial<T> | SetValues<T>) {\n const partial =\n typeof arg === 'function'\n ? arg(this.values)\n : arg;\n\n for (const key of Object.keys(partial)) {\n this.controls[key].value = partial[key] as T[keyof T];\n }\n\n this.validate();\n\n this.hydrate(this);\n\n if (!this.handle.change) { return; }\n\n this.handle.change(this);\n }\n\n private eachControl(fn: <K extends keyof T>(control: FormControl<T[K]>, key?: K) => any) {\n return Object.keys(this.controls).map(k => fn(this.controls[k], k));\n }\n\n public submit() {\n if (!this.handle.submit) { return; }\n\n this.eachControl((control) => { control.dirty = true; });\n\n this.validate();\n\n this.hydrate(this);\n this.handle.submit(this);\n }\n\n public reset() {\n this.eachControl((control) => control.reset());\n this.hydrate(this);\n }\n\n public validate() {\n Object.entries(this.controls).map(([key, control]) => {\n let error = control.validate();\n\n if (this.validator && this.validator[key]) {\n error = this.validator[key](this) || '';\n }\n\n control.error = error;\n });\n\n this.isValid = !this.errors.length;\n this.hydrate(this);\n }\n}","type Type = 'text' | 'email';\ntype Validator<C> = (control: FormControl<C>) => string | false | void;\n\ntype Data<T> = {\n defaultValue: T;\n type?: Type;\n validators?: Validator<T>[];\n}\n\nexport type Constructor<V> = ConstructorParameters<typeof FormControl<V>>[number];\n\nexport default class FormControl<V> implements Pick<Data<V>, 'type'> {\n private _value!: V;\n private defaultValue: V;\n private validators: Validator<V>[] = [];\n\n public type: Type;\n public error = '';\n public dirty = false;\n\n constructor({\n defaultValue,\n type = 'text',\n validators,\n }: Data<V>) {\n this.type = type;\n this._value = defaultValue;\n this.defaultValue = defaultValue;\n\n if (validators) { this.validators = validators; }\n }\n\n get value(): V { return this._value; }\n set value(value: V) {\n this.dirty = true;\n this._value = value;\n this.validate();\n }\n\n get isInvalid() { return Boolean(this.dirty && this.error); }\n\n public reset() {\n this.value = this.defaultValue;\n this.dirty = false;\n }\n\n public validate() {\n const errors = this.validators\n .map(v => v(this))\n .filter(Boolean);\n\n this.error = errors[0] || '';\n\n return this.error;\n }\n}\n","import { useEffect, useState } from 'react';\n\nimport FormGroup from './FormGroup';\nimport FormControl from './FormControl';\nimport type { Constructor } from './FormControl';\nimport type { Handle, Validator } from './FormGroup';\nimport type { AbstractControl } from './AbstractControl';\n\ntype UseForm<T extends Record<string, any>> = {\n form: { [K in keyof T]: Constructor<T[K]> };\n handle: Handle<T>;\n validator?: Validator<T>;\n}\n\nfunction makingControls<T extends Record<string, any>>(form: { [K in keyof T]: Constructor<T[K]> }) {\n return Object.entries(form)\n .reduce((acc, data) => {\n const key = data[0] as keyof T;\n const value = data[1] as Constructor<T[keyof T]>;\n\n acc[key] = new FormControl(value);\n\n return acc;\n }, {} as AbstractControl<T>);\n}\n\nexport default function useForm<T extends Record<any, any>>({\n form,\n handle,\n validator\n}: UseForm<T>, deps: readonly unknown[]) {\n const [formGroup, setFormGroup] = useState<FormGroup<T>>(\n new FormGroup(\n makingControls(form),\n handle,\n validator\n )\n );\n\n useEffect(() => {\n setFormGroup(new FormGroup(makingControls(form), handle, validator));\n }, [...deps]);\n\n const hydrate = (form: FormGroup<T>) => {\n setFormGroup(prev => {\n const controls = form.controls;\n\n const newFormGroup = new FormGroup(controls, handle, validator);\n newFormGroup.hydrate = prev.hydrate;\n\n return newFormGroup;\n });\n };\n\n formGroup.hydrate = hydrate;\n\n return formGroup;\n}"],"names":["FormContext","createContext","Form","formGroup","debug","children","props","submit","event","jsxs","jsx","useFormGroup","context","useContext","useControl","controlName","value","data","Control","field","action","control","update","child","getValue","e","cloneElement","FormGroup","controls","handle","validator","fn","validity","c","values","key","prop","arg","partial","k","error","FormControl","defaultValue","type","validators","errors","v","makingControls","form","acc","useForm","deps","setFormGroup","useState","useEffect","hydrate","prev","newFormGroup"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{createContext as v,useContext as y,cloneElement as m,useState as g,useEffect as b}from"react";import{jsxs as C,jsx as c}from"react/jsx-runtime";const p=v(null);function j({formGroup:s,debug:t=!1,children:e,...r}){const n=a=>{a.preventDefault(),s.submit()};return C(p,{value:s,children:[c("form",{...r,style:{width:"100%",...r.style},onSubmit:n,noValidate:!0,children:e}),t&&c("pre",{style:{width:"100%",maxHeight:350,padding:15,borderRadius:4,overflow:"auto",color:"#333",background:"#e5e5e5",boxShadow:"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)"},children:JSON.stringify(s,null,2)})]})}function x(){const s=y(p);if(!s)throw new Error("useFormGroup must be used inside <FormProvider> (or <Form />).");return s}function F(s){const t=x();return{control:t.controls[s],update:n=>{t.setValues(a=>(a[s]=n,a))}}}function k({controlName:s,field:t,action:e="input"}){const{control:r,update:n}=F(s);return(i=>{const u=o=>["radio","checkbox"].includes(o.type)?o.target.checked:o.target.value;return m(i,{onBlur:o=>{e==="blur"&&n(u(o)),i.props.onBlur&&i.props.onBlur(o)},onInput:o=>{e==="input"&&n(u(o)),i.props.onInput&&i.props.onInput(o)},onChange:o=>{e==="change"&&n(u(o)),i.props.onChange&&i.props.onChange(o)}})})(t(r))}class l{constructor(t,e,r){this.controls=t,this.handle=e,this.validator=r}controls;handle;validator;_valid=!1;_hydrate;get hydrate(){return this._hydrate}set hydrate(t){this._hydrate=t}get isValid(){return this._valid}set isValid(t){this._valid=t}get errors(){return Object.values(this.controls).filter(t=>t.error)}get values(){const t={};return this.eachControl((e,r)=>({[r]:e.value})).forEach(e=>{for(const r in e)t[r]=e[r]}),t}setValues(t){const e=typeof t=="function"?t(this.values):t;for(const r of Object.keys(e))this.controls[r].value=e[r];this.validate(),this.hydrate(this),this.handle.change&&this.handle.change(this)}eachControl(t){return Object.keys(this.controls).map(e=>t(this.controls[e],e))}submit(){this.handle.submit&&(this.eachControl(t=>{t.dirty=!0}),this.validate(),this.hydrate(this),this.handle.submit(this))}reset(){this.eachControl(t=>t.reset()),this.hydrate(this)}validate(){Object.entries(this.controls).map(([t,e])=>{let r=e.validate();this.validator&&this.validator[t]&&(r=this.validator[t](this)||""),e.error=r}),this.isValid=!this.errors.length,this.hydrate(this)}}class w{_value;defaultValue;validators=[];type;error="";dirty=!1;constructor({defaultValue:t,type:e="text",validators:r}){this.type=e,this._value=t,this.defaultValue=t,r&&(this.validators=r)}get value(){return this._value}set value(t){this.dirty=!0,this._value=t,this.validate()}get isInvalid(){return!!(this.dirty&&this.error)}reset(){this.value=this.defaultValue,this.dirty=!1}validate(){const t=this.validators.map(e=>e(this)).filter(Boolean);return this.error=t[0]||"",this.error}}function d(s){return Object.entries(s).reduce((t,e)=>{const r=e[0],n=e[1];return t[r]=new w(n),t},{})}function O({form:s,handle:t,validator:e},r){const[n,a]=g(new l(d(s),t,e));b(()=>{a(new l(d(s),t,e))},[...r]);const i=u=>{a(o=>{const f=u.controls,h=new l(f,t,e);return h.hydrate=o.hydrate,h})};return n.hydrate=i,n}export{k as C,j as F,O as a,x as b,F as u};
2
- //# sourceMappingURL=useForm-iwGfb88g.js.map
1
+ import{createContext as v,useContext as y,cloneElement as m,useState as g,useEffect as b}from"react";import{jsxs as C,jsx as c}from"react/jsx-runtime";const p=v(null);function j({formGroup:s,debug:t=!1,children:e,...r}){const n=a=>{a.preventDefault(),s.submit()};return C(p,{value:s,children:[c("form",{...r,style:{width:"100%",...r.style},onSubmit:n,noValidate:!0,children:e}),t&&c("pre",{style:{width:"100%",maxHeight:350,padding:15,borderRadius:4,overflow:"auto",color:"#333",background:"#e5e5e5",boxShadow:"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)"},children:JSON.stringify(s,null,2)})]})}function x(){const s=y(p);if(!s)throw new Error("useFormGroup must be used inside <FormProvider> (or <Form />).");return s}function F(s){const t=x();return{control:t.controls[s],update:n=>{t.setValues(a=>(a[s]=n,a))}}}function k({controlName:s,field:t,action:e="input"}){const{control:r,update:n}=F(s);return(i=>{const u=o=>["radio","checkbox"].includes(o.type)?o.target.checked:o.target.value;return m(i,{onBlur:o=>{e==="blur"&&n(u(o)),i.props.onBlur&&i.props.onBlur(o)},onInput:o=>{e==="input"&&n(u(o)),i.props.onInput&&i.props.onInput(o)},onChange:o=>{e==="change"&&n(u(o)),i.props.onChange&&i.props.onChange(o)}})})(t(r))}class l{constructor(t,e,r){this.controls=t,this.handle=e,this.validator=r}controls;handle;validator;_valid=!1;_hydrate;get hydrate(){return this._hydrate}set hydrate(t){this._hydrate=t}get isValid(){return this._valid}set isValid(t){this._valid=t}get errors(){return Object.values(this.controls).filter(t=>t.error)}get values(){const t={};return this.eachControl((e,r)=>({[r]:e.value})).forEach(e=>{for(const r in e)t[r]=e[r]}),t}setValues(t){const e=typeof t=="function"?t(this.values):t;for(const r of Object.keys(e))this.controls[r].value=e[r];this.validate(),this.hydrate(this),this.handle.change&&this.handle.change(this)}eachControl(t){return Object.keys(this.controls).map(e=>t(this.controls[e],e))}submit(){this.handle.submit&&(this.eachControl(t=>{t.dirty=!0}),this.validate(),this.hydrate(this),this.handle.submit(this))}reset(){this.eachControl(t=>t.reset()),this.hydrate(this)}validate(){Object.entries(this.controls).map(([t,e])=>{let r=e.validate();this.validator&&this.validator[t]&&(r=this.validator[t](this)||""),e.error=r}),this.isValid=!this.errors.length,this.hydrate(this)}}class w{_value;defaultValue;validators=[];type;error="";dirty=!1;constructor({defaultValue:t,type:e="text",validators:r}){this.type=e,this._value=t,this.defaultValue=t,r&&(this.validators=r)}get value(){return this._value}set value(t){this.dirty=!0,this._value=t,this.validate()}get isInvalid(){return!!(this.dirty&&this.error)}reset(){this.value=this.defaultValue,this.dirty=!1}validate(){const t=this.validators.map(e=>e(this)).filter(Boolean);return this.error=t[0]||"",this.error}}function d(s){return Object.entries(s).reduce((t,e)=>{const r=e[0],n=e[1];return t[r]=new w(n),t},{})}function O({form:s,handle:t,validator:e},r){const[n,a]=g(new l(d(s),t,e));b(()=>{a(new l(d(s),t,e))},[...r]);const i=u=>{a(o=>{const f=u.controls,h=new l(f,t,e);return h.hydrate=o.hydrate,h})};return n.hydrate=i,n}export{k as C,j as F,w as a,l as b,O as c,x as d,F as u};
2
+ //# sourceMappingURL=useForm-CRRXYOep.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useForm-iwGfb88g.js","sources":["../../src/lab/Form/Form.tsx","../../src/lab/Form/useFormGroup.ts","../../src/lab/Form/useControl.ts","../../src/lab/Form/Control.tsx","../../src/lab/Form/FormGroup.ts","../../src/lab/Form/FormControl.ts","../../src/lab/Form/useForm.ts"],"sourcesContent":["import { createContext, SubmitEvent, HTMLAttributes } from 'react';\n\nimport type FormGroup from './FormGroup';\n\nexport const FormContext = createContext<FormGroup<any> | null>(null);\n\ninterface FormProps<T extends Record<string, any>> extends HTMLAttributes<HTMLFormElement> {\n formGroup: FormGroup<T>;\n debug?: boolean;\n}\n\nexport default function Form<T extends Record<string, any>>({\n formGroup,\n debug = false,\n children,\n ...props\n}: FormProps<T>) {\n const submit = (event: SubmitEvent<HTMLFormElement>) => {\n event.preventDefault();\n formGroup.submit();\n };\n\n return (\n <FormContext value={formGroup}>\n <form\n {...props}\n style={{ width: '100%', ...props.style }}\n onSubmit={submit}\n noValidate\n >\n {children}\n </form>\n {\n debug && (\n <pre style={{\n width: '100%',\n maxHeight: 350,\n padding: 15,\n borderRadius: 4,\n overflow: 'auto',\n color: '#333',\n background: '#e5e5e5',\n boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',\n }}>\n {JSON.stringify(formGroup, null, 2)}\n </pre>\n )\n }\n </FormContext>\n );\n}","import { useContext } from 'react';\n\nimport type FormGroup from './FormGroup';\nimport { FormContext } from './Form';\n\nexport default function useFormGroup<T extends Record<string, any>>() {\n const context = useContext(FormContext);\n\n if (!context) throw new Error('useFormGroup must be used inside <FormProvider> (or <Form />).');\n\n return context as FormGroup<T>;\n}","import useFormGroup from './useFormGroup';\n\nexport default function useControl<\n T extends Record<string, any>,\n K extends keyof T = keyof T,\n>(controlName: K) {\n const formGroup = useFormGroup<T>();\n const control = formGroup.controls[controlName];\n\n const update = (value: T[K]) => {\n formGroup.setValues((data) => {\n data[controlName] = value;\n\n return data;\n });\n };\n\n return { control, update };\n}","import { ChangeEvent, cloneElement, InputEvent, InputHTMLAttributes, ReactElement } from 'react';\n\nimport useControl from './useControl';\nimport type { AbstractControl } from './AbstractControl';\n\ninterface ControlProps<\n T extends Record<string, any>,\n K extends keyof T,\n> {\n controlName: K;\n action?: 'change' | 'input' | 'blur';\n field: (control: AbstractControl<T>[K]) => React.JSX.Element;\n}\n\nexport default function Control<\n T extends Record<string, any>,\n K extends keyof T\n>({\n controlName,\n field,\n action = 'input'\n}: ControlProps<T, K>) {\n const { control, update } = useControl<T, K>(controlName);\n\n const renderChildren = (child: ReactElement<InputHTMLAttributes<HTMLInputElement>>) => {\n const getValue = (e: ChangeEvent<HTMLInputElement> | InputEvent<HTMLInputElement>) => {\n if (['radio', 'checkbox'].includes(e.type)) { return e.target['checked']; }\n\n return e.target['value'];\n };\n\n return cloneElement(child, {\n onBlur: (e) => {\n if (action === 'blur') { update(getValue(e)); };\n\n if (child.props.onBlur) { child.props.onBlur(e); }\n },\n onInput: (e) => {\n if (action === 'input') { update(getValue(e)); };\n\n if (child.props.onInput) { child.props.onInput(e); }\n },\n onChange: (e) => {\n if (action === 'change') { update(getValue(e)); };\n\n if (child.props.onChange) { child.props.onChange(e); }\n },\n });\n };\n\n return (\n renderChildren(field(control))\n );\n}","import type { AbstractControl } from './AbstractControl';\nimport type FormControl from './FormControl';\n\ntype Hydrate<T extends Record<string, any>> = (data: FormGroup<T>) => void;\ntype SetValues<F> = Partial<F> | ((values: F) => Partial<F>);\n\nexport type Validator<T extends Record<string, any>> = Partial<{\n [K in keyof T]: (data: FormGroup<T>) => string | void;\n}>\n\nexport interface Handle<T extends Record<string, any>> {\n change?: (form: FormGroup<T>) => void;\n submit?: (form: FormGroup<T>) => void;\n}\n\nexport default class FormGroup<T extends Record<string, any>> {\n private _valid = false;\n private _hydrate!: Hydrate<T>;\n\n constructor(\n public controls: AbstractControl<T>,\n public handle: Handle<T>,\n public validator?: Validator<T>,\n ) { }\n\n /**\n * Atualiza o estado interno do componente.\n * @private\n * @description Este método é usado internamente pela biblioteca.\n * Para atualizar valores externamente, use {@link setValues}.\n*/\n get hydrate() { return this._hydrate; }\n set hydrate(fn: (values: FormGroup<T>) => any) { this._hydrate = fn; }\n\n get isValid(): boolean { return this._valid; }\n set isValid(validity: boolean) { this._valid = validity; }\n\n get errors() {\n return Object.values<FormControl<T[keyof T]>>(this.controls)\n .filter(c => c.error);\n }\n\n get values(): T {\n const values: Record<string, any> = {};\n\n this.eachControl((control, key) => ({ [key as string]: control.value }))\n .forEach(control => { for (const prop in control) { values[prop] = control[prop]; } });\n\n return values as T;\n }\n\n public setValues(fn: SetValues<T>): void;\n public setValues(partialForm: Partial<T>): void;\n public setValues(arg: Partial<T> | SetValues<T>) {\n const partial =\n typeof arg === 'function'\n ? arg(this.values)\n : arg;\n\n for (const key of Object.keys(partial)) {\n this.controls[key].value = partial[key] as T[keyof T];\n }\n\n this.validate();\n\n this.hydrate(this);\n\n if (!this.handle.change) { return; }\n\n this.handle.change(this);\n }\n\n private eachControl(fn: <K extends keyof T>(control: FormControl<T[K]>, key?: K) => any) {\n return Object.keys(this.controls).map(k => fn(this.controls[k], k));\n }\n\n public submit() {\n if (!this.handle.submit) { return; }\n\n this.eachControl((control) => { control.dirty = true; });\n\n this.validate();\n\n this.hydrate(this);\n this.handle.submit(this);\n }\n\n public reset() {\n this.eachControl((control) => control.reset());\n this.hydrate(this);\n }\n\n public validate() {\n Object.entries(this.controls).map(([key, control]) => {\n let error = control.validate();\n\n if (this.validator && this.validator[key]) {\n error = this.validator[key](this) || '';\n }\n\n control.error = error;\n });\n\n this.isValid = !this.errors.length;\n this.hydrate(this);\n }\n}","type Type = 'text' | 'email';\ntype Validator<C> = (control: FormControl<C>) => string | false | void;\n\ntype Data<T> = {\n defaultValue: T;\n type?: Type;\n validators?: Validator<T>[];\n}\n\nexport type Constructor<V> = ConstructorParameters<typeof FormControl<V>>[number];\n\nexport default class FormControl<V> implements Pick<Data<V>, 'type'> {\n private _value!: V;\n private defaultValue: V;\n private validators: Validator<V>[] = [];\n\n public type: Type;\n public error = '';\n public dirty = false;\n\n constructor({\n defaultValue,\n type = 'text',\n validators,\n }: Data<V>) {\n this.type = type;\n this._value = defaultValue;\n this.defaultValue = defaultValue;\n\n if (validators) { this.validators = validators; }\n }\n\n get value(): V { return this._value; }\n set value(value: V) {\n this.dirty = true;\n this._value = value;\n this.validate();\n }\n\n get isInvalid() { return Boolean(this.dirty && this.error); }\n\n public reset() {\n this.value = this.defaultValue;\n this.dirty = false;\n }\n\n public validate() {\n const errors = this.validators\n .map(v => v(this))\n .filter(Boolean);\n\n this.error = errors[0] || '';\n\n return this.error;\n }\n}\n","import { useEffect, useState } from 'react';\n\nimport FormGroup from './FormGroup';\nimport FormControl from './FormControl';\nimport type { Constructor } from './FormControl';\nimport type { Handle, Validator } from './FormGroup';\nimport type { AbstractControl } from './AbstractControl';\n\ntype UseForm<T extends Record<string, any>> = {\n form: { [K in keyof T]: Constructor<T[K]> };\n handle: Handle<T>;\n validator?: Validator<T>;\n}\n\nfunction makingControls<T extends Record<string, any>>(form: { [K in keyof T]: Constructor<T[K]> }) {\n return Object.entries(form)\n .reduce((acc, data) => {\n const key = data[0] as keyof T;\n const value = data[1] as Constructor<T[keyof T]>;\n\n acc[key] = new FormControl(value);\n\n return acc;\n }, {} as AbstractControl<T>);\n}\n\nexport default function useForm<T extends Record<any, any>>({\n form,\n handle,\n validator\n}: UseForm<T>, deps: readonly unknown[]) {\n const [formGroup, setFormGroup] = useState<FormGroup<T>>(\n new FormGroup(\n makingControls(form),\n handle,\n validator\n )\n );\n\n useEffect(() => {\n setFormGroup(new FormGroup(makingControls(form), handle, validator));\n }, [...deps]);\n\n const hydrate = (form: FormGroup<T>) => {\n setFormGroup(prev => {\n const controls = form.controls;\n\n const newFormGroup = new FormGroup(controls, handle, validator);\n newFormGroup.hydrate = prev.hydrate;\n\n return newFormGroup;\n });\n };\n\n formGroup.hydrate = hydrate;\n\n return formGroup;\n}"],"names":["FormContext","createContext","Form","formGroup","debug","children","props","submit","event","jsxs","jsx","useFormGroup","context","useContext","useControl","controlName","value","data","Control","field","action","control","update","child","getValue","e","cloneElement","FormGroup","controls","handle","validator","fn","validity","c","values","key","prop","arg","partial","k","error","FormControl","defaultValue","type","validators","errors","v","makingControls","form","acc","useForm","deps","setFormGroup","useState","useEffect","hydrate","prev","newFormGroup"],"mappings":"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"}
1
+ {"version":3,"file":"useForm-CRRXYOep.js","sources":["../../src/lab/Form/Form.tsx","../../src/lab/Form/useFormGroup.ts","../../src/lab/Form/useControl.ts","../../src/lab/Form/Control.tsx","../../src/lab/Form/FormGroup.ts","../../src/lab/Form/FormControl.ts","../../src/lab/Form/useForm.ts"],"sourcesContent":["import { createContext, SubmitEvent, HTMLAttributes } from 'react';\n\nimport type FormGroup from './FormGroup';\n\nexport const FormContext = createContext<FormGroup<any> | null>(null);\n\ninterface FormProps<T extends Record<string, any>> extends HTMLAttributes<HTMLFormElement> {\n formGroup: FormGroup<T>;\n debug?: boolean;\n}\n\nexport default function Form<T extends Record<string, any>>({\n formGroup,\n debug = false,\n children,\n ...props\n}: FormProps<T>) {\n const submit = (event: SubmitEvent<HTMLFormElement>) => {\n event.preventDefault();\n formGroup.submit();\n };\n\n return (\n <FormContext value={formGroup}>\n <form\n {...props}\n style={{ width: '100%', ...props.style }}\n onSubmit={submit}\n noValidate\n >\n {children}\n </form>\n {\n debug && (\n <pre style={{\n width: '100%',\n maxHeight: 350,\n padding: 15,\n borderRadius: 4,\n overflow: 'auto',\n color: '#333',\n background: '#e5e5e5',\n boxShadow: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',\n }}>\n {JSON.stringify(formGroup, null, 2)}\n </pre>\n )\n }\n </FormContext>\n );\n}","import { useContext } from 'react';\n\nimport type FormGroup from './FormGroup';\nimport { FormContext } from './Form';\n\nexport default function useFormGroup<T extends Record<string, any>>() {\n const context = useContext(FormContext);\n\n if (!context) throw new Error('useFormGroup must be used inside <FormProvider> (or <Form />).');\n\n return context as FormGroup<T>;\n}","import useFormGroup from './useFormGroup';\n\nexport default function useControl<\n T extends Record<string, any>,\n K extends keyof T = keyof T,\n>(controlName: K) {\n const formGroup = useFormGroup<T>();\n const control = formGroup.controls[controlName];\n\n const update = (value: T[K]) => {\n formGroup.setValues((data) => {\n data[controlName] = value;\n\n return data;\n });\n };\n\n return { control, update };\n}","import { ChangeEvent, cloneElement, InputEvent, InputHTMLAttributes, ReactElement } from 'react';\n\nimport useControl from './useControl';\nimport type { AbstractControl } from './AbstractControl';\n\ninterface ControlProps<\n T extends Record<string, any>,\n K extends keyof T,\n> {\n controlName: K;\n action?: 'change' | 'input' | 'blur';\n field: (control: AbstractControl<T>[K]) => React.JSX.Element;\n}\n\nexport default function Control<\n T extends Record<string, any>,\n K extends keyof T\n>({\n controlName,\n field,\n action = 'input'\n}: ControlProps<T, K>) {\n const { control, update } = useControl<T, K>(controlName);\n\n const renderChildren = (child: ReactElement<InputHTMLAttributes<HTMLInputElement>>) => {\n const getValue = (e: ChangeEvent<HTMLInputElement> | InputEvent<HTMLInputElement>) => {\n if (['radio', 'checkbox'].includes(e.type)) { return e.target['checked']; }\n\n return e.target['value'];\n };\n\n return cloneElement(child, {\n onBlur: (e) => {\n if (action === 'blur') { update(getValue(e)); };\n\n if (child.props.onBlur) { child.props.onBlur(e); }\n },\n onInput: (e) => {\n if (action === 'input') { update(getValue(e)); };\n\n if (child.props.onInput) { child.props.onInput(e); }\n },\n onChange: (e) => {\n if (action === 'change') { update(getValue(e)); };\n\n if (child.props.onChange) { child.props.onChange(e); }\n },\n });\n };\n\n return (\n renderChildren(field(control))\n );\n}","import type { AbstractControl } from './AbstractControl';\nimport type FormControl from './FormControl';\n\ntype Hydrate<T extends Record<string, any>> = (data: FormGroup<T>) => void;\ntype SetValues<F> = Partial<F> | ((values: F) => Partial<F>);\n\nexport type Validator<T extends Record<string, any>> = Partial<{\n [K in keyof T]: (data: FormGroup<T>) => string | void;\n}>\n\nexport interface Handle<T extends Record<string, any>> {\n change?: (form: FormGroup<T>) => void;\n submit?: (form: FormGroup<T>) => void;\n}\n\nexport default class FormGroup<T extends Record<string, any>> {\n private _valid = false;\n private _hydrate!: Hydrate<T>;\n\n constructor(\n public controls: AbstractControl<T>,\n public handle: Handle<T>,\n public validator?: Validator<T>,\n ) { }\n\n /**\n * Atualiza o estado interno do componente.\n * @private\n * @description Este método é usado internamente pela biblioteca.\n * Para atualizar valores externamente, use {@link setValues}.\n*/\n get hydrate() { return this._hydrate; }\n set hydrate(fn: (values: FormGroup<T>) => any) { this._hydrate = fn; }\n\n get isValid(): boolean { return this._valid; }\n set isValid(validity: boolean) { this._valid = validity; }\n\n get errors() {\n return Object.values<FormControl<T[keyof T]>>(this.controls)\n .filter(c => c.error);\n }\n\n get values(): T {\n const values: Record<string, any> = {};\n\n this.eachControl((control, key) => ({ [key as string]: control.value }))\n .forEach(control => { for (const prop in control) { values[prop] = control[prop]; } });\n\n return values as T;\n }\n\n public setValues(fn: SetValues<T>): void;\n public setValues(partialForm: Partial<T>): void;\n public setValues(arg: Partial<T> | SetValues<T>) {\n const partial =\n typeof arg === 'function'\n ? arg(this.values)\n : arg;\n\n for (const key of Object.keys(partial)) {\n this.controls[key].value = partial[key] as T[keyof T];\n }\n\n this.validate();\n\n this.hydrate(this);\n\n if (!this.handle.change) { return; }\n\n this.handle.change(this);\n }\n\n private eachControl(fn: <K extends keyof T>(control: FormControl<T[K]>, key?: K) => any) {\n return Object.keys(this.controls).map(k => fn(this.controls[k], k));\n }\n\n public submit() {\n if (!this.handle.submit) { return; }\n\n this.eachControl((control) => { control.dirty = true; });\n\n this.validate();\n\n this.hydrate(this);\n this.handle.submit(this);\n }\n\n public reset() {\n this.eachControl((control) => control.reset());\n this.hydrate(this);\n }\n\n public validate() {\n Object.entries(this.controls).map(([key, control]) => {\n let error = control.validate();\n\n if (this.validator && this.validator[key]) {\n error = this.validator[key](this) || '';\n }\n\n control.error = error;\n });\n\n this.isValid = !this.errors.length;\n this.hydrate(this);\n }\n}","type Type = 'text' | 'email';\ntype Validator<C> = (control: FormControl<C>) => string | false | void;\n\ntype Data<T> = {\n defaultValue: T;\n type?: Type;\n validators?: Validator<T>[];\n}\n\nexport type Constructor<V> = ConstructorParameters<typeof FormControl<V>>[number];\n\nexport default class FormControl<V> implements Pick<Data<V>, 'type'> {\n private _value!: V;\n private defaultValue: V;\n private validators: Validator<V>[] = [];\n\n public type: Type;\n public error = '';\n public dirty = false;\n\n constructor({\n defaultValue,\n type = 'text',\n validators,\n }: Data<V>) {\n this.type = type;\n this._value = defaultValue;\n this.defaultValue = defaultValue;\n\n if (validators) { this.validators = validators; }\n }\n\n get value(): V { return this._value; }\n set value(value: V) {\n this.dirty = true;\n this._value = value;\n this.validate();\n }\n\n get isInvalid() { return Boolean(this.dirty && this.error); }\n\n public reset() {\n this.value = this.defaultValue;\n this.dirty = false;\n }\n\n public validate() {\n const errors = this.validators\n .map(v => v(this))\n .filter(Boolean);\n\n this.error = errors[0] || '';\n\n return this.error;\n }\n}\n","import { useEffect, useState } from 'react';\n\nimport FormGroup from './FormGroup';\nimport FormControl from './FormControl';\nimport type { Constructor } from './FormControl';\nimport type { Handle, Validator } from './FormGroup';\nimport type { AbstractControl } from './AbstractControl';\n\ntype UseForm<T extends Record<string, any>> = {\n form: { [K in keyof T]: Constructor<T[K]> };\n handle: Handle<T>;\n validator?: Validator<T>;\n}\n\nfunction makingControls<T extends Record<string, any>>(form: { [K in keyof T]: Constructor<T[K]> }) {\n return Object.entries(form)\n .reduce((acc, data) => {\n const key = data[0] as keyof T;\n const value = data[1] as Constructor<T[keyof T]>;\n\n acc[key] = new FormControl(value);\n\n return acc;\n }, {} as AbstractControl<T>);\n}\n\nexport default function useForm<T extends Record<any, any>>({\n form,\n handle,\n validator\n}: UseForm<T>, deps: readonly unknown[]) {\n const [formGroup, setFormGroup] = useState<FormGroup<T>>(\n new FormGroup(\n makingControls(form),\n handle,\n validator\n )\n );\n\n useEffect(() => {\n setFormGroup(new FormGroup(makingControls(form), handle, validator));\n }, [...deps]);\n\n const hydrate = (form: FormGroup<T>) => {\n setFormGroup(prev => {\n const controls = form.controls;\n\n const newFormGroup = new FormGroup(controls, handle, validator);\n newFormGroup.hydrate = prev.hydrate;\n\n return newFormGroup;\n });\n };\n\n formGroup.hydrate = hydrate;\n\n return formGroup;\n}"],"names":["FormContext","createContext","Form","formGroup","debug","children","props","submit","event","jsxs","jsx","useFormGroup","context","useContext","useControl","controlName","value","data","Control","field","action","control","update","child","getValue","e","cloneElement","FormGroup","controls","handle","validator","fn","validity","c","values","key","prop","arg","partial","k","error","FormControl","defaultValue","type","validators","errors","v","makingControls","form","acc","useForm","deps","setFormGroup","useState","useEffect","hydrate","prev","newFormGroup"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{jsxs as E,Fragment as H,jsx as m}from"react/jsx-runtime";import{forwardRef as P,useState as y,Children as W,useMemo as F,useEffect as M,cloneElement as G}from"react";import{p as a}from"./index-CZ41y9Hn.js";import{j as L}from"./joinClass-anSpaauN.js";import{u as S}from"./uuid-dGvr9vBZ.js";import{u as U}from"./useListenerResized-Bnqxrt7k.js";import{C as q}from"./Card-C2mSdoXV.js";import{C as J}from"./CardContent-CViecz1a.js";import{c as K}from"./createComponent-BmdhWozT.js";class Q{delay(t,n=500){if(!n){t();return}clearTimeout(this.timeout),this.timeout=setTimeout(()=>{t()},n)}}const V=new Q,X=P(function({open:t,width:n,children:u,anchorEl:s,direction:c="left",position:o="bottom",maxHeight:k=150,autoClose:v,onClose:A,...d},I){const[b,j]=y(),[f,r]=y({state:"invisible",animation:"close",width:"auto"}),T=16,$=150,O=W.toArray(u),_=F(()=>S(),[]),R=L(`${a}-menu`,`${a}-menu--${f?.animation}`,`${a}-menu--${o}`,d.className);U(()=>h(),[s]),M(()=>{h()},[s]),M(()=>{t?B():p()},[t]);const h=()=>{s&&setTimeout(()=>{let e={};const{width:i,height:C,left:x,top:N}=s.getBoundingClientRect();r(z=>({...z,width:i}));const w=document.getElementById(_),g=o==="bottom"?N+C+T/2:N-w.offsetHeight-T/2;c==="center"&&(e={top:g,right:i}),c==="left"&&(e={top:g,left:x}),c==="right"&&(e={top:g,left:x-(w.offsetWidth-i)}),j(e)},0)},B=()=>{r(e=>({...e,state:"visible"})),h(),setTimeout(()=>{r(e=>({...e,animation:"open"}))},10)},p=()=>{r(e=>({...e,animation:"close"})),setTimeout(()=>{r(e=>({...e,state:"invisible"})),A()},$)},D=()=>O.map((e,i)=>G(e,{tabIndex:i+1,key:`button-${i}`,onClick:C=>{V.delay(()=>{v&&p(),e.props.onClick&&e.props.onClick(C)},0)}}));return E(H,{children:[m("div",{id:_,ref:I,...d,style:{width:n||f.width,top:b?.top,left:b?.left,display:f?.state==="visible"?"block":"none",transition:`all ${$}ms ease-in`,zIndex:50,...d.style},className:R,children:t&&m(q,{className:`${a}-menu__card`,children:m(J,{className:`${a}-menu__card__content`,sx:{py:1},style:{display:"flex",flexDirection:"column",maxHeight:k},children:D()})})}),t&&m("div",{className:`${a}-menu__overlay`,onClick:p})]})}),re=K(X);function le(){const[l,t]=y(null),n=!!l,u=o=>{t(o?o.currentTarget:null)},s=()=>{t(null)};return[n,l,o=>{if(n){s();return}u(o)}]}export{re as M,le as u};
2
+ //# sourceMappingURL=useMenu-B49hOh6R.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMenu-B49hOh6R.js","sources":["../../../../toolkit/src/debounce/debounce.ts","../../src/navigation/Menu/Menu.tsx","../../src/navigation/Menu/useMenu.ts"],"sourcesContent":["class Debounce {\n private timeout: NodeJS.Timeout | undefined;\n public delay(func: (a?: any) => void, milliseconds = 500) {\n if (!milliseconds) {\n func();\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => { func(); }, milliseconds);\n }\n}\n\nexport const debounce = new Debounce();\n","import {\n useMemo,\n useState,\n useEffect,\n Children,\n forwardRef,\n type ReactElement,\n type CSSProperties,\n type HTMLAttributes,\n cloneElement\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\n\nimport { uuid } from '@iziui/toolkit/uuid';\nimport { debounce } from '@iziui/toolkit/debounce';\n\nimport useListenerResized from '@/hooks/useListenerResized';\nimport { Card, CardContent } from '@/display/Card';\n\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Menu.scss';\n\ntype Direction = 'left' | 'right' | 'center';\ntype Position = 'top' | 'bottom';\ntype AnimationClass = 'open' | 'close';\ntype State = 'visible' | 'invisible';\ntype Coordinates = { top?: number; right?: number; bottom?: number; left?: number; };\ntype Config = { animation: AnimationClass, state: State; width: CSSProperties['width'] };\n\nexport interface MenuProps extends HTMLAttributes<HTMLDivElement> {\n open: boolean;\n autoClose?: boolean;\n maxHeight?: CSSProperties['maxHeight'];\n direction?: Direction;\n position?: Position;\n anchorEl: HTMLElement | null;\n width?: CSSProperties['width'];\n children: React.JSX.Element | React.JSX.Element[];\n onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({\n open,\n width,\n children,\n anchorEl,\n direction = 'left',\n position = 'bottom',\n maxHeight = 150,\n autoClose,\n onClose,\n ...props\n}: MenuProps, ref) {\n const [coordinate, setCoordinate] = useState<Coordinates>();\n const [config, setConfig] = useState<Config>({ state: 'invisible', animation: 'close', width: 'auto' });\n\n const GAP = 16;\n const ANIMATION_DURATION = 150;\n\n const arrayChildren = Children.toArray(children) as ReactElement<any>[];\n\n const id = useMemo(() => uuid(), []);\n\n const classes = joinClass(\n `${prefix}-menu`,\n `${prefix}-menu--${config?.animation}`,\n `${prefix}-menu--${position}`,\n props.className\n );\n\n useListenerResized(() => changePosition(), [anchorEl]);\n\n useEffect(() => { changePosition(); }, [anchorEl]);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n useEffect(() => { open ? handleOpen() : handleClose(); }, [open]);\n\n const changePosition = () => {\n if (!anchorEl) { return; }\n\n setTimeout(() => {\n let coordinates: Coordinates = {};\n\n const { width: anchorWidth, height: anchorHeight, left, top: anchorTop } = anchorEl.getBoundingClientRect();\n\n setConfig(prev => ({ ...prev, width: anchorWidth }));\n\n const el = document.getElementById(id) as HTMLElement;\n\n const top = position === 'bottom'\n ? anchorTop + anchorHeight + (GAP / 2)\n : anchorTop - el.offsetHeight - (GAP / 2);\n\n if (direction === 'center') { coordinates = { top, right: anchorWidth }; }\n\n if (direction === 'left') { coordinates = { top, left }; }\n\n if (direction === 'right') { coordinates = { top, left: left - (el.offsetWidth - anchorWidth) }; }\n\n setCoordinate(coordinates);\n }, 0);\n };\n\n const handleOpen = () => {\n setConfig(prev => ({ ...prev, state: 'visible' }));\n\n changePosition();\n\n setTimeout(() => { setConfig(prev => ({ ...prev, animation: 'open' })); }, 10);\n };\n\n const handleClose = () => {\n setConfig(prev => ({ ...prev, animation: 'close' }));\n\n setTimeout(() => {\n setConfig(prev => ({ ...prev, state: 'invisible' }));\n onClose();\n }, ANIMATION_DURATION);\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n return cloneElement(child, {\n 'tabIndex': index + 1,\n key: `button-${index}`,\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n debounce.delay(() => {\n\n if (autoClose) { handleClose(); }\n\n if (child.props.onClick) { child.props.onClick(e); }\n }, 0);\n },\n });\n });\n };\n\n return (\n <>\n <div\n id={id}\n ref={ref}\n {...props}\n style={{\n width: width || config.width,\n top: coordinate?.top,\n left: coordinate?.left,\n display: config?.state === 'visible' ? 'block' : 'none',\n transition: `all ${ANIMATION_DURATION}ms ease-in`,\n zIndex: 50,\n ...props.style\n }}\n className={classes}\n >\n {\n open && (\n <Card className={`${prefix}-menu__card`}>\n <CardContent\n className={`${prefix}-menu__card__content`}\n sx={{ py: 1 }}\n style={{\n display: 'flex',\n flexDirection: 'column',\n maxHeight\n }}\n >\n {renderChildren()}\n </CardContent>\n </Card>\n )\n }\n </div>\n {open && <div className={`${prefix}-menu__overlay`} onClick={handleClose} />}\n </>\n );\n});\n\nexport default createComponent(Menu);\n","import { useState } from 'react';\n\ntype UseMenu = [\n boolean,\n HTMLElement | null,\n (event?: React.MouseEvent<HTMLButtonElement>) => void,\n];\n\nexport default function useMenu(): UseMenu {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n const open = Boolean(anchorEl);\n\n const handleOpen = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n setAnchorEl(event ? event.currentTarget : null);\n };\n\n const handleClose = () => { setAnchorEl(null); };\n\n const handleToggle = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (open) {\n handleClose();\n return;\n }\n\n handleOpen(event);\n };\n\n return [open, anchorEl, handleToggle];\n}\n"],"names":["Debounce","func","milliseconds","debounce","Menu","forwardRef","open","width","children","anchorEl","direction","position","maxHeight","autoClose","onClose","props","ref","coordinate","setCoordinate","useState","config","setConfig","GAP","ANIMATION_DURATION","arrayChildren","Children","id","useMemo","uuid","classes","joinClass","prefix","useListenerResized","changePosition","useEffect","handleOpen","handleClose","coordinates","anchorWidth","anchorHeight","left","anchorTop","prev","el","top","renderChildren","child","index","cloneElement","e","jsxs","Fragment","jsx","Card","CardContent","Menu$1","createComponent","useMenu","setAnchorEl","event"],"mappings":"oeAAA,MAAMA,CAAS,CAEN,MAAMC,EAAyBC,EAAe,IAAK,CACxD,GAAI,CAACA,EAAc,CACjBD,EAAA,EACA,MACF,CAEA,aAAa,KAAK,OAAO,EACzB,KAAK,QAAU,WAAW,IAAM,CAAEA,EAAA,CAAQ,EAAGC,CAAY,CAC3D,CACF,CAEO,MAAMC,EAAW,IAAIH,ECgCtBI,EAAOC,EAAsC,SAAc,CAC/D,KAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,OACZ,SAAAC,EAAW,SACX,UAAAC,EAAY,IACZ,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAAcC,EAAK,CACjB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAA,EAC9B,CAACC,EAAQC,CAAS,EAAIF,EAAiB,CAAE,MAAO,YAAa,UAAW,QAAS,MAAO,MAAA,CAAQ,EAEhGG,EAAM,GACNC,EAAqB,IAErBC,EAAgBC,EAAS,QAAQjB,CAAQ,EAEzCkB,EAAKC,EAAQ,IAAMC,EAAA,EAAQ,CAAA,CAAE,EAE7BC,EAAUC,EACd,GAAGC,CAAM,QACT,GAAGA,CAAM,UAAUX,GAAQ,SAAS,GACpC,GAAGW,CAAM,UAAUpB,CAAQ,GAC3BI,EAAM,SAAA,EAGRiB,EAAmB,IAAMC,IAAkB,CAACxB,CAAQ,CAAC,EAErDyB,EAAU,IAAM,CAAED,EAAA,CAAkB,EAAG,CAACxB,CAAQ,CAAC,EAGjDyB,EAAU,IAAM,CAAE5B,EAAO6B,EAAA,EAAeC,EAAA,CAAe,EAAG,CAAC9B,CAAI,CAAC,EAEhE,MAAM2B,EAAiB,IAAM,CACtBxB,GAEL,WAAW,IAAM,CACf,IAAI4B,EAA2B,CAAA,EAE/B,KAAM,CAAE,MAAOC,EAAa,OAAQC,EAAc,KAAAC,EAAM,IAAKC,CAAA,EAAchC,EAAS,sBAAA,EAEpFY,MAAmB,CAAE,GAAGqB,EAAM,MAAOJ,GAAc,EAEnD,MAAMK,EAAK,SAAS,eAAejB,CAAE,EAE/BkB,EAAMjC,IAAa,SACrB8B,EAAYF,EAAgBjB,EAAM,EAClCmB,EAAYE,EAAG,aAAgBrB,EAAM,EAErCZ,IAAc,WAAY2B,EAAc,CAAE,IAAAO,EAAK,MAAON,CAAA,GAEtD5B,IAAc,SAAU2B,EAAc,CAAE,IAAAO,EAAK,KAAAJ,CAAA,GAE7C9B,IAAc,UAAW2B,EAAc,CAAE,IAAAO,EAAK,KAAMJ,GAAQG,EAAG,YAAcL,EAAA,GAEjFpB,EAAcmB,CAAW,CAC3B,EAAG,CAAC,CACN,EAEMF,EAAa,IAAM,CACvBd,MAAmB,CAAE,GAAGqB,EAAM,MAAO,WAAY,EAEjDT,EAAA,EAEA,WAAW,IAAM,CAAEZ,MAAmB,CAAE,GAAGqB,EAAM,UAAW,QAAS,CAAG,EAAG,EAAE,CAC/E,EAEMN,EAAc,IAAM,CACxBf,MAAmB,CAAE,GAAGqB,EAAM,UAAW,SAAU,EAEnD,WAAW,IAAM,CACfrB,MAAmB,CAAE,GAAGqB,EAAM,MAAO,aAAc,EACnD5B,EAAA,CACF,EAAGS,CAAkB,CACvB,EAEMsB,EAAiB,IACdrB,EAAc,IAAI,CAACsB,EAAOC,IACxBC,EAAaF,EAAO,CACzB,SAAYC,EAAQ,EACpB,IAAK,UAAUA,CAAK,GACpB,QAAUE,GAA2C,CACnD9C,EAAS,MAAM,IAAM,CAEfU,GAAauB,EAAA,EAEbU,EAAM,MAAM,SAAWA,EAAM,MAAM,QAAQG,CAAC,CAClD,EAAG,CAAC,CACN,CAAA,CACD,CACF,EAGH,OACEC,EAAAC,EAAA,CACE,SAAA,CAAAC,EAAC,MAAA,CACC,GAAA1B,EACA,IAAAV,EACC,GAAGD,EACJ,MAAO,CACL,MAAOR,GAASa,EAAO,MACvB,IAAKH,GAAY,IACjB,KAAMA,GAAY,KAClB,QAASG,GAAQ,QAAU,UAAY,QAAU,OACjD,WAAY,OAAOG,CAAkB,aACrC,OAAQ,GACR,GAAGR,EAAM,KAAA,EAEX,UAAWc,EAGT,YACEuB,EAACC,EAAA,CAAK,UAAW,GAAGtB,CAAM,cACxB,SAAAqB,EAACE,EAAA,CACC,UAAW,GAAGvB,CAAM,uBACpB,GAAI,CAAE,GAAI,CAAA,EACV,MAAO,CACL,QAAS,OACT,cAAe,SACf,UAAAnB,CAAA,EAGD,SAAAiC,EAAA,CAAe,CAAA,CAClB,CACF,CAAA,CAAA,EAILvC,KAAS,MAAA,CAAI,UAAW,GAAGyB,CAAM,iBAAkB,QAASK,CAAA,CAAa,CAAA,EAC5E,CAEJ,CAAC,EAEDmB,GAAeC,EAAgBpD,CAAI,EC7KnC,SAAwBqD,IAAmB,CACzC,KAAM,CAAChD,EAAUiD,CAAW,EAAIvC,EAA6B,IAAI,EAE3Db,EAAO,EAAQG,EAEf0B,EAAcwB,GAAsD,CACxED,EAAYC,EAAQA,EAAM,cAAgB,IAAI,CAChD,EAEMvB,EAAc,IAAM,CAAEsB,EAAY,IAAI,CAAG,EAW/C,MAAO,CAACpD,EAAMG,EATQkD,GAAsD,CAC1E,GAAIrD,EAAM,CACR8B,EAAA,EACA,MACF,CAEAD,EAAWwB,CAAK,CAClB,CAEoC,CACtC"}
@@ -0,0 +1,2 @@
1
+ "use strict";const c=require("react/jsx-runtime"),n=require("react"),a=require("./index-DYxwT4uW.cjs"),B=require("./joinClass-Jk3EszKD.cjs"),D=require("./uuid-omnJ9TjZ.cjs"),E=require("./useListenerResized-AwpsZLcP.cjs"),S=require("./Card-Bqgukgip.cjs"),H=require("./CardContent-DPL-tBOS.cjs"),L=require("./createComponent-Bls5N6x8.cjs");class P{delay(t,s=500){if(!s){t();return}clearTimeout(this.timeout),this.timeout=setTimeout(()=>{t()},s)}}const W=new P,F=n.forwardRef(function({open:t,width:s,children:f,anchorEl:i,direction:d="left",position:o="bottom",maxHeight:M=150,autoClose:N,onClose:w,...m},k){const[y,v]=n.useState(),[h,l]=n.useState({state:"invisible",animation:"close",width:"auto"}),b=16,T=150,A=n.Children.toArray(f),$=n.useMemo(()=>D.uuid(),[]),I=B.joinClass(`${a.prefix}-menu`,`${a.prefix}-menu--${h?.animation}`,`${a.prefix}-menu--${o}`,m.className);E.useListenerResized(()=>C(),[i]),n.useEffect(()=>{C()},[i]),n.useEffect(()=>{t?R():g()},[t]);const C=()=>{i&&setTimeout(()=>{let e={};const{width:r,height:p,left:q,top:_}=i.getBoundingClientRect();l(z=>({...z,width:r}));const j=document.getElementById($),x=o==="bottom"?_+p+b/2:_-j.offsetHeight-b/2;d==="center"&&(e={top:x,right:r}),d==="left"&&(e={top:x,left:q}),d==="right"&&(e={top:x,left:q-(j.offsetWidth-r)}),v(e)},0)},R=()=>{l(e=>({...e,state:"visible"})),C(),setTimeout(()=>{l(e=>({...e,animation:"open"}))},10)},g=()=>{l(e=>({...e,animation:"close"})),setTimeout(()=>{l(e=>({...e,state:"invisible"})),w()},T)},O=()=>A.map((e,r)=>n.cloneElement(e,{tabIndex:r+1,key:`button-${r}`,onClick:p=>{W.delay(()=>{N&&g(),e.props.onClick&&e.props.onClick(p)},0)}}));return c.jsxs(c.Fragment,{children:[c.jsx("div",{id:$,ref:k,...m,style:{width:s||h.width,top:y?.top,left:y?.left,display:h?.state==="visible"?"block":"none",transition:`all ${T}ms ease-in`,zIndex:50,...m.style},className:I,children:t&&c.jsx(S.Card,{className:`${a.prefix}-menu__card`,children:c.jsx(H.CardContent,{className:`${a.prefix}-menu__card__content`,sx:{py:1},style:{display:"flex",flexDirection:"column",maxHeight:M},children:O()})})}),t&&c.jsx("div",{className:`${a.prefix}-menu__overlay`,onClick:g})]})}),G=L.createComponent(F);function U(){const[u,t]=n.useState(null),s=!!u,f=o=>{t(o?o.currentTarget:null)},i=()=>{t(null)};return[s,u,o=>{if(s){i();return}f(o)}]}exports.Menu=G;exports.useMenu=U;
2
+ //# sourceMappingURL=useMenu-BfWmrq4L.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useMenu-BfWmrq4L.cjs","sources":["../../../../toolkit/src/debounce/debounce.ts","../../src/navigation/Menu/Menu.tsx","../../src/navigation/Menu/useMenu.ts"],"sourcesContent":["class Debounce {\n private timeout: NodeJS.Timeout | undefined;\n public delay(func: (a?: any) => void, milliseconds = 500) {\n if (!milliseconds) {\n func();\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => { func(); }, milliseconds);\n }\n}\n\nexport const debounce = new Debounce();\n","import {\n useMemo,\n useState,\n useEffect,\n Children,\n forwardRef,\n type ReactElement,\n type CSSProperties,\n type HTMLAttributes,\n cloneElement\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\n\nimport { uuid } from '@iziui/toolkit/uuid';\nimport { debounce } from '@iziui/toolkit/debounce';\n\nimport useListenerResized from '@/hooks/useListenerResized';\nimport { Card, CardContent } from '@/display/Card';\n\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Menu.scss';\n\ntype Direction = 'left' | 'right' | 'center';\ntype Position = 'top' | 'bottom';\ntype AnimationClass = 'open' | 'close';\ntype State = 'visible' | 'invisible';\ntype Coordinates = { top?: number; right?: number; bottom?: number; left?: number; };\ntype Config = { animation: AnimationClass, state: State; width: CSSProperties['width'] };\n\nexport interface MenuProps extends HTMLAttributes<HTMLDivElement> {\n open: boolean;\n autoClose?: boolean;\n maxHeight?: CSSProperties['maxHeight'];\n direction?: Direction;\n position?: Position;\n anchorEl: HTMLElement | null;\n width?: CSSProperties['width'];\n children: React.JSX.Element | React.JSX.Element[];\n onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({\n open,\n width,\n children,\n anchorEl,\n direction = 'left',\n position = 'bottom',\n maxHeight = 150,\n autoClose,\n onClose,\n ...props\n}: MenuProps, ref) {\n const [coordinate, setCoordinate] = useState<Coordinates>();\n const [config, setConfig] = useState<Config>({ state: 'invisible', animation: 'close', width: 'auto' });\n\n const GAP = 16;\n const ANIMATION_DURATION = 150;\n\n const arrayChildren = Children.toArray(children) as ReactElement<any>[];\n\n const id = useMemo(() => uuid(), []);\n\n const classes = joinClass(\n `${prefix}-menu`,\n `${prefix}-menu--${config?.animation}`,\n `${prefix}-menu--${position}`,\n props.className\n );\n\n useListenerResized(() => changePosition(), [anchorEl]);\n\n useEffect(() => { changePosition(); }, [anchorEl]);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n useEffect(() => { open ? handleOpen() : handleClose(); }, [open]);\n\n const changePosition = () => {\n if (!anchorEl) { return; }\n\n setTimeout(() => {\n let coordinates: Coordinates = {};\n\n const { width: anchorWidth, height: anchorHeight, left, top: anchorTop } = anchorEl.getBoundingClientRect();\n\n setConfig(prev => ({ ...prev, width: anchorWidth }));\n\n const el = document.getElementById(id) as HTMLElement;\n\n const top = position === 'bottom'\n ? anchorTop + anchorHeight + (GAP / 2)\n : anchorTop - el.offsetHeight - (GAP / 2);\n\n if (direction === 'center') { coordinates = { top, right: anchorWidth }; }\n\n if (direction === 'left') { coordinates = { top, left }; }\n\n if (direction === 'right') { coordinates = { top, left: left - (el.offsetWidth - anchorWidth) }; }\n\n setCoordinate(coordinates);\n }, 0);\n };\n\n const handleOpen = () => {\n setConfig(prev => ({ ...prev, state: 'visible' }));\n\n changePosition();\n\n setTimeout(() => { setConfig(prev => ({ ...prev, animation: 'open' })); }, 10);\n };\n\n const handleClose = () => {\n setConfig(prev => ({ ...prev, animation: 'close' }));\n\n setTimeout(() => {\n setConfig(prev => ({ ...prev, state: 'invisible' }));\n onClose();\n }, ANIMATION_DURATION);\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n return cloneElement(child, {\n 'tabIndex': index + 1,\n key: `button-${index}`,\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n debounce.delay(() => {\n\n if (autoClose) { handleClose(); }\n\n if (child.props.onClick) { child.props.onClick(e); }\n }, 0);\n },\n });\n });\n };\n\n return (\n <>\n <div\n id={id}\n ref={ref}\n {...props}\n style={{\n width: width || config.width,\n top: coordinate?.top,\n left: coordinate?.left,\n display: config?.state === 'visible' ? 'block' : 'none',\n transition: `all ${ANIMATION_DURATION}ms ease-in`,\n zIndex: 50,\n ...props.style\n }}\n className={classes}\n >\n {\n open && (\n <Card className={`${prefix}-menu__card`}>\n <CardContent\n className={`${prefix}-menu__card__content`}\n sx={{ py: 1 }}\n style={{\n display: 'flex',\n flexDirection: 'column',\n maxHeight\n }}\n >\n {renderChildren()}\n </CardContent>\n </Card>\n )\n }\n </div>\n {open && <div className={`${prefix}-menu__overlay`} onClick={handleClose} />}\n </>\n );\n});\n\nexport default createComponent(Menu);\n","import { useState } from 'react';\n\ntype UseMenu = [\n boolean,\n HTMLElement | null,\n (event?: React.MouseEvent<HTMLButtonElement>) => void,\n];\n\nexport default function useMenu(): UseMenu {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n const open = Boolean(anchorEl);\n\n const handleOpen = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n setAnchorEl(event ? event.currentTarget : null);\n };\n\n const handleClose = () => { setAnchorEl(null); };\n\n const handleToggle = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (open) {\n handleClose();\n return;\n }\n\n handleOpen(event);\n };\n\n return [open, anchorEl, handleToggle];\n}\n"],"names":["Debounce","func","milliseconds","debounce","Menu","forwardRef","open","width","children","anchorEl","direction","position","maxHeight","autoClose","onClose","props","ref","coordinate","setCoordinate","useState","config","setConfig","GAP","ANIMATION_DURATION","arrayChildren","Children","id","useMemo","uuid","classes","joinClass","prefix","useListenerResized","changePosition","useEffect","handleOpen","handleClose","coordinates","anchorWidth","anchorHeight","left","anchorTop","prev","el","top","renderChildren","child","index","cloneElement","e","jsxs","Fragment","jsx","Card","CardContent","createComponent","useMenu","setAnchorEl","event"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{jsxs as C,jsx as _}from"react/jsx-runtime";import{Children as j,useState as k,useRef as x,useMemo as B,useEffect as b,cloneElement as y}from"react";import{p as c}from"./index-CZ41y9Hn.js";import{j as f}from"./joinClass-anSpaauN.js";import{u as R}from"./uuid-dGvr9vBZ.js";import{c as L}from"./createComponent-BmdhWozT.js";import{u as g}from"./useListenerResized-Bnqxrt7k.js";function A(t,n){if(n>t)throw new Error(`Current tab index (${n}) is greater than the number of tabs (${t})`)}function M({children:t,color:n="primary",current:r=0,onChange:i,...o}){const u=j.toArray(t),[a,$]=k(r),d=x([]),T=f(`${c}-tabs`,`${c}-tabs--${n}`,o.className),v=f(`${c}-tabs__marker`,`${c}-tabs__marker--${n}`),m=B(()=>`marker-${R()}`,[]);g(()=>p(),[a]),b(()=>{A(u.length-1,a)},[]),b(()=>{const e=u.findIndex(l=>!l.props.disabled),s=u[r].props.disabled;$(s?e:r)},[r]),b(()=>{p(),N(a)},[a]);const I=e=>{i&&i(e),$(e)},N=e=>{d.current&&d.current[e].scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})},w=(e,s)=>{!d.current||!s||(d.current[e]=s)},p=()=>{const e=document.querySelector(`#tab-${m}-${a}`),s=document.getElementById(m),l=e.offsetWidth,h=e.offsetLeft;s.style.width=`${l}px`,s.style.left=`${h}px`};return C("div",{...o,className:T,children:[u.map((e,s)=>{const l=`tab-${m}-${s}`,h=a===s;return _("div",{ref:E=>w(s,E),style:{width:"100%"},children:y(e,{id:l,tabIndex:s+1,"aria-checked":h,onClick:()=>I(s)})},l)}),_("div",{id:m,className:v})]})}const H=L(M);function J({icon:t,label:n,disabled:r,color:i="primary",...o}){const{"aria-checked":u}=o,a=f(`${c}-tabs__button`,r&&`${c}-tabs__button--disabled`,u&&`${c}-tabs__button--active-${i}`,o.className);return C("button",{type:"button",disabled:r,className:a,...o,children:[t&&y(t,{className:f(`${c}-tabs__button__icon`)}),n]})}function K({children:t,value:n,current:r,...i}){return n===r&&_("div",{...i,children:t})}function O(t){const[n,r]=k(t);return b(()=>{r(t)},[t]),[o=>{r(o)},n]}export{J as T,K as a,H as b,O as u};
2
+ //# sourceMappingURL=useTabs-C10MlXVP.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTabs-DG53jo4T.js","sources":["../../src/navigation/Tabs/Tabs.tsx","../../src/navigation/Tabs/TabButton.tsx","../../src/navigation/Tabs/TabContent.tsx","../../src/navigation/Tabs/useTabs.ts"],"sourcesContent":["import { Children, cloneElement, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport { Colors } from '@iziui/core/theme';\n\nimport { uuid } from '@iziui/toolkit/uuid';\n\nimport createComponent from '@/core/createComponent';\nimport useListenerResized from '@/hooks/useListenerResized';\n\nimport '@iziui/styles/components/Tabs.scss';\n\nfunction validateCurrent(length: number, current: number) {\n if (current > length) {\n throw new Error(`Current tab index (${current}) is greater than the number of tabs (${length})`);\n }\n}\n\nexport interface TabsProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {\n current?: number;\n color?: Colors;\n children: React.ReactNode;\n onChange?: (index: number) => void;\n};\n\nfunction Tabs({\n children,\n color = 'primary',\n current = 0,\n onChange,\n ...props\n}: TabsProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<TabsProps>[];\n\n const [_current, setCurrent] = useState(current);\n const scrollRef = useRef<HTMLDivElement[] | null>([]);\n\n const cls = joinClass(\n `${prefix}-tabs`,\n `${prefix}-tabs--${color}`,\n props.className\n );\n\n const classNameMarker = joinClass(\n `${prefix}-tabs__marker`,\n `${prefix}-tabs__marker--${color}`,\n );\n\n const id = useMemo(() => `marker-${uuid()}`, []);\n\n useListenerResized(() => setBorderLine(), [_current]);\n\n useEffect(() => { validateCurrent(arrayChildren.length - 1, _current); }, []);\n\n useEffect(() => {\n const firstEnableButton = arrayChildren.findIndex(children => !children.props.disabled);\n const currentIsDisabled = arrayChildren[current].props.disabled;\n\n setCurrent(currentIsDisabled ? firstEnableButton : current);\n }, [current]);\n\n useEffect(() => {\n setBorderLine();\n goToTab(_current);\n }, [_current]);\n\n const handleClick = (index: number) => {\n if (onChange) { onChange(index); };\n setCurrent(index);\n };\n\n const goToTab = (index: number) => {\n if (!scrollRef.current) { return; }\n scrollRef.current[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center', });\n };\n\n const setRef = (index: number, ref: HTMLDivElement | null) => {\n if (!scrollRef.current || !ref) { return; }\n\n scrollRef.current[index] = ref;\n };\n\n const setBorderLine = () => {\n const element = document.querySelector(`#tab-${id}-${_current}`) as HTMLElement;\n const el = document.getElementById(id) as HTMLElement;\n\n const width = element['offsetWidth'];\n const left = element['offsetLeft'];\n\n el.style.width = `${width}px`;\n el.style.left = `${left}px`;\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n const _id = `tab-${id}-${index}`;\n const isActive = _current === index;\n\n return (\n <div key={_id} ref={ref => setRef(index, ref)} style={{ width: '100%' }}>\n {\n cloneElement(child, {\n id: _id,\n tabIndex: index + 1,\n 'aria-checked': isActive,\n onClick: () => handleClick(index),\n })\n }\n </div>\n );\n });\n };\n\n return (\n <div {...props} className={cls}>\n {renderChildren()}\n <div id={id} className={classNameMarker} />\n </div>\n );\n}\n\nexport default createComponent(Tabs);\n","import { cloneElement, HTMLAttributes } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils';\n\nimport type { IconProps } from '@/display/Icon';\n\nexport interface TabButtonProps extends HTMLAttributes<HTMLButtonElement> {\n label: string;\n disabled?: boolean;\n color?: Colors;\n icon?: React.JSX.Element;\n}\n\nexport default function TabButton({ icon, label, disabled, color = 'primary', ...props }: TabButtonProps) {\n const { 'aria-checked': checked } = props;\n\n const className = joinClass(\n `${prefix}-tabs__button`,\n disabled && `${prefix}-tabs__button--disabled`,\n checked && `${prefix}-tabs__button--active-${color}`,\n props.className\n );\n\n const renderIcon = () => {\n return icon && cloneElement<IconProps>(icon, {\n className: joinClass(\n `${prefix}-tabs__button__icon`,\n ),\n });\n };\n\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={className}\n {...props}\n >\n {renderIcon()}\n {label}\n </button>\n );\n}","import type { HTMLAttributes } from 'react';\n\nimport Slide from '@/animations/Slide';\n\nexport interface TabContentProps extends HTMLAttributes<HTMLDivElement> {\n children: React.JSX.Element;\n value: number;\n current: number;\n}\n\nexport default function TabContent({ children, value, current, ...props }: TabContentProps) {\n return (\n value === current && (\n <Slide enter direction=\"left\">\n <div {...props}>\n {children}\n </div>\n </Slide>\n )\n );\n}","import { useEffect, useState } from 'react';\n\ntype UseTabs = [(index: number) => void, number]\n\nexport default function useTabs(current: number): UseTabs {\n const [_current, setCurrent] = useState(current);\n\n useEffect(() => { setCurrent(current); }, [current]);\n\n const setTab = (index: number) => { setCurrent(index); };\n\n return [\n setTab,\n _current,\n ];\n}"],"names":["validateCurrent","length","current","Tabs","children","color","onChange","props","arrayChildren","Children","_current","setCurrent","useState","scrollRef","useRef","cls","joinClass","prefix","classNameMarker","id","useMemo","uuid","useListenerResized","setBorderLine","useEffect","firstEnableButton","currentIsDisabled","goToTab","handleClick","index","setRef","ref","element","el","width","left","jsxs","child","_id","isActive","jsx","Tabs_default","createComponent","TabButton","icon","label","disabled","checked","className","cloneElement","TabContent","value","Slide","useTabs"],"mappings":"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"}
1
+ {"version":3,"file":"useTabs-C10MlXVP.js","sources":["../../src/navigation/Tabs/Tabs.tsx","../../src/navigation/Tabs/TabButton.tsx","../../src/navigation/Tabs/TabContent.tsx","../../src/navigation/Tabs/useTabs.ts"],"sourcesContent":["import { Children, cloneElement, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport { Colors } from '@iziui/core/theme';\n\nimport { uuid } from '@iziui/toolkit/uuid';\n\nimport createComponent from '@/core/createComponent';\nimport useListenerResized from '@/hooks/useListenerResized';\n\nimport '@iziui/styles/components/Tabs.scss';\n\nfunction validateCurrent(length: number, current: number) {\n if (current > length) {\n throw new Error(`Current tab index (${current}) is greater than the number of tabs (${length})`);\n }\n}\n\nexport interface TabsProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {\n current?: number;\n color?: Colors;\n children: React.ReactNode;\n onChange?: (index: number) => void;\n};\n\nfunction Tabs({\n children,\n color = 'primary',\n current = 0,\n onChange,\n ...props\n}: TabsProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<TabsProps>[];\n\n const [_current, setCurrent] = useState(current);\n const scrollRef = useRef<HTMLDivElement[] | null>([]);\n\n const cls = joinClass(\n `${prefix}-tabs`,\n `${prefix}-tabs--${color}`,\n props.className\n );\n\n const classNameMarker = joinClass(\n `${prefix}-tabs__marker`,\n `${prefix}-tabs__marker--${color}`,\n );\n\n const id = useMemo(() => `marker-${uuid()}`, []);\n\n useListenerResized(() => setBorderLine(), [_current]);\n\n useEffect(() => { validateCurrent(arrayChildren.length - 1, _current); }, []);\n\n useEffect(() => {\n const firstEnableButton = arrayChildren.findIndex(children => !children.props.disabled);\n const currentIsDisabled = arrayChildren[current].props.disabled;\n\n setCurrent(currentIsDisabled ? firstEnableButton : current);\n }, [current]);\n\n useEffect(() => {\n setBorderLine();\n goToTab(_current);\n }, [_current]);\n\n const handleClick = (index: number) => {\n if (onChange) { onChange(index); };\n setCurrent(index);\n };\n\n const goToTab = (index: number) => {\n if (!scrollRef.current) { return; }\n scrollRef.current[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center', });\n };\n\n const setRef = (index: number, ref: HTMLDivElement | null) => {\n if (!scrollRef.current || !ref) { return; }\n\n scrollRef.current[index] = ref;\n };\n\n const setBorderLine = () => {\n const element = document.querySelector(`#tab-${id}-${_current}`) as HTMLElement;\n const el = document.getElementById(id) as HTMLElement;\n\n const width = element['offsetWidth'];\n const left = element['offsetLeft'];\n\n el.style.width = `${width}px`;\n el.style.left = `${left}px`;\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n const _id = `tab-${id}-${index}`;\n const isActive = _current === index;\n\n return (\n <div key={_id} ref={ref => setRef(index, ref)} style={{ width: '100%' }}>\n {\n cloneElement(child, {\n id: _id,\n tabIndex: index + 1,\n 'aria-checked': isActive,\n onClick: () => handleClick(index),\n })\n }\n </div>\n );\n });\n };\n\n return (\n <div {...props} className={cls}>\n {renderChildren()}\n <div id={id} className={classNameMarker} />\n </div>\n );\n}\n\nexport default createComponent(Tabs);\n","import { cloneElement, HTMLAttributes } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils';\n\nimport type { IconProps } from '@/display/Icon';\n\nexport interface TabButtonProps extends HTMLAttributes<HTMLButtonElement> {\n label: string;\n disabled?: boolean;\n color?: Colors;\n icon?: React.JSX.Element;\n}\n\nexport default function TabButton({ icon, label, disabled, color = 'primary', ...props }: TabButtonProps) {\n const { 'aria-checked': checked } = props;\n\n const className = joinClass(\n `${prefix}-tabs__button`,\n disabled && `${prefix}-tabs__button--disabled`,\n checked && `${prefix}-tabs__button--active-${color}`,\n props.className\n );\n\n const renderIcon = () => {\n return icon && cloneElement<IconProps>(icon, {\n className: joinClass(\n `${prefix}-tabs__button__icon`,\n ),\n });\n };\n\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={className}\n {...props}\n >\n {renderIcon()}\n {label}\n </button>\n );\n}","import type { HTMLAttributes } from 'react';\n\nexport interface TabContentProps extends HTMLAttributes<HTMLDivElement> {\n children: React.JSX.Element;\n value: number;\n current: number;\n}\n\nexport default function TabContent({ children, value, current, ...props }: TabContentProps) {\n return (\n value === current && (\n <div {...props}>\n {children}\n </div>\n )\n );\n}","import { useEffect, useState } from 'react';\n\ntype UseTabs = [(index: number) => void, number]\n\nexport default function useTabs(current: number): UseTabs {\n const [_current, setCurrent] = useState(current);\n\n useEffect(() => { setCurrent(current); }, [current]);\n\n const setTab = (index: number) => { setCurrent(index); };\n\n return [\n setTab,\n _current,\n ];\n}"],"names":["validateCurrent","length","current","Tabs","children","color","onChange","props","arrayChildren","Children","_current","setCurrent","useState","scrollRef","useRef","cls","joinClass","prefix","classNameMarker","id","useMemo","uuid","useListenerResized","setBorderLine","useEffect","firstEnableButton","currentIsDisabled","goToTab","handleClick","index","setRef","ref","element","el","width","left","jsxs","child","_id","isActive","jsx","Tabs_default","createComponent","TabButton","icon","label","disabled","checked","className","cloneElement","TabContent","value","useTabs"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ "use strict";const d=require("react/jsx-runtime"),o=require("react"),i=require("./index-DYxwT4uW.cjs"),_=require("./joinClass-Jk3EszKD.cjs"),q=require("./uuid-omnJ9TjZ.cjs"),v=require("./createComponent-Bls5N6x8.cjs"),N=require("./useListenerResized-AwpsZLcP.cjs");function w(e,r){if(r>e)throw new Error(`Current tab index (${r}) is greater than the number of tabs (${e})`)}function I({children:e,color:r="primary",current:n=0,onChange:u,...a}){const l=o.Children.toArray(e),[c,b]=o.useState(n),m=o.useRef([]),x=_.joinClass(`${i.prefix}-tabs`,`${i.prefix}-tabs--${r}`,a.className),p=_.joinClass(`${i.prefix}-tabs__marker`,`${i.prefix}-tabs__marker--${r}`),$=o.useMemo(()=>`marker-${q.uuid()}`,[]);N.useListenerResized(()=>C(),[c]),o.useEffect(()=>{w(l.length-1,c)},[]),o.useEffect(()=>{const t=l.findIndex(f=>!f.props.disabled),s=l[n].props.disabled;b(s?t:n)},[n]),o.useEffect(()=>{C(),j(c)},[c]);const T=t=>{u&&u(t),b(t)},j=t=>{m.current&&m.current[t].scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})},k=(t,s)=>{!m.current||!s||(m.current[t]=s)},C=()=>{const t=document.querySelector(`#tab-${$}-${c}`),s=document.getElementById($),f=t.offsetWidth,h=t.offsetLeft;s.style.width=`${f}px`,s.style.left=`${h}px`},y=()=>l.map((t,s)=>{const f=`tab-${$}-${s}`,h=c===s;return d.jsx("div",{ref:E=>k(s,E),style:{width:"100%"},children:o.cloneElement(t,{id:f,tabIndex:s+1,"aria-checked":h,onClick:()=>T(s)})},f)});return d.jsxs("div",{...a,className:x,children:[y(),d.jsx("div",{id:$,className:p})]})}const R=v.createComponent(I);function B({icon:e,label:r,disabled:n,color:u="primary",...a}){const{"aria-checked":l}=a,c=_.joinClass(`${i.prefix}-tabs__button`,n&&`${i.prefix}-tabs__button--disabled`,l&&`${i.prefix}-tabs__button--active-${u}`,a.className),b=()=>e&&o.cloneElement(e,{className:_.joinClass(`${i.prefix}-tabs__button__icon`)});return d.jsxs("button",{type:"button",disabled:n,className:c,...a,children:[b(),r]})}function L({children:e,value:r,current:n,...u}){return r===n&&d.jsx("div",{...u,children:e})}function S(e){const[r,n]=o.useState(e);return o.useEffect(()=>{n(e)},[e]),[a=>{n(a)},r]}exports.TabButton=B;exports.TabContent=L;exports.Tabs_default=R;exports.useTabs=S;
2
+ //# sourceMappingURL=useTabs-DXjPVKGl.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useTabs-Dcksp_re.cjs","sources":["../../src/navigation/Tabs/Tabs.tsx","../../src/navigation/Tabs/TabButton.tsx","../../src/navigation/Tabs/TabContent.tsx","../../src/navigation/Tabs/useTabs.ts"],"sourcesContent":["import { Children, cloneElement, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport { Colors } from '@iziui/core/theme';\n\nimport { uuid } from '@iziui/toolkit/uuid';\n\nimport createComponent from '@/core/createComponent';\nimport useListenerResized from '@/hooks/useListenerResized';\n\nimport '@iziui/styles/components/Tabs.scss';\n\nfunction validateCurrent(length: number, current: number) {\n if (current > length) {\n throw new Error(`Current tab index (${current}) is greater than the number of tabs (${length})`);\n }\n}\n\nexport interface TabsProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {\n current?: number;\n color?: Colors;\n children: React.ReactNode;\n onChange?: (index: number) => void;\n};\n\nfunction Tabs({\n children,\n color = 'primary',\n current = 0,\n onChange,\n ...props\n}: TabsProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<TabsProps>[];\n\n const [_current, setCurrent] = useState(current);\n const scrollRef = useRef<HTMLDivElement[] | null>([]);\n\n const cls = joinClass(\n `${prefix}-tabs`,\n `${prefix}-tabs--${color}`,\n props.className\n );\n\n const classNameMarker = joinClass(\n `${prefix}-tabs__marker`,\n `${prefix}-tabs__marker--${color}`,\n );\n\n const id = useMemo(() => `marker-${uuid()}`, []);\n\n useListenerResized(() => setBorderLine(), [_current]);\n\n useEffect(() => { validateCurrent(arrayChildren.length - 1, _current); }, []);\n\n useEffect(() => {\n const firstEnableButton = arrayChildren.findIndex(children => !children.props.disabled);\n const currentIsDisabled = arrayChildren[current].props.disabled;\n\n setCurrent(currentIsDisabled ? firstEnableButton : current);\n }, [current]);\n\n useEffect(() => {\n setBorderLine();\n goToTab(_current);\n }, [_current]);\n\n const handleClick = (index: number) => {\n if (onChange) { onChange(index); };\n setCurrent(index);\n };\n\n const goToTab = (index: number) => {\n if (!scrollRef.current) { return; }\n scrollRef.current[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center', });\n };\n\n const setRef = (index: number, ref: HTMLDivElement | null) => {\n if (!scrollRef.current || !ref) { return; }\n\n scrollRef.current[index] = ref;\n };\n\n const setBorderLine = () => {\n const element = document.querySelector(`#tab-${id}-${_current}`) as HTMLElement;\n const el = document.getElementById(id) as HTMLElement;\n\n const width = element['offsetWidth'];\n const left = element['offsetLeft'];\n\n el.style.width = `${width}px`;\n el.style.left = `${left}px`;\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n const _id = `tab-${id}-${index}`;\n const isActive = _current === index;\n\n return (\n <div key={_id} ref={ref => setRef(index, ref)} style={{ width: '100%' }}>\n {\n cloneElement(child, {\n id: _id,\n tabIndex: index + 1,\n 'aria-checked': isActive,\n onClick: () => handleClick(index),\n })\n }\n </div>\n );\n });\n };\n\n return (\n <div {...props} className={cls}>\n {renderChildren()}\n <div id={id} className={classNameMarker} />\n </div>\n );\n}\n\nexport default createComponent(Tabs);\n","import { cloneElement, HTMLAttributes } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils';\n\nimport type { IconProps } from '@/display/Icon';\n\nexport interface TabButtonProps extends HTMLAttributes<HTMLButtonElement> {\n label: string;\n disabled?: boolean;\n color?: Colors;\n icon?: React.JSX.Element;\n}\n\nexport default function TabButton({ icon, label, disabled, color = 'primary', ...props }: TabButtonProps) {\n const { 'aria-checked': checked } = props;\n\n const className = joinClass(\n `${prefix}-tabs__button`,\n disabled && `${prefix}-tabs__button--disabled`,\n checked && `${prefix}-tabs__button--active-${color}`,\n props.className\n );\n\n const renderIcon = () => {\n return icon && cloneElement<IconProps>(icon, {\n className: joinClass(\n `${prefix}-tabs__button__icon`,\n ),\n });\n };\n\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={className}\n {...props}\n >\n {renderIcon()}\n {label}\n </button>\n );\n}","import type { HTMLAttributes } from 'react';\n\nimport Slide from '@/animations/Slide';\n\nexport interface TabContentProps extends HTMLAttributes<HTMLDivElement> {\n children: React.JSX.Element;\n value: number;\n current: number;\n}\n\nexport default function TabContent({ children, value, current, ...props }: TabContentProps) {\n return (\n value === current && (\n <Slide enter direction=\"left\">\n <div {...props}>\n {children}\n </div>\n </Slide>\n )\n );\n}","import { useEffect, useState } from 'react';\n\ntype UseTabs = [(index: number) => void, number]\n\nexport default function useTabs(current: number): UseTabs {\n const [_current, setCurrent] = useState(current);\n\n useEffect(() => { setCurrent(current); }, [current]);\n\n const setTab = (index: number) => { setCurrent(index); };\n\n return [\n setTab,\n _current,\n ];\n}"],"names":["validateCurrent","length","current","Tabs","children","color","onChange","props","arrayChildren","Children","_current","setCurrent","useState","scrollRef","useRef","cls","joinClass","prefix","classNameMarker","id","useMemo","uuid","useListenerResized","setBorderLine","useEffect","firstEnableButton","currentIsDisabled","goToTab","handleClick","index","setRef","ref","element","el","width","left","renderChildren","child","_id","isActive","jsx","jsxs","Tabs_default","createComponent","TabButton","icon","label","disabled","checked","className","renderIcon","cloneElement","TabContent","value","Slide","useTabs"],"mappings":"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"}
1
+ {"version":3,"file":"useTabs-DXjPVKGl.cjs","sources":["../../src/navigation/Tabs/Tabs.tsx","../../src/navigation/Tabs/TabButton.tsx","../../src/navigation/Tabs/TabContent.tsx","../../src/navigation/Tabs/useTabs.ts"],"sourcesContent":["import { Children, cloneElement, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport { Colors } from '@iziui/core/theme';\n\nimport { uuid } from '@iziui/toolkit/uuid';\n\nimport createComponent from '@/core/createComponent';\nimport useListenerResized from '@/hooks/useListenerResized';\n\nimport '@iziui/styles/components/Tabs.scss';\n\nfunction validateCurrent(length: number, current: number) {\n if (current > length) {\n throw new Error(`Current tab index (${current}) is greater than the number of tabs (${length})`);\n }\n}\n\nexport interface TabsProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {\n current?: number;\n color?: Colors;\n children: React.ReactNode;\n onChange?: (index: number) => void;\n};\n\nfunction Tabs({\n children,\n color = 'primary',\n current = 0,\n onChange,\n ...props\n}: TabsProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<TabsProps>[];\n\n const [_current, setCurrent] = useState(current);\n const scrollRef = useRef<HTMLDivElement[] | null>([]);\n\n const cls = joinClass(\n `${prefix}-tabs`,\n `${prefix}-tabs--${color}`,\n props.className\n );\n\n const classNameMarker = joinClass(\n `${prefix}-tabs__marker`,\n `${prefix}-tabs__marker--${color}`,\n );\n\n const id = useMemo(() => `marker-${uuid()}`, []);\n\n useListenerResized(() => setBorderLine(), [_current]);\n\n useEffect(() => { validateCurrent(arrayChildren.length - 1, _current); }, []);\n\n useEffect(() => {\n const firstEnableButton = arrayChildren.findIndex(children => !children.props.disabled);\n const currentIsDisabled = arrayChildren[current].props.disabled;\n\n setCurrent(currentIsDisabled ? firstEnableButton : current);\n }, [current]);\n\n useEffect(() => {\n setBorderLine();\n goToTab(_current);\n }, [_current]);\n\n const handleClick = (index: number) => {\n if (onChange) { onChange(index); };\n setCurrent(index);\n };\n\n const goToTab = (index: number) => {\n if (!scrollRef.current) { return; }\n scrollRef.current[index].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center', });\n };\n\n const setRef = (index: number, ref: HTMLDivElement | null) => {\n if (!scrollRef.current || !ref) { return; }\n\n scrollRef.current[index] = ref;\n };\n\n const setBorderLine = () => {\n const element = document.querySelector(`#tab-${id}-${_current}`) as HTMLElement;\n const el = document.getElementById(id) as HTMLElement;\n\n const width = element['offsetWidth'];\n const left = element['offsetLeft'];\n\n el.style.width = `${width}px`;\n el.style.left = `${left}px`;\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n const _id = `tab-${id}-${index}`;\n const isActive = _current === index;\n\n return (\n <div key={_id} ref={ref => setRef(index, ref)} style={{ width: '100%' }}>\n {\n cloneElement(child, {\n id: _id,\n tabIndex: index + 1,\n 'aria-checked': isActive,\n onClick: () => handleClick(index),\n })\n }\n </div>\n );\n });\n };\n\n return (\n <div {...props} className={cls}>\n {renderChildren()}\n <div id={id} className={classNameMarker} />\n </div>\n );\n}\n\nexport default createComponent(Tabs);\n","import { cloneElement, HTMLAttributes } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils';\n\nimport type { IconProps } from '@/display/Icon';\n\nexport interface TabButtonProps extends HTMLAttributes<HTMLButtonElement> {\n label: string;\n disabled?: boolean;\n color?: Colors;\n icon?: React.JSX.Element;\n}\n\nexport default function TabButton({ icon, label, disabled, color = 'primary', ...props }: TabButtonProps) {\n const { 'aria-checked': checked } = props;\n\n const className = joinClass(\n `${prefix}-tabs__button`,\n disabled && `${prefix}-tabs__button--disabled`,\n checked && `${prefix}-tabs__button--active-${color}`,\n props.className\n );\n\n const renderIcon = () => {\n return icon && cloneElement<IconProps>(icon, {\n className: joinClass(\n `${prefix}-tabs__button__icon`,\n ),\n });\n };\n\n return (\n <button\n type=\"button\"\n disabled={disabled}\n className={className}\n {...props}\n >\n {renderIcon()}\n {label}\n </button>\n );\n}","import type { HTMLAttributes } from 'react';\n\nexport interface TabContentProps extends HTMLAttributes<HTMLDivElement> {\n children: React.JSX.Element;\n value: number;\n current: number;\n}\n\nexport default function TabContent({ children, value, current, ...props }: TabContentProps) {\n return (\n value === current && (\n <div {...props}>\n {children}\n </div>\n )\n );\n}","import { useEffect, useState } from 'react';\n\ntype UseTabs = [(index: number) => void, number]\n\nexport default function useTabs(current: number): UseTabs {\n const [_current, setCurrent] = useState(current);\n\n useEffect(() => { setCurrent(current); }, [current]);\n\n const setTab = (index: number) => { setCurrent(index); };\n\n return [\n setTab,\n _current,\n ];\n}"],"names":["validateCurrent","length","current","Tabs","children","color","onChange","props","arrayChildren","Children","_current","setCurrent","useState","scrollRef","useRef","cls","joinClass","prefix","classNameMarker","id","useMemo","uuid","useListenerResized","setBorderLine","useEffect","firstEnableButton","currentIsDisabled","goToTab","handleClick","index","setRef","ref","element","el","width","left","renderChildren","child","_id","isActive","jsx","jsxs","Tabs_default","createComponent","TabButton","icon","label","disabled","checked","className","renderIcon","cloneElement","TabContent","value","useTabs"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),d=require("react"),e=require("../../chunks/index-DYxwT4uW.cjs"),s=require("../../chunks/joinClass-Jk3EszKD.cjs"),x=require("../../chunks/generateSupportColors-CTMoGhDf.cjs"),P=require("../../chunks/uuid-omnJ9TjZ.cjs"),R=require("../../chunks/Box-CNg55MFq.cjs"),C=require("../../chunks/Icon-BN4Kp4Aq.cjs"),E=require("../../chunks/Stack-CF3Wyma9.cjs"),I=require("../../chunks/useTheme-DsrjDJKC.cjs"),_=require("../../chunks/useMenu-D9-CcpCS.cjs"),O=require("../../chunks/createComponent-Bls5N6x8.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");require("../../chunks/Card-Bqgukgip.cjs");require("../../chunks/Ripple-Dy4i91j1.cjs");require("../../chunks/CardContent-DPL-tBOS.cjs");const k=["#00aae6","#2e72fe","#6f4dff","#9f40f1","#9e2dbf","#db5bdc","#ea479b","#ff83a8","#d80051","#eb3d32","#fa8d2f","#f5cd2b","#93ca00","#62d26f","#38c5ab","#87969f"];function T({label:n,error:i,helperText:t,fitContent:m,value:c=k[0],autoClose:b,onChange:j,onInput:h,...$}){const{theme:{palette:a}}=I.useTheme(),l=d.useRef(null),[q,g,u]=_.useMenu(),p=d.useMemo(()=>P.uuid(),[]),N=s.joinClass(`${e.prefix}-color-picker__label`,i&&`${e.prefix}-color-picker__label--error`),y=s.joinClass(`${e.prefix}-color-picker-container`,i&&`${e.prefix}-color-picker-container--error`),v=s.joinClass(`${e.prefix}-color-picker`,i&&`${e.prefix}-color-picker--error`),M=s.joinClass(`${e.prefix}-color-picker__value`,i&&`${e.prefix}-color-picker__value--error`),S=s.joinClass(`${e.prefix}-color-picker__helper-text`,t&&`${e.prefix}-color-picker__helper-text--visible`,i&&`${e.prefix}-color-picker__helper-text--error`),f=o=>s.joinClass(`${e.prefix}-color-picker__color__icon`,c===o&&`${e.prefix}-color-picker__color__icon--visible`);function w(o){l.current&&(l.current.value=o,l.current.dispatchEvent(new Event("input",{bubbles:!0})))}return r.jsxs("div",{className:y,children:[n&&r.jsxs("label",{className:N,children:[n," ",$.required&&"*"]}),r.jsxs("button",{type:"button",onClick:u,className:v,children:[r.jsx("div",{className:`${e.prefix}-color-picker__preview`,children:r.jsx("div",{style:{backgroundColor:c}})}),r.jsx("div",{className:M,children:c})]}),r.jsx("span",{className:S,children:t}),r.jsx(_.Menu,{direction:"left",autoClose:b,open:q,anchorEl:g,width:m?"fit-content":"",onClose:u,children:r.jsx(R.Box,{sx:{p:1},children:r.jsxs(E.Stack,{gap:8,flexDirection:"row",justifyContent:"center",style:{flexWrap:"wrap"},children:[k.map(o=>r.jsx("button",{type:"button",className:`${e.prefix}-color-picker__color`,onClick:()=>w(o),style:{backgroundColor:o},children:r.jsx(C.Icon,{name:"check",className:f(o),style:{color:x.getContrastColor(c)}})},o)),r.jsxs("label",{htmlFor:`color-picker-${p}`,className:`${e.prefix}-color-picker__color`,style:{backgroundColor:a.grey.main},children:[r.jsx(C.Icon,{name:"plus",className:f(c),style:{color:x.getContrastColor(a.grey.main)}}),r.jsx("input",{ref:l,type:"color",id:`color-picker-${p}`,value:c,onChange:j,onInput:h})]})]})})})]})}const B=O.createComponent(T);exports.default=B;
1
+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react/jsx-runtime"),d=require("react"),e=require("../../chunks/index-DYxwT4uW.cjs"),s=require("../../chunks/joinClass-Jk3EszKD.cjs"),x=require("../../chunks/generateSupportColors-CTMoGhDf.cjs"),P=require("../../chunks/uuid-omnJ9TjZ.cjs"),R=require("../../chunks/Box-CNg55MFq.cjs"),C=require("../../chunks/Icon-BN4Kp4Aq.cjs"),E=require("../../chunks/Stack-CF3Wyma9.cjs"),I=require("../../chunks/useTheme-DsrjDJKC.cjs"),_=require("../../chunks/useMenu-BfWmrq4L.cjs"),O=require("../../chunks/createComponent-Bls5N6x8.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");require("../../chunks/Card-Bqgukgip.cjs");require("../../chunks/Ripple-Dy4i91j1.cjs");require("../../chunks/CardContent-DPL-tBOS.cjs");const k=["#00aae6","#2e72fe","#6f4dff","#9f40f1","#9e2dbf","#db5bdc","#ea479b","#ff83a8","#d80051","#eb3d32","#fa8d2f","#f5cd2b","#93ca00","#62d26f","#38c5ab","#87969f"];function T({label:n,error:i,helperText:t,fitContent:m,value:c=k[0],autoClose:b,onChange:j,onInput:h,...$}){const{theme:{palette:a}}=I.useTheme(),l=d.useRef(null),[q,g,u]=_.useMenu(),p=d.useMemo(()=>P.uuid(),[]),N=s.joinClass(`${e.prefix}-color-picker__label`,i&&`${e.prefix}-color-picker__label--error`),y=s.joinClass(`${e.prefix}-color-picker-container`,i&&`${e.prefix}-color-picker-container--error`),v=s.joinClass(`${e.prefix}-color-picker`,i&&`${e.prefix}-color-picker--error`),M=s.joinClass(`${e.prefix}-color-picker__value`,i&&`${e.prefix}-color-picker__value--error`),S=s.joinClass(`${e.prefix}-color-picker__helper-text`,t&&`${e.prefix}-color-picker__helper-text--visible`,i&&`${e.prefix}-color-picker__helper-text--error`),f=o=>s.joinClass(`${e.prefix}-color-picker__color__icon`,c===o&&`${e.prefix}-color-picker__color__icon--visible`);function w(o){l.current&&(l.current.value=o,l.current.dispatchEvent(new Event("input",{bubbles:!0})))}return r.jsxs("div",{className:y,children:[n&&r.jsxs("label",{className:N,children:[n," ",$.required&&"*"]}),r.jsxs("button",{type:"button",onClick:u,className:v,children:[r.jsx("div",{className:`${e.prefix}-color-picker__preview`,children:r.jsx("div",{style:{backgroundColor:c}})}),r.jsx("div",{className:M,children:c})]}),r.jsx("span",{className:S,children:t}),r.jsx(_.Menu,{direction:"left",autoClose:b,open:q,anchorEl:g,width:m?"fit-content":"",onClose:u,children:r.jsx(R.Box,{sx:{p:1},children:r.jsxs(E.Stack,{gap:8,flexDirection:"row",justifyContent:"center",style:{flexWrap:"wrap"},children:[k.map(o=>r.jsx("button",{type:"button",className:`${e.prefix}-color-picker__color`,onClick:()=>w(o),style:{backgroundColor:o},children:r.jsx(C.Icon,{name:"check",className:f(o),style:{color:x.getContrastColor(c)}})},o)),r.jsxs("label",{htmlFor:`color-picker-${p}`,className:`${e.prefix}-color-picker__color`,style:{backgroundColor:a.grey.main},children:[r.jsx(C.Icon,{name:"plus",className:f(c),style:{color:x.getContrastColor(a.grey.main)}}),r.jsx("input",{ref:l,type:"color",id:`color-picker-${p}`,value:c,onChange:j,onInput:h})]})]})})})]})}const B=O.createComponent(T);exports.default=B;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,2 +1,2 @@
1
- import{jsxs as i,jsx as e}from"react/jsx-runtime";import{useRef as P,useMemo as R}from"react";import{p as o}from"../../chunks/index-CZ41y9Hn.js";import{j as l}from"../../chunks/joinClass-anSpaauN.js";import{b as u}from"../../chunks/generateSupportColors-BN5t8dA-.js";import{u as S}from"../../chunks/uuid-dGvr9vBZ.js";import{B}from"../../chunks/Box-DqBZgXYR.js";import{I as _}from"../../chunks/Icon-DTU52KQE.js";import{S as I}from"../../chunks/Stack-CHR_pZC4.js";import{u as O}from"../../chunks/useTheme-BYuNiCiH.js";import{u as q,M as D}from"../../chunks/useMenu-CizlB9PU.js";import{c as F}from"../../chunks/createComponent-BmdhWozT.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";import"../../chunks/Card-C2mSdoXV.js";import"../../chunks/Ripple-Bq9bxg4k.js";import"../../chunks/CardContent-CViecz1a.js";const k=["#00aae6","#2e72fe","#6f4dff","#9f40f1","#9e2dbf","#db5bdc","#ea479b","#ff83a8","#d80051","#eb3d32","#fa8d2f","#f5cd2b","#93ca00","#62d26f","#38c5ab","#87969f"];function L({label:s,error:t,helperText:a,fitContent:b,value:c=k[0],autoClose:h,onChange:C,onInput:$,...N}){const{theme:{palette:p}}=O(),n=P(null),[y,x,m]=q(),f=R(()=>S(),[]),g=l(`${o}-color-picker__label`,t&&`${o}-color-picker__label--error`),v=l(`${o}-color-picker-container`,t&&`${o}-color-picker-container--error`),j=l(`${o}-color-picker`,t&&`${o}-color-picker--error`),w=l(`${o}-color-picker__value`,t&&`${o}-color-picker__value--error`),M=l(`${o}-color-picker__helper-text`,a&&`${o}-color-picker__helper-text--visible`,t&&`${o}-color-picker__helper-text--error`),d=r=>l(`${o}-color-picker__color__icon`,c===r&&`${o}-color-picker__color__icon--visible`);function E(r){n.current&&(n.current.value=r,n.current.dispatchEvent(new Event("input",{bubbles:!0})))}return i("div",{className:v,children:[s&&i("label",{className:g,children:[s," ",N.required&&"*"]}),i("button",{type:"button",onClick:m,className:j,children:[e("div",{className:`${o}-color-picker__preview`,children:e("div",{style:{backgroundColor:c}})}),e("div",{className:w,children:c})]}),e("span",{className:M,children:a}),e(D,{direction:"left",autoClose:h,open:y,anchorEl:x,width:b?"fit-content":"",onClose:m,children:e(B,{sx:{p:1},children:i(I,{gap:8,flexDirection:"row",justifyContent:"center",style:{flexWrap:"wrap"},children:[k.map(r=>e("button",{type:"button",className:`${o}-color-picker__color`,onClick:()=>E(r),style:{backgroundColor:r},children:e(_,{name:"check",className:d(r),style:{color:u(c)}})},r)),i("label",{htmlFor:`color-picker-${f}`,className:`${o}-color-picker__color`,style:{backgroundColor:p.grey.main},children:[e(_,{name:"plus",className:d(c),style:{color:u(p.grey.main)}}),e("input",{ref:n,type:"color",id:`color-picker-${f}`,value:c,onChange:C,onInput:$})]})]})})})]})}const ro=F(L);export{ro as default};
1
+ import{jsxs as i,jsx as e}from"react/jsx-runtime";import{useRef as P,useMemo as R}from"react";import{p as o}from"../../chunks/index-CZ41y9Hn.js";import{j as l}from"../../chunks/joinClass-anSpaauN.js";import{b as u}from"../../chunks/generateSupportColors-BN5t8dA-.js";import{u as S}from"../../chunks/uuid-dGvr9vBZ.js";import{B}from"../../chunks/Box-DqBZgXYR.js";import{I as _}from"../../chunks/Icon-DTU52KQE.js";import{S as I}from"../../chunks/Stack-CHR_pZC4.js";import{u as O}from"../../chunks/useTheme-BYuNiCiH.js";import{u as q,M as D}from"../../chunks/useMenu-B49hOh6R.js";import{c as F}from"../../chunks/createComponent-BmdhWozT.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";import"../../chunks/Card-C2mSdoXV.js";import"../../chunks/Ripple-Bq9bxg4k.js";import"../../chunks/CardContent-CViecz1a.js";const k=["#00aae6","#2e72fe","#6f4dff","#9f40f1","#9e2dbf","#db5bdc","#ea479b","#ff83a8","#d80051","#eb3d32","#fa8d2f","#f5cd2b","#93ca00","#62d26f","#38c5ab","#87969f"];function L({label:s,error:t,helperText:a,fitContent:b,value:c=k[0],autoClose:h,onChange:C,onInput:$,...N}){const{theme:{palette:p}}=O(),n=P(null),[y,x,m]=q(),f=R(()=>S(),[]),g=l(`${o}-color-picker__label`,t&&`${o}-color-picker__label--error`),v=l(`${o}-color-picker-container`,t&&`${o}-color-picker-container--error`),j=l(`${o}-color-picker`,t&&`${o}-color-picker--error`),w=l(`${o}-color-picker__value`,t&&`${o}-color-picker__value--error`),M=l(`${o}-color-picker__helper-text`,a&&`${o}-color-picker__helper-text--visible`,t&&`${o}-color-picker__helper-text--error`),d=r=>l(`${o}-color-picker__color__icon`,c===r&&`${o}-color-picker__color__icon--visible`);function E(r){n.current&&(n.current.value=r,n.current.dispatchEvent(new Event("input",{bubbles:!0})))}return i("div",{className:v,children:[s&&i("label",{className:g,children:[s," ",N.required&&"*"]}),i("button",{type:"button",onClick:m,className:j,children:[e("div",{className:`${o}-color-picker__preview`,children:e("div",{style:{backgroundColor:c}})}),e("div",{className:w,children:c})]}),e("span",{className:M,children:a}),e(D,{direction:"left",autoClose:h,open:y,anchorEl:x,width:b?"fit-content":"",onClose:m,children:e(B,{sx:{p:1},children:i(I,{gap:8,flexDirection:"row",justifyContent:"center",style:{flexWrap:"wrap"},children:[k.map(r=>e("button",{type:"button",className:`${o}-color-picker__color`,onClick:()=>E(r),style:{backgroundColor:r},children:e(_,{name:"check",className:d(r),style:{color:u(c)}})},r)),i("label",{htmlFor:`color-picker-${f}`,className:`${o}-color-picker__color`,style:{backgroundColor:p.grey.main},children:[e(_,{name:"plus",className:d(c),style:{color:u(p.grey.main)}}),e("input",{ref:n,type:"color",id:`color-picker-${f}`,value:c,onChange:C,onInput:$})]})]})})})]})}const ro=F(L);export{ro as default};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/useMenu-D9-CcpCS.cjs"),r=require("../../chunks/MenuButton-Dpbow8YC.cjs");require("react/jsx-runtime");require("react");require("../../chunks/index-DYxwT4uW.cjs");require("../../chunks/joinClass-Jk3EszKD.cjs");require("../../chunks/uuid-omnJ9TjZ.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");require("../../chunks/Card-Bqgukgip.cjs");require("../../chunks/Ripple-Dy4i91j1.cjs");require("../../chunks/createComponent-Bls5N6x8.cjs");require("../../chunks/useTheme-DsrjDJKC.cjs");require("../../chunks/generateSupportColors-CTMoGhDf.cjs");require("../../chunks/CardContent-DPL-tBOS.cjs");exports.Menu=e.Menu;exports.useMenu=e.useMenu;exports.MenuButton=r.MenuButton_default;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/useMenu-BfWmrq4L.cjs"),r=require("../../chunks/MenuButton-Dpbow8YC.cjs");require("react/jsx-runtime");require("react");require("../../chunks/index-DYxwT4uW.cjs");require("../../chunks/joinClass-Jk3EszKD.cjs");require("../../chunks/uuid-omnJ9TjZ.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");require("../../chunks/Card-Bqgukgip.cjs");require("../../chunks/Ripple-Dy4i91j1.cjs");require("../../chunks/createComponent-Bls5N6x8.cjs");require("../../chunks/useTheme-DsrjDJKC.cjs");require("../../chunks/generateSupportColors-CTMoGhDf.cjs");require("../../chunks/CardContent-DPL-tBOS.cjs");exports.Menu=e.Menu;exports.useMenu=e.useMenu;exports.MenuButton=r.MenuButton_default;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,2 +1,2 @@
1
- import{M as B,u as b}from"../../chunks/useMenu-CizlB9PU.js";import{M as d}from"../../chunks/MenuButton-31ZFG3JW.js";import"react/jsx-runtime";import"react";import"../../chunks/index-CZ41y9Hn.js";import"../../chunks/joinClass-anSpaauN.js";import"../../chunks/uuid-dGvr9vBZ.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";import"../../chunks/Card-C2mSdoXV.js";import"../../chunks/Ripple-Bq9bxg4k.js";import"../../chunks/createComponent-BmdhWozT.js";import"../../chunks/useTheme-BYuNiCiH.js";import"../../chunks/generateSupportColors-BN5t8dA-.js";import"../../chunks/CardContent-CViecz1a.js";export{B as Menu,d as MenuButton,b as useMenu};
1
+ import{M as B,u as b}from"../../chunks/useMenu-B49hOh6R.js";import{M as d}from"../../chunks/MenuButton-31ZFG3JW.js";import"react/jsx-runtime";import"react";import"../../chunks/index-CZ41y9Hn.js";import"../../chunks/joinClass-anSpaauN.js";import"../../chunks/uuid-dGvr9vBZ.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";import"../../chunks/Card-C2mSdoXV.js";import"../../chunks/Ripple-Bq9bxg4k.js";import"../../chunks/createComponent-BmdhWozT.js";import"../../chunks/useTheme-BYuNiCiH.js";import"../../chunks/generateSupportColors-BN5t8dA-.js";import"../../chunks/CardContent-CViecz1a.js";export{B as Menu,d as MenuButton,b as useMenu};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/Option-B1l_zN4-.cjs");require("react/jsx-runtime");require("react");require("../../chunks/index-DYxwT4uW.cjs");require("../../chunks/joinClass-Jk3EszKD.cjs");require("../../chunks/Icon-BN4Kp4Aq.cjs");require("../../chunks/createComponent-Bls5N6x8.cjs");require("../../chunks/useTheme-DsrjDJKC.cjs");require("../../chunks/generateSupportColors-CTMoGhDf.cjs");require("../../chunks/useMenu-D9-CcpCS.cjs");require("../../chunks/uuid-omnJ9TjZ.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");require("../../chunks/Card-Bqgukgip.cjs");require("../../chunks/Ripple-Dy4i91j1.cjs");require("../../chunks/CardContent-DPL-tBOS.cjs");exports.Option=e.Option;exports.Select=e.Select_default;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/Option-COyiqmg0.cjs");require("react/jsx-runtime");require("react");require("../../chunks/index-DYxwT4uW.cjs");require("../../chunks/joinClass-Jk3EszKD.cjs");require("../../chunks/Icon-BN4Kp4Aq.cjs");require("../../chunks/createComponent-Bls5N6x8.cjs");require("../../chunks/useTheme-DsrjDJKC.cjs");require("../../chunks/generateSupportColors-CTMoGhDf.cjs");require("../../chunks/useMenu-BfWmrq4L.cjs");require("../../chunks/uuid-omnJ9TjZ.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");require("../../chunks/Card-Bqgukgip.cjs");require("../../chunks/Ripple-Dy4i91j1.cjs");require("../../chunks/CardContent-DPL-tBOS.cjs");exports.Option=e.Option;exports.Select=e.Select_default;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,2 +1,2 @@
1
- import{O as b,S as d}from"../../chunks/Option-BvxuW39r.js";import"react/jsx-runtime";import"react";import"../../chunks/index-CZ41y9Hn.js";import"../../chunks/joinClass-anSpaauN.js";import"../../chunks/Icon-DTU52KQE.js";import"../../chunks/createComponent-BmdhWozT.js";import"../../chunks/useTheme-BYuNiCiH.js";import"../../chunks/generateSupportColors-BN5t8dA-.js";import"../../chunks/useMenu-CizlB9PU.js";import"../../chunks/uuid-dGvr9vBZ.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";import"../../chunks/Card-C2mSdoXV.js";import"../../chunks/Ripple-Bq9bxg4k.js";import"../../chunks/CardContent-CViecz1a.js";export{b as Option,d as Select};
1
+ import{O as b,S as d}from"../../chunks/Option-CzDngSSk.js";import"react/jsx-runtime";import"react";import"../../chunks/index-CZ41y9Hn.js";import"../../chunks/joinClass-anSpaauN.js";import"../../chunks/Icon-DTU52KQE.js";import"../../chunks/createComponent-BmdhWozT.js";import"../../chunks/useTheme-BYuNiCiH.js";import"../../chunks/generateSupportColors-BN5t8dA-.js";import"../../chunks/useMenu-B49hOh6R.js";import"../../chunks/uuid-dGvr9vBZ.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";import"../../chunks/Card-C2mSdoXV.js";import"../../chunks/Ripple-Bq9bxg4k.js";import"../../chunks/CardContent-CViecz1a.js";export{b as Option,d as Select};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/useTabs-Dcksp_re.cjs");require("react/jsx-runtime");require("react");require("../../chunks/index-DYxwT4uW.cjs");require("../../chunks/joinClass-Jk3EszKD.cjs");require("../../chunks/uuid-omnJ9TjZ.cjs");require("../../chunks/createComponent-Bls5N6x8.cjs");require("../../chunks/useTheme-DsrjDJKC.cjs");require("../../chunks/generateSupportColors-CTMoGhDf.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");require("../../chunks/Slide-D4aLHjYS.cjs");exports.TabButton=e.TabButton;exports.TabContent=e.TabContent;exports.Tabs=e.Tabs_default;exports.useTabs=e.useTabs;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../chunks/useTabs-DXjPVKGl.cjs");require("react/jsx-runtime");require("react");require("../../chunks/index-DYxwT4uW.cjs");require("../../chunks/joinClass-Jk3EszKD.cjs");require("../../chunks/uuid-omnJ9TjZ.cjs");require("../../chunks/createComponent-Bls5N6x8.cjs");require("../../chunks/useTheme-DsrjDJKC.cjs");require("../../chunks/generateSupportColors-CTMoGhDf.cjs");require("../../chunks/useListenerResized-AwpsZLcP.cjs");exports.TabButton=e.TabButton;exports.TabContent=e.TabContent;exports.Tabs=e.Tabs_default;exports.useTabs=e.useTabs;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,2 +1,2 @@
1
- import{T as u,a as f,b as x,u as B}from"../../chunks/useTabs-DG53jo4T.js";import"react/jsx-runtime";import"react";import"../../chunks/index-CZ41y9Hn.js";import"../../chunks/joinClass-anSpaauN.js";import"../../chunks/uuid-dGvr9vBZ.js";import"../../chunks/createComponent-BmdhWozT.js";import"../../chunks/useTheme-BYuNiCiH.js";import"../../chunks/generateSupportColors-BN5t8dA-.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";import"../../chunks/Slide-BxEwoZ70.js";export{u as TabButton,f as TabContent,x as Tabs,B as useTabs};
1
+ import{T as n,a as u,b as f,u as x}from"../../chunks/useTabs-C10MlXVP.js";import"react/jsx-runtime";import"react";import"../../chunks/index-CZ41y9Hn.js";import"../../chunks/joinClass-anSpaauN.js";import"../../chunks/uuid-dGvr9vBZ.js";import"../../chunks/createComponent-BmdhWozT.js";import"../../chunks/useTheme-BYuNiCiH.js";import"../../chunks/generateSupportColors-BN5t8dA-.js";import"../../chunks/useListenerResized-Bnqxrt7k.js";export{n as TabButton,u as TabContent,f as Tabs,x as useTabs};
2
2
  //# sourceMappingURL=index.js.map
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./chunks/useTheme-DsrjDJKC.cjs"),i=require("./chunks/Bounce-ByNbJjX0.cjs"),e=require("./chunks/useForm-BNLOy0E6.cjs"),d=require("./chunks/Fade-DfxUFkY4.cjs"),n=require("./chunks/Option-B1l_zN4-.cjs"),l=require("./chunks/Slide-D4aLHjYS.cjs"),u=require("./chunks/useTabs-Dcksp_re.cjs"),t=require("./chunks/TableHeader-D0wXM5mO.cjs"),q=require("./chunks/Zoom-BOnqwiDY.cjs"),r=require("./chunks/DrawerContent-BkSL16Os.cjs"),c=require("./chunks/useListenerResized-AwpsZLcP.cjs"),a=require("./chunks/useMenu-D9-CcpCS.cjs"),T=require("./chunks/useResize-Dnf6Ktrn.cjs"),m=require("./chunks/Card-Bqgukgip.cjs"),b=require("./chunks/CardContent-DPL-tBOS.cjs"),s=require("./chunks/GridItem-wwo-SHGR.cjs"),C=require("./chunks/MenuButton-Dpbow8YC.cjs"),F=require("./chunks/Typography-Ch-BLqCH.cjs");require("react");require("react/jsx-runtime");require("./chunks/generateSupportColors-CTMoGhDf.cjs");require("./chunks/wait-CgS79FV1.cjs");require("./chunks/index-DYxwT4uW.cjs");require("./chunks/joinClass-Jk3EszKD.cjs");require("./chunks/Icon-BN4Kp4Aq.cjs");require("./chunks/createComponent-Bls5N6x8.cjs");require("./chunks/uuid-omnJ9TjZ.cjs");require("./chunks/Stack-CF3Wyma9.cjs");require("./chunks/ButtonIcon-Ccq88QaY.cjs");require("./chunks/Ripple-Dy4i91j1.cjs");require("./chunks/convertPathToColor-D8eBpd_D.cjs");exports.ThemeProvider=o.ThemeProvider;exports.createTheme=o.createTheme;exports.useTheme=o.useTheme;exports.Bounce=i.Bounce;exports.Control=e.Control;exports.Form=e.Form;exports.useControl=e.useControl;exports.useForm=e.useForm;exports.useFormGroup=e.useFormGroup;exports.Fade=d.Fade;exports.Option=n.Option;exports.Select=n.Select_default;exports.Slide=l.Slide;exports.TabButton=u.TabButton;exports.TabContent=u.TabContent;exports.Tabs=u.Tabs_default;exports.useTabs=u.useTabs;exports.Table=t.Table_default;exports.TableBody=t.TableBody;exports.TableCell=t.TableCell_default;exports.TableHeader=t.TableHeader;exports.Zoom=q.Zoom;exports.Drawer=r.Drawer_default;exports.DrawerContent=r.DrawerContent_default;exports.DrawerFooter=r.DrawerFooter_default;exports.DrawerHeader=r.DrawerHeader_default;exports.useDrawer=r.useDrawer;exports.useListenerResized=c.useListenerResized;exports.Menu=a.Menu;exports.useMenu=a.useMenu;exports.useResize=T.useResize;exports.Card=m.Card;exports.CardContent=b.CardContent;exports.Grid=s.Grid;exports.GridItem=s.GridItem;exports.MenuButton=C.MenuButton_default;exports.variants=F.variants;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./chunks/useTheme-DsrjDJKC.cjs"),i=require("./chunks/Bounce-ByNbJjX0.cjs"),e=require("./chunks/useForm-CD-_L271.cjs"),d=require("./chunks/Fade-DfxUFkY4.cjs"),n=require("./chunks/Option-COyiqmg0.cjs"),l=require("./chunks/Slide-D4aLHjYS.cjs"),u=require("./chunks/useTabs-DXjPVKGl.cjs"),o=require("./chunks/TableHeader-D0wXM5mO.cjs"),q=require("./chunks/Zoom-BOnqwiDY.cjs"),r=require("./chunks/DrawerContent-BkSL16Os.cjs"),c=require("./chunks/useListenerResized-AwpsZLcP.cjs"),a=require("./chunks/useMenu-BfWmrq4L.cjs"),T=require("./chunks/useResize-Dnf6Ktrn.cjs"),m=require("./chunks/Card-Bqgukgip.cjs"),C=require("./chunks/CardContent-DPL-tBOS.cjs"),s=require("./chunks/GridItem-wwo-SHGR.cjs"),b=require("./chunks/MenuButton-Dpbow8YC.cjs"),F=require("./chunks/Typography-Ch-BLqCH.cjs");require("react");require("react/jsx-runtime");require("./chunks/generateSupportColors-CTMoGhDf.cjs");require("./chunks/wait-CgS79FV1.cjs");require("./chunks/index-DYxwT4uW.cjs");require("./chunks/joinClass-Jk3EszKD.cjs");require("./chunks/Icon-BN4Kp4Aq.cjs");require("./chunks/createComponent-Bls5N6x8.cjs");require("./chunks/uuid-omnJ9TjZ.cjs");require("./chunks/Stack-CF3Wyma9.cjs");require("./chunks/ButtonIcon-Ccq88QaY.cjs");require("./chunks/Ripple-Dy4i91j1.cjs");require("./chunks/convertPathToColor-D8eBpd_D.cjs");exports.ThemeProvider=t.ThemeProvider;exports.createTheme=t.createTheme;exports.useTheme=t.useTheme;exports.Bounce=i.Bounce;exports.Control=e.Control;exports.Form=e.Form;exports.FormControl=e.FormControl;exports.FormGroup=e.FormGroup;exports.useControl=e.useControl;exports.useForm=e.useForm;exports.useFormGroup=e.useFormGroup;exports.Fade=d.Fade;exports.Option=n.Option;exports.Select=n.Select_default;exports.Slide=l.Slide;exports.TabButton=u.TabButton;exports.TabContent=u.TabContent;exports.Tabs=u.Tabs_default;exports.useTabs=u.useTabs;exports.Table=o.Table_default;exports.TableBody=o.TableBody;exports.TableCell=o.TableCell_default;exports.TableHeader=o.TableHeader;exports.Zoom=q.Zoom;exports.Drawer=r.Drawer_default;exports.DrawerContent=r.DrawerContent_default;exports.DrawerFooter=r.DrawerFooter_default;exports.DrawerHeader=r.DrawerHeader_default;exports.useDrawer=r.useDrawer;exports.useListenerResized=c.useListenerResized;exports.Menu=a.Menu;exports.useMenu=a.useMenu;exports.useResize=T.useResize;exports.Card=m.Card;exports.CardContent=C.CardContent;exports.Grid=s.Grid;exports.GridItem=s.GridItem;exports.MenuButton=b.MenuButton_default;exports.variants=F.variants;
2
2
  //# sourceMappingURL=index.cjs.map
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import{T as d,c as C,u as l}from"./chunks/useTheme-BYuNiCiH.js";import{B as c}from"./chunks/Bounce-DP0PU3kr.js";import{C as w,F as B,u as M,a as G,b as S}from"./chunks/useForm-iwGfb88g.js";import{F as v}from"./chunks/Fade-CWDTkVB8.js";import{O as H,S as O}from"./chunks/Option-BvxuW39r.js";import{S as Z}from"./chunks/Slide-BxEwoZ70.js";import{T as I,a as L,b as P,u as g}from"./chunks/useTabs-DG53jo4T.js";import{T as k,a as q,b as A,c as E}from"./chunks/TableHeader-CrbbJXyv.js";import{Z as K}from"./chunks/Zoom-DqgU4Wfv.js";import{D as Q,a as U,b as V,c as W,u as X}from"./chunks/DrawerContent-D8NDBDBf.js";import{u as _}from"./chunks/useListenerResized-Bnqxrt7k.js";import{M as rr,u as or}from"./chunks/useMenu-CizlB9PU.js";import{u as ar}from"./chunks/useResize-BUftB918.js";import{C as tr}from"./chunks/Card-C2mSdoXV.js";import{C as pr}from"./chunks/CardContent-CViecz1a.js";import{G as ir,a as fr}from"./chunks/GridItem-CaoPZmBu.js";import{M as nr}from"./chunks/MenuButton-31ZFG3JW.js";import{v as br}from"./chunks/Typography-B_WR62ip.js";import"react";import"react/jsx-runtime";import"./chunks/generateSupportColors-BN5t8dA-.js";import"./chunks/wait-BSgGzoPk.js";import"./chunks/index-CZ41y9Hn.js";import"./chunks/joinClass-anSpaauN.js";import"./chunks/Icon-DTU52KQE.js";import"./chunks/createComponent-BmdhWozT.js";import"./chunks/uuid-dGvr9vBZ.js";import"./chunks/Stack-CHR_pZC4.js";import"./chunks/ButtonIcon-DMetcfYt.js";import"./chunks/Ripple-Bq9bxg4k.js";import"./chunks/convertPathToColor-DtOjH4ZP.js";export{c as Bounce,tr as Card,pr as CardContent,w as Control,Q as Drawer,U as DrawerContent,V as DrawerFooter,W as DrawerHeader,v as Fade,B as Form,ir as Grid,fr as GridItem,rr as Menu,nr as MenuButton,H as Option,O as Select,Z as Slide,I as TabButton,L as TabContent,k as Table,q as TableBody,A as TableCell,E as TableHeader,P as Tabs,d as ThemeProvider,K as Zoom,C as createTheme,M as useControl,X as useDrawer,G as useForm,S as useFormGroup,_ as useListenerResized,or as useMenu,ar as useResize,g as useTabs,l as useTheme,br as variants};
1
+ import{T as d,c as C,u as l}from"./chunks/useTheme-BYuNiCiH.js";import{B as c}from"./chunks/Bounce-DP0PU3kr.js";import{C as w,F as B,a as G,b as M,u as S,c as h,d as v}from"./chunks/useForm-CRRXYOep.js";import{F as H}from"./chunks/Fade-CWDTkVB8.js";import{O as R,S as Z}from"./chunks/Option-CzDngSSk.js";import{S as I}from"./chunks/Slide-BxEwoZ70.js";import{T as P,a as g,b as j,u as k}from"./chunks/useTabs-C10MlXVP.js";import{T as A,a as E,b as J,c as K}from"./chunks/TableHeader-CrbbJXyv.js";import{Z as Q}from"./chunks/Zoom-DqgU4Wfv.js";import{D as V,a as W,b as X,c as Y,u as _}from"./chunks/DrawerContent-D8NDBDBf.js";import{u as rr}from"./chunks/useListenerResized-Bnqxrt7k.js";import{M as er,u as ar}from"./chunks/useMenu-B49hOh6R.js";import{u as tr}from"./chunks/useResize-BUftB918.js";import{C as pr}from"./chunks/Card-C2mSdoXV.js";import{C as ir}from"./chunks/CardContent-CViecz1a.js";import{G as nr,a as xr}from"./chunks/GridItem-CaoPZmBu.js";import{M as br}from"./chunks/MenuButton-31ZFG3JW.js";import{v as Cr}from"./chunks/Typography-B_WR62ip.js";import"react";import"react/jsx-runtime";import"./chunks/generateSupportColors-BN5t8dA-.js";import"./chunks/wait-BSgGzoPk.js";import"./chunks/index-CZ41y9Hn.js";import"./chunks/joinClass-anSpaauN.js";import"./chunks/Icon-DTU52KQE.js";import"./chunks/createComponent-BmdhWozT.js";import"./chunks/uuid-dGvr9vBZ.js";import"./chunks/Stack-CHR_pZC4.js";import"./chunks/ButtonIcon-DMetcfYt.js";import"./chunks/Ripple-Bq9bxg4k.js";import"./chunks/convertPathToColor-DtOjH4ZP.js";export{c as Bounce,pr as Card,ir as CardContent,w as Control,V as Drawer,W as DrawerContent,X as DrawerFooter,Y as DrawerHeader,H as Fade,B as Form,G as FormControl,M as FormGroup,nr as Grid,xr as GridItem,er as Menu,br as MenuButton,R as Option,Z as Select,I as Slide,P as TabButton,g as TabContent,A as Table,E as TableBody,J as TableCell,K as TableHeader,j as Tabs,d as ThemeProvider,Q as Zoom,C as createTheme,S as useControl,_ as useDrawer,h as useForm,v as useFormGroup,rr as useListenerResized,ar as useMenu,tr as useResize,k as useTabs,l as useTheme,Cr as variants};
2
2
  //# sourceMappingURL=index.js.map
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../chunks/useForm-BNLOy0E6.cjs");require("react");require("react/jsx-runtime");exports.Control=r.Control;exports.Form=r.Form;exports.useControl=r.useControl;exports.useForm=r.useForm;exports.useFormGroup=r.useFormGroup;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../chunks/useForm-CD-_L271.cjs");require("react");require("react/jsx-runtime");exports.Control=o.Control;exports.Form=o.Form;exports.FormControl=o.FormControl;exports.FormGroup=o.FormGroup;exports.useControl=o.useControl;exports.useForm=o.useForm;exports.useFormGroup=o.useFormGroup;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1,2 +1,2 @@
1
- import{C as m,F as t,u,a as e,b as p}from"../../chunks/useForm-iwGfb88g.js";import"react";import"react/jsx-runtime";export{m as Control,t as Form,u as useControl,e as useForm,p as useFormGroup};
1
+ import{C as m,F as t,a as u,b as F,u as p,c as e,d as C}from"../../chunks/useForm-CRRXYOep.js";import"react";import"react/jsx-runtime";export{m as Control,t as Form,u as FormControl,F as FormGroup,p as useControl,e as useForm,C as useFormGroup};
2
2
  //# sourceMappingURL=index.js.map
package/dist/style.css CHANGED
@@ -58,8 +58,8 @@
58
58
  /* assets/index-Bs0qH-ot.css */
59
59
  .iziui-avatar{display:flex;position:relative;align-items:center;justify-content:center;flex-shrink:0;font-size:1.25rem;line-height:1;overflow:hidden;-webkit-user-select:none;user-select:none;border:1px solid var(--divider);transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-avatar--rounded{border-radius:var(--radius)}.iziui-avatar--circular{border-radius:50%}.iziui-avatar--clickable{cursor:pointer}.iziui-avatar--primary{color:var(--primary-contrast);background-color:var(--primary)}.iziui-avatar--secondary{color:var(--secondary-contrast);background-color:var(--secondary)}.iziui-avatar--info{color:var(--info-contrast);background-color:var(--info)}.iziui-avatar--error{color:var(--error-contrast);background-color:var(--error)}.iziui-avatar--warning{color:var(--warning-contrast);background-color:var(--warning)}.iziui-avatar--success{color:var(--success-contrast);background-color:var(--success)}.iziui-avatar--grey{color:var(--grey-contrast);background-color:var(--grey)}.iziui-avatar__icon{color:currentColor!important}
60
60
  /*$vite$:1*/
61
- /* assets/Option-BXQlB1HL.css */
62
- .iziui-select{padding:0;width:100%;border:none;border-radius:var(--radius);border:1px solid var(--divider);background-color:var(--background-default);font-size:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.iziui-select:focus-within{outline:2px solid var(--primary)}.iziui-select--disabled{cursor:not-allowed;background:var(--divider);color:var(--text-disabled)}.iziui-select--error{border-color:var(--error)}.iziui-select input{cursor:pointer;background:transparent;height:100%;width:100%;border:none;outline:none;-webkit-user-select:none;user-select:none;padding:10.8px 14.4px;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);font-size:16px}.iziui-select input:-internal-autofill-selected{-webkit-text-fill-color:var(--divider)}.iziui-select input::placeholder{color:var(--text-secondary);opacity:1}.iziui-select input:disabled{cursor:not-allowed;color:var(--text-disabled)}.iziui-select-container{width:100%;position:relative}.iziui-select-label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-select-label--error{color:var(--error)}.iziui-select__icon--left{margin-left:10.8px;margin-right:-5px}.iziui-select__icon--right{margin-right:10.8px}.iziui-select__icon--disabled{background:var(--text-disabled)}.iziui-select__option{font-size:16px;cursor:pointer;padding:.5rem 1rem;border:none;width:100%;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:left;display:flex;align-items:center;justify-content:flex-start;background-color:transparent}.iziui-select__option--selected{background-color:var(--primary-opacity)}.iziui-select__option--disabled{cursor:not-allowed;background-color:var(--divider)!important;color:var(--text-disabled)!important}.iziui-select__option--primary{color:var(--primary)}.iziui-select__option--primary:hover{background-color:var(--primary-opacity)}.iziui-select__option--secondary{color:var(--secondary)}.iziui-select__option--secondary:hover{background-color:var(--secondary-opacity)}.iziui-select__option--info{color:var(--info)}.iziui-select__option--info:hover{background-color:var(--info-opacity)}.iziui-select__option--error{color:var(--error)}.iziui-select__option--error:hover{background-color:var(--error-opacity)}.iziui-select__option--warning{color:var(--warning)}.iziui-select__option--warning:hover{background-color:var(--warning-opacity)}.iziui-select__option--success{color:var(--success)}.iziui-select__option--success:hover{background-color:var(--success-opacity)}.iziui-select__option--grey{color:var(--grey)}.iziui-select__option--grey:hover{background-color:var(--grey-opacity)}.iziui-select__option__icon{margin-right:10px}.iziui-select__helper-text{opacity:0;margin:6px 0 0;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px;transform:translateY(-10px)}.iziui-select__helper-text--visible{opacity:1;transform:translateY(0)}.iziui-select__helper-text--error{color:var(--error)}
61
+ /* assets/Option-1-YIWqjx.css */
62
+ .iziui-select{position:relative;padding:0;width:100%;border:none;border-radius:var(--radius);border:1px solid var(--divider);background-color:var(--background-default);font-size:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.iziui-select:focus-within{outline:2px solid var(--primary)}.iziui-select--disabled{cursor:not-allowed;background:var(--divider);color:var(--text-disabled)}.iziui-select--error{border-color:var(--error)}.iziui-select input{cursor:pointer;background:transparent;height:100%;width:100%;border:none;outline:none;-webkit-user-select:none;user-select:none;padding:10.8px 14.4px;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);font-size:16px}.iziui-select input:-internal-autofill-selected{-webkit-text-fill-color:var(--divider)}.iziui-select input::placeholder{color:var(--text-secondary);opacity:1}.iziui-select input:disabled{cursor:not-allowed;color:var(--text-disabled)}.iziui-select-container{width:100%;position:relative}.iziui-select-label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-select-label--error{color:var(--error)}.iziui-select__icon--left{margin-left:10.8px;margin-right:-5px}.iziui-select__icon--right{margin-right:10.8px}.iziui-select__icon--disabled{background:var(--text-disabled)}.iziui-select__option{font-size:16px;cursor:pointer;padding:.5rem 1rem;border:none;width:100%;transition:all .3s cubic-bezier(.4,0,.2,1);text-align:left;display:flex;align-items:center;justify-content:flex-start;background-color:transparent}.iziui-select__option--selected{background-color:var(--primary-opacity)}.iziui-select__option--disabled{cursor:not-allowed;background-color:var(--divider)!important;color:var(--text-disabled)!important}.iziui-select__option--primary{color:var(--primary)}.iziui-select__option--primary:hover{background-color:var(--primary-opacity)}.iziui-select__option--secondary{color:var(--secondary)}.iziui-select__option--secondary:hover{background-color:var(--secondary-opacity)}.iziui-select__option--info{color:var(--info)}.iziui-select__option--info:hover{background-color:var(--info-opacity)}.iziui-select__option--error{color:var(--error)}.iziui-select__option--error:hover{background-color:var(--error-opacity)}.iziui-select__option--warning{color:var(--warning)}.iziui-select__option--warning:hover{background-color:var(--warning-opacity)}.iziui-select__option--success{color:var(--success)}.iziui-select__option--success:hover{background-color:var(--success-opacity)}.iziui-select__option--grey{color:var(--grey)}.iziui-select__option--grey:hover{background-color:var(--grey-opacity)}.iziui-select__option__icon{margin-right:10px}.iziui-select__helper-text{opacity:0;margin:6px 0 0;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px;transform:translateY(-10px)}.iziui-select__helper-text--visible{opacity:1;transform:translateY(0)}.iziui-select__helper-text--error{color:var(--error)}
63
63
  /*$vite$:1*/
64
64
  /* assets/index-C3yxI1Ai.css */
65
65
  .iziui-color-picker{padding:0;min-width:160px;width:100%;cursor:pointer;overflow:hidden;position:relative;border-radius:var(--radius);border:1px solid var(--divider);background-color:var(--background-default);display:flex;align-items:center;justify-content:flex-start}.iziui-color-picker:focus-within{outline:2px solid var(--primary)}.iziui-color-picker--error{border-color:var(--error)}.iziui-color-picker-container{width:fit-content}.iziui-color-picker__preview{width:72px;height:48px;background-color:var(--background-default);border:none;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--divider)}.iziui-color-picker__preview div{width:20px;height:20px;border-radius:var(--radius);transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-color-picker__label{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:5px}.iziui-color-picker__label--error{color:var(--error)}.iziui-color-picker__value{width:100%;height:100%;padding-left:16px;color:var(--text-secondary);text-transform:uppercase;display:flex;align-items:center;justify-content:flex-start}.iziui-color-picker__value--error{color:var(--error)}.iziui-color-picker__helper-text{opacity:0;margin-top:5px;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:12px}.iziui-color-picker__helper-text--visible{opacity:1}.iziui-color-picker__helper-text--error{color:var(--error)}.iziui-color-picker__color{width:30px;height:30px;position:relative;border-radius:var(--radius);transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;display:flex;justify-content:center;align-items:center;border:none;cursor:pointer}.iziui-color-picker__color:hover{box-shadow:0 0 0 2px var(--primary)}.iziui-color-picker__color__icon{transform:scale(0);transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-color-picker__color__icon--visible{transform:scale(1)}.iziui-color-picker__color input{position:absolute;visibility:hidden}.iziui-color-picker input{height:48px;width:100%;border:none;outline:none;font:inherit;padding-left:16px}
@@ -73,8 +73,8 @@
73
73
  /* assets/index-Rdw3YS4e.css */
74
74
  .iziui-modal{width:600px;box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d;transition:all .3s cubic-bezier(.4,0,.2,1);transform:translateY(50px)}.iziui-modal--show{transform:translateY(0)}.iziui-modal__content{margin-top:16px}.iziui-modal__container{height:100%;outline:0px;display:flex;justify-content:center;align-items:center;padding:0 16px}.iziui-modal__backdrop{position:fixed;z-index:1300;inset:0;background-color:#000000a3;opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-modal__backdrop--show{opacity:1}
75
75
  /*$vite$:1*/
76
- /* assets/useMenu-XCECShlg.css */
77
- .iziui-menu{position:fixed;word-break:break-all;white-space:pre-wrap;display:flex;flex-direction:column;z-index:4}.iziui-menu__overlay{position:fixed;height:100vh;width:100%;top:0;left:0;z-index:3;cursor:auto}.iziui-menu__card{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.iziui-menu__card__content{overflow:auto;padding:8px 0}.iziui-menu--open{opacity:1;transform:translateY(0)}.iziui-menu--close{transform:translateY(-10px);opacity:0}.iziui-menu__item{border:none;padding:8px 16px;position:relative;white-space:nowrap;background-color:transparent;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:flex-start}.iziui-menu__item:hover{background-color:var(--divider)}.iziui-menu__item--primary{color:var(--primary)}.iziui-menu__item--primary:hover{background-color:var(--primary-opacity)}.iziui-menu__item--secondary{color:var(--secondary)}.iziui-menu__item--secondary:hover{background-color:var(--secondary-opacity)}.iziui-menu__item--info{color:var(--info)}.iziui-menu__item--info:hover{background-color:var(--info-opacity)}.iziui-menu__item--error{color:var(--error)}.iziui-menu__item--error:hover{background-color:var(--error-opacity)}.iziui-menu__item--warning{color:var(--warning)}.iziui-menu__item--warning:hover{background-color:var(--warning-opacity)}.iziui-menu__item--success{color:var(--success)}.iziui-menu__item--success:hover{background-color:var(--success-opacity)}.iziui-menu__item--grey{color:var(--grey)}.iziui-menu__item--grey:hover{background-color:var(--grey-opacity)}
76
+ /* assets/useMenu-BB-KFc9b.css */
77
+ .iziui-menu{position:fixed;word-break:break-all;white-space:pre-wrap;display:flex;flex-direction:column;z-index:4}.iziui-menu__overlay{position:fixed;height:100vh;width:100%;top:0;left:0;z-index:3;cursor:auto}.iziui-menu__card{box-shadow:0 1px 3px #0000001f,0 1px 2px #0000003d}.iziui-menu__card__content{overflow:auto;padding:8px 0}.iziui-menu--open{opacity:1;transform:translateY(0)}.iziui-menu--close{opacity:0}.iziui-menu--bottom.iziui-menu--close{transform:translateY(-10px)}.iziui-menu--top.iziui-menu--close{transform:translateY(10px)}.iziui-menu__item{border:none;padding:8px 16px;position:relative;white-space:nowrap;background-color:transparent;color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1);font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:flex-start}.iziui-menu__item:hover{background-color:var(--divider)}.iziui-menu__item--primary{color:var(--primary)}.iziui-menu__item--primary:hover{background-color:var(--primary-opacity)}.iziui-menu__item--secondary{color:var(--secondary)}.iziui-menu__item--secondary:hover{background-color:var(--secondary-opacity)}.iziui-menu__item--info{color:var(--info)}.iziui-menu__item--info:hover{background-color:var(--info-opacity)}.iziui-menu__item--error{color:var(--error)}.iziui-menu__item--error:hover{background-color:var(--error-opacity)}.iziui-menu__item--warning{color:var(--warning)}.iziui-menu__item--warning:hover{background-color:var(--warning-opacity)}.iziui-menu__item--success{color:var(--success)}.iziui-menu__item--success:hover{background-color:var(--success-opacity)}.iziui-menu__item--grey{color:var(--grey)}.iziui-menu__item--grey:hover{background-color:var(--grey-opacity)}
78
78
  /*$vite$:1*/
79
79
  /* assets/TableHeader-BihiZoyL.css */
80
80
  .iziui-table{width:100%;border-radius:var(--radius);overflow:hidden;border-spacing:0px;border-collapse:separate}.iziui-table__header td{font-size:.875rem;text-transform:uppercase;padding:10.8px 14.4px;font-weight:600;color:var(--text-primary);border-right:1px solid var(--divider);border-bottom:1px solid var(--divider);background-color:var(--background-default);transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-table__header td:last-child{border-right:0}.iziui-table__body tr{background-color:var(--background-default);transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-table__body tr:hover{background-color:var(--background-paper)}.iziui-table__body tr td{padding:10.8px 14.4px;font-size:.875rem;border:none;border-right:1px solid var(--divider);border-bottom:1px solid var(--divider);color:var(--text-primary);transition:all .3s cubic-bezier(.4,0,.2,1)}.iziui-table__body tr td:last-child{border-right:none}.iziui-table__body tr:last-child td{border-bottom:none}.iziui-table__cell--center{text-align:center}.iziui-table__cell--right{text-align:right}.iziui-table__cell--left{text-align:left}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iziui/react",
3
- "version": "0.0.96-rc",
3
+ "version": "0.0.98-rc",
4
4
  "main": "./dist/index.cjs",
5
5
  "module": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -1,2 +0,0 @@
1
- "use strict";const t=require("react/jsx-runtime"),u=require("react"),e=require("./index-DYxwT4uW.cjs"),n=require("./joinClass-Jk3EszKD.cjs"),k=require("./Icon-BN4Kp4Aq.cjs"),d=require("./useMenu-D9-CcpCS.cjs"),E=require("./createComponent-Bls5N6x8.cjs");function M({error:o,color:c="grey",label:i,helperText:x,startIcon:a,children:m,disabled:l,onChange:p,...r}){const _=u.Children.toArray(m),j=u.useMemo(()=>_.find(s=>s.props.value===r.value)?.props.children||"",[r.value]),[$,N,C]=d.useMenu(),h=n.joinClass(`${e.prefix}-select-container`),b=n.joinClass(`${e.prefix}-select-label`,o&&`${e.prefix}-select-label--error`),y=n.joinClass(`${e.prefix}-select`,l&&`${e.prefix}-select--disabled`,o&&`${e.prefix}-select--error`,r.className),v=n.joinClass(`${e.prefix}-select__helper-text`,x&&`${e.prefix}-select__helper-text--visible`,o&&`${e.prefix}-select__helper-text--error`),q=s=>u.cloneElement(s,{className:n.joinClass(s.props.className,`${e.prefix}-select__icon--left`),type:"button",style:{color:c},onClick:f=>{f.stopPropagation(),s.props.onClick&&!l&&s.props.onClick(f)}}),g=()=>_.map(s=>u.cloneElement(s,{color:c,className:n.joinClass(s.props.className,s.props.value===r.value&&`${e.prefix}-select__option--selected`),onClick:f=>{!s.props.disabled&&p&&p(f)}}));return t.jsxs("div",{className:h,children:[i&&t.jsxs("label",{className:b,children:[i," ",r.required&&"*"]}),t.jsxs("button",{type:"button",className:y,onClick:C,disabled:l,children:[t.jsx("div",{children:a&&q(a)}),t.jsx("input",{...r,readOnly:!0,type:"text",value:j,disabled:l}),t.jsx(k.Icon,{name:"angle-down",sx:{color:({grey:s})=>s.main},className:`${e.prefix}-select__icon--right`})]}),t.jsx(d.Menu,{autoClose:!0,direction:"center",open:$,anchorEl:N,onClose:C,children:g()}),t.jsx("span",{className:v,children:x})]})}const O=E.createComponent(M);function S({children:o,color:c,startIcon:i,disabled:x,...a}){const m=n.joinClass(`${e.prefix}-select__option`,x&&`${e.prefix}-select__option--disabled`,c&&`${e.prefix}-select__option--${c}`,a.className),l=p=>u.cloneElement(p,{type:"button",className:n.joinClass(p.props.className,`${e.prefix}-select__option__icon`)});return t.jsxs("button",{type:"button",...a,className:m,children:[i&&l(i),o]})}exports.Option=S;exports.Select_default=O;
2
- //# sourceMappingURL=Option-B1l_zN4-.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Option-B1l_zN4-.cjs","sources":["../../src/fields/Select/Select.tsx","../../src/fields/Select/Option.tsx"],"sourcesContent":["import {\n useMemo,\n Children,\n cloneElement,\n type ReactElement,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport Icon from '@/display/Icon';\nimport { Menu, useMenu } from '@/navigation/Menu';\n\nimport type { OptionProps } from './Option';\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Select.scss';\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {\n error?: boolean;\n autoClose?: boolean;\n label?: string;\n helperText?: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n children: React.JSX.Element | React.JSX.Element[];\n}\n\nfunction Select({\n error,\n color = 'grey',\n label,\n helperText,\n startIcon,\n children,\n disabled,\n onChange,\n ...props\n}: SelectProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<OptionProps>[];\n\n const newValue = useMemo(() => {\n return arrayChildren.find((child) =>\n child.props.value === props.value)?.props.children || '';\n }, [props.value]);\n\n const [open, el, toggle] = useMenu();\n\n const containerClss = joinClass(\n `${prefix}-select-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-select-label`,\n error && `${prefix}-select-label--error`,\n );\n\n const clss = joinClass(\n `${prefix}-select`,\n disabled && `${prefix}-select--disabled`,\n error && `${prefix}-select--error`,\n props.className\n );\n\n const helperTextClss = joinClass(\n `${prefix}-select__helper-text`,\n helperText && `${prefix}-select__helper-text--visible`,\n error && `${prefix}-select__helper-text--error`\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-select__icon--left`\n ),\n type: 'button',\n style: { color },\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const renderOption = () => {\n return arrayChildren.map((child) => {\n return cloneElement(child, {\n color,\n className: joinClass(\n child.props.className,\n child.props.value === props.value && `${prefix}-select__option--selected`,\n ),\n onClick: (e) => {\n if (!child.props.disabled && onChange) { onChange(e as any); }\n }\n });\n });\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <button type=\"button\" className={clss} onClick={toggle} disabled={disabled}>\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input {...props} readOnly type=\"text\" value={newValue} disabled={disabled} />\n <Icon\n name=\"angle-down\"\n sx={{ color: ({ grey }) => grey.main }}\n className={`${prefix}-select__icon--right`}\n />\n </button>\n <Menu\n autoClose\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {renderOption()}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Select);\n","import { ButtonHTMLAttributes, cloneElement, ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport type { Colors } from '@iziui/core/theme';\n\nexport interface OptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n value: any;\n children: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n}\nexport default function Option({ children, color, startIcon, disabled, ...props }: OptionProps) {\n const className = joinClass(\n `${prefix}-select__option`,\n disabled && `${prefix}-select__option--disabled`,\n color && `${prefix}-select__option--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n type: 'button',\n className: joinClass(\n icon.props.className,\n `${prefix}-select__option__icon`,\n ),\n });\n };\n\n return (\n <button type=\"button\" {...props} className={className}>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n {children}\n </button>\n );\n};"],"names":["Select","error","color","label","helperText","startIcon","children","disabled","onChange","props","arrayChildren","Children","newValue","useMemo","child","open","el","toggle","useMenu","containerClss","joinClass","prefix","labelClss","clss","helperTextClss","renderIcon","icon","cloneElement","e","renderOption","jsxs","jsx","Icon","grey","Menu","Select_default","createComponent","Option","className"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import{jsxs as _,jsx as p}from"react/jsx-runtime";import{Children as M,useMemo as O,cloneElement as $}from"react";import{p as e}from"./index-CZ41y9Hn.js";import{j as s}from"./joinClass-anSpaauN.js";import{I}from"./Icon-DTU52KQE.js";import{u as S,M as w}from"./useMenu-CizlB9PU.js";import{c as E}from"./createComponent-BmdhWozT.js";function q({error:l,color:o="grey",label:r,helperText:m,startIcon:c,children:d,disabled:a,onChange:i,...n}){const f=M.toArray(d),C=O(()=>f.find(t=>t.props.value===n.value)?.props.children||"",[n.value]),[h,b,N]=S(),y=s(`${e}-select-container`),v=s(`${e}-select-label`,l&&`${e}-select-label--error`),x=s(`${e}-select`,a&&`${e}-select--disabled`,l&&`${e}-select--error`,n.className),g=s(`${e}-select__helper-text`,m&&`${e}-select__helper-text--visible`,l&&`${e}-select__helper-text--error`),k=t=>$(t,{className:s(t.props.className,`${e}-select__icon--left`),type:"button",style:{color:o},onClick:u=>{u.stopPropagation(),t.props.onClick&&!a&&t.props.onClick(u)}}),j=()=>f.map(t=>$(t,{color:o,className:s(t.props.className,t.props.value===n.value&&`${e}-select__option--selected`),onClick:u=>{!t.props.disabled&&i&&i(u)}}));return _("div",{className:y,children:[r&&_("label",{className:v,children:[r," ",n.required&&"*"]}),_("button",{type:"button",className:x,onClick:N,disabled:a,children:[p("div",{children:c&&k(c)}),p("input",{...n,readOnly:!0,type:"text",value:C,disabled:a}),p(I,{name:"angle-down",sx:{color:({grey:t})=>t.main},className:`${e}-select__icon--right`})]}),p(w,{autoClose:!0,direction:"center",open:h,anchorEl:b,onClose:N,children:j()}),p("span",{className:g,children:m})]})}const G=E(q);function H({children:l,color:o,startIcon:r,disabled:m,...c}){const d=s(`${e}-select__option`,m&&`${e}-select__option--disabled`,o&&`${e}-select__option--${o}`,c.className);return _("button",{type:"button",...c,className:d,children:[r&&(i=>$(i,{type:"button",className:s(i.props.className,`${e}-select__option__icon`)}))(r),l]})}export{H as O,G as S};
2
- //# sourceMappingURL=Option-BvxuW39r.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Option-BvxuW39r.js","sources":["../../src/fields/Select/Select.tsx","../../src/fields/Select/Option.tsx"],"sourcesContent":["import {\n useMemo,\n Children,\n cloneElement,\n type ReactElement,\n type InputHTMLAttributes,\n type ButtonHTMLAttributes,\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport type { Colors } from '@iziui/core/theme';\nimport { joinClass } from '@iziui/core/utils/joinClass';\n\nimport Icon from '@/display/Icon';\nimport { Menu, useMenu } from '@/navigation/Menu';\n\nimport type { OptionProps } from './Option';\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Select.scss';\n\nexport interface SelectProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'color'> {\n error?: boolean;\n autoClose?: boolean;\n label?: string;\n helperText?: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n children: React.JSX.Element | React.JSX.Element[];\n}\n\nfunction Select({\n error,\n color = 'grey',\n label,\n helperText,\n startIcon,\n children,\n disabled,\n onChange,\n ...props\n}: SelectProps) {\n const arrayChildren = Children.toArray(children) as ReactElement<OptionProps>[];\n\n const newValue = useMemo(() => {\n return arrayChildren.find((child) =>\n child.props.value === props.value)?.props.children || '';\n }, [props.value]);\n\n const [open, el, toggle] = useMenu();\n\n const containerClss = joinClass(\n `${prefix}-select-container`\n );\n\n const labelClss = joinClass(\n `${prefix}-select-label`,\n error && `${prefix}-select-label--error`,\n );\n\n const clss = joinClass(\n `${prefix}-select`,\n disabled && `${prefix}-select--disabled`,\n error && `${prefix}-select--error`,\n props.className\n );\n\n const helperTextClss = joinClass(\n `${prefix}-select__helper-text`,\n helperText && `${prefix}-select__helper-text--visible`,\n error && `${prefix}-select__helper-text--error`\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n className: joinClass(\n icon.props.className,\n `${prefix}-select__icon--left`\n ),\n type: 'button',\n style: { color },\n onClick: (e) => {\n e.stopPropagation();\n if (icon.props.onClick && !disabled) { icon.props.onClick(e); };\n }\n });\n };\n\n const renderOption = () => {\n return arrayChildren.map((child) => {\n return cloneElement(child, {\n color,\n className: joinClass(\n child.props.className,\n child.props.value === props.value && `${prefix}-select__option--selected`,\n ),\n onClick: (e) => {\n if (!child.props.disabled && onChange) { onChange(e as any); }\n }\n });\n });\n };\n\n return (\n <div className={containerClss}>\n {label && <label className={labelClss}>{label} {props.required && '*'}</label>}\n <button type=\"button\" className={clss} onClick={toggle} disabled={disabled}>\n <div>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n </div>\n <input {...props} readOnly type=\"text\" value={newValue} disabled={disabled} />\n <Icon\n name=\"angle-down\"\n sx={{ color: ({ grey }) => grey.main }}\n className={`${prefix}-select__icon--right`}\n />\n </button>\n <Menu\n autoClose\n direction=\"center\"\n open={open}\n anchorEl={el}\n onClose={toggle}\n >\n {renderOption()}\n </Menu>\n <span className={helperTextClss}>{helperText}</span>\n </div>\n );\n}\n\nexport default createComponent(Select);\n","import { ButtonHTMLAttributes, cloneElement, ReactElement } from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\nimport type { Colors } from '@iziui/core/theme';\n\nexport interface OptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n value: any;\n children: string;\n color?: Colors;\n startIcon?: React.JSX.Element | boolean;\n}\nexport default function Option({ children, color, startIcon, disabled, ...props }: OptionProps) {\n const className = joinClass(\n `${prefix}-select__option`,\n disabled && `${prefix}-select__option--disabled`,\n color && `${prefix}-select__option--${color}`,\n props.className\n );\n\n const renderIcon = (icon: ReactElement<ButtonHTMLAttributes<any>>) => {\n return cloneElement(icon, {\n type: 'button',\n className: joinClass(\n icon.props.className,\n `${prefix}-select__option__icon`,\n ),\n });\n };\n\n return (\n <button type=\"button\" {...props} className={className}>\n {startIcon && renderIcon(startIcon as React.JSX.Element)}\n {children}\n </button>\n );\n};"],"names":["Select","error","color","label","helperText","startIcon","children","disabled","onChange","props","arrayChildren","Children","newValue","useMemo","child","open","el","toggle","useMenu","containerClss","joinClass","prefix","labelClss","clss","helperTextClss","renderIcon","icon","cloneElement","e","renderOption","jsxs","jsx","Icon","grey","Menu","Select_default","createComponent","Option","className"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- "use strict";const l=require("react"),h=require("react/jsx-runtime"),f=l.createContext(null);function g({formGroup:s,debug:t=!1,children:e,...r}){const n=u=>{u.preventDefault(),s.submit()};return h.jsxs(f,{value:s,children:[h.jsx("form",{...r,style:{width:"100%",...r.style},onSubmit:n,noValidate:!0,children:e}),t&&h.jsx("pre",{style:{width:"100%",maxHeight:350,padding:15,borderRadius:4,overflow:"auto",color:"#333",background:"#e5e5e5",boxShadow:"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)"},children:JSON.stringify(s,null,2)})]})}function v(){const s=l.useContext(f);if(!s)throw new Error("useFormGroup must be used inside <FormProvider> (or <Form />).");return s}function y(s){const t=v();return{control:t.controls[s],update:n=>{t.setValues(u=>(u[s]=n,u))}}}function b({controlName:s,field:t,action:e="input"}){const{control:r,update:n}=y(s);return(i=>{const a=o=>["radio","checkbox"].includes(o.type)?o.target.checked:o.target.value;return l.cloneElement(i,{onBlur:o=>{e==="blur"&&n(a(o)),i.props.onBlur&&i.props.onBlur(o)},onInput:o=>{e==="input"&&n(a(o)),i.props.onInput&&i.props.onInput(o)},onChange:o=>{e==="change"&&n(a(o)),i.props.onChange&&i.props.onChange(o)}})})(t(r))}class c{constructor(t,e,r){this.controls=t,this.handle=e,this.validator=r}controls;handle;validator;_valid=!1;_hydrate;get hydrate(){return this._hydrate}set hydrate(t){this._hydrate=t}get isValid(){return this._valid}set isValid(t){this._valid=t}get errors(){return Object.values(this.controls).filter(t=>t.error)}get values(){const t={};return this.eachControl((e,r)=>({[r]:e.value})).forEach(e=>{for(const r in e)t[r]=e[r]}),t}setValues(t){const e=typeof t=="function"?t(this.values):t;for(const r of Object.keys(e))this.controls[r].value=e[r];this.validate(),this.hydrate(this),this.handle.change&&this.handle.change(this)}eachControl(t){return Object.keys(this.controls).map(e=>t(this.controls[e],e))}submit(){this.handle.submit&&(this.eachControl(t=>{t.dirty=!0}),this.validate(),this.hydrate(this),this.handle.submit(this))}reset(){this.eachControl(t=>t.reset()),this.hydrate(this)}validate(){Object.entries(this.controls).map(([t,e])=>{let r=e.validate();this.validator&&this.validator[t]&&(r=this.validator[t](this)||""),e.error=r}),this.isValid=!this.errors.length,this.hydrate(this)}}class C{_value;defaultValue;validators=[];type;error="";dirty=!1;constructor({defaultValue:t,type:e="text",validators:r}){this.type=e,this._value=t,this.defaultValue=t,r&&(this.validators=r)}get value(){return this._value}set value(t){this.dirty=!0,this._value=t,this.validate()}get isInvalid(){return!!(this.dirty&&this.error)}reset(){this.value=this.defaultValue,this.dirty=!1}validate(){const t=this.validators.map(e=>e(this)).filter(Boolean);return this.error=t[0]||"",this.error}}function p(s){return Object.entries(s).reduce((t,e)=>{const r=e[0],n=e[1];return t[r]=new C(n),t},{})}function x({form:s,handle:t,validator:e},r){const[n,u]=l.useState(new c(p(s),t,e));l.useEffect(()=>{u(new c(p(s),t,e))},[...r]);const i=a=>{u(o=>{const m=a.controls,d=new c(m,t,e);return d.hydrate=o.hydrate,d})};return n.hydrate=i,n}exports.Control=b;exports.Form=g;exports.useControl=y;exports.useForm=x;exports.useFormGroup=v;
2
- //# sourceMappingURL=useForm-BNLOy0E6.cjs.map
@@ -1,2 +0,0 @@
1
- import{jsxs as B,Fragment as E,jsx as m}from"react/jsx-runtime";import{forwardRef as L,useState as g,Children as P,useMemo as W,useEffect as x,cloneElement as F}from"react";import{p as r}from"./index-CZ41y9Hn.js";import{j as G}from"./joinClass-anSpaauN.js";import{u as H}from"./uuid-dGvr9vBZ.js";import{u as S}from"./useListenerResized-Bnqxrt7k.js";import{C as U}from"./Card-C2mSdoXV.js";import{C as q}from"./CardContent-CViecz1a.js";import{c as J}from"./createComponent-BmdhWozT.js";class K{delay(t,n=500){if(!n){t();return}clearTimeout(this.timeout),this.timeout=setTimeout(()=>{t()},n)}}const Q=new K,V=L(function({open:t,width:n,children:f,anchorEl:o,direction:c="left",maxHeight:s=150,autoClose:N,onClose:M,...u},k){const[y,v]=g(),[d,a]=g({state:"invisible",animation:"close",width:"auto"}),w=16,T=150,A=P.toArray(f),b=W(()=>H(),[]),I=G(`${r}-menu`,`${r}-menu--${d?.animation}`,u.className);S(()=>_(),[o]),x(()=>{_()},[o]),x(()=>{t?j():h()},[t]);const _=()=>{o&&setTimeout(()=>{let e={};const{offsetWidth:i,offsetHeight:p,offsetLeft:$,offsetTop:D}=o;a(z=>({...z,width:i}));const C=D+p+w/2,R=document.getElementById(b);c==="center"&&(e={top:C,right:i}),c==="left"&&(e={top:C,left:$}),c==="right"&&(e={top:C,left:$-(R.offsetWidth-i)}),v(e)},0)},j=()=>{a(e=>({...e,state:"visible"})),setTimeout(()=>{a(e=>({...e,animation:"open"}))},10)},h=()=>{a(e=>({...e,animation:"close"})),setTimeout(()=>{a(e=>({...e,state:"invisible"})),M()},T)},O=()=>A.map((e,i)=>F(e,{tabIndex:i+1,key:`button-${i}`,onClick:p=>{Q.delay(()=>{N&&h(),e.props.onClick&&e.props.onClick(p)},0)}}));return B(E,{children:[m("div",{id:b,ref:k,...u,style:{width:n||d.width,top:y?.top,left:y?.left,display:d?.state==="visible"?"block":"none",transition:`all ${T}ms ease-in`,zIndex:50,...u.style},className:I,children:t&&m(U,{className:`${r}-menu__card`,children:m(q,{className:`${r}-menu__card__content`,sx:{py:1},style:{display:"flex",flexDirection:"column",maxHeight:s},children:O()})})}),t&&m("div",{className:`${r}-menu__overlay`,onClick:h})]})}),ae=J(V);function re(){const[l,t]=g(null),n=!!l,f=s=>{t(s?s.currentTarget:null)},o=()=>{t(null)};return[n,l,s=>{if(n){o();return}f(s)}]}export{ae as M,re as u};
2
- //# sourceMappingURL=useMenu-CizlB9PU.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useMenu-CizlB9PU.js","sources":["../../../../toolkit/src/debounce/debounce.ts","../../src/navigation/Menu/Menu.tsx","../../src/navigation/Menu/useMenu.ts"],"sourcesContent":["class Debounce {\n private timeout: NodeJS.Timeout | undefined;\n public delay(func: (a?: any) => void, milliseconds = 500) {\n if (!milliseconds) {\n func();\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => { func(); }, milliseconds);\n }\n}\n\nexport const debounce = new Debounce();\n","import {\n useMemo,\n useState,\n useEffect,\n Children,\n forwardRef,\n type ReactElement,\n type CSSProperties,\n type HTMLAttributes,\n cloneElement\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\n\nimport { uuid } from '@iziui/toolkit/uuid';\nimport { debounce } from '@iziui/toolkit/debounce';\n\nimport useListenerResized from '@/hooks/useListenerResized';\nimport { Card, CardContent } from '@/display/Card';\n\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Menu.scss';\n\ntype Direction = 'left' | 'right' | 'center';\ntype AnimationClass = 'open' | 'close';\ntype State = 'visible' | 'invisible';\ntype Coordinates = { top?: number; right?: number; bottom?: number; left?: number; };\ntype Config = { animation: AnimationClass, state: State; width: CSSProperties['width'] };\n\nexport interface MenuProps extends HTMLAttributes<HTMLDivElement> {\n open: boolean;\n autoClose?: boolean;\n maxHeight?: CSSProperties['maxHeight'];\n direction?: Direction;\n anchorEl: HTMLElement | null;\n width?: CSSProperties['width'];\n children: React.JSX.Element | React.JSX.Element[];\n onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({\n open,\n width,\n children,\n anchorEl,\n direction = 'left',\n maxHeight = 150,\n autoClose,\n onClose,\n ...props\n}: MenuProps, ref) {\n const [coordinate, setCoordinate] = useState<Coordinates>();\n const [config, setConfig] = useState<Config>({ state: 'invisible', animation: 'close', width: 'auto' });\n\n const GAP = 16;\n const ANIMATION_DURATION = 150;\n\n const arrayChildren = Children.toArray(children) as ReactElement<any>[];\n\n const id = useMemo(() => uuid(), []);\n\n const classes = joinClass(\n `${prefix}-menu`,\n `${prefix}-menu--${config?.animation}`,\n props.className\n );\n\n useListenerResized(() => changePosition(), [anchorEl]);\n\n useEffect(() => { changePosition(); }, [anchorEl]);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n useEffect(() => { open ? handleOpen() : handleClose(); }, [open]);\n\n const changePosition = () => {\n if (!anchorEl) { return; }\n\n setTimeout(() => {\n let coordinates: Coordinates = {};\n\n const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = anchorEl;\n\n setConfig(prev => ({ ...prev, width: offsetWidth }));\n\n const top = offsetTop + offsetHeight + (GAP / 2);\n\n const el = document.getElementById(id) as HTMLElement;\n\n if (direction === 'center') { coordinates = { top, right: offsetWidth }; }\n\n if (direction === 'left') { coordinates = { top, left: offsetLeft }; }\n\n if (direction === 'right') { coordinates = { top, left: offsetLeft - (el.offsetWidth - offsetWidth) }; }\n\n setCoordinate(coordinates);\n }, 0);\n };\n\n const handleOpen = () => {\n setConfig(prev => ({ ...prev, state: 'visible' }));\n\n setTimeout(() => { setConfig(prev => ({ ...prev, animation: 'open' })); }, 10);\n };\n\n const handleClose = () => {\n setConfig(prev => ({ ...prev, animation: 'close' }));\n\n setTimeout(() => {\n setConfig(prev => ({ ...prev, state: 'invisible' }));\n onClose();\n }, ANIMATION_DURATION);\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n return cloneElement(child, {\n 'tabIndex': index + 1,\n key: `button-${index}`,\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n debounce.delay(() => {\n\n if (autoClose) { handleClose(); }\n\n if (child.props.onClick) { child.props.onClick(e); }\n }, 0);\n },\n });\n });\n };\n\n return (\n <>\n <div\n id={id}\n ref={ref}\n {...props}\n style={{\n width: width || config.width,\n top: coordinate?.top,\n left: coordinate?.left,\n display: config?.state === 'visible' ? 'block' : 'none',\n transition: `all ${ANIMATION_DURATION}ms ease-in`,\n zIndex: 50,\n ...props.style\n }}\n className={classes}\n >\n {\n open && (\n <Card className={`${prefix}-menu__card`}>\n <CardContent\n className={`${prefix}-menu__card__content`}\n sx={{ py: 1 }}\n style={{\n display: 'flex',\n flexDirection: 'column',\n maxHeight\n }}\n >\n {renderChildren()}\n </CardContent>\n </Card>\n )\n }\n </div>\n {open && <div className={`${prefix}-menu__overlay`} onClick={handleClose} />}\n </>\n );\n});\n\nexport default createComponent(Menu);\n","import { useState } from 'react';\n\ntype UseMenu = [\n boolean,\n HTMLElement | null,\n (event?: React.MouseEvent<HTMLButtonElement>) => void,\n];\n\nexport default function useMenu(): UseMenu {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n const open = Boolean(anchorEl);\n\n const handleOpen = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n setAnchorEl(event ? event.currentTarget : null);\n };\n\n const handleClose = () => { setAnchorEl(null); };\n\n const handleToggle = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (open) {\n handleClose();\n return;\n }\n\n handleOpen(event);\n };\n\n return [open, anchorEl, handleToggle];\n}\n"],"names":["Debounce","func","milliseconds","debounce","Menu","forwardRef","open","width","children","anchorEl","direction","maxHeight","autoClose","onClose","props","ref","coordinate","setCoordinate","useState","config","setConfig","GAP","ANIMATION_DURATION","arrayChildren","Children","id","useMemo","uuid","classes","joinClass","prefix","useListenerResized","changePosition","useEffect","handleOpen","handleClose","coordinates","offsetWidth","offsetHeight","offsetLeft","offsetTop","prev","top","el","renderChildren","child","index","cloneElement","e","jsxs","Fragment","jsx","Card","CardContent","Menu$1","createComponent","useMenu","setAnchorEl","event"],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- "use strict";const c=require("react/jsx-runtime"),n=require("react"),l=require("./index-DYxwT4uW.cjs"),z=require("./joinClass-Jk3EszKD.cjs"),D=require("./uuid-omnJ9TjZ.cjs"),E=require("./useListenerResized-AwpsZLcP.cjs"),L=require("./Card-Bqgukgip.cjs"),S=require("./CardContent-DPL-tBOS.cjs"),B=require("./createComponent-Bls5N6x8.cjs");class P{delay(t,s=500){if(!s){t();return}clearTimeout(this.timeout),this.timeout=setTimeout(()=>{t()},s)}}const W=new P,F=n.forwardRef(function({open:t,width:s,children:f,anchorEl:o,direction:d="left",maxHeight:i=150,autoClose:_,onClose:$,...m},j){const[g,M]=n.useState(),[h,a]=n.useState({state:"invisible",animation:"close",width:"auto"}),N=16,y=150,k=n.Children.toArray(f),T=n.useMemo(()=>D.uuid(),[]),v=z.joinClass(`${l.prefix}-menu`,`${l.prefix}-menu--${h?.animation}`,m.className);E.useListenerResized(()=>b(),[o]),n.useEffect(()=>{b()},[o]),n.useEffect(()=>{t?w():C()},[t]);const b=()=>{o&&setTimeout(()=>{let e={};const{offsetWidth:r,offsetHeight:p,offsetLeft:q,offsetTop:I}=o;a(O=>({...O,width:r}));const x=I+p+N/2,R=document.getElementById(T);d==="center"&&(e={top:x,right:r}),d==="left"&&(e={top:x,left:q}),d==="right"&&(e={top:x,left:q-(R.offsetWidth-r)}),M(e)},0)},w=()=>{a(e=>({...e,state:"visible"})),setTimeout(()=>{a(e=>({...e,animation:"open"}))},10)},C=()=>{a(e=>({...e,animation:"close"})),setTimeout(()=>{a(e=>({...e,state:"invisible"})),$()},y)},A=()=>k.map((e,r)=>n.cloneElement(e,{tabIndex:r+1,key:`button-${r}`,onClick:p=>{W.delay(()=>{_&&C(),e.props.onClick&&e.props.onClick(p)},0)}}));return c.jsxs(c.Fragment,{children:[c.jsx("div",{id:T,ref:j,...m,style:{width:s||h.width,top:g?.top,left:g?.left,display:h?.state==="visible"?"block":"none",transition:`all ${y}ms ease-in`,zIndex:50,...m.style},className:v,children:t&&c.jsx(L.Card,{className:`${l.prefix}-menu__card`,children:c.jsx(S.CardContent,{className:`${l.prefix}-menu__card__content`,sx:{py:1},style:{display:"flex",flexDirection:"column",maxHeight:i},children:A()})})}),t&&c.jsx("div",{className:`${l.prefix}-menu__overlay`,onClick:C})]})}),G=B.createComponent(F);function H(){const[u,t]=n.useState(null),s=!!u,f=i=>{t(i?i.currentTarget:null)},o=()=>{t(null)};return[s,u,i=>{if(s){o();return}f(i)}]}exports.Menu=G;exports.useMenu=H;
2
- //# sourceMappingURL=useMenu-D9-CcpCS.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useMenu-D9-CcpCS.cjs","sources":["../../../../toolkit/src/debounce/debounce.ts","../../src/navigation/Menu/Menu.tsx","../../src/navigation/Menu/useMenu.ts"],"sourcesContent":["class Debounce {\n private timeout: NodeJS.Timeout | undefined;\n public delay(func: (a?: any) => void, milliseconds = 500) {\n if (!milliseconds) {\n func();\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = setTimeout(() => { func(); }, milliseconds);\n }\n}\n\nexport const debounce = new Debounce();\n","import {\n useMemo,\n useState,\n useEffect,\n Children,\n forwardRef,\n type ReactElement,\n type CSSProperties,\n type HTMLAttributes,\n cloneElement\n} from 'react';\n\nimport { prefix } from '@iziui/tokens/web/js';\n\nimport { joinClass } from '@iziui/core/utils';\n\nimport { uuid } from '@iziui/toolkit/uuid';\nimport { debounce } from '@iziui/toolkit/debounce';\n\nimport useListenerResized from '@/hooks/useListenerResized';\nimport { Card, CardContent } from '@/display/Card';\n\nimport createComponent from '../../core/createComponent';\n\nimport '@iziui/styles/components/Menu.scss';\n\ntype Direction = 'left' | 'right' | 'center';\ntype AnimationClass = 'open' | 'close';\ntype State = 'visible' | 'invisible';\ntype Coordinates = { top?: number; right?: number; bottom?: number; left?: number; };\ntype Config = { animation: AnimationClass, state: State; width: CSSProperties['width'] };\n\nexport interface MenuProps extends HTMLAttributes<HTMLDivElement> {\n open: boolean;\n autoClose?: boolean;\n maxHeight?: CSSProperties['maxHeight'];\n direction?: Direction;\n anchorEl: HTMLElement | null;\n width?: CSSProperties['width'];\n children: React.JSX.Element | React.JSX.Element[];\n onClose: (e?: React.MouseEvent<HTMLButtonElement>) => void;\n}\n\nconst Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu({\n open,\n width,\n children,\n anchorEl,\n direction = 'left',\n maxHeight = 150,\n autoClose,\n onClose,\n ...props\n}: MenuProps, ref) {\n const [coordinate, setCoordinate] = useState<Coordinates>();\n const [config, setConfig] = useState<Config>({ state: 'invisible', animation: 'close', width: 'auto' });\n\n const GAP = 16;\n const ANIMATION_DURATION = 150;\n\n const arrayChildren = Children.toArray(children) as ReactElement<any>[];\n\n const id = useMemo(() => uuid(), []);\n\n const classes = joinClass(\n `${prefix}-menu`,\n `${prefix}-menu--${config?.animation}`,\n props.className\n );\n\n useListenerResized(() => changePosition(), [anchorEl]);\n\n useEffect(() => { changePosition(); }, [anchorEl]);\n\n // eslint-disable-next-line @typescript-eslint/no-unused-expressions\n useEffect(() => { open ? handleOpen() : handleClose(); }, [open]);\n\n const changePosition = () => {\n if (!anchorEl) { return; }\n\n setTimeout(() => {\n let coordinates: Coordinates = {};\n\n const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = anchorEl;\n\n setConfig(prev => ({ ...prev, width: offsetWidth }));\n\n const top = offsetTop + offsetHeight + (GAP / 2);\n\n const el = document.getElementById(id) as HTMLElement;\n\n if (direction === 'center') { coordinates = { top, right: offsetWidth }; }\n\n if (direction === 'left') { coordinates = { top, left: offsetLeft }; }\n\n if (direction === 'right') { coordinates = { top, left: offsetLeft - (el.offsetWidth - offsetWidth) }; }\n\n setCoordinate(coordinates);\n }, 0);\n };\n\n const handleOpen = () => {\n setConfig(prev => ({ ...prev, state: 'visible' }));\n\n setTimeout(() => { setConfig(prev => ({ ...prev, animation: 'open' })); }, 10);\n };\n\n const handleClose = () => {\n setConfig(prev => ({ ...prev, animation: 'close' }));\n\n setTimeout(() => {\n setConfig(prev => ({ ...prev, state: 'invisible' }));\n onClose();\n }, ANIMATION_DURATION);\n };\n\n const renderChildren = () => {\n return arrayChildren.map((child, index) => {\n return cloneElement(child, {\n 'tabIndex': index + 1,\n key: `button-${index}`,\n onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n debounce.delay(() => {\n\n if (autoClose) { handleClose(); }\n\n if (child.props.onClick) { child.props.onClick(e); }\n }, 0);\n },\n });\n });\n };\n\n return (\n <>\n <div\n id={id}\n ref={ref}\n {...props}\n style={{\n width: width || config.width,\n top: coordinate?.top,\n left: coordinate?.left,\n display: config?.state === 'visible' ? 'block' : 'none',\n transition: `all ${ANIMATION_DURATION}ms ease-in`,\n zIndex: 50,\n ...props.style\n }}\n className={classes}\n >\n {\n open && (\n <Card className={`${prefix}-menu__card`}>\n <CardContent\n className={`${prefix}-menu__card__content`}\n sx={{ py: 1 }}\n style={{\n display: 'flex',\n flexDirection: 'column',\n maxHeight\n }}\n >\n {renderChildren()}\n </CardContent>\n </Card>\n )\n }\n </div>\n {open && <div className={`${prefix}-menu__overlay`} onClick={handleClose} />}\n </>\n );\n});\n\nexport default createComponent(Menu);\n","import { useState } from 'react';\n\ntype UseMenu = [\n boolean,\n HTMLElement | null,\n (event?: React.MouseEvent<HTMLButtonElement>) => void,\n];\n\nexport default function useMenu(): UseMenu {\n const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n const open = Boolean(anchorEl);\n\n const handleOpen = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n setAnchorEl(event ? event.currentTarget : null);\n };\n\n const handleClose = () => { setAnchorEl(null); };\n\n const handleToggle = (event?: React.MouseEvent<HTMLElement, MouseEvent>) => {\n if (open) {\n handleClose();\n return;\n }\n\n handleOpen(event);\n };\n\n return [open, anchorEl, handleToggle];\n}\n"],"names":["Debounce","func","milliseconds","debounce","Menu","forwardRef","open","width","children","anchorEl","direction","maxHeight","autoClose","onClose","props","ref","coordinate","setCoordinate","useState","config","setConfig","GAP","ANIMATION_DURATION","arrayChildren","Children","id","useMemo","uuid","classes","joinClass","prefix","useListenerResized","changePosition","useEffect","handleOpen","handleClose","coordinates","offsetWidth","offsetHeight","offsetLeft","offsetTop","prev","top","el","renderChildren","child","index","cloneElement","e","jsxs","Fragment","jsx","Card","CardContent","createComponent","useMenu","setAnchorEl","event"],"mappings":"kVAAA,MAAMA,CAAS,CAEN,MAAMC,EAAyBC,EAAe,IAAK,CACxD,GAAI,CAACA,EAAc,CACjBD,EAAA,EACA,MACF,CAEA,aAAa,KAAK,OAAO,EACzB,KAAK,QAAU,WAAW,IAAM,CAAEA,EAAA,CAAQ,EAAGC,CAAY,CAC3D,CACF,CAEO,MAAMC,EAAW,IAAIH,EC8BtBI,EAAOC,EAAAA,WAAsC,SAAc,CAC/D,KAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EAAY,OACZ,UAAAC,EAAY,IACZ,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAAcC,EAAK,CACjB,KAAM,CAACC,EAAYC,CAAa,EAAIC,WAAA,EAC9B,CAACC,EAAQC,CAAS,EAAIF,EAAAA,SAAiB,CAAE,MAAO,YAAa,UAAW,QAAS,MAAO,MAAA,CAAQ,EAEhGG,EAAM,GACNC,EAAqB,IAErBC,EAAgBC,EAAAA,SAAS,QAAQhB,CAAQ,EAEzCiB,EAAKC,EAAAA,QAAQ,IAAMC,EAAAA,KAAA,EAAQ,CAAA,CAAE,EAE7BC,EAAUC,EAAAA,UACd,GAAGC,EAAAA,MAAM,QACT,GAAGA,EAAAA,MAAM,UAAUX,GAAQ,SAAS,GACpCL,EAAM,SAAA,EAGRiB,EAAAA,mBAAmB,IAAMC,IAAkB,CAACvB,CAAQ,CAAC,EAErDwB,EAAAA,UAAU,IAAM,CAAED,EAAA,CAAkB,EAAG,CAACvB,CAAQ,CAAC,EAGjDwB,EAAAA,UAAU,IAAM,CAAE3B,EAAO4B,EAAA,EAAeC,EAAA,CAAe,EAAG,CAAC7B,CAAI,CAAC,EAEhE,MAAM0B,EAAiB,IAAM,CACtBvB,GAEL,WAAW,IAAM,CACf,IAAI2B,EAA2B,CAAA,EAE/B,KAAM,CAAE,YAAAC,EAAa,aAAAC,EAAc,WAAAC,EAAY,UAAAC,GAAc/B,EAE7DW,MAAmB,CAAE,GAAGqB,EAAM,MAAOJ,GAAc,EAEnD,MAAMK,EAAMF,EAAYF,EAAgBjB,EAAM,EAExCsB,EAAK,SAAS,eAAelB,CAAE,EAEjCf,IAAc,WAAY0B,EAAc,CAAE,IAAAM,EAAK,MAAOL,CAAA,GAEtD3B,IAAc,SAAU0B,EAAc,CAAE,IAAAM,EAAK,KAAMH,CAAA,GAEnD7B,IAAc,UAAW0B,EAAc,CAAE,IAAAM,EAAK,KAAMH,GAAcI,EAAG,YAAcN,EAAA,GAEvFpB,EAAcmB,CAAW,CAC3B,EAAG,CAAC,CACN,EAEMF,EAAa,IAAM,CACvBd,MAAmB,CAAE,GAAGqB,EAAM,MAAO,WAAY,EAEjD,WAAW,IAAM,CAAErB,MAAmB,CAAE,GAAGqB,EAAM,UAAW,QAAS,CAAG,EAAG,EAAE,CAC/E,EAEMN,EAAc,IAAM,CACxBf,MAAmB,CAAE,GAAGqB,EAAM,UAAW,SAAU,EAEnD,WAAW,IAAM,CACfrB,MAAmB,CAAE,GAAGqB,EAAM,MAAO,aAAc,EACnD5B,EAAA,CACF,EAAGS,CAAkB,CACvB,EAEMsB,EAAiB,IACdrB,EAAc,IAAI,CAACsB,EAAOC,IACxBC,EAAAA,aAAaF,EAAO,CACzB,SAAYC,EAAQ,EACpB,IAAK,UAAUA,CAAK,GACpB,QAAUE,GAA2C,CACnD7C,EAAS,MAAM,IAAM,CAEfS,GAAauB,EAAA,EAEbU,EAAM,MAAM,SAAWA,EAAM,MAAM,QAAQG,CAAC,CAClD,EAAG,CAAC,CACN,CAAA,CACD,CACF,EAGH,OACEC,EAAAA,KAAAC,WAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,MAAA,CACC,GAAA1B,EACA,IAAAV,EACC,GAAGD,EACJ,MAAO,CACL,MAAOP,GAASY,EAAO,MACvB,IAAKH,GAAY,IACjB,KAAMA,GAAY,KAClB,QAASG,GAAQ,QAAU,UAAY,QAAU,OACjD,WAAY,OAAOG,CAAkB,aACrC,OAAQ,GACR,GAAGR,EAAM,KAAA,EAEX,UAAWc,EAGT,YACEuB,MAACC,EAAAA,KAAA,CAAK,UAAW,GAAGtB,QAAM,cACxB,SAAAqB,EAAAA,IAACE,EAAAA,YAAA,CACC,UAAW,GAAGvB,EAAAA,MAAM,uBACpB,GAAI,CAAE,GAAI,CAAA,EACV,MAAO,CACL,QAAS,OACT,cAAe,SACf,UAAAnB,CAAA,EAGD,SAAAiC,EAAA,CAAe,CAAA,CAClB,CACF,CAAA,CAAA,EAILtC,SAAS,MAAA,CAAI,UAAW,GAAGwB,EAAAA,MAAM,iBAAkB,QAASK,CAAA,CAAa,CAAA,EAC5E,CAEJ,CAAC,EAED/B,EAAekD,EAAAA,gBAAgBlD,CAAI,ECrKnC,SAAwBmD,GAAmB,CACzC,KAAM,CAAC9C,EAAU+C,CAAW,EAAItC,EAAAA,SAA6B,IAAI,EAE3DZ,EAAO,EAAQG,EAEfyB,EAAcuB,GAAsD,CACxED,EAAYC,EAAQA,EAAM,cAAgB,IAAI,CAChD,EAEMtB,EAAc,IAAM,CAAEqB,EAAY,IAAI,CAAG,EAW/C,MAAO,CAAClD,EAAMG,EATQgD,GAAsD,CAC1E,GAAInD,EAAM,CACR6B,EAAA,EACA,MACF,CAEAD,EAAWuB,CAAK,CAClB,CAEoC,CACtC"}
@@ -1,2 +0,0 @@
1
- import{jsxs as C,jsx as f}from"react/jsx-runtime";import{Children as j,useState as k,useRef as x,useMemo as B,useEffect as b,cloneElement as y}from"react";import{p as c}from"./index-CZ41y9Hn.js";import{j as h}from"./joinClass-anSpaauN.js";import{u as R}from"./uuid-dGvr9vBZ.js";import{c as S}from"./createComponent-BmdhWozT.js";import{u as L}from"./useListenerResized-Bnqxrt7k.js";import{S as g}from"./Slide-BxEwoZ70.js";function A(t,n){if(n>t)throw new Error(`Current tab index (${n}) is greater than the number of tabs (${t})`)}function M({children:t,color:n="primary",current:s=0,onChange:i,...o}){const l=j.toArray(t),[a,$]=k(s),d=x([]),T=h(`${c}-tabs`,`${c}-tabs--${n}`,o.className),v=h(`${c}-tabs__marker`,`${c}-tabs__marker--${n}`),m=B(()=>`marker-${R()}`,[]);L(()=>p(),[a]),b(()=>{A(l.length-1,a)},[]),b(()=>{const e=l.findIndex(u=>!u.props.disabled),r=l[s].props.disabled;$(r?e:s)},[s]),b(()=>{p(),N(a)},[a]);const I=e=>{i&&i(e),$(e)},N=e=>{d.current&&d.current[e].scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})},w=(e,r)=>{!d.current||!r||(d.current[e]=r)},p=()=>{const e=document.querySelector(`#tab-${m}-${a}`),r=document.getElementById(m),u=e.offsetWidth,_=e.offsetLeft;r.style.width=`${u}px`,r.style.left=`${_}px`};return C("div",{...o,className:T,children:[l.map((e,r)=>{const u=`tab-${m}-${r}`,_=a===r;return f("div",{ref:E=>w(r,E),style:{width:"100%"},children:y(e,{id:u,tabIndex:r+1,"aria-checked":_,onClick:()=>I(r)})},u)}),f("div",{id:m,className:v})]})}const K=S(M);function O({icon:t,label:n,disabled:s,color:i="primary",...o}){const{"aria-checked":l}=o,a=h(`${c}-tabs__button`,s&&`${c}-tabs__button--disabled`,l&&`${c}-tabs__button--active-${i}`,o.className);return C("button",{type:"button",disabled:s,className:a,...o,children:[t&&y(t,{className:h(`${c}-tabs__button__icon`)}),n]})}function P({children:t,value:n,current:s,...i}){return n===s&&f(g,{enter:!0,direction:"left",children:f("div",{...i,children:t})})}function Q(t){const[n,s]=k(t);return b(()=>{s(t)},[t]),[o=>{s(o)},n]}export{O as T,P as a,K as b,Q as u};
2
- //# sourceMappingURL=useTabs-DG53jo4T.js.map
@@ -1,2 +0,0 @@
1
- "use strict";const f=require("react/jsx-runtime"),c=require("react"),a=require("./index-DYxwT4uW.cjs"),h=require("./joinClass-Jk3EszKD.cjs"),E=require("./uuid-omnJ9TjZ.cjs"),v=require("./createComponent-Bls5N6x8.cjs"),N=require("./useListenerResized-AwpsZLcP.cjs"),w=require("./Slide-D4aLHjYS.cjs");function I(e,r){if(r>e)throw new Error(`Current tab index (${r}) is greater than the number of tabs (${e})`)}function R({children:e,color:r="primary",current:n=0,onChange:u,...o}){const l=c.Children.toArray(e),[i,b]=c.useState(n),m=c.useRef([]),x=h.joinClass(`${a.prefix}-tabs`,`${a.prefix}-tabs--${r}`,o.className),p=h.joinClass(`${a.prefix}-tabs__marker`,`${a.prefix}-tabs__marker--${r}`),$=c.useMemo(()=>`marker-${E.uuid()}`,[]);N.useListenerResized(()=>C(),[i]),c.useEffect(()=>{I(l.length-1,i)},[]),c.useEffect(()=>{const t=l.findIndex(d=>!d.props.disabled),s=l[n].props.disabled;b(s?t:n)},[n]),c.useEffect(()=>{C(),j(i)},[i]);const T=t=>{u&&u(t),b(t)},j=t=>{m.current&&m.current[t].scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})},k=(t,s)=>{!m.current||!s||(m.current[t]=s)},C=()=>{const t=document.querySelector(`#tab-${$}-${i}`),s=document.getElementById($),d=t.offsetWidth,_=t.offsetLeft;s.style.width=`${d}px`,s.style.left=`${_}px`},y=()=>l.map((t,s)=>{const d=`tab-${$}-${s}`,_=i===s;return f.jsx("div",{ref:q=>k(s,q),style:{width:"100%"},children:c.cloneElement(t,{id:d,tabIndex:s+1,"aria-checked":_,onClick:()=>T(s)})},d)});return f.jsxs("div",{...o,className:x,children:[y(),f.jsx("div",{id:$,className:p})]})}const B=v.createComponent(R);function S({icon:e,label:r,disabled:n,color:u="primary",...o}){const{"aria-checked":l}=o,i=h.joinClass(`${a.prefix}-tabs__button`,n&&`${a.prefix}-tabs__button--disabled`,l&&`${a.prefix}-tabs__button--active-${u}`,o.className),b=()=>e&&c.cloneElement(e,{className:h.joinClass(`${a.prefix}-tabs__button__icon`)});return f.jsxs("button",{type:"button",disabled:n,className:i,...o,children:[b(),r]})}function L({children:e,value:r,current:n,...u}){return r===n&&f.jsx(w.Slide,{enter:!0,direction:"left",children:f.jsx("div",{...u,children:e})})}function g(e){const[r,n]=c.useState(e);return c.useEffect(()=>{n(e)},[e]),[o=>{n(o)},r]}exports.TabButton=S;exports.TabContent=L;exports.Tabs_default=B;exports.useTabs=g;
2
- //# sourceMappingURL=useTabs-Dcksp_re.cjs.map