@neuctra/ui 0.2.3 → 0.2.5

package/dist/src/components/basic/Table.js

@@ -1,29 +1,48 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Table = ({ children, style, className }) => (_jsx("table", { className: className, style: {
-        width: "100%",
-        borderCollapse: "collapse",
-        borderSpacing: 0,
+/* ---------------------------- Table Container ---------------------------- */
+export const Table = ({ children, style, className }) => (_jsx("div", { style: {
+        overflowX: "auto",
+        background: "#ffffff",
+        borderRadius: 12,
+        boxShadow: "0 2px 6px rgba(0,0,0,0.05)",
+        border: "1px solid #e5e7eb",
+        ...style,
+    }, className: className, children: _jsx("table", { style: {
+            width: "100%",
+            borderCollapse: "collapse",
+            borderSpacing: 0,
+            borderRadius: 12,
+            overflow: "hidden",
+        }, children: children }) }));
+/* ---------------------------- Table Head ---------------------------- */
+export const THead = ({ children, style, className, }) => (_jsx("thead", { className: className, style: {
+        backgroundColor: "#f3f4f6",
+        color: "#111827",
+        fontWeight: 600,
         ...style,
     }, children: children }));
-export const THead = ({ children, style, className }) => (_jsx("thead", { className: className, style: {
-        backgroundColor: "#f9fafb",
-        borderBottom: "2px solid #e5e7eb",
+/* ---------------------------- Table Body ---------------------------- */
+export const TBody = ({ children, style, className, }) => (_jsx("tbody", { className: className, style: {
+        backgroundColor: "#ffffff",
         ...style,
     }, children: children }));
-export const TBody = ({ children, style, className }) => (_jsx("tbody", { className: className, style: style, children: children }));
-export const TRow = ({ children, style, className }) => (_jsx("tr", { className: className, style: {
+/* ---------------------------- Table Row ---------------------------- */
+export const TRow = ({ children, style, className, }) => (_jsx("tr", { className: className, style: {
         borderBottom: "1px solid #e5e7eb",
         transition: "background 0.2s ease",
+        cursor: "default",
         ...style,
-    }, children: children }));
+    }, onMouseEnter: (e) => (e.currentTarget.style.backgroundColor = "#f9fafb"), onMouseLeave: (e) => (e.currentTarget.style.backgroundColor = "transparent"), children: children }));
+/* ---------------------------- Table Head Cell ---------------------------- */
 export const TH = ({ children, style, className }) => (_jsx("th", { className: className, style: {
         textAlign: "left",
         padding: "12px 16px",
-        fontWeight: 600,
         fontSize: "0.875rem",
         color: "#374151",
+        borderBottom: "2px solid #e5e7eb",
         ...style,
     }, children: children }));
+/* ---------------------------- Table Data Cell ---------------------------- */
 export const TD = ({ children, style, className }) => (_jsx("td", { className: className, style: {
         padding: "12px 16px",
         fontSize: "0.875rem",

package/dist/src/index.js

@@ -17,8 +17,10 @@ export { Badge } from "./components/basic/Badge"; // ✅ Finalized
 export { Button } from "./components/basic/Button"; // ✅ Finalized
 // Cards
 export { Card } from "./components/basic/Card"; // ✅ Finalized
-// Checkboxes & Radios
-export { CheckRadio } from "./components/basic/CheckRadioInput"; // ✅ Finalized
+// ✅ Checkbox, Radio & Switch Components
+export { CheckboxGroup } from "./components/basic/CheckboxGroup";
+export { RadioGroup } from "./components/basic/RadioGroup";
+export { SwitchGroup } from "./components/basic/SwitchGroup";
 // Containers & Layout
 export { Container } from "./components/basic/Container"; // ✅ Finalized
 export { Flexbox } from "./components/basic/Flexbox"; // ✅ Finalized

package/dist/types/src/components/basic/Alert.d.ts

@@ -26,6 +26,5 @@ export interface AlertProps {
     className?: string;
     style?: React.CSSProperties;
 }
-/** 🎯 Production-grade Alert Component */
 export declare const Alert: React.FC<AlertProps>;
 export {};

package/dist/types/src/components/basic/Card.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode, ElementType, ForwardedRef, ReactElement, ComponentPropsWithoutRef } from "react";
-type CardVariant = "elevated" | "outline" | "flat";
+type CardVariant = string;
 type CardOwnProps = {
     as?: ElementType;
     children?: ReactNode;

package/dist/types/src/components/basic/{CheckRadioInput.d.ts → CheckboxGroup.d.ts}

@@ -3,13 +3,11 @@ interface Option {
     label: string;
     value: string;
 }
-type CheckRadioType = "checkbox" | "radio" | "switch";
-interface CheckRadioProps {
-    type?: CheckRadioType;
+interface CheckboxGroupProps {
     name?: string;
     options: Option[];
-    selectedValues?: string[] | string;
-    onChange?: (value: string | string[]) => void;
+    selectedValues?: string[];
+    onChange?: (values: string[]) => void;
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
@@ -21,9 +19,8 @@ interface CheckRadioProps {
     iconSize?: number;
     iconCheckedBgColor?: string;
     iconUncheckedBorderColor?: string;
-    switchBgColor?: string;
     textColor?: string;
     errorStyle?: React.CSSProperties;
 }
-export declare const CheckRadio: React.FC<CheckRadioProps>;
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
 export {};

package/dist/types/src/components/basic/DropDown.d.ts

@@ -1,63 +1,53 @@
 import React from "react";
-interface Option {
+export interface Option {
     label: string;
     value: string;
     icon?: React.ReactNode;
     disabled?: boolean;
+    description?: string;
 }
-interface DropdownProps {
+export interface DropdownProps {
     options: Option[];
     value?: string;
+    values?: string[];
     defaultValue?: string;
-    onChange?: (value: string) => void;
+    defaultValues?: string[];
+    onChange?: (value: string | string[]) => void;
     placeholder?: string;
     disabled?: boolean;
     searchable?: boolean;
     multiSelect?: boolean;
     clearable?: boolean;
     virtualized?: boolean;
-    optionHeight?: number;
-    visibleOptions?: number;
-    width?: string;
-    height?: string;
+    width?: string | number;
+    dropdownMaxHeight?: string;
+    borderRadius?: string;
+    boxShadow?: string;
     borderColor?: string;
-    focusBorderColor?: string;
-    errorBorderColor?: string;
-    backgroundColor?: string;
+    accentColor?: string;
+    theme?: "light" | "dark" | "custom";
+    menuBg?: string;
+    controlBg?: string;
     textColor?: string;
+    hoverBg?: string;
+    selectedBg?: string;
+    disabledBg?: string;
+    disabledTextColor?: string;
     placeholderColor?: string;
-    hoverColor?: string;
-    selectedColor?: string;
-    disabledColor?: string;
-    padding?: string;
-    margin?: string;
-    borderRadius?: string;
-    boxShadow?: string;
-    optionPadding?: string;
-    optionGap?: string;
     transitionDuration?: string;
-    dropdownMaxHeight?: string;
-    dropdownMinWidth?: string;
     className?: string;
-    dropdownClassName?: string;
+    controlClassName?: string;
+    menuClassName?: string;
     optionClassName?: string;
-    inputClassName?: string;
     style?: React.CSSProperties;
-    dropdownStyle?: React.CSSProperties;
+    controlStyle?: React.CSSProperties;
+    menuStyle?: React.CSSProperties;
     optionStyle?: React.CSSProperties;
-    inputStyle?: React.CSSProperties;
     iconPrefix?: React.ReactNode;
     iconSuffix?: React.ReactNode;
     clearIcon?: React.ReactNode;
     dropdownIcon?: React.ReactNode;
     checkIcon?: React.ReactNode;
-    ariaLabel?: string;
-    ariaLabelledby?: string;
-    ariaDescribedby?: string;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    onOpen?: () => void;
-    onClose?: () => void;
 }
-export declare const Dropdown: React.FC<DropdownProps>;
-export {};
+export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
+export default Dropdown;

package/dist/types/src/components/basic/Modal.d.ts

@@ -1,24 +1,17 @@
 import React, { ReactNode, CSSProperties } from "react";
 export interface ModalProps {
-    /** Controls whether the modal is visible */
     isOpen: boolean;
-    /** Callback fired when modal requests to close */
     onClose: () => void;
-    /** Modal content */
     children: ReactNode;
-    /** Optional ARIA label for accessibility */
     ariaLabel?: string;
-    /** Optional title for screen readers */
     title?: string;
-    /** Custom styles */
     overlayStyle?: CSSProperties;
     modalStyle?: CSSProperties;
     closeButtonStyle?: CSSProperties;
-    /** Enable/disable overlay click to close */
     disableOverlayClose?: boolean;
-    /** Animation duration (ms) */
     transitionDuration?: number;
-    /** Optional classNames for CSS frameworks like Tailwind */
     className?: string;
+    /** Dark mode toggle */
+    darkMode?: boolean;
 }
 export declare const Modal: React.FC<ModalProps>;

package/dist/types/src/components/basic/RadioGroup.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+interface Option {
+    label: string;
+    value: string;
+}
+interface RadioGroupProps {
+    name?: string;
+    options: Option[];
+    selectedValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    error?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    iconSize?: number;
+    iconCheckedBgColor?: string;
+    iconUncheckedBorderColor?: string;
+    textColor?: string;
+    errorStyle?: React.CSSProperties;
+}
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export {};

package/dist/types/src/components/basic/SwitchGroup.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+interface Option {
+    label: string;
+    value: string;
+}
+interface SwitchGroupProps {
+    name?: string;
+    options: Option[];
+    selectedValues?: string[];
+    onChange?: (values: string[]) => void;
+    disabled?: boolean;
+    readOnly?: boolean;
+    required?: boolean;
+    error?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    labelStyle?: React.CSSProperties;
+    iconSize?: number;
+    iconCheckedBgColor?: string;
+    switchBgColor?: string;
+    textColor?: string;
+    errorStyle?: React.CSSProperties;
+}
+export declare const SwitchGroup: React.FC<SwitchGroupProps>;
+export {};

package/dist/types/src/index.d.ts

@@ -7,7 +7,9 @@ export { AudioGallery } from "./components/basic/AudioGallery";
 export { Badge } from "./components/basic/Badge";
 export { Button } from "./components/basic/Button";
 export { Card } from "./components/basic/Card";
-export { CheckRadio } from "./components/basic/CheckRadioInput";
+export { CheckboxGroup } from "./components/basic/CheckboxGroup";
+export { RadioGroup } from "./components/basic/RadioGroup";
+export { SwitchGroup } from "./components/basic/SwitchGroup";
 export { Container } from "./components/basic/Container";
 export { Flexbox } from "./components/basic/Flexbox";
 export { Stack, HStack, VStack } from "./components/basic/Stack";

package/dist/ui.css

@@ -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}
+/*! 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-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;--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}.z-10{z-index:10}.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}.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}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rounded{border-radius:.25rem}.border{border-style:var(--tw-border-style);border-width:1px}.p-4{padding:calc(var(--spacing)*4)}.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)}}@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-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

@@ -1,6 +1,6 @@
 {
   "name": "@neuctra/ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "description": "A modern, responsive, customizable React UI component library powered by Tailwind CSS and Vite.",
   "author": "Your Name <tahaasifaqwe@gmail.com>",

package/dist/components/avatar/AvatarGroup.d.ts

@@ -1,9 +0,0 @@
-import { default as React } from 'react';
-interface AvatarGroupProps {
-    avatars: string[];
-    size?: "small" | "medium" | "large";
-    maxVisible?: number;
-    className?: string;
-}
-export declare const AvatarGroup: React.FC<AvatarGroupProps>;
-export {};

package/dist/components/avatar/AvatarWithStatus.d.ts

@@ -1,10 +0,0 @@
-import { default as React } from 'react';
-interface AvatarWithStatusProps {
-    src: string;
-    alt?: string;
-    status?: "online" | "offline" | "away" | "busy";
-    size?: "small" | "medium" | "large";
-    className?: string;
-}
-export declare const AvatarWithStatus: React.FC<AvatarWithStatusProps>;
-export {};

package/dist/src/components/avatar/AvatarGroup.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const AvatarGroup = ({ avatars, size = "medium", maxVisible = 3, className = "", }) => {
-    const avatarSizes = {
-        small: "w-8 h-8",
-        medium: "w-12 h-12",
-        large: "w-16 h-16",
-    };
-    return (_jsxs("div", { className: "flex -space-x-2", children: [avatars.slice(0, maxVisible).map((src, index) => (_jsx("img", { src: src, className: `rounded-full border-2 border-white object-cover ${avatarSizes[size]} ${className}` }, index))), avatars.length > maxVisible && (_jsxs("span", { className: `rounded-full border-2 border-white bg-gray-500 text-white flex items-center justify-center ${avatarSizes[size]}`, children: ["+", avatars.length - maxVisible] }))] }));
-};

package/dist/src/components/avatar/AvatarWithStatus.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-export const AvatarWithStatus = ({ src, alt = "User Avatar", status = "online", size = "medium", className = "", }) => {
-    const [imageError, setImageError] = useState(false);
-    const avatarSizes = {
-        small: { size: "w-8 h-8", statusSize: "w-2 h-2" },
-        medium: { size: "w-12 h-12", statusSize: "w-3 h-3" },
-        large: { size: "w-16 h-16", statusSize: "w-4 h-4" },
-    };
-    const statusColors = {
-        online: "bg-green-500",
-        offline: "bg-gray-400",
-        away: "bg-yellow-500",
-        busy: "bg-red-500",
-    };
-    return (_jsxs("div", { className: `relative inline-block ${avatarSizes[size].size}`, children: [src && !imageError ? (_jsx("img", { src: src, alt: alt, "aria-label": alt, className: `rounded-full object-cover ${avatarSizes[size].size} ${className}`, onError: () => setImageError(true) })) : (_jsx("svg", { "aria-label": "Placeholder for user avatar" // Added for accessibility
-                , className: `rounded-full bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400 ${avatarSizes[size].size}`, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { fillRule: "evenodd", d: "M12 12a5 5 0 100-10 5 5 0 000 10zm-7 9c0-3 3-5 7-5s7 2 7 5v1H5v-1z", clipRule: "evenodd" }) })), _jsx("span", { className: `z-[1000] w-full h-full absolute bottom-0 right-0 border-2 border-white rounded-full ${statusColors[status]} ${avatarSizes[size].statusSize}` })] }));
-};

package/dist/src/components/basic/CheckRadioInput.js

@@ -1,83 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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
-iconUncheckedBorderColor = "#9ca3af", // gray-400
-switchBgColor = "#d1d5db", // gray-300
-textColor = "#374151", // gray-700
-errorStyle, }) => {
-    const isCheckbox = type === "checkbox";
-    const isRadio = type === "radio";
-    const isSwitch = type === "switch";
-    const handleChange = (value) => {
-        if (!onChange)
-            return;
-        if (isCheckbox) {
-            const updatedValues = Array.isArray(selectedValues)
-                ? selectedValues.includes(value)
-                    ? selectedValues.filter((v) => v !== value)
-                    : [...selectedValues, value]
-                : [value];
-            onChange(updatedValues);
-        }
-        else {
-            onChange(value);
-        }
-    };
-    return (_jsxs("div", { className: className, style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 8,
-            ...style,
-        }, role: type, "aria-disabled": disabled, children: [options.map((option) => {
-                const isChecked = isCheckbox
-                    ? Array.isArray(selectedValues) && selectedValues.includes(option.value)
-                    : selectedValues === option.value;
-                return (_jsxs("label", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        cursor: disabled ? "not-allowed" : "pointer",
-                        opacity: disabled ? 0.6 : 1,
-                        gap: 8,
-                        userSelect: "none",
-                        ...labelStyle,
-                    }, 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: {
-                                position: "relative",
-                                width: iconSize * 2,
-                                height: iconSize * 1.1,
-                                borderRadius: 9999,
-                                backgroundColor: isChecked ? iconCheckedBgColor : switchBgColor,
-                                transition: "background 0.2s ease",
-                                flexShrink: 0,
-                            }, children: _jsx("span", { style: {
-                                    position: "absolute",
-                                    top: 2,
-                                    left: isChecked ? iconSize : 2,
-                                    width: iconSize - 4,
-                                    height: iconSize - 4,
-                                    borderRadius: "50%",
-                                    backgroundColor: "#fff",
-                                    transition: "left 0.2s ease",
-                                } }) })) : customIcon ? (customIcon(isChecked)) : (_jsxs("span", { style: {
-                                display: "inline-flex",
-                                justifyContent: "center",
-                                alignItems: "center",
-                                width: iconSize,
-                                height: iconSize,
-                                borderRadius: isCheckbox ? 4 : "50%",
-                                border: `2px solid ${isChecked ? iconCheckedBgColor : iconUncheckedBorderColor}`,
-                                backgroundColor: isChecked ? iconCheckedBgColor : "transparent",
-                                transition: "all 0.2s ease",
-                                flexShrink: 0,
-                            }, children: [isChecked && isRadio && (_jsx("span", { style: {
-                                        width: iconSize / 2,
-                                        height: iconSize / 2,
-                                        borderRadius: "50%",
-                                        backgroundColor: "white",
-                                    } })), 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));
-            }), error && (_jsx("p", { role: "alert", style: {
-                    color: "#dc2626",
-                    fontSize: 12,
-                    marginTop: 4,
-                    ...errorStyle,
-                }, children: error }))] }));
-};

package/dist/types/src/components/avatar/AvatarGroup.d.ts

@@ -1,9 +0,0 @@
-import React from "react";
-interface AvatarGroupProps {
-    avatars: string[];
-    size?: "small" | "medium" | "large";
-    maxVisible?: number;
-    className?: string;
-}
-export declare const AvatarGroup: React.FC<AvatarGroupProps>;
-export {};

package/dist/types/src/components/avatar/AvatarWithStatus.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-interface AvatarWithStatusProps {
-    src: string;
-    alt?: string;
-    status?: "online" | "offline" | "away" | "busy";
-    size?: "small" | "medium" | "large";
-    className?: string;
-}
-export declare const AvatarWithStatus: React.FC<AvatarWithStatusProps>;
-export {};