@uxf/ui 1.0.0-beta.68 → 1.0.0-beta.69

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

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from "react";
 import { FormControlProps } from "../types";
-import { HexCodeString } from "../utils/isLightBackground";
+import { HexCodeString } from "../utils/is-light-background";
 export declare type ColorRadioGroupOptionValue = HexCodeString;
 export interface ColorRadioGroupOption {
     label: string;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { FormControlProps } from "../types";
-import { HexCodeString } from "../utils/isLightBackground";
+import { HexCodeString } from "../utils/is-light-background";
 export interface ColorRadioProps extends FormControlProps<boolean> {
     color: HexCodeString;
     colorLabel: string;

package/color-radio-group/color-radio.js

@@ -8,7 +8,7 @@ const classes_1 = require("@uxf/core/constants/classes");
 const cx_1 = require("@uxf/core/utils/cx");
 const react_1 = __importDefault(require("react"));
 const forwardRef_1 = require("@uxf/core/utils/forwardRef");
-const isLightBackground_1 = require("../utils/isLightBackground");
+const is_light_background_1 = require("../utils/is-light-background");
 function CheckIcon() {
     return (react_1.default.createElement("svg", { fill: "none", viewBox: "0 0 16 16" },
         react_1.default.createElement("path", { d: "M13.333 4 6 11.333 2.667 8", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" })));
@@ -17,6 +17,6 @@ exports.ColorRadio = (0, forwardRef_1.forwardRef)("ColorRadio", (props, ref) =>
     const colorRadioStyle = { "--bg-color": props.color };
     return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-color-radio", props.value && classes_1.CLASSES.IS_SELECTED), onClick: () => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, !props.value); }, ref: ref, style: colorRadioStyle },
         react_1.default.createElement("span", { className: "uxf-color-radio__label" }, props.colorLabel),
-        react_1.default.createElement("span", { className: `uxf-color-radio__icon ${(0, isLightBackground_1.isLightBackground)(props.color) ? "uxf-color-radio__icon--dark" : ""}` },
+        react_1.default.createElement("span", { className: `uxf-color-radio__icon ${(0, is_light_background_1.isLightBackground)(props.color) ? "uxf-color-radio__icon--dark" : ""}` },
             react_1.default.createElement(CheckIcon, null))));
 });

package/css/input.css

@@ -51,7 +51,7 @@
     }
 
     &__wrapper {
-        @apply h-12 rounded-lg border px-4;
+        @apply rounded-lg border px-4 text-base;
 
         :root .light & {
             @apply border-gray-200;
@@ -62,6 +62,18 @@
         }
     }
 
+    &--size-default {
+        .uxf-input__wrapper {
+            @apply h-12;
+        }
+    }
+
+    &--size-large {
+        .uxf-input__wrapper {
+            @apply h-14 text-lg;
+        }
+    }
+
     &--has-right-addon {
         .uxf-input__wrapper {
             @apply rounded-r-none;

package/css/list-item.css

@@ -1,15 +1,19 @@
 .uxf-list-item {
-    @apply flex justify-between grow py-4 px-5 min-h-[64px] transition-opacity hover:opacity-75
+    @apply flex justify-between grow py-4 px-5 min-h-[64px] space-x-3 transition-opacity hover:opacity-75
         outline-none relative before:absolute before:inset-0 before:rounded-lg focus-visible:before:border-2;
 
-    .uxf-list-item__end-icon {
-        @apply shrink-0 pl-3;
+    &__inner {
+        @apply w-full;
+    }
+
+    &__end-elements-wrapper, &__end-icon-wrapper {
+        @apply shrink-0;
     }
 
     :root .light & {
         @apply focus-visible:before:border-primary-500;
 
-        .uxf-list-item__end-icon {
+        .uxf-list-item__end-icon-wrapper {
             @apply text-gray-300;
         }
     }
@@ -17,7 +21,7 @@
     :root .dark & {
         @apply focus-visible:before:border-primary-500;
 
-        .uxf-list-item__end-icon {
+        .uxf-list-item__end-icon-wrapper {
             @apply text-gray-600;
         }
     }

package/input/input.js

@@ -35,6 +35,7 @@ function getChildrenById(children, componentName) {
         .find((ch) => ch.type.displayName === componentName);
 }
 exports.Input = (0, forwardRef_1.forwardRef)("Input", (props, ref) => {
+    var _a, _b;
     const inputWrapperRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
     const [focused, setFocused] = (0, react_1.useState)(false);
@@ -43,7 +44,7 @@ exports.Input = (0, forwardRef_1.forwardRef)("Input", (props, ref) => {
     const rightAddon = getChildrenById(props.children, "InputRightAddon");
     const leftElement = getChildrenById(props.children, "InputLeftElement");
     const rightElement = getChildrenById(props.children, "InputRightElement");
-    const inputGroupClasses = (0, cx_1.cx)("uxf-input", leftAddon && "uxf-input--has-left-addon", leftElement && "uxf-input--has-left-element", rightElement && "uxf-input--has-right-element", rightAddon && "uxf-input--has-right-addon", focused && classes_1.CLASSES.IS_FOCUSED, (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && classes_1.CLASSES.IS_INVALID, (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isDisabled) && classes_1.CLASSES.IS_DISABLED, (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isReadOnly) && classes_1.CLASSES.IS_READONLY);
+    const inputGroupClasses = (0, cx_1.cx)("uxf-input", leftAddon && "uxf-input--has-left-addon", leftElement && "uxf-input--has-left-element", rightElement && "uxf-input--has-right-element", rightAddon && "uxf-input--has-right-addon", focused && classes_1.CLASSES.IS_FOCUSED, (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isInvalid) && classes_1.CLASSES.IS_INVALID, (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isDisabled) && classes_1.CLASSES.IS_DISABLED, (mainInput === null || mainInput === void 0 ? void 0 : mainInput.props.isReadOnly) && classes_1.CLASSES.IS_READONLY, `uxf-input--size-${(_a = props.size) !== null && _a !== void 0 ? _a : "default"}`, `uxf-input--variant-${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`);
     const onFocus = (e) => {
         var _a, _b;
         setFocused(true);

package/input/input.stories.js

@@ -61,7 +61,9 @@ function Default() {
         react_1.default.createElement(input_1.Input, null,
             react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Disabled", isInvalid: isInvalid, isDisabled: true })),
         react_1.default.createElement(input_1.Input, null,
-            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true }))));
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Read Only", isInvalid: isInvalid, isReadOnly: true })),
+        react_1.default.createElement(input_1.Input, { size: "large" },
+            react_1.default.createElement(input_1.Input.Element, { value: value, onChange: (0, action_1.action)("onChange", onChange), placeholder: "Size large", isInvalid: isInvalid }))));
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("input", { type: "checkbox", checked: isInvalid, onChange: (e) => setInvalid(e.target.checked) }),
         react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyInputs),

package/input/theme.d.ts

@@ -3,4 +3,5 @@ export interface InputGroupVariants {
 }
 export interface InputGroupSizes {
     default: true;
+    large: true;
 }

package/list-item/list-item.d.ts

@@ -1,7 +1,8 @@
 import { UseAnchorProps } from "@uxf/core/hooks/useAnchorProps";
-import React, { AnchorHTMLAttributes } from "react";
+import React, { AnchorHTMLAttributes, ReactNode } from "react";
 import { IconName } from "../icon/types";
 export interface ListItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type">, UseAnchorProps {
     endIcon?: IconName;
+    endElement?: ReactNode;
 }
 export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLAnchorElement>>;

package/list-item/list-item.js

@@ -11,13 +11,14 @@ const react_1 = __importDefault(require("react"));
 const icon_1 = require("../icon");
 exports.ListItem = (0, forwardRef_1.forwardRef)("ListItem", (props, ref) => {
     // eslint-disable-next-line react/destructuring-assignment
-    const { className, children, endIcon, ...restProps } = props;
+    const { className, children, endElement, endIcon, ...restProps } = props;
     const anchorProps = (0, useAnchorProps_1.useAnchorProps)({
         ...restProps,
         className: (0, cx_1.cx)("uxf-list-item", className),
     });
     return (react_1.default.createElement("a", { ref: ref, ...anchorProps },
-        react_1.default.createElement("span", null, children),
-        endIcon && (react_1.default.createElement("span", { className: "uxf-list-item__end-icon" },
+        react_1.default.createElement("span", { className: "uxf-list-item__inner" }, children),
+        endElement && react_1.default.createElement("span", { className: "uxf-list-item__end-element-wrapper" }, endElement),
+        endIcon && (react_1.default.createElement("span", { className: "uxf-list-item__end-icon-wrapper" },
             react_1.default.createElement(icon_1.Icon, { name: endIcon, size: 24 })))));
 });

package/list-item/list-item.stories.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
+const icon_1 = require("../icon");
 exports.default = {
     title: "UI/ListItem",
     component: index_1.ListItem,
@@ -20,7 +21,10 @@ function Default() {
                 react_1.default.createElement("div", null, "Karel Vom\u00E1\u010Dka"),
                 react_1.default.createElement("div", null, "U\u017Eivatel"))),
         react_1.default.createElement("div", { className: "border-gray500 border-b" }),
-        react_1.default.createElement(index_1.ListItem, { onClick: () => void null }, "No end icon")));
+        react_1.default.createElement(index_1.ListItem, { onClick: () => void null }, "No end icon"),
+        react_1.default.createElement("div", { className: "border-gray500 border-b" }),
+        react_1.default.createElement(index_1.ListItem, { endElement: react_1.default.createElement(icon_1.Icon, { name: "camera", className: "text-success-500", size: 24 }), onClick: () => void null }, "End element"),
+        react_1.default.createElement(index_1.ListItem, { endElement: react_1.default.createElement(icon_1.Icon, { name: "camera", className: "text-success-500", size: 24 }), endIcon: "chevronRight", onClick: () => void null }, "End element and end icon")));
     return (react_1.default.createElement("div", { className: "flex" },
         react_1.default.createElement("div", { className: "light grow gap-4 p-4" }, storyListItem),
         react_1.default.createElement("div", { className: "dark grow gap-4 bg-gray-900 p-4 text-gray-200" }, storyListItem)));

package/package.json

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