@madecki/ui 1.4.0 → 2.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 (10) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/README.md +26 -12
  3. package/dist/index.cjs +234 -69
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +52 -8
  6. package/dist/index.d.ts +52 -8
  7. package/dist/index.js +235 -71
  8. package/dist/index.js.map +1 -1
  9. package/llm-context.md +42 -12
  10. package/package.json +4 -2
package/dist/index.d.cts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import { ReactNode } from 'react';
3
+ import { ReactNode, AriaRole, HTMLInputTypeAttribute } from 'react';
4
4
 
5
5
  type ColorVariants = "primary" | "success" | "warning" | "danger" | "info" | "white" | "gray" | "lightGray" | "darkGray" | "neutral" | "blue";
6
6
  type ThemeMode = "light" | "dark";
@@ -17,8 +17,11 @@ interface ButtonProps {
17
17
  disabled?: boolean;
18
18
  className?: string;
19
19
  type?: "button" | "submit" | "reset";
20
+ /** e.g. `radio` when used inside a `radiogroup` */
21
+ role?: AriaRole;
22
+ ariaChecked?: boolean | "mixed";
20
23
  }
21
- declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, }: ButtonProps) => react_jsx_runtime.JSX.Element;
24
+ declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, role, ariaChecked, }: ButtonProps) => react_jsx_runtime.JSX.Element;
22
25
 
23
26
  interface ButtonTransparentProps {
24
27
  variant: Exclude<ColorVariants, "primary">;
@@ -40,13 +43,18 @@ interface GradientButtonProps {
40
43
  }
41
44
  declare const GradientButton: ({ children, onClick, size, disabled, className, type, }: GradientButtonProps) => react_jsx_runtime.JSX.Element;
42
45
 
46
+ type LabelVisibility = "visible" | "sr-only";
47
+
43
48
  interface RadioButtonsProps {
44
- items: Omit<ButtonProps, "size" | "onClick" | "isActive">[];
49
+ label: string;
50
+ /** Default `visible`. Use `sr-only` to hide the group label visually while keeping it for assistive tech. */
51
+ labelVisibility?: LabelVisibility;
52
+ items: Omit<ButtonProps, "size" | "onClick" | "isActive" | "role" | "ariaChecked">[];
45
53
  onChange: (value: string) => void;
46
54
  size?: ButtonProps["size"];
47
55
  className?: string;
48
56
  }
49
- declare const RadioButtons: ({ items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
57
+ declare const RadioButtons: ({ label, labelVisibility, items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
50
58
 
51
59
  interface TagProps {
52
60
  variant: ColorVariants;
@@ -64,11 +72,18 @@ declare const Tag: ({ variant, size, children, label, className, filled, muted,
64
72
  interface InputProps {
65
73
  name: string;
66
74
  onChange?: (value: string) => void;
75
+ /** When set, the input is controlled; the parent must update this from `onChange`. */
76
+ value?: string;
77
+ /** Initial value when uncontrolled (`value` omitted). Does not update after mount if `defaultValue` prop changes. */
67
78
  defaultValue?: string;
68
79
  placeholder?: string;
69
80
  label: string;
81
+ /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
82
+ labelVisibility?: LabelVisibility;
70
83
  variant?: "primary" | "secondary" | "tertiary";
71
- type?: "text" | "number" | "email" | "search" | "password" | "tel" | "url";
84
+ /** Any standard HTML `input` type (e.g. `date`, `time`, `email`). */
85
+ type?: HTMLInputTypeAttribute;
86
+ maxLength?: number;
72
87
  required?: boolean;
73
88
  pattern?: string;
74
89
  title?: string;
@@ -77,8 +92,34 @@ interface InputProps {
77
92
  disabled?: boolean;
78
93
  className?: string;
79
94
  icon?: ReactNode;
95
+ /** Sets `data-testid` on the native `<input>` for e2e (e.g. Playwright). */
96
+ testId?: string;
97
+ }
98
+ declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
99
+
100
+ interface TextareaProps {
101
+ name: string;
102
+ onChange?: (value: string) => void;
103
+ /** When set, the textarea is controlled; the parent must update this from `onChange`. */
104
+ value?: string;
105
+ /** Initial value when uncontrolled (`value` omitted). Does not update after mount if `defaultValue` prop changes. */
106
+ defaultValue?: string;
107
+ placeholder?: string;
108
+ label: string;
109
+ /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
110
+ labelVisibility?: LabelVisibility;
111
+ variant?: "primary" | "secondary" | "tertiary";
112
+ rows?: number;
113
+ maxLength?: number;
114
+ required?: boolean;
115
+ ariaLabel?: string;
116
+ spellCheck?: boolean;
117
+ disabled?: boolean;
118
+ className?: string;
119
+ /** Sets `data-testid` on the native `<textarea>` for e2e (e.g. Playwright). */
120
+ testId?: string;
80
121
  }
81
- declare const Input: ({ name, onChange, defaultValue, placeholder, label, variant, type, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, }: InputProps) => react_jsx_runtime.JSX.Element;
122
+ declare const Textarea: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, rows, maxLength, required, ariaLabel, spellCheck, disabled, className, testId, }: TextareaProps) => react_jsx_runtime.JSX.Element;
82
123
 
83
124
  type SelectOption = {
84
125
  value: string;
@@ -87,6 +128,8 @@ type SelectOption = {
87
128
  type BaseSelectProps = {
88
129
  name: string;
89
130
  label: string;
131
+ /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
132
+ labelVisibility?: LabelVisibility;
90
133
  options: SelectOption[];
91
134
  placeholder?: string;
92
135
  variant?: "primary" | "secondary" | "tertiary";
@@ -202,13 +245,14 @@ declare const Heading: ({ children, level, size, weight, color, className, }: He
202
245
 
203
246
  interface TextProps {
204
247
  children: ReactNode;
248
+ id?: string;
205
249
  size?: "xs" | "sm" | "md" | "lg";
206
250
  weight?: "normal" | "medium" | "semibold" | "bold";
207
251
  color?: "default" | "muted" | "primary" | "success" | "warning" | "danger";
208
252
  as?: "p" | "span" | "div" | "label";
209
253
  className?: string;
210
254
  }
211
- declare const Text: ({ children, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
255
+ declare const Text: ({ children, id, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
212
256
 
213
257
  interface HeartProps {
214
258
  variant?: "outline" | "filled" | "gradient";
@@ -251,4 +295,4 @@ declare const TwitterIcon: ({ className, size, withWrapper, }: SocialIconProps)
251
295
  declare const LinkedInIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
252
296
  declare const InstagramIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
253
297
 
254
- export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };
298
+ export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import * as react from 'react';
3
- import { ReactNode } from 'react';
3
+ import { ReactNode, AriaRole, HTMLInputTypeAttribute } from 'react';
4
4
 
5
5
  type ColorVariants = "primary" | "success" | "warning" | "danger" | "info" | "white" | "gray" | "lightGray" | "darkGray" | "neutral" | "blue";
6
6
  type ThemeMode = "light" | "dark";
@@ -17,8 +17,11 @@ interface ButtonProps {
17
17
  disabled?: boolean;
18
18
  className?: string;
19
19
  type?: "button" | "submit" | "reset";
20
+ /** e.g. `radio` when used inside a `radiogroup` */
21
+ role?: AriaRole;
22
+ ariaChecked?: boolean | "mixed";
20
23
  }
21
- declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, }: ButtonProps) => react_jsx_runtime.JSX.Element;
24
+ declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, role, ariaChecked, }: ButtonProps) => react_jsx_runtime.JSX.Element;
22
25
 
23
26
  interface ButtonTransparentProps {
24
27
  variant: Exclude<ColorVariants, "primary">;
@@ -40,13 +43,18 @@ interface GradientButtonProps {
40
43
  }
41
44
  declare const GradientButton: ({ children, onClick, size, disabled, className, type, }: GradientButtonProps) => react_jsx_runtime.JSX.Element;
42
45
 
46
+ type LabelVisibility = "visible" | "sr-only";
47
+
43
48
  interface RadioButtonsProps {
44
- items: Omit<ButtonProps, "size" | "onClick" | "isActive">[];
49
+ label: string;
50
+ /** Default `visible`. Use `sr-only` to hide the group label visually while keeping it for assistive tech. */
51
+ labelVisibility?: LabelVisibility;
52
+ items: Omit<ButtonProps, "size" | "onClick" | "isActive" | "role" | "ariaChecked">[];
45
53
  onChange: (value: string) => void;
46
54
  size?: ButtonProps["size"];
47
55
  className?: string;
48
56
  }
49
- declare const RadioButtons: ({ items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
57
+ declare const RadioButtons: ({ label, labelVisibility, items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
50
58
 
51
59
  interface TagProps {
52
60
  variant: ColorVariants;
@@ -64,11 +72,18 @@ declare const Tag: ({ variant, size, children, label, className, filled, muted,
64
72
  interface InputProps {
65
73
  name: string;
66
74
  onChange?: (value: string) => void;
75
+ /** When set, the input is controlled; the parent must update this from `onChange`. */
76
+ value?: string;
77
+ /** Initial value when uncontrolled (`value` omitted). Does not update after mount if `defaultValue` prop changes. */
67
78
  defaultValue?: string;
68
79
  placeholder?: string;
69
80
  label: string;
81
+ /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
82
+ labelVisibility?: LabelVisibility;
70
83
  variant?: "primary" | "secondary" | "tertiary";
71
- type?: "text" | "number" | "email" | "search" | "password" | "tel" | "url";
84
+ /** Any standard HTML `input` type (e.g. `date`, `time`, `email`). */
85
+ type?: HTMLInputTypeAttribute;
86
+ maxLength?: number;
72
87
  required?: boolean;
73
88
  pattern?: string;
74
89
  title?: string;
@@ -77,8 +92,34 @@ interface InputProps {
77
92
  disabled?: boolean;
78
93
  className?: string;
79
94
  icon?: ReactNode;
95
+ /** Sets `data-testid` on the native `<input>` for e2e (e.g. Playwright). */
96
+ testId?: string;
97
+ }
98
+ declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
99
+
100
+ interface TextareaProps {
101
+ name: string;
102
+ onChange?: (value: string) => void;
103
+ /** When set, the textarea is controlled; the parent must update this from `onChange`. */
104
+ value?: string;
105
+ /** Initial value when uncontrolled (`value` omitted). Does not update after mount if `defaultValue` prop changes. */
106
+ defaultValue?: string;
107
+ placeholder?: string;
108
+ label: string;
109
+ /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
110
+ labelVisibility?: LabelVisibility;
111
+ variant?: "primary" | "secondary" | "tertiary";
112
+ rows?: number;
113
+ maxLength?: number;
114
+ required?: boolean;
115
+ ariaLabel?: string;
116
+ spellCheck?: boolean;
117
+ disabled?: boolean;
118
+ className?: string;
119
+ /** Sets `data-testid` on the native `<textarea>` for e2e (e.g. Playwright). */
120
+ testId?: string;
80
121
  }
81
- declare const Input: ({ name, onChange, defaultValue, placeholder, label, variant, type, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, }: InputProps) => react_jsx_runtime.JSX.Element;
122
+ declare const Textarea: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, rows, maxLength, required, ariaLabel, spellCheck, disabled, className, testId, }: TextareaProps) => react_jsx_runtime.JSX.Element;
82
123
 
83
124
  type SelectOption = {
84
125
  value: string;
@@ -87,6 +128,8 @@ type SelectOption = {
87
128
  type BaseSelectProps = {
88
129
  name: string;
89
130
  label: string;
131
+ /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
132
+ labelVisibility?: LabelVisibility;
90
133
  options: SelectOption[];
91
134
  placeholder?: string;
92
135
  variant?: "primary" | "secondary" | "tertiary";
@@ -202,13 +245,14 @@ declare const Heading: ({ children, level, size, weight, color, className, }: He
202
245
 
203
246
  interface TextProps {
204
247
  children: ReactNode;
248
+ id?: string;
205
249
  size?: "xs" | "sm" | "md" | "lg";
206
250
  weight?: "normal" | "medium" | "semibold" | "bold";
207
251
  color?: "default" | "muted" | "primary" | "success" | "warning" | "danger";
208
252
  as?: "p" | "span" | "div" | "label";
209
253
  className?: string;
210
254
  }
211
- declare const Text: ({ children, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
255
+ declare const Text: ({ children, id, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
212
256
 
213
257
  interface HeartProps {
214
258
  variant?: "outline" | "filled" | "gradient";
@@ -251,4 +295,4 @@ declare const TwitterIcon: ({ className, size, withWrapper, }: SocialIconProps)
251
295
  declare const LinkedInIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
252
296
  declare const InstagramIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
253
297
 
254
- export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };
298
+ export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };