@evolve.ui/core-components 1.0.0

package/Input.cjs

@@ -0,0 +1,104 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Icons = require("./Icons.cjs");
+const require_Typography_Text = require("./Typography/Text.cjs");
+const require_IconButton = require("./IconButton.cjs");
+const require_formLabel = require("./formLabel.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/TextInput/TextInput.tsx
+const TextInput = (0, react.forwardRef)((unfilteredProps, ref) => {
+	const [formLabelProps, { characterLimit = 0, clearAriaLabel = "Clear text", disabled, emphasis = "subtle", onChange, onClear, overCharacterLimitText = "Too many characters", placeholder = " ", prefix, showClearIcon: showClearIconProp, small, suffix, type, ...props }] = require_formLabel.extractFormLabelProps(unfilteredProps);
+	const [characterCount, setCharacterCount] = (0, react.useState)(props.value?.length ?? 0);
+	(0, react.useEffect)(() => {
+		if (props.value !== void 0) setCharacterCount(String(props.value).length);
+	}, [props.value]);
+	const handleOnChange = (0, react.useCallback)((e) => {
+		setCharacterCount(String(e.target.value).length);
+		onChange?.(e);
+	}, [onChange]);
+	const overCharacterLimit = characterLimit ? characterCount > characterLimit : false;
+	const hasError = Boolean(formLabelProps.hasError) || overCharacterLimit;
+	const showClearIcon = showClearIconProp ?? Boolean(onClear);
+	const [inputType, setInputType] = (0, react.useState)(type ?? "text");
+	const togglePassword = () => {
+		if (!disabled) setInputType(inputType === "password" ? "text" : "password");
+	};
+	const showClear = showClearIcon && Boolean(onClear);
+	const showPasswordToggle = type === "password";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_formLabel.FormLabel, {
+		...formLabelProps,
+		disabled,
+		errorText: overCharacterLimit ? overCharacterLimitText : formLabelProps.errorText,
+		hasError,
+		showTopRight: Boolean(formLabelProps.secure) || characterLimit > 0,
+		topRight: formLabelProps.secure ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography_Text.LabelMini, {
+			className: "ml-auto whitespace-nowrap grid-area-[topright]",
+			color: formLabelProps.disabled ? "disabled" : overCharacterLimit ? "critical" : "secondary",
+			children: [
+				characterCount,
+				"/",
+				characterLimit
+			]
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _evolve_ui_theme_system.cn)("overflow-none box-content flex items-center gap-2xs rounded-input border border-border-secondary bg-background-primary px-xs hover:border-border-hover has-[:focus]:border-border-selected", {
+				"!border-border-disabled bg-background-disabled text-text-disabled": disabled,
+				"border-border-critical": hasError,
+				"h-[32px]": small,
+				"h-[40px]": !small
+			}),
+			children: [
+				Boolean(prefix) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodyPrimary, {
+					color: disabled ? "disabled" : "secondary",
+					children: prefix
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: (0, _evolve_ui_theme_system.cn)("peer hui-text-body-primary hui-autofill-transparent w-full bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", { "text-text-primary placeholder:text-text-secondary": emphasis === "bold" }),
+					...props,
+					disabled,
+					onChange: handleOnChange,
+					placeholder,
+					ref,
+					type: inputType
+				}),
+				Boolean(suffix) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography_Text.BodyPrimary, {
+					color: disabled ? "disabled" : "secondary",
+					children: suffix
+				}),
+				showClear && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.IconButton, {
+					"aria-label": clearAriaLabel,
+					className: (0, _evolve_ui_theme_system.cn)("self-center justify-self-end !rounded-button peer-placeholder-shown:hidden", small ? "mr-[-8px]" : "mr-[-4px]"),
+					disabled,
+					hideTooltip: true,
+					icon: require_Icons.Close,
+					onClick: onClear,
+					role: "button",
+					shape: "square",
+					size: "sm",
+					type: "button"
+				}),
+				showPasswordToggle && (inputType === "password" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.EyeSlash, {
+					color: disabled ? "disabled" : "primary",
+					onClick: togglePassword,
+					role: "button",
+					size: "sm"
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icons.Eye, {
+					color: disabled ? "disabled" : "primary",
+					onClick: togglePassword,
+					role: "button",
+					size: "sm"
+				}))
+			]
+		})
+	});
+});
+TextInput.displayName = "TextInput";
+//#endregion
+exports.TextInput = TextInput;
+
+//# sourceMappingURL=Input.cjs.map

package/Input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.cjs","names":["extractFormLabelProps","FormLabel","LabelMini","BodyPrimary","IconButton","Close","EyeSlash","Eye"],"sources":["../src/TextInput/TextInput.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ChangeEvent, forwardRef, HTMLProps, ReactNode, useCallback, useEffect, useState } from 'react';\n\nimport { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Close, Eye, EyeSlash } from '../Icons';\nimport { BodyPrimary, LabelMini } from '../Typography/Text/Text';\n\nexport type AllowedTypes = 'text' | 'email' | 'number' | 'password' | 'url';\n\ntype Props = Omit<HTMLProps<HTMLInputElement>, 'as' | 'value'> & {\n    characterLimit?: number;\n    clearAriaLabel?: string;\n    /**\n     * Input emphasis. Currently supports subtle and bold. Defaults to subtle.\n     */\n    emphasis?: 'subtle' | 'bold';\n    overCharacterLimitText?: string;\n    prefix?: ReactNode;\n    small?: boolean;\n\n    suffix?: ReactNode;\n    /**\n     * Input type. Currently supports text, email, number, password, and url. Defaults to text.\n     */\n    type?: AllowedTypes;\n    value?: string;\n} & Partial<\n        Omit<HTMLProps<HTMLInputElement>, 'as' | 'aria-label' | 'aria-invalid' | 'aria-errormessage' | 'children'>\n    > &\n    ({ onClear: undefined; showClearIcon?: false } | { onClear?: () => void; showClearIcon?: boolean }) &\n    FormLabelProps;\n\nexport const TextInput = forwardRef<HTMLInputElement, Props>((unfilteredProps, ref) => {\n    const [\n        formLabelProps,\n        {\n            // need this to properly style onClear (only show when placeholder is not showing)\n            characterLimit = 0,\n            clearAriaLabel = 'Clear text',\n            disabled,\n            emphasis = 'subtle',\n            onChange,\n            onClear,\n            overCharacterLimitText = 'Too many characters',\n            placeholder = ' ',\n            prefix,\n            showClearIcon: showClearIconProp,\n            small,\n            suffix,\n            type,\n            ...props\n        },\n    ] = extractFormLabelProps(unfilteredProps);\n\n    const [characterCount, setCharacterCount] = useState(props.value?.length ?? 0);\n\n    useEffect(() => {\n        if (props.value !== undefined) {\n            setCharacterCount(String(props.value).length);\n        }\n    }, [props.value]);\n\n    const handleOnChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            setCharacterCount(String((e.target as HTMLInputElement).value).length);\n            onChange?.(e);\n        },\n        [onChange]\n    );\n\n    const overCharacterLimit = characterLimit ? characterCount > characterLimit : false;\n    const hasError = Boolean(formLabelProps.hasError) || overCharacterLimit;\n\n    const showClearIcon = showClearIconProp ?? Boolean(onClear);\n\n    const [inputType, setInputType] = useState(type ?? 'text');\n\n    const togglePassword = (): void => {\n        if (!disabled) {\n            setInputType(inputType === 'password' ? 'text' : 'password');\n        }\n    };\n\n    const showClear = showClearIcon && Boolean(onClear);\n    const showPasswordToggle = type === 'password';\n\n    return (\n        <FormLabel\n            {...formLabelProps}\n            disabled={disabled}\n            errorText={overCharacterLimit ? overCharacterLimitText : formLabelProps.errorText}\n            hasError={hasError}\n            showTopRight={Boolean(formLabelProps.secure) || characterLimit > 0}\n            topRight={\n                formLabelProps.secure ? undefined : (\n                    <LabelMini\n                        className=\"ml-auto whitespace-nowrap grid-area-[topright]\"\n                        color={formLabelProps.disabled ? 'disabled' : overCharacterLimit ? 'critical' : 'secondary'}\n                    >\n                        {characterCount}/{characterLimit}\n                    </LabelMini>\n                )\n            }\n        >\n            <div\n                className={cn(\n                    'overflow-none box-content flex items-center gap-2xs rounded-input border border-border-secondary bg-background-primary px-xs hover:border-border-hover has-[:focus]:border-border-selected',\n                    {\n                        '!border-border-disabled bg-background-disabled text-text-disabled': disabled,\n                        'border-border-critical': hasError,\n                        'h-[32px]': small, // Smaller due to box-content to prevent clipping\n                        'h-[40px]': !small, // Smaller due to box-content to prevent clipping\n                    }\n                )}\n            >\n                {Boolean(prefix) && <BodyPrimary color={disabled ? 'disabled' : 'secondary'}>{prefix}</BodyPrimary>}\n                <input\n                    className={cn(\n                        'peer hui-text-body-primary hui-autofill-transparent w-full bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n                        {\n                            'text-text-primary placeholder:text-text-secondary': emphasis === 'bold',\n                        }\n                    )}\n                    {...props}\n                    disabled={disabled}\n                    onChange={handleOnChange}\n                    placeholder={placeholder}\n                    ref={ref}\n                    type={inputType}\n                />\n                {Boolean(suffix) && <BodyPrimary color={disabled ? 'disabled' : 'secondary'}>{suffix}</BodyPrimary>}\n                {showClear && (\n                    <IconButton\n                        aria-label={clearAriaLabel}\n                        className={cn(\n                            'self-center justify-self-end !rounded-button peer-placeholder-shown:hidden',\n                            small ? 'mr-[-8px]' : 'mr-[-4px]'\n                        )}\n                        disabled={disabled}\n                        hideTooltip\n                        icon={Close}\n                        onClick={onClear}\n                        role=\"button\"\n                        shape=\"square\"\n                        size=\"sm\"\n                        type=\"button\"\n                    />\n                )}\n                {showPasswordToggle &&\n                    (inputType === 'password' ? (\n                        <EyeSlash\n                            color={disabled ? 'disabled' : 'primary'}\n                            // hoverColor={disabled ? undefined : 'hover'}\n                            onClick={togglePassword}\n                            role=\"button\"\n                            size=\"sm\"\n                        />\n                    ) : (\n                        <Eye\n                            color={disabled ? 'disabled' : 'primary'}\n                            // hoverColor={disabled ? undefined : 'hover'}\n                            onClick={togglePassword}\n                            role=\"button\"\n                            size=\"sm\"\n                        />\n                    ))}\n            </div>\n        </FormLabel>\n    );\n});\n\nTextInput.displayName = 'TextInput';\n"],"mappings":"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"}

package/Input.d.cts

@@ -0,0 +1,2 @@
+import { n as TextInput, t as AllowedTypes } from "./TextInput-BhkeQZh4.cjs";
+export { AllowedTypes, TextInput };

package/Input.d.mts

@@ -0,0 +1,2 @@
+import { n as TextInput, t as AllowedTypes } from "./TextInput-CWCeR18b.mjs";
+export { AllowedTypes, TextInput };

package/Input.mjs

@@ -0,0 +1,100 @@
+'use client';
+import { Close, Eye, EyeSlash } from "./Icons.mjs";
+import { BodyPrimary, LabelMini } from "./Typography/Text.mjs";
+import { IconButton } from "./IconButton.mjs";
+import { FormLabel, extractFormLabelProps } from "./formLabel.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/TextInput/TextInput.tsx
+const TextInput = forwardRef((unfilteredProps, ref) => {
+	const [formLabelProps, { characterLimit = 0, clearAriaLabel = "Clear text", disabled, emphasis = "subtle", onChange, onClear, overCharacterLimitText = "Too many characters", placeholder = " ", prefix, showClearIcon: showClearIconProp, small, suffix, type, ...props }] = extractFormLabelProps(unfilteredProps);
+	const [characterCount, setCharacterCount] = useState(props.value?.length ?? 0);
+	useEffect(() => {
+		if (props.value !== void 0) setCharacterCount(String(props.value).length);
+	}, [props.value]);
+	const handleOnChange = useCallback((e) => {
+		setCharacterCount(String(e.target.value).length);
+		onChange?.(e);
+	}, [onChange]);
+	const overCharacterLimit = characterLimit ? characterCount > characterLimit : false;
+	const hasError = Boolean(formLabelProps.hasError) || overCharacterLimit;
+	const showClearIcon = showClearIconProp ?? Boolean(onClear);
+	const [inputType, setInputType] = useState(type ?? "text");
+	const togglePassword = () => {
+		if (!disabled) setInputType(inputType === "password" ? "text" : "password");
+	};
+	const showClear = showClearIcon && Boolean(onClear);
+	const showPasswordToggle = type === "password";
+	return /* @__PURE__ */ jsx(FormLabel, {
+		...formLabelProps,
+		disabled,
+		errorText: overCharacterLimit ? overCharacterLimitText : formLabelProps.errorText,
+		hasError,
+		showTopRight: Boolean(formLabelProps.secure) || characterLimit > 0,
+		topRight: formLabelProps.secure ? void 0 : /* @__PURE__ */ jsxs(LabelMini, {
+			className: "ml-auto whitespace-nowrap grid-area-[topright]",
+			color: formLabelProps.disabled ? "disabled" : overCharacterLimit ? "critical" : "secondary",
+			children: [
+				characterCount,
+				"/",
+				characterLimit
+			]
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cn("overflow-none box-content flex items-center gap-2xs rounded-input border border-border-secondary bg-background-primary px-xs hover:border-border-hover has-[:focus]:border-border-selected", {
+				"!border-border-disabled bg-background-disabled text-text-disabled": disabled,
+				"border-border-critical": hasError,
+				"h-[32px]": small,
+				"h-[40px]": !small
+			}),
+			children: [
+				Boolean(prefix) && /* @__PURE__ */ jsx(BodyPrimary, {
+					color: disabled ? "disabled" : "secondary",
+					children: prefix
+				}),
+				/* @__PURE__ */ jsx("input", {
+					className: cn("peer hui-text-body-primary hui-autofill-transparent w-full bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", { "text-text-primary placeholder:text-text-secondary": emphasis === "bold" }),
+					...props,
+					disabled,
+					onChange: handleOnChange,
+					placeholder,
+					ref,
+					type: inputType
+				}),
+				Boolean(suffix) && /* @__PURE__ */ jsx(BodyPrimary, {
+					color: disabled ? "disabled" : "secondary",
+					children: suffix
+				}),
+				showClear && /* @__PURE__ */ jsx(IconButton, {
+					"aria-label": clearAriaLabel,
+					className: cn("self-center justify-self-end !rounded-button peer-placeholder-shown:hidden", small ? "mr-[-8px]" : "mr-[-4px]"),
+					disabled,
+					hideTooltip: true,
+					icon: Close,
+					onClick: onClear,
+					role: "button",
+					shape: "square",
+					size: "sm",
+					type: "button"
+				}),
+				showPasswordToggle && (inputType === "password" ? /* @__PURE__ */ jsx(EyeSlash, {
+					color: disabled ? "disabled" : "primary",
+					onClick: togglePassword,
+					role: "button",
+					size: "sm"
+				}) : /* @__PURE__ */ jsx(Eye, {
+					color: disabled ? "disabled" : "primary",
+					onClick: togglePassword,
+					role: "button",
+					size: "sm"
+				}))
+			]
+		})
+	});
+});
+TextInput.displayName = "TextInput";
+//#endregion
+export { TextInput };
+
+//# sourceMappingURL=Input.mjs.map

package/Input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.mjs","names":[],"sources":["../src/TextInput/TextInput.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ChangeEvent, forwardRef, HTMLProps, ReactNode, useCallback, useEffect, useState } from 'react';\n\nimport { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Close, Eye, EyeSlash } from '../Icons';\nimport { BodyPrimary, LabelMini } from '../Typography/Text/Text';\n\nexport type AllowedTypes = 'text' | 'email' | 'number' | 'password' | 'url';\n\ntype Props = Omit<HTMLProps<HTMLInputElement>, 'as' | 'value'> & {\n    characterLimit?: number;\n    clearAriaLabel?: string;\n    /**\n     * Input emphasis. Currently supports subtle and bold. Defaults to subtle.\n     */\n    emphasis?: 'subtle' | 'bold';\n    overCharacterLimitText?: string;\n    prefix?: ReactNode;\n    small?: boolean;\n\n    suffix?: ReactNode;\n    /**\n     * Input type. Currently supports text, email, number, password, and url. Defaults to text.\n     */\n    type?: AllowedTypes;\n    value?: string;\n} & Partial<\n        Omit<HTMLProps<HTMLInputElement>, 'as' | 'aria-label' | 'aria-invalid' | 'aria-errormessage' | 'children'>\n    > &\n    ({ onClear: undefined; showClearIcon?: false } | { onClear?: () => void; showClearIcon?: boolean }) &\n    FormLabelProps;\n\nexport const TextInput = forwardRef<HTMLInputElement, Props>((unfilteredProps, ref) => {\n    const [\n        formLabelProps,\n        {\n            // need this to properly style onClear (only show when placeholder is not showing)\n            characterLimit = 0,\n            clearAriaLabel = 'Clear text',\n            disabled,\n            emphasis = 'subtle',\n            onChange,\n            onClear,\n            overCharacterLimitText = 'Too many characters',\n            placeholder = ' ',\n            prefix,\n            showClearIcon: showClearIconProp,\n            small,\n            suffix,\n            type,\n            ...props\n        },\n    ] = extractFormLabelProps(unfilteredProps);\n\n    const [characterCount, setCharacterCount] = useState(props.value?.length ?? 0);\n\n    useEffect(() => {\n        if (props.value !== undefined) {\n            setCharacterCount(String(props.value).length);\n        }\n    }, [props.value]);\n\n    const handleOnChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            setCharacterCount(String((e.target as HTMLInputElement).value).length);\n            onChange?.(e);\n        },\n        [onChange]\n    );\n\n    const overCharacterLimit = characterLimit ? characterCount > characterLimit : false;\n    const hasError = Boolean(formLabelProps.hasError) || overCharacterLimit;\n\n    const showClearIcon = showClearIconProp ?? Boolean(onClear);\n\n    const [inputType, setInputType] = useState(type ?? 'text');\n\n    const togglePassword = (): void => {\n        if (!disabled) {\n            setInputType(inputType === 'password' ? 'text' : 'password');\n        }\n    };\n\n    const showClear = showClearIcon && Boolean(onClear);\n    const showPasswordToggle = type === 'password';\n\n    return (\n        <FormLabel\n            {...formLabelProps}\n            disabled={disabled}\n            errorText={overCharacterLimit ? overCharacterLimitText : formLabelProps.errorText}\n            hasError={hasError}\n            showTopRight={Boolean(formLabelProps.secure) || characterLimit > 0}\n            topRight={\n                formLabelProps.secure ? undefined : (\n                    <LabelMini\n                        className=\"ml-auto whitespace-nowrap grid-area-[topright]\"\n                        color={formLabelProps.disabled ? 'disabled' : overCharacterLimit ? 'critical' : 'secondary'}\n                    >\n                        {characterCount}/{characterLimit}\n                    </LabelMini>\n                )\n            }\n        >\n            <div\n                className={cn(\n                    'overflow-none box-content flex items-center gap-2xs rounded-input border border-border-secondary bg-background-primary px-xs hover:border-border-hover has-[:focus]:border-border-selected',\n                    {\n                        '!border-border-disabled bg-background-disabled text-text-disabled': disabled,\n                        'border-border-critical': hasError,\n                        'h-[32px]': small, // Smaller due to box-content to prevent clipping\n                        'h-[40px]': !small, // Smaller due to box-content to prevent clipping\n                    }\n                )}\n            >\n                {Boolean(prefix) && <BodyPrimary color={disabled ? 'disabled' : 'secondary'}>{prefix}</BodyPrimary>}\n                <input\n                    className={cn(\n                        'peer hui-text-body-primary hui-autofill-transparent w-full bg-transparent outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n                        {\n                            'text-text-primary placeholder:text-text-secondary': emphasis === 'bold',\n                        }\n                    )}\n                    {...props}\n                    disabled={disabled}\n                    onChange={handleOnChange}\n                    placeholder={placeholder}\n                    ref={ref}\n                    type={inputType}\n                />\n                {Boolean(suffix) && <BodyPrimary color={disabled ? 'disabled' : 'secondary'}>{suffix}</BodyPrimary>}\n                {showClear && (\n                    <IconButton\n                        aria-label={clearAriaLabel}\n                        className={cn(\n                            'self-center justify-self-end !rounded-button peer-placeholder-shown:hidden',\n                            small ? 'mr-[-8px]' : 'mr-[-4px]'\n                        )}\n                        disabled={disabled}\n                        hideTooltip\n                        icon={Close}\n                        onClick={onClear}\n                        role=\"button\"\n                        shape=\"square\"\n                        size=\"sm\"\n                        type=\"button\"\n                    />\n                )}\n                {showPasswordToggle &&\n                    (inputType === 'password' ? (\n                        <EyeSlash\n                            color={disabled ? 'disabled' : 'primary'}\n                            // hoverColor={disabled ? undefined : 'hover'}\n                            onClick={togglePassword}\n                            role=\"button\"\n                            size=\"sm\"\n                        />\n                    ) : (\n                        <Eye\n                            color={disabled ? 'disabled' : 'primary'}\n                            // hoverColor={disabled ? undefined : 'hover'}\n                            onClick={togglePassword}\n                            role=\"button\"\n                            size=\"sm\"\n                        />\n                    ))}\n            </div>\n        </FormLabel>\n    );\n});\n\nTextInput.displayName = 'TextInput';\n"],"mappings":";;;;;;;;AAiCA,MAAa,YAAY,YAAqC,iBAAiB,QAAQ;CACnF,MAAM,CACF,gBACA,EAEI,iBAAiB,GACjB,iBAAiB,cACjB,UACA,WAAW,UACX,UACA,SACA,yBAAyB,uBACzB,cAAc,KACd,QACA,eAAe,mBACf,OACA,QACA,MACA,GAAG,WAEP,sBAAsB,eAAe;CAEzC,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,MAAM,OAAO,UAAU,CAAC;CAE7E,gBAAgB;EACZ,IAAI,MAAM,UAAU,KAAA,GAChB,kBAAkB,OAAO,MAAM,KAAK,CAAC,CAAC,MAAM;CAEpD,GAAG,CAAC,MAAM,KAAK,CAAC;CAEhB,MAAM,iBAAiB,aAClB,MAAqC;EAClC,kBAAkB,OAAQ,EAAE,OAA4B,KAAK,CAAC,CAAC,MAAM;EACrE,WAAW,CAAC;CAChB,GACA,CAAC,QAAQ,CACb;CAEA,MAAM,qBAAqB,iBAAiB,iBAAiB,iBAAiB;CAC9E,MAAM,WAAW,QAAQ,eAAe,QAAQ,KAAK;CAErD,MAAM,gBAAgB,qBAAqB,QAAQ,OAAO;CAE1D,MAAM,CAAC,WAAW,gBAAgB,SAAS,QAAQ,MAAM;CAEzD,MAAM,uBAA6B;EAC/B,IAAI,CAAC,UACD,aAAa,cAAc,aAAa,SAAS,UAAU;CAEnE;CAEA,MAAM,YAAY,iBAAiB,QAAQ,OAAO;CAClD,MAAM,qBAAqB,SAAS;CAEpC,OACI,oBAAC,WAAD;EACI,GAAI;EACM;EACV,WAAW,qBAAqB,yBAAyB,eAAe;EAC9D;EACV,cAAc,QAAQ,eAAe,MAAM,KAAK,iBAAiB;EACjE,UACI,eAAe,SAAS,KAAA,IACpB,qBAAC,WAAD;GACI,WAAU;GACV,OAAO,eAAe,WAAW,aAAa,qBAAqB,aAAa;aAFpF;IAIK;IAAe;IAAE;GACX;;YAInB,qBAAC,OAAD;GACI,WAAW,GACP,8LACA;IACI,qEAAqE;IACrE,0BAA0B;IAC1B,YAAY;IACZ,YAAY,CAAC;GACjB,CACJ;aATJ;IAWK,QAAQ,MAAM,KAAK,oBAAC,aAAD;KAAa,OAAO,WAAW,aAAa;eAAc;IAAoB,CAAA;IAClG,oBAAC,SAAD;KACI,WAAW,GACP,+MACA,EACI,qDAAqD,aAAa,OACtE,CACJ;KACA,GAAI;KACM;KACV,UAAU;KACG;KACR;KACL,MAAM;IACT,CAAA;IACA,QAAQ,MAAM,KAAK,oBAAC,aAAD;KAAa,OAAO,WAAW,aAAa;eAAc;IAAoB,CAAA;IACjG,aACG,oBAAC,YAAD;KACI,cAAY;KACZ,WAAW,GACP,8EACA,QAAQ,cAAc,WAC1B;KACU;KACV,aAAA;KACA,MAAM;KACN,SAAS;KACT,MAAK;KACL,OAAM;KACN,MAAK;KACL,MAAK;IACR,CAAA;IAEJ,uBACI,cAAc,aACX,oBAAC,UAAD;KACI,OAAO,WAAW,aAAa;KAE/B,SAAS;KACT,MAAK;KACL,MAAK;IACR,CAAA,IAED,oBAAC,KAAD;KACI,OAAO,WAAW,aAAa;KAE/B,SAAS;KACT,MAAK;KACL,MAAK;IACR,CAAA;GAER;;CACE,CAAA;AAEnB,CAAC;AAED,UAAU,cAAc"}

package/ItemBadge-D1S8YsIy.d.cts

@@ -0,0 +1,46 @@
+//#region src/Badge/ItemBadge.d.ts
+type Props = {
+  /** Optional className for custom styling and positioning */className?: string; /** Whether the item bidding has been extended */
+  isExtended?: boolean; /** Whether the item is featured */
+  isFeatured?: boolean; /** Whether the item is currently live */
+  isLive?: boolean; /** Whether the item has been sold */
+  isSold?: boolean; /** Number of viewers currently watching (only shown when isLive and > 0) */
+  viewers?: number;
+};
+/**
+ * ItemBadge displays the status of a listing item.
+ *
+ * This component shows a badge with item status (FEATURED/LIVE/EXTENDED/SOLD), optional viewer count
+ * for live items, and appropriate styling based on the status.
+ *
+ * Priority order: isSold > isExtended > isLive > isFeatured
+ *
+ * @example
+ * ```tsx
+ * // Featured item
+ * <ItemBadge isFeatured={true} />
+ *
+ * // Live item with viewers
+ * <ItemBadge isLive={true} viewers={126} />
+ *
+ * // Extended item
+ * <ItemBadge isExtended={true} />
+ *
+ * // Sold item
+ * <ItemBadge isSold={true} />
+ * ```
+ */
+declare const ItemBadge: {
+  ({
+    className,
+    isExtended,
+    isFeatured,
+    isLive,
+    isSold,
+    viewers
+  }: Props): import("react/jsx-runtime").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { ItemBadge as t };
+//# sourceMappingURL=ItemBadge-D1S8YsIy.d.cts.map

package/ItemBadge-D1S8YsIy.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemBadge-D1S8YsIy.d.cts","names":[],"sources":["../src/Badge/ItemBadge.tsx"],"mappings":";KAKK,KAAA;EAAA,4DAED,SAAA;EAEA,UAAA,YAFA;EAIA,UAAA;EAEA,MAAA,YAEA;EAAA,MAAA,YAEO;EAAP,OAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;cA0BS,SAAA;EAAA;;;;;;;KAA6E,KAAA,+BAAK,GAAA,CAAA,OAAA"}

package/ItemBadge-D1S8YsIy.d.mts

@@ -0,0 +1,46 @@
+//#region src/Badge/ItemBadge.d.ts
+type Props = {
+  /** Optional className for custom styling and positioning */className?: string; /** Whether the item bidding has been extended */
+  isExtended?: boolean; /** Whether the item is featured */
+  isFeatured?: boolean; /** Whether the item is currently live */
+  isLive?: boolean; /** Whether the item has been sold */
+  isSold?: boolean; /** Number of viewers currently watching (only shown when isLive and > 0) */
+  viewers?: number;
+};
+/**
+ * ItemBadge displays the status of a listing item.
+ *
+ * This component shows a badge with item status (FEATURED/LIVE/EXTENDED/SOLD), optional viewer count
+ * for live items, and appropriate styling based on the status.
+ *
+ * Priority order: isSold > isExtended > isLive > isFeatured
+ *
+ * @example
+ * ```tsx
+ * // Featured item
+ * <ItemBadge isFeatured={true} />
+ *
+ * // Live item with viewers
+ * <ItemBadge isLive={true} viewers={126} />
+ *
+ * // Extended item
+ * <ItemBadge isExtended={true} />
+ *
+ * // Sold item
+ * <ItemBadge isSold={true} />
+ * ```
+ */
+declare const ItemBadge: {
+  ({
+    className,
+    isExtended,
+    isFeatured,
+    isLive,
+    isSold,
+    viewers
+  }: Props): import("react/jsx-runtime").JSX.Element | null;
+  displayName: string;
+};
+//#endregion
+export { ItemBadge as t };
+//# sourceMappingURL=ItemBadge-D1S8YsIy.d.mts.map

package/ItemBadge-D1S8YsIy.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemBadge-D1S8YsIy.d.mts","names":[],"sources":["../src/Badge/ItemBadge.tsx"],"mappings":";KAKK,KAAA;EAAA,4DAED,SAAA;EAEA,UAAA,YAFA;EAIA,UAAA;EAEA,MAAA,YAEA;EAAA,MAAA,YAEO;EAAP,OAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;cA0BS,SAAA;EAAA;;;;;;;KAA6E,KAAA,+BAAK,GAAA,CAAA,OAAA"}