@renge-ui/react 1.0.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 (8) hide show
  1. package/README.md +230 -0
  2. package/dist/index.d.mts +245 -0
  3. package/dist/index.d.ts +245 -0
  4. package/dist/index.js +1404 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +1349 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +44 -0
package/dist/index.d.ts ADDED
@@ -0,0 +1,245 @@
1
+ import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import * as react from 'react';
3
+ import { ReactNode, ElementType, ComponentPropsWithoutRef } from 'react';
4
+ import { RengeTheme, RengeThemeConfig, AnimationName } from '@renge-ui/tokens';
5
+ export { ANIMATION_NAMES, AnimationName, FIBONACCI, GOLDEN_ANGLE, PHI, ProfileMode, ProfileName, ProfileVariant, RengeTheme, RengeThemeConfig, createRengeTheme } from '@renge-ui/tokens';
6
+
7
+ interface RengeContextValue {
8
+ theme: RengeTheme;
9
+ profile: string;
10
+ }
11
+
12
+ declare function useRenge(): RengeContextValue;
13
+
14
+ interface RengeProviderProps {
15
+ children: ReactNode;
16
+ config?: RengeThemeConfig;
17
+ /** Inject theme CSS into document <head>. Default: true */
18
+ injectCSS?: boolean;
19
+ }
20
+ declare function RengeProvider({ children, config: { baseUnit, typeBase, scaleRatio, profile, variance, varianceSeed, includeReset, selector, }, injectCSS, }: RengeProviderProps): react_jsx_runtime.JSX.Element;
21
+ /** Access raw theme without a provider — for SSR or static export. */
22
+ declare function useRengeTheme(config?: RengeThemeConfig): RengeTheme;
23
+
24
+ type SpaceKey$5 = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
25
+ interface StackOwnProps {
26
+ gap?: SpaceKey$5;
27
+ direction?: 'vertical' | 'horizontal';
28
+ align?: 'start' | 'center' | 'end' | 'stretch';
29
+ justify?: 'start' | 'center' | 'end' | 'between' | 'around';
30
+ as?: ElementType;
31
+ }
32
+ declare const Stack: react.ForwardRefExoticComponent<StackOwnProps & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, keyof StackOwnProps> & react.RefAttributes<HTMLDivElement>>;
33
+
34
+ type SpaceKey$4 = '0' | '1' | '2' | '3' | '4' | '5' | '6';
35
+ interface GridProps extends ComponentPropsWithoutRef<'div'> {
36
+ columns?: number | string;
37
+ rows?: number | string;
38
+ gap?: SpaceKey$4;
39
+ gapX?: SpaceKey$4;
40
+ gapY?: SpaceKey$4;
41
+ align?: 'start' | 'center' | 'end' | 'stretch';
42
+ justify?: 'start' | 'center' | 'end' | 'stretch';
43
+ }
44
+ declare const Grid: react.ForwardRefExoticComponent<GridProps & react.RefAttributes<HTMLDivElement>>;
45
+
46
+ type SizeKey$2 = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
47
+ type ColorKey = 'fg' | 'fg-subtle' | 'fg-muted' | 'accent' | 'success' | 'warning' | 'danger';
48
+ interface TextOwnProps {
49
+ size?: SizeKey$2;
50
+ color?: ColorKey;
51
+ weight?: 'normal' | 'medium' | 'semibold' | 'bold';
52
+ align?: 'left' | 'center' | 'right';
53
+ animation?: AnimationName;
54
+ as?: ElementType;
55
+ }
56
+ declare const Text: react.ForwardRefExoticComponent<TextOwnProps & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, keyof TextOwnProps> & react.RefAttributes<HTMLSpanElement>>;
57
+
58
+ type Level = 1 | 2 | 3 | 4 | 5 | 6;
59
+ type SizeKey$1 = 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
60
+ interface HeadingProps extends Omit<ComponentPropsWithoutRef<'h1'>, 'color'> {
61
+ level?: Level;
62
+ size?: SizeKey$1;
63
+ color?: 'fg' | 'fg-subtle' | 'accent';
64
+ animation?: AnimationName;
65
+ }
66
+ declare const Heading: react.ForwardRefExoticComponent<HeadingProps & react.RefAttributes<HTMLHeadingElement>>;
67
+
68
+ type SpaceKey$3 = '0' | '1' | '2' | '3' | '4' | '5' | '6';
69
+ type RadiusKey = 'none' | '1' | '2' | '3' | '4' | '5' | 'full';
70
+ interface CardProps extends ComponentPropsWithoutRef<'div'> {
71
+ padding?: SpaceKey$3;
72
+ radius?: RadiusKey;
73
+ variant?: 'elevated' | 'outlined' | 'filled';
74
+ animation?: AnimationName;
75
+ }
76
+ declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
77
+
78
+ type SizeKey = 'sm' | 'md' | 'lg';
79
+ type Variant = 'solid' | 'outline' | 'ghost';
80
+ type ColorScheme = 'accent' | 'danger' | 'success';
81
+ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
82
+ size?: SizeKey;
83
+ variant?: Variant;
84
+ colorScheme?: ColorScheme;
85
+ fullWidth?: boolean;
86
+ animation?: AnimationName;
87
+ }
88
+ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
89
+
90
+ type SpaceKey$2 = '0' | '1' | '2' | '3' | '4' | '5' | '6';
91
+ interface DividerProps extends ComponentPropsWithoutRef<'hr'> {
92
+ orientation?: 'horizontal' | 'vertical';
93
+ spacing?: SpaceKey$2;
94
+ color?: 'border' | 'border-subtle';
95
+ }
96
+ declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLHRElement>>;
97
+
98
+ type SpaceKey$1 = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
99
+ interface SectionOwnProps {
100
+ padding?: SpaceKey$1;
101
+ paddingX?: SpaceKey$1;
102
+ paddingY?: SpaceKey$1;
103
+ maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'none';
104
+ center?: boolean;
105
+ animation?: AnimationName;
106
+ as?: ElementType;
107
+ }
108
+ declare const Section: react.ForwardRefExoticComponent<SectionOwnProps & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, keyof SectionOwnProps> & react.RefAttributes<HTMLElement>>;
109
+
110
+ type BadgeVariant = 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
111
+ type BadgeSize = 'sm' | 'md' | 'lg';
112
+ interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
113
+ variant?: BadgeVariant;
114
+ size?: BadgeSize;
115
+ }
116
+ declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
117
+
118
+ type AvatarSize = '1' | '2' | '3' | '4' | '5';
119
+ type AvatarShape = 'circle' | 'square';
120
+ interface AvatarProps extends ComponentPropsWithoutRef<'div'> {
121
+ src?: string;
122
+ alt?: string;
123
+ initials?: string;
124
+ size?: AvatarSize;
125
+ shape?: AvatarShape;
126
+ }
127
+ declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
128
+
129
+ type SpinnerSize = 'sm' | 'md' | 'lg';
130
+ type SpinnerColor = 'accent' | 'fg' | 'fg-muted';
131
+ interface SpinnerProps extends ComponentPropsWithoutRef<'span'> {
132
+ size?: SpinnerSize;
133
+ color?: SpinnerColor;
134
+ label?: string;
135
+ }
136
+ declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
137
+
138
+ type ProgressColor = 'accent' | 'success' | 'warning' | 'danger';
139
+ type ProgressSize = 'sm' | 'md' | 'lg';
140
+ interface ProgressProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
141
+ value: number;
142
+ color?: ProgressColor;
143
+ size?: ProgressSize;
144
+ radius?: 'none' | 'full';
145
+ label?: string;
146
+ }
147
+ declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
148
+
149
+ type InputSize = 'sm' | 'md' | 'lg';
150
+ type InputState = 'default' | 'error' | 'success';
151
+ interface InputProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
152
+ size?: InputSize;
153
+ state?: InputState;
154
+ fullWidth?: boolean;
155
+ }
156
+ declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
157
+
158
+ type ChipVariant = 'accent' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
159
+ interface ChipProps extends ComponentPropsWithoutRef<'span'> {
160
+ variant?: ChipVariant;
161
+ onDismiss?: () => void;
162
+ }
163
+ declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
164
+
165
+ type AlertStatus = 'info' | 'success' | 'warning' | 'danger';
166
+ interface AlertProps extends ComponentPropsWithoutRef<'div'> {
167
+ status?: AlertStatus;
168
+ title?: string;
169
+ }
170
+ declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
171
+
172
+ interface FormFieldProps extends ComponentPropsWithoutRef<'div'> {
173
+ label: string;
174
+ htmlFor?: string;
175
+ helperText?: string;
176
+ errorText?: string;
177
+ required?: boolean;
178
+ }
179
+ declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>>;
180
+
181
+ type TrendDirection = 'up' | 'down' | 'neutral';
182
+ interface StatProps extends ComponentPropsWithoutRef<'div'> {
183
+ value: string | number;
184
+ label: string;
185
+ trend?: TrendDirection;
186
+ trendValue?: string;
187
+ caption?: string;
188
+ }
189
+ declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLDivElement>>;
190
+
191
+ type SpaceKey = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
192
+ interface NavbarProps extends ComponentPropsWithoutRef<'nav'> {
193
+ sticky?: boolean;
194
+ border?: boolean;
195
+ height?: string;
196
+ paddingX?: SpaceKey;
197
+ }
198
+ declare const Navbar: react.ForwardRefExoticComponent<NavbarProps & react.RefAttributes<HTMLElement>>;
199
+
200
+ type EnergyRingSize = "sm" | "md" | "lg" | "xl";
201
+ type EnergyRingRate = "rest" | "active" | "fire";
202
+ type EnergyRingColor = "accent" | "success" | "warning" | "danger";
203
+ interface EnergyRingProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
204
+ /** Energy level 0–100 */
205
+ value: number;
206
+ size?: EnergyRingSize;
207
+ /** Color channel — maps to semantic token */
208
+ color?: EnergyRingColor;
209
+ /** Whether to animate a breathing pulse */
210
+ pulse?: boolean;
211
+ /** Pulse speed — rest=slow, active=medium, fire=fast */
212
+ rate?: EnergyRingRate;
213
+ /** Center label. Defaults to "{value}%" */
214
+ label?: string | null;
215
+ }
216
+ declare const EnergyRing: react.ForwardRefExoticComponent<EnergyRingProps & react.RefAttributes<HTMLDivElement>>;
217
+
218
+ type PulseRate = "rest" | "active" | "fire";
219
+ type PulseColor = "accent" | "success" | "warning" | "danger" | "fg-muted";
220
+ type PulseSize = "sm" | "md" | "lg";
221
+ interface PulseProps extends ComponentPropsWithoutRef<"span"> {
222
+ /** Energy rate — determines breath speed */
223
+ rate?: PulseRate;
224
+ color?: PulseColor;
225
+ size?: PulseSize;
226
+ /** Show expanding ripple ring */
227
+ ripple?: boolean;
228
+ }
229
+ declare const Pulse: react.ForwardRefExoticComponent<PulseProps & react.RefAttributes<HTMLSpanElement>>;
230
+
231
+ type FlowEnergy = "void" | "rest" | "active" | "fire";
232
+ type FlowColor = "accent" | "fg-muted" | "fg-subtle";
233
+ interface FlowFieldProps extends ComponentPropsWithoutRef<"div"> {
234
+ /** Total dot count at full energy. Actual count scales with energy. */
235
+ count?: number;
236
+ /** Size of the field container in px */
237
+ size?: number;
238
+ /** Energy level — controls density, opacity, and pulse rate */
239
+ energy?: FlowEnergy;
240
+ /** Color channel */
241
+ color?: FlowColor;
242
+ }
243
+ declare const FlowField: react.ForwardRefExoticComponent<FlowFieldProps & react.RefAttributes<HTMLDivElement>>;
244
+
245
+ export { Alert, type AlertProps, type AlertStatus, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Button, Card, Chip, type ChipProps, type ChipVariant, Divider, EnergyRing, type EnergyRingColor, type EnergyRingProps, type EnergyRingRate, type EnergyRingSize, type FlowColor, type FlowEnergy, FlowField, type FlowFieldProps, FormField, type FormFieldProps, Grid, Heading, Input, type InputProps, type InputSize, type InputState, Navbar, type NavbarProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, Pulse, type PulseColor, type PulseProps, type PulseRate, type PulseSize, RengeProvider, type RengeProviderProps, Section, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, Stack, Stat, type StatProps, Text, type TrendDirection, useRenge, useRengeTheme };