@wavv/ui 2.2.7 → 2.2.8

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/build/components/Checkbox.js +9 -6
  2. package/build/components/Form.d.ts +6 -3
  3. package/build/components/FormControl.d.ts +2 -0
  4. package/build/components/FormControl.js +4 -4
  5. package/build/components/Inputs/TextArea.d.ts +2 -2
  6. package/build/components/Inputs/TextArea.js +2 -2
  7. package/build/components/Radio.js +1 -0
  8. package/build/components/Toggle.d.ts +16 -6
  9. package/build/components/Toggle.js +68 -51
  10. package/package.json +19 -19
package/build/components/Checkbox.js CHANGED
@@ -31,6 +31,7 @@ const Checkbox_Checkbox = ({ label, labelPosition, checked, partial, disabled, r
31
31
  return /*#__PURE__*/ jsxs(Fragment, {
32
32
  children: [
33
33
  label && /*#__PURE__*/ jsx(ControlLabel, {
34
+ disabled: disabled,
34
35
  children: label
35
36
  }),
36
37
  /*#__PURE__*/ jsx(Icon, {
@@ -54,16 +55,18 @@ const ControlContainer = styled(Checkbox)(({ theme: { accent, formControl }, lab
54
55
  outline: 'none',
55
56
  outlineOffset: -1,
56
57
  '& > div': {
57
- transition: 'color 0.2s linear',
58
- color: formControl.color.default
58
+ transition: 'color 0.2s linear'
59
59
  },
60
- '&[data-hovered] > div': {
61
- color: isDisabled ? void 0 : formControl.color.hover
60
+ '&:not([data-selected]):not([data-indeterminate]):not([data-disabled]) > div': {
61
+ color: formControl.color.default
62
62
  },
63
- '&[data-selected] > div, &[data-indeterminate] > div': {
63
+ '&[data-selected]:not([data-disabled]) > div, &[data-indeterminate]:not([data-disabled]) > div': {
64
64
  color: formControl.color.active
65
65
  },
66
- '&[data-hovered][data-selected] > div': {
66
+ '&:not([data-selected]):not([data-indeterminate]):not([data-disabled])[data-hovered] > div': {
67
+ color: isDisabled ? void 0 : formControl.color.hover
68
+ },
69
+ '&[data-hovered][data-selected]:not([data-disabled]) > div': {
67
70
  color: isDisabled ? void 0 : formControl.color.activeHover
68
71
  },
69
72
  '&[data-disabled] > div': {
package/build/components/Form.d.ts CHANGED
@@ -23,14 +23,17 @@ declare const Form: {
23
23
  className?: string;
24
24
  iconColor?: string;
25
25
  } & Margin & import("react").HTMLProps<HTMLInputElement> & import("./types").AsProp) => import("react/jsx-runtime").JSX.Element;
26
- Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: {
26
+ Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: {
27
27
  id?: string;
28
28
  label?: string;
29
29
  labelPosition?: "left" | "right";
30
30
  disabled?: boolean;
31
31
  checked?: boolean;
32
- onChange: (val: boolean) => void;
33
- } & Margin & import("./types").AsProp & import("./FormControl").CheckboxAttributes) => import("react/jsx-runtime").JSX.Element;
32
+ gap?: number;
33
+ onChange?: import("react-aria-components").SwitchProps["onChange"];
34
+ className?: import("react-aria-components").SwitchProps["className"];
35
+ style?: import("react-aria-components").SwitchProps["style"];
36
+ } & Margin & Omit<import("react-aria-components").SwitchProps, "isDisabled" | "isSelected">) => import("react/jsx-runtime").JSX.Element;
34
37
  Checkbox: ({ label, labelPosition, checked, partial, disabled, readOnly, onChange, ...props }: {
35
38
  id?: string;
36
39
  label?: string;
package/build/components/FormControl.d.ts CHANGED
@@ -18,5 +18,7 @@ export declare const ControlInput: import("@emotion/styled").StyledComponent<{
18
18
  export declare const ControlLabel: import("@emotion/styled").StyledComponent<{
19
19
  theme?: import("@emotion/react").Theme;
20
20
  as?: React.ElementType;
21
+ } & {
22
+ disabled?: boolean;
21
23
  } & ThemeProp, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
22
24
  export type CheckboxAttributes = Attributes<HTMLInputElement>;
package/build/components/FormControl.js CHANGED
@@ -64,9 +64,9 @@ const ControlInput = styled.input({
64
64
  }
65
65
  }
66
66
  }));
67
- const ControlLabel = styled.span(({ theme: { font, scale10 } })=>({
68
- fontSize: font.size.md,
69
- color: scale10,
70
- cursor: 'pointer'
67
+ const ControlLabel = styled.span(({ theme, disabled })=>({
68
+ fontSize: theme.font.size.md,
69
+ color: disabled ? theme.formControl.color.disabled : theme.scale10,
70
+ cursor: disabled ? 'not-allowed' : 'pointer'
71
71
  }));
72
72
  export { ControlContainer, ControlInput, ControlLabel };
package/build/components/Inputs/TextArea.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type { InputProps, TextAreaProps } from '../typeDefs/inputTypes';
2
2
  import type { TextFieldProps } from '../typeDefs/reactAriaTypes';
3
3
  type Props = TextAreaProps & InputProps & TextFieldProps;
4
- declare const TextAreaComponent: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
5
- export default TextAreaComponent;
4
+ declare const TextArea: ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
5
+ export default TextArea;
package/build/components/Inputs/TextArea.js CHANGED
@@ -10,7 +10,7 @@ import InputMessage from "./helpers/InputMessage.js";
10
10
  import isAcceptable from "./helpers/isAcceptable.js";
11
11
  import Label from "./helpers/Label.js";
12
12
  import TextArea from "./helpers/TextArea.js";
13
- const TextAreaComponent = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props })=>{
13
+ const TextArea_TextArea = ({ value, label, placeholder, iconLeft, iconRight, loading, fontSize, placeholderColor, disabled, readOnly, invalid, required, description, errorMessage, accepts, asTrigger, height, maxHeight, onChange, onInput, ref, ...props })=>{
14
14
  const [inputValue, setInputValue] = useState('');
15
15
  const textAreaRef = useRef(null);
16
16
  useEffect(()=>{
@@ -160,5 +160,5 @@ const TextAreaContainer = styled(TextField)(InputContainerStyles, ({ asTrigger }
160
160
  };
161
161
  return baseStyles;
162
162
  });
163
- const Inputs_TextArea = TextAreaComponent;
163
+ const Inputs_TextArea = TextArea_TextArea;
164
164
  export { Inputs_TextArea as default };
package/build/components/Radio.js CHANGED
@@ -21,6 +21,7 @@ const Radio = ({ id, label, labelPosition, checked, disabled, margin, marginTop,
21
21
  ...marginProps,
22
22
  children: [
23
23
  label && /*#__PURE__*/ jsx(ControlLabel, {
24
+ disabled: disabled,
24
25
  children: label
25
26
  }),
26
27
  /*#__PURE__*/ jsx(ControlInput, {
package/build/components/Toggle.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- import { type CheckboxAttributes } from './FormControl';
2
- import type { AsProp, Margin } from './types';
3
- type ToggleProps = {
1
+ import { type SwitchProps } from 'react-aria-components';
2
+ import type { Margin, ThemeProp } from './types';
3
+ type Props = {
4
4
  /** Id of the input element */
5
5
  id?: string;
6
6
  /** Places a label element beside the toggle. The value will set the text of the label */
@@ -11,8 +11,18 @@ type ToggleProps = {
11
11
  disabled?: boolean;
12
12
  /** Controls the checked property of the toggle */
13
13
  checked?: boolean;
14
+ /** Sets the gap between the label and the toggle */
15
+ gap?: number;
14
16
  /** The function called with the toggle value after the toggle is changed */
15
- onChange: (val: boolean) => void;
16
- } & Margin & AsProp & CheckboxAttributes;
17
- declare const Toggle: ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
17
+ onChange?: SwitchProps['onChange'];
18
+ className?: SwitchProps['className'];
19
+ style?: SwitchProps['style'];
20
+ } & Margin & Omit<SwitchProps, 'isDisabled' | 'isSelected'>;
21
+ declare const Toggle: ({ label, labelPosition, checked, disabled, onChange, gap, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const ControlContainer: import("@emotion/styled").StyledComponent<SwitchProps & import("react").RefAttributes<HTMLLabelElement> & {
23
+ theme?: import("@emotion/react").Theme;
24
+ } & {
25
+ labelRight?: boolean;
26
+ gap?: number;
27
+ } & Margin & ThemeProp, {}, {}>;
18
28
  export default Toggle;
package/build/components/Toggle.js CHANGED
@@ -1,59 +1,76 @@
1
- import { jsx, jsxs } from "react/jsx-runtime";
2
- import { useEffect, useState } from "react";
1
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import styled from "@emotion/styled";
3
+ import { Switch } from "react-aria-components";
3
4
  import ToggleOff from "../assets/icons/ToggleOff.js";
4
5
  import ToggleOn from "../assets/icons/ToggleOn.js";
5
- import { ControlContainer, ControlInput, ControlLabel } from "./FormControl.js";
6
+ import { ControlLabel } from "./FormControl.js";
7
+ import { marginProps } from "./helpers/styledProps.js";
6
8
  import Icon from "./Icon/index.js";
7
- const Toggle = ({ id, label, labelPosition, checked, disabled, onChange, margin, marginTop, marginBottom, marginRight, marginLeft, ...props })=>{
8
- const [on, setOn] = useState(checked || false);
9
+ const Toggle = ({ label, labelPosition, checked, disabled, onChange, gap, ...props })=>{
9
10
  const labelRight = 'right' === labelPosition;
10
- const marginProps = {
11
- margin,
12
- marginTop,
13
- marginBottom,
14
- marginRight,
15
- marginLeft
16
- };
17
- const handleChange = ()=>{
18
- const value = !on;
19
- setOn(value);
20
- onChange(value);
21
- };
22
- useEffect(()=>{
23
- const checkedSet = 'boolean' == typeof checked;
24
- const value = checkedSet ? checked : on;
25
- setOn(value);
26
- }, [
27
- checked,
28
- on
29
- ]);
30
- return /*#__PURE__*/ jsxs(ControlContainer, {
31
- htmlFor: id,
11
+ const isControlled = 'boolean' == typeof checked;
12
+ return /*#__PURE__*/ jsx(ControlContainer, {
32
13
  labelRight: labelRight,
33
- disabled: disabled,
34
- ...marginProps,
35
- children: [
36
- label && /*#__PURE__*/ jsx(ControlLabel, {
37
- children: label
38
- }),
39
- /*#__PURE__*/ jsx(ControlInput, {
40
- id: id,
41
- type: "checkbox",
42
- checked: on,
43
- disabled: disabled,
44
- onChange: handleChange,
45
- ...props
46
- }),
47
- /*#__PURE__*/ jsx(Icon, {
48
- svg: on ? /*#__PURE__*/ jsx(ToggleOn, {}) : /*#__PURE__*/ jsx(ToggleOff, {}),
49
- marginLeft: label && !labelRight ? 8 : 0,
50
- marginRight: label && labelRight ? 8 : 0,
51
- pointer: !disabled,
52
- width: 34,
53
- height: 17
54
- })
55
- ]
14
+ ...isControlled ? {
15
+ isSelected: checked
16
+ } : {},
17
+ isDisabled: disabled,
18
+ onChange: onChange,
19
+ gap: gap,
20
+ ...props,
21
+ children: ({ isSelected })=>{
22
+ const isOn = isSelected;
23
+ return /*#__PURE__*/ jsxs(Fragment, {
24
+ children: [
25
+ label && /*#__PURE__*/ jsx(ControlLabel, {
26
+ disabled: disabled,
27
+ children: label
28
+ }),
29
+ /*#__PURE__*/ jsx(Icon, {
30
+ svg: isOn ? /*#__PURE__*/ jsx(ToggleOn, {}) : /*#__PURE__*/ jsx(ToggleOff, {}),
31
+ marginLeft: label && !labelRight ? 0 : 0,
32
+ marginRight: label && labelRight ? 0 : 0,
33
+ pointer: !disabled,
34
+ width: 34,
35
+ height: 17
36
+ })
37
+ ]
38
+ });
39
+ }
56
40
  });
57
41
  };
42
+ const ControlContainer = styled(Switch)(({ theme: { accent, formControl }, labelRight, isDisabled, gap = 8 })=>({
43
+ display: 'inline-flex',
44
+ flexDirection: labelRight ? 'row-reverse' : 'row',
45
+ justifyContent: labelRight ? 'flex-end' : 'flex-start',
46
+ alignItems: 'center',
47
+ gap,
48
+ position: 'relative',
49
+ cursor: isDisabled ? 'not-allowed' : void 0,
50
+ borderRadius: 4,
51
+ outline: 'none',
52
+ outlineOffset: -1,
53
+ '& > div': {
54
+ transition: 'color 0.2s linear'
55
+ },
56
+ '&:not([data-selected]):not([data-disabled]) > div': {
57
+ color: formControl.color.default
58
+ },
59
+ '&[data-selected]:not([data-disabled]) > div': {
60
+ color: formControl.color.active
61
+ },
62
+ '&:not([data-selected]):not([data-disabled])[data-hovered] > div': {
63
+ color: isDisabled ? void 0 : formControl.color.hover
64
+ },
65
+ '&[data-hovered][data-selected]:not([data-disabled]) > div': {
66
+ color: isDisabled ? void 0 : formControl.color.activeHover
67
+ },
68
+ '&[data-disabled] > div': {
69
+ color: formControl.color.disabled
70
+ },
71
+ '&[data-focus-visible]': {
72
+ outline: `${accent} solid 1px`
73
+ }
74
+ }), marginProps);
58
75
  const components_Toggle = Toggle;
59
- export { components_Toggle as default };
76
+ export { ControlContainer, components_Toggle as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wavv/ui",
3
- "version": "2.2.7",
3
+ "version": "2.2.8",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {
@@ -31,29 +31,29 @@
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.1",
35
- "@tiptap/extension-character-count": "^3.10.1",
36
- "@tiptap/extension-highlight": "^3.10.1",
37
- "@tiptap/extension-placeholder": "^3.10.1",
38
- "@tiptap/extension-task-item": "^3.10.1",
39
- "@tiptap/extension-task-list": "^3.10.1",
40
- "@tiptap/markdown": "^3.10.1",
41
- "@tiptap/pm": "^3.10.1",
42
- "@tiptap/react": "^3.10.1",
43
- "@tiptap/starter-kit": "^3.10.1",
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",
44
44
  "cmdk": "^1.1.1",
45
45
  "date-fns": "^4.1.0",
46
46
  "draft-js": "^0.11.7",
47
47
  "es-toolkit": "^1.41.0",
48
- "libphonenumber-js": "^1.12.25",
49
- "lucide-react": "^0.552.0",
48
+ "libphonenumber-js": "^1.12.26",
49
+ "lucide-react": "^0.553.0",
50
50
  "polished": "^4.1.4",
51
51
  "prism-react-renderer": "^2.4.1",
52
52
  "react-aria": "3.44.0",
53
53
  "react-aria-components": "1.13.0",
54
54
  "react-keyed-flatten-children": "^5.0.1",
55
55
  "react-phone-input-auto-format": "^0.1.0",
56
- "recharts": "^3.3.0",
56
+ "recharts": "^3.4.1",
57
57
  "sanitize.css": "^13.0.0",
58
58
  "webfontloader": "^1.6.28"
59
59
  },
@@ -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.3",
64
+ "@biomejs/biome": "2.3.4",
65
65
  "@chromatic-com/storybook": "^4.1.2",
66
66
  "@emotion/babel-plugin": "^11.13.5",
67
67
  "@emotion/react": "^11.14.0",
68
- "@rsbuild/core": "1.6.1",
69
- "@rsbuild/plugin-react": "^1.4.1",
68
+ "@rsbuild/core": "1.6.3",
69
+ "@rsbuild/plugin-react": "^1.4.2",
70
70
  "@rsbuild/plugin-svgr": "^1.2.2",
71
- "@rslib/core": "^0.17.0",
71
+ "@rslib/core": "^0.17.1",
72
72
  "@storybook/addon-docs": "^9.1.16",
73
73
  "@storybook/addon-links": "^9.1.16",
74
74
  "@storybook/addon-themes": "^9.1.16",
@@ -91,7 +91,7 @@
91
91
  "change-case": "^5.4.4",
92
92
  "chromatic": "^13.3.3",
93
93
  "jest": "^30.2.0",
94
- "lefthook": "^2.0.2",
94
+ "lefthook": "^2.0.3",
95
95
  "ncp": "^2.0.0",
96
96
  "path": "^0.12.7",
97
97
  "phone": "^3.1.67",