rupoui 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/README.md +92 -5
  2. package/dist/components/button/button.styles.d.ts +9 -0
  3. package/dist/components/calendar/calendar.styles.d.ts +12 -0
  4. package/dist/components/calendar/calendar.types.d.ts +2 -0
  5. package/dist/components/checkbox/checkbox.styles.d.ts +12 -0
  6. package/dist/components/checkbox/useCheckbox.d.ts +1 -1
  7. package/dist/components/checkbox/useCheckboxGroup.d.ts +1 -1
  8. package/dist/components/toast/Toast.d.ts +7 -0
  9. package/dist/components/toast/ToastDemo.d.ts +1 -0
  10. package/dist/components/toast/ToastProvider.d.ts +6 -0
  11. package/dist/components/toast/ToastViewport.d.ts +6 -0
  12. package/dist/components/toast/Toaster.d.ts +3 -0
  13. package/dist/components/toast/index.d.ts +7 -0
  14. package/dist/components/toast/toast-store.d.ts +15 -0
  15. package/dist/components/toast/toast-subcomponents.d.ts +5 -0
  16. package/dist/components/toast/toast.d.ts +2 -0
  17. package/dist/components/toast/toast.types.d.ts +30 -0
  18. package/dist/components/toast/use-toast-internal.d.ts +3 -0
  19. package/dist/components/toast/utils.d.ts +3 -0
  20. package/dist/hooks/index.d.ts +3 -0
  21. package/dist/hooks/useDisclosure.d.ts +14 -0
  22. package/dist/index.cjs +2 -2
  23. package/dist/index.d.ts +2 -0
  24. package/dist/index.js +3799 -3480
  25. package/dist/style.css +1 -1
  26. package/dist/tailwind/index.cjs +1 -1
  27. package/dist/tailwind/index.d.ts +7 -0
  28. package/dist/tailwind/index.js +217 -81
  29. package/dist/tailwind/plugin-utils.d.ts +22 -0
  30. package/dist/tailwind/theme.d.ts +5 -33
  31. package/package.json +1 -1
package/README.md CHANGED
@@ -27,14 +27,14 @@ Add the RupoUI plugin to your `tailwind.config.js` or `tailwind.config.ts` conte
27
27
 
28
28
  ```typescript
29
29
  // tailwind.config.ts
30
- import { rupoUi } from "rupoui/tailwind";
30
+ import { rupoUI } from "rupoui/tailwind";
31
31
 
32
32
  export default {
33
33
  content: [
34
34
  // ... your app content
35
35
  "./node_modules/rupoui/dist/**/*.{js,ts,jsx,tsx}",
36
36
  ],
37
- plugins: [rupoUi()],
37
+ plugins: [rupoUI()],
38
38
  };
39
39
  ```
40
40
 
@@ -42,7 +42,7 @@ export default {
42
42
 
43
43
  Wrap your application with the `RupoUIProvider` to enable global configurations and styles:
44
44
 
45
- ```tsx
45
+ ````tsx
46
46
  import { RupoUIProvider } from "rupoui";
47
47
 
48
48
  function App() {
@@ -52,6 +52,53 @@ function App() {
52
52
  </RupoUIProvider>
53
53
  );
54
54
  }
55
+
56
+ ## 🎨 Theming & Semantic Colors
57
+
58
+ RupoUI uses a semantic color system powered by CSS variables, allowing you to theme your application without changing component class names. Themes work seamlessly with standard Tailwind utility classes.
59
+
60
+ ### Configuration
61
+
62
+ Customize themes in your `tailwind.config.ts`:
63
+
64
+ ```typescript
65
+ // tailwind.config.ts
66
+ import { rupoUI } from "rupoui/tailwind";
67
+
68
+ export default {
69
+ plugins: [
70
+ rupoUI({
71
+ themes: {
72
+ light: {
73
+ colors: {
74
+ background: "#ffffff",
75
+ foreground: "#111111",
76
+ primary: {
77
+ DEFAULT: "#2563eb",
78
+ foreground: "#ffffff",
79
+ },
80
+ },
81
+ },
82
+ },
83
+ }),
84
+ ],
85
+ };
86
+ ````
87
+
88
+ ### Usage
89
+
90
+ Use semantic color tokens directly in your components:
91
+
92
+ ```tsx
93
+ <button className="bg-primary text-primary-foreground px-4 py-2 rounded-md">Themed Button</button>
94
+ ```
95
+
96
+ ### Custom Themes
97
+
98
+ Apply custom themes using the `data-theme` attribute:
99
+
100
+ ```html
101
+ <html data-theme="dark"></html>
55
102
  ```
56
103
 
57
104
  ## 🧩 Components
@@ -716,8 +763,48 @@ import { Chip, ChipGroup } from "rupoui";
716
763
 
717
764
  - **Interactive**: Supports selection, dismissal, and click interactions.
718
765
  - **Groupable**: `ChipGroup` manages selection state and styles for children.
719
- - **Animated**: Built-in Framer Motion animations for hover and tap.
720
- - **Accessible**: Full keyboard support and ARIA roles.
766
+
767
+ ### Toast
768
+
769
+ A succinct message that is displayed temporarily.
770
+
771
+ ```tsx
772
+ import { Toaster, toast } from "rupoui";
773
+
774
+ // 1. Add Toaster to your app root
775
+ <Toaster position="bottom-right" />
776
+
777
+ // 2. Trigger toasts
778
+ <Button onClick={() => toast("Default toast")}>Default</Button>
779
+ <Button onClick={() => toast.success("Success event")}>Success</Button>
780
+ <Button onClick={() => toast.error("Error event")}>Error</Button>
781
+ <Button onClick={() => toast.loading("Loading...")}>Loading</Button>
782
+ ```
783
+
784
+ **Toaster Props:**
785
+
786
+ - `position`: Position of the toast notifications.
787
+ - `top-left`, `top-right`, `top-center`
788
+ - `bottom-left`, `bottom-right`, `bottom-center`
789
+ - `expand`: Whether to expand the toast list on hover (default: `false`).
790
+ - `richColors`: Whether to use rich colors for variants (default: `false`).
791
+
792
+ **Toast API:**
793
+
794
+ - `toast(message, options)`: Default toast.
795
+ - `toast.success(message, options)`: Success variant.
796
+ - `toast.error(message, options)`: Error variant.
797
+ - `toast.warning(message, options)`: Warning variant.
798
+ - `toast.info(message, options)`: Info variant.
799
+ - `toast.loading(message, options)`: Loading variant.
800
+ - `toast.dismiss(id)`: Dismiss a specific toast.
801
+
802
+ **Features:**
803
+
804
+ - **Queue System**: Automatically manages multiple toasts.
805
+ - **Variants**: Built-in styles for success, error, warning, and info.
806
+ - **Promise Support**: Handle async operations with loading states.
807
+ - **Customizable**: Full control over styling and positioning.
721
808
 
722
809
  ## 🎨 Customization
723
810
 
package/dist/components/button/button.styles.d.ts CHANGED
@@ -10,6 +10,9 @@ export declare const button: import('tailwind-variants').TVReturnType<{
10
10
  };
11
11
  };
12
12
  color: {
13
+ default: {
14
+ base: string;
15
+ };
13
16
  primary: {
14
17
  base: string;
15
18
  };
@@ -85,6 +88,9 @@ export declare const button: import('tailwind-variants').TVReturnType<{
85
88
  };
86
89
  };
87
90
  color: {
91
+ default: {
92
+ base: string;
93
+ };
88
94
  primary: {
89
95
  base: string;
90
96
  };
@@ -160,6 +166,9 @@ export declare const button: import('tailwind-variants').TVReturnType<{
160
166
  };
161
167
  };
162
168
  color: {
169
+ default: {
170
+ base: string;
171
+ };
163
172
  primary: {
164
173
  base: string;
165
174
  };
package/dist/components/calendar/calendar.styles.d.ts CHANGED
@@ -14,6 +14,8 @@ export declare const calendar: import('tailwind-variants').TVReturnType<{
14
14
  cellToday?: import('tailwind-merge').ClassNameValue;
15
15
  cellDisabled?: import('tailwind-merge').ClassNameValue;
16
16
  cellOutside?: import('tailwind-merge').ClassNameValue;
17
+ navButton?: import('tailwind-merge').ClassNameValue;
18
+ timeInput?: import('tailwind-merge').ClassNameValue;
17
19
  cellSelected?: import('tailwind-merge').ClassNameValue;
18
20
  };
19
21
  };
@@ -33,6 +35,8 @@ export declare const calendar: import('tailwind-variants').TVReturnType<{
33
35
  cellToday?: import('tailwind-merge').ClassNameValue;
34
36
  cellDisabled?: import('tailwind-merge').ClassNameValue;
35
37
  cellOutside?: import('tailwind-merge').ClassNameValue;
38
+ navButton?: import('tailwind-merge').ClassNameValue;
39
+ timeInput?: import('tailwind-merge').ClassNameValue;
36
40
  cellSelected?: import('tailwind-merge').ClassNameValue;
37
41
  };
38
42
  };
@@ -51,6 +55,8 @@ export declare const calendar: import('tailwind-variants').TVReturnType<{
51
55
  cellOutside: string;
52
56
  time: string;
53
57
  footer: string;
58
+ navButton: string;
59
+ timeInput: string;
54
60
  }, undefined, {
55
61
  [key: string]: {
56
62
  [key: string]: import('tailwind-merge').ClassNameValue | {
@@ -67,6 +73,8 @@ export declare const calendar: import('tailwind-variants').TVReturnType<{
67
73
  cellToday?: import('tailwind-merge').ClassNameValue;
68
74
  cellDisabled?: import('tailwind-merge').ClassNameValue;
69
75
  cellOutside?: import('tailwind-merge').ClassNameValue;
76
+ navButton?: import('tailwind-merge').ClassNameValue;
77
+ timeInput?: import('tailwind-merge').ClassNameValue;
70
78
  cellSelected?: import('tailwind-merge').ClassNameValue;
71
79
  };
72
80
  };
@@ -85,6 +93,8 @@ export declare const calendar: import('tailwind-variants').TVReturnType<{
85
93
  cellOutside: string;
86
94
  time: string;
87
95
  footer: string;
96
+ navButton: string;
97
+ timeInput: string;
88
98
  }, import('tailwind-variants').TVReturnType<unknown, {
89
99
  base: string;
90
100
  header: string;
@@ -100,4 +110,6 @@ export declare const calendar: import('tailwind-variants').TVReturnType<{
100
110
  cellOutside: string;
101
111
  time: string;
102
112
  footer: string;
113
+ navButton: string;
114
+ timeInput: string;
103
115
  }, undefined, unknown, unknown, undefined>>;
package/dist/components/calendar/calendar.types.d.ts CHANGED
@@ -44,5 +44,7 @@ export interface CalendarProps {
44
44
  cellOutside?: string;
45
45
  time?: string;
46
46
  footer?: string;
47
+ navButton?: string;
48
+ timeInput?: string;
47
49
  };
48
50
  }
package/dist/components/checkbox/checkbox.styles.d.ts CHANGED
@@ -1,5 +1,9 @@
1
1
  export declare const checkbox: import('tailwind-variants').TVReturnType<{
2
2
  color: {
3
+ default: {
4
+ wrapper: string;
5
+ label: string;
6
+ };
3
7
  primary: {
4
8
  wrapper: string;
5
9
  label: string;
@@ -102,6 +106,10 @@ export declare const checkbox: import('tailwind-variants').TVReturnType<{
102
106
  label: string;
103
107
  }, undefined, {
104
108
  color: {
109
+ default: {
110
+ wrapper: string;
111
+ label: string;
112
+ };
105
113
  primary: {
106
114
  wrapper: string;
107
115
  label: string;
@@ -204,6 +212,10 @@ export declare const checkbox: import('tailwind-variants').TVReturnType<{
204
212
  label: string;
205
213
  }, import('tailwind-variants').TVReturnType<{
206
214
  color: {
215
+ default: {
216
+ wrapper: string;
217
+ label: string;
218
+ };
207
219
  primary: {
208
220
  wrapper: string;
209
221
  label: string;
package/dist/components/checkbox/useCheckbox.d.ts CHANGED
@@ -9,7 +9,7 @@ export declare function useCheckbox(props: CheckboxProps): {
9
9
  isReadOnly: boolean;
10
10
  isInvalid: boolean;
11
11
  size: "sm" | "md" | "lg" | undefined;
12
- color: "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
12
+ color: "primary" | "secondary" | "success" | "warning" | "danger" | "default" | undefined;
13
13
  radius: "sm" | "md" | "lg" | "xl" | "full" | "none" | undefined;
14
14
  variant: "solid" | "flat" | "ghost" | "bordered" | "light" | undefined;
15
15
  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
package/dist/components/checkbox/useCheckboxGroup.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare function useCheckboxGroup(props: CheckboxGroupProps): {
11
11
  isReadOnly: boolean | undefined;
12
12
  isInvalid: boolean | undefined;
13
13
  orientation: "vertical" | "horizontal";
14
- color: "primary" | "secondary" | "success" | "warning" | "danger" | undefined;
14
+ color: "primary" | "secondary" | "success" | "warning" | "danger" | "default" | undefined;
15
15
  size: "sm" | "md" | "lg" | undefined;
16
16
  radius: "sm" | "md" | "lg" | "xl" | "full" | "none" | undefined;
17
17
  variant: "solid" | "flat" | "ghost" | "bordered" | "light" | undefined;
package/dist/components/toast/Toast.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { default as React } from 'react';
2
+ import { ToastData } from './toast.types';
3
+
4
+ export interface ToastProps extends Omit<ToastData, "onDismiss"> {
5
+ onDismiss: (id: string) => void;
6
+ }
7
+ export declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
package/dist/components/toast/ToastDemo.d.ts ADDED
@@ -0,0 +1 @@
1
+ export default function ToastDemo(): import("react/jsx-runtime").JSX.Element;
package/dist/components/toast/ToastProvider.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { default as React } from 'react';
2
+ import { ToastViewportProps } from './ToastViewport';
3
+
4
+ export declare const ToastProvider: ({ children, ...props }: {
5
+ children: React.ReactNode;
6
+ } & ToastViewportProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/toast/ToastViewport.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { default as React, HTMLAttributes } from 'react';
2
+
3
+ export interface ToastViewportProps extends HTMLAttributes<HTMLOListElement> {
4
+ position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center";
5
+ }
6
+ export declare const ToastViewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
package/dist/components/toast/Toaster.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { ToastViewportProps } from './ToastViewport';
2
+
3
+ export declare const Toaster: ({ ...props }: ToastViewportProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/toast/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export * from './toast';
2
+ export * from './toast.types';
3
+ export * from './Toast';
4
+ export * from './Toaster';
5
+ export * from './ToastProvider';
6
+ export * from './ToastViewport';
7
+ export * from './toast-subcomponents';
package/dist/components/toast/toast-store.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ import { ToastData, ToastState, ToastStoreListener } from './toast.types';
2
+
3
+ declare class ToastStore {
4
+ private listeners;
5
+ private state;
6
+ subscribe(listener: ToastStoreListener): () => void;
7
+ getSnapshot: () => ToastState;
8
+ private notify;
9
+ add(toast: ToastData): void;
10
+ update(id: string, toast: Partial<ToastData>): void;
11
+ dismiss(id: string): void;
12
+ remove(id: string): void;
13
+ }
14
+ export declare const toastStore: ToastStore;
15
+ export {};
package/dist/components/toast/toast-subcomponents.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { ButtonHTMLAttributes, HTMLAttributes } from 'react';
2
+
3
+ export declare const ToastTitle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & import('react').RefAttributes<HTMLHeadingElement>>;
4
+ export declare const ToastDescription: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
5
+ export declare const ToastClose: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import('react').RefAttributes<HTMLButtonElement>>;
package/dist/components/toast/toast.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const toast: any;
2
+ export { toast };
package/dist/components/toast/toast.types.d.ts ADDED
@@ -0,0 +1,30 @@
1
+ import { ReactNode } from 'react';
2
+
3
+ export type ToastVariant = "default" | "success" | "error" | "warning" | "info" | "loading";
4
+ export type ToastAction = {
5
+ label: string;
6
+ onClick: () => void;
7
+ };
8
+ export type ToastData = {
9
+ id: string;
10
+ title?: ReactNode;
11
+ description?: ReactNode;
12
+ variant?: ToastVariant;
13
+ duration?: number;
14
+ dismissible?: boolean;
15
+ action?: ToastAction;
16
+ visible?: boolean;
17
+ createdAt?: number;
18
+ onDismiss?: (toast: ToastData) => void;
19
+ onAutoClose?: (toast: ToastData) => void;
20
+ jsx?: ReactNode;
21
+ className?: string;
22
+ };
23
+ export type ToastOptions = Omit<ToastData, "id" | "createdAt" | "visible">;
24
+ export type ToastState = {
25
+ toasts: ToastData[];
26
+ };
27
+ export type ToastEventType = "ADD_TOAST" | "UPDATE_TOAST" | "DISMISS_TOAST" | "REMOVE_TOAST";
28
+ export interface ToastStoreListener {
29
+ (state: ToastState): void;
30
+ }
package/dist/components/toast/use-toast-internal.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { ToastState } from './toast.types';
2
+
3
+ export declare function useToastInternal(): ToastState;
package/dist/components/toast/utils.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { ClassValue } from 'clsx';
2
+
3
+ export declare function cn(...inputs: ClassValue[]): string;
package/dist/hooks/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from './useFocusTrap';
2
+ export * from './useScrollLock';
3
+ export * from './useDisclosure';
package/dist/hooks/useDisclosure.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ export interface UseDisclosureProps {
2
+ isOpen?: boolean;
3
+ defaultOpen?: boolean;
4
+ onOpenChange?: (isOpen: boolean) => void;
5
+ id?: string;
6
+ }
7
+ export declare function useDisclosure(props?: UseDisclosureProps): {
8
+ isOpen: boolean;
9
+ onOpen: () => void;
10
+ onClose: () => void;
11
+ onOpenChange: (value: boolean) => void;
12
+ isControlled: boolean;
13
+ onToggle: () => void;
14
+ };