@neuctra/ui 0.2.3 → 0.2.4

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 (31) hide show
  1. package/dist/components/basic/Alert.d.ts +0 -1
  2. package/dist/components/basic/Card.d.ts +1 -1
  3. package/dist/components/basic/{CheckRadioInput.d.ts → CheckboxGroup.d.ts} +4 -7
  4. package/dist/components/basic/DropDown.d.ts +24 -34
  5. package/dist/components/basic/Modal.d.ts +2 -9
  6. package/dist/components/basic/RadioGroup.d.ts +25 -0
  7. package/dist/components/basic/SwitchGroup.d.ts +25 -0
  8. package/dist/index.cjs.js +41 -52
  9. package/dist/index.cjs.js.map +1 -1
  10. package/dist/index.d.ts +3 -1
  11. package/dist/index.es.js +1829 -1842
  12. package/dist/index.es.js.map +1 -1
  13. package/dist/src/components/basic/Alert.js +45 -30
  14. package/dist/src/components/basic/Card.js +12 -10
  15. package/dist/src/components/basic/CheckboxGroup.js +40 -0
  16. package/dist/src/components/basic/DropDown.js +140 -294
  17. package/dist/src/components/basic/Modal.js +10 -12
  18. package/dist/src/components/basic/RadioGroup.js +37 -0
  19. package/dist/src/components/basic/SwitchGroup.js +50 -0
  20. package/dist/src/index.js +4 -2
  21. package/dist/types/src/components/basic/Alert.d.ts +0 -1
  22. package/dist/types/src/components/basic/Card.d.ts +1 -1
  23. package/dist/types/src/components/basic/{CheckRadioInput.d.ts → CheckboxGroup.d.ts} +4 -7
  24. package/dist/types/src/components/basic/DropDown.d.ts +24 -34
  25. package/dist/types/src/components/basic/Modal.d.ts +2 -9
  26. package/dist/types/src/components/basic/RadioGroup.d.ts +25 -0
  27. package/dist/types/src/components/basic/SwitchGroup.d.ts +25 -0
  28. package/dist/types/src/index.d.ts +3 -1
  29. package/dist/ui.css +1 -1
  30. package/package.json +1 -1
  31. package/dist/src/components/basic/CheckRadioInput.js +0 -83
@@ -1,5 +1,5 @@
1
1
  import { CSSProperties, ReactNode, ElementType, ForwardedRef, ReactElement, ComponentPropsWithoutRef } from "react";
2
- type CardVariant = "elevated" | "outline" | "flat";
2
+ type CardVariant = string;
3
3
  type CardOwnProps = {
4
4
  as?: ElementType;
5
5
  children?: ReactNode;
@@ -3,13 +3,11 @@ interface Option {
3
3
  label: string;
4
4
  value: string;
5
5
  }
6
- type CheckRadioType = "checkbox" | "radio" | "switch";
7
- interface CheckRadioProps {
8
- type?: CheckRadioType;
6
+ interface CheckboxGroupProps {
9
7
  name?: string;
10
8
  options: Option[];
11
- selectedValues?: string[] | string;
12
- onChange?: (value: string | string[]) => void;
9
+ selectedValues?: string[];
10
+ onChange?: (values: string[]) => void;
13
11
  disabled?: boolean;
14
12
  readOnly?: boolean;
15
13
  required?: boolean;
@@ -21,9 +19,8 @@ interface CheckRadioProps {
21
19
  iconSize?: number;
22
20
  iconCheckedBgColor?: string;
23
21
  iconUncheckedBorderColor?: string;
24
- switchBgColor?: string;
25
22
  textColor?: string;
26
23
  errorStyle?: React.CSSProperties;
27
24
  }
28
- export declare const CheckRadio: React.FC<CheckRadioProps>;
25
+ export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
29
26
  export {};
@@ -1,63 +1,53 @@
1
1
  import React from "react";
2
- interface Option {
2
+ export interface Option {
3
3
  label: string;
4
4
  value: string;
5
5
  icon?: React.ReactNode;
6
6
  disabled?: boolean;
7
+ description?: string;
7
8
  }
8
- interface DropdownProps {
9
+ export interface DropdownProps {
9
10
  options: Option[];
10
11
  value?: string;
12
+ values?: string[];
11
13
  defaultValue?: string;
12
- onChange?: (value: string) => void;
14
+ defaultValues?: string[];
15
+ onChange?: (value: string | string[]) => void;
13
16
  placeholder?: string;
14
17
  disabled?: boolean;
15
18
  searchable?: boolean;
16
19
  multiSelect?: boolean;
17
20
  clearable?: boolean;
18
21
  virtualized?: boolean;
19
- optionHeight?: number;
20
- visibleOptions?: number;
21
- width?: string;
22
- height?: string;
22
+ width?: string | number;
23
+ dropdownMaxHeight?: string;
24
+ borderRadius?: string;
25
+ boxShadow?: string;
23
26
  borderColor?: string;
24
- focusBorderColor?: string;
25
- errorBorderColor?: string;
26
- backgroundColor?: string;
27
+ accentColor?: string;
28
+ theme?: "light" | "dark" | "custom";
29
+ menuBg?: string;
30
+ controlBg?: string;
27
31
  textColor?: string;
32
+ hoverBg?: string;
33
+ selectedBg?: string;
34
+ disabledBg?: string;
35
+ disabledTextColor?: string;
28
36
  placeholderColor?: string;
29
- hoverColor?: string;
30
- selectedColor?: string;
31
- disabledColor?: string;
32
- padding?: string;
33
- margin?: string;
34
- borderRadius?: string;
35
- boxShadow?: string;
36
- optionPadding?: string;
37
- optionGap?: string;
38
37
  transitionDuration?: string;
39
- dropdownMaxHeight?: string;
40
- dropdownMinWidth?: string;
41
38
  className?: string;
42
- dropdownClassName?: string;
39
+ controlClassName?: string;
40
+ menuClassName?: string;
43
41
  optionClassName?: string;
44
- inputClassName?: string;
45
42
  style?: React.CSSProperties;
46
- dropdownStyle?: React.CSSProperties;
43
+ controlStyle?: React.CSSProperties;
44
+ menuStyle?: React.CSSProperties;
47
45
  optionStyle?: React.CSSProperties;
48
- inputStyle?: React.CSSProperties;
49
46
  iconPrefix?: React.ReactNode;
50
47
  iconSuffix?: React.ReactNode;
51
48
  clearIcon?: React.ReactNode;
52
49
  dropdownIcon?: React.ReactNode;
53
50
  checkIcon?: React.ReactNode;
54
- ariaLabel?: string;
55
- ariaLabelledby?: string;
56
- ariaDescribedby?: string;
57
- onFocus?: () => void;
58
- onBlur?: () => void;
59
- onOpen?: () => void;
60
- onClose?: () => void;
61
51
  }
62
- export declare const Dropdown: React.FC<DropdownProps>;
63
- export {};
52
+ export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
53
+ export default Dropdown;
@@ -1,24 +1,17 @@
1
1
  import React, { ReactNode, CSSProperties } from "react";
2
2
  export interface ModalProps {
3
- /** Controls whether the modal is visible */
4
3
  isOpen: boolean;
5
- /** Callback fired when modal requests to close */
6
4
  onClose: () => void;
7
- /** Modal content */
8
5
  children: ReactNode;
9
- /** Optional ARIA label for accessibility */
10
6
  ariaLabel?: string;
11
- /** Optional title for screen readers */
12
7
  title?: string;
13
- /** Custom styles */
14
8
  overlayStyle?: CSSProperties;
15
9
  modalStyle?: CSSProperties;
16
10
  closeButtonStyle?: CSSProperties;
17
- /** Enable/disable overlay click to close */
18
11
  disableOverlayClose?: boolean;
19
- /** Animation duration (ms) */
20
12
  transitionDuration?: number;
21
- /** Optional classNames for CSS frameworks like Tailwind */
22
13
  className?: string;
14
+ /** Dark mode toggle */
15
+ darkMode?: boolean;
23
16
  }
24
17
  export declare const Modal: React.FC<ModalProps>;
@@ -0,0 +1,25 @@
1
+ import React from "react";
2
+ interface Option {
3
+ label: string;
4
+ value: string;
5
+ }
6
+ interface RadioGroupProps {
7
+ name?: string;
8
+ options: Option[];
9
+ selectedValue?: string;
10
+ onChange?: (value: string) => void;
11
+ disabled?: boolean;
12
+ readOnly?: boolean;
13
+ required?: boolean;
14
+ error?: string;
15
+ className?: string;
16
+ style?: React.CSSProperties;
17
+ labelStyle?: React.CSSProperties;
18
+ iconSize?: number;
19
+ iconCheckedBgColor?: string;
20
+ iconUncheckedBorderColor?: string;
21
+ textColor?: string;
22
+ errorStyle?: React.CSSProperties;
23
+ }
24
+ export declare const RadioGroup: React.FC<RadioGroupProps>;
25
+ export {};
@@ -0,0 +1,25 @@
1
+ import React from "react";
2
+ interface Option {
3
+ label: string;
4
+ value: string;
5
+ }
6
+ interface SwitchGroupProps {
7
+ name?: string;
8
+ options: Option[];
9
+ selectedValues?: string[];
10
+ onChange?: (values: string[]) => void;
11
+ disabled?: boolean;
12
+ readOnly?: boolean;
13
+ required?: boolean;
14
+ error?: string;
15
+ className?: string;
16
+ style?: React.CSSProperties;
17
+ labelStyle?: React.CSSProperties;
18
+ iconSize?: number;
19
+ iconCheckedBgColor?: string;
20
+ switchBgColor?: string;
21
+ textColor?: string;
22
+ errorStyle?: React.CSSProperties;
23
+ }
24
+ export declare const SwitchGroup: React.FC<SwitchGroupProps>;
25
+ export {};
@@ -7,7 +7,9 @@ export { AudioGallery } from "./components/basic/AudioGallery";
7
7
  export { Badge } from "./components/basic/Badge";
8
8
  export { Button } from "./components/basic/Button";
9
9
  export { Card } from "./components/basic/Card";
10
- export { CheckRadio } from "./components/basic/CheckRadioInput";
10
+ export { CheckboxGroup } from "./components/basic/CheckboxGroup";
11
+ export { RadioGroup } from "./components/basic/RadioGroup";
12
+ export { SwitchGroup } from "./components/basic/SwitchGroup";
11
13
  export { Container } from "./components/basic/Container";
12
14
  export { Flexbox } from "./components/basic/Flexbox";
13
15
  export { Stack, HStack, VStack } from "./components/basic/Stack";
package/dist/ui.css CHANGED
@@ -1 +1 @@
1
- /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-500:oklch(72.3% .219 149.579);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-white:#fff;--spacing:.25rem;--ease-out:cubic-bezier(0,0,.2,1);--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.right-0{right:calc(var(--spacing)*0)}.bottom-0{bottom:calc(var(--spacing)*0)}.z-10{z-index:10}.z-\[1000\]{z-index:1000}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-8{height:calc(var(--spacing)*8)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-full{height:100%}.w-2{width:calc(var(--spacing)*2)}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-full{width:100%}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.\!resize{resize:both!important}.resize{resize:both}.items-center{align-items:center}.justify-center{justify-content:center}:where(.-space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*-2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*-2)*calc(1 - var(--tw-space-x-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-white{border-color:var(--color-white)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-green-500{background-color:var(--color-green-500)}.bg-red-500{background-color:var(--color-red-500)}.bg-yellow-500{background-color:var(--color-yellow-500)}.object-cover{object-fit:cover}.p-4{padding:calc(var(--spacing)*4)}.text-gray-500{color:var(--color-gray-500)}.text-white{color:var(--color-white)}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}@media(prefers-color-scheme:dark){.dark\:bg-gray-600{background-color:var(--color-gray-600)}.dark\:text-gray-400{color:var(--color-gray-400)}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
1
+ /*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-500:oklch(72.3% .219 149.579);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-white:#fff;--spacing:.25rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.right-0{right:calc(var(--spacing)*0)}.bottom-0{bottom:calc(var(--spacing)*0)}.z-10{z-index:10}.z-\[1000\]{z-index:1000}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-2{height:calc(var(--spacing)*2)}.h-3{height:calc(var(--spacing)*3)}.h-4{height:calc(var(--spacing)*4)}.h-8{height:calc(var(--spacing)*8)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-full{height:100%}.w-2{width:calc(var(--spacing)*2)}.w-3{width:calc(var(--spacing)*3)}.w-4{width:calc(var(--spacing)*4)}.w-8{width:calc(var(--spacing)*8)}.w-12{width:calc(var(--spacing)*12)}.w-16{width:calc(var(--spacing)*16)}.w-full{width:100%}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.\!resize{resize:both!important}.resize{resize:both}.items-center{align-items:center}.justify-center{justify-content:center}:where(.-space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing)*-2)*var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing)*-2)*calc(1 - var(--tw-space-x-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-white{border-color:var(--color-white)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-400{background-color:var(--color-gray-400)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-green-500{background-color:var(--color-green-500)}.bg-red-500{background-color:var(--color-red-500)}.bg-yellow-500{background-color:var(--color-yellow-500)}.object-cover{object-fit:cover}.p-4{padding:calc(var(--spacing)*4)}.text-gray-500{color:var(--color-gray-500)}.text-white{color:var(--color-white)}.italic{font-style:italic}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}@media(prefers-color-scheme:dark){.dark\:bg-gray-600{background-color:var(--color-gray-600)}.dark\:text-gray-400{color:var(--color-gray-400)}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neuctra/ui",
3
- "version": "0.2.3",
3
+ "version": "0.2.4",
4
4
  "type": "module",
5
5
  "description": "A modern, responsive, customizable React UI component library powered by Tailwind CSS and Vite.",
6
6
  "author": "Your Name <tahaasifaqwe@gmail.com>",
@@ -1,83 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- export const CheckRadio = ({ type = "checkbox", name, options, selectedValues, onChange, disabled = false, readOnly = false, required = false, error, className = "", customIcon, style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", // blue-600
3
- iconUncheckedBorderColor = "#9ca3af", // gray-400
4
- switchBgColor = "#d1d5db", // gray-300
5
- textColor = "#374151", // gray-700
6
- errorStyle, }) => {
7
- const isCheckbox = type === "checkbox";
8
- const isRadio = type === "radio";
9
- const isSwitch = type === "switch";
10
- const handleChange = (value) => {
11
- if (!onChange)
12
- return;
13
- if (isCheckbox) {
14
- const updatedValues = Array.isArray(selectedValues)
15
- ? selectedValues.includes(value)
16
- ? selectedValues.filter((v) => v !== value)
17
- : [...selectedValues, value]
18
- : [value];
19
- onChange(updatedValues);
20
- }
21
- else {
22
- onChange(value);
23
- }
24
- };
25
- return (_jsxs("div", { className: className, style: {
26
- display: "flex",
27
- flexDirection: "column",
28
- gap: 8,
29
- ...style,
30
- }, role: type, "aria-disabled": disabled, children: [options.map((option) => {
31
- const isChecked = isCheckbox
32
- ? Array.isArray(selectedValues) && selectedValues.includes(option.value)
33
- : selectedValues === option.value;
34
- return (_jsxs("label", { style: {
35
- display: "flex",
36
- alignItems: "center",
37
- justifyContent: "space-between",
38
- cursor: disabled ? "not-allowed" : "pointer",
39
- opacity: disabled ? 0.6 : 1,
40
- gap: 8,
41
- userSelect: "none",
42
- ...labelStyle,
43
- }, children: [_jsx("span", { style: { color: textColor, fontSize: 14 }, children: option.label }), _jsx("input", { type: isSwitch ? "checkbox" : type, name: name, value: option.value, checked: isChecked, disabled: disabled || readOnly, required: required, onChange: () => handleChange(option.value), style: { display: "none" } }), isSwitch ? (_jsx("span", { style: {
44
- position: "relative",
45
- width: iconSize * 2,
46
- height: iconSize * 1.1,
47
- borderRadius: 9999,
48
- backgroundColor: isChecked ? iconCheckedBgColor : switchBgColor,
49
- transition: "background 0.2s ease",
50
- flexShrink: 0,
51
- }, children: _jsx("span", { style: {
52
- position: "absolute",
53
- top: 2,
54
- left: isChecked ? iconSize : 2,
55
- width: iconSize - 4,
56
- height: iconSize - 4,
57
- borderRadius: "50%",
58
- backgroundColor: "#fff",
59
- transition: "left 0.2s ease",
60
- } }) })) : customIcon ? (customIcon(isChecked)) : (_jsxs("span", { style: {
61
- display: "inline-flex",
62
- justifyContent: "center",
63
- alignItems: "center",
64
- width: iconSize,
65
- height: iconSize,
66
- borderRadius: isCheckbox ? 4 : "50%",
67
- border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
68
- backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
69
- transition: "all 0.2s ease",
70
- flexShrink: 0,
71
- }, children: [isChecked && isRadio && (_jsx("span", { style: {
72
- width: iconSize / 2,
73
- height: iconSize / 2,
74
- borderRadius: "50%",
75
- backgroundColor: "white",
76
- } })), isChecked && isCheckbox && (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "white", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", style: { width: iconSize * 0.6, height: iconSize * 0.6 }, children: _jsx("polyline", { points: "20 6 9 17 4 12" }) }))] }))] }, option.value));
77
- }), error && (_jsx("p", { role: "alert", style: {
78
- color: "#dc2626",
79
- fontSize: 12,
80
- marginTop: 4,
81
- ...errorStyle,
82
- }, children: error }))] }));
83
- };