@uxf/ui 11.72.3 → 11.74.0

package/toggle/theme.js

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

package/toggle/toggle.d.ts

@@ -1,13 +0,0 @@
-import { ToggleSize, ToggleVariant } from "@uxf/ui/toggle/theme";
-import React, { CSSProperties, ReactNode } from "react";
-import { FormControlProps } from "../types";
-export interface ToggleProps extends FormControlProps<boolean | undefined> {
-    className?: string;
-    hiddenLabel?: boolean;
-    id?: string;
-    label: ReactNode;
-    size?: ToggleSize;
-    style?: CSSProperties;
-    variant?: ToggleVariant;
-}
-export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/toggle/toggle.js

@@ -1,39 +0,0 @@
-"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.Toggle = void 0;
-const react_1 = require("@headlessui/react");
-const classes_1 = require("@uxf/core/constants/classes");
-const cx_1 = require("@uxf/core/utils/cx");
-const react_2 = __importStar(require("react"));
-exports.Toggle = (0, react_2.forwardRef)((props, ref) => {
-    var _a, _b, _c, _d;
-    return (react_2.default.createElement(react_1.Switch.Group, null,
-        react_2.default.createElement("div", { className: (0, cx_1.cx)("uxf-toggle__wrapper", `uxf-toggle__wrapper--${(_a = props.variant) !== null && _a !== void 0 ? _a : "default"}`, `uxf-toggle__wrapper--size-${(_b = props.size) !== null && _b !== void 0 ? _b : "default"}`, props.hiddenLabel && "uxf-toggle__wrapper--hiddenLabel", props.className) },
-            react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY, props.value && classes_1.CLASSES.IS_SELECTED, "uxf-toggle", `uxf-toggle--${(_c = props.variant) !== null && _c !== void 0 ? _c : "default"}`, `uxf-toggle--size-${(_d = props.size) !== null && _d !== void 0 ? _d : "default"}`), disabled: props.isDisabled, id: props.id, name: props.name, onChange: props.onChange, ref: ref, style: props.style },
-                react_2.default.createElement("span", { className: "uxf-toggle__inner" })),
-            react_2.default.createElement(react_1.Switch.Label, { className: "uxf-toggle__label", hidden: props.hiddenLabel }, props.label))));
-});
-exports.Toggle.displayName = "UxfUiToggle";

package/toggle/toggle.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/toggle/toggle.spec.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const snap_test_1 = require("../utils/snap-test");
-const toggle_stories_1 = require("./toggle.stories");
-(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(toggle_stories_1.Default, null));

package/toggle/toggle.stories.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function Default(): React.JSX.Element;

package/toggle/toggle.stories.js

@@ -1,41 +0,0 @@
-"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 = Default;
-const react_1 = __importStar(require("react"));
-const action_1 = require("../utils/action");
-const index_1 = require("./index");
-function Default() {
-    const [isChecked, setIsChecked] = (0, react_1.useState)(true);
-    const onChange = (0, action_1.action)("onChange", () => setIsChecked((prev) => !prev));
-    const storyToggles = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(index_1.Toggle, { label: "Default", name: "toggle", onChange: onChange, value: isChecked }),
-        react_1.default.createElement(index_1.Toggle, { label: "Size sm", name: "toggle", onChange: onChange, size: "sm", value: isChecked }),
-        react_1.default.createElement(index_1.Toggle, { isDisabled: true, label: "Disabled", name: "toggle-disabled", onChange: onChange, value: isChecked }),
-        react_1.default.createElement(index_1.Toggle, { hiddenLabel: true, label: "Default", name: "toggle-hidden-label", onChange: onChange, value: isChecked }),
-        react_1.default.createElement(index_1.Toggle, { label: "Default (reversed)", name: "toggle-reversed", onChange: onChange, value: isChecked, variant: "reversed" })));
-    return (react_1.default.createElement("div", { className: "flex" },
-        react_1.default.createElement("div", { className: "w-1/2 gap-4 p-20" }, storyToggles)));
-}

package/tooltip/index.d.ts

@@ -1,4 +0,0 @@
-export { Tooltip } from "./tooltip";
-export type { TooltipProps } from "./tooltip";
-export { useTooltip } from "./use-tooltip";
-export type { TooltipOptions } from "./use-tooltip";

package/tooltip/index.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTooltip = exports.Tooltip = void 0;
-var tooltip_1 = require("./tooltip");
-Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_1.Tooltip; } });
-var use_tooltip_1 = require("./use-tooltip");
-Object.defineProperty(exports, "useTooltip", { enumerable: true, get: function () { return use_tooltip_1.useTooltip; } });

package/tooltip/tooltip.d.ts

@@ -1,9 +0,0 @@
-import React, { CSSProperties, ReactElement, ReactNode } from "react";
-import { TooltipOptions } from "./use-tooltip";
-export interface TooltipProps extends Omit<TooltipOptions, "arrowRef"> {
-    children: ReactElement;
-    content: ReactNode;
-    className?: string;
-    style?: CSSProperties;
-}
-export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLElement>>;

package/tooltip/tooltip.js

@@ -1,73 +0,0 @@
-"use strict";
-"use client";
-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.Tooltip = void 0;
-const react_1 = require("@floating-ui/react");
-const compose_refs_1 = require("@uxf/core-react/utils/compose-refs");
-const cx_1 = require("@uxf/core/utils/cx");
-const react_2 = __importStar(require("react"));
-const use_tooltip_1 = require("./use-tooltip");
-const STATIC_SIDES = {
-    top: "bottom",
-    right: "left",
-    bottom: "top",
-    left: "right",
-};
-exports.Tooltip = (0, react_2.forwardRef)(({ children, className, content, style, ...options }, ref) => {
-    var _a, _b, _c;
-    const arrowRef = (0, react_2.useRef)(null);
-    const tooltip = (0, use_tooltip_1.useTooltip)({ arrowRef, ...options });
-    const arrowX = (_a = tooltip.middlewareData.arrow) === null || _a === void 0 ? void 0 : _a.x;
-    const arrowY = (_b = tooltip.middlewareData.arrow) === null || _b === void 0 ? void 0 : _b.y;
-    const staticSide = STATIC_SIDES[(_c = tooltip.placement.split("-").at(0)) !== null && _c !== void 0 ? _c : "top"];
-    const stableRef = (0, react_2.useMemo)(() => (0, compose_refs_1.composeRefs)(ref, tooltip.refs.setReference, children.ref), [ref, tooltip.refs.setReference, children]);
-    return (react_2.default.createElement(react_2.default.Fragment, null,
-        (0, react_2.cloneElement)(children, tooltip.getReferenceProps({
-            ref: stableRef,
-            ...children.props,
-            "data-state": tooltip.open ? "open" : "closed",
-        })),
-        tooltip.open && (react_2.default.createElement(react_1.FloatingPortal, null,
-            react_2.default.createElement("div", { ...tooltip.getFloatingProps({
-                    className: (0, cx_1.cx)("uxf-tooltip", className),
-                    ref: tooltip.refs.setFloating,
-                    style: {
-                        ...tooltip.floatingStyles,
-                        ...style,
-                    },
-                }) },
-                react_2.default.createElement("div", { className: "uxf-tooltip__arrow", ref: arrowRef, style: {
-                        height: "16px",
-                        left: arrowX !== undefined ? `${arrowX}px` : "",
-                        position: "absolute",
-                        top: arrowY !== undefined ? `${arrowY}px` : "",
-                        transform: "rotate(45deg)",
-                        width: "16px",
-                        [staticSide]: "-6px",
-                    } }),
-                content)))));
-});
-exports.Tooltip.displayName = "UxfUiTooltip";

package/tooltip/tooltip.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/tooltip/tooltip.spec.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const snap_test_1 = require("../utils/snap-test");
-const tooltip_stories_1 = require("./tooltip.stories");
-(0, snap_test_1.snapTest)("render stories", react_1.default.createElement(tooltip_stories_1.Default, null));

package/tooltip/tooltip.stories.d.ts

@@ -1,2 +0,0 @@
-import React from "react";
-export declare function Default(): React.JSX.Element;

package/tooltip/tooltip.stories.js

@@ -1,38 +0,0 @@
-"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 = Default;
-const react_1 = __importStar(require("react"));
-const checkbox_input_1 = require("../checkbox-input");
-const chip_1 = require("../chip");
-const tooltip_1 = require("./tooltip");
-function Default() {
-    const sides = ["top", "bottom", "bottom-start", "left", "right"];
-    const [isPointingDisabled, setIsPointingDisabled] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", { className: "grid h-96 place-items-center" },
-        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Disable pointing inside tooltip?", name: "isPointingDisabled", onChange: (value) => setIsPointingDisabled(Boolean(value)), value: isPointingDisabled }),
-        sides.map((placement) => (react_1.default.createElement(tooltip_1.Tooltip, { content: "My tooltip content", isPointingDisabled: isPointingDisabled, key: placement, placement: placement },
-            react_1.default.createElement(chip_1.Chip, { color: "green" }, placement))))));
-}

package/tooltip/use-tooltip.d.ts

@@ -1,55 +0,0 @@
-import { Placement } from "@floating-ui/react";
-import { MutableRefObject } from "react";
-export interface TooltipOptions {
-    arrowRef: MutableRefObject<null>;
-    isPointingDisabled?: boolean;
-    offset?: number;
-    placement?: Placement;
-    shiftPadding?: number;
-}
-export declare function useTooltip(options: TooltipOptions): {
-    placement: Placement;
-    strategy: import("@floating-ui/utils").Strategy;
-    middlewareData: import("@floating-ui/core").MiddlewareData;
-    x: number;
-    y: number;
-    isPositioned: boolean;
-    update: () => void;
-    floatingStyles: React.CSSProperties;
-    refs: {
-        reference: MutableRefObject<import("@floating-ui/react-dom").ReferenceType | null>;
-        floating: React.MutableRefObject<HTMLElement | null>;
-        setReference: (node: import("@floating-ui/react-dom").ReferenceType | null) => void;
-        setFloating: (node: HTMLElement | null) => void;
-    } & import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-    elements: {
-        reference: import("@floating-ui/react-dom").ReferenceType | null;
-        floating: HTMLElement | null;
-    } & import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    context: {
-        x: number;
-        y: number;
-        placement: Placement;
-        strategy: import("@floating-ui/utils").Strategy;
-        middlewareData: import("@floating-ui/core").MiddlewareData;
-        isPositioned: boolean;
-        update: () => void;
-        floatingStyles: React.CSSProperties;
-        open: boolean;
-        onOpenChange: (open: boolean, event?: Event, reason?: import("@floating-ui/react").OpenChangeReason) => void;
-        events: import("@floating-ui/react").FloatingEvents;
-        dataRef: React.MutableRefObject<import("@floating-ui/react").ContextData>;
-        nodeId: string | undefined;
-        floatingId: string;
-        refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
-        elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
-    };
-    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
-    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
-    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
-        active?: boolean;
-        selected?: boolean;
-    }) => Record<string, unknown>;
-    open: boolean;
-    setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};

package/tooltip/use-tooltip.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTooltip = useTooltip;
-const react_1 = require("@floating-ui/react");
-const react_2 = require("react");
-function useTooltip(options) {
-    var _a, _b;
-    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
-    const data = (0, react_1.useFloating)({
-        middleware: [
-            (0, react_1.offset)((_a = options.offset) !== null && _a !== void 0 ? _a : 16),
-            (0, react_1.flip)(),
-            (0, react_1.shift)({ padding: (_b = options.shiftPadding) !== null && _b !== void 0 ? _b : 8 }),
-            (0, react_1.arrow)({ element: options.arrowRef }),
-        ],
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        placement: options.placement,
-        whileElementsMounted: (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, {
-            elementResize: typeof ResizeObserver !== "undefined",
-        }),
-    });
-    const context = data.context;
-    const hover = (0, react_1.useHover)(context, {
-        delay: options.isPointingDisabled ? undefined : 200,
-        handleClose: options.isPointingDisabled ? null : (0, react_1.safePolygon)(),
-        move: false,
-    });
-    const focus = (0, react_1.useFocus)(context);
-    const role = (0, react_1.useRole)(context, { role: "tooltip" });
-    const dismiss = (0, react_1.useDismiss)(context);
-    const interactions = (0, react_1.useInteractions)([hover, focus, dismiss, role]);
-    return (0, react_2.useMemo)(() => ({
-        open: isOpen,
-        setOpen: setIsOpen,
-        ...interactions,
-        ...data,
-    }), [isOpen, setIsOpen, interactions, data]);
-}

package/tw-tokens/tw-box-shadow.d.ts

@@ -1,12 +0,0 @@
-export declare const twBoxShadow: {
-    sm: string;
-    DEFAULT: string;
-    md: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    inner: string;
-    none: string;
-    paper: string;
-};
-export type TwBoxShadow = typeof twBoxShadow;

package/tw-tokens/tw-box-shadow.js

@@ -1,15 +0,0 @@
-"use strict";
-// this file is generated automatically, do not change anything manually in the contents of this file
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.twBoxShadow = void 0;
-exports.twBoxShadow = {
-    sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-    DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
-    md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-    lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-    xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
-    "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
-    inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
-    none: "none",
-    paper: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)",
-};