podo-ui 0.8.3 → 0.9.0
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.
- package/cdn/font/icon.woff +0 -0
- package/cdn/podo-datepicker.css +1 -1
- package/cdn/podo-datepicker.js +1 -1
- package/cdn/podo-datepicker.min.css +1 -1
- package/cdn/podo-datepicker.min.js +1 -1
- package/cdn/podo-ui.css +19 -7
- package/cdn/podo-ui.min.css +2 -2
- package/dist/index.d.ts +19 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +17 -1
- package/dist/react/atom/button.d.ts +28 -0
- package/dist/react/atom/button.d.ts.map +1 -0
- package/dist/react/atom/button.js +17 -0
- package/dist/react/atom/checkbox.d.ts +17 -0
- package/dist/react/atom/checkbox.d.ts.map +1 -0
- package/dist/react/atom/checkbox.js +20 -0
- package/dist/react/atom/editor-view.d.ts.map +1 -1
- package/dist/react/atom/editor.d.ts.map +1 -1
- package/dist/react/atom/file.d.ts +20 -0
- package/dist/react/atom/file.d.ts.map +1 -0
- package/dist/react/atom/file.js +12 -0
- package/dist/react/atom/input.d.ts.map +1 -1
- package/dist/react/atom/input.js +2 -2
- package/dist/react/atom/input.module.scss +80 -24
- package/dist/react/atom/label.d.ts +19 -0
- package/dist/react/atom/label.d.ts.map +1 -0
- package/dist/react/atom/label.js +15 -0
- package/dist/react/atom/radio.d.ts +44 -0
- package/dist/react/atom/radio.d.ts.map +1 -0
- package/dist/react/atom/radio.js +19 -0
- package/dist/react/atom/select.d.ts +31 -0
- package/dist/react/atom/select.d.ts.map +1 -0
- package/dist/react/atom/select.js +15 -0
- package/dist/react/atom/toggle.d.ts +15 -0
- package/dist/react/atom/toggle.d.ts.map +1 -0
- package/dist/react/atom/toggle.js +12 -0
- package/dist/react/molecule/field.d.ts.map +1 -1
- package/dist/react/molecule/tab.d.ts +38 -0
- package/dist/react/molecule/tab.d.ts.map +1 -0
- package/dist/react/molecule/tab.js +28 -0
- package/dist/react/molecule/table.d.ts +37 -0
- package/dist/react/molecule/table.d.ts.map +1 -0
- package/dist/react/molecule/table.js +20 -0
- package/global.scss +8 -0
- package/package.json +16 -15
- package/scss/icon/font/icon.woff +0 -0
- package/scss/icon/icon-name.scss +3 -0
package/dist/index.d.ts
CHANGED
|
@@ -8,6 +8,15 @@ import Tooltip from './react/atom/tooltip';
|
|
|
8
8
|
import Pagination from './react/molecule/pagination';
|
|
9
9
|
import Field from './react/molecule/field';
|
|
10
10
|
import DatePicker from './react/molecule/datepicker';
|
|
11
|
+
import Label from './react/atom/label';
|
|
12
|
+
import Toggle from './react/atom/toggle';
|
|
13
|
+
import Checkbox from './react/atom/checkbox';
|
|
14
|
+
import Radio from './react/atom/radio';
|
|
15
|
+
import Select from './react/atom/select';
|
|
16
|
+
import { File } from './react/atom/file';
|
|
17
|
+
import Button from './react/atom/button';
|
|
18
|
+
import Tab from './react/molecule/tab';
|
|
19
|
+
import Table from './react/molecule/table';
|
|
11
20
|
declare const Form: {
|
|
12
21
|
Input: import("react").FC<import("./react/atom/input").InputWrapperProps>;
|
|
13
22
|
Textarea: import("react").FC<import("./react/atom/textarea").TextareaWrapperProps>;
|
|
@@ -15,7 +24,16 @@ declare const Form: {
|
|
|
15
24
|
EditorView: ({ value, className }: import("./react/atom/editor-view").EditorViewProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
25
|
Field: ({ label, labelClass, required, helper, helperClass, children, validator, value, setClassName, className, }: import("./react/molecule/field").FieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
26
|
DatePicker: import("react").FC<import("./react/molecule/datepicker").DatePickerProps>;
|
|
27
|
+
Label: import("react").ForwardRefExoticComponent<Omit<import("./react/atom/label").LabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
|
|
28
|
+
Toggle: import("react").ForwardRefExoticComponent<Omit<import("./react/atom/toggle").ToggleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
29
|
+
Checkbox: import("react").ForwardRefExoticComponent<Omit<import("./react/atom/checkbox").CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
30
|
+
Radio: import("react").ForwardRefExoticComponent<import("./react/atom/radio").RadioProps & import("react").RefAttributes<HTMLInputElement>> & {
|
|
31
|
+
Group: React.FC<import("./react/atom/radio").RadioGroupProps>;
|
|
32
|
+
};
|
|
33
|
+
Select: import("react").ForwardRefExoticComponent<Omit<import("./react/atom/select").SelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
|
|
34
|
+
File: import("react").ForwardRefExoticComponent<Omit<import("./react/atom/file").FileInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
35
|
+
Button: import("react").ForwardRefExoticComponent<Omit<import("./react/atom/button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
18
36
|
};
|
|
19
37
|
export default Form;
|
|
20
|
-
export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field, DatePicker };
|
|
38
|
+
export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field, DatePicker, Label, Toggle, Checkbox, Radio, Select, File, Button, Tab, Table, };
|
|
21
39
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,QAAA,MAAM,IAAI
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,IAAI,MAAM,mBAAmB,CAAC;AACrC,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAC3C,OAAO,UAAU,MAAM,6BAA6B,CAAC;AACrD,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,GAAG,MAAM,sBAAsB,CAAC;AACvC,OAAO,KAAK,MAAM,wBAAwB,CAAC;AAE3C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAcT,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,OAAO,EACL,KAAK,EACL,QAAQ,EACR,MAAM,EACN,UAAU,EACV,MAAM,EACN,IAAI,EACJ,OAAO,EACP,UAAU,EACV,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,QAAQ,EACR,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,EACH,KAAK,GACN,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -8,6 +8,15 @@ import Tooltip from './react/atom/tooltip';
|
|
|
8
8
|
import Pagination from './react/molecule/pagination';
|
|
9
9
|
import Field from './react/molecule/field';
|
|
10
10
|
import DatePicker from './react/molecule/datepicker';
|
|
11
|
+
import Label from './react/atom/label';
|
|
12
|
+
import Toggle from './react/atom/toggle';
|
|
13
|
+
import Checkbox from './react/atom/checkbox';
|
|
14
|
+
import Radio from './react/atom/radio';
|
|
15
|
+
import Select from './react/atom/select';
|
|
16
|
+
import { File } from './react/atom/file';
|
|
17
|
+
import Button from './react/atom/button';
|
|
18
|
+
import Tab from './react/molecule/tab';
|
|
19
|
+
import Table from './react/molecule/table';
|
|
11
20
|
const Form = {
|
|
12
21
|
Input,
|
|
13
22
|
Textarea,
|
|
@@ -15,6 +24,13 @@ const Form = {
|
|
|
15
24
|
EditorView,
|
|
16
25
|
Field,
|
|
17
26
|
DatePicker,
|
|
27
|
+
Label,
|
|
28
|
+
Toggle,
|
|
29
|
+
Checkbox,
|
|
30
|
+
Radio,
|
|
31
|
+
Select,
|
|
32
|
+
File,
|
|
33
|
+
Button,
|
|
18
34
|
};
|
|
19
35
|
export default Form;
|
|
20
|
-
export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field, DatePicker };
|
|
36
|
+
export { Input, Textarea, Editor, EditorView, Avatar, Chip, Tooltip, Pagination, Field, DatePicker, Label, Toggle, Checkbox, Radio, Select, File, Button, Tab, Table, };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export type ButtonTheme = 'default' | 'primary' | 'default-deep' | 'info' | 'link' | 'success' | 'warning' | 'danger';
|
|
2
|
+
export type ButtonVariant = 'solid' | 'fill' | 'border' | 'text';
|
|
3
|
+
export type ButtonSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
|
|
4
|
+
export interface ButtonProps extends React.ComponentProps<'button'> {
|
|
5
|
+
/** Theme color */
|
|
6
|
+
theme?: ButtonTheme;
|
|
7
|
+
/** Style variant */
|
|
8
|
+
variant?: ButtonVariant;
|
|
9
|
+
/** Size */
|
|
10
|
+
size?: ButtonSize;
|
|
11
|
+
/** Left icon class name */
|
|
12
|
+
icon?: string;
|
|
13
|
+
/** Right icon class name */
|
|
14
|
+
rightIcon?: string;
|
|
15
|
+
/** Loading state */
|
|
16
|
+
loading?: boolean;
|
|
17
|
+
/** Disabled state */
|
|
18
|
+
disabled?: boolean;
|
|
19
|
+
/** Text alignment */
|
|
20
|
+
textAlign?: 'left' | 'center' | 'right';
|
|
21
|
+
/** Additional class name */
|
|
22
|
+
className?: string;
|
|
23
|
+
/** Children content */
|
|
24
|
+
children?: React.ReactNode;
|
|
25
|
+
}
|
|
26
|
+
declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
27
|
+
export default Button;
|
|
28
|
+
//# sourceMappingURL=button.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../react/atom/button.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,SAAS,GACT,cAAc,GACd,MAAM,GACN,MAAM,GACN,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC;IACjE,kBAAkB;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW;IACX,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,MAAM,wHA6CX,CAAC;AAIF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
const Button = forwardRef(({ theme = 'default', variant = 'solid', size = 'sm', icon, rightIcon, loading, disabled, textAlign, className, children, ...rest }, ref) => {
|
|
4
|
+
const buttonClass = [
|
|
5
|
+
theme !== 'default' && theme,
|
|
6
|
+
variant !== 'solid' && variant,
|
|
7
|
+
size !== 'sm' && size,
|
|
8
|
+
textAlign === 'left' && 'text-left',
|
|
9
|
+
textAlign === 'right' && 'text-right',
|
|
10
|
+
className,
|
|
11
|
+
]
|
|
12
|
+
.filter(Boolean)
|
|
13
|
+
.join(' ');
|
|
14
|
+
return (_jsxs("button", { ref: ref, className: buttonClass || undefined, disabled: disabled || loading, ...rest, children: [loading ? (_jsx("i", { className: "icon-loading" })) : (icon && _jsx("i", { className: icon })), children, rightIcon && !loading && _jsx("i", { className: rightIcon })] }));
|
|
15
|
+
});
|
|
16
|
+
Button.displayName = 'Button';
|
|
17
|
+
export default Button;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export interface CheckboxProps extends Omit<React.ComponentProps<'input'>, 'type'> {
|
|
2
|
+
/** Checked state */
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
/** Indeterminate state (for select all pattern) */
|
|
5
|
+
indeterminate?: boolean;
|
|
6
|
+
/** Label text */
|
|
7
|
+
label?: string;
|
|
8
|
+
/** Disabled state */
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
/** Additional class name */
|
|
11
|
+
className?: string;
|
|
12
|
+
/** Change callback */
|
|
13
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
14
|
+
}
|
|
15
|
+
declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
16
|
+
export default Checkbox;
|
|
17
|
+
//# sourceMappingURL=checkbox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../react/atom/checkbox.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IACnD,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,QAAA,MAAM,QAAQ,yHAwCb,CAAC;AAIF,eAAe,QAAQ,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef, useRef, useEffect, useImperativeHandle } from 'react';
|
|
3
|
+
const Checkbox = forwardRef(({ checked, indeterminate, label, disabled, className, onChange, ...rest }, ref) => {
|
|
4
|
+
const innerRef = useRef(null);
|
|
5
|
+
// Combine forwarded ref with inner ref
|
|
6
|
+
useImperativeHandle(ref, () => innerRef.current);
|
|
7
|
+
// Handle indeterminate state (DOM property only, not HTML attribute)
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
if (innerRef.current) {
|
|
10
|
+
innerRef.current.indeterminate = indeterminate ?? false;
|
|
11
|
+
}
|
|
12
|
+
}, [indeterminate]);
|
|
13
|
+
const input = (_jsx("input", { ref: innerRef, type: "checkbox", checked: checked, disabled: disabled, onChange: onChange, className: className, ...rest }));
|
|
14
|
+
if (label) {
|
|
15
|
+
return (_jsxs("label", { children: [input, _jsx("span", { children: label })] }));
|
|
16
|
+
}
|
|
17
|
+
return input;
|
|
18
|
+
});
|
|
19
|
+
Checkbox.displayName = 'Checkbox';
|
|
20
|
+
export default Checkbox;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor-view.d.ts","sourceRoot":"","sources":["../../../react/atom/editor-view.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"editor-view.d.ts","sourceRoot":"","sources":["../../../react/atom/editor-view.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,sBAAsB,eAAe,4CAOxD,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../react/atom/editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,IAAI,GACJ,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../react/atom/editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,IAAI,GACJ,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,GAAI,uGAWb,WAAW,4CAi0Ib,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export interface FileInputProps extends Omit<React.ComponentProps<'input'>, 'type'> {
|
|
2
|
+
/** Accepted file types (e.g., "image/*", ".pdf") */
|
|
3
|
+
accept?: string;
|
|
4
|
+
/** Allow multiple file selection */
|
|
5
|
+
multiple?: boolean;
|
|
6
|
+
/** Disabled state */
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/** Additional class name */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Change callback */
|
|
11
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* File upload input component.
|
|
15
|
+
* Supports file type filtering, multiple selection, and disabled state.
|
|
16
|
+
*/
|
|
17
|
+
declare const FileInput: import("react").ForwardRefExoticComponent<Omit<FileInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
18
|
+
export { FileInput as File };
|
|
19
|
+
export default FileInput;
|
|
20
|
+
//# sourceMappingURL=file.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"file.d.ts","sourceRoot":"","sources":["../../../react/atom/file.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IACnD,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;;GAGG;AACH,QAAA,MAAM,SAAS,0HAed,CAAC;AAIF,OAAO,EAAE,SAAS,IAAI,IAAI,EAAE,CAAC;AAC7B,eAAe,SAAS,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* File upload input component.
|
|
5
|
+
* Supports file type filtering, multiple selection, and disabled state.
|
|
6
|
+
*/
|
|
7
|
+
const FileInput = forwardRef(({ accept, multiple, disabled, className, onChange, ...rest }, ref) => {
|
|
8
|
+
return (_jsx("input", { ref: ref, type: "file", accept: accept, multiple: multiple, disabled: disabled, className: className, onChange: onChange, ...rest }));
|
|
9
|
+
});
|
|
10
|
+
FileInput.displayName = 'File';
|
|
11
|
+
export { FileInput as File };
|
|
12
|
+
export default FileInput;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../react/atom/input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,
|
|
1
|
+
{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../react/atom/input.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IACtE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqDtC,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
package/dist/react/atom/input.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState, useEffect, useCallback } from 'react';
|
|
3
3
|
import { z } from 'zod';
|
|
4
4
|
import styles from './input.module.scss';
|
|
5
|
-
const Input = ({ validator, value, className, withIcon, withRightIcon, unit, ...rest }) => {
|
|
5
|
+
const Input = ({ validator, value, className, withIcon, withRightIcon, unit, type = 'text', ...rest }) => {
|
|
6
6
|
const [message, setMessage] = useState('');
|
|
7
7
|
const [statusClass, setStatusClass] = useState('');
|
|
8
8
|
const validateHandler = useCallback(() => {
|
|
@@ -24,6 +24,6 @@ const Input = ({ validator, value, className, withIcon, withRightIcon, unit, ...
|
|
|
24
24
|
useEffect(() => {
|
|
25
25
|
validateHandler();
|
|
26
26
|
}, [validateHandler, value]);
|
|
27
|
-
return (_jsxs("div", { className: `${styles.style} ${className || ''}`, children: [_jsxs("div", { className: `${className || ''} ${withIcon ? 'with-icon' : ''} ${withRightIcon ? 'with-right-icon' : ''}`, children: [withIcon && _jsx("i", { className: withIcon }), _jsx("input", { ...rest, value: value ?? '', className: `${statusClass} ${className || ''}` }), withRightIcon && _jsx("i", { className: withRightIcon }), unit && _jsx("span", { className: "unit", children: unit })] }), validator && message !== '' && (_jsx("div", { className: "validator", children: message }))] }));
|
|
27
|
+
return (_jsxs("div", { className: `${styles.style} ${className || ''}`, children: [_jsxs("div", { className: `${className || ''} ${withIcon ? 'with-icon' : ''} ${withRightIcon ? 'with-right-icon' : ''}`, children: [withIcon && _jsx("i", { className: withIcon }), _jsx("input", { type: type, ...rest, value: value ?? '', className: `${statusClass} ${className || ''}` }), withRightIcon && _jsx("i", { className: withRightIcon }), unit && _jsx("span", { className: "unit", children: unit })] }), validator && message !== '' && (_jsx("div", { className: "validator", children: message }))] }));
|
|
28
28
|
};
|
|
29
29
|
export default Input;
|
|
@@ -3,40 +3,96 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
flex-direction: column;
|
|
5
5
|
gap: s(3);
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
|
|
7
|
+
> div {
|
|
8
|
+
position: relative;
|
|
9
|
+
width: fit-content;
|
|
10
|
+
|
|
11
|
+
> i {
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 50%;
|
|
14
|
+
transform: translateY(-50%);
|
|
15
|
+
color: color('text-sub');
|
|
16
|
+
pointer-events: none;
|
|
9
17
|
}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
18
|
+
|
|
19
|
+
&:global(.with-icon) {
|
|
20
|
+
> i {
|
|
21
|
+
left: s(3);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
> input {
|
|
25
|
+
padding-left: s(8);
|
|
14
26
|
}
|
|
15
27
|
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
> span.unit {
|
|
20
|
-
position: absolute;
|
|
28
|
+
|
|
29
|
+
&:global(.with-right-icon) {
|
|
30
|
+
> i {
|
|
21
31
|
right: s(3);
|
|
22
|
-
top: 50%;
|
|
23
|
-
transform: translateY(-50%);
|
|
24
|
-
color: color('text-sub');
|
|
25
|
-
pointer-events: none;
|
|
26
32
|
}
|
|
33
|
+
|
|
27
34
|
> input {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
35
|
+
padding-right: s(7);
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
:global(.unit) {
|
|
40
|
+
position: absolute;
|
|
41
|
+
right: s(3);
|
|
42
|
+
top: 50%;
|
|
43
|
+
transform: translateY(-50%);
|
|
44
|
+
color: color('text-sub');
|
|
45
|
+
pointer-events: none;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
> input {
|
|
49
|
+
@include p3;
|
|
50
|
+
padding: s(3) s(4);
|
|
51
|
+
background-color: color('bg-block');
|
|
52
|
+
border-radius: r(3);
|
|
53
|
+
border: 1px solid color('border-disabled');
|
|
54
|
+
|
|
55
|
+
&:focus-visible:not(:disabled) {
|
|
56
|
+
border-color: color('primary-base');
|
|
57
|
+
outline: 4px solid color('primary-outline');
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&::placeholder {
|
|
61
|
+
color: color('placeholder');
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&:global(.success) {
|
|
65
|
+
border-color: color('success');
|
|
66
|
+
|
|
67
|
+
&:focus-visible:not(:disabled) {
|
|
68
|
+
outline: 4px solid color('success-outline');
|
|
33
69
|
}
|
|
70
|
+
}
|
|
34
71
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
72
|
+
&:global(.danger) {
|
|
73
|
+
border-color: color('danger');
|
|
74
|
+
|
|
75
|
+
&:focus-visible:not(:disabled) {
|
|
76
|
+
outline: 4px solid color('danger-outline');
|
|
38
77
|
}
|
|
39
78
|
}
|
|
79
|
+
|
|
80
|
+
/* Chrome, Safari, Edge, Opera */
|
|
81
|
+
&::-webkit-outer-spin-button,
|
|
82
|
+
&::-webkit-inner-spin-button {
|
|
83
|
+
-webkit-appearance: none;
|
|
84
|
+
margin: 0;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
/* Firefox */
|
|
88
|
+
&[type='number'] {
|
|
89
|
+
-moz-appearance: textfield;
|
|
90
|
+
}
|
|
40
91
|
}
|
|
41
92
|
}
|
|
93
|
+
|
|
94
|
+
:global(.validator) {
|
|
95
|
+
@include p4;
|
|
96
|
+
color: color('danger');
|
|
97
|
+
}
|
|
42
98
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface LabelProps extends React.ComponentProps<'label'> {
|
|
2
|
+
/** Label text content */
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
/** Size variant */
|
|
5
|
+
size?: 'sm' | 'md' | 'lg';
|
|
6
|
+
/** Semibold font weight */
|
|
7
|
+
semibold?: boolean;
|
|
8
|
+
/** Show required indicator (*) */
|
|
9
|
+
required?: boolean;
|
|
10
|
+
/** Disabled style */
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/** Associated input id */
|
|
13
|
+
htmlFor?: string;
|
|
14
|
+
/** Additional class name */
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
declare const Label: import("react").ForwardRefExoticComponent<Omit<LabelProps, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
|
|
18
|
+
export default Label;
|
|
19
|
+
//# sourceMappingURL=label.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../../react/atom/label.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;IAC/D,yBAAyB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,sHAmCV,CAAC;AAIF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
const Label = forwardRef(({ children, size = 'md', semibold, required, disabled, htmlFor, className, ...rest }, ref) => {
|
|
4
|
+
const labelClass = [
|
|
5
|
+
size !== 'md' && size,
|
|
6
|
+
semibold && 'semibold',
|
|
7
|
+
disabled && 'disabled',
|
|
8
|
+
className,
|
|
9
|
+
]
|
|
10
|
+
.filter(Boolean)
|
|
11
|
+
.join(' ');
|
|
12
|
+
return (_jsxs("label", { ref: ref, htmlFor: htmlFor, className: labelClass || undefined, ...rest, children: [children, required && _jsx("span", { className: "required", children: "*" })] }));
|
|
13
|
+
});
|
|
14
|
+
Label.displayName = 'Label';
|
|
15
|
+
export default Label;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface RadioProps extends Omit<React.ComponentProps<'input'>, 'type'> {
|
|
3
|
+
/** Checked state */
|
|
4
|
+
checked?: boolean;
|
|
5
|
+
/** Group name (required for grouping) */
|
|
6
|
+
name: string;
|
|
7
|
+
/** Radio value */
|
|
8
|
+
value: string;
|
|
9
|
+
/** Label text */
|
|
10
|
+
label?: string;
|
|
11
|
+
/** Disabled state */
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Additional class name */
|
|
14
|
+
className?: string;
|
|
15
|
+
/** Change callback */
|
|
16
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
17
|
+
}
|
|
18
|
+
export interface RadioGroupOption {
|
|
19
|
+
/** Option value */
|
|
20
|
+
value: string;
|
|
21
|
+
/** Option label */
|
|
22
|
+
label: string;
|
|
23
|
+
/** Disabled state */
|
|
24
|
+
disabled?: boolean;
|
|
25
|
+
}
|
|
26
|
+
export interface RadioGroupProps {
|
|
27
|
+
/** Group name */
|
|
28
|
+
name: string;
|
|
29
|
+
/** Current selected value */
|
|
30
|
+
value?: string;
|
|
31
|
+
/** Option list */
|
|
32
|
+
options: RadioGroupOption[];
|
|
33
|
+
/** Vertical layout */
|
|
34
|
+
vertical?: boolean;
|
|
35
|
+
/** Change callback */
|
|
36
|
+
onChange?: (value: string) => void;
|
|
37
|
+
/** Additional class name */
|
|
38
|
+
className?: string;
|
|
39
|
+
}
|
|
40
|
+
declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>> & {
|
|
41
|
+
Group: React.FC<RadioGroupProps>;
|
|
42
|
+
};
|
|
43
|
+
export default Radio;
|
|
44
|
+
//# sourceMappingURL=radio.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../react/atom/radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IACnD,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yCAAyC;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,MAAM,WAAW,gBAAgB;IAC/B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,EA2BN,KAAK,CAAC,yBAAyB,CAClC,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,CACnD,GAAG;IACF,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;CAClC,CAAC;AAqCF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
const Radio = forwardRef(({ checked, name, value, label, disabled, className, onChange, ...rest }, ref) => {
|
|
4
|
+
const input = (_jsx("input", { ref: ref, type: "radio", name: name, value: value, checked: checked, disabled: disabled, onChange: onChange, className: className, ...rest }));
|
|
5
|
+
if (label) {
|
|
6
|
+
return (_jsxs("label", { children: [input, _jsx("span", { children: label })] }));
|
|
7
|
+
}
|
|
8
|
+
return input;
|
|
9
|
+
});
|
|
10
|
+
Radio.displayName = 'Radio';
|
|
11
|
+
const RadioGroup = ({ name, value, options, vertical, onChange, className, }) => {
|
|
12
|
+
const groupClass = ['radio-group', vertical && 'vertical', className]
|
|
13
|
+
.filter(Boolean)
|
|
14
|
+
.join(' ');
|
|
15
|
+
return (_jsx("div", { className: groupClass || undefined, children: options.map((option) => (_jsx(Radio, { name: name, value: option.value, label: option.label, checked: value === option.value, disabled: option.disabled, onChange: () => onChange?.(option.value) }, option.value))) }));
|
|
16
|
+
};
|
|
17
|
+
RadioGroup.displayName = 'RadioGroup';
|
|
18
|
+
Radio.Group = RadioGroup;
|
|
19
|
+
export default Radio;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
export interface SelectOption {
|
|
2
|
+
/** Option value */
|
|
3
|
+
value: string;
|
|
4
|
+
/** Option label */
|
|
5
|
+
label: string;
|
|
6
|
+
/** Disabled state */
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
}
|
|
9
|
+
export interface SelectProps extends Omit<React.ComponentProps<'select'>, 'children'> {
|
|
10
|
+
/** Current value */
|
|
11
|
+
value?: string;
|
|
12
|
+
/** Option list */
|
|
13
|
+
options: SelectOption[];
|
|
14
|
+
/** Placeholder text */
|
|
15
|
+
placeholder?: string;
|
|
16
|
+
/** Disabled state */
|
|
17
|
+
disabled?: boolean;
|
|
18
|
+
/** Left icon class name */
|
|
19
|
+
withIcon?: string;
|
|
20
|
+
/** Additional class name */
|
|
21
|
+
className?: string;
|
|
22
|
+
/** Change callback */
|
|
23
|
+
onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
|
|
24
|
+
}
|
|
25
|
+
/**
|
|
26
|
+
* Select dropdown component with customizable options.
|
|
27
|
+
* Supports placeholder, disabled state, and optional left icon.
|
|
28
|
+
*/
|
|
29
|
+
declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
|
|
30
|
+
export default Select;
|
|
31
|
+
//# sourceMappingURL=select.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../react/atom/select.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,YAAY;IAC3B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,UAAU,CAAC;IACxD,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED;;;GAGG;AACH,QAAA,MAAM,MAAM,wHAmDX,CAAC;AAIF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Select dropdown component with customizable options.
|
|
5
|
+
* Supports placeholder, disabled state, and optional left icon.
|
|
6
|
+
*/
|
|
7
|
+
const Select = forwardRef(({ value, options, placeholder, disabled, withIcon, className, onChange, ...rest }, ref) => {
|
|
8
|
+
const selectElement = (_jsxs("select", { ref: ref, value: value, disabled: disabled, onChange: onChange, className: className, ...rest, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)))] }));
|
|
9
|
+
if (withIcon) {
|
|
10
|
+
return (_jsxs("div", { className: "with-icon", children: [_jsx("i", { className: withIcon }), selectElement] }));
|
|
11
|
+
}
|
|
12
|
+
return selectElement;
|
|
13
|
+
});
|
|
14
|
+
Select.displayName = 'Select';
|
|
15
|
+
export default Select;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
export interface ToggleProps extends Omit<React.ComponentProps<'input'>, 'type'> {
|
|
2
|
+
/** Checked state */
|
|
3
|
+
checked?: boolean;
|
|
4
|
+
/** Label text */
|
|
5
|
+
label?: string;
|
|
6
|
+
/** Disabled state */
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
/** Additional class name */
|
|
9
|
+
className?: string;
|
|
10
|
+
/** Change callback */
|
|
11
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
12
|
+
}
|
|
13
|
+
declare const Toggle: import("react").ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
14
|
+
export default Toggle;
|
|
15
|
+
//# sourceMappingURL=toggle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../../react/atom/toggle.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IACnD,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED,QAAA,MAAM,MAAM,uHA2BX,CAAC;AAIF,eAAe,MAAM,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from 'react';
|
|
3
|
+
const Toggle = forwardRef(({ checked, label, disabled, className, onChange, ...rest }, ref) => {
|
|
4
|
+
const toggleClass = ['toggle', className].filter(Boolean).join(' ');
|
|
5
|
+
const input = (_jsx("input", { ref: ref, type: "checkbox", className: toggleClass, checked: checked, disabled: disabled, onChange: onChange, ...rest }));
|
|
6
|
+
if (label) {
|
|
7
|
+
return (_jsxs("label", { children: [input, _jsx("span", { children: label })] }));
|
|
8
|
+
}
|
|
9
|
+
return input;
|
|
10
|
+
});
|
|
11
|
+
Toggle.displayName = 'Toggle';
|
|
12
|
+
export default Toggle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../react/molecule/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK
|
|
1
|
+
{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../react/molecule/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,GAAI,4GAWZ,UAAU,4CA+CZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export interface TabItem {
|
|
3
|
+
/** Tab key */
|
|
4
|
+
key: string;
|
|
5
|
+
/** Tab label */
|
|
6
|
+
label: React.ReactNode;
|
|
7
|
+
/** Disabled state */
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface TabProps {
|
|
11
|
+
/** Tab items */
|
|
12
|
+
items: TabItem[];
|
|
13
|
+
/** Active tab key (controlled) */
|
|
14
|
+
activeKey?: string;
|
|
15
|
+
/** Default active tab key (uncontrolled) */
|
|
16
|
+
defaultActiveKey?: string;
|
|
17
|
+
/** Equal width tabs */
|
|
18
|
+
fill?: boolean;
|
|
19
|
+
/** Tab change callback */
|
|
20
|
+
onChange?: (key: string) => void;
|
|
21
|
+
/** Additional class name */
|
|
22
|
+
className?: string;
|
|
23
|
+
}
|
|
24
|
+
export interface TabPanelProps {
|
|
25
|
+
/** Tab key (must match Tab item key) */
|
|
26
|
+
tabKey: string;
|
|
27
|
+
/** Current active key */
|
|
28
|
+
activeKey?: string;
|
|
29
|
+
/** Panel content */
|
|
30
|
+
children: React.ReactNode;
|
|
31
|
+
/** Additional class name */
|
|
32
|
+
className?: string;
|
|
33
|
+
}
|
|
34
|
+
declare const Tab: React.FC<TabProps> & {
|
|
35
|
+
Panel: React.FC<TabPanelProps>;
|
|
36
|
+
};
|
|
37
|
+
export default Tab;
|
|
38
|
+
//# sourceMappingURL=tab.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../react/molecule/tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,MAAM,WAAW,OAAO;IACtB,cAAc;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,gBAAgB;IAChB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB;IAChB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,CAAA;CA2C/D,CAAC;AAiBF,eAAe,GAAG,CAAC"}
|