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

package/css/radio-group.css

@@ -83,10 +83,6 @@
         .uxf-radio-group--list__option {
             @apply focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
         }
-
-        .uxf-radio-group--list__option__label {
-            @apply text-white;
-        }
     }
 }
 
@@ -136,3 +132,29 @@
         }
     }
 }
+
+.uxf-radio-group--row {
+    .uxf-radio-group__options-wrapper {
+        @apply flex items-center space-x-10;
+    }
+
+    .uxf-radio-group__option__wrapper {
+        @apply flex-row-reverse;
+    }
+
+    .uxf-radio-group__option__label {
+        @apply pl-2;
+    }
+
+    :root .light & {
+        .uxf-radio-group--row__option {
+            @apply focus-visible:ring-primary-500 focus-visible:ring-offset-white;
+        }
+    }
+
+    :root .dark & {
+        .uxf-radio-group--row__option {
+            @apply focus-visible:ring-primary-500 focus-visible:ring-offset-gray-900;
+        }
+    }
+}

package/icon/icon.js

@@ -25,7 +25,14 @@ exports.Icon = (0, forwardRef_1.forwardRef)("Icon", (props, ref) => {
     if (CustomComponent) {
         return (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style }));
     }
-    const icon = componentContext.iconsConfig[props.name];
-    return (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${icon.w} ${icon.h}` },
-        react_1.default.createElement("use", { xlinkHref: `${componentContext.spriteFilePath}#icon-sprite--${props.name}` })));
+    if (props.name && props.name in componentContext.iconsConfig) {
+        const icon = componentContext.iconsConfig[props.name];
+        return (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${icon.w} ${icon.h}` },
+            react_1.default.createElement("use", { xlinkHref: `${componentContext.spriteFilePath}#icon-sprite--${props.name}` })));
+    }
+    // eslint-disable-next-line no-console
+    console.warn(`Icon "${props.name}" not found.`);
+    return (react_1.default.createElement("span", { title: `icon "${props.name}" not found` },
+        react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", width: props.size, height: props.size },
+            react_1.default.createElement("path", { d: "M144 416c-17.67 0-32 14.33-32 32s14.33 32.01 32 32.01s32-14.34 32-32.01S161.7 416 144 416zM211.2 32H104C46.66 32 0 78.66 0 136v16C0 165.3 10.75 176 24 176S48 165.3 48 152v-16c0-30.88 25.12-56 56-56h107.2C244.7 80 272 107.3 272 140.8c0 22.66-12.44 43.27-32.5 53.81L167 232.8C137.1 248 120 277.9 120 310.6V328c0 13.25 10.75 24.01 24 24.01S168 341.3 168 328V310.6c0-14.89 8.188-28.47 21.38-35.41l72.47-38.14C297.7 218.2 320 181.3 320 140.8C320 80.81 271.2 32 211.2 32z" }))));
 });

package/icon/icon.stories.d.ts

@@ -4,4 +4,8 @@ declare const _default: {
     component: React.ForwardRefExoticComponent<import("./icon").IconProps & React.RefAttributes<SVGSVGElement>>;
 };
 export default _default;
-export declare function Default(): JSX.Element;
+export declare function AllIcons(): JSX.Element;
+export declare function ColorAndSizes(): JSX.Element;
+export declare function CustomComponent(): JSX.Element;
+export declare function SpriteIcon(): JSX.Element;
+export declare function SpriteIconNotExists(): JSX.Element;

package/icon/icon.stories.js

@@ -3,72 +3,45 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
+exports.SpriteIconNotExists = exports.SpriteIcon = exports.CustomComponent = exports.ColorAndSizes = exports.AllIcons = void 0;
 const icon_1 = require("./icon");
 const react_1 = __importDefault(require("react"));
-function PinIcon(props) {
-    return (react_1.default.createElement("svg", { viewBox: "0 0 29.65 40", ...props },
-        react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
-}
+const context_1 = require("../context");
 exports.default = {
     title: "UI/Icon",
     component: icon_1.Icon,
 };
-function Default() {
-    return (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement("div", { className: "mb-2 text-sm" },
-            "Type: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
-            ", Color:",
-            " ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
-            ", Size: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "16")),
-        react_1.default.createElement(icon_1.Icon, { Component: PinIcon, size: 16, className: "text-red-600" }),
-        react_1.default.createElement("div", { className: "mb-2 text-sm" },
-            "Type: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
-            ", Color:",
-            " ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
-            ", Size: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "24")),
-        react_1.default.createElement(icon_1.Icon, { Component: PinIcon, size: 24, className: "text-primary-600" }),
-        react_1.default.createElement("div", { className: "mb-2 text-sm" },
-            "Type: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
-            ", Color:",
-            " ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
-            ", Size: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "48")),
-        react_1.default.createElement(icon_1.Icon, { Component: PinIcon, size: 48, className: "text-green-600" }),
-        react_1.default.createElement("div", { className: "mb-2 text-sm" },
-            "Type: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
-            ", Color:",
-            " ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
-            ", Size: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "16")),
-        react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16, className: "text-red-600" }),
-        react_1.default.createElement("div", { className: "mb-2 text-sm" },
-            "Type: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
-            ", Color:",
-            " ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
-            ", Size: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "24")),
-        react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 24, className: "text-primary-600" }),
-        react_1.default.createElement("div", { className: "mb-2 text-sm" },
-            "Type: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
-            ", Color:",
-            " ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
-            ", Size: ",
-            react_1.default.createElement("span", { className: "font-semibold" }, "48")),
-        react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 48, className: "text-green-600" })));
+function AllIcons() {
+    const iconContext = (0, context_1.useComponentContext)("icon");
+    return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap" }, Object.keys(iconContext.iconsConfig).map((iconName) => (react_1.default.createElement("div", { key: iconName, className: "flex h-28 w-28 flex-col items-center justify-center gap-3" },
+        react_1.default.createElement(icon_1.Icon, { name: iconName, size: 24 }),
+        react_1.default.createElement("div", { className: "text-gray-400" },
+            react_1.default.createElement("small", null, iconName)))))));
+}
+exports.AllIcons = AllIcons;
+function ColorAndSizes() {
+    return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap gap-4" },
+        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 12 }),
+        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16 }),
+        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }),
+        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 12, className: "text-primary-600" }),
+        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16, className: "text-orange-600" }),
+        react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20, className: "text-green-600" })));
+}
+exports.ColorAndSizes = ColorAndSizes;
+function CustomComponent() {
+    const SvgIcon = (props) => {
+        return (react_1.default.createElement("svg", { viewBox: "0 0 29.65 40", ...props },
+            react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
+    };
+    return react_1.default.createElement(icon_1.Icon, { Component: SvgIcon, size: 16 });
+}
+exports.CustomComponent = CustomComponent;
+function SpriteIcon() {
+    return react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16 });
+}
+exports.SpriteIcon = SpriteIcon;
+function SpriteIconNotExists() {
+    return react_1.default.createElement(icon_1.Icon, { name: "not-exists", size: 16 });
 }
-exports.Default = Default;
+exports.SpriteIconNotExists = SpriteIconNotExists;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxf/ui",
-  "version": "1.0.0-beta.71",
+  "version": "1.0.0-beta.73",
   "description": "",
   "publishConfig": {
     "access": "public"

package/radio-group/radio-group.d.ts

@@ -1,5 +1,7 @@
 import React, { CSSProperties, ReactNode } from "react";
 import { FormControlProps } from "../types";
+import { RadioGroupVariants } from "./theme";
+export declare type RadioGroupVariant = keyof RadioGroupVariants;
 export declare type RadioGroupOptionValue = string | number;
 export interface RadioGroupOption {
     disabled?: boolean;
@@ -15,6 +17,6 @@ export interface RadioGroupProps extends FormControlProps<RadioGroupOptionValue
     label: string;
     options: RadioGroupOption[];
     style?: CSSProperties;
-    variant?: "list" | "radioButton";
+    variant?: RadioGroupVariant;
 }
 export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLLabelElement>>;

package/radio-group/radio-group.js

@@ -38,7 +38,7 @@ exports.RadioGroup = (0, forwardRef_1.forwardRef)("RadioGroup", (props, ref) =>
     (0, use_input_submit_1.useInputSubmit)(innerRef, "radio-group", props.isDisabled);
     const errorId = props.isInvalid ? `${props.id}--errormessage` : undefined;
     const variant = (_a = props.variant) !== null && _a !== void 0 ? _a : "list";
-    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);
+    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);
     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 },
         react_2.default.createElement(react_1.RadioGroup.Label, { as: label_1.Label, className: "uxf-radio-group__label", isHidden: props.hiddenLabel, ref: ref }, props.label),
         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

@@ -46,16 +46,12 @@ const options = [
 ];
 function Default() {
     const [value, setValue] = (0, react_1.useState)(options[0].value);
+    const testRadioGroups = (react_1.default.createElement("div", { className: "space-y-10" },
+        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: (v) => setValue(v), options: options, value: value }),
+        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" }),
+        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" })));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("div", { className: "flex space-y-2" },
-            react_1.default.createElement("div", { className: "light w-1/2 p-20" },
-                react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Light Radio group", onChange: (v) => setValue(v), options: options, value: value })),
-            react_1.default.createElement("div", { className: "dark w-1/2 bg-gray-900 p-20" },
-                react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Dark Radio group", onChange: (v) => setValue(v), options: options, value: value }))),
-        react_1.default.createElement("div", { className: "flex space-y-2" },
-            react_1.default.createElement("div", { className: "light w-1/2 p-20" },
-                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" })),
-            react_1.default.createElement("div", { className: "dark w-1/2 bg-gray-900 p-20" },
-                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" })))));
+        react_1.default.createElement("div", { className: "light rounded bg-white p-8" }, testRadioGroups),
+        react_1.default.createElement("div", { className: "dark rounded bg-gray-900 p-8 text-white" }, testRadioGroups)));
 }
 exports.Default = Default;

package/radio-group/theme.d.ts

@@ -0,0 +1,5 @@
+export interface RadioGroupVariants {
+    list: true;
+    radioButton: true;
+    row: true;
+}

package/radio-group/theme.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });