@wavv/ui 2.3.0-alpha.1 → 2.3.1

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.
@@ -7,6 +7,8 @@ type Props = {
7
7
  label?: string;
8
8
  /** Sets the label on the left or right of the checkbox */
9
9
  labelPosition?: 'left' | 'right';
10
+ /** Sets the color of the label */
11
+ labelColor?: string;
10
12
  /** Disables the checkbox */
11
13
  disabled?: boolean;
12
14
  /** Prevents the checkbox from being changed */
@@ -23,7 +25,7 @@ type Props = {
23
25
  className?: CheckboxProps['className'];
24
26
  style?: CheckboxProps['style'];
25
27
  } & Margin & Omit<CheckboxProps, 'value' | 'isDisabled' | 'isReadOnly' | 'isSelected' | 'isIndeterminate'>;
26
- declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
28
+ declare const Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
27
29
  export declare const ControlContainer: import("@emotion/styled").StyledComponent<CheckboxProps & import("react").RefAttributes<HTMLLabelElement> & {
28
30
  theme?: import("@emotion/react").Theme;
29
31
  } & {
@@ -8,7 +8,7 @@ import { ControlLabel } from "./FormControl.js";
8
8
  import getFlexPosition from "./helpers/getFlexPosition.js";
9
9
  import { marginProps } from "./helpers/styledProps.js";
10
10
  import Icon from "./Icon/index.js";
11
- const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props })=>{
11
+ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props })=>{
12
12
  const labelRight = 'right' === labelPosition;
13
13
  const isControlled = 'boolean' == typeof checked;
14
14
  return /*#__PURE__*/ jsx(ControlContainer, {
@@ -34,6 +34,7 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
34
34
  children: [
35
35
  label && /*#__PURE__*/ jsx(ControlLabel, {
36
36
  disabled: disabled,
37
+ color: labelColor,
37
38
  children: label
38
39
  }),
39
40
  /*#__PURE__*/ jsx(Icon, {
@@ -1,4 +1,5 @@
1
- import type { CSSProperties, ReactNode } from 'react';
1
+ import type { CSSObject } from '@emotion/react';
2
+ import type { ReactNode } from 'react';
2
3
  import type { Attributes } from './typeDefs/elementTypes';
3
4
  import type { MarginPadding, Width } from './types';
4
5
  type ElAttributes = Attributes<HTMLDivElement>;
@@ -6,7 +7,7 @@ type Props = {
6
7
  children: ReactNode;
7
8
  /** Number of lines to clamp */
8
9
  clampLines?: number;
9
- textAlign?: CSSProperties['textAlign'];
10
+ textAlign?: CSSObject['textAlign'];
10
11
  } & MarginPadding & Width & ElAttributes;
11
12
  declare const Ellipsis: ({ children, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
12
13
  export default Ellipsis;
@@ -14,19 +14,21 @@ declare const Form: {
14
14
  Field({ children, inline, align, disabled, ...props }: FieldProps & {
15
15
  children?: ReactNode;
16
16
  }): import("react/jsx-runtime").JSX.Element;
17
- Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: {
17
+ Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: {
18
18
  id?: string;
19
19
  label?: string;
20
20
  labelPosition?: "left" | "right";
21
+ labelColor?: string;
21
22
  disabled?: boolean;
22
23
  checked?: boolean;
23
24
  className?: string;
24
25
  iconColor?: string;
25
26
  } & Margin & import("react").HTMLProps<HTMLInputElement> & import("./types").AsProp) => import("react/jsx-runtime").JSX.Element;
26
- Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: {
27
+ Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props }: {
27
28
  id?: string;
28
29
  label?: string;
29
30
  labelPosition?: "left" | "right";
31
+ labelColor?: string;
30
32
  disabled?: boolean;
31
33
  checked?: boolean;
32
34
  gap?: number;
@@ -34,10 +36,11 @@ declare const Form: {
34
36
  className?: import("react-aria-components").SwitchProps["className"];
35
37
  style?: import("react-aria-components").SwitchProps["style"];
36
38
  } & Margin & Omit<import("react-aria-components").SwitchProps, "isDisabled" | "isSelected">) => import("react/jsx-runtime").JSX.Element;
37
- Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, ...props }: {
39
+ Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, align, labelColor, ...props }: {
38
40
  id?: string;
39
41
  label?: string;
40
42
  labelPosition?: "left" | "right";
43
+ labelColor?: string;
41
44
  disabled?: boolean;
42
45
  readOnly?: boolean;
43
46
  checked?: boolean;
@@ -20,5 +20,6 @@ export declare const ControlLabel: import("@emotion/styled").StyledComponent<{
20
20
  as?: React.ElementType;
21
21
  } & {
22
22
  disabled?: boolean;
23
+ color?: string;
23
24
  } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
24
25
  export type CheckboxAttributes = Attributes<HTMLInputElement>;
@@ -64,9 +64,9 @@ const ControlInput = styled.input({
64
64
  }
65
65
  }
66
66
  }));
67
- const ControlLabel = styled.span(({ theme, disabled })=>({
67
+ const ControlLabel = styled.span(({ theme, disabled, color })=>({
68
68
  fontSize: theme.font.size.md,
69
- color: disabled ? theme.formControl.color.disabled : theme.scale10,
69
+ color: disabled ? theme.formControl.color.disabled : color || theme.scale10,
70
70
  cursor: disabled ? 'not-allowed' : 'pointer'
71
71
  }));
72
72
  export { ControlContainer, ControlInput, ControlLabel };
@@ -8,6 +8,8 @@ type RadioProps = {
8
8
  label?: string;
9
9
  /** Sets the label on the left or right of the radio */
10
10
  labelPosition?: 'left' | 'right';
11
+ /** Sets the color of the label */
12
+ labelColor?: string;
11
13
  /** Disables the radio */
12
14
  disabled?: boolean;
13
15
  /** Controls the checked property of the radio */
@@ -17,5 +19,5 @@ type RadioProps = {
17
19
  /** Sets the color of the icon */
18
20
  iconColor?: string;
19
21
  } & Margin & ElAttributes;
20
- declare const Radio: ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
22
+ declare const Radio: ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
21
23
  export default Radio;
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
2
2
  import RadioButton from "../assets/icons/RadioButton.js";
3
3
  import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
4
4
  import Icon from "./Icon/index.js";
5
- const Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
5
+ const Radio = ({ id, label, labelPosition, checked, disabled, labelColor, margin, marginTop, marginBottom, marginRight, marginLeft, className, readOnly, iconColor, ...props })=>{
6
6
  const labelRight = 'right' === labelPosition;
7
7
  const marginProps = {
8
8
  margin,
@@ -22,6 +22,7 @@ const Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop,
22
22
  children: [
23
23
  label && /*#__PURE__*/ jsx(ControlLabel, {
24
24
  disabled: disabled,
25
+ color: labelColor,
25
26
  children: label
26
27
  }),
27
28
  /*#__PURE__*/ jsx(ControlInput, {
@@ -7,6 +7,8 @@ type Props = {
7
7
  label?: string;
8
8
  /** Sets the label on the left or right of the toggle */
9
9
  labelPosition?: 'left' | 'right';
10
+ /** Sets the color of the label */
11
+ labelColor?: string;
10
12
  /** Disables the toggle */
11
13
  disabled?: boolean;
12
14
  /** Controls the checked property of the toggle */
@@ -18,7 +20,7 @@ type Props = {
18
20
  className?: SwitchProps['className'];
19
21
  style?: SwitchProps['style'];
20
22
  } & Margin & Omit<SwitchProps, 'isDisabled' | 'isSelected'>;
21
- declare const Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
23
+ declare const Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
22
24
  export declare const ControlContainer: import("@emotion/styled").StyledComponent<SwitchProps & import("react").RefAttributes<HTMLLabelElement> & {
23
25
  theme?: import("@emotion/react").Theme;
24
26
  } & {
@@ -6,7 +6,7 @@ import ToggleOn from "../assets/icons/ToggleOn.js";
6
6
  import { ControlLabel } from "./FormControl.js";
7
7
  import { marginProps } from "./helpers/styledProps.js";
8
8
  import Icon from "./Icon/index.js";
9
- const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, ...props })=>{
9
+ const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, labelColor, ...props })=>{
10
10
  const labelRight = 'right' === labelPosition;
11
11
  const isControlled = 'boolean' == typeof checked;
12
12
  return /*#__PURE__*/ jsx(ControlContainer, {
@@ -24,6 +24,7 @@ const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, ...pro
24
24
  children: [
25
25
  label && /*#__PURE__*/ jsx(ControlLabel, {
26
26
  disabled: disabled,
27
+ color: labelColor,
27
28
  children: label
28
29
  }),
29
30
  /*#__PURE__*/ jsx(Icon, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wavv/ui",
3
- "version": "2.3.0-alpha.1",
3
+ "version": "2.3.1",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -31,22 +31,22 @@
31
31
  "@emotion/styled": "^11.14.1",
32
32
  "@internationalized/date": "3.10.0",
33
33
  "@react-hook/resize-observer": "^2.0.2",
34
- "@tiptap/core": "^3.10.7",
35
- "@tiptap/extension-character-count": "^3.10.7",
36
- "@tiptap/extension-highlight": "^3.10.7",
37
- "@tiptap/extension-placeholder": "^3.10.7",
38
- "@tiptap/extension-task-item": "^3.10.7",
39
- "@tiptap/extension-task-list": "^3.10.7",
40
- "@tiptap/markdown": "^3.10.7",
41
- "@tiptap/pm": "^3.10.7",
42
- "@tiptap/react": "^3.10.7",
43
- "@tiptap/starter-kit": "^3.10.7",
34
+ "@tiptap/core": "^3.11.0",
35
+ "@tiptap/extension-character-count": "^3.11.0",
36
+ "@tiptap/extension-highlight": "^3.11.0",
37
+ "@tiptap/extension-placeholder": "^3.11.0",
38
+ "@tiptap/extension-task-item": "^3.11.0",
39
+ "@tiptap/extension-task-list": "^3.11.0",
40
+ "@tiptap/markdown": "^3.11.0",
41
+ "@tiptap/pm": "^3.11.0",
42
+ "@tiptap/react": "^3.11.0",
43
+ "@tiptap/starter-kit": "^3.11.0",
44
44
  "cmdk": "^1.1.1",
45
45
  "date-fns": "^4.1.0",
46
46
  "draft-js": "^0.11.7",
47
- "es-toolkit": "^1.41.0",
48
- "libphonenumber-js": "^1.12.26",
49
- "lucide-react": "^0.553.0",
47
+ "es-toolkit": "^1.42.0",
48
+ "libphonenumber-js": "^1.12.27",
49
+ "lucide-react": "^0.554.0",
50
50
  "polished": "^4.1.4",
51
51
  "prism-react-renderer": "^2.4.1",
52
52
  "react-aria": "3.44.0",
@@ -61,14 +61,14 @@
61
61
  "@babel/core": "^7.28.5",
62
62
  "@babel/preset-env": "^7.28.5",
63
63
  "@babel/preset-typescript": "^7.28.5",
64
- "@biomejs/biome": "2.3.4",
65
- "@chromatic-com/storybook": "^4.1.2",
64
+ "@biomejs/biome": "2.3.6",
65
+ "@chromatic-com/storybook": "^4.1.3",
66
66
  "@emotion/babel-plugin": "^11.13.5",
67
67
  "@emotion/react": "^11.14.0",
68
- "@rsbuild/core": "1.6.3",
68
+ "@rsbuild/core": "1.6.7",
69
69
  "@rsbuild/plugin-react": "^1.4.2",
70
70
  "@rsbuild/plugin-svgr": "^1.2.2",
71
- "@rslib/core": "^0.17.1",
71
+ "@rslib/core": "^0.18.0",
72
72
  "@storybook/addon-docs": "^9.1.16",
73
73
  "@storybook/addon-links": "^9.1.16",
74
74
  "@storybook/addon-themes": "^9.1.16",
@@ -77,21 +77,21 @@
77
77
  "@svgr/plugin-jsx": "^8.1.0",
78
78
  "@svgr/plugin-prettier": "^8.1.0",
79
79
  "@swc/plugin-emotion": "12.0.0",
80
- "@types/draft-js": "^0.11.18",
80
+ "@types/draft-js": "^0.11.20",
81
81
  "@types/jest": "^30.0.0",
82
82
  "@types/ncp": "^2.0.8",
83
- "@types/node": "^24.10.0",
83
+ "@types/node": "^24.10.1",
84
84
  "@types/prompts": "^2.4.9",
85
85
  "@types/randomcolor": "^0.5.9",
86
- "@types/react": "^19.2.2",
87
- "@types/react-dom": "^19.2.2",
86
+ "@types/react": "^19.2.6",
87
+ "@types/react-dom": "^19.2.3",
88
88
  "@types/signale": "^1.4.7",
89
89
  "@types/webfontloader": "^1.6.38",
90
90
  "chalk": "^5.6.2",
91
91
  "change-case": "^5.4.4",
92
- "chromatic": "^13.3.3",
92
+ "chromatic": "^13.3.4",
93
93
  "jest": "^30.2.0",
94
- "lefthook": "^2.0.3",
94
+ "lefthook": "^2.0.4",
95
95
  "ncp": "^2.0.0",
96
96
  "path": "^0.12.7",
97
97
  "phone": "^3.1.67",
@@ -105,7 +105,7 @@
105
105
  "replace": "^1.2.2",
106
106
  "signale": "^1.4.0",
107
107
  "storybook": "^9.1.16",
108
- "storybook-react-rsbuild": "^2.1.4",
108
+ "storybook-react-rsbuild": "^2.1.6",
109
109
  "tsc-files": "^1.1.4",
110
110
  "tslib": "^2.8.1",
111
111
  "tsx": "^4.20.6",
@@ -1,76 +0,0 @@
1
- declare const colors: {
2
- logo1: string;
3
- logo2: string;
4
- logo3: string;
5
- brand: string;
6
- brandShade1: string;
7
- brandShade2: string;
8
- brandDark: string;
9
- brandDarkShade1: string;
10
- brandTint0: string;
11
- brandTint1: string;
12
- brandTint2: string;
13
- brandTint3: string;
14
- brandTint4: string;
15
- brandBackground0: string;
16
- brandBackground1: string;
17
- brandBackground2: string;
18
- brandBackground3: string;
19
- brandBackground4: string;
20
- brandBackground5: string;
21
- error: string;
22
- errorShade1: string;
23
- errorShade2: string;
24
- errorTint0: string;
25
- errorTint1: string;
26
- errorTint2: string;
27
- errorTint3: string;
28
- errorTint4: string;
29
- warning: string;
30
- warningShade1: string;
31
- warningShade2: string;
32
- warningTint0: string;
33
- warningTint1: string;
34
- warningTint2: string;
35
- warningTint3: string;
36
- warningTint4: string;
37
- alert: string;
38
- alertShade1: string;
39
- alertShade2: string;
40
- alertTint0: string;
41
- alertTint1: string;
42
- alertTint2: string;
43
- alertTint3: string;
44
- alertTint4: string;
45
- success: string;
46
- successShade1: string;
47
- successShade2: string;
48
- successTint0: string;
49
- successTint1: string;
50
- successTint2: string;
51
- successTint3: string;
52
- successTint4: string;
53
- grayscale0: string;
54
- grayscale1: string;
55
- grayscale2: string;
56
- grayscale3: string;
57
- grayscale4: string;
58
- grayscale5: string;
59
- grayscale6: string;
60
- grayscale7: string;
61
- grayscale8: string;
62
- grayscale9: string;
63
- grayscale10: string;
64
- contrast0: string;
65
- contrast1: string;
66
- contrast2: string;
67
- contrast3: string;
68
- contrast4: string;
69
- contrast5: string;
70
- contrast6: string;
71
- contrast7: string;
72
- contrast8: string;
73
- contrast9: string;
74
- contrast10: string;
75
- };
76
- export default colors;
@@ -1,86 +0,0 @@
1
- import { transparentize } from "polished";
2
- const brand = '#40E0D0';
3
- const brandDark = '#FF00A8';
4
- const error = '#FF3366';
5
- const warning = '#FFD23F';
6
- const alertColor = '#FFFF66';
7
- const success = '#0ECD9D';
8
- const grayVal = '#2B003E';
9
- const white = '#FFFDF2';
10
- const colors = {
11
- logo1: brand,
12
- logo2: brandDark,
13
- logo3: '#8A2BE2',
14
- brand,
15
- brandShade1: '#E00096',
16
- brandShade2: '#C00084',
17
- brandDark,
18
- brandDarkShade1: '#36C7B8',
19
- brandTint0: transparentize(0.95, brand),
20
- brandTint1: transparentize(0.9, brand),
21
- brandTint2: transparentize(0.8, brand),
22
- brandTint3: transparentize(0.7, brand),
23
- brandTint4: transparentize(0.6, brand),
24
- brandBackground0: '#2C073B',
25
- brandBackground1: '#360948',
26
- brandBackground2: '#400A55',
27
- brandBackground3: '#4A0C62',
28
- brandBackground4: '#540D6E',
29
- brandBackground5: '#6F3386',
30
- error,
31
- errorShade1: '#E02E5C',
32
- errorShade2: '#C92852',
33
- errorTint0: transparentize(0.95, error),
34
- errorTint1: transparentize(0.9, error),
35
- errorTint2: transparentize(0.8, error),
36
- errorTint3: transparentize(0.7, error),
37
- errorTint4: transparentize(0.6, error),
38
- warning,
39
- warningShade1: '#E6AF00',
40
- warningShade2: '#CC9B00',
41
- warningTint0: transparentize(0.95, warning),
42
- warningTint1: transparentize(0.9, warning),
43
- warningTint2: transparentize(0.8, warning),
44
- warningTint3: transparentize(0.7, warning),
45
- warningTint4: transparentize(0.6, warning),
46
- alert: alertColor,
47
- alertShade1: '#E6E652',
48
- alertShade2: '#CCCC48',
49
- alertTint0: transparentize(0.95, alertColor),
50
- alertTint1: transparentize(0.9, alertColor),
51
- alertTint2: transparentize(0.8, alertColor),
52
- alertTint3: transparentize(0.7, alertColor),
53
- alertTint4: transparentize(0.6, alertColor),
54
- success,
55
- successShade1: '#33E512',
56
- successShade2: '#2CCF10',
57
- successTint0: transparentize(0.95, success),
58
- successTint1: transparentize(0.9, success),
59
- successTint2: transparentize(0.8, success),
60
- successTint3: transparentize(0.7, success),
61
- successTint4: transparentize(0.6, success),
62
- grayscale0: transparentize(0.95, grayVal),
63
- grayscale1: transparentize(0.9, grayVal),
64
- grayscale2: transparentize(0.8, grayVal),
65
- grayscale3: transparentize(0.7, grayVal),
66
- grayscale4: transparentize(0.6, grayVal),
67
- grayscale5: transparentize(0.5, grayVal),
68
- grayscale6: transparentize(0.4, grayVal),
69
- grayscale7: transparentize(0.3, grayVal),
70
- grayscale8: transparentize(0.2, grayVal),
71
- grayscale9: transparentize(0.1, grayVal),
72
- grayscale10: grayVal,
73
- contrast0: transparentize(0.95, white),
74
- contrast1: transparentize(0.9, white),
75
- contrast2: transparentize(0.8, white),
76
- contrast3: transparentize(0.7, white),
77
- contrast4: transparentize(0.6, white),
78
- contrast5: transparentize(0.5, white),
79
- contrast6: transparentize(0.4, white),
80
- contrast7: transparentize(0.3, white),
81
- contrast8: transparentize(0.2, white),
82
- contrast9: transparentize(0.1, white),
83
- contrast10: white
84
- };
85
- const eighties_colors = colors;
86
- export { eighties_colors as default };
@@ -1,3 +0,0 @@
1
- import type { ITheme } from '../../ThemeTypes';
2
- declare const dark: ITheme;
3
- export default dark;