@neuctra/ui 0.2.8 → 0.2.10

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 (81) hide show
  1. package/dist/index.cjs.js +107 -138
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.es.js +1555 -2367
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/{components → types/components}/basic/Alert.d.ts +3 -2
  6. package/dist/{components → types/components}/basic/Avatar.d.ts +1 -0
  7. package/dist/{components → types/components}/basic/Badge.d.ts +1 -2
  8. package/dist/{components → types/components}/basic/Button.d.ts +2 -2
  9. package/dist/{components → types/components}/basic/Input.d.ts +1 -1
  10. package/dist/types/components/basic/Tabs.d.ts +76 -0
  11. package/dist/{components → types/components}/basic/Text.d.ts +25 -20
  12. package/dist/{index.d.ts → types/index.d.ts} +3 -7
  13. package/dist/ui.css +1 -1
  14. package/package.json +9 -2
  15. package/dist/components/basic/Tabs.d.ts +0 -47
  16. package/dist/src/components/basic/Accordation.js +0 -73
  17. package/dist/src/components/basic/Alert.js +0 -36
  18. package/dist/src/components/basic/AudioGallery.js +0 -425
  19. package/dist/src/components/basic/AudioPlayer.js +0 -130
  20. package/dist/src/components/basic/Avatar.js +0 -68
  21. package/dist/src/components/basic/Badge.js +0 -27
  22. package/dist/src/components/basic/Button.js +0 -25
  23. package/dist/src/components/basic/CheckboxGroup.js +0 -63
  24. package/dist/src/components/basic/Container.js +0 -26
  25. package/dist/src/components/basic/Drawer.js +0 -43
  26. package/dist/src/components/basic/DropDown.js +0 -98
  27. package/dist/src/components/basic/FlexView.js +0 -19
  28. package/dist/src/components/basic/GridView.js +0 -18
  29. package/dist/src/components/basic/Image.js +0 -55
  30. package/dist/src/components/basic/Input.js +0 -82
  31. package/dist/src/components/basic/List.js +0 -29
  32. package/dist/src/components/basic/Modal.js +0 -34
  33. package/dist/src/components/basic/RadioGroup.js +0 -54
  34. package/dist/src/components/basic/Stack.js +0 -22
  35. package/dist/src/components/basic/SwitchGroup.js +0 -76
  36. package/dist/src/components/basic/Table.js +0 -30
  37. package/dist/src/components/basic/Tabs.js +0 -140
  38. package/dist/src/components/basic/Text.js +0 -25
  39. package/dist/src/index.js +0 -44
  40. package/dist/types/src/components/basic/Accordation.d.ts +0 -40
  41. package/dist/types/src/components/basic/Alert.d.ts +0 -17
  42. package/dist/types/src/components/basic/AudioGallery.d.ts +0 -23
  43. package/dist/types/src/components/basic/AudioPlayer.d.ts +0 -16
  44. package/dist/types/src/components/basic/Avatar.d.ts +0 -23
  45. package/dist/types/src/components/basic/Badge.d.ts +0 -21
  46. package/dist/types/src/components/basic/Button.d.ts +0 -15
  47. package/dist/types/src/components/basic/CheckboxGroup.d.ts +0 -27
  48. package/dist/types/src/components/basic/Container.d.ts +0 -15
  49. package/dist/types/src/components/basic/Drawer.d.ts +0 -22
  50. package/dist/types/src/components/basic/DropDown.d.ts +0 -33
  51. package/dist/types/src/components/basic/FlexView.d.ts +0 -16
  52. package/dist/types/src/components/basic/GridView.d.ts +0 -14
  53. package/dist/types/src/components/basic/Image.d.ts +0 -37
  54. package/dist/types/src/components/basic/Input.d.ts +0 -33
  55. package/dist/types/src/components/basic/List.d.ts +0 -20
  56. package/dist/types/src/components/basic/Modal.d.ts +0 -17
  57. package/dist/types/src/components/basic/RadioGroup.d.ts +0 -26
  58. package/dist/types/src/components/basic/Stack.d.ts +0 -17
  59. package/dist/types/src/components/basic/SwitchGroup.d.ts +0 -26
  60. package/dist/types/src/components/basic/Table.d.ts +0 -28
  61. package/dist/types/src/components/basic/Tabs.d.ts +0 -47
  62. package/dist/types/src/components/basic/Text.d.ts +0 -1121
  63. package/dist/types/src/index.d.ts +0 -24
  64. package/dist/types/vite.config.d.ts +0 -2
  65. package/dist/vite.config.js +0 -34
  66. /package/dist/{components/basic/Accordation.d.ts → types/components/basic/Accordion.d.ts} +0 -0
  67. /package/dist/{components → types/components}/basic/AudioGallery.d.ts +0 -0
  68. /package/dist/{components → types/components}/basic/AudioPlayer.d.ts +0 -0
  69. /package/dist/{components → types/components}/basic/CheckboxGroup.d.ts +0 -0
  70. /package/dist/{components → types/components}/basic/Container.d.ts +0 -0
  71. /package/dist/{components → types/components}/basic/Drawer.d.ts +0 -0
  72. /package/dist/{components → types/components}/basic/DropDown.d.ts +0 -0
  73. /package/dist/{components → types/components}/basic/FlexView.d.ts +0 -0
  74. /package/dist/{components → types/components}/basic/GridView.d.ts +0 -0
  75. /package/dist/{components → types/components}/basic/Image.d.ts +0 -0
  76. /package/dist/{components → types/components}/basic/List.d.ts +0 -0
  77. /package/dist/{components → types/components}/basic/Modal.d.ts +0 -0
  78. /package/dist/{components → types/components}/basic/RadioGroup.d.ts +0 -0
  79. /package/dist/{components → types/components}/basic/Stack.d.ts +0 -0
  80. /package/dist/{components → types/components}/basic/SwitchGroup.d.ts +0 -0
  81. /package/dist/{components → types/components}/basic/Table.d.ts +0 -0
@@ -1,76 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useState, useEffect, useRef } from "react";
4
- import clsx from "clsx";
5
- export const SwitchGroup = ({ name, options, selectedValues = [], onChange, disabled = false, readOnly = false, required = false, error, className, style, labelStyle, iconSize = 20, iconCheckedBgColor = "#2563eb", switchBgColor = "#d1d5db", textColor = "#374151", errorStyle, darkMode = false, }) => {
6
- const containerRef = useRef(null);
7
- const [focusedIndex, setFocusedIndex] = useState(null);
8
- const handleChange = (value) => {
9
- if (!onChange || disabled || readOnly)
10
- return;
11
- const updatedValues = selectedValues.includes(value)
12
- ? selectedValues.filter((v) => v !== value)
13
- : [...selectedValues, value];
14
- onChange(updatedValues);
15
- };
16
- // Keyboard navigation
17
- useEffect(() => {
18
- const container = containerRef.current;
19
- if (!container)
20
- return;
21
- const handleKeyDown = (e) => {
22
- if (disabled)
23
- return;
24
- if (focusedIndex === null)
25
- return;
26
- const currentIndex = focusedIndex;
27
- if (e.key === "ArrowRight" || e.key === "ArrowDown") {
28
- e.preventDefault();
29
- const nextIndex = (currentIndex + 1) % options.length;
30
- setFocusedIndex(nextIndex);
31
- }
32
- if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
33
- e.preventDefault();
34
- const prevIndex = (currentIndex - 1 + options.length) % options.length;
35
- setFocusedIndex(prevIndex);
36
- }
37
- if (e.key === " " || e.key === "Enter") {
38
- e.preventDefault();
39
- handleChange(options[currentIndex].value);
40
- }
41
- };
42
- container.addEventListener("keydown", handleKeyDown);
43
- return () => container.removeEventListener("keydown", handleKeyDown);
44
- }, [focusedIndex, options, selectedValues, disabled]);
45
- return (_jsxs("div", { ref: containerRef, role: "group", "aria-disabled": disabled, "aria-invalid": !!error, tabIndex: 0, className: clsx("flex flex-col gap-2", className), style: { ...style }, children: [options.map((option, index) => {
46
- const isChecked = selectedValues.includes(option.value);
47
- const isFocused = focusedIndex === index;
48
- return (_jsxs("label", { className: clsx("flex items-center justify-between cursor-pointer select-none transition-opacity", disabled ? "opacity-50 cursor-not-allowed" : "opacity-100", isFocused ? "ring-2 ring-blue-400" : ""), style: { ...labelStyle }, onFocus: () => setFocusedIndex(index), children: [_jsx("span", { style: { color: textColor, fontSize: 14 }, children: option.label }), _jsx("input", { type: "checkbox", name: name, value: option.value, checked: isChecked, disabled: disabled || readOnly, required: required, onChange: () => handleChange(option.value), style: { display: "none" } }), _jsx("span", { className: clsx("relative inline-flex rounded-full transition-colors"), style: {
49
- width: iconSize * 2,
50
- height: iconSize * 1.1,
51
- backgroundColor: isChecked
52
- ? iconCheckedBgColor
53
- : switchBgColor,
54
- transition: "background-color 0.25s ease",
55
- borderRadius: 9999,
56
- }, children: _jsx("span", { style: {
57
- position: "absolute",
58
- top: "50%",
59
- left: isChecked
60
- ? `calc(100% - ${iconSize - 4}px - 2px)`
61
- : "2px",
62
- transform: "translateY(-50%)",
63
- width: iconSize - 4,
64
- height: iconSize - 4,
65
- borderRadius: "50%",
66
- backgroundColor: "#fff",
67
- boxShadow: "0 1px 2px rgba(0,0,0,0.3)",
68
- transition: "left 0.25s ease",
69
- } }) })] }, option.value));
70
- }), error && (_jsx("p", { role: "alert", style: {
71
- color: "#dc2626",
72
- fontSize: 12,
73
- marginTop: 4,
74
- ...errorStyle,
75
- }, children: error }))] }));
76
- };
@@ -1,30 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx } from "react/jsx-runtime";
3
- import clsx from "clsx";
4
- /* ---------------------------- Table Container ---------------------------- */
5
- export const Table = ({ children, style, className }) => (_jsx("div", { className: clsx("overflow-x-auto rounded-lg shadow-sm border border-gray-200", className), style: {
6
- background: "#ffffff",
7
- ...style,
8
- }, children: _jsx("table", { className: "w-full border-collapse", style: {
9
- borderSpacing: 0,
10
- borderRadius: 12,
11
- overflow: "hidden",
12
- }, children: children }) }));
13
- /* ---------------------------- Table Head ---------------------------- */
14
- export const THead = ({ children, style, className, }) => (_jsx("thead", { className: clsx("bg-gray-100 text-gray-900 font-semibold", className), style: {
15
- ...style,
16
- }, children: children }));
17
- /* ---------------------------- Table Body ---------------------------- */
18
- export const TBody = ({ children, style, className }) => (_jsx("tbody", { className: clsx("bg-white", className), style: { ...style }, children: children }));
19
- export const TRow = ({ children, style, className, onClick, hoverBgColor = "#f9fafb", darkMode = false, }) => (_jsx("tr", { className: clsx("transition-colors duration-200 cursor-default", onClick ? "hover:cursor-pointer" : "", className), style: { borderBottom: "1px solid #e5e7eb", ...style }, onClick: onClick, onMouseEnter: (e) => {
20
- if (!darkMode)
21
- e.currentTarget.style.backgroundColor = hoverBgColor;
22
- else
23
- e.currentTarget.style.backgroundColor = "#1f2937";
24
- }, onMouseLeave: (e) => {
25
- e.currentTarget.style.backgroundColor = "transparent";
26
- }, children: children }));
27
- /* ---------------------------- Table Head Cell ---------------------------- */
28
- export const TH = ({ children, style, className }) => (_jsx("th", { className: clsx("text-left px-4 py-3 text-sm text-gray-700 border-b-2 border-gray-200", className), style: { ...style }, children: children }));
29
- /* ---------------------------- Table Data Cell ---------------------------- */
30
- export const TD = ({ children, style, className }) => (_jsx("td", { className: clsx("px-4 py-3 text-sm text-gray-600", className), style: { ...style }, children: children }));
@@ -1,140 +0,0 @@
1
- "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { useState, useEffect, useRef } from "react";
4
- /** 💎 Modern, Fully Customizable Tabs */
5
- export const Tabs = ({ tabs, defaultActive = 0, position = "top", variant = "solid", fullWidth = false, gap = 8, radius = 8, padding = "12px 18px", transitionDuration = 200, elevation = 1, bordered = false, primaryColor = "#2563eb", backgroundColor = "transparent", textColor = "#374151", hoverColor = "#1d4ed8", activeColor = "#ffffff", borderColor = "#e5e7eb", disabledColor = "#9ca3af", responsiveBreakpoint = 768, showDrawerLabel = "Select Tab", drawerIcon = "☰", onTabChange, className = "", style, tabClassName = "", contentClassName = "", activeTabStyle, inactiveTabStyle, contentStyle, }) => {
6
- const [active, setActive] = useState(defaultActive);
7
- const [hovered, setHovered] = useState(null);
8
- const [isMobile, setIsMobile] = useState(false);
9
- const [drawerOpen, setDrawerOpen] = useState(false);
10
- const containerRef = useRef(null);
11
- /** 📱 Responsive detection */
12
- useEffect(() => {
13
- const check = () => setIsMobile(window.innerWidth <= responsiveBreakpoint);
14
- check();
15
- window.addEventListener("resize", check);
16
- return () => window.removeEventListener("resize", check);
17
- }, [responsiveBreakpoint]);
18
- /** 🎛 Handle tab change */
19
- const handleChange = (i) => {
20
- if (tabs[i].disabled)
21
- return;
22
- setActive(i);
23
- onTabChange?.(i);
24
- if (isMobile)
25
- setDrawerOpen(false);
26
- };
27
- /** ⚡ Keyboard navigation */
28
- const handleKeyDown = (e, i) => {
29
- if (e.key === "ArrowRight" || e.key === "ArrowDown") {
30
- e.preventDefault();
31
- handleChange((i + 1) % tabs.length);
32
- }
33
- else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
34
- e.preventDefault();
35
- handleChange((i - 1 + tabs.length) % tabs.length);
36
- }
37
- };
38
- /** 🎨 Base styles */
39
- const baseTab = {
40
- padding,
41
- borderRadius: radius,
42
- cursor: "pointer",
43
- display: "flex",
44
- alignItems: "center",
45
- gap: 8,
46
- justifyContent: "center",
47
- fontWeight: 500,
48
- transition: `all ${transitionDuration}ms ease`,
49
- background: "transparent",
50
- border: variant === "outline" ? `1px solid ${borderColor}` : "none",
51
- borderBottom: variant === "underline" ? `2px solid transparent` : undefined,
52
- color: textColor,
53
- width: fullWidth ? "100%" : "auto",
54
- userSelect: "none",
55
- };
56
- const activeTab = {
57
- background: variant === "solid" ? primaryColor : "transparent",
58
- color: activeColor,
59
- borderBottom: variant === "underline" ? `2px solid ${primaryColor}` : undefined,
60
- boxShadow: elevation > 0 ? `0 ${elevation}px ${elevation * 4}px ${primaryColor}33` : undefined,
61
- ...activeTabStyle,
62
- };
63
- const inactiveTab = {
64
- ...(variant === "outline" ? { borderColor } : {}),
65
- ...(variant === "underline" ? { borderBottomColor: "transparent" } : {}),
66
- ...inactiveTabStyle,
67
- };
68
- const hoverTab = {
69
- color: hoverColor,
70
- background: variant === "solid"
71
- ? `${primaryColor}11`
72
- : variant === "outline"
73
- ? `${primaryColor}11`
74
- : "transparent",
75
- };
76
- const disabledTab = {
77
- color: disabledColor,
78
- cursor: "not-allowed",
79
- opacity: 0.6,
80
- };
81
- const contentBox = {
82
- flexGrow: 1,
83
- borderTop: bordered && position === "top" ? `1px solid ${borderColor}` : undefined,
84
- borderLeft: bordered && position === "left" ? `1px solid ${borderColor}` : undefined,
85
- borderRight: bordered && position === "right" ? `1px solid ${borderColor}` : undefined,
86
- borderRadius: radius,
87
- ...contentStyle,
88
- };
89
- /** 🧱 Layout */
90
- const isVertical = position === "left" || position === "right";
91
- return (_jsxs("div", { ref: containerRef, className: `modern-tabs ${className}`, style: {
92
- display: "flex",
93
- flexDirection: isVertical ? (position === "right" ? "row-reverse" : "row") : "column",
94
- background: backgroundColor,
95
- border: bordered ? `1px solid ${borderColor}` : undefined,
96
- borderRadius: radius,
97
- overflow: "hidden",
98
- ...style,
99
- }, children: [_jsx("style", { children: `
100
- @keyframes tab-fade {
101
- from { opacity: 0; transform: translateY(5px); }
102
- to { opacity: 1; transform: translateY(0); }
103
- }
104
- .modern-tabs__content {
105
- animation: tab-fade ${transitionDuration}ms ease;
106
- }
107
- ` }), isMobile ? (_jsxs("div", { style: { width: "100%", padding: 8 }, children: [_jsxs("button", { onClick: () => setDrawerOpen(!drawerOpen), style: {
108
- ...baseTab,
109
- ...activeTab,
110
- justifyContent: "space-between",
111
- width: "100%",
112
- fontSize: 16,
113
- }, children: [showDrawerLabel, _jsx("span", { children: drawerIcon })] }), drawerOpen && (_jsx("div", { style: { display: "flex", flexDirection: "column", marginTop: 8, gap }, children: tabs.map((tab, i) => {
114
- const isActive = i === active;
115
- const isHovered = hovered === i;
116
- const isDisabled = tab.disabled;
117
- return (_jsxs("button", { disabled: isDisabled, onClick: () => handleChange(i), onKeyDown: (e) => handleKeyDown(e, i), onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null), className: tabClassName, style: {
118
- ...baseTab,
119
- ...(isActive ? activeTab : inactiveTab),
120
- ...(isHovered && !isActive && !isDisabled ? hoverTab : {}),
121
- ...(isDisabled ? disabledTab : {}),
122
- }, children: [tab.icon && _jsx("span", { children: tab.icon }), tab.label] }, i));
123
- }) }))] })) : (_jsx("div", { style: {
124
- display: "flex",
125
- flexDirection: isVertical ? "column" : "row",
126
- gap,
127
- padding: 8,
128
- minWidth: isVertical ? 200 : undefined,
129
- }, children: tabs.map((tab, i) => {
130
- const isActive = i === active;
131
- const isHovered = hovered === i;
132
- const isDisabled = tab.disabled;
133
- return (_jsxs("button", { disabled: isDisabled, onClick: () => handleChange(i), onKeyDown: (e) => handleKeyDown(e, i), onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null), className: tabClassName, style: {
134
- ...baseTab,
135
- ...(isActive ? activeTab : inactiveTab),
136
- ...(isHovered && !isActive && !isDisabled ? hoverTab : {}),
137
- ...(isDisabled ? disabledTab : {}),
138
- }, role: "tab", "aria-selected": isActive, children: [tab.icon && _jsx("span", { children: tab.icon }), tab.label] }, i));
139
- }) })), _jsx("div", { className: `modern-tabs__content ${contentClassName}`, style: contentBox, role: "tabpanel", children: tabs[active]?.content })] }));
140
- };
@@ -1,25 +0,0 @@
1
- "use client";
2
- import React from "react";
3
- import clsx from "clsx";
4
- const sizeClasses = {
5
- xs: "text-xs",
6
- sm: "text-sm",
7
- md: "text-base",
8
- lg: "text-lg",
9
- xl: "text-xl",
10
- "2xl": "text-2xl",
11
- };
12
- export function Text({ as, children, size = "md", weight = 400, align = "left", truncate = false, className, style, ...rest }) {
13
- const Element = (as || "p");
14
- return React.createElement(Element, {
15
- className: clsx("text-inherit", // ✅ inherits parent color
16
- sizeClasses[size] || "", truncate && "truncate", className),
17
- style: {
18
- fontWeight: weight,
19
- textAlign: align,
20
- ...style,
21
- },
22
- ...rest,
23
- }, children);
24
- }
25
- export default Text;
package/dist/src/index.js DELETED
@@ -1,44 +0,0 @@
1
- import "./style.css"; // 🔹 Global styles import (keep this as the only CSS import)
2
- // ==============================
3
- // ✅ BASIC COMPONENT EXPORTS
4
- // ==============================
5
- // Alerts & Notifications
6
- export { ToastProvider, useToast } from "./components/basic/Alert"; // ✅ Modern ShadCN-style toast
7
- // Accordions
8
- export { Accordion } from "./components/basic/Accordation"; // ✅ Finalized
9
- // Avatars
10
- export { Avatar } from "./components/basic/Avatar"; // ✅ Finalized
11
- // Audio Components
12
- export { AudioPlayer } from "./components/basic/AudioPlayer"; // ✅ Finalized
13
- export { AudioGallery } from "./components/basic/AudioGallery"; // ✅ Finalized
14
- // Badges
15
- export { Badge } from "./components/basic/Badge"; // ✅ Finalized
16
- // Buttons
17
- export { Button } from "./components/basic/Button"; // ✅ Finalized
18
- // ✅ Checkbox, Radio & Switch Components
19
- export { CheckboxGroup } from "./components/basic/CheckboxGroup";
20
- export { RadioGroup } from "./components/basic/RadioGroup";
21
- export { SwitchGroup } from "./components/basic/SwitchGroup";
22
- // Containers & Layout
23
- export { Container } from "./components/basic/Container"; // ✅ Finalized
24
- export { FlexView } from "./components/basic/FlexView"; // ✅ Finalized
25
- export { Stack, HStack, VStack } from "./components/basic/Stack"; // ✅ Finalized
26
- export { GridView } from "./components/basic/GridView"; // ✅ Finalized
27
- // Drawers
28
- export { Drawer, DrawerButton } from "./components/basic/Drawer"; // ✅ Finalized
29
- // Dropdowns
30
- export { Dropdown } from "./components/basic/DropDown"; // ✅ Finalized
31
- // Forms & Inputs
32
- export { Input } from "./components/basic/Input"; // ✅ Finalized
33
- // Images
34
- export { Image } from "./components/basic/Image"; // ✅ Finalized
35
- // Lists
36
- export { List } from "./components/basic/List"; // ✅ Finalized
37
- // Modals
38
- export { Modal } from "./components/basic/Modal"; // ✅ Finalized
39
- // Tables
40
- export { Table, TBody, TD, THead, TH, TRow } from "./components/basic/Table"; // ✅ Finalized
41
- // Tabs
42
- export { Tabs } from "./components/basic/Tabs"; // ✅ Finalized
43
- // Text
44
- export { Text } from "./components/basic/Text"; // ✅ Finalized
@@ -1,40 +0,0 @@
1
- import React, { ReactNode, CSSProperties } from "react";
2
- export interface AccordionItem {
3
- title: string | ReactNode;
4
- content: ReactNode;
5
- }
6
- export interface AccordionProps {
7
- items: AccordionItem[];
8
- allowMultiple?: boolean;
9
- defaultOpen?: number[];
10
- /** Appearance */
11
- borderColor?: string;
12
- backgroundColor?: string;
13
- textColor?: string;
14
- hoverBgColor?: string;
15
- hoverTextColor?: string;
16
- contentBgColor?: string;
17
- contentTextColor?: string;
18
- /** Layout & spacing */
19
- paddingY?: string | number;
20
- paddingX?: string | number;
21
- marginY?: string | number;
22
- borderRadius?: string | number;
23
- contentPadding?: string | number;
24
- /** Typography */
25
- fontSize?: string | number;
26
- fontWeight?: string | number;
27
- contentFontSize?: string | number;
28
- contentFontWeight?: string | number;
29
- /** Icon */
30
- iconOpen?: ReactNode;
31
- iconClose?: ReactNode;
32
- iconSize?: string | number;
33
- /** Motion */
34
- transitionDuration?: string;
35
- shadow?: string;
36
- /** Class overrides */
37
- className?: string;
38
- style?: CSSProperties;
39
- }
40
- export declare const Accordion: React.FC<AccordionProps>;
@@ -1,17 +0,0 @@
1
- import React, { ReactNode } from "react";
2
- type AlertType = "success" | "error" | "warning" | "info";
3
- interface Toast {
4
- id: number;
5
- title?: string;
6
- description?: string;
7
- type?: AlertType;
8
- duration?: number;
9
- }
10
- interface ToastContextProps {
11
- addToast: (toast: Omit<Toast, "id">) => void;
12
- }
13
- export declare const useToast: () => ToastContextProps;
14
- export declare const ToastProvider: React.FC<{
15
- children: ReactNode;
16
- }>;
17
- export {};
@@ -1,23 +0,0 @@
1
- interface AudioTrack {
2
- src: string;
3
- title: string;
4
- artist?: string;
5
- thumbnail?: string;
6
- duration?: string;
7
- }
8
- interface AudioGalleryProps {
9
- tracks?: AudioTrack[];
10
- className?: string;
11
- galleryTitle?: string;
12
- primaryColor?: string;
13
- backgroundColor?: string;
14
- textColor?: string;
15
- secondaryColor?: string;
16
- autoplay?: boolean;
17
- borderColor?: string;
18
- border?: number;
19
- maxWidth?: number;
20
- loop?: boolean;
21
- }
22
- export declare function AudioGallery({ tracks, className, galleryTitle, primaryColor, backgroundColor, textColor, secondaryColor, border, borderColor, maxWidth, autoplay, loop, }: AudioGalleryProps): import("react/jsx-runtime").JSX.Element;
23
- export {};
@@ -1,16 +0,0 @@
1
- import React from "react";
2
- interface AudioPlayerProps {
3
- src: string;
4
- thumbnail?: string;
5
- autoPlay?: boolean;
6
- loop?: boolean;
7
- backgroundColor?: string;
8
- primaryColor?: string;
9
- secondaryColor?: string;
10
- borderRadius?: string;
11
- className?: string;
12
- padding?: string;
13
- width?: string;
14
- }
15
- export declare const AudioPlayer: React.FC<AudioPlayerProps>;
16
- export {};
@@ -1,23 +0,0 @@
1
- import React, { CSSProperties } from "react";
2
- type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "responsive";
3
- type AvatarVariant = "circular" | "rounded" | "square";
4
- type StatusPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
5
- interface AvatarProps {
6
- src?: string;
7
- alt?: string;
8
- size?: AvatarSize;
9
- variant?: AvatarVariant;
10
- isOnline?: boolean;
11
- isOffline?: boolean;
12
- ring?: boolean;
13
- ringColor?: string;
14
- fallback?: string;
15
- onClick?: () => void;
16
- statusPosition?: StatusPosition;
17
- className?: string;
18
- statusClassName?: string;
19
- style?: CSSProperties;
20
- statusStyle?: CSSProperties;
21
- }
22
- export declare const Avatar: React.FC<AvatarProps>;
23
- export {};
@@ -1,21 +0,0 @@
1
- import React from "react";
2
- export interface BadgeProps {
3
- text?: string;
4
- icon?: React.ReactNode;
5
- iconPosition?: "left" | "right";
6
- /** 🎨 Theme */
7
- primaryTheme?: boolean;
8
- primaryColor?: string;
9
- /** 📏 Sizes */
10
- size?: "sm" | "md" | "lg";
11
- /** Shape */
12
- rounded?: boolean;
13
- /** Notification */
14
- notificationDot?: boolean;
15
- dotColor?: string;
16
- count?: number | string;
17
- pulse?: boolean;
18
- className?: string;
19
- onClick?: () => void;
20
- }
21
- export declare const Badge: React.FC<BadgeProps>;
@@ -1,15 +0,0 @@
1
- import React from "react";
2
- export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
3
- children: React.ReactNode;
4
- iconBefore?: React.ReactNode;
5
- iconAfter?: React.ReactNode;
6
- loading?: boolean;
7
- loadingText?: string;
8
- fullWidth?: boolean;
9
- /** 🎨 Variants (shadcn style) */
10
- variant?: "default" | "outline" | "ghost";
11
- /** 📏 Sizes */
12
- size?: "sm" | "md" | "lg";
13
- className?: string;
14
- }
15
- export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
@@ -1,27 +0,0 @@
1
- import React from "react";
2
- interface Option {
3
- label: string;
4
- value: string;
5
- }
6
- interface CheckboxGroupProps {
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
- customIcon?: (checked: boolean) => React.ReactNode;
17
- style?: React.CSSProperties;
18
- labelStyle?: React.CSSProperties;
19
- iconSize?: number;
20
- iconCheckedBgColor?: string;
21
- iconUncheckedBorderColor?: string;
22
- textColor?: string;
23
- errorStyle?: React.CSSProperties;
24
- darkMode?: boolean;
25
- }
26
- export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
27
- export {};
@@ -1,15 +0,0 @@
1
- import React from "react";
2
- type ContainerSize = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
3
- export interface ContainerProps {
4
- size?: ContainerSize;
5
- padding?: "none" | "sm" | "md" | "lg" | "xl";
6
- center?: boolean;
7
- className?: string;
8
- children: React.ReactNode;
9
- }
10
- /**
11
- * 🧱 Container Component
12
- * Fully responsive, Tailwind-first layout wrapper
13
- */
14
- export declare const Container: React.FC<ContainerProps>;
15
- export default Container;
@@ -1,22 +0,0 @@
1
- import React, { ReactNode } from "react";
2
- interface DrawerButtonProps {
3
- label?: string;
4
- icon?: ReactNode;
5
- iconPosition?: "left" | "right";
6
- onClick?: () => void;
7
- className?: string;
8
- }
9
- export declare const DrawerButton: React.FC<DrawerButtonProps>;
10
- interface DrawerProps {
11
- open: boolean;
12
- onClose?: () => void;
13
- position?: "left" | "right" | "top" | "bottom";
14
- size?: string;
15
- className?: string;
16
- overlayClassName?: string;
17
- children?: ReactNode;
18
- showCloseButton?: boolean;
19
- closeButtonClassName?: string;
20
- }
21
- export declare const Drawer: React.FC<DrawerProps>;
22
- export {};
@@ -1,33 +0,0 @@
1
- import React from "react";
2
- export interface SelectOption {
3
- label: string;
4
- value: string;
5
- icon?: React.ReactNode;
6
- }
7
- export interface DropdownProps {
8
- label?: string;
9
- name?: string;
10
- value?: string;
11
- defaultValue?: string;
12
- onChange?: (name: string, value: string) => void;
13
- options?: SelectOption[];
14
- placeholder?: string;
15
- required?: boolean;
16
- disabled?: boolean;
17
- error?: string | boolean;
18
- success?: boolean;
19
- helperText?: string;
20
- labelIcon?: React.ElementType;
21
- prefixIcon?: React.ElementType;
22
- variant?: "dark" | "light";
23
- /** 🔥 THEME SYSTEM */
24
- primaryTheme?: boolean;
25
- primaryColor?: string;
26
- containerClassName?: string;
27
- labelClassName?: string;
28
- triggerClassName?: string;
29
- dropdownClassName?: string;
30
- optionClassName?: string;
31
- className?: string;
32
- }
33
- export declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
@@ -1,16 +0,0 @@
1
- import React from "react";
2
- type ScreenSize = "sm" | "md" | "lg";
3
- type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
4
- interface FlexViewProps {
5
- direction?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
6
- align?: ResponsiveValue<"start" | "end" | "center" | "stretch" | "baseline">;
7
- justify?: ResponsiveValue<"start" | "end" | "center" | "between" | "around" | "evenly">;
8
- wrap?: ResponsiveValue<"nowrap" | "wrap" | "wrap-reverse">;
9
- gap?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
10
- padding?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
11
- margin?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
12
- className?: string;
13
- children: React.ReactNode;
14
- }
15
- export declare const FlexView: React.FC<FlexViewProps>;
16
- export {};
@@ -1,14 +0,0 @@
1
- import React from "react";
2
- type ScreenSize = "sm" | "md" | "lg";
3
- type ResponsiveValue<T> = T | Partial<Record<ScreenSize, T>>;
4
- export interface GridProps {
5
- columns?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6>;
6
- gap?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
7
- padding?: ResponsiveValue<1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12>;
8
- alignItems?: "start" | "center" | "end" | "stretch";
9
- justifyItems?: "start" | "center" | "end" | "stretch";
10
- className?: string;
11
- children: React.ReactNode;
12
- }
13
- export declare const GridView: React.FC<GridProps>;
14
- export {};
@@ -1,37 +0,0 @@
1
- import React from "react";
2
- interface ImageProps {
3
- src?: string;
4
- alt?: string;
5
- title?: string;
6
- /** Tailwind width/height classes or numbers */
7
- width?: string | number;
8
- height?: string | number;
9
- /** Tailwind rounded classes */
10
- rounded?: string;
11
- borderColor?: string;
12
- borderWidth?: string | number;
13
- shadow?: boolean;
14
- opacity?: number;
15
- objectFit?: "cover" | "contain" | "fill" | "none" | "scale-down";
16
- overlayText?: string;
17
- overlayColor?: string;
18
- svgIcon?: React.ReactNode;
19
- responsive?: boolean;
20
- p?: string;
21
- m?: string;
22
- /** Hover Effects */
23
- hoverScale?: number;
24
- hoverRotate?: number;
25
- hoverOpacity?: number;
26
- hoverShadow?: boolean;
27
- transitionDuration?: string;
28
- overflow?: "hidden" | "scroll" | "auto" | "visible" | "x" | "y";
29
- /** Custom Tailwind classes */
30
- className?: string;
31
- style?: React.CSSProperties;
32
- onClick?: (e: React.MouseEvent<HTMLDivElement | HTMLImageElement>) => void;
33
- onLoad?: () => void;
34
- onError?: () => void;
35
- }
36
- export declare const Image: React.FC<ImageProps>;
37
- export {};