uiplex 1.2.0 → 1.3.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.
Files changed (11) hide show
  1. package/README.md +20 -0
  2. package/dist/Checkbox/Checkbox.d.ts +34 -0
  3. package/dist/Checkbox/Checkbox.d.ts.map +1 -0
  4. package/dist/Checkbox/index.d.ts +3 -0
  5. package/dist/Checkbox/index.d.ts.map +1 -0
  6. package/dist/index.cjs +41 -0
  7. package/dist/index.css +210 -0
  8. package/dist/index.d.ts +3 -0
  9. package/dist/index.d.ts.map +1 -1
  10. package/dist/index.js +40 -1
  11. package/package.json +1 -1
package/README.md CHANGED
@@ -92,6 +92,26 @@ import { Radio, RadioGroup } from 'uiplex';
92
92
  />
93
93
  ```
94
94
 
95
+ ### Checkbox & CheckboxGroup
96
+
97
+ Checkbox components with support for multiple selections.
98
+
99
+ ```tsx
100
+ import { Checkbox, CheckboxGroup } from 'uiplex';
101
+
102
+ <CheckboxGroup
103
+ name="options"
104
+ value={selected}
105
+ onChange={(values) => setSelected(values)}
106
+ options={[
107
+ { value: '1', label: 'Option 1' },
108
+ { value: '2', label: 'Option 2' },
109
+ ]}
110
+ />
111
+ ```
112
+
113
+ **Key Props:** `value` (string[]), `onChange`, `options`, `size`, `colorScheme`, `orientation`
114
+
95
115
  ### Input
96
116
 
97
117
  Form input component with validation support.
package/dist/Checkbox/Checkbox.d.ts ADDED
@@ -0,0 +1,34 @@
1
+ import React from "react";
2
+ import "./Checkbox.css";
3
+ export interface CheckboxProps {
4
+ id?: string;
5
+ name: string;
6
+ value: string;
7
+ checked?: boolean;
8
+ disabled?: boolean;
9
+ label?: string;
10
+ description?: string;
11
+ size?: "sm" | "md" | "lg";
12
+ colorScheme?: "blue" | "green" | "red" | "yellow" | "purple" | "gray";
13
+ onChange?: (checked: boolean, value: string) => void;
14
+ className?: string;
15
+ }
16
+ export declare const Checkbox: React.FC<CheckboxProps>;
17
+ export interface CheckboxGroupProps {
18
+ name: string;
19
+ value?: string[];
20
+ options: Array<{
21
+ value: string;
22
+ label?: string;
23
+ description?: string;
24
+ disabled?: boolean;
25
+ }>;
26
+ disabled?: boolean;
27
+ size?: "sm" | "md" | "lg";
28
+ colorScheme?: "blue" | "green" | "red" | "yellow" | "purple" | "gray";
29
+ onChange?: (values: string[]) => void;
30
+ className?: string;
31
+ orientation?: "horizontal" | "vertical";
32
+ }
33
+ export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
34
+ //# sourceMappingURL=Checkbox.d.ts.map
package/dist/Checkbox/Checkbox.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAa;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsD5C,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,MAAM,CAAC;IACtE,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+CtD,CAAC"}
package/dist/Checkbox/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { Checkbox, CheckboxGroup } from './Checkbox';
2
+ export type { CheckboxProps, CheckboxGroupProps } from './Checkbox';
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/Checkbox/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AACpD,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA"}
package/dist/index.cjs CHANGED
@@ -84,6 +84,45 @@ const RadioGroup = ({ name, value, options, disabled = false, size = "md", color
84
84
  return (jsxRuntime.jsx("div", { className: groupClasses, children: options.map((option, index) => (jsxRuntime.jsx(Radio, { name: name, value: option.value, checked: value === option.value, disabled: disabled || option.disabled, label: option.label, description: option.description, size: size, colorScheme: colorScheme, onChange: onChange }, `${name}-${option.value}-${index}`))) }));
85
85
  };
86
86
 
87
+ const Checkbox = ({ id, name, value, checked = false, disabled = false, label, description, size = "md", colorScheme = "blue", onChange, className = "", }) => {
88
+ const checkboxId = id || `${name}-${value}`;
89
+ const checkboxClasses = [
90
+ "ui-checkbox",
91
+ `ui-checkbox--${size}`,
92
+ `ui-checkbox--${colorScheme}`,
93
+ disabled && "ui-checkbox--disabled",
94
+ className,
95
+ ]
96
+ .filter(Boolean)
97
+ .join(" ");
98
+ const handleChange = (event) => {
99
+ if (!disabled && onChange) {
100
+ onChange(event.target.checked, event.target.value);
101
+ }
102
+ };
103
+ return (jsxRuntime.jsxs("label", { className: checkboxClasses, children: [jsxRuntime.jsx("input", { type: "checkbox", id: checkboxId, name: name, value: value, checked: checked, disabled: disabled, onChange: handleChange, className: "ui-checkbox__input" }), jsxRuntime.jsx("span", { className: "ui-checkbox__checkmark" }), (label || description) && (jsxRuntime.jsxs("div", { className: "ui-checkbox__content", children: [label && jsxRuntime.jsx("span", { className: "ui-checkbox__label", children: label }), description && (jsxRuntime.jsx("span", { className: "ui-checkbox__description", children: description }))] }))] }));
104
+ };
105
+ const CheckboxGroup = ({ name, value = [], options, disabled = false, size = "md", colorScheme = "blue", onChange, className = "", orientation = "vertical", }) => {
106
+ const groupClasses = [
107
+ "ui-checkbox-group",
108
+ `ui-checkbox-group--${orientation}`,
109
+ className,
110
+ ]
111
+ .filter(Boolean)
112
+ .join(" ");
113
+ const handleChange = (checked, optionValue) => {
114
+ if (!onChange)
115
+ return;
116
+ if (checked) {
117
+ onChange([...value, optionValue]);
118
+ }
119
+ else {
120
+ onChange(value.filter((v) => v !== optionValue));
121
+ }
122
+ };
123
+ return (jsxRuntime.jsx("div", { className: groupClasses, children: options.map((option, index) => (jsxRuntime.jsx(Checkbox, { name: name, value: option.value, checked: value.includes(option.value), disabled: disabled || option.disabled, label: option.label, description: option.description, size: size, colorScheme: colorScheme, onChange: handleChange }, `${name}-${option.value}-${index}`))) }));
124
+ };
125
+
87
126
  const Text = ({ as = "p", size = "md", weight = "regular", color = "primary", align = "left", className = "", children, style, ...props }) => {
88
127
  const Component = as;
89
128
  const classes = [
@@ -1525,6 +1564,8 @@ exports.AccordionItem = AccordionItem;
1525
1564
  exports.AccordionPanel = AccordionPanel;
1526
1565
  exports.Box = Box;
1527
1566
  exports.Button = Button;
1567
+ exports.Checkbox = Checkbox;
1568
+ exports.CheckboxGroup = CheckboxGroup;
1528
1569
  exports.CircularProgress = CircularProgress;
1529
1570
  exports.CircularProgressLabel = CircularProgressLabel;
1530
1571
  exports.Flex = Flex;
package/dist/index.css CHANGED
@@ -660,6 +660,216 @@
660
660
  }
661
661
 
662
662
 
663
+ /* Checkbox Component Styles */
664
+ .ui-checkbox {
665
+ display: inline-flex;
666
+ align-items: center;
667
+ gap: 8px;
668
+ cursor: pointer;
669
+ user-select: none;
670
+ position: relative;
671
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
672
+ }
673
+
674
+ .ui-checkbox--disabled {
675
+ cursor: not-allowed;
676
+ opacity: 0.6;
677
+ }
678
+
679
+ .ui-checkbox__input {
680
+ position: absolute;
681
+ opacity: 0;
682
+ width: 0;
683
+ height: 0;
684
+ }
685
+
686
+ .ui-checkbox__checkmark {
687
+ position: relative;
688
+ display: inline-block;
689
+ width: 16px;
690
+ height: 16px;
691
+ border: 2px solid var(--border-secondary, #d1d5db);
692
+ border-radius: 4px;
693
+ background-color: var(--bg-primary, white);
694
+ flex-shrink: 0;
695
+ transition: all 0.2s ease;
696
+ margin-top: 1px;
697
+ }
698
+
699
+ .ui-checkbox__checkmark::after {
700
+ content: '';
701
+ position: absolute;
702
+ top: 50%;
703
+ left: 50%;
704
+ transform: translate(-50%, -50%) scale(0) rotate(45deg);
705
+ width: 4px;
706
+ height: 8px;
707
+ border: solid white;
708
+ border-width: 0 2px 2px 0;
709
+ transition: transform 0.2s ease;
710
+ }
711
+
712
+ /* Hover state */
713
+ .ui-checkbox:hover .ui-checkbox__checkmark {
714
+ border-color: var(--text-tertiary, #9ca3af);
715
+ }
716
+
717
+ /* Checked state */
718
+ .ui-checkbox__input:checked + .ui-checkbox__checkmark {
719
+ border-color: var(--accent-primary, #3b82f6);
720
+ background-color: var(--accent-primary, #3b82f6);
721
+ }
722
+
723
+ .ui-checkbox__input:checked + .ui-checkbox__checkmark::after {
724
+ transform: translate(-50%, -50%) scale(1) rotate(45deg);
725
+ }
726
+
727
+ /* Focus state */
728
+ .ui-checkbox__input:focus + .ui-checkbox__checkmark {
729
+ outline: 2px solid var(--accent-primary, #3b82f6);
730
+ outline-offset: 2px;
731
+ }
732
+
733
+ /* Disabled state */
734
+ .ui-checkbox--disabled .ui-checkbox__checkmark {
735
+ border-color: var(--border-primary, #e5e7eb);
736
+ background-color: var(--bg-secondary, #f9fafb);
737
+ }
738
+
739
+ .ui-checkbox--disabled .ui-checkbox__input:checked + .ui-checkbox__checkmark {
740
+ border-color: var(--border-secondary, #d1d5db);
741
+ background-color: var(--border-secondary, #d1d5db);
742
+ }
743
+
744
+ /* Content styling */
745
+ .ui-checkbox__content {
746
+ display: flex;
747
+ flex-direction: column;
748
+ gap: 2px;
749
+ justify-content: center;
750
+ }
751
+
752
+ .ui-checkbox__label {
753
+ font-weight: 500;
754
+ color: var(--text-primary, #111827);
755
+ line-height: 1.4;
756
+ }
757
+
758
+ .ui-checkbox__description {
759
+ font-size: 0.875rem;
760
+ color: var(--text-secondary, #6b7280);
761
+ line-height: 1.4;
762
+ }
763
+
764
+ /* Size variants */
765
+ .ui-checkbox--sm .ui-checkbox__checkmark {
766
+ width: 14px;
767
+ height: 14px;
768
+ border-width: 1.5px;
769
+ }
770
+
771
+ .ui-checkbox--sm .ui-checkbox__checkmark::after {
772
+ width: 3px;
773
+ height: 6px;
774
+ border-width: 0 1.5px 1.5px 0;
775
+ }
776
+
777
+ .ui-checkbox--sm .ui-checkbox__label {
778
+ font-size: 0.875rem;
779
+ }
780
+
781
+ .ui-checkbox--sm .ui-checkbox__description {
782
+ font-size: 0.75rem;
783
+ }
784
+
785
+ .ui-checkbox--lg .ui-checkbox__checkmark {
786
+ width: 20px;
787
+ height: 20px;
788
+ border-width: 2.5px;
789
+ }
790
+
791
+ .ui-checkbox--lg .ui-checkbox__checkmark::after {
792
+ width: 5px;
793
+ height: 10px;
794
+ border-width: 0 2.5px 2.5px 0;
795
+ }
796
+
797
+ .ui-checkbox--lg .ui-checkbox__label {
798
+ font-size: 1.125rem;
799
+ }
800
+
801
+ .ui-checkbox--lg .ui-checkbox__description {
802
+ font-size: 1rem;
803
+ }
804
+
805
+ /* Color schemes */
806
+ .ui-checkbox--blue .ui-checkbox__input:checked + .ui-checkbox__checkmark {
807
+ border-color: #3b82f6;
808
+ background-color: #3b82f6;
809
+ }
810
+
811
+ .ui-checkbox--blue .ui-checkbox__input:focus + .ui-checkbox__checkmark {
812
+ outline-color: #3b82f6;
813
+ }
814
+
815
+ .ui-checkbox--green .ui-checkbox__input:checked + .ui-checkbox__checkmark {
816
+ border-color: #10b981;
817
+ background-color: #10b981;
818
+ }
819
+
820
+ .ui-checkbox--green .ui-checkbox__input:focus + .ui-checkbox__checkmark {
821
+ outline-color: #10b981;
822
+ }
823
+
824
+ .ui-checkbox--red .ui-checkbox__input:checked + .ui-checkbox__checkmark {
825
+ border-color: #ef4444;
826
+ background-color: #ef4444;
827
+ }
828
+
829
+ .ui-checkbox--red .ui-checkbox__input:focus + .ui-checkbox__checkmark {
830
+ outline-color: #ef4444;
831
+ }
832
+
833
+ .ui-checkbox--yellow .ui-checkbox__input:checked + .ui-checkbox__checkmark {
834
+ border-color: #f59e0b;
835
+ background-color: #f59e0b;
836
+ }
837
+
838
+ .ui-checkbox--yellow .ui-checkbox__input:focus + .ui-checkbox__checkmark {
839
+ outline-color: #f59e0b;
840
+ }
841
+
842
+ .ui-checkbox--purple .ui-checkbox__input:checked + .ui-checkbox__checkmark {
843
+ border-color: #8b5cf6;
844
+ background-color: #8b5cf6;
845
+ }
846
+
847
+ .ui-checkbox--purple .ui-checkbox__input:focus + .ui-checkbox__checkmark {
848
+ outline-color: #8b5cf6;
849
+ }
850
+
851
+ .ui-checkbox--gray .ui-checkbox__input:checked + .ui-checkbox__checkmark {
852
+ border-color: #6b7280;
853
+ background-color: #6b7280;
854
+ }
855
+
856
+ .ui-checkbox--gray .ui-checkbox__input:focus + .ui-checkbox__checkmark {
857
+ outline-color: #6b7280;
858
+ }
859
+
860
+ /* Checkbox Group Styles */
861
+ .ui-checkbox-group {
862
+ display: flex;
863
+ flex-direction: column;
864
+ gap: 12px;
865
+ }
866
+
867
+ .ui-checkbox-group--horizontal {
868
+ flex-direction: row;
869
+ flex-wrap: wrap;
870
+ gap: 16px;
871
+ }
872
+
663
873
  .ui-text {
664
874
  margin: 0;
665
875
  color: var(--text-primary, #111827);
package/dist/index.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import './Button/Button.css';
2
2
  import './Loader/Loader.css';
3
3
  import './Radio/Radio.css';
4
+ import './Checkbox/Checkbox.css';
4
5
  import './Text/Text.css';
5
6
  import './Box/Box.css';
6
7
  import './Flex/Flex.css';
@@ -25,6 +26,8 @@ export { Loader } from './Loader';
25
26
  export type { LoaderProps } from './Loader';
26
27
  export { Radio, RadioGroup } from './Radio';
27
28
  export type { RadioProps, RadioGroupProps } from './Radio';
29
+ export { Checkbox, CheckboxGroup } from './Checkbox';
30
+ export type { CheckboxProps, CheckboxGroupProps } from './Checkbox';
28
31
  export { Text } from './Text';
29
32
  export type { TextProps, TextSize, TextWeight, TextColor, TextAlign } from './Text';
30
33
  export { Modal, ModalOverlay, ModalContent, ModalHeader, ModalBody, ModalFooter, ModalCloseButton, } from './Modal';
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -83,6 +83,45 @@ const RadioGroup = ({ name, value, options, disabled = false, size = "md", color
83
83
  return (jsx("div", { className: groupClasses, children: options.map((option, index) => (jsx(Radio, { name: name, value: option.value, checked: value === option.value, disabled: disabled || option.disabled, label: option.label, description: option.description, size: size, colorScheme: colorScheme, onChange: onChange }, `${name}-${option.value}-${index}`))) }));
84
84
  };
85
85
 
86
+ const Checkbox = ({ id, name, value, checked = false, disabled = false, label, description, size = "md", colorScheme = "blue", onChange, className = "", }) => {
87
+ const checkboxId = id || `${name}-${value}`;
88
+ const checkboxClasses = [
89
+ "ui-checkbox",
90
+ `ui-checkbox--${size}`,
91
+ `ui-checkbox--${colorScheme}`,
92
+ disabled && "ui-checkbox--disabled",
93
+ className,
94
+ ]
95
+ .filter(Boolean)
96
+ .join(" ");
97
+ const handleChange = (event) => {
98
+ if (!disabled && onChange) {
99
+ onChange(event.target.checked, event.target.value);
100
+ }
101
+ };
102
+ return (jsxs("label", { className: checkboxClasses, children: [jsx("input", { type: "checkbox", id: checkboxId, name: name, value: value, checked: checked, disabled: disabled, onChange: handleChange, className: "ui-checkbox__input" }), jsx("span", { className: "ui-checkbox__checkmark" }), (label || description) && (jsxs("div", { className: "ui-checkbox__content", children: [label && jsx("span", { className: "ui-checkbox__label", children: label }), description && (jsx("span", { className: "ui-checkbox__description", children: description }))] }))] }));
103
+ };
104
+ const CheckboxGroup = ({ name, value = [], options, disabled = false, size = "md", colorScheme = "blue", onChange, className = "", orientation = "vertical", }) => {
105
+ const groupClasses = [
106
+ "ui-checkbox-group",
107
+ `ui-checkbox-group--${orientation}`,
108
+ className,
109
+ ]
110
+ .filter(Boolean)
111
+ .join(" ");
112
+ const handleChange = (checked, optionValue) => {
113
+ if (!onChange)
114
+ return;
115
+ if (checked) {
116
+ onChange([...value, optionValue]);
117
+ }
118
+ else {
119
+ onChange(value.filter((v) => v !== optionValue));
120
+ }
121
+ };
122
+ return (jsx("div", { className: groupClasses, children: options.map((option, index) => (jsx(Checkbox, { name: name, value: option.value, checked: value.includes(option.value), disabled: disabled || option.disabled, label: option.label, description: option.description, size: size, colorScheme: colorScheme, onChange: handleChange }, `${name}-${option.value}-${index}`))) }));
123
+ };
124
+
86
125
  const Text = ({ as = "p", size = "md", weight = "regular", color = "primary", align = "left", className = "", children, style, ...props }) => {
87
126
  const Component = as;
88
127
  const classes = [
@@ -1518,4 +1557,4 @@ const ThemeScript = ({ storageKey = "uiplex-theme", defaultTheme = "system" }) =
1518
1557
  } }));
1519
1558
  };
1520
1559
 
1521
- export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Box, Button, CircularProgress, CircularProgressLabel, Flex, FormControl, FormErrorMessage, FormLabel, Grid, IconButton, Input, Link, Loader, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, Radio, RadioGroup, Select, Tab, TabList, TabPanel, TabPanels, Tabs, Text, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ToastStatic as Toast, Toast as ToastComponent, ToastContainer, ToastContainerGlobal, Tooltip, useDisclosure, useOutsideClick, useTheme };
1560
+ export { Accordion, AccordionButton, AccordionItem, AccordionPanel, Box, Button, Checkbox, CheckboxGroup, CircularProgress, CircularProgressLabel, Flex, FormControl, FormErrorMessage, FormLabel, Grid, IconButton, Input, Link, Loader, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Popover, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, Radio, RadioGroup, Select, Tab, TabList, TabPanel, TabPanels, Tabs, Text, Textarea, ThemeProvider, ThemeScript, ThemeToggle, ToastStatic as Toast, Toast as ToastComponent, ToastContainer, ToastContainerGlobal, Tooltip, useDisclosure, useOutsideClick, useTheme };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "uiplex",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "A modern React component library with TypeScript support, featuring Button, Loader, Radio components and a comprehensive theme system",
5
5
  "main": "./dist/index.cjs",
6
6
  "module": "./dist/index.js",