@uxf/ui 1.0.0-beta.9 → 1.0.0-beta.91

package/radio-group/radio-group.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = __importStar(require("react"));
+exports.default = {
+    title: "UI/RadioGroup",
+    component: index_1.RadioGroup,
+};
+const options = [
+    {
+        value: "1",
+        label: "Radio one",
+    },
+    {
+        value: "2",
+        label: "Radio two",
+    },
+    {
+        value: "3",
+        label: "Radio three-sixty",
+    },
+];
+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" }),
+        react_1.default.createElement(index_1.RadioGroup, { id: "radiogroup", label: "Radio group variant row, radioSize lg", onChange: (v) => setValue(v), options: options, value: value, variant: "row", radioSize: "lg" })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        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 });

package/raster-image/index.d.ts

@@ -0,0 +1 @@
+export * from "./raster-image";

package/raster-image/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./raster-image"), exports);

package/raster-image/raster-image.d.ts

@@ -0,0 +1,30 @@
+import { ImageSource, ResizerImageProps } from "@uxf/core/utils/resizer";
+import { FC, ImgHTMLAttributes, ReactNode } from "react";
+import { Quality } from "../utils/image";
+declare type ImgProps = ImgHTMLAttributes<HTMLImageElement>;
+declare type Props = {
+    alt: string;
+    breakpoints?: Record<string, string>;
+    className?: string;
+    heights?: number[];
+    imgClassName?: string;
+    loading?: ImgProps["loading"];
+    mode?: "contain" | "cover" | "responsive";
+    noImageContent?: ReactNode;
+    options?: Omit<ResizerImageProps, "quality" | "toFormat">;
+    quality?: Quality;
+    role?: ImgProps["role"];
+    src: ImageSource | null | undefined;
+    widths?: number[];
+} & ({
+    width: number;
+    height: number;
+} | {
+    width?: never;
+    height: number;
+} | {
+    width: number;
+    height?: never;
+});
+export declare const RasterImage: FC<Props>;
+export {};

package/raster-image/raster-image.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RasterImage = void 0;
+const cx_1 = require("@uxf/core/utils/cx");
+const resizer_1 = require("@uxf/core/utils/resizer");
+const react_1 = __importDefault(require("react"));
+const context_1 = require("../context");
+const image_1 = require("../utils/image");
+const RasterImage = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const componentContext = (0, context_1.useComponentContext)("rasterImage");
+    const className = [
+        props.mode === "contain" && "uxf-raster-image--contain",
+        props.mode === "cover" && "uxf-raster-image--cover",
+        props.className,
+    ];
+    const breakpoints = ["0em", ...Object.values((_a = props.breakpoints) !== null && _a !== void 0 ? _a : componentContext.breakpoints)];
+    const resizerSrc = (0, resizer_1.resizerImageUrl)(props.src, (_b = props.width) !== null && _b !== void 0 ? _b : "auto", (_c = props.height) !== null && _c !== void 0 ? _c : "auto", {
+        ...((_d = props.options) !== null && _d !== void 0 ? _d : {}),
+        quality: (0, image_1.getImgQuality)(props.quality, "original"),
+    });
+    if (!resizerSrc) {
+        return (react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-raster-image uxf-raster-image--no-image", ...className) }, props.noImageContent));
+    }
+    return (react_1.default.createElement("picture", { className: (0, cx_1.cx)("uxf-raster-image", ...className) }, (_f = (_e = props.widths) === null || _e === void 0 ? void 0 : _e.map((w, i) => i < breakpoints.length && (react_1.default.createElement(image_1.ImgSources, { breakpointIndex: i, breakpoints: breakpoints, height: props.heights && props.heights[i]
+            ? props.heights[i]
+            : props.width && props.height
+                ? Math.ceil((props.height / props.width) * w)
+                : "auto", key: w, options: props.options, quality: props.quality, src: props.src, width: w }))).reverse()) !== null && _f !== void 0 ? _f : (react_1.default.createElement(image_1.ImgSources, { height: (_g = props.height) !== null && _g !== void 0 ? _g : "auto", options: props.options, quality: props.quality, src: props.src, width: (_h = props.width) !== null && _h !== void 0 ? _h : "auto" })),
+        react_1.default.createElement("img", { alt: props.alt, className: (0, cx_1.cx)("uxf-raster-image__img", props.mode === "contain" && "uxf-raster-image__img--contain", props.mode === "cover" && "uxf-raster-image__img--cover", props.imgClassName), height: props.height, loading: props.loading, src: resizerSrc, width: props.width })));
+};
+exports.RasterImage = RasterImage;

package/raster-image/raster-image.stories.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<{
+        alt: string;
+        breakpoints?: Record<string, string> | undefined;
+        className?: string | undefined;
+        heights?: number[] | undefined;
+        imgClassName?: string | undefined;
+        loading?: "eager" | "lazy" | undefined;
+        mode?: "contain" | "cover" | "responsive" | undefined;
+        noImageContent?: React.ReactNode;
+        options?: Omit<import("@uxf/core/utils/resizer").ResizerImageProps, "quality" | "toFormat"> | undefined;
+        quality?: import("../utils/image").Quality | undefined;
+        role?: React.AriaRole | undefined;
+        src: import("@uxf/core/utils/resizer").ImageSource | null | undefined;
+        widths?: number[] | undefined;
+    } & ({
+        width: number;
+        height: number;
+    } | {
+        width?: undefined;
+        height: number;
+    } | {
+        width: number;
+        height?: undefined;
+    })>;
+};
+export default _default;
+export declare function Default(): JSX.Element;

package/raster-image/raster-image.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+const react_1 = __importDefault(require("react"));
+const index_1 = require("./index");
+exports.default = {
+    title: "UI/RasterImage",
+    component: index_1.RasterImage,
+};
+function Default() {
+    return (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.RasterImage, { alt: "Alt text", height: 100, width: 300, mode: "cover", src: undefined })));
+}
+exports.Default = Default;

package/scripts/generate-tw-tokens.js

@@ -0,0 +1,94 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const resolveConfig = require("tailwindcss/resolveConfig");
+const prettier = require("prettier");
+const path = require("path");
+
+function camelToSnakeCase(str) {
+    return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+
+function capitalizeFirstLetter(str) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+function resolveProperty(property, theme) {
+    const entry = theme[property];
+
+    if (typeof entry === "undefined") {
+        return;
+    }
+
+    const propertyValue = JSON.stringify(entry);
+    const propertyKey = capitalizeFirstLetter(property);
+
+    return `
+// this file is generated automatically, do not change anything manually in the contents of this file
+
+export const tw${propertyKey} = ${propertyValue};
+
+export type Tw${propertyKey} = typeof tw${propertyKey};
+`;
+}
+
+const TW_TOKENS = [
+    "boxShadow",
+    "colors",
+    "containers",
+    "fontSize",
+    "fontWeight",
+    "letterSpacings",
+    "lineHeight",
+    "screens",
+    "spacing",
+    "zIndex",
+];
+
+let error = false;
+
+try {
+    const mode = process.argv.filter((c) => c.includes("--mode="))[0]?.split("=")[1];
+    const twConfig = process.argv.filter((c) => c.includes("--twConfig="))[0]?.split("=")[1];
+    const outputPath = process.argv.filter((c) => c.includes("--outputPath="))[0]?.split("=")[1];
+
+    if (!twConfig) {
+        throw Error(`Provide valid path to tailwind config. Use "--twConfig" argument.`);
+    }
+
+    if (!outputPath) {
+        throw Error(`Provide valid output path to tailwind tokens. Use "--outputPath" argument.`);
+    }
+
+    const loadedTwConfig = resolveConfig(require(path.resolve(process.cwd(), twConfig)));
+
+    TW_TOKENS.forEach((property) => {
+        const result = resolveProperty(property, loadedTwConfig.theme) || "";
+
+        const filePath = path.resolve(process.cwd(), `${outputPath}tw-${camelToSnakeCase(property)}.ts`);
+
+        if (!result && mode !== "check" && fs.existsSync(filePath)) {
+            fs.rmSync(filePath);
+        }
+
+        const newContent = prettier.format(result, {
+            parser: "babel",
+            tabWidth: 4,
+        });
+
+        if (mode === "check") {
+            const oldContent = fs.existsSync(filePath) ? fs.readFileSync(filePath).toString() : "";
+
+            if (newContent !== oldContent) {
+                throw new Error("Generated tailwind tokens doesn't match with current tailwind config.");
+            }
+        } else if (newContent) {
+            fs.writeFileSync(filePath, newContent, "utf-8");
+        }
+    });
+} catch (err) {
+    console.error(err.message);
+    error = true;
+}
+
+process.exit(error ? 1 : 0);

package/select/index.d.ts

@@ -0,0 +1 @@
+export * from "./select";

package/select/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./select"), exports);

package/select/select.d.ts

@@ -0,0 +1,24 @@
+import type { Placement } from "@floating-ui/react-dom";
+import React, { ReactNode } from "react";
+import { IconsSet } from "../icon/theme";
+import { FormControlProps } from "../types";
+export declare type SelectValue = number | string;
+export declare type SelectOption<T = SelectValue> = {
+    disabled?: boolean;
+    id: T;
+    label: ReactNode;
+};
+export interface SelectProps<Value = SelectValue, Option = SelectOption<Value>> extends FormControlProps<Value | null> {
+    className?: string;
+    dropdownPlacement?: Placement;
+    helperText?: ReactNode;
+    hiddenLabel?: boolean;
+    iconName?: keyof IconsSet;
+    id?: string;
+    keyExtractor?: (option: Option) => string | number;
+    label?: ReactNode;
+    options: Option[];
+    placeholder?: string;
+    renderOption?: (option: Option) => ReactNode;
+}
+export declare const Select: React.ForwardRefExoticComponent<SelectProps<SelectValue, SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;

package/select/select.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const react_1 = require("@headlessui/react");
+const classes_1 = require("@uxf/core/constants/classes");
+const useInputFocus_1 = require("@uxf/core/hooks/useInputFocus");
+const composeRefs_1 = require("@uxf/core/utils/composeRefs");
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_2 = __importStar(require("react"));
+const use_dropdown_1 = require("../hooks/use-dropdown");
+const icon_1 = require("../icon");
+const label_1 = require("../label");
+exports.Select = (0, forwardRef_1.forwardRef)("Select", (props, ref) => {
+    var _a, _b, _c;
+    const generatedId = (0, react_2.useId)();
+    const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
+    const selectedOption = props.options.find((option) => option.id === props.value);
+    const innerRef = (0, react_2.useRef)(null);
+    const errorId = props.isInvalid ? `${id}--error-message` : undefined;
+    const input = (0, useInputFocus_1.useInputFocus)(innerRef, props.onBlur, props.onFocus);
+    const dropdown = (0, use_dropdown_1.useDropdown)((_b = props.dropdownPlacement) !== null && _b !== void 0 ? _b : "bottom", true);
+    const stableRef = (0, react_2.useMemo)(() => (0, composeRefs_1.composeRefs)(innerRef, ref, dropdown.reference), [ref, dropdown.reference]);
+    const iconName = (_c = props.iconName) !== null && _c !== void 0 ? _c : "chevronDown";
+    return (react_2.default.createElement(react_1.Listbox, { as: "div", className: (0, cx_1.cx)("uxf-select", props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.className), onChange: (v) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, v.id); }, value: selectedOption, disabled: props.isDisabled || props.isReadOnly }, (renderProps) => (react_2.default.createElement(react_2.default.Fragment, null,
+        react_2.default.createElement(react_1.Listbox.Label, { as: label_1.Label, isHidden: props.hiddenLabel, onClick: props.isDisabled || props.isReadOnly ? undefined : input.focus }, props.label),
+        react_2.default.createElement(react_1.Listbox.Button, { as: "div", className: (0, cx_1.cx)("uxf-select__button", (renderProps.open || input.focused) && classes_1.CLASSES.IS_FOCUSED, renderProps.disabled && classes_1.CLASSES.IS_DISABLED, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.isInvalid && classes_1.CLASSES.IS_INVALID, dropdown.placement === "bottom" && "is-open--bottom", dropdown.placement === "top" && "is-open--top", renderProps.open && "is-open"), onBlur: input.onBlur, onFocus: input.onFocus, tabIndex: props.isDisabled || props.isReadOnly ? undefined : 0, ref: stableRef, "aria-invalid": props.isInvalid, "aria-describedby": errorId },
+            react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-select__button-text", !(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) && "is-empty") }, (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.label) || props.placeholder),
+            react_2.default.createElement(icon_1.Icon, { className: (0, cx_1.cx)("uxf-select__button-icon", renderProps.open && "is-open"), name: iconName })),
+        react_2.default.createElement(react_1.Listbox.Options, { ref: dropdown.floating, className: (0, cx_1.cx)("uxf-dropdown", dropdown.placement === "bottom" && "uxf-dropdown--bottom", dropdown.placement === "top" && "uxf-dropdown--top") }, props.options.map((option) => {
+            var _a, _b, _c, _d;
+            return (react_2.default.createElement(react_1.Listbox.Option, { key: (_b = (_a = props.keyExtractor) === null || _a === void 0 ? void 0 : _a.call(props, option)) !== null && _b !== void 0 ? _b : option.id, value: option, className: (optionState) => (0, cx_1.cx)("uxf-dropdown__item", optionState.active && classes_1.CLASSES.IS_ACTIVE, optionState.disabled && classes_1.CLASSES.IS_DISABLED, optionState.selected && classes_1.CLASSES.IS_SELECTED) }, (_d = (_c = props.renderOption) === null || _c === void 0 ? void 0 : _c.call(props, option)) !== null && _d !== void 0 ? _d : option.label));
+        })),
+        props.helperText && (react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-helper-text", props.isInvalid && classes_1.CLASSES.IS_INVALID), id: errorId }, props.helperText))))));
+});

package/select/select.stories.d.ts

@@ -0,0 +1,9 @@
+import { SelectValue } from "./select";
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./select").SelectProps<SelectValue, import("./select").SelectOption<SelectValue>> & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare function Default(): JSX.Element;
+export declare function ComponentStructure(): JSX.Element;

package/select/select.stories.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentStructure = exports.Default = void 0;
+const index_1 = require("./index");
+const react_1 = __importStar(require("react"));
+const component_structure_analyzer_1 = __importDefault(require("../utils/component-structure-analyzer"));
+exports.default = {
+    title: "UI/Select",
+    component: index_1.Select,
+};
+const options = [
+    { id: "one", label: "Option one" },
+    { id: "two", label: "Option two" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+    { id: "three", label: "Option three" },
+];
+function Default() {
+    const [value, setValue] = (0, react_1.useState)();
+    const handleChange = (v) => {
+        // eslint-disable-next-line no-console
+        console.log("Select value: ", v);
+        setValue(v);
+    };
+    const storySelects = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", label: "Default select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isInvalid: true, label: "Invalid select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isDisabled: true, label: "Disabled select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isReadOnly: true, label: "Read only select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text", isRequired: true, label: "Required select", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Select, { dropdownPlacement: "top", isRequired: true, label: "Select with dropdown top", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value }),
+        react_1.default.createElement(index_1.Select, { helperText: "Helper text of Select with hidden label", hiddenLabel: true, label: "Hidden label", onChange: handleChange, options: options, placeholder: "Vyberte ..", value: value })));
+    return (react_1.default.createElement("div", { className: "flex flex-col lg:flex-row" },
+        react_1.default.createElement("div", { className: "light space-y-2 p-20 lg:w-1/2" }, storySelects),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20 lg:w-1/2" }, storySelects)));
+}
+exports.Default = Default;
+function ComponentStructure() {
+    const [value, setValue] = (0, react_1.useState)(null);
+    const handleChange = (v) => {
+        // eslint-disable-next-line no-console
+        console.log("Select value: ", v);
+        setValue(v);
+    };
+    return (react_1.default.createElement(component_structure_analyzer_1.default, null,
+        react_1.default.createElement(index_1.Select, { id: "select-1", name: "select", label: "Choose option...", options: options, onChange: handleChange, value: value })));
+}
+exports.ComponentStructure = ComponentStructure;

package/tabs/index.d.ts

@@ -0,0 +1 @@
+export * from "./tabs";

package/tabs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./tabs"), exports);

package/tabs/tabs.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from "react";
+export interface TabsPanelProps {
+    className?: string;
+    disabled?: boolean;
+    title: ReactNode;
+}
+export interface TabsProps {
+    className?: string;
+    defaultIndex?: number;
+    grow?: boolean;
+    onChange?: (index: number) => void;
+    tabListClassName?: string;
+    variant?: "default" | "segmented";
+}
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Panel: React.FC<React.PropsWithChildren<TabsPanelProps>>;
+};

package/tabs/tabs.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tabs = void 0;
+const react_1 = require("@headlessui/react");
+const classes_1 = require("@uxf/core/constants/classes");
+const useMouseDragToScroll_1 = require("@uxf/core/hooks/useMouseDragToScroll");
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_2 = __importStar(require("react"));
+const Panel = (props) => react_2.default.createElement("div", { className: props.className }, props.children);
+const TabsRoot = (0, forwardRef_1.forwardRef)("Tabs", (props, ref) => {
+    var _a, _b;
+    const tabsClassName = (0, cx_1.cx)("uxf-tabs", props.grow && "uxf-tabs--grow", props.className);
+    const containerRef = (0, react_2.useRef)(null);
+    const dragStyle = (0, useMouseDragToScroll_1.useMouseDragToScroll)(containerRef);
+    const [hasOverflow, setHasOverflow] = (0, react_2.useState)();
+    (0, react_2.useEffect)(() => {
+        const node = containerRef.current;
+        if (!node) {
+            return;
+        }
+        const handler = () => setHasOverflow(node.scrollWidth > node.clientWidth);
+        handler();
+        window.addEventListener("resize", handler);
+        return () => {
+            window.removeEventListener("resize", handler);
+        };
+    }, []);
+    if (react_2.Children.count(props.children) === 0) {
+        return react_2.default.createElement("div", { className: tabsClassName, ref: ref });
+    }
+    const tabPanels = react_2.Children.toArray(props.children).filter((child) => (0, react_2.isValidElement)(child) && child.props.title);
+    const tabs = tabPanels.map((c) => ({
+        title: c.props.title,
+        disabled: c.props.disabled,
+    }));
+    return (react_2.default.createElement(react_1.Tab.Group, { as: "div", className: tabsClassName, defaultIndex: props.defaultIndex, onChange: props.onChange, ref: ref },
+        react_2.default.createElement(react_1.Tab.List, { className: (0, cx_1.cx)("uxf-tabs__tab-list__wrapper", `uxf-tabs__tab-list__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, props.tabListClassName) },
+            react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-tabs__tab-list", `uxf-tabs__tab-list--${(_b = props.variant) !== null && _b !== void 0 ? _b : "default"}`), ref: containerRef, style: { justifyContent: hasOverflow ? "flex-start" : undefined, ...dragStyle } }, tabs.map((tab, index) => (react_2.default.createElement(react_1.Tab, { disabled: tab.disabled, className: ({ selected }) => {
+                    var _a;
+                    return (0, cx_1.cx)("uxf-tabs__tab", selected && classes_1.CLASSES.IS_ACTIVE, tab.disabled && classes_1.CLASSES.IS_DISABLED, `uxf-tabs__tab--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`);
+                }, key: `${tab.title}--${index}` }, tab.title))))),
+        react_2.default.createElement(react_1.Tab.Panels, { className: "uxf-tabs__panels" }, tabPanels.map((tab, index) => (react_2.default.createElement(react_1.Tab.Panel, { className: "outline-none", key: `${tab}--${index}` }, tab))))));
+});
+exports.Tabs = Object.assign(TabsRoot, { Panel });

package/tabs/tabs.stories.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./tabs").TabsProps & {
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>> & {
+        Panel: React.FC<React.PropsWithChildren<import("./tabs").TabsPanelProps>>;
+    };
+};
+export default _default;
+export declare function Default(): JSX.Element;