@uxf/ui 1.0.0-beta.72 → 1.0.0-beta.73

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 (7) hide show
  1. package/css/radio-group.css +26 -4
  2. package/package.json +1 -1
  3. package/radio-group/radio-group.d.ts +3 -1
  4. package/radio-group/radio-group.js +1 -1
  5. package/radio-group/radio-group.stories.js +6 -10
  6. package/radio-group/theme.d.ts +5 -0
  7. package/radio-group/theme.js +2 -0
package/css/radio-group.css CHANGED
@@ -83,10 +83,6 @@
83
83
  .uxf-radio-group--list__option {
84
84
  @apply focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
85
85
  }
86
-
87
- .uxf-radio-group--list__option__label {
88
- @apply text-white;
89
- }
90
86
  }
91
87
  }
92
88
 
@@ -136,3 +132,29 @@
136
132
  }
137
133
  }
138
134
  }
135
+
136
+ .uxf-radio-group--row {
137
+ .uxf-radio-group__options-wrapper {
138
+ @apply flex items-center space-x-10;
139
+ }
140
+
141
+ .uxf-radio-group__option__wrapper {
142
+ @apply flex-row-reverse;
143
+ }
144
+
145
+ .uxf-radio-group__option__label {
146
+ @apply pl-2;
147
+ }
148
+
149
+ :root .light & {
150
+ .uxf-radio-group--row__option {
151
+ @apply focus-visible:ring-primary-500 focus-visible:ring-offset-white;
152
+ }
153
+ }
154
+
155
+ :root .dark & {
156
+ .uxf-radio-group--row__option {
157
+ @apply focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
158
+ }
159
+ }
160
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.72",
3
+ "version": "1.0.0-beta.73",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"
package/radio-group/radio-group.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import React, { CSSProperties, ReactNode } from "react";
2
2
  import { FormControlProps } from "../types";
3
+ import { RadioGroupVariants } from "./theme";
4
+ export declare type RadioGroupVariant = keyof RadioGroupVariants;
3
5
  export declare type RadioGroupOptionValue = string | number;
4
6
  export interface RadioGroupOption {
5
7
  disabled?: boolean;
@@ -15,6 +17,6 @@ export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValue
15
17
  label: string;
16
18
  options: RadioGroupOption[];
17
19
  style?: CSSProperties;
18
- variant?: "list" | "radioButton";
20
+ variant?: RadioGroupVariant;
19
21
  }
20
22
  export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLLabelElement>>;
package/radio-group/radio-group.js CHANGED
@@ -38,7 +38,7 @@ exports.RadioGroup = (0, forwardRef_1.forwardRef)("RadioGroup", (props, ref) =>
38
38
  (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", props.isDisabled);
39
39
  const errorId = props.isInvalid ? `${props.id}--errormessage` : undefined;
40
40
  const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : "list";
41
- const rootClassName = (0, cx_1.cx)("uxf-radio-group", variant === "list" && "uxf-radio-group--list", variant === "radioButton" && "uxf-radio-group--radioButton", props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.className);
41
+ const rootClassName = (0, cx_1.cx)("uxf-radio-group", `uxf-radio-group--${variant}`, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.className);
42
42
  return (react_2.default.createElement(react_1.RadioGroup, { className: rootClassName, disabled: props.isDisabled, id: props.id, onChange: props.onChange, style: props.style, value: props.value },
43
43
  react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: props.hiddenLabel, ref: ref }, props.label),
44
44
  react_2.default.createElement("div", { className: "uxf-radio-group__options-wrapper" }, props.options.map((option) => (react_2.default.createElement(react_1.RadioGroup.Option, { className: (0, cx_1.cx)("uxf-radio-group__option", props.isDisabled && classes_1.CLASSES.IS_DISABLED), disabled: option.disabled, key: option.value.toString(), value: option.value }, (o) => (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-radio-group__option__wrapper", o.checked && classes_1.CLASSES.IS_SELECTED) },
package/radio-group/radio-group.stories.js CHANGED
@@ -46,16 +46,12 @@ const options = [
46
46
  ];
47
47
  function Default() {
48
48
  const [value, setValue] = (0, react_1.useState)(options[0].value);
49
+ const testRadioGroups = (react_1.default.createElement("div", { className: "space-y-10" },
50
+ react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: (v) => setValue(v), options: options, value: value }),
51
+ react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant radio button", onChange: (v) => setValue(v), options: options, value: value, variant: "radioButton" }),
52
+ react_1.default.createElement(index_1.RadioGroup, { hiddenLabel: true, id: "radiogroup", label: "Radio group variant row with hidden label", onChange: (v) => setValue(v), options: options, value: value, variant: "row" })));
49
53
  return (react_1.default.createElement(react_1.default.Fragment, null,
50
- react_1.default.createElement("div", { className: "flex space-y-2" },
51
- react_1.default.createElement("div", { className: "light w-1/2 p-20" },
52
- react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: (v) => setValue(v), options: options, value: value })),
53
- react_1.default.createElement("div", { className: "dark w-1/2 bg-gray-900 p-20" },
54
- react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Dark Radio group", onChange: (v) => setValue(v), options: options, value: value }))),
55
- react_1.default.createElement("div", { className: "flex space-y-2" },
56
- react_1.default.createElement("div", { className: "light w-1/2 p-20" },
57
- react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group radio button", onChange: (v) => setValue(v), options: options, value: value, variant: "radioButton" })),
58
- react_1.default.createElement("div", { className: "dark w-1/2 bg-gray-900 p-20" },
59
- react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Dark Radio group radio button", onChange: (v) => setValue(v), options: options, value: value, variant: "radioButton" })))));
54
+ react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testRadioGroups),
55
+ react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testRadioGroups)));
60
56
  }
61
57
  exports.Default = Default;
package/radio-group/theme.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export interface RadioGroupVariants {
2
+ list: true;
3
+ radioButton: true;
4
+ row: true;
5
+ }
package/radio-group/theme.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });