its-just-ui
Version:
ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.
25,757 lines • 845 kB
JavaScript
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import React, { createContext, useState, useMemo, useCallback, useContext, forwardRef, useRef, useEffect, memo, useId } from "react";
import { createPortal } from "react-dom";
function r(e) {
var t, f, n = "";
if ("string" == typeof e || "number" == typeof e) n += e;
else if ("object" == typeof e) if (Array.isArray(e)) {
var o = e.length;
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
} else for (f in e) e[f] && (n && (n += " "), n += f);
return n;
}
function clsx() {
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
return n;
}
const CLASS_PART_SEPARATOR = "-";
const createClassGroupUtils = (config) => {
const classMap = createClassMap(config);
const {
conflictingClassGroups,
conflictingClassGroupModifiers
} = config;
const getClassGroupId = (className) => {
const classParts = className.split(CLASS_PART_SEPARATOR);
if (classParts[0] === "" && classParts.length !== 1) {
classParts.shift();
}
return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
};
const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
const conflicts = conflictingClassGroups[classGroupId] || [];
if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
}
return conflicts;
};
return {
getClassGroupId,
getConflictingClassGroupIds
};
};
const getGroupRecursive = (classParts, classPartObject) => {
var _a;
if (classParts.length === 0) {
return classPartObject.classGroupId;
}
const currentClassPart = classParts[0];
const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
if (classGroupFromNextClassPart) {
return classGroupFromNextClassPart;
}
if (classPartObject.validators.length === 0) {
return void 0;
}
const classRest = classParts.join(CLASS_PART_SEPARATOR);
return (_a = classPartObject.validators.find(({
validator
}) => validator(classRest))) == null ? void 0 : _a.classGroupId;
};
const arbitraryPropertyRegex = /^\[(.+)\]$/;
const getGroupIdForArbitraryProperty = (className) => {
if (arbitraryPropertyRegex.test(className)) {
const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
const property = arbitraryPropertyClassName == null ? void 0 : arbitraryPropertyClassName.substring(0, arbitraryPropertyClassName.indexOf(":"));
if (property) {
return "arbitrary.." + property;
}
}
};
const createClassMap = (config) => {
const {
theme,
prefix
} = config;
const classMap = {
nextPart: /* @__PURE__ */ new Map(),
validators: []
};
const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
processClassesRecursively(classGroup, classMap, classGroupId, theme);
});
return classMap;
};
const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
classGroup.forEach((classDefinition) => {
if (typeof classDefinition === "string") {
const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
classPartObjectToEdit.classGroupId = classGroupId;
return;
}
if (typeof classDefinition === "function") {
if (isThemeGetter(classDefinition)) {
processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
return;
}
classPartObject.validators.push({
validator: classDefinition,
classGroupId
});
return;
}
Object.entries(classDefinition).forEach(([key, classGroup2]) => {
processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
});
});
};
const getPart = (classPartObject, path) => {
let currentClassPartObject = classPartObject;
path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
if (!currentClassPartObject.nextPart.has(pathPart)) {
currentClassPartObject.nextPart.set(pathPart, {
nextPart: /* @__PURE__ */ new Map(),
validators: []
});
}
currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
});
return currentClassPartObject;
};
const isThemeGetter = (func) => func.isThemeGetter;
const getPrefixedClassGroupEntries = (classGroupEntries, prefix) => {
if (!prefix) {
return classGroupEntries;
}
return classGroupEntries.map(([classGroupId, classGroup]) => {
const prefixedClassGroup = classGroup.map((classDefinition) => {
if (typeof classDefinition === "string") {
return prefix + classDefinition;
}
if (typeof classDefinition === "object") {
return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
}
return classDefinition;
});
return [classGroupId, prefixedClassGroup];
});
};
const createLruCache = (maxCacheSize) => {
if (maxCacheSize < 1) {
return {
get: () => void 0,
set: () => {
}
};
}
let cacheSize = 0;
let cache = /* @__PURE__ */ new Map();
let previousCache = /* @__PURE__ */ new Map();
const update = (key, value) => {
cache.set(key, value);
cacheSize++;
if (cacheSize > maxCacheSize) {
cacheSize = 0;
previousCache = cache;
cache = /* @__PURE__ */ new Map();
}
};
return {
get(key) {
let value = cache.get(key);
if (value !== void 0) {
return value;
}
if ((value = previousCache.get(key)) !== void 0) {
update(key, value);
return value;
}
},
set(key, value) {
if (cache.has(key)) {
cache.set(key, value);
} else {
update(key, value);
}
}
};
};
const IMPORTANT_MODIFIER = "!";
const createParseClassName = (config) => {
const {
separator,
experimentalParseClassName
} = config;
const isSeparatorSingleCharacter = separator.length === 1;
const firstSeparatorCharacter = separator[0];
const separatorLength = separator.length;
const parseClassName = (className) => {
const modifiers = [];
let bracketDepth = 0;
let modifierStart = 0;
let postfixModifierPosition;
for (let index = 0; index < className.length; index++) {
let currentCharacter = className[index];
if (bracketDepth === 0) {
if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) {
modifiers.push(className.slice(modifierStart, index));
modifierStart = index + separatorLength;
continue;
}
if (currentCharacter === "/") {
postfixModifierPosition = index;
continue;
}
}
if (currentCharacter === "[") {
bracketDepth++;
} else if (currentCharacter === "]") {
bracketDepth--;
}
}
const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
const hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER);
const baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier;
const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : void 0;
return {
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition
};
};
if (experimentalParseClassName) {
return (className) => experimentalParseClassName({
className,
parseClassName
});
}
return parseClassName;
};
const sortModifiers = (modifiers) => {
if (modifiers.length <= 1) {
return modifiers;
}
const sortedModifiers = [];
let unsortedModifiers = [];
modifiers.forEach((modifier) => {
const isArbitraryVariant = modifier[0] === "[";
if (isArbitraryVariant) {
sortedModifiers.push(...unsortedModifiers.sort(), modifier);
unsortedModifiers = [];
} else {
unsortedModifiers.push(modifier);
}
});
sortedModifiers.push(...unsortedModifiers.sort());
return sortedModifiers;
};
const createConfigUtils = (config) => ({
cache: createLruCache(config.cacheSize),
parseClassName: createParseClassName(config),
...createClassGroupUtils(config)
});
const SPLIT_CLASSES_REGEX = /\s+/;
const mergeClassList = (classList, configUtils) => {
const {
parseClassName,
getClassGroupId,
getConflictingClassGroupIds
} = configUtils;
const classGroupsInConflict = [];
const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
let result = "";
for (let index = classNames.length - 1; index >= 0; index -= 1) {
const originalClassName = classNames[index];
const {
modifiers,
hasImportantModifier,
baseClassName,
maybePostfixModifierPosition
} = parseClassName(originalClassName);
let hasPostfixModifier = Boolean(maybePostfixModifierPosition);
let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
if (!classGroupId) {
if (!hasPostfixModifier) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
classGroupId = getClassGroupId(baseClassName);
if (!classGroupId) {
result = originalClassName + (result.length > 0 ? " " + result : result);
continue;
}
hasPostfixModifier = false;
}
const variantModifier = sortModifiers(modifiers).join(":");
const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
const classId = modifierId + classGroupId;
if (classGroupsInConflict.includes(classId)) {
continue;
}
classGroupsInConflict.push(classId);
const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
for (let i = 0; i < conflictGroups.length; ++i) {
const group = conflictGroups[i];
classGroupsInConflict.push(modifierId + group);
}
result = originalClassName + (result.length > 0 ? " " + result : result);
}
return result;
};
function twJoin() {
let index = 0;
let argument;
let resolvedValue;
let string = "";
while (index < arguments.length) {
if (argument = arguments[index++]) {
if (resolvedValue = toValue(argument)) {
string && (string += " ");
string += resolvedValue;
}
}
}
return string;
}
const toValue = (mix) => {
if (typeof mix === "string") {
return mix;
}
let resolvedValue;
let string = "";
for (let k = 0; k < mix.length; k++) {
if (mix[k]) {
if (resolvedValue = toValue(mix[k])) {
string && (string += " ");
string += resolvedValue;
}
}
}
return string;
};
function createTailwindMerge(createConfigFirst, ...createConfigRest) {
let configUtils;
let cacheGet;
let cacheSet;
let functionToCall = initTailwindMerge;
function initTailwindMerge(classList) {
const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
configUtils = createConfigUtils(config);
cacheGet = configUtils.cache.get;
cacheSet = configUtils.cache.set;
functionToCall = tailwindMerge;
return tailwindMerge(classList);
}
function tailwindMerge(classList) {
const cachedResult = cacheGet(classList);
if (cachedResult) {
return cachedResult;
}
const result = mergeClassList(classList, configUtils);
cacheSet(classList, result);
return result;
}
return function callTailwindMerge() {
return functionToCall(twJoin.apply(null, arguments));
};
}
const fromTheme = (key) => {
const themeGetter = (theme) => theme[key] || [];
themeGetter.isThemeGetter = true;
return themeGetter;
};
const arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
const fractionRegex = /^\d+\/\d+$/;
const stringLengths = /* @__PURE__ */ new Set(["px", "full", "screen"]);
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
const isLength = (value) => isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
const isArbitraryLength = (value) => getIsArbitraryValue(value, "length", isLengthOnly);
const isNumber = (value) => Boolean(value) && !Number.isNaN(Number(value));
const isArbitraryNumber = (value) => getIsArbitraryValue(value, "number", isNumber);
const isInteger = (value) => Boolean(value) && Number.isInteger(Number(value));
const isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
const isArbitraryValue = (value) => arbitraryValueRegex.test(value);
const isTshirtSize = (value) => tshirtUnitRegex.test(value);
const sizeLabels = /* @__PURE__ */ new Set(["length", "size", "percentage"]);
const isArbitrarySize = (value) => getIsArbitraryValue(value, sizeLabels, isNever);
const isArbitraryPosition = (value) => getIsArbitraryValue(value, "position", isNever);
const imageLabels = /* @__PURE__ */ new Set(["image", "url"]);
const isArbitraryImage = (value) => getIsArbitraryValue(value, imageLabels, isImage);
const isArbitraryShadow = (value) => getIsArbitraryValue(value, "", isShadow);
const isAny = () => true;
const getIsArbitraryValue = (value, label, testValue) => {
const result = arbitraryValueRegex.exec(value);
if (result) {
if (result[1]) {
return typeof label === "string" ? result[1] === label : label.has(result[1]);
}
return testValue(result[2]);
}
return false;
};
const isLengthOnly = (value) => (
// `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
// For example, `hsl(0 0% 0%)` would be classified as a length without this check.
// I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
);
const isNever = () => false;
const isShadow = (value) => shadowRegex.test(value);
const isImage = (value) => imageRegex.test(value);
const getDefaultConfig = () => {
const colors = fromTheme("colors");
const spacing = fromTheme("spacing");
const blur = fromTheme("blur");
const brightness = fromTheme("brightness");
const borderColor = fromTheme("borderColor");
const borderRadius = fromTheme("borderRadius");
const borderSpacing = fromTheme("borderSpacing");
const borderWidth = fromTheme("borderWidth");
const contrast = fromTheme("contrast");
const grayscale = fromTheme("grayscale");
const hueRotate = fromTheme("hueRotate");
const invert = fromTheme("invert");
const gap = fromTheme("gap");
const gradientColorStops = fromTheme("gradientColorStops");
const gradientColorStopPositions = fromTheme("gradientColorStopPositions");
const inset = fromTheme("inset");
const margin = fromTheme("margin");
const opacity = fromTheme("opacity");
const padding = fromTheme("padding");
const saturate = fromTheme("saturate");
const scale = fromTheme("scale");
const sepia = fromTheme("sepia");
const skew = fromTheme("skew");
const space = fromTheme("space");
const translate = fromTheme("translate");
const getOverscroll = () => ["auto", "contain", "none"];
const getOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
const getSpacingWithAutoAndArbitrary = () => ["auto", isArbitraryValue, spacing];
const getSpacingWithArbitrary = () => [isArbitraryValue, spacing];
const getLengthWithEmptyAndArbitrary = () => ["", isLength, isArbitraryLength];
const getNumberWithAutoAndArbitrary = () => ["auto", isNumber, isArbitraryValue];
const getPositions = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"];
const getLineStyles = () => ["solid", "dashed", "dotted", "double", "none"];
const getBlendModes = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
const getAlign = () => ["start", "end", "center", "between", "around", "evenly", "stretch"];
const getZeroAndEmpty = () => ["", "0", isArbitraryValue];
const getBreaks = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
const getNumberAndArbitrary = () => [isNumber, isArbitraryValue];
return {
cacheSize: 500,
separator: ":",
theme: {
colors: [isAny],
spacing: [isLength, isArbitraryLength],
blur: ["none", "", isTshirtSize, isArbitraryValue],
brightness: getNumberAndArbitrary(),
borderColor: [colors],
borderRadius: ["none", "", "full", isTshirtSize, isArbitraryValue],
borderSpacing: getSpacingWithArbitrary(),
borderWidth: getLengthWithEmptyAndArbitrary(),
contrast: getNumberAndArbitrary(),
grayscale: getZeroAndEmpty(),
hueRotate: getNumberAndArbitrary(),
invert: getZeroAndEmpty(),
gap: getSpacingWithArbitrary(),
gradientColorStops: [colors],
gradientColorStopPositions: [isPercent, isArbitraryLength],
inset: getSpacingWithAutoAndArbitrary(),
margin: getSpacingWithAutoAndArbitrary(),
opacity: getNumberAndArbitrary(),
padding: getSpacingWithArbitrary(),
saturate: getNumberAndArbitrary(),
scale: getNumberAndArbitrary(),
sepia: getZeroAndEmpty(),
skew: getNumberAndArbitrary(),
space: getSpacingWithArbitrary(),
translate: getSpacingWithArbitrary()
},
classGroups: {
// Layout
/**
* Aspect Ratio
* @see https://tailwindcss.com/docs/aspect-ratio
*/
aspect: [{
aspect: ["auto", "square", "video", isArbitraryValue]
}],
/**
* Container
* @see https://tailwindcss.com/docs/container
*/
container: ["container"],
/**
* Columns
* @see https://tailwindcss.com/docs/columns
*/
columns: [{
columns: [isTshirtSize]
}],
/**
* Break After
* @see https://tailwindcss.com/docs/break-after
*/
"break-after": [{
"break-after": getBreaks()
}],
/**
* Break Before
* @see https://tailwindcss.com/docs/break-before
*/
"break-before": [{
"break-before": getBreaks()
}],
/**
* Break Inside
* @see https://tailwindcss.com/docs/break-inside
*/
"break-inside": [{
"break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
}],
/**
* Box Decoration Break
* @see https://tailwindcss.com/docs/box-decoration-break
*/
"box-decoration": [{
"box-decoration": ["slice", "clone"]
}],
/**
* Box Sizing
* @see https://tailwindcss.com/docs/box-sizing
*/
box: [{
box: ["border", "content"]
}],
/**
* Display
* @see https://tailwindcss.com/docs/display
*/
display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
/**
* Floats
* @see https://tailwindcss.com/docs/float
*/
float: [{
float: ["right", "left", "none", "start", "end"]
}],
/**
* Clear
* @see https://tailwindcss.com/docs/clear
*/
clear: [{
clear: ["left", "right", "both", "none", "start", "end"]
}],
/**
* Isolation
* @see https://tailwindcss.com/docs/isolation
*/
isolation: ["isolate", "isolation-auto"],
/**
* Object Fit
* @see https://tailwindcss.com/docs/object-fit
*/
"object-fit": [{
object: ["contain", "cover", "fill", "none", "scale-down"]
}],
/**
* Object Position
* @see https://tailwindcss.com/docs/object-position
*/
"object-position": [{
object: [...getPositions(), isArbitraryValue]
}],
/**
* Overflow
* @see https://tailwindcss.com/docs/overflow
*/
overflow: [{
overflow: getOverflow()
}],
/**
* Overflow X
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-x": [{
"overflow-x": getOverflow()
}],
/**
* Overflow Y
* @see https://tailwindcss.com/docs/overflow
*/
"overflow-y": [{
"overflow-y": getOverflow()
}],
/**
* Overscroll Behavior
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
overscroll: [{
overscroll: getOverscroll()
}],
/**
* Overscroll Behavior X
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-x": [{
"overscroll-x": getOverscroll()
}],
/**
* Overscroll Behavior Y
* @see https://tailwindcss.com/docs/overscroll-behavior
*/
"overscroll-y": [{
"overscroll-y": getOverscroll()
}],
/**
* Position
* @see https://tailwindcss.com/docs/position
*/
position: ["static", "fixed", "absolute", "relative", "sticky"],
/**
* Top / Right / Bottom / Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
inset: [{
inset: [inset]
}],
/**
* Right / Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-x": [{
"inset-x": [inset]
}],
/**
* Top / Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
"inset-y": [{
"inset-y": [inset]
}],
/**
* Start
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
start: [{
start: [inset]
}],
/**
* End
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
end: [{
end: [inset]
}],
/**
* Top
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
top: [{
top: [inset]
}],
/**
* Right
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
right: [{
right: [inset]
}],
/**
* Bottom
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
bottom: [{
bottom: [inset]
}],
/**
* Left
* @see https://tailwindcss.com/docs/top-right-bottom-left
*/
left: [{
left: [inset]
}],
/**
* Visibility
* @see https://tailwindcss.com/docs/visibility
*/
visibility: ["visible", "invisible", "collapse"],
/**
* Z-Index
* @see https://tailwindcss.com/docs/z-index
*/
z: [{
z: ["auto", isInteger, isArbitraryValue]
}],
// Flexbox and Grid
/**
* Flex Basis
* @see https://tailwindcss.com/docs/flex-basis
*/
basis: [{
basis: getSpacingWithAutoAndArbitrary()
}],
/**
* Flex Direction
* @see https://tailwindcss.com/docs/flex-direction
*/
"flex-direction": [{
flex: ["row", "row-reverse", "col", "col-reverse"]
}],
/**
* Flex Wrap
* @see https://tailwindcss.com/docs/flex-wrap
*/
"flex-wrap": [{
flex: ["wrap", "wrap-reverse", "nowrap"]
}],
/**
* Flex
* @see https://tailwindcss.com/docs/flex
*/
flex: [{
flex: ["1", "auto", "initial", "none", isArbitraryValue]
}],
/**
* Flex Grow
* @see https://tailwindcss.com/docs/flex-grow
*/
grow: [{
grow: getZeroAndEmpty()
}],
/**
* Flex Shrink
* @see https://tailwindcss.com/docs/flex-shrink
*/
shrink: [{
shrink: getZeroAndEmpty()
}],
/**
* Order
* @see https://tailwindcss.com/docs/order
*/
order: [{
order: ["first", "last", "none", isInteger, isArbitraryValue]
}],
/**
* Grid Template Columns
* @see https://tailwindcss.com/docs/grid-template-columns
*/
"grid-cols": [{
"grid-cols": [isAny]
}],
/**
* Grid Column Start / End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start-end": [{
col: ["auto", {
span: ["full", isInteger, isArbitraryValue]
}, isArbitraryValue]
}],
/**
* Grid Column Start
* @see https://tailwindcss.com/docs/grid-column
*/
"col-start": [{
"col-start": getNumberWithAutoAndArbitrary()
}],
/**
* Grid Column End
* @see https://tailwindcss.com/docs/grid-column
*/
"col-end": [{
"col-end": getNumberWithAutoAndArbitrary()
}],
/**
* Grid Template Rows
* @see https://tailwindcss.com/docs/grid-template-rows
*/
"grid-rows": [{
"grid-rows": [isAny]
}],
/**
* Grid Row Start / End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start-end": [{
row: ["auto", {
span: [isInteger, isArbitraryValue]
}, isArbitraryValue]
}],
/**
* Grid Row Start
* @see https://tailwindcss.com/docs/grid-row
*/
"row-start": [{
"row-start": getNumberWithAutoAndArbitrary()
}],
/**
* Grid Row End
* @see https://tailwindcss.com/docs/grid-row
*/
"row-end": [{
"row-end": getNumberWithAutoAndArbitrary()
}],
/**
* Grid Auto Flow
* @see https://tailwindcss.com/docs/grid-auto-flow
*/
"grid-flow": [{
"grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
}],
/**
* Grid Auto Columns
* @see https://tailwindcss.com/docs/grid-auto-columns
*/
"auto-cols": [{
"auto-cols": ["auto", "min", "max", "fr", isArbitraryValue]
}],
/**
* Grid Auto Rows
* @see https://tailwindcss.com/docs/grid-auto-rows
*/
"auto-rows": [{
"auto-rows": ["auto", "min", "max", "fr", isArbitraryValue]
}],
/**
* Gap
* @see https://tailwindcss.com/docs/gap
*/
gap: [{
gap: [gap]
}],
/**
* Gap X
* @see https://tailwindcss.com/docs/gap
*/
"gap-x": [{
"gap-x": [gap]
}],
/**
* Gap Y
* @see https://tailwindcss.com/docs/gap
*/
"gap-y": [{
"gap-y": [gap]
}],
/**
* Justify Content
* @see https://tailwindcss.com/docs/justify-content
*/
"justify-content": [{
justify: ["normal", ...getAlign()]
}],
/**
* Justify Items
* @see https://tailwindcss.com/docs/justify-items
*/
"justify-items": [{
"justify-items": ["start", "end", "center", "stretch"]
}],
/**
* Justify Self
* @see https://tailwindcss.com/docs/justify-self
*/
"justify-self": [{
"justify-self": ["auto", "start", "end", "center", "stretch"]
}],
/**
* Align Content
* @see https://tailwindcss.com/docs/align-content
*/
"align-content": [{
content: ["normal", ...getAlign(), "baseline"]
}],
/**
* Align Items
* @see https://tailwindcss.com/docs/align-items
*/
"align-items": [{
items: ["start", "end", "center", "baseline", "stretch"]
}],
/**
* Align Self
* @see https://tailwindcss.com/docs/align-self
*/
"align-self": [{
self: ["auto", "start", "end", "center", "stretch", "baseline"]
}],
/**
* Place Content
* @see https://tailwindcss.com/docs/place-content
*/
"place-content": [{
"place-content": [...getAlign(), "baseline"]
}],
/**
* Place Items
* @see https://tailwindcss.com/docs/place-items
*/
"place-items": [{
"place-items": ["start", "end", "center", "baseline", "stretch"]
}],
/**
* Place Self
* @see https://tailwindcss.com/docs/place-self
*/
"place-self": [{
"place-self": ["auto", "start", "end", "center", "stretch"]
}],
// Spacing
/**
* Padding
* @see https://tailwindcss.com/docs/padding
*/
p: [{
p: [padding]
}],
/**
* Padding X
* @see https://tailwindcss.com/docs/padding
*/
px: [{
px: [padding]
}],
/**
* Padding Y
* @see https://tailwindcss.com/docs/padding
*/
py: [{
py: [padding]
}],
/**
* Padding Start
* @see https://tailwindcss.com/docs/padding
*/
ps: [{
ps: [padding]
}],
/**
* Padding End
* @see https://tailwindcss.com/docs/padding
*/
pe: [{
pe: [padding]
}],
/**
* Padding Top
* @see https://tailwindcss.com/docs/padding
*/
pt: [{
pt: [padding]
}],
/**
* Padding Right
* @see https://tailwindcss.com/docs/padding
*/
pr: [{
pr: [padding]
}],
/**
* Padding Bottom
* @see https://tailwindcss.com/docs/padding
*/
pb: [{
pb: [padding]
}],
/**
* Padding Left
* @see https://tailwindcss.com/docs/padding
*/
pl: [{
pl: [padding]
}],
/**
* Margin
* @see https://tailwindcss.com/docs/margin
*/
m: [{
m: [margin]
}],
/**
* Margin X
* @see https://tailwindcss.com/docs/margin
*/
mx: [{
mx: [margin]
}],
/**
* Margin Y
* @see https://tailwindcss.com/docs/margin
*/
my: [{
my: [margin]
}],
/**
* Margin Start
* @see https://tailwindcss.com/docs/margin
*/
ms: [{
ms: [margin]
}],
/**
* Margin End
* @see https://tailwindcss.com/docs/margin
*/
me: [{
me: [margin]
}],
/**
* Margin Top
* @see https://tailwindcss.com/docs/margin
*/
mt: [{
mt: [margin]
}],
/**
* Margin Right
* @see https://tailwindcss.com/docs/margin
*/
mr: [{
mr: [margin]
}],
/**
* Margin Bottom
* @see https://tailwindcss.com/docs/margin
*/
mb: [{
mb: [margin]
}],
/**
* Margin Left
* @see https://tailwindcss.com/docs/margin
*/
ml: [{
ml: [margin]
}],
/**
* Space Between X
* @see https://tailwindcss.com/docs/space
*/
"space-x": [{
"space-x": [space]
}],
/**
* Space Between X Reverse
* @see https://tailwindcss.com/docs/space
*/
"space-x-reverse": ["space-x-reverse"],
/**
* Space Between Y
* @see https://tailwindcss.com/docs/space
*/
"space-y": [{
"space-y": [space]
}],
/**
* Space Between Y Reverse
* @see https://tailwindcss.com/docs/space
*/
"space-y-reverse": ["space-y-reverse"],
// Sizing
/**
* Width
* @see https://tailwindcss.com/docs/width
*/
w: [{
w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", isArbitraryValue, spacing]
}],
/**
* Min-Width
* @see https://tailwindcss.com/docs/min-width
*/
"min-w": [{
"min-w": [isArbitraryValue, spacing, "min", "max", "fit"]
}],
/**
* Max-Width
* @see https://tailwindcss.com/docs/max-width
*/
"max-w": [{
"max-w": [isArbitraryValue, spacing, "none", "full", "min", "max", "fit", "prose", {
screen: [isTshirtSize]
}, isTshirtSize]
}],
/**
* Height
* @see https://tailwindcss.com/docs/height
*/
h: [{
h: [isArbitraryValue, spacing, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
}],
/**
* Min-Height
* @see https://tailwindcss.com/docs/min-height
*/
"min-h": [{
"min-h": [isArbitraryValue, spacing, "min", "max", "fit", "svh", "lvh", "dvh"]
}],
/**
* Max-Height
* @see https://tailwindcss.com/docs/max-height
*/
"max-h": [{
"max-h": [isArbitraryValue, spacing, "min", "max", "fit", "svh", "lvh", "dvh"]
}],
/**
* Size
* @see https://tailwindcss.com/docs/size
*/
size: [{
size: [isArbitraryValue, spacing, "auto", "min", "max", "fit"]
}],
// Typography
/**
* Font Size
* @see https://tailwindcss.com/docs/font-size
*/
"font-size": [{
text: ["base", isTshirtSize, isArbitraryLength]
}],
/**
* Font Smoothing
* @see https://tailwindcss.com/docs/font-smoothing
*/
"font-smoothing": ["antialiased", "subpixel-antialiased"],
/**
* Font Style
* @see https://tailwindcss.com/docs/font-style
*/
"font-style": ["italic", "not-italic"],
/**
* Font Weight
* @see https://tailwindcss.com/docs/font-weight
*/
"font-weight": [{
font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", isArbitraryNumber]
}],
/**
* Font Family
* @see https://tailwindcss.com/docs/font-family
*/
"font-family": [{
font: [isAny]
}],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-normal": ["normal-nums"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-ordinal": ["ordinal"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-slashed-zero": ["slashed-zero"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-figure": ["lining-nums", "oldstyle-nums"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-spacing": ["proportional-nums", "tabular-nums"],
/**
* Font Variant Numeric
* @see https://tailwindcss.com/docs/font-variant-numeric
*/
"fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
/**
* Letter Spacing
* @see https://tailwindcss.com/docs/letter-spacing
*/
tracking: [{
tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", isArbitraryValue]
}],
/**
* Line Clamp
* @see https://tailwindcss.com/docs/line-clamp
*/
"line-clamp": [{
"line-clamp": ["none", isNumber, isArbitraryNumber]
}],
/**
* Line Height
* @see https://tailwindcss.com/docs/line-height
*/
leading: [{
leading: ["none", "tight", "snug", "normal", "relaxed", "loose", isLength, isArbitraryValue]
}],
/**
* List Style Image
* @see https://tailwindcss.com/docs/list-style-image
*/
"list-image": [{
"list-image": ["none", isArbitraryValue]
}],
/**
* List Style Type
* @see https://tailwindcss.com/docs/list-style-type
*/
"list-style-type": [{
list: ["none", "disc", "decimal", isArbitraryValue]
}],
/**
* List Style Position
* @see https://tailwindcss.com/docs/list-style-position
*/
"list-style-position": [{
list: ["inside", "outside"]
}],
/**
* Placeholder Color
* @deprecated since Tailwind CSS v3.0.0
* @see https://tailwindcss.com/docs/placeholder-color
*/
"placeholder-color": [{
placeholder: [colors]
}],
/**
* Placeholder Opacity
* @see https://tailwindcss.com/docs/placeholder-opacity
*/
"placeholder-opacity": [{
"placeholder-opacity": [opacity]
}],
/**
* Text Alignment
* @see https://tailwindcss.com/docs/text-align
*/
"text-alignment": [{
text: ["left", "center", "right", "justify", "start", "end"]
}],
/**
* Text Color
* @see https://tailwindcss.com/docs/text-color
*/
"text-color": [{
text: [colors]
}],
/**
* Text Opacity
* @see https://tailwindcss.com/docs/text-opacity
*/
"text-opacity": [{
"text-opacity": [opacity]
}],
/**
* Text Decoration
* @see https://tailwindcss.com/docs/text-decoration
*/
"text-decoration": ["underline", "overline", "line-through", "no-underline"],
/**
* Text Decoration Style
* @see https://tailwindcss.com/docs/text-decoration-style
*/
"text-decoration-style": [{
decoration: [...getLineStyles(), "wavy"]
}],
/**
* Text Decoration Thickness
* @see https://tailwindcss.com/docs/text-decoration-thickness
*/
"text-decoration-thickness": [{
decoration: ["auto", "from-font", isLength, isArbitraryLength]
}],
/**
* Text Underline Offset
* @see https://tailwindcss.com/docs/text-underline-offset
*/
"underline-offset": [{
"underline-offset": ["auto", isLength, isArbitraryValue]
}],
/**
* Text Decoration Color
* @see https://tailwindcss.com/docs/text-decoration-color
*/
"text-decoration-color": [{
decoration: [colors]
}],
/**
* Text Transform
* @see https://tailwindcss.com/docs/text-transform
*/
"text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
/**
* Text Overflow
* @see https://tailwindcss.com/docs/text-overflow
*/
"text-overflow": ["truncate", "text-ellipsis", "text-clip"],
/**
* Text Wrap
* @see https://tailwindcss.com/docs/text-wrap
*/
"text-wrap": [{
text: ["wrap", "nowrap", "balance", "pretty"]
}],
/**
* Text Indent
* @see https://tailwindcss.com/docs/text-indent
*/
indent: [{
indent: getSpacingWithArbitrary()
}],
/**
* Vertical Alignment
* @see https://tailwindcss.com/docs/vertical-align
*/
"vertical-align": [{
align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryValue]
}],
/**
* Whitespace
* @see https://tailwindcss.com/docs/whitespace
*/
whitespace: [{
whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
}],
/**
* Word Break
* @see https://tailwindcss.com/docs/word-break
*/
break: [{
break: ["normal", "words", "all", "keep"]
}],
/**
* Hyphens
* @see https://tailwindcss.com/docs/hyphens
*/
hyphens: [{
hyphens: ["none", "manual", "auto"]
}],
/**
* Content
* @see https://tailwindcss.com/docs/content
*/
content: [{
content: ["none", isArbitraryValue]
}],
// Backgrounds
/**
* Background Attachment
* @see https://tailwindcss.com/docs/background-attachment
*/
"bg-attachment": [{
bg: ["fixed", "local", "scroll"]
}],
/**
* Background Clip
* @see https://tailwindcss.com/docs/background-clip
*/
"bg-clip": [{
"bg-clip": ["border", "padding", "content", "text"]
}],
/**
* Background Opacity
* @deprecated since Tailwind CSS v3.0.0
* @see https://tailwindcss.com/docs/background-opacity
*/
"bg-opacity": [{
"bg-opacity": [opacity]
}],
/**
* Background Origin
* @see https://tailwindcss.com/docs/background-origin
*/
"bg-origin": [{
"bg-origin": ["border", "padding", "content"]
}],
/**
* Background Position
* @see https://tailwindcss.com/docs/background-position
*/
"bg-position": [{
bg: [...getPositions(), isArbitraryPosition]
}],
/**
* Background Repeat
* @see https://tailwindcss.com/docs/background-repeat
*/
"bg-repeat": [{
bg: ["no-repeat", {
repeat: ["", "x", "y", "round", "space"]
}]
}],
/**
* Background Size
* @see https://tailwindcss.com/docs/background-size
*/
"bg-size": [{
bg: ["auto", "cover", "contain", isArbitrarySize]
}],
/**
* Background Image
* @see https://tailwindcss.com/docs/background-image
*/
"bg-image": [{
bg: ["none", {
"gradient-to": ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
}, isArbitraryImage]
}],
/**
* Background Color
* @see https://tailwindcss.com/docs/background-color
*/
"bg-color": [{
bg: [colors]
}],
/**
* Gradient Color Stops From Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from-pos": [{
from: [gradientColorStopPositions]
}],
/**
* Gradient Color Stops Via Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via-pos": [{
via: [gradientColorStopPositions]
}],
/**
* Gradient Color Stops To Position
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to-pos": [{
to: [gradientColorStopPositions]
}],
/**
* Gradient Color Stops From
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-from": [{
from: [gradientColorStops]
}],
/**
* Gradient Color Stops Via
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-via": [{
via: [gradientColorStops]
}],
/**
* Gradient Color Stops To
* @see https://tailwindcss.com/docs/gradient-color-stops
*/
"gradient-to": [{
to: [gradientColorStops]
}],
// Borders
/**
* Border Radius
* @see https://tailwindcss.com/docs/border-radius
*/
rounded: [{
rounded: [borderRadius]
}],
/**
* Border Radius Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-s": [{
"rounded-s": [borderRadius]
}],
/**
* Border Radius End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-e": [{
"rounded-e": [borderRadius]
}],
/**
* Border Radius Top
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-t": [{
"rounded-t": [borderRadius]
}],
/**
* Border Radius Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-r": [{
"rounded-r": [borderRadius]
}],
/**
* Border Radius Bottom
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-b": [{
"rounded-b": [borderRadius]
}],
/**
* Border Radius Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-l": [{
"rounded-l": [borderRadius]
}],
/**
* Border Radius Start Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ss": [{
"rounded-ss": [borderRadius]
}],
/**
* Border Radius Start End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-se": [{
"rounded-se": [borderRadius]
}],
/**
* Border Radius End End
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-ee": [{
"rounded-ee": [borderRadius]
}],
/**
* Border Radius End Start
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-es": [{
"rounded-es": [borderRadius]
}],
/**
* Border Radius Top Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tl": [{
"rounded-tl": [borderRadius]
}],
/**
* Border Radius Top Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-tr": [{
"rounded-tr": [borderRadius]
}],
/**
* Border Radius Bottom Right
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-br": [{
"rounded-br": [borderRadius]
}],
/**
* Border Radius Bottom Left
* @see https://tailwindcss.com/docs/border-radius
*/
"rounded-bl": [{
"rounded-bl": [borderRadius]
}],
/**
* Border Width
* @see https://tailwindcss.com/docs/border-width
*/
"border-w": [{
border: [borderWidth]
}],
/**
* Border Width X
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-x": [{
"border-x": [borderWidth]
}],
/**
* Border Width Y
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-y": [{
"border-y": [borderWidth]
}],
/**
* Border Width Start
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-s": [{
"border-s": [borderWidth]
}],
/**
* Border Width End
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-e": [{
"border-e": [borderWidth]
}],
/**
* Border Width Top
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-t": [{
"border-t": [borderWidth]
}],
/**
* Border Width Right
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-r": [{
"border-r": [borderWidth]
}],
/**
* Border Width Bottom
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-b": [{
"border-b": [borderWidth]
}],
/**
* Border Width Left
* @see https://tailwindcss.com/docs/border-width
*/
"border-w-l": [{
"border-l": [borderWidth]
}],
/**
* Border Opacity
* @see https://tailwindcss.com/docs/border-opacity
*/
"border-opacity": [{
"border-opacity": [opacity]
}],
/**
* Border Style
* @see https://tailwindcss.com/docs/border-style
*/
"border-style": [{
border: [...getLineStyles(), "hidden"]
}],
/**
* Divide Width X
* @see https://tailwindcss.com/docs/divide-width
*/
"divide-x": [{
"divide-x": [borderWidth]
}],
/**
* Divide Width X Reverse
* @see https://tailwindcss.com/docs/divide-width
*/
"divide-x-reverse": ["divide-x-reverse"],
/**
* Divide Width Y
* @see https://tailwindcss.com/docs/divide-width
*/
"divide-y": [{
"divide-y": [borderWidth]
}],
/**
* Divide Width Y Reverse
* @see https://tailwindcss.com/docs/divide-width
*/
"divide-y-reverse": ["divide-y-reverse"],
/**
* Divide Opacity
* @see https://tailwindcss.com/docs/divide-opacity
*/
"divide-opacity": [{
"divide-opacity": [opacity]
}],
/**
* Divide Style
* @see https://tailwindcss.com/docs/divide-style
*/
"divide-style": [{
divide: getLineStyles()
}],
/**
* Border Color
* @see https://tailwindcss.com/docs/border-color
*/
"border-color": [{
border: [borderColor]
}],
/**
* Border Color X
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-x": [{
"border-x": [borderColor]
}],
/**
* Border Color Y
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-y": [{
"border-y": [borderColor]
}],
/**
* Border Color S
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-s": [{
"border-s": [borderColor]
}],
/**
* Border Color E
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-e": [{
"border-e": [borderColor]
}],
/**
* Border Color Top
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-t": [{
"border-t": [borderColor]
}],
/**
* Border Color Right
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-r": [{
"border-r": [borderColor]
}],
/**
* Border Color Bottom
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-b": [{
"border-b": [borderColor]
}],
/**
* Border Color Left
* @see https://tailwindcss.com/docs/border-color
*/
"border-color-l": [{
"border-l": [borderColor]
}],
/**
* Divide Color
* @see https://tailwindcss.com/docs/divide-color
*/
"divide-color": [{
divide: [borderColor]
}],
/**
* Outline Style
* @see https://tailwindcss.com/docs/outline-style
*/
"outline-style": [{
outline: ["", ...getLineStyles()]
}],
/**
* Outline Offset
* @see https://tailwindcss.com/docs/outline-offset
*/
"outline-offset": [{
"outline-offset": [isLength, isArbitraryValue]
}],
/**
* Outline Width
* @see https://tailwindcss.com/docs/outline-width
*/
"outline-w": [{
outline: [isLength, isArbitraryLength]
}],
/**
* Outline Color
* @see https://tailwindcss.com/docs/outline-color
*/
"outline-color": [{
outline: [colors]
}],
/**
* Ring Width
* @see https://tailwindcss.com/docs/ring-width
*/
"ring-w": [{
ring: getLengthWithEmptyAndArbitrary()
}],
/**
* Ring Width Inset
* @see https://tailwindcss.com/docs/ring-width
*/
"ring-w-inset": ["ring-inset"],
/**
* Ring Color
* @see https://tailwindcss.com/docs/ring-color
*/
"ring-color": [{
ring: [colors]
}],
/**
* Ring Opacity
* @see https://tailwindcss.com/docs/ring-opacity
*/
"ring-opacity": [{
"ring-opacity": [opacity]
}],
/**
* Ring Offset Width
* @see https://tailwindcss.com/docs/ring-offset-width
*/
"ring-offset-w": [{
"ring-offset": [isLength, isArbitraryLength]
}],
/**
* Ring Offset Color
* @see https://tailwindcss.com/docs/ring-offset-color
*/
"ring-offset-color": [{
"ring-offset": [colors]
}],
// Effects
/**
* Box Shadow
* @see https://tailwindcss.com/docs/box-shadow
*/
shadow: [{
shadow: ["", "inner", "none", isTshirtSize, isArbitraryShadow]
}],
/**
* Box Shadow Color
* @see https://tailwindcss.com/docs/box-shadow-color
*/
"shadow-color": [{
shadow: [isAny]
}],
/**
* Opacity
* @see https://tailwindcss.com/docs/opacity
*/
opacity: [{
opacity: [opacity]
}],
/**
* Mix Blend Mode
* @see https://tailwindcss.com/docs/mix-blend-mode
*/
"mix-blend": [{
"mix-blend": [...getBlendModes(), "plus-lighter", "plus-darker"]
}],
/**
* Background Blend Mode
* @see https://tailwindcss.com/docs/background-blend-mode
*/
"bg-blend": [{
"bg-blend": getBlendModes()
}],
// Filters
/**
* Filter
* @deprecated since Tailwind CSS v3.0.0
* @see https://tailwindcss.com/docs/filter
*/
filter: [{
filter: ["", "none"]
}],
/**
* Blur
* @see https://tailwindcss.com/docs/blur
*/
blur: [{
blur: [blur]
}],
/**
* Brightness
* @see https://tailwindcss.com/docs/brightness
*/
brightness: [{
brightness: [brightness]
}],
/**
* Contrast
* @see https://tailwindcss.com/docs/contrast
*/
contrast: [{
contrast: [contrast]
}],
/**
* Drop Shadow
* @see https://tailwindcss.com/docs/drop-shadow
*/
"drop-shadow": [{
"drop-shadow": ["", "none", isTshirtSize, isArbitraryValue]
}],
/**
* Grayscale
* @see https://tailwindcss.com/docs/grayscale
*/
grayscale: [{
grayscale: [grayscale]
}],
/**
* Hue Rotate
* @see https://tailwindcss.com/docs/hue-rotate
*/
"hue-rotate": [{
"hue-rotate": [hueRotate]
}],
/**
* Invert
* @see https://tailwindcss.com/docs/invert
*/
invert: [{
invert: [invert]
}],
/**
* Saturate
* @see https://tailwindcss.com/docs/saturate
*/
saturate: [{
saturate: [saturate]
}],
/**
* Sepia
* @see https://tailwindcss.com/docs/sepia
*/
sepia: [{
sepia: [sepia]
}],
/**
* Backdrop Filter
* @deprecated since Tailwind CSS v3.0.0
* @see https://tailwindcss.com/docs/backdrop-filter
*/
"backdrop-filter": [{
"backdrop-filter": ["", "none"]
}],
/**
* Backdrop Blur
* @see https://tailwindcss.com/docs/backdrop-blur
*/
"backdrop-blur": [{
"backdrop-blur": [blur]
}],
/**
* Backdrop Brightness
* @see https://tailwindcss.com/docs/backdrop-brightness
*/
"backdrop-brightness": [{
"backdrop-brightness": [brightness]
}],
/**
* Backdrop Contrast
* @see https://tailwindcss.com/docs/backdrop-contrast
*/
"backdrop-contrast": [{
"backdrop-contrast": [contrast]
}],
/**
* Backdrop Grayscale
* @see https://tailwindcss.com/docs/backdrop-grayscale
*/
"backdrop-grayscale": [{
"backdrop-grayscale": [grayscale]
}],
/**
* Backdrop Hue Rotate
* @see https://tailwindcss.com/docs/backdrop-hue-rotate
*/
"backdrop-hue-rotate": [{
"backdrop-hue-rotate": [hueRotate]
}],
/**
* Backdrop Invert
* @see https://tailwindcss.com/docs/backdrop-invert
*/
"backdrop-invert": [{
"backdrop-invert": [invert]
}],
/**
* Backdrop Opacity
* @see https://tailwindcss.com/docs/backdrop-opacity
*/
"backdrop-opacity": [{
"backdrop-opacity": [opacity]
}],
/**
* Backdrop Saturate
* @see https://tailwindcss.com/docs/backdrop-saturate
*/
"backdrop-saturate": [{
"backdrop-saturate": [saturate]
}],
/**
* Backdrop Sepia
* @see https://tailwindcss.com/docs/backdrop-sepia
*/
"backdrop-sepia": [{
"backdrop-sepia": [sepia]
}],
// Tables
/**
* Border Collapse
* @see https://tailwindcss.com/docs/border-collapse
*/
"border-collapse": [{
border: ["collapse", "separate"]
}],
/**
* Border Spacing
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing": [{
"border-spacing": [borderSpacing]
}],
/**
* Border Spacing X
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing-x": [{
"border-spacing-x": [borderSpacing]
}],
/**
* Border Spacing Y
* @see https://tailwindcss.com/docs/border-spacing
*/
"border-spacing-y": [{
"border-spacing-y": [borderSpacing]
}],
/**
* Table Layout
* @see https://tailwindcss.com/docs/table-layout
*/
"table-layout": [{
table: ["auto", "fixed"]
}],
/**
* Caption Side
* @see https://tailwindcss.com/docs/caption-side
*/
caption: [{
caption: ["top", "bottom"]
}],
// Transitions and Animation
/**
* Tranisition Property
* @see https://tailwindcss.com/docs/transition-property
*/
transition: [{
transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", isArbitraryValue]
}],
/**
* Transition Duration
* @see https://tailwindcss.com/docs/transition-duration
*/
duration: [{
duration: getNumberAndArbitrary()
}],
/**
* Transition Timing Function
* @see https://tailwindcss.com/docs/transition-timing-function
*/
ease: [{
ease: ["linear", "in", "out", "in-out", isArbitraryValue]
}],
/**
* Transition Delay
* @see https://tailwindcss.com/docs/transition-delay
*/
delay: [{
delay: getNumberAndArbitrary()
}],
/**
* Animation
* @see https://tailwindcss.com/docs/animation
*/
animate: [{
animate: ["none", "spin", "ping", "pulse", "bounce", isArbitraryValue]
}],
// Transforms
/**
* Transform
* @see https://tailwindcss.com/docs/transform
*/
transform: [{
transform: ["", "gpu", "none"]
}],
/**
* Scale
* @see https://tailwindcss.com/docs/scale
*/
scale: [{
scale: [scale]
}],
/**
* Scale X
* @see https://tailwindcss.com/docs/scale
*/
"scale-x": [{
"scale-x": [scale]
}],
/**
* Scale Y
* @see https://tailwindcss.com/docs/scale
*/
"scale-y": [{
"scale-y": [scale]
}],
/**
* Rotate
* @see https://tailwindcss.com/docs/rotate
*/
rotate: [{
rotate: [isInteger, isArbitraryValue]
}],
/**
* Translate X
* @see https://tailwindcss.com/docs/translate
*/
"translate-x": [{
"translate-x": [translate]
}],
/**
* Translate Y
* @see https://tailwindcss.com/docs/translate
*/
"translate-y": [{
"translate-y": [translate]
}],
/**
* Skew X
* @see https://tailwindcss.com/docs/skew
*/
"skew-x": [{
"skew-x": [skew]
}],
/**
* Skew Y
* @see https://tailwindcss.com/docs/skew
*/
"skew-y": [{
"skew-y": [skew]
}],
/**
* Transform Origin
* @see https://tailwindcss.com/docs/transform-origin
*/
"transform-origin": [{
origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", isArbitraryValue]
}],
// Interactivity
/**
* Accent Color
* @see https://tailwindcss.com/docs/accent-color
*/
accent: [{
accent: ["auto", colors]
}],
/**
* Appearance
* @see https://tailwindcss.com/docs/appearance
*/
appearance: [{
appearance: ["none", "auto"]
}],
/**
* Cursor
* @see https://tailwindcss.com/docs/cursor
*/
cursor: [{
cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", isArbitraryValue]
}],
/**
* Caret Color
* @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
*/
"caret-color": [{
caret: [colors]
}],
/**
* Pointer Events
* @see https://tailwindcss.com/docs/pointer-events
*/
"pointer-events": [{
"pointer-events": ["none", "auto"]
}],
/**
* Resize
* @see https://tailwindcss.com/docs/resize
*/
resize: [{
resize: ["none", "y", "x", ""]
}],
/**
* Scroll Behavior
* @see https://tailwindcss.com/docs/scroll-behavior
*/
"scroll-behavior": [{
scroll: ["auto", "smooth"]
}],
/**
* Scroll Margin
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-m": [{
"scroll-m": getSpacingWithArbitrary()
}],
/**
* Scroll Margin X
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mx": [{
"scroll-mx": getSpacingWithArbitrary()
}],
/**
* Scroll Margin Y
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-my": [{
"scroll-my": getSpacingWithArbitrary()
}],
/**
* Scroll Margin Start
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-ms": [{
"scroll-ms": getSpacingWithArbitrary()
}],
/**
* Scroll Margin End
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-me": [{
"scroll-me": getSpacingWithArbitrary()
}],
/**
* Scroll Margin Top
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mt": [{
"scroll-mt": getSpacingWithArbitrary()
}],
/**
* Scroll Margin Right
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mr": [{
"scroll-mr": getSpacingWithArbitrary()
}],
/**
* Scroll Margin Bottom
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-mb": [{
"scroll-mb": getSpacingWithArbitrary()
}],
/**
* Scroll Margin Left
* @see https://tailwindcss.com/docs/scroll-margin
*/
"scroll-ml": [{
"scroll-ml": getSpacingWithArbitrary()
}],
/**
* Scroll Padding
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-p": [{
"scroll-p": getSpacingWithArbitrary()
}],
/**
* Scroll Padding X
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-px": [{
"scroll-px": getSpacingWithArbitrary()
}],
/**
* Scroll Padding Y
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-py": [{
"scroll-py": getSpacingWithArbitrary()
}],
/**
* Scroll Padding Start
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-ps": [{
"scroll-ps": getSpacingWithArbitrary()
}],
/**
* Scroll Padding End
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pe": [{
"scroll-pe": getSpacingWithArbitrary()
}],
/**
* Scroll Padding Top
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pt": [{
"scroll-pt": getSpacingWithArbitrary()
}],
/**
* Scroll Padding Right
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pr": [{
"scroll-pr": getSpacingWithArbitrary()
}],
/**
* Scroll Padding Bottom
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pb": [{
"scroll-pb": getSpacingWithArbitrary()
}],
/**
* Scroll Padding Left
* @see https://tailwindcss.com/docs/scroll-padding
*/
"scroll-pl": [{
"scroll-pl": getSpacingWithArbitrary()
}],
/**
* Scroll Snap Align
* @see https://tailwindcss.com/docs/scroll-snap-align
*/
"snap-align": [{
snap: ["start", "end", "center", "align-none"]
}],
/**
* Scroll Snap Stop
* @see https://tailwindcss.com/docs/scroll-snap-stop
*/
"snap-stop": [{
snap: ["normal", "always"]
}],
/**
* Scroll Snap Type
* @see https://tailwindcss.com/docs/scroll-snap-type
*/
"snap-type": [{
snap: ["none", "x", "y", "both"]
}],
/**
* Scroll Snap Type Strictness
* @see https://tailwindcss.com/docs/scroll-snap-type
*/
"snap-strictness": [{
snap: ["mandatory", "proximity"]
}],
/**
* Touch Action
* @see https://tailwindcss.com/docs/touch-action
*/
touch: [{
touch: ["auto", "none", "manipulation"]
}],
/**
* Touch Action X
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-x": [{
"touch-pan": ["x", "left", "right"]
}],
/**
* Touch Action Y
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-y": [{
"touch-pan": ["y", "up", "down"]
}],
/**
* Touch Action Pinch Zoom
* @see https://tailwindcss.com/docs/touch-action
*/
"touch-pz": ["touch-pinch-zoom"],
/**
* User Select
* @see https://tailwindcss.com/docs/user-select
*/
select: [{
select: ["none", "text", "all", "auto"]
}],
/**
* Will Change
* @see https://tailwindcss.com/docs/will-change
*/
"will-change": [{
"will-change": ["auto", "scroll", "contents", "transform", isArbitraryValue]
}],
// SVG
/**
* Fill
* @see https://tailwindcss.com/docs/fill
*/
fill: [{
fill: [colors, "none"]
}],
/**
* Stroke Width
* @see https://tailwindcss.com/docs/stroke-width
*/
"stroke-w": [{
stroke: [isLength, isArbitraryLength, isArbitraryNumber]
}],
/**
* Stroke
* @see https://tailwindcss.com/docs/stroke
*/
stroke: [{
stroke: [colors, "none"]
}],
// Accessibility
/**
* Screen Readers
* @see https://tailwindcss.com/docs/screen-readers
*/
sr: ["sr-only", "not-sr-only"],
/**
* Forced Color Adjust
* @see https://tailwindcss.com/docs/forced-color-adjust
*/
"forced-color-adjust": [{
"forced-color-adjust": ["auto", "none"]
}]
},
conflictingClassGroups: {
overflow: ["overflow-x", "overflow-y"],
overscroll: ["overscroll-x", "overscroll-y"],
inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
"inset-x": ["right", "left"],
"inset-y": ["top", "bottom"],
flex: ["basis", "grow", "shrink"],
gap: ["gap-x", "gap-y"],
p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
px: ["pr", "pl"],
py: ["pt", "pb"],
m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
mx: ["mr", "ml"],
my: ["mt", "mb"],
size: ["w", "h"],
"font-size": ["leading"],
"fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
"fvn-ordinal": ["fvn-normal"],
"fvn-slashed-zero": ["fvn-normal"],
"fvn-figure": ["fvn-normal"],
"fvn-spacing": ["fvn-normal"],
"fvn-fraction": ["fvn-normal"],
"line-clamp": ["display", "overflow"],
rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
"rounded-s": ["rounded-ss", "rounded-es"],
"rounded-e": ["rounded-se", "rounded-ee"],
"rounded-t": ["rounded-tl", "rounded-tr"],
"rounded-r": ["rounded-tr", "rounded-br"],
"rounded-b": ["rounded-br", "rounded-bl"],
"rounded-l": ["rounded-tl", "rounded-bl"],
"border-spacing": ["border-spacing-x", "border-spacing-y"],
"border-w": ["border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
"border-w-x": ["border-w-r", "border-w-l"],
"border-w-y": ["border-w-t", "border-w-b"],
"border-color": ["border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
"border-color-x": ["border-color-r", "border-color-l"],
"border-color-y": ["border-color-t", "border-color-b"],
"scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
"scroll-mx": ["scroll-mr", "scroll-ml"],
"scroll-my": ["scroll-mt", "scroll-mb"],
"scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
"scroll-px": ["scroll-pr", "scroll-pl"],
"scroll-py": ["scroll-pt", "scroll-pb"],
touch: ["touch-x", "touch-y", "touch-pz"],
"touch-x": ["touch"],
"touch-y": ["touch"],
"touch-pz": ["touch"]
},
conflictingClassGroupModifiers: {
"font-size": ["leading"]
}
};
};
const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
function cn(...inputs) {
return twMerge(clsx(inputs));
}
const AccordionContext = createContext(void 0);
const useAccordion = () => {
const context = useContext(AccordionContext);
if (!context) {
throw new Error("useAccordion must be used within an Accordion");
}
return context;
};
const Accordion = React.forwardRef(
({
className,
type = "single",
defaultValue,
value: controlledValue,
onValueChange,
disabled = false,
collapsible = true,
variant = "default",
size = "md",
status = "default",
transition = "collapse",
transitionDuration = 300,
expandIcon,
expandIconPosition = "end",
loading = false,
loadingMessage = "Loading...",
emptyMessage = "No items to display",
// Style props with defaults
backgroundColor,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding,
paddingX,
paddingY,
gap,
boxShadow,
fontSize,
fontWeight,
fontFamily,
textColor,
// Item styles
itemBackgroundColor,
itemHoverBackgroundColor,
itemActiveBackgroundColor,
itemBorderWidth,
itemBorderColor,
itemBorderStyle,
itemBorderRadius,
itemPadding,
itemPaddingX,
itemPaddingY,
itemBoxShadow,
itemGap,
// Trigger styles
triggerBackgroundColor,
triggerHoverBackgroundColor,
triggerActiveBackgroundColor,
triggerTextColor,
triggerHoverTextColor,
triggerActiveTextColor,
triggerFontSize,
triggerFontWeight,
triggerPadding,
triggerPaddingX,
triggerPaddingY,
triggerBorderRadius,
// Content styles
contentBackgroundColor,
contentTextColor,
contentFontSize,
contentPadding,
contentPaddingX,
contentPaddingY,
contentBorderWidth,
contentBorderColor,
contentBorderStyle,
// Focus styles
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor,
focusBorderColor,
focusBackgroundColor,
focusBoxShadow,
// Icon styles
iconSize,
iconColor,
iconHoverColor,
iconActiveColor,
iconRotation,
// Divider styles
dividerColor,
dividerWidth,
dividerStyle,
// Status colors
successColor,
warningColor,
errorColor,
children,
style,
...props
}, ref) => {
const [uncontrolledValue, setUncontrolledValue] = useState(() => {
if (defaultValue) {
return Array.isArray(defaultValue) ? defaultValue : [defaultValue];
}
return [];
});
const value = useMemo(
() => controlledValue !== void 0 ? Array.isArray(controlledValue) ? controlledValue : [controlledValue] : uncontrolledValue,
[controlledValue, uncontrolledValue]
);
const onItemToggle = useCallback(
(itemValue) => {
let newValue;
if (type === "single") {
if (value.includes(itemValue) && collapsible) {
newValue = [];
} else {
newValue = [itemValue];
}
} else {
if (value.includes(itemValue)) {
newValue = value.filter((v) => v !== itemValue);
} else {
newValue = [...value, itemValue];
}
}
if (controlledValue === void 0) {
setUncontrolledValue(newValue);
}
if (onValueChange) {
onValueChange(type === "single" ? newValue[0] || "" : newValue);
}
},
[value, type, collapsible, controlledValue, onValueChange]
);
const getDefaultStyles = () => {
const statusColors = {
default: { border: "#e5e7eb", text: "#374151" },
success: { border: successColor || "#10b981", text: successColor || "#10b981" },
warning: { border: warningColor || "#f59e0b", text: warningColor || "#f59e0b" },
error: { border: errorColor || "#ef4444", text: errorColor || "#ef4444" }
};
const currentStatus = statusColors[status];
return {
backgroundColor: backgroundColor || (variant === "filled" ? "#f3f4f6" : "transparent"),
borderWidth: borderWidth || (variant === "bordered" || variant === "outlined" ? "1px" : "0"),
borderColor: borderColor || currentStatus.border,
borderStyle: borderStyle || "solid",
borderRadius: borderRadius || (variant === "separated" ? "0" : "0.5rem"),
padding: padding || (paddingX || paddingY ? void 0 : variant === "filled" || variant === "bordered" ? "0.5rem" : "0"),
gap: gap || (variant === "separated" ? "0.5rem" : "0"),
fontSize: fontSize || (size === "sm" ? "0.875rem" : size === "lg" ? "1.125rem" : "1rem"),
fontWeight: fontWeight || "400",
textColor: textColor || currentStatus.text,
boxShadow: boxShadow || (variant === "bordered" || variant === "outlined" ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)" : "none")
};
};
const defaultStyles = getDefaultStyles();
const baseStyles = "w-full";
const variants = {
default: "",
bordered: "border overflow-hidden",
filled: "p-2",
separated: "space-y-2",
outlined: "border"
};
const customStyles = {
backgroundColor: defaultStyles.backgroundColor,
borderWidth: defaultStyles.borderWidth,
borderColor: defaultStyles.borderColor,
borderStyle: defaultStyles.borderStyle,
borderRadius: defaultStyles.borderRadius,
padding: defaultStyles.padding,
paddingLeft: paddingX,
paddingRight: paddingX,
paddingTop: paddingY,
paddingBottom: paddingY,
gap: defaultStyles.gap,
boxShadow: defaultStyles.boxShadow,
fontSize: defaultStyles.fontSize,
fontWeight: defaultStyles.fontWeight,
fontFamily,
color: defaultStyles.textColor,
...style
};
return /* @__PURE__ */ jsx(
AccordionContext.Provider,
{
value: {
value,
onItemToggle,
disabled,
variant,
size,
status,
transition,
transitionDuration,
expandIcon,
expandIconPosition,
loading,
// Pass through all style props
itemBackgroundColor,
itemHoverBackgroundColor,
itemActiveBackgroundColor,
itemBorderWidth,
itemBorderColor,
itemBorderStyle,
itemBorderRadius,
itemPadding,
itemPaddingX,
itemPaddingY,
itemBoxShadow,
itemGap,
triggerBackgroundColor,
triggerHoverBackgroundColor,
triggerActiveBackgroundColor,
triggerTextColor,
triggerHoverTextColor,
triggerActiveTextColor,
triggerFontSize,
triggerFontWeight,
triggerPadding,
triggerPaddingX,
triggerPaddingY,
triggerBorderRadius,
contentBackgroundColor,
contentTextColor,
contentFontSize,
contentPadding,
contentPaddingX,
contentPaddingY,
contentBorderWidth,
contentBorderColor,
contentBorderStyle,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor,
focusBorderColor,
focusBackgroundColor,
focusBoxShadow,
iconSize,
iconColor,
iconHoverColor,
iconActiveColor,
iconRotation,
dividerColor,
dividerWidth,
dividerStyle,
successColor,
warningColor,
errorColor
},
children: /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
baseStyles,
variants[variant],
disabled && "opacity-50 cursor-not-allowed",
loading && "animate-pulse",
className
),
style: customStyles,
...props,
children: loading ? /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-gray-500", children: loadingMessage }) : React.Children.count(children) === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-8 text-gray-500", children: emptyMessage }) : children
}
)
}
);
}
);
Accordion.displayName = "Accordion";
const AccordionItem = React.forwardRef(
({ className, value, disabled, children, style, ...props }, ref) => {
const {
variant,
size,
status: _status,
itemBackgroundColor,
itemBorderWidth,
itemBorderColor,
itemBorderStyle,
itemBorderRadius,
itemPadding,
itemPaddingX,
itemPaddingY,
itemBoxShadow,
itemGap,
dividerColor,
dividerWidth,
dividerStyle
} = useAccordion();
const baseStyles = "group";
const variants = {
default: cn("border-b last:border-b-0", dividerColor && `border-b-[${dividerColor}]`),
bordered: "border-b last:border-b-0",
filled: "bg-white rounded-md mb-2 last:mb-0 shadow-sm",
separated: "bg-white border rounded-lg shadow-sm",
outlined: "border-b last:border-b-0"
};
const sizes = {
sm: "",
md: "",
lg: ""
};
const getDefaultItemStyles = () => {
return {
backgroundColor: itemBackgroundColor || (variant === "filled" || variant === "separated" ? "#ffffff" : "transparent"),
borderWidth: itemBorderWidth || (variant === "separated" ? "1px" : "0"),
borderColor: itemBorderColor || "#e5e7eb",
borderStyle: itemBorderStyle || "solid",
borderRadius: itemBorderRadius || (variant === "filled" || variant === "separated" ? "0.375rem" : "0"),
padding: itemPadding || (itemPaddingX || itemPaddingY ? void 0 : "0"),
gap: itemGap || "0",
boxShadow: itemBoxShadow || (variant === "filled" || variant === "separated" ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)" : "none")
};
};
const defaultItemStyles = getDefaultItemStyles();
const customStyles = {
backgroundColor: defaultItemStyles.backgroundColor,
borderWidth: defaultItemStyles.borderWidth,
borderColor: defaultItemStyles.borderColor,
borderStyle: defaultItemStyles.borderStyle,
borderRadius: defaultItemStyles.borderRadius,
padding: defaultItemStyles.padding,
paddingLeft: itemPaddingX,
paddingRight: itemPaddingX,
paddingTop: itemPaddingY,
paddingBottom: itemPaddingY,
gap: defaultItemStyles.gap,
boxShadow: defaultItemStyles.boxShadow,
borderBottomWidth: dividerWidth || (variant === "default" || variant === "bordered" || variant === "outlined" ? "1px" : "0"),
borderBottomColor: dividerColor || "#e5e7eb",
borderBottomStyle: dividerStyle || "solid",
...style
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
baseStyles,
variants[variant || "default"],
sizes[size || "md"],
disabled && "opacity-50",
className
),
"data-state": value,
style: customStyles,
...props,
children
}
);
}
);
AccordionItem.displayName = "AccordionItem";
const AccordionTrigger = React.forwardRef(
({ className, children, disabled, style, ...props }, ref) => {
const {
value,
onItemToggle,
disabled: accordionDisabled,
size,
expandIcon,
expandIconPosition,
triggerBackgroundColor,
triggerHoverBackgroundColor,
triggerActiveBackgroundColor,
triggerTextColor,
triggerHoverTextColor,
triggerActiveTextColor,
triggerFontSize,
triggerFontWeight,
triggerPadding,
triggerPaddingX,
triggerPaddingY,
triggerBorderRadius,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor,
focusBorderColor,
focusBackgroundColor,
focusBoxShadow,
iconSize,
iconColor,
iconHoverColor,
iconActiveColor,
iconRotation
} = useAccordion();
const item = useContext(AccordionItemContext);
if (!item) {
throw new Error("AccordionTrigger must be used within an AccordionItem");
}
const isOpen = value.includes(item.value);
const isDisabled = disabled || accordionDisabled || item.disabled;
const [isHovered, setIsHovered] = useState(false);
const baseStyles = "flex w-full items-center justify-between text-left transition-all focus:outline-none focus-visible:ring";
const sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
const getDefaultTriggerStyles = () => {
return {
backgroundColor: isOpen ? triggerActiveBackgroundColor || "transparent" : isHovered ? triggerHoverBackgroundColor || "#f9fafb" : triggerBackgroundColor || "transparent",
color: isOpen ? triggerActiveTextColor || "#1f2937" : isHovered ? triggerHoverTextColor || "#111827" : triggerTextColor || "#374151",
fontSize: triggerFontSize || (size === "sm" ? "0.875rem" : size === "lg" ? "1.125rem" : "1rem"),
fontWeight: triggerFontWeight || "500",
padding: triggerPadding || (triggerPaddingX || triggerPaddingY ? void 0 : size === "sm" ? "0.75rem" : size === "lg" ? "1.25rem" : "1rem"),
borderRadius: triggerBorderRadius || "0",
"--tw-ring-color": focusRingColor || "#3b82f6",
"--tw-ring-width": focusRingWidth || "2px",
"--tw-ring-offset-width": focusRingOffset || "2px",
"--tw-ring-offset-color": focusRingOffsetColor || "#ffffff"
};
};
const defaultTriggerStyles = getDefaultTriggerStyles();
const customStyles = {
...defaultTriggerStyles,
...triggerPaddingX && { paddingLeft: triggerPaddingX, paddingRight: triggerPaddingX },
...triggerPaddingY && { paddingTop: triggerPaddingY, paddingBottom: triggerPaddingY },
...focusBorderColor && { borderColor: focusBorderColor },
...focusBoxShadow && { boxShadow: focusBoxShadow },
...style
};
const defaultIcon = /* @__PURE__ */ jsx(
"svg",
{
className: cn("shrink-0 transition-transform", isOpen && `rotate-${iconRotation || "180"}`),
style: {
width: iconSize || "1rem",
height: iconSize || "1rem",
color: isOpen ? iconActiveColor || "currentColor" : isHovered ? iconHoverColor || "currentColor" : iconColor || "currentColor"
},
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
}
);
const icon = expandIcon || defaultIcon;
return /* @__PURE__ */ jsxs(
"button",
{
ref,
type: "button",
className: cn(
baseStyles,
sizes[size || "md"],
isDisabled && "cursor-not-allowed opacity-50",
className
),
disabled: isDisabled,
onClick: () => onItemToggle(item.value),
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
onFocus: () => {
},
"aria-expanded": isOpen,
style: customStyles,
...props,
children: [
expandIconPosition === "start" && /* @__PURE__ */ jsx("span", { className: "mr-2", children: icon }),
/* @__PURE__ */ jsx("span", { className: "flex-1", children }),
expandIconPosition === "end" && /* @__PURE__ */ jsx("span", { className: "ml-2", children: icon })
]
}
);
}
);
AccordionTrigger.displayName = "AccordionTrigger";
const AccordionContent = React.forwardRef(
({ className, children, forceMount = false, style, ...props }, ref) => {
const {
value,
size,
transition,
transitionDuration,
contentBackgroundColor,
contentTextColor,
contentFontSize,
contentPadding,
contentPaddingX,
contentPaddingY,
contentBorderWidth,
contentBorderColor,
contentBorderStyle
} = useAccordion();
const item = useContext(AccordionItemContext);
if (!item) {
throw new Error("AccordionContent must be used within an AccordionItem");
}
const isOpen = value.includes(item.value);
if (!forceMount && !isOpen) {
return null;
}
const baseStyles = "overflow-hidden";
const sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
const transitions = {
none: "",
fade: cn(
"transition-opacity",
`duration-${transitionDuration}`,
isOpen ? "opacity-100" : "opacity-0"
),
slide: cn(
"transition-all",
`duration-${transitionDuration}`,
isOpen ? "translate-y-0" : "-translate-y-2"
),
collapse: cn(
"transition-all",
`duration-${transitionDuration}`,
isOpen ? "max-h-96" : "max-h-0"
),
zoom: cn(
"transition-all",
`duration-${transitionDuration}`,
isOpen ? "scale-100 opacity-100" : "scale-95 opacity-0"
),
smooth: cn(
"transition-all ease-in-out",
`duration-${transitionDuration}`,
isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
)
};
const getDefaultContentStyles = () => {
return {
backgroundColor: contentBackgroundColor || "transparent",
color: contentTextColor || "#4b5563",
fontSize: contentFontSize || (size === "sm" ? "0.875rem" : size === "lg" ? "1rem" : "0.875rem"),
padding: contentPadding || (contentPaddingX || contentPaddingY ? void 0 : size === "sm" ? "0.75rem" : size === "lg" ? "1.25rem" : "1rem"),
borderWidth: contentBorderWidth || "0",
borderColor: contentBorderColor || "#e5e7eb",
borderStyle: contentBorderStyle || "solid"
};
};
const defaultContentStyles = getDefaultContentStyles();
const customStyles = {
backgroundColor: defaultContentStyles.backgroundColor,
color: defaultContentStyles.color,
fontSize: defaultContentStyles.fontSize,
padding: defaultContentStyles.padding,
paddingLeft: contentPaddingX,
paddingRight: contentPaddingX,
paddingTop: contentPaddingY,
paddingBottom: contentPaddingY,
borderWidth: defaultContentStyles.borderWidth,
borderColor: defaultContentStyles.borderColor,
borderStyle: defaultContentStyles.borderStyle,
...style
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, transitions[transition || "collapse"], className),
hidden: !forceMount && !isOpen,
...props,
children: /* @__PURE__ */ jsx("div", { className: cn(sizes[size || "md"]), style: customStyles, children })
}
);
}
);
AccordionContent.displayName = "AccordionContent";
const AccordionItemContext = createContext(void 0);
const AccordionItemWrapper = React.forwardRef(
({ value, disabled, ...props }, ref) => {
return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { value, disabled }, children: /* @__PURE__ */ jsx(AccordionItem, { ref, value, disabled, ...props }) });
}
);
AccordionItemWrapper.displayName = "AccordionItem";
const AlertContext = createContext(null);
const useAlertContext = () => {
const context = useContext(AlertContext);
if (!context) {
throw new Error("Alert components must be used within an Alert");
}
return context;
};
const Alert = forwardRef(
({
className,
variant = "default",
size = "md",
status = "default",
disabled = false,
loading = false,
dismissible = false,
required = false,
title,
description,
icon,
children,
label,
helperText,
customStyles = {},
onDismiss,
onFocus,
onBlur,
onKeyDown,
transitionDuration = 200,
_transitionType = "fade",
renderTitle,
renderDescription,
renderIcon,
renderDismissButton,
...props
}, ref) => {
const [isOpen, setIsOpen] = React.useState(true);
const handleDismiss = useCallback(() => {
if (disabled || loading) return;
setIsOpen(false);
onDismiss == null ? void 0 : onDismiss();
}, [disabled, loading, onDismiss]);
const handleKeyDown = (event) => {
if (event.key === "Escape" && dismissible) {
handleDismiss();
}
onKeyDown == null ? void 0 : onKeyDown(event);
};
const contextValue = useMemo(
() => ({
variant,
size,
status,
disabled,
loading,
dismissible,
onDismiss: handleDismiss,
customStyles
}),
[variant, size, status, disabled, loading, dismissible, customStyles, handleDismiss]
);
const baseStyles = cn(
"relative w-full rounded-lg border transition-all",
// Size variants
{
"p-2 text-sm": size === "sm",
"p-4 text-base": size === "md",
"p-6 text-lg": size === "lg"
},
// Variant and status combinations
{
// Default variant
"bg-white border-gray-200 text-gray-900": variant === "default" && status === "default",
"bg-green-50 border-green-200 text-green-900": variant === "default" && status === "success",
"bg-yellow-50 border-yellow-200 text-yellow-900": variant === "default" && status === "warning",
"bg-red-50 border-red-200 text-red-900": variant === "default" && status === "error",
"bg-blue-50 border-blue-200 text-blue-900": variant === "default" && status === "info",
// Filled variant
"bg-gray-900 border-gray-900 text-white": variant === "filled" && status === "default",
"bg-green-600 border-green-600 text-white": variant === "filled" && status === "success",
"bg-yellow-600 border-yellow-600 text-white": variant === "filled" && status === "warning",
"bg-red-600 border-red-600 text-white": variant === "filled" && status === "error",
"bg-blue-600 border-blue-600 text-white": variant === "filled" && status === "info",
// Outlined variant
"bg-transparent border-gray-300 text-gray-900": variant === "outlined" && status === "default",
"bg-transparent border-green-500 text-green-700": variant === "outlined" && status === "success",
"bg-transparent border-yellow-500 text-yellow-700": variant === "outlined" && status === "warning",
"bg-transparent border-red-500 text-red-700": variant === "outlined" && status === "error",
"bg-transparent border-blue-500 text-blue-700": variant === "outlined" && status === "info",
// Ghost variant
"bg-gray-100 border-transparent text-gray-900": variant === "ghost" && status === "default",
"bg-green-100 border-transparent text-green-900": variant === "ghost" && status === "success",
"bg-yellow-100 border-transparent text-yellow-900": variant === "ghost" && status === "warning",
"bg-red-100 border-transparent text-red-900": variant === "ghost" && status === "error",
"bg-blue-100 border-transparent text-blue-900": variant === "ghost" && status === "info"
},
// States
{
"opacity-50 cursor-not-allowed": disabled,
"animate-pulse": loading
},
className
);
const inlineStyles = {
borderWidth: customStyles.borderWidth,
borderColor: customStyles.borderColor,
borderStyle: customStyles.borderStyle,
borderRadius: customStyles.borderRadius,
fontSize: customStyles.fontSize,
fontWeight: customStyles.fontWeight,
fontFamily: customStyles.fontFamily,
color: customStyles.textColor,
backgroundColor: customStyles.backgroundColor,
padding: customStyles.padding,
paddingLeft: customStyles.paddingX,
paddingRight: customStyles.paddingX,
paddingTop: customStyles.paddingY,
paddingBottom: customStyles.paddingY,
boxShadow: customStyles.boxShadow,
transitionDuration: `${transitionDuration}ms`,
...customStyles
};
if (!isOpen) return null;
return /* @__PURE__ */ jsx(AlertContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: baseStyles,
style: inlineStyles,
role: "alert",
"aria-label": label || "Alert",
"aria-describedby": helperText ? "alert-helper" : void 0,
"aria-required": required,
"aria-disabled": disabled,
"aria-busy": loading,
tabIndex: dismissible ? 0 : void 0,
onFocus,
onBlur,
onKeyDown: handleKeyDown,
...props,
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
icon && (renderIcon ? renderIcon({ children: icon, customStyles: customStyles.iconStyles }) : /* @__PURE__ */ jsx(AlertIcon, { children: icon })),
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
title && (renderTitle ? renderTitle({ children: title, customStyles: customStyles.titleStyles }) : /* @__PURE__ */ jsx(AlertTitle, { children: title })),
description && (renderDescription ? renderDescription({
children: description,
customStyles: customStyles.descriptionStyles
}) : /* @__PURE__ */ jsx(AlertDescription, { children: description })),
children
] }),
dismissible && (renderDismissButton ? renderDismissButton({
onDismiss: handleDismiss,
customStyles: customStyles.dismissButtonStyles
}) : /* @__PURE__ */ jsx(AlertDismissButton, { onDismiss: handleDismiss }))
] }),
helperText && /* @__PURE__ */ jsx("div", { id: "alert-helper", className: "mt-2 text-sm text-gray-600", children: helperText })
]
}
) });
}
);
Alert.displayName = "Alert";
const AlertTitle = forwardRef(
({ className, children, customStyles, ...props }, ref) => {
const { size } = useAlertContext();
const titleStyles = cn(
"font-medium leading-none tracking-tight",
{
"text-sm mb-1": size === "sm",
"text-base mb-1": size === "md",
"text-lg mb-2": size === "lg"
},
className
);
return /* @__PURE__ */ jsx("h5", { ref, className: titleStyles, style: customStyles, ...props, children });
}
);
AlertTitle.displayName = "AlertTitle";
const AlertDescription = forwardRef(
({ className, children, customStyles, ...props }, ref) => {
const { size } = useAlertContext();
const descriptionStyles = cn(
"leading-relaxed",
{
"text-xs": size === "sm",
"text-sm": size === "md",
"text-base": size === "lg"
},
className
);
return /* @__PURE__ */ jsx("p", { ref, className: descriptionStyles, style: customStyles, ...props, children });
}
);
AlertDescription.displayName = "AlertDescription";
const AlertIcon = forwardRef(
({ className, children, customStyles, ...props }, ref) => {
const { size } = useAlertContext();
const iconStyles = cn(
"flex-shrink-0",
{
"w-4 h-4": size === "sm",
"w-5 h-5": size === "md",
"w-6 h-6": size === "lg"
},
className
);
return /* @__PURE__ */ jsx("div", { ref, className: iconStyles, style: customStyles, ...props, children });
}
);
AlertIcon.displayName = "AlertIcon";
const AlertDismissButton = forwardRef(
({ className, children, customStyles, onDismiss, ...props }, ref) => {
const { size, disabled, loading } = useAlertContext();
const buttonStyles = cn(
"flex-shrink-0 rounded-md p-1 transition-colors hover:bg-black/10 focus:outline-none focus:ring-2 focus:ring-offset-2",
{
"w-4 h-4": size === "sm",
"w-5 h-5": size === "md",
"w-6 h-6": size === "lg",
"opacity-50 cursor-not-allowed": disabled || loading
},
className
);
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
className: buttonStyles,
style: customStyles,
onClick: onDismiss,
disabled: disabled || loading,
"aria-label": "Dismiss alert",
...props,
children: children || /* @__PURE__ */ jsx("svg", { className: "w-full h-full", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}
) })
}
);
}
);
AlertDismissButton.displayName = "AlertDismissButton";
const AnchorContext = createContext(null);
const useAnchor = () => {
const context = useContext(AnchorContext);
if (!context) {
throw new Error("useAnchor must be used within an Anchor component");
}
return context;
};
const useScrollSpy = (targetIds, options = {}) => {
const { offset = 0, rootMargin = "0px", threshold = 0.1, onChange } = options;
const [activeId, setActiveId] = useState(null);
const observerRef = useRef(null);
useEffect(() => {
if (typeof window === "undefined" || !targetIds.length) return;
const elements = targetIds.map((id) => document.getElementById(id)).filter(Boolean);
if (!elements.length) return;
const observer = new IntersectionObserver(
(entries) => {
const visibleEntries = entries.filter((entry) => entry.isIntersecting);
if (visibleEntries.length === 0) return;
const sortedEntries = visibleEntries.sort((a, b) => {
const aTop = a.boundingClientRect.top - offset;
const bTop = b.boundingClientRect.top - offset;
return Math.abs(aTop) - Math.abs(bTop);
});
const newActiveId = sortedEntries[0].target.id;
if (newActiveId !== activeId) {
setActiveId(newActiveId);
onChange == null ? void 0 : onChange(newActiveId);
}
},
{
rootMargin,
threshold
}
);
elements.forEach((element) => observer.observe(element));
observerRef.current = observer;
return () => {
observer.disconnect();
observerRef.current = null;
};
}, [targetIds, offset, rootMargin, threshold, activeId, onChange]);
return activeId;
};
const useSmoothScroll = (options = {}) => {
const {
behavior = "smooth",
offset = 0,
duration = 800,
easing = "ease-out",
onScrollStart,
onScrollEnd
} = options;
const scrollToElement = useCallback(
(targetId, customBehavior) => {
const element = document.getElementById(targetId);
if (!element) return;
const actualBehavior = customBehavior || behavior;
onScrollStart == null ? void 0 : onScrollStart(targetId);
if (actualBehavior === "instant" || !window.requestAnimationFrame) {
const targetPosition2 = element.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({
top: targetPosition2,
behavior: actualBehavior
});
onScrollEnd == null ? void 0 : onScrollEnd(targetId);
return;
}
const startPosition = window.pageYOffset;
const targetPosition = element.getBoundingClientRect().top + window.pageYOffset - offset;
const distance = targetPosition - startPosition;
const startTime = performance.now();
const easingFunctions = {
linear: (t) => t,
ease: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
"ease-in": (t) => t * t,
"ease-out": (t) => t * (2 - t),
"ease-in-out": (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
};
const easingFunction = easingFunctions[easing];
const animate = (currentTime) => {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easedProgress = easingFunction(progress);
window.scrollTo(0, startPosition + distance * easedProgress);
if (progress < 1) {
requestAnimationFrame(animate);
} else {
onScrollEnd == null ? void 0 : onScrollEnd(targetId);
}
};
requestAnimationFrame(animate);
},
[behavior, offset, duration, easing, onScrollStart, onScrollEnd]
);
return scrollToElement;
};
const useHashSync = (activeId, onChange) => {
useEffect(() => {
const handleHashChange = () => {
const hash = window.location.hash.replace("#", "");
if (hash) {
onChange == null ? void 0 : onChange(hash);
}
};
window.addEventListener("hashchange", handleHashChange);
return () => window.removeEventListener("hashchange", handleHashChange);
}, [onChange]);
useEffect(() => {
if (activeId && window.location.hash.replace("#", "") !== activeId) {
const newUrl = `${window.location.pathname}${window.location.search}#${activeId}`;
window.history.replaceState(null, "", newUrl);
}
}, [activeId]);
};
const Anchor = React.forwardRef(
({
className,
children,
// Controlled/uncontrolled
activeId,
defaultActiveId = null,
onChange,
// Configuration
variant = "underline",
size = "md",
direction = "vertical",
position = "static",
offset = 80,
scrollBehavior = "smooth",
easing = "ease-out",
duration = 800,
// Features
hashSync = false,
scrollSpy = true,
targetIds = [],
// Custom renderers
_renderLink,
_renderGroup,
_renderIndicator,
// Event handlers
onClick,
onScrollStart,
onScrollEnd,
onActiveChange,
// Style props
fontSize,
fontWeight,
textColor,
hoverColor,
activeColor,
visitedColor,
borderStyle,
borderColor,
borderWidth,
borderRadius,
backgroundColor,
hoverBackgroundColor,
indicatorColor,
lineColor,
dotColor,
focusRingColor,
_focusRingWidth,
focusOutline,
boxShadow,
gap,
padding,
paddingX,
paddingY,
margin,
// Underline customization
underlineWidth,
underlineHeight,
underlineOffset,
// Accessibility
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
role = "navigation",
...props
}, ref) => {
const [internalActiveId, setInternalActiveId] = useState(defaultActiveId);
const [hoveredId, setHoveredId] = useState(null);
const [visitedIds, setVisitedIds] = useState(/* @__PURE__ */ new Set());
const isControlled = activeId !== void 0;
const scrollSpyActiveId = useScrollSpy(targetIds, {
offset,
onChange: scrollSpy && !isControlled ? setInternalActiveId : void 0
});
const finalActiveId = isControlled ? activeId : scrollSpy && scrollSpyActiveId ? scrollSpyActiveId : internalActiveId;
const scrollToElement = useSmoothScroll({
behavior: scrollBehavior,
offset,
duration,
easing,
onScrollStart,
onScrollEnd
});
useHashSync(hashSync ? finalActiveId : null, (hash) => {
if (!isControlled) {
setInternalActiveId(hash);
}
onChange == null ? void 0 : onChange(hash);
});
const previousActiveId = useRef(finalActiveId);
useEffect(() => {
if (finalActiveId !== previousActiveId.current) {
onActiveChange == null ? void 0 : onActiveChange(finalActiveId, previousActiveId.current);
previousActiveId.current = finalActiveId;
}
}, [finalActiveId, onActiveChange]);
const handleActiveChange = useCallback(
(newActiveId) => {
if (!isControlled) {
setInternalActiveId(newActiveId);
}
onChange == null ? void 0 : onChange(newActiveId);
},
[isControlled, onChange]
);
const addVisitedId = useCallback((id) => {
setVisitedIds((prev) => /* @__PURE__ */ new Set([...prev, id]));
}, []);
const scrollToAnchor = useCallback(
(id, behavior) => {
scrollToElement(id, behavior);
addVisitedId(id);
if (!isControlled) {
setInternalActiveId(id);
}
onChange == null ? void 0 : onChange(id);
},
[scrollToElement, addVisitedId, isControlled, onChange]
);
const contextValue = useMemo(
() => ({
// State
activeId: finalActiveId,
setActiveId: handleActiveChange,
hoveredId,
setHoveredId,
visitedIds,
addVisitedId,
// Configuration
variant,
size,
direction,
position,
offset,
scrollBehavior,
easing,
duration,
// Event handlers
onChange,
onClick,
onScrollStart,
onScrollEnd,
onActiveChange,
// Methods
scrollToAnchor,
// Style props
fontSize,
fontWeight,
textColor,
hoverColor,
activeColor,
visitedColor,
borderStyle,
borderColor,
borderWidth,
borderRadius,
backgroundColor,
hoverBackgroundColor,
indicatorColor,
lineColor,
dotColor,
focusRingColor,
_focusRingWidth,
_focusOutline: focusOutline,
boxShadow,
gap,
padding,
paddingX,
paddingY,
margin,
// Underline customization
underlineWidth,
underlineHeight,
_underlineOffset: underlineOffset
}),
[
finalActiveId,
handleActiveChange,
hoveredId,
visitedIds,
addVisitedId,
variant,
size,
direction,
position,
offset,
scrollBehavior,
easing,
duration,
onChange,
onClick,
onScrollStart,
onScrollEnd,
onActiveChange,
scrollToAnchor,
fontSize,
fontWeight,
textColor,
hoverColor,
activeColor,
visitedColor,
borderStyle,
borderColor,
borderWidth,
borderRadius,
backgroundColor,
hoverBackgroundColor,
indicatorColor,
lineColor,
dotColor,
focusRingColor,
_focusRingWidth,
focusOutline,
boxShadow,
gap,
padding,
paddingX,
paddingY,
margin,
// Underline customization
underlineWidth,
underlineHeight,
underlineOffset
]
);
const baseStyles = "relative";
const directionStyles = {
vertical: "flex flex-col items-stretch",
horizontal: "flex flex-row flex-wrap items-center"
};
const positionStyles = {
static: "",
sticky: "sticky top-0 z-10",
fixed: "fixed top-0 left-0 z-50"
};
const getVariantStyles = (variant2, direction2) => {
const baseVariants = {
underline: direction2 === "vertical" ? "gap-y-1" : "gap-x-4",
"side-border": direction2 === "vertical" ? "gap-y-1" : "gap-x-4",
filled: direction2 === "vertical" ? "bg-gray-50 rounded-lg p-4 gap-y-1" : "bg-gray-50 rounded-lg px-4 py-2 gap-x-4",
minimal: direction2 === "vertical" ? "gap-y-2" : "gap-x-6",
dot: direction2 === "vertical" ? "gap-y-2" : "gap-x-4",
"icon-based": direction2 === "vertical" ? "gap-y-1" : "gap-x-3",
nested: direction2 === "vertical" ? "gap-y-1" : "gap-x-2"
};
return baseVariants[variant2];
};
const sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
const customStyles = {};
if (fontSize) customStyles.fontSize = fontSize;
if (fontWeight) customStyles.fontWeight = fontWeight;
if (backgroundColor) customStyles.backgroundColor = backgroundColor;
if (borderStyle) customStyles.borderStyle = borderStyle;
if (borderColor) customStyles.borderColor = borderColor;
if (borderWidth) customStyles.borderWidth = borderWidth;
if (borderRadius) customStyles.borderRadius = borderRadius;
if (boxShadow) customStyles.boxShadow = boxShadow;
if (padding) customStyles.padding = padding;
if (paddingX) {
customStyles.paddingLeft = paddingX;
customStyles.paddingRight = paddingX;
}
if (paddingY) {
customStyles.paddingTop = paddingY;
customStyles.paddingBottom = paddingY;
}
if (margin) customStyles.margin = margin;
if (gap) customStyles.gap = gap;
return /* @__PURE__ */ jsx(AnchorContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
"nav",
{
ref,
className: cn(
baseStyles,
directionStyles[direction],
positionStyles[position],
getVariantStyles(variant, direction),
sizes[size],
className
),
style: customStyles,
role,
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"data-testid": "anchor",
...props,
children
}
) });
}
);
Anchor.displayName = "Anchor";
const AnchorLink = React.forwardRef(
({
className,
children,
href,
disabled = false,
level = 0,
icon,
active,
onClick,
onMouseEnter,
onMouseLeave,
...props
}, ref) => {
const {
activeId,
hoveredId,
visitedIds,
setHoveredId,
addVisitedId,
scrollToAnchor,
variant,
size,
direction,
textColor,
hoverColor,
activeColor,
visitedColor,
focusRingColor,
// _focusRingWidth,
// _focusOutline,
underlineWidth,
underlineHeight,
// _underlineOffset,
onClick: contextOnClick
} = useAnchor();
const targetId = href.replace("#", "");
const isActive = active !== void 0 ? active : activeId === targetId;
const isHovered = hoveredId === targetId;
const isVisited = visitedIds.has(targetId);
const handleClick = useCallback(
(e) => {
if (disabled) {
e.preventDefault();
return;
}
e.preventDefault();
scrollToAnchor(targetId);
addVisitedId(targetId);
onClick == null ? void 0 : onClick(e);
contextOnClick == null ? void 0 : contextOnClick(targetId, href);
},
[disabled, scrollToAnchor, targetId, addVisitedId, onClick, contextOnClick, href]
);
const handleMouseEnter = useCallback(() => {
if (!disabled) {
setHoveredId(targetId);
onMouseEnter == null ? void 0 : onMouseEnter();
}
}, [disabled, setHoveredId, targetId, onMouseEnter]);
const handleMouseLeave = useCallback(() => {
if (!disabled) {
setHoveredId(null);
onMouseLeave == null ? void 0 : onMouseLeave();
}
}, [disabled, setHoveredId, onMouseLeave]);
const baseStyles = cn(
direction === "vertical" ? "flex items-center gap-2 w-full" : "inline-flex items-center gap-2",
"no-underline transition-all duration-200",
"focus:outline-none focus-visible:outline-none active:outline-none",
"focus:ring-0 focus-visible:ring-0 active:ring-0",
disabled && "cursor-not-allowed opacity-50",
!disabled && "cursor-pointer hover:transition-colors"
);
const getVariantStyles = (variant2, direction2) => {
const styles = {
underline: cn(
"relative pb-1 w-full",
// Use border for underline to ensure it shows up
isActive && "border-b-2 border-current",
!disabled && !isActive && "hover:border-b-2 hover:border-current hover:border-opacity-60 transition-all duration-200"
),
"side-border": cn(
"relative w-full",
direction2 === "vertical" ? "pl-4" : "pb-1",
isActive && (direction2 === "vertical" ? "border-l-2 border-current font-medium" : "border-b-2 border-current font-medium"),
!disabled && !isActive && (direction2 === "vertical" ? "hover:border-l-2 hover:border-current hover:border-opacity-60 transition-all duration-200" : "hover:border-b-2 hover:border-current hover:border-opacity-60 transition-all duration-200")
),
filled: cn(
"w-full",
direction2 === "vertical" ? "px-3 py-2 rounded-md" : "px-4 py-2 rounded-full",
isActive && "bg-current/10 font-medium",
!disabled && "hover:bg-current/5"
),
minimal: cn(
direction2 === "vertical" ? "w-full" : "whitespace-nowrap",
isActive && "font-medium",
!disabled && "hover:text-current"
),
dot: cn(
"relative w-full",
direction2 === "vertical" ? "pl-6" : "pl-4",
isActive && "font-medium"
),
"icon-based": cn("items-center gap-3 w-full", isActive && "font-medium"),
nested: cn(
"w-full",
// Ensure full width for proper vertical stacking
isActive && "font-medium",
direction2 === "vertical" && level > 0 && `ml-${level * 4}`
)
};
return styles[variant2];
};
const sizeStyles = {
sm: "text-sm py-1",
md: "text-base py-1.5",
lg: "text-lg py-2"
};
const getTextColor = () => {
if (disabled) return "text-gray-400";
if (isActive && activeColor) return "";
if (isHovered && hoverColor) return "";
if (isVisited && visitedColor) return "";
if (textColor) return "";
if (isActive) return "text-blue-600";
if (isHovered) return "text-blue-500";
if (isVisited) return "text-purple-600";
return "text-gray-700";
};
const customStyles = {};
if (isActive && activeColor) customStyles.color = activeColor;
else if (isHovered && hoverColor) customStyles.color = hoverColor;
else if (isVisited && visitedColor) customStyles.color = visitedColor;
else if (textColor) customStyles.color = textColor;
if (variant === "underline" && (underlineWidth || underlineHeight)) {
if (underlineHeight) {
customStyles.borderBottomWidth = underlineHeight;
}
if (underlineWidth && underlineWidth !== "100%") {
Object.assign(customStyles, {
"--underline-width": underlineWidth,
"--underline-height": underlineHeight || "2px"
});
}
}
const focusStyles = cn(
"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500",
focusRingColor && "focus-visible:ring-current"
);
if (focusRingColor) {
Object.assign(customStyles, { "--tw-ring-color": focusRingColor });
}
return /* @__PURE__ */ jsxs(
"a",
{
ref,
href,
className: cn(
baseStyles,
getVariantStyles(variant, direction),
sizeStyles[size],
getTextColor(),
focusStyles,
// Custom underline width handling
variant === "underline" && underlineWidth && underlineWidth !== "100%" && [
"border-b-0",
// Remove default border
"after:absolute after:bottom-0 after:left-0 after:bg-current after:transition-all after:duration-200",
"after:w-[var(--underline-width)] after:h-[var(--underline-height,2px)]",
isActive && "after:opacity-100",
!disabled && !isActive && "hover:after:opacity-60"
],
className
),
style: customStyles,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
"aria-current": isActive ? "page" : void 0,
"aria-disabled": disabled,
tabIndex: disabled ? -1 : 0,
"data-testid": "anchor-link",
...props,
children: [
variant === "dot" && /* @__PURE__ */ jsx(
"span",
{
className: cn(
"absolute left-0 top-1/2 -translate-y-1/2 w-2 h-2 rounded-full border",
isActive ? "bg-current border-current" : "bg-transparent border-current/30"
)
}
),
icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 w-4 h-4", children: icon }),
/* @__PURE__ */ jsx("span", { className: "flex-1", children })
]
}
);
}
);
AnchorLink.displayName = "AnchorLink";
const AnchorGroup = React.forwardRef(
({
className,
children,
title,
level = 0,
collapsible = false,
defaultExpanded = true,
expanded,
onExpandedChange,
...props
}, ref) => {
const { size, gap } = useAnchor();
const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
const isControlled = expanded !== void 0;
const isExpanded = isControlled ? expanded : internalExpanded;
const handleToggle = useCallback(() => {
if (!collapsible) return;
const newExpanded = !isExpanded;
if (!isControlled) {
setInternalExpanded(newExpanded);
}
onExpandedChange == null ? void 0 : onExpandedChange(newExpanded);
}, [collapsible, isExpanded, isControlled, onExpandedChange]);
const handleKeyDown = useCallback(
(e) => {
if (collapsible && (e.key === "Enter" || e.key === " ")) {
e.preventDefault();
handleToggle();
}
},
[collapsible, handleToggle]
);
const titleSizes = {
sm: "text-xs font-semibold",
md: "text-sm font-semibold",
lg: "text-base font-semibold"
};
const getIndentationStyles = (level2) => {
if (level2 === 0) return "";
const indentMap = {
1: "ml-4 pl-2 border-l border-gray-100",
2: "ml-8 pl-3 border-l border-gray-100",
3: "ml-12 pl-4 border-l border-gray-100"
};
return indentMap[level2] || `ml-${level2 * 4} pl-${level2 + 1} border-l border-gray-100`;
};
const indentationClass = getIndentationStyles(level);
const customStyles = {};
if (gap) customStyles.gap = gap;
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn("flex flex-col gap-y-2 w-full", indentationClass, className),
style: customStyles,
...props,
children: [
title && /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"flex items-center justify-between",
collapsible && "cursor-pointer select-none",
titleSizes[size],
"text-gray-900 uppercase tracking-wide"
),
onClick: collapsible ? handleToggle : void 0,
onKeyDown: collapsible ? handleKeyDown : void 0,
tabIndex: collapsible ? 0 : void 0,
role: collapsible ? "button" : void 0,
"aria-expanded": collapsible ? isExpanded : void 0,
"aria-controls": collapsible ? `group-${title.replace(/\s+/g, "-").toLowerCase()}` : void 0,
children: [
/* @__PURE__ */ jsx("span", { children: title }),
collapsible && /* @__PURE__ */ jsx(
"svg",
{
className: cn(
"w-4 h-4 transition-transform duration-200",
isExpanded ? "rotate-90" : "rotate-0"
),
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 5l7 7-7 7"
}
)
}
)
]
}
),
isExpanded && /* @__PURE__ */ jsx(
"div",
{
className: cn(
"flex flex-col gap-y-1 w-full",
title && "mt-2",
// Improved nested spacing
level === 0 && title ? "ml-0" : title ? "ml-1" : "ml-0"
),
id: collapsible && title ? `group-${title.replace(/\s+/g, "-").toLowerCase()}` : void 0,
children
}
)
]
}
);
}
);
AnchorGroup.displayName = "AnchorGroup";
const AnchorIndicator = React.forwardRef(
({ className, position = "left", animated = true, width = "2px", color, ...props }, ref) => {
const { activeId, variant, indicatorColor } = useAnchor();
const [indicatorStyle, setIndicatorStyle] = useState({
top: 0,
height: 0,
opacity: 0
});
useEffect(() => {
if (!activeId) {
setIndicatorStyle((prev) => ({ ...prev, opacity: 0 }));
return;
}
const activeElement = document.querySelector(`a[href="#${activeId}"]`);
if (!activeElement) {
setIndicatorStyle((prev) => ({ ...prev, opacity: 0 }));
return;
}
const rect = activeElement.getBoundingClientRect();
const container = activeElement.closest('[data-testid="anchor"]');
if (!container) {
setIndicatorStyle((prev) => ({ ...prev, opacity: 0 }));
return;
}
const containerRect = container.getBoundingClientRect();
const relativeTop = rect.top - containerRect.top;
setIndicatorStyle({
top: relativeTop,
height: rect.height,
opacity: 1
});
}, [activeId]);
if (variant === "underline" || variant === "filled" || variant === "dot") {
return null;
}
const baseStyles = cn(
"absolute transition-all duration-300 ease-out rounded-full",
position === "left" ? "left-0" : "right-0",
!animated && "transition-none"
);
const customStyles = {
width,
top: `${indicatorStyle.top}px`,
height: `${indicatorStyle.height}px`,
opacity: indicatorStyle.opacity,
backgroundColor: color || indicatorColor || "#3b82f6",
transform: `translateY(${indicatorStyle.height > 0 ? "0" : "-50%"})`
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, className),
style: customStyles,
"data-testid": "anchor-indicator",
...props
}
);
}
);
AnchorIndicator.displayName = "AnchorIndicator";
const AnchorContent = React.forwardRef(
({ className, children, anchorId, title, level = 2, offset, ...props }, ref) => {
let contextOffset = 80;
try {
const context = useAnchor();
contextOffset = context.offset;
} catch {
}
const actualOffset = offset ?? contextOffset;
const HeadingComponent = `h${level}`;
const headingStyles = {
1: "text-4xl font-bold",
2: "text-3xl font-bold",
3: "text-2xl font-semibold",
4: "text-xl font-semibold",
5: "text-lg font-medium",
6: "text-base font-medium"
};
const customStyles = {
scrollMarginTop: `${actualOffset}px`,
paddingTop: `${Math.max(actualOffset * 0.3, 20)}px`
// Add padding to prevent content overlap
};
const getScrollMarginClass = (offset2) => {
if (offset2 <= 40) return "scroll-mt-10";
if (offset2 <= 80) return "scroll-mt-20";
if (offset2 <= 120) return "scroll-mt-32";
return "scroll-mt-40";
};
return /* @__PURE__ */ jsxs(
"section",
{
ref,
id: anchorId,
className: cn(
"relative",
getScrollMarginClass(actualOffset),
"mb-8",
// Add consistent bottom margin
className
),
style: customStyles,
"data-testid": "anchor-content",
...props,
children: [
title && /* @__PURE__ */ jsx(
HeadingComponent,
{
className: cn(
"mb-6 text-gray-900 leading-tight",
headingStyles[level],
// Add extra spacing for larger headings
level <= 2 && "mb-8"
),
children: title
}
),
/* @__PURE__ */ jsx("div", { className: "space-y-4", children })
]
}
);
}
);
AnchorContent.displayName = "AnchorContent";
const AnchorCompound = Anchor;
AnchorCompound.Link = AnchorLink;
AnchorCompound.Group = AnchorGroup;
AnchorCompound.Indicator = AnchorIndicator;
AnchorCompound.Content = AnchorContent;
const AutocompleteContext = createContext(void 0);
const useAutocomplete = () => {
const context = useContext(AutocompleteContext);
if (!context) {
throw new Error("useAutocomplete must be used within an Autocomplete");
}
return context;
};
const defaultFilterOption = (option, inputValue) => {
return option.label.toLowerCase().includes(inputValue.toLowerCase());
};
const Autocomplete = React.forwardRef(
({
className,
options,
value,
onChange,
onInputChange,
placeholder = "Select...",
disabled = false,
loading = false,
multiple = false,
clearable = true,
searchable = true,
creatable = false,
onCreate,
variant = "default",
size = "md",
status = "default",
helperText,
label,
required = false,
filterOption = defaultFilterOption,
renderOption,
renderValue,
groupBy: _groupBy,
maxHeight = 300,
transition = "scale",
transitionDuration = 200,
placement = "bottom",
offset = 4,
flip: _flip = true,
preventOverflow: _preventOverflow = true,
emptyMessage = "No options found",
loadingMessage = "Loading...",
createMessage = (inputValue) => `Create "${inputValue}"`,
clearIcon,
dropdownIcon,
loadingIcon,
children,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
placeholderColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
dropdownBackgroundColor,
dropdownBorderColor,
dropdownBorderWidth,
dropdownBorderRadius,
dropdownBoxShadow,
dropdownZIndex,
itemPadding,
itemHoverBackgroundColor,
itemSelectedBackgroundColor,
itemSelectedTextColor,
itemHighlightedBackgroundColor,
itemDisabledOpacity,
iconColor,
clearIconColor,
dropdownIconColor,
loadingIconColor,
labelFontSize,
labelFontWeight,
labelColor,
labelMarginBottom,
helperTextFontSize,
helperTextColor,
helperTextMarginTop,
requiredColor,
...props
}, ref) => {
const [open, setOpen] = useState(false);
const [inputValue, setInputValue] = useState("");
const [highlightedIndex, setHighlightedIndex] = useState(-1);
const filteredOptions = useMemo(() => {
if (!searchable || !inputValue) return options;
const filtered = options.filter((option) => filterOption(option, inputValue));
if (creatable && inputValue && !filtered.some((opt) => opt.label === inputValue)) {
filtered.push({
value: inputValue,
label: createMessage(inputValue),
__isCreate: true
});
}
return filtered;
}, [options, inputValue, searchable, filterOption, creatable, createMessage]);
const handleChange = useCallback(
(newValue) => {
if (onChange) {
onChange(newValue);
}
if (!multiple) {
setOpen(false);
setInputValue("");
}
},
[onChange, multiple]
);
const handleInputChange = useCallback(
(value2) => {
setInputValue(value2);
if (onInputChange) {
onInputChange(value2);
}
if (!open && value2) {
setOpen(true);
}
},
[onInputChange, open]
);
const baseStyles = "relative w-full";
return /* @__PURE__ */ jsx(
AutocompleteContext.Provider,
{
value: {
open,
setOpen,
value: value || null,
onChange: handleChange,
inputValue,
setInputValue: handleInputChange,
options,
filteredOptions,
highlightedIndex,
setHighlightedIndex,
multiple,
disabled,
loading,
searchable,
variant,
size,
status,
transition,
transitionDuration,
placement,
renderOption,
emptyMessage,
loadingMessage,
createMessage,
creatable,
onCreate,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
placeholderColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
dropdownBackgroundColor,
dropdownBorderColor,
dropdownBorderWidth,
dropdownBorderRadius,
dropdownBoxShadow,
dropdownZIndex,
itemPadding,
itemHoverBackgroundColor,
itemSelectedBackgroundColor,
itemSelectedTextColor,
itemHighlightedBackgroundColor,
itemDisabledOpacity,
iconColor,
clearIconColor,
dropdownIconColor,
loadingIconColor
},
children: /* @__PURE__ */ jsxs("div", { ref, className: cn(baseStyles, className), ...props, children: [
label && /* @__PURE__ */ jsxs(
"label",
{
className: cn(
"block mb-2 font-medium",
size === "sm" && "text-sm",
size === "md" && "text-base",
size === "lg" && "text-lg",
status === "error" && "text-red-600",
disabled && "opacity-50"
),
style: {
fontSize: labelFontSize,
fontWeight: labelFontWeight,
color: labelColor,
marginBottom: labelMarginBottom
},
children: [
label,
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", style: { color: requiredColor }, children: "*" })
]
}
),
children || /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
AutocompleteInput,
{
placeholder,
clearable,
clearIcon,
dropdownIcon,
loadingIcon,
renderValue
}
),
/* @__PURE__ */ jsx(AutocompleteList, { maxHeight, offset })
] }),
helperText && /* @__PURE__ */ jsx(
"p",
{
className: cn(
"mt-2",
size === "sm" && "text-xs",
size === "md" && "text-sm",
size === "lg" && "text-base",
status === "success" && "text-green-600",
status === "warning" && "text-yellow-600",
status === "error" && "text-red-600",
status === "default" && "text-gray-500"
),
style: {
fontSize: helperTextFontSize,
color: helperTextColor,
marginTop: helperTextMarginTop
},
children: helperText
}
)
] })
}
);
}
);
Autocomplete.displayName = "Autocomplete";
const AutocompleteInput = React.forwardRef(
({ className, clearable = true, clearIcon, dropdownIcon, loadingIcon, renderValue, ...props }, _ref) => {
const {
open,
setOpen,
value,
onChange,
inputValue,
setInputValue,
multiple,
disabled,
loading,
searchable,
variant,
size,
status,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
placeholderColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
iconColor,
clearIconColor,
dropdownIconColor,
loadingIconColor
} = useAutocomplete();
const inputRef = useRef(null);
const [isFocused, setIsFocused] = useState(false);
const handleClear = (e) => {
var _a;
e.stopPropagation();
onChange(multiple ? [] : null);
setInputValue("");
(_a = inputRef.current) == null ? void 0 : _a.focus();
};
const handleInputClick = () => {
if (!disabled) {
setOpen(!open);
}
};
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleFocus = (e) => {
setIsFocused(true);
if (props.onFocus) {
props.onFocus(e);
}
};
const handleBlur = (e) => {
setIsFocused(false);
if (props.onBlur) {
props.onBlur(e);
}
};
const displayValue = useMemo(() => {
if (inputValue && searchable) return inputValue;
if (!value) return "";
if (renderValue) {
return renderValue(value);
}
if (Array.isArray(value)) {
return value.map((v) => v.label).join(", ");
}
return value.label;
}, [value, inputValue, searchable, renderValue]);
const baseStyles = "w-full pr-10 transition-all focus:outline-none";
const variants = {
default: cn(
"border rounded-md bg-white",
status === "error" ? "border-red-500 focus:ring-red-500" : "border-gray-300 focus:ring-primary-600",
"focus:ring-2 focus:ring-offset-2"
),
filled: cn(
"border-0 rounded-md",
status === "error" ? "bg-red-50 focus:bg-red-100" : "bg-gray-100 focus:bg-gray-200"
),
outlined: cn(
"border-2 rounded-md bg-transparent",
status === "error" ? "border-red-500 focus:border-red-600" : "border-gray-300 focus:border-primary-600"
),
underlined: cn(
"border-0 border-b-2 rounded-none bg-transparent px-0",
status === "error" ? "border-red-500 focus:border-red-600" : "border-gray-300 focus:border-primary-600"
)
};
const sizes = {
sm: "h-8 px-3 text-sm",
md: "h-10 px-4 text-base",
lg: "h-12 px-5 text-lg"
};
const defaultDropdownIcon = /* @__PURE__ */ jsx(
"svg",
{
className: cn("h-4 w-4 transition-transform", open && "rotate-180"),
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
}
);
const defaultClearIcon = /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}
) });
const defaultLoadingIcon = /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] });
const customStyles = {};
if (borderWidth) customStyles.borderWidth = borderWidth;
if (borderColor) customStyles.borderColor = borderColor;
if (borderStyle) customStyles.borderStyle = borderStyle;
if (borderRadius) customStyles.borderRadius = borderRadius;
if (fontSize) customStyles.fontSize = fontSize;
if (fontWeight) customStyles.fontWeight = fontWeight;
if (fontFamily) customStyles.fontFamily = fontFamily;
if (textColor) customStyles.color = textColor;
if (backgroundColor) customStyles.backgroundColor = backgroundColor;
if (boxShadow) customStyles.boxShadow = boxShadow;
if (padding) customStyles.padding = padding;
if (paddingX) {
customStyles.paddingLeft = paddingX;
customStyles.paddingRight = paddingX;
}
if (paddingY) {
customStyles.paddingTop = paddingY;
customStyles.paddingBottom = paddingY;
}
const focusStyles = {
...focusBorderColor && { borderColor: focusBorderColor },
...focusBackgroundColor && { backgroundColor: focusBackgroundColor },
...focusBoxShadow && { boxShadow: focusBoxShadow },
...focusRingColor && focusRingWidth && {
boxShadow: `0 0 0 ${focusRingWidth} ${focusRingColor}${focusRingOffset ? `, 0 0 0 calc(${focusRingWidth} + ${focusRingOffset}) transparent` : ""}`
}
};
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsx(
"input",
{
ref: inputRef,
type: "text",
className: cn(
baseStyles,
variants[variant || "default"],
sizes[size || "md"],
disabled && "cursor-not-allowed opacity-50",
className
),
style: {
...customStyles,
...isFocused && focusStyles,
...placeholderColor && {
"--placeholder-color": placeholderColor
}
},
value: displayValue,
onChange: handleInputChange,
onClick: handleInputClick,
onFocus: handleFocus,
onBlur: handleBlur,
disabled,
readOnly: !searchable,
...props
}
),
/* @__PURE__ */ jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 gap-2", children: [
loading && /* @__PURE__ */ jsx("span", { className: "text-gray-400", style: { color: loadingIconColor || iconColor }, children: loadingIcon || defaultLoadingIcon }),
clearable && value && !loading && /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: "text-gray-400 hover:text-gray-600",
style: { color: clearIconColor || iconColor },
onClick: handleClear,
disabled,
children: clearIcon || defaultClearIcon
}
),
/* @__PURE__ */ jsx(
"span",
{
className: "text-gray-400 pointer-events-none",
style: { color: dropdownIconColor || iconColor },
children: dropdownIcon || defaultDropdownIcon
}
)
] })
] });
}
);
AutocompleteInput.displayName = "AutocompleteInput";
const AutocompleteList = React.forwardRef(
({ className, maxHeight = 300, offset = 4, children, ...props }, _ref) => {
const {
open,
filteredOptions,
loading,
transition,
transitionDuration,
placement,
emptyMessage,
loadingMessage,
// Dropdown style props
dropdownBackgroundColor,
dropdownBorderColor,
dropdownBorderWidth,
dropdownBorderRadius,
dropdownBoxShadow,
dropdownZIndex
} = useAutocomplete();
const listRef = useRef(null);
if (!open) return null;
const baseStyles = cn(
"absolute z-50 w-full mt-1 bg-white rounded-md shadow-lg border border-gray-200 overflow-auto",
placement === "top" && "bottom-full mb-1 mt-0"
);
const transitions = {
none: "",
fade: cn(
"transition-opacity",
`duration-${transitionDuration}`,
open ? "opacity-100" : "opacity-0"
),
slide: cn(
"transition-all",
`duration-${transitionDuration}`,
open ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"
),
scale: cn(
"transition-all origin-top",
`duration-${transitionDuration}`,
open ? "scale-100 opacity-100" : "scale-95 opacity-0"
),
flip: cn(
"transition-all origin-top",
`duration-${transitionDuration}`,
open ? "rotateX-0 opacity-100" : "rotateX-90 opacity-0"
)
};
const customDropdownStyles = {
maxHeight,
marginTop: offset
};
if (dropdownBackgroundColor) customDropdownStyles.backgroundColor = dropdownBackgroundColor;
if (dropdownBorderColor) customDropdownStyles.borderColor = dropdownBorderColor;
if (dropdownBorderWidth) customDropdownStyles.borderWidth = dropdownBorderWidth;
if (dropdownBorderRadius) customDropdownStyles.borderRadius = dropdownBorderRadius;
if (dropdownBoxShadow) customDropdownStyles.boxShadow = dropdownBoxShadow;
if (dropdownZIndex) customDropdownStyles.zIndex = dropdownZIndex;
return /* @__PURE__ */ jsx(
"ul",
{
ref: listRef,
className: cn(baseStyles, transitions[transition || "scale"], className),
style: customDropdownStyles,
...props,
children: loading ? /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-center text-gray-500", children: loadingMessage }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-center text-gray-500", children: emptyMessage }) : children || filteredOptions.map((option, index) => /* @__PURE__ */ jsx(AutocompleteItem, { option, index }, option.value))
}
);
}
);
AutocompleteList.displayName = "AutocompleteList";
const AutocompleteItem = React.forwardRef(
({ className, option, index, ...props }, ref) => {
const {
value,
onChange,
multiple,
highlightedIndex,
setHighlightedIndex,
size,
renderOption,
creatable,
onCreate,
setOpen,
setInputValue,
// Item style props
itemPadding,
itemHoverBackgroundColor,
itemSelectedBackgroundColor,
itemSelectedTextColor,
itemHighlightedBackgroundColor,
itemDisabledOpacity
} = useAutocomplete();
const isSelected = useMemo(() => {
if (!value) return false;
if (Array.isArray(value)) {
return value.some((v) => v.value === option.value);
}
return value.value === option.value;
}, [value, option]);
const isHighlighted = highlightedIndex === index;
const handleClick = () => {
if (option.disabled) return;
if (option.__isCreate && creatable && onCreate) {
onCreate(option.value);
setInputValue("");
if (!multiple) {
setOpen(false);
}
return;
}
if (multiple && Array.isArray(value)) {
if (isSelected) {
onChange(value.filter((v) => v.value !== option.value));
} else {
onChange([...value, option]);
}
} else {
onChange(option);
setInputValue("");
}
};
const handleMouseEnter = () => {
setHighlightedIndex(index);
};
const baseStyles = cn(
"cursor-pointer transition-colors",
option.disabled && "cursor-not-allowed opacity-50"
);
const sizes = {
sm: "px-3 py-1.5 text-sm",
md: "px-4 py-2 text-base",
lg: "px-5 py-3 text-lg"
};
const stateStyles = cn(
isHighlighted && !option.disabled && "bg-gray-100",
isSelected && "bg-primary-50 text-primary-700",
!option.disabled && "hover:bg-gray-100"
);
const customItemStyles = {};
if (itemPadding) customItemStyles.padding = itemPadding;
if (option.disabled && itemDisabledOpacity) customItemStyles.opacity = itemDisabledOpacity;
if (isSelected) {
if (itemSelectedBackgroundColor)
customItemStyles.backgroundColor = itemSelectedBackgroundColor;
if (itemSelectedTextColor) customItemStyles.color = itemSelectedTextColor;
} else if (isHighlighted && !option.disabled && itemHighlightedBackgroundColor) {
customItemStyles.backgroundColor = itemHighlightedBackgroundColor;
}
if (renderOption) {
return /* @__PURE__ */ jsx(
"li",
{
ref,
className: cn(baseStyles, sizes[size || "md"], stateStyles, className),
style: customItemStyles,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseOver: (e) => {
if (!option.disabled && itemHoverBackgroundColor && !isSelected && !isHighlighted) {
e.currentTarget.style.backgroundColor = itemHoverBackgroundColor;
}
},
onMouseOut: (e) => {
if (!option.disabled && itemHoverBackgroundColor && !isSelected && !isHighlighted) {
e.currentTarget.style.backgroundColor = "";
}
},
...props,
children: renderOption(option, isSelected)
}
);
}
return /* @__PURE__ */ jsx(
"li",
{
ref,
className: cn(baseStyles, sizes[size || "md"], stateStyles, className),
style: customItemStyles,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseOver: (e) => {
if (!option.disabled && itemHoverBackgroundColor && !isSelected && !isHighlighted) {
e.currentTarget.style.backgroundColor = itemHoverBackgroundColor;
}
},
onMouseOut: (e) => {
if (!option.disabled && itemHoverBackgroundColor && !isSelected && !isHighlighted) {
e.currentTarget.style.backgroundColor = "";
}
},
...props,
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
option.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: option.icon }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("div", { children: option.label }),
option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 mt-0.5", children: option.description })
] })
] }),
isSelected && /* @__PURE__ */ jsx("svg", { className: "h-4 w-4 text-primary-600", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
clipRule: "evenodd"
}
) })
] })
}
);
}
);
AutocompleteItem.displayName = "AutocompleteItem";
const AutocompleteEmpty = React.forwardRef(
({ className, children, ...props }, ref) => {
const { size, emptyMessage } = useAutocomplete();
const sizes = {
sm: "px-3 py-6 text-sm",
md: "px-4 py-8 text-base",
lg: "px-5 py-10 text-lg"
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("text-center text-gray-500", sizes[size || "md"], className),
...props,
children: children || emptyMessage
}
);
}
);
AutocompleteEmpty.displayName = "AutocompleteEmpty";
const Avatar = forwardRef(
({ className, src, alt, size = "md", ...props }, ref) => {
const sizeClasses = {
sm: "h-8 w-8",
md: "h-10 w-10",
lg: "h-12 w-12"
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"relative flex shrink-0 overflow-hidden rounded-full",
sizeClasses[size],
className
),
...props,
children: src ? /* @__PURE__ */ jsx("img", { className: "aspect-square h-full w-full", src, alt }) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-medium", children: alt == null ? void 0 : alt.charAt(0) }) })
}
);
}
);
Avatar.displayName = "Avatar";
const BadgeContext = createContext(null);
const useBadgeContext = () => {
const context = useContext(BadgeContext);
if (!context) {
throw new Error("Badge components must be used within a Badge component");
}
return context;
};
const BadgeIcon = memo(
forwardRef(
({ className, style, color, size, onClick, children, ...props }, ref) => {
const { isDisabled, onIconClick } = useBadgeContext();
return /* @__PURE__ */ jsx(
"span",
{
ref,
className: cn(
"inline-flex items-center justify-center",
isDisabled && "opacity-50 cursor-not-allowed",
!isDisabled && onClick && "cursor-pointer hover:opacity-80",
className
),
style: {
color,
fontSize: size,
...style
},
onClick: isDisabled ? void 0 : onClick || onIconClick,
...props,
children
}
);
}
)
);
BadgeIcon.displayName = "BadgeIcon";
const BadgeCloseButton = memo(
forwardRef(
({ className, style, color, size, onClick, "aria-label": ariaLabel, ...props }, ref) => {
const { isDisabled, onClose } = useBadgeContext();
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
className: cn(
"inline-flex items-center justify-center rounded-full transition-opacity",
isDisabled && "opacity-50 cursor-not-allowed",
!isDisabled && "hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-offset-2",
className
),
style: {
color,
fontSize: size,
...style
},
onClick: isDisabled ? void 0 : onClick || onClose,
"aria-label": ariaLabel || "Remove badge",
disabled: isDisabled,
...props,
children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx(
"path",
{
d: "M9 3L3 9M3 3L9 9",
stroke: "currentColor",
strokeWidth: "1.5",
strokeLinecap: "round",
strokeLinejoin: "round"
}
) })
}
);
}
)
);
BadgeCloseButton.displayName = "BadgeCloseButton";
const BadgeLabel = memo(
forwardRef(({ className, style, children, ...props }, ref) => {
return /* @__PURE__ */ jsx("span", { ref, className: cn("font-medium", className), style, ...props, children });
})
);
BadgeLabel.displayName = "BadgeLabel";
const BadgeHelperText = memo(
forwardRef(
({ className, style, children, ...props }, ref) => {
return /* @__PURE__ */ jsx("span", { ref, className: cn("text-xs opacity-75", className), style, ...props, children });
}
)
);
BadgeHelperText.displayName = "BadgeHelperText";
const Badge = forwardRef(
({
// Core props
variant = "default",
size = "md",
status = "default",
disabled = false,
loading = false,
required = false,
// Content props
label,
helperText,
icon,
closeButton = false,
onClose,
onIconClick,
// Loading props
loadingSpinner,
// Styling props
className,
style,
// Border styling
borderWidth,
borderColor,
borderStyle,
borderRadius,
// Typography
fontSize,
fontWeight,
fontFamily,
textColor,
// Colors
backgroundColor,
color,
// Focus styles
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
// Shadows
boxShadow,
focusBoxShadow,
// Spacing
padding,
paddingX,
paddingY,
margin,
marginX,
marginY,
// Transitions
transitionDuration = "150ms",
transitionProperty = "all",
transitionTimingFunction = "ease-in-out",
// Accessibility
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-invalid": ariaInvalid,
"aria-required": ariaRequired,
// Event handlers
onClick,
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
onKeyDown,
children,
...props
}, ref) => {
const baseStyles = "inline-flex items-center justify-center font-medium transition-all";
const variants = {
default: "bg-gray-100 text-gray-800 border border-gray-200",
filled: "bg-blue-500 text-white",
outlined: "bg-transparent border border-blue-500 text-blue-600",
ghost: "bg-transparent text-blue-600 hover:bg-blue-50",
solid: "bg-blue-600 text-white",
gradient: "bg-gradient-to-r from-purple-500 to-pink-500 text-white",
glass: "bg-white/20 backdrop-blur-sm border border-white/30 text-gray-800",
neon: "bg-cyan-400 text-cyan-900 shadow-lg shadow-cyan-400/50"
};
const sizes = {
xs: "px-1.5 py-0.5 text-xs",
sm: "px-2 py-0.5 text-xs",
md: "px-2.5 py-1 text-sm",
lg: "px-3 py-1.5 text-sm",
xl: "px-4 py-2 text-base",
"2xl": "px-5 py-2.5 text-lg"
};
const statusStyles = {
default: "",
success: "bg-green-100 text-green-800 border-green-200",
warning: "bg-yellow-100 text-yellow-800 border-yellow-200",
error: "bg-red-100 text-red-800 border-red-200",
info: "bg-blue-100 text-blue-800 border-blue-200",
primary: "bg-indigo-100 text-indigo-800 border-indigo-200",
secondary: "bg-gray-100 text-gray-600 border-gray-200"
};
const disabledStyles = disabled ? "opacity-50 cursor-not-allowed" : "";
const loadingStyles = loading ? "opacity-75 cursor-wait" : "";
const requiredStyles = required ? "ring-1 ring-red-500" : "";
const customStyles = {
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
color: textColor || color,
backgroundColor,
boxShadow,
padding,
paddingLeft: paddingX,
paddingRight: paddingX,
paddingTop: paddingY,
paddingBottom: paddingY,
margin,
marginLeft: marginX,
marginRight: marginX,
marginTop: marginY,
marginBottom: marginY,
transitionDuration,
transitionProperty,
transitionTimingFunction,
...style
};
const focusStyles = {
"--tw-ring-color": focusRingColor,
"--tw-ring-width": focusRingWidth,
"--tw-ring-offset-width": focusRingOffset,
"--tw-ring-offset-color": focusBorderColor,
"--tw-ring-offset-shadow": focusBoxShadow
};
const contextValue = {
variant,
size,
status,
isDisabled: disabled,
isLoading: loading,
isRequired: required,
hasIcon: !!icon,
hasCloseButton: closeButton,
onClose,
onIconClick
};
return /* @__PURE__ */ jsx(BadgeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
baseStyles,
variants[variant],
sizes[size],
statusStyles[status],
disabledStyles,
loadingStyles,
requiredStyles,
"focus:outline-none focus:ring-2 focus:ring-offset-2",
className
),
style: {
...customStyles,
...focusStyles
},
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-invalid": ariaInvalid,
"aria-required": ariaRequired,
onClick: disabled ? void 0 : onClick,
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
onKeyDown,
...props,
children: [
loading && /* @__PURE__ */ jsx("span", { className: "mr-1", children: loadingSpinner || /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-3 w-3", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4",
fill: "none"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] }) }),
icon && !loading && /* @__PURE__ */ jsx(BadgeIcon, { className: "mr-1", children: icon }),
label && /* @__PURE__ */ jsx(BadgeLabel, { children: label }),
children,
closeButton && !loading && /* @__PURE__ */ jsx(BadgeCloseButton, { className: "ml-1" }),
helperText && /* @__PURE__ */ jsx(BadgeHelperText, { className: "ml-2", children: helperText })
]
}
) });
}
);
Badge.displayName = "Badge";
const BadgeWithSubComponents = Badge;
BadgeWithSubComponents.Icon = BadgeIcon;
BadgeWithSubComponents.CloseButton = BadgeCloseButton;
BadgeWithSubComponents.Label = BadgeLabel;
BadgeWithSubComponents.HelperText = BadgeHelperText;
const BreadcrumbContext = createContext(void 0);
const useBreadcrumb = () => {
const context = useContext(BreadcrumbContext);
if (!context) {
throw new Error("useBreadcrumb must be used within a Breadcrumb");
}
return context;
};
const Breadcrumb = React.forwardRef(
({
className,
items = [],
value,
onChange,
onNavigate,
variant = "default",
size = "md",
separator,
maxItems,
itemsBeforeCollapse = 1,
itemsAfterCollapse = 1,
renderCollapsed,
renderItem,
loading = false,
disabled = false,
transition = "none",
transitionDuration = 200,
// Style props
backgroundColor,
textColor,
fontSize,
fontWeight,
fontFamily,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding,
paddingX,
paddingY,
gap,
itemBackgroundColor,
itemTextColor,
itemHoverBackgroundColor,
itemHoverTextColor,
itemActiveBackgroundColor,
itemActiveTextColor,
itemDisabledOpacity,
itemPadding,
itemPaddingX,
itemPaddingY,
itemBorderRadius,
separatorColor,
separatorSize,
separatorMargin,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor,
boxShadow,
itemBoxShadow,
itemHoverBoxShadow,
iconSize,
iconColor,
iconMargin,
children,
style,
...props
}, ref) => {
const [collapsedOpen, setCollapsedOpen] = useState(false);
const processedItems = useMemo(() => {
if (!maxItems || items.length <= maxItems) {
return items;
}
const itemsBefore = items.slice(0, itemsBeforeCollapse);
const itemsAfter = items.slice(items.length - itemsAfterCollapse);
const hiddenItems = items.slice(itemsBeforeCollapse, items.length - itemsAfterCollapse);
return [...itemsBefore, { __collapsed: true, items: hiddenItems }, ...itemsAfter];
}, [items, maxItems, itemsBeforeCollapse, itemsAfterCollapse]);
const baseStyles = "flex items-center flex-wrap";
const variants = {
default: "",
solid: "bg-gray-100 rounded-lg p-2",
bordered: "border border-gray-200 rounded-lg p-2",
underline: "border-b border-gray-200 pb-2",
pills: "gap-2"
};
const sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
const defaultSeparator = separator || /* @__PURE__ */ jsx(
"span",
{
className: "mx-2",
style: {
color: separatorColor || "#6b7280",
margin: separatorMargin || "0 0.5rem",
fontSize: separatorSize || "1rem"
},
children: ">"
}
);
const customStyles = {
backgroundColor: backgroundColor || (variant === "solid" ? "#f3f4f6" : variant === "bordered" || variant === "underline" ? "transparent" : void 0),
color: textColor || "#374151",
fontSize: fontSize || (size === "sm" ? "0.875rem" : size === "lg" ? "1.125rem" : "1rem"),
fontWeight: fontWeight || "400",
fontFamily,
borderWidth: borderWidth || (variant === "bordered" ? "1px" : variant === "underline" ? "0 0 1px 0" : "0"),
borderColor: borderColor || "#e5e7eb",
borderStyle: borderStyle || "solid",
borderRadius: borderRadius || (variant === "solid" || variant === "bordered" ? "0.5rem" : "0"),
padding: padding || (paddingX || paddingY ? void 0 : variant === "solid" || variant === "bordered" ? "0.5rem" : variant === "underline" ? "0 0 0.5rem 0" : "0"),
paddingLeft: paddingX,
paddingRight: paddingX,
paddingTop: paddingY,
paddingBottom: paddingY,
gap: gap || "0",
boxShadow: boxShadow || (variant === "solid" || variant === "bordered" ? "0 1px 2px 0 rgba(0, 0, 0, 0.05)" : "none"),
...style
};
return /* @__PURE__ */ jsx(
BreadcrumbContext.Provider,
{
value: {
items,
value: value ?? null,
onChange,
onNavigate,
variant,
size,
separator: defaultSeparator,
disabled,
loading,
transition,
transitionDuration,
renderItem,
itemBackgroundColor,
itemTextColor,
itemHoverBackgroundColor,
itemHoverTextColor,
itemActiveBackgroundColor,
itemActiveTextColor,
itemDisabledOpacity,
itemPadding,
itemPaddingX,
itemPaddingY,
itemBorderRadius,
separatorColor,
separatorSize,
separatorMargin,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor,
itemBoxShadow,
itemHoverBoxShadow,
iconSize,
iconColor,
iconMargin
},
children: /* @__PURE__ */ jsx(
"nav",
{
ref,
"aria-label": "Breadcrumb",
className: cn(
baseStyles,
variants[variant],
sizes[size],
disabled && "opacity-50 cursor-not-allowed",
loading && "animate-pulse",
className
),
style: customStyles,
...props,
children: children || /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap", style: { gap }, children: processedItems.map((item, index) => {
if (item.__collapsed) {
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
index > 0 && defaultSeparator,
/* @__PURE__ */ jsx(
BreadcrumbItem,
{
index,
item: {
label: "...",
__collapsed: true,
items: item.items
},
isLast: false,
renderCollapsed,
collapsedOpen,
setCollapsedOpen
}
)
] }, `collapsed-${index}`);
}
return /* @__PURE__ */ jsxs(
React.Fragment,
{
children: [
index > 0 && defaultSeparator,
/* @__PURE__ */ jsx(
BreadcrumbItem,
{
index,
item,
isLast: index === processedItems.length - 1
}
)
]
},
`item-${index}-${item.label || "collapsed"}`
);
}) })
}
)
}
);
}
);
Breadcrumb.displayName = "Breadcrumb";
const BreadcrumbItem = React.forwardRef(
({
className,
index,
item,
isLast,
renderCollapsed,
collapsedOpen,
setCollapsedOpen,
style,
...props
}, ref) => {
const {
value,
onChange,
onNavigate,
variant,
size,
disabled: breadcrumbDisabled,
transition,
transitionDuration,
renderItem,
itemBackgroundColor,
itemTextColor,
itemHoverBackgroundColor,
itemHoverTextColor,
itemActiveBackgroundColor,
itemActiveTextColor,
itemDisabledOpacity,
itemPadding,
itemPaddingX,
itemPaddingY,
itemBorderRadius,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor,
itemBoxShadow,
itemHoverBoxShadow,
iconSize,
iconColor,
iconMargin
} = useBreadcrumb();
const [isHovered, setIsHovered] = useState(false);
const isActive = value === index;
const isDisabled = item.disabled || breadcrumbDisabled;
const handleClick = useCallback(
(e) => {
if (isDisabled || isLast) {
e.preventDefault();
return;
}
if (item.__collapsed && setCollapsedOpen) {
e.preventDefault();
setCollapsedOpen(!collapsedOpen);
return;
}
if (onChange) {
onChange(index, item);
}
if (onNavigate) {
onNavigate(index, item);
}
},
[isDisabled, isLast, item, onChange, onNavigate, index, setCollapsedOpen, collapsedOpen]
);
if (renderItem && !item.__collapsed) {
const customElement = renderItem(item, index, isLast);
return /* @__PURE__ */ jsx("li", { ref, className, ...props, children: customElement });
}
const baseStyles = cn(
"inline-flex items-center transition-all cursor-pointer",
"focus:outline-none focus-visible:ring",
isLast && "font-medium cursor-default",
isDisabled && "cursor-not-allowed"
);
const variantStyles = {
default: "",
solid: "",
bordered: "",
underline: "",
pills: cn("rounded-full px-3 py-1", !isLast && !isDisabled && "hover:bg-gray-100")
};
const sizeStyles = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
const transitions = {
none: "",
fade: `transition-opacity duration-${transitionDuration}`,
slide: `transition-transform duration-${transitionDuration}`,
scale: `transition-transform duration-${transitionDuration} hover:scale-105`
};
const customStyles = {
backgroundColor: isActive ? itemActiveBackgroundColor || (variant === "pills" ? "#3b82f6" : "transparent") : isHovered ? itemHoverBackgroundColor || (variant === "pills" ? "#f3f4f6" : "transparent") : itemBackgroundColor || "transparent",
color: isActive ? itemActiveTextColor || (variant === "pills" ? "#ffffff" : "#3b82f6") : isHovered ? itemHoverTextColor || "#1f2937" : itemTextColor || "#4b5563",
opacity: isDisabled ? itemDisabledOpacity || "0.5" : void 0,
padding: itemPadding || (itemPaddingX || itemPaddingY ? void 0 : variant === "pills" ? "0.25rem 0.75rem" : "0.25rem 0.5rem"),
paddingLeft: itemPaddingX,
paddingRight: itemPaddingX,
paddingTop: itemPaddingY,
paddingBottom: itemPaddingY,
borderRadius: itemBorderRadius || (variant === "pills" ? "9999px" : "0.375rem"),
boxShadow: isHovered ? itemHoverBoxShadow || "none" : itemBoxShadow || "none",
...style
};
const focusStyles = {
"--tw-ring-color": focusRingColor || "#3b82f6",
"--tw-ring-offset-width": focusRingOffset || "2px",
"--tw-ring-offset-color": focusRingOffsetColor || "#ffffff",
"--tw-ring-width": focusRingWidth || "2px"
};
if (item.__collapsed && renderCollapsed) {
return /* @__PURE__ */ jsxs("li", { ref, className: "relative", ...props, children: [
/* @__PURE__ */ jsx(
"button",
{
className: cn(
baseStyles,
variantStyles[variant || "default"],
sizeStyles[size || "md"],
className
),
onClick: handleClick,
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
style: { ...customStyles, ...focusStyles },
"aria-expanded": collapsedOpen,
"aria-label": "Show hidden items",
children: "..."
}
),
collapsedOpen && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 mt-2 z-10", children: renderCollapsed(item.items || []) })
] });
}
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
item.icon && /* @__PURE__ */ jsx(
"span",
{
className: "flex-shrink-0",
style: {
fontSize: iconSize || (size === "sm" ? "1rem" : size === "lg" ? "1.25rem" : "1.125rem"),
color: iconColor || "currentColor",
marginRight: iconMargin || "0.5rem"
},
children: item.icon
}
),
/* @__PURE__ */ jsx("span", { children: item.label })
] });
return /* @__PURE__ */ jsx("li", { ref, ...props, children: item.href && !isLast && !isDisabled ? /* @__PURE__ */ jsx(
"a",
{
href: item.href,
className: cn(
baseStyles,
variantStyles[variant || "default"],
sizeStyles[size || "md"],
transitions[transition || "none"],
className
),
onClick: handleClick,
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
style: { ...customStyles, ...focusStyles },
"aria-current": isLast ? "page" : void 0,
children: content
}
) : /* @__PURE__ */ jsx(
"span",
{
className: cn(
baseStyles,
variantStyles[variant || "default"],
sizeStyles[size || "md"],
transitions[transition || "none"],
className
),
onClick: !isLast && !isDisabled ? handleClick : void 0,
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
style: { ...customStyles, ...focusStyles },
role: !isLast && !isDisabled ? "button" : void 0,
tabIndex: !isLast && !isDisabled ? 0 : void 0,
"aria-current": isLast ? "page" : void 0,
children: content
}
) });
}
);
BreadcrumbItem.displayName = "BreadcrumbItem";
const BreadcrumbSeparator = React.forwardRef(
({ className, children, ...props }, ref) => {
const { separator, separatorColor, separatorSize, separatorMargin } = useBreadcrumb();
const customStyles = {
color: separatorColor || "#6b7280",
fontSize: separatorSize || "1rem",
margin: separatorMargin || "0 0.5rem"
};
return /* @__PURE__ */ jsx(
"span",
{
ref,
className: cn("mx-2", className),
style: customStyles,
"aria-hidden": "true",
...props,
children: children || separator
}
);
}
);
BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
const BreadcrumbLink = React.forwardRef(
({ className, item, index, isLast = false, style, ...props }, ref) => {
const {
value,
onChange,
onNavigate,
size,
disabled,
itemTextColor,
itemHoverTextColor,
itemActiveTextColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor
} = useBreadcrumb();
const [isHovered, setIsHovered] = useState(false);
const isActive = value === index;
const isDisabled = item.disabled || disabled;
const handleClick = useCallback(
(e) => {
if (isDisabled || isLast) {
e.preventDefault();
return;
}
if (!item.href) {
e.preventDefault();
}
if (onChange) {
onChange(index, item);
}
if (onNavigate) {
onNavigate(index, item);
}
},
[isDisabled, isLast, item, onChange, onNavigate, index]
);
const sizeStyles = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
const customStyles = {
color: isActive ? itemActiveTextColor || "#3b82f6" : isHovered ? itemHoverTextColor || "#1f2937" : itemTextColor || "#4b5563",
opacity: isDisabled ? "0.5" : void 0,
"--tw-ring-color": focusRingColor || "#3b82f6",
"--tw-ring-offset-width": focusRingOffset || "2px",
"--tw-ring-offset-color": focusRingOffsetColor || "#ffffff",
"--tw-ring-width": focusRingWidth || "2px",
...style
};
return /* @__PURE__ */ jsxs(
"a",
{
ref,
href: item.href || "#",
className: cn(
"inline-flex items-center transition-colors",
"focus:outline-none focus-visible:ring",
sizeStyles[size || "md"],
isLast && "font-medium pointer-events-none",
isDisabled && "cursor-not-allowed",
!isLast && !isDisabled && "hover:text-primary-600",
className
),
onClick: handleClick,
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
style: customStyles,
"aria-current": isLast ? "page" : void 0,
"aria-disabled": isDisabled,
...props,
children: [
item.icon && /* @__PURE__ */ jsx("span", { className: "mr-2 flex-shrink-0", children: item.icon }),
item.label
]
}
);
}
);
BreadcrumbLink.displayName = "BreadcrumbLink";
const ButtonContext = createContext(null);
const useButtonContext = () => {
const context = useContext(ButtonContext);
if (!context) {
throw new Error("Button compound components must be used within a Button component");
}
return context;
};
const ButtonIcon = memo(
forwardRef(
({ children, className, ...props }, ref) => {
const context = useButtonContext();
const iconStyles = cn(
"inline-flex items-center justify-center",
context.size === "xs" && "w-3 h-3",
context.size === "sm" && "w-4 h-4",
context.size === "md" && "w-4 h-4",
context.size === "lg" && "w-5 h-5",
context.size === "xl" && "w-6 h-6",
context.size === "2xl" && "w-7 h-7",
context.iconPosition === "left" && "mr-2",
context.iconPosition === "right" && "ml-2",
className
);
return /* @__PURE__ */ jsx("span", { ref, className: iconStyles, ...props, children });
}
)
);
ButtonIcon.displayName = "ButtonIcon";
const ButtonLabel = memo(
forwardRef(
({ children, className, ...props }, ref) => {
const context = useButtonContext();
const labelStyles = cn(
"inline-flex items-center",
context.isLoading && "opacity-0",
className
);
return /* @__PURE__ */ jsx("span", { ref, className: labelStyles, ...props, children });
}
)
);
ButtonLabel.displayName = "ButtonLabel";
const ButtonSpinner = memo(
forwardRef(({ className, ...props }, ref) => {
const context = useButtonContext();
if (!context.isLoading) return null;
const spinnerStyles = cn(
"absolute inset-0 flex items-center justify-center",
"animate-spin",
context.size === "xs" && "w-3 h-3",
context.size === "sm" && "w-4 h-4",
context.size === "md" && "w-4 h-4",
context.size === "lg" && "w-5 h-5",
context.size === "xl" && "w-6 h-6",
context.size === "2xl" && "w-7 h-7",
className
);
return /* @__PURE__ */ jsx("div", { ref, className: spinnerStyles, ...props, children: /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-full w-full", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] }) });
})
);
ButtonSpinner.displayName = "ButtonSpinner";
const ButtonBase = memo(
forwardRef(
({
// Core props
variant = "default",
size = "md",
status = "default",
disabled = false,
loading = false,
required = false,
interactive = true,
animated = false,
animation = "pulse",
transition = "colors",
transitionDuration = "150ms",
// Content props
children,
label,
icon,
iconPosition = "left",
loadingText,
ariaLabel,
// Form props
type = "button",
value,
name,
form,
// Styling props
className,
style = {},
// Border styling
borderWidth,
borderColor,
borderStyle,
borderRadius,
// Typography
fontSize,
fontWeight,
fontFamily,
textColor,
textAlign,
// Colors
backgroundColor,
color,
hoverBackgroundColor,
hoverTextColor,
activeBackgroundColor,
activeTextColor,
// Transform and hover effects
scale,
hoverScale,
activeScale,
opacity,
hoverOpacity,
activeOpacity,
transform,
hoverTransform,
activeTransform,
// Focus styles
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
focusTextColor,
// Shadows
boxShadow,
focusBoxShadow,
hoverBoxShadow,
activeBoxShadow,
// Spacing
padding,
paddingX,
paddingY,
paddingTop,
paddingRight,
paddingBottom,
paddingLeft,
margin,
marginX,
marginY,
marginTop,
marginRight,
marginBottom,
marginLeft,
// Layout
width,
height,
minWidth,
minHeight,
maxWidth,
maxHeight,
flex,
flexGrow,
flexShrink,
justifyContent,
alignItems,
gap,
// Display
display,
position,
zIndex,
// Event handlers
onClick,
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
onKeyDown,
onKeyUp,
// Rest of props
...props
}, ref) => {
const [isPressed, setIsPressed] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const [isFocused, setIsFocused] = useState(false);
const isDisabled = disabled || loading;
const hasIcon = Boolean(icon);
const contextValue = {
variant,
size,
status,
isDisabled,
isLoading: loading,
isRequired: required,
hasIcon,
iconPosition,
onClick
};
const baseStyles = cn(
"relative inline-flex items-center justify-center font-medium transition-all",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
"disabled:pointer-events-none disabled:opacity-50",
"select-none cursor-pointer",
interactive && "hover:scale-105 active:scale-95",
animated && animation === "pulse" && "animate-pulse",
animated && animation === "bounce" && "animate-bounce",
animated && animation === "shake" && "animate-shake",
animated && animation === "glow" && "animate-glow"
);
const baseVariantStyles = {
default: cn(
"bg-white border border-gray-300 text-gray-700",
"hover:bg-gray-50 hover:border-gray-400",
"focus-visible:ring-gray-500",
"active:bg-gray-100"
),
filled: "text-white",
// Base filled style, colors come from status
outlined: "border-2 bg-transparent",
// Base outlined style, colors come from status
ghost: "bg-transparent border-transparent",
// Base ghost style, colors come from status
solid: "border-0 shadow-md",
// Base solid style, colors come from status
gradient: "border-0 bg-gradient-to-r text-white shadow-lg",
// Base gradient style, colors come from status
glass: "backdrop-blur-md bg-opacity-20 border border-opacity-30",
// Base glass style, colors come from status
neon: "border-2 bg-transparent shadow-lg",
// Base neon style, colors come from status
link: cn(
"bg-transparent border-transparent p-0 h-auto text-left underline-offset-4",
"hover:underline focus-visible:ring-2 focus-visible:ring-offset-2"
)
};
const statusVariantStyles = {
default: {
primary: "",
secondary: "",
success: "",
warning: "",
error: "",
info: "",
default: ""
},
filled: {
primary: "bg-blue-600 hover:bg-blue-700 focus-visible:ring-blue-500",
secondary: "bg-gray-600 hover:bg-gray-700 focus-visible:ring-gray-500",
success: "bg-green-600 hover:bg-green-700 focus-visible:ring-green-500",
warning: "bg-yellow-600 hover:bg-yellow-700 focus-visible:ring-yellow-500",
error: "bg-red-600 hover:bg-red-700 focus-visible:ring-red-500",
info: "bg-cyan-600 hover:bg-cyan-700 focus-visible:ring-cyan-500",
default: "bg-gray-600 hover:bg-gray-700 focus-visible:ring-gray-500"
},
outlined: {
primary: "border-blue-600 text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-500",
secondary: "border-gray-600 text-gray-600 hover:bg-gray-50 focus-visible:ring-gray-500",
success: "border-green-600 text-green-600 hover:bg-green-50 focus-visible:ring-green-500",
warning: "border-yellow-600 text-yellow-600 hover:bg-yellow-50 focus-visible:ring-yellow-500",
error: "border-red-600 text-red-600 hover:bg-red-50 focus-visible:ring-red-500",
info: "border-cyan-600 text-cyan-600 hover:bg-cyan-50 focus-visible:ring-cyan-500",
default: "border-gray-600 text-gray-600 hover:bg-gray-50 focus-visible:ring-gray-500"
},
ghost: {
primary: "text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-500",
secondary: "text-gray-600 hover:bg-gray-50 focus-visible:ring-gray-500",
success: "text-green-600 hover:bg-green-50 focus-visible:ring-green-500",
warning: "text-yellow-600 hover:bg-yellow-50 focus-visible:ring-yellow-500",
error: "text-red-600 hover:bg-red-50 focus-visible:ring-red-500",
info: "text-cyan-600 hover:bg-cyan-50 focus-visible:ring-cyan-500",
default: "text-gray-600 hover:bg-gray-50 focus-visible:ring-gray-500"
},
solid: {
primary: "bg-blue-700 text-white hover:bg-blue-800 focus-visible:ring-blue-600",
secondary: "bg-gray-700 text-white hover:bg-gray-800 focus-visible:ring-gray-600",
success: "bg-green-700 text-white hover:bg-green-800 focus-visible:ring-green-600",
warning: "bg-yellow-700 text-white hover:bg-yellow-800 focus-visible:ring-yellow-600",
error: "bg-red-700 text-white hover:bg-red-800 focus-visible:ring-red-600",
info: "bg-cyan-700 text-white hover:bg-cyan-800 focus-visible:ring-cyan-600",
default: "bg-gray-700 text-white hover:bg-gray-800 focus-visible:ring-gray-600"
},
gradient: {
primary: "from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 focus-visible:ring-blue-500",
secondary: "from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 focus-visible:ring-gray-500",
success: "from-green-500 to-emerald-600 hover:from-green-600 hover:to-emerald-700 focus-visible:ring-green-500",
warning: "from-yellow-500 to-orange-600 hover:from-yellow-600 hover:to-orange-700 focus-visible:ring-yellow-500",
error: "from-red-500 to-pink-600 hover:from-red-600 hover:to-pink-700 focus-visible:ring-red-500",
info: "from-cyan-500 to-blue-600 hover:from-cyan-600 hover:to-blue-700 focus-visible:ring-cyan-500",
default: "from-gray-500 to-gray-600 hover:from-gray-600 hover:to-gray-700 focus-visible:ring-gray-500"
},
glass: {
primary: "bg-blue-500 border-blue-300 text-blue-900 hover:bg-opacity-30 focus-visible:ring-blue-500",
secondary: "bg-gray-500 border-gray-300 text-gray-900 hover:bg-opacity-30 focus-visible:ring-gray-500",
success: "bg-green-500 border-green-300 text-green-900 hover:bg-opacity-30 focus-visible:ring-green-500",
warning: "bg-yellow-500 border-yellow-300 text-yellow-900 hover:bg-opacity-30 focus-visible:ring-yellow-500",
error: "bg-red-500 border-red-300 text-red-900 hover:bg-opacity-30 focus-visible:ring-red-500",
info: "bg-cyan-500 border-cyan-300 text-cyan-900 hover:bg-opacity-30 focus-visible:ring-cyan-500",
default: "bg-gray-500 border-gray-300 text-gray-900 hover:bg-opacity-30 focus-visible:ring-gray-500"
},
neon: {
primary: "border-blue-400 text-blue-400 shadow-blue-400/50 hover:shadow-blue-400/75 hover:text-blue-300 focus-visible:ring-blue-400",
secondary: "border-gray-400 text-gray-400 shadow-gray-400/50 hover:shadow-gray-400/75 hover:text-gray-300 focus-visible:ring-gray-400",
success: "border-green-400 text-green-400 shadow-green-400/50 hover:shadow-green-400/75 hover:text-green-300 focus-visible:ring-green-400",
warning: "border-yellow-400 text-yellow-400 shadow-yellow-400/50 hover:shadow-yellow-400/75 hover:text-yellow-300 focus-visible:ring-yellow-400",
error: "border-red-400 text-red-400 shadow-red-400/50 hover:shadow-red-400/75 hover:text-red-300 focus-visible:ring-red-400",
info: "border-cyan-400 text-cyan-400 shadow-cyan-400/50 hover:shadow-cyan-400/75 hover:text-cyan-300 focus-visible:ring-cyan-400",
default: "border-gray-400 text-gray-400 shadow-gray-400/50 hover:shadow-gray-400/75 hover:text-gray-300 focus-visible:ring-gray-400"
},
link: {
primary: "text-blue-600 hover:text-blue-700 focus-visible:ring-blue-500",
secondary: "text-gray-600 hover:text-gray-700 focus-visible:ring-gray-500",
success: "text-green-600 hover:text-green-700 focus-visible:ring-green-500",
warning: "text-yellow-600 hover:text-yellow-700 focus-visible:ring-yellow-500",
error: "text-red-600 hover:text-red-700 focus-visible:ring-red-500",
info: "text-cyan-600 hover:text-cyan-700 focus-visible:ring-cyan-500",
default: "text-gray-600 hover:text-gray-700 focus-visible:ring-gray-500"
}
};
const getVariantStyles = () => {
var _a, _b;
const baseStyle = baseVariantStyles[variant] || baseVariantStyles.default;
const statusStyle = ((_a = statusVariantStyles[variant]) == null ? void 0 : _a[status]) || ((_b = statusVariantStyles[variant]) == null ? void 0 : _b.default) || "";
return cn(baseStyle, statusStyle);
};
const variantStyles = getVariantStyles();
const sizeStyles = {
xs: variant === "link" ? "text-xs" : "h-6 px-2 text-xs rounded",
sm: variant === "link" ? "text-sm" : "h-8 px-3 text-sm rounded-md",
md: variant === "link" ? "text-base" : "h-10 px-4 text-sm rounded-md",
lg: variant === "link" ? "text-lg" : "h-12 px-6 text-base rounded-lg",
xl: variant === "link" ? "text-xl" : "h-14 px-8 text-lg rounded-lg",
"2xl": variant === "link" ? "text-2xl" : "h-16 px-10 text-xl rounded-xl"
};
const transitionStyles = {
none: "",
colors: "transition-colors",
transform: "transition-transform",
glow: "transition-shadow",
slide: "transition-all",
bounce: "transition-all ease-bounce"
};
const customStyles = {
...style,
// Border
...borderWidth && {
borderWidth: typeof borderWidth === "number" ? `${borderWidth}px` : borderWidth
},
...borderColor && { borderColor },
...borderStyle && { borderStyle },
...borderRadius && {
borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius
},
// Typography
...fontSize && { fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize },
...fontWeight && { fontWeight },
...fontFamily && { fontFamily },
...textColor && { color: textColor },
...textAlign && { textAlign },
// Colors
...backgroundColor && { backgroundColor },
...color && { color },
// Transform
...scale && { transform: `scale(${scale})` },
...opacity && { opacity },
...transform && { transform },
// Focus styles
...focusRingColor && { "--focus-ring-color": focusRingColor },
...focusRingWidth && {
"--focus-ring-width": typeof focusRingWidth === "number" ? `${focusRingWidth}px` : focusRingWidth
},
...focusRingOffset && {
"--focus-ring-offset": typeof focusRingOffset === "number" ? `${focusRingOffset}px` : focusRingOffset
},
// Shadows
...boxShadow && { boxShadow },
// Spacing
...padding && { padding: typeof padding === "number" ? `${padding}px` : padding },
...paddingX && {
paddingLeft: typeof paddingX === "number" ? `${paddingX}px` : paddingX,
paddingRight: typeof paddingX === "number" ? `${paddingX}px` : paddingX
},
...paddingY && {
paddingTop: typeof paddingY === "number" ? `${paddingY}px` : paddingY,
paddingBottom: typeof paddingY === "number" ? `${paddingY}px` : paddingY
},
...paddingTop && {
paddingTop: typeof paddingTop === "number" ? `${paddingTop}px` : paddingTop
},
...paddingRight && {
paddingRight: typeof paddingRight === "number" ? `${paddingRight}px` : paddingRight
},
...paddingBottom && {
paddingBottom: typeof paddingBottom === "number" ? `${paddingBottom}px` : paddingBottom
},
...paddingLeft && {
paddingLeft: typeof paddingLeft === "number" ? `${paddingLeft}px` : paddingLeft
},
...margin && { margin: typeof margin === "number" ? `${margin}px` : margin },
...marginX && {
marginLeft: typeof marginX === "number" ? `${marginX}px` : marginX,
marginRight: typeof marginX === "number" ? `${marginX}px` : marginX
},
...marginY && {
marginTop: typeof marginY === "number" ? `${marginY}px` : marginY,
marginBottom: typeof marginY === "number" ? `${marginY}px` : marginY
},
...marginTop && {
marginTop: typeof marginTop === "number" ? `${marginTop}px` : marginTop
},
...marginRight && {
marginRight: typeof marginRight === "number" ? `${marginRight}px` : marginRight
},
...marginBottom && {
marginBottom: typeof marginBottom === "number" ? `${marginBottom}px` : marginBottom
},
...marginLeft && {
marginLeft: typeof marginLeft === "number" ? `${marginLeft}px` : marginLeft
},
// Layout
...width && { width: typeof width === "number" ? `${width}px` : width },
...height && { height: typeof height === "number" ? `${height}px` : height },
...minWidth && { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth },
...minHeight && {
minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight
},
...maxWidth && { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth },
...maxHeight && {
maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
},
...flex && { flex },
...flexGrow && { flexGrow },
...flexShrink && { flexShrink },
...justifyContent && { justifyContent },
...alignItems && { alignItems },
...gap && { gap: typeof gap === "number" ? `${gap}px` : gap },
// Display
...display && { display },
...position && { position },
...zIndex && { zIndex },
// Transition
...transitionDuration && { transitionDuration },
// Hover states
...isHovered && hoverBackgroundColor && { backgroundColor: hoverBackgroundColor },
...isHovered && hoverTextColor && { color: hoverTextColor },
...isHovered && hoverScale && { transform: `scale(${hoverScale})` },
...isHovered && hoverOpacity && { opacity: hoverOpacity },
...isHovered && hoverTransform && { transform: hoverTransform },
...isHovered && hoverBoxShadow && { boxShadow: hoverBoxShadow },
// Active states
...isPressed && activeBackgroundColor && { backgroundColor: activeBackgroundColor },
...isPressed && activeTextColor && { color: activeTextColor },
...isPressed && activeScale && { transform: `scale(${activeScale})` },
...isPressed && activeOpacity && { opacity: activeOpacity },
...isPressed && activeTransform && { transform: activeTransform },
...isPressed && activeBoxShadow && { boxShadow: activeBoxShadow },
// Focus states
...isFocused && focusBackgroundColor && { backgroundColor: focusBackgroundColor },
...isFocused && focusTextColor && { color: focusTextColor },
...isFocused && focusBorderColor && { borderColor: focusBorderColor },
...isFocused && focusBoxShadow && { boxShadow: focusBoxShadow }
};
const handleClick = (event) => {
if (isDisabled) return;
onClick == null ? void 0 : onClick(event);
};
const handleMouseEnter = (event) => {
if (isDisabled) return;
setIsHovered(true);
onMouseEnter == null ? void 0 : onMouseEnter(event);
};
const handleMouseLeave = (event) => {
if (isDisabled) return;
setIsHovered(false);
setIsPressed(false);
onMouseLeave == null ? void 0 : onMouseLeave(event);
};
const handleMouseDown = () => {
if (isDisabled) return;
setIsPressed(true);
};
const handleMouseUp = () => {
if (isDisabled) return;
setIsPressed(false);
};
const handleFocus = (event) => {
if (isDisabled) return;
setIsFocused(true);
onFocus == null ? void 0 : onFocus(event);
};
const handleBlur = (event) => {
if (isDisabled) return;
setIsFocused(false);
setIsPressed(false);
onBlur == null ? void 0 : onBlur(event);
};
const handleKeyDown = (event) => {
if (isDisabled) return;
if (event.key === " " || event.key === "Enter") {
setIsPressed(true);
}
onKeyDown == null ? void 0 : onKeyDown(event);
};
const handleKeyUp = (event) => {
if (isDisabled) return;
if (event.key === " " || event.key === "Enter") {
setIsPressed(false);
}
onKeyUp == null ? void 0 : onKeyUp(event);
};
const renderContent = () => {
if (children) {
return children;
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
icon && iconPosition === "left" && /* @__PURE__ */ jsx(ButtonIcon, { children: icon }),
(label || loadingText) && /* @__PURE__ */ jsx(ButtonLabel, { children: loading && loadingText ? loadingText : label }),
icon && iconPosition === "right" && /* @__PURE__ */ jsx(ButtonIcon, { children: icon }),
loading && /* @__PURE__ */ jsx(ButtonSpinner, {})
] });
};
return /* @__PURE__ */ jsx(ButtonContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
"button",
{
ref,
type,
disabled: isDisabled,
value,
name,
form,
className: cn(
baseStyles,
variantStyles,
sizeStyles[size],
transitionStyles[transition],
className
),
style: customStyles,
"aria-label": ariaLabel || props["aria-label"],
"aria-required": required || props["aria-required"],
"aria-disabled": isDisabled || props["aria-disabled"],
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onMouseDown: handleMouseDown,
onMouseUp: handleMouseUp,
onFocus: handleFocus,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
...props,
children: renderContent()
}
) });
}
)
);
ButtonBase.displayName = "Button";
const Button$1 = ButtonBase;
Button$1.Icon = ButtonIcon;
Button$1.Label = ButtonLabel;
Button$1.Spinner = ButtonSpinner;
const CardContext = createContext(null);
const useCard = () => {
const context = useContext(CardContext);
if (!context) {
throw new Error("useCard must be used within a Card component");
}
return context;
};
const Card = React.forwardRef(
({
className,
children,
// Controlled/uncontrolled props
isSelected,
defaultSelected = false,
onSelectChange,
isExpanded,
defaultExpanded = false,
onExpandChange,
isLoading,
defaultLoading = false,
onLoadingChange,
isDisabled,
defaultDisabled = false,
onDisabledChange,
isFeatured,
defaultFeatured = false,
onFeaturedChange,
// Features
selectable = false,
expandable = false,
showCheckbox = false,
checkboxPosition = "top-left",
// Styling
variant = "default",
size = "md",
status = "default",
// Transitions
transition = "smooth",
transitionDuration = 200,
hoverElevation = false,
// Content
title,
subtitle,
description,
metadata,
helperText,
// Media
media,
// Badges
badges,
// Actions
actions,
primaryAction,
secondaryActions,
// Empty/Loading states
emptyMessage = "No content available",
emptyIllustration,
emptyAction,
loadingMessage = "Loading...",
skeletonLines = 3,
// Custom render functions
renderHeader,
renderMedia,
renderBody,
renderFooter,
renderOverlay,
renderActions: _renderActions,
renderEmpty,
renderLoading,
// Icons
expandIcon,
collapseIcon,
selectedIcon,
featuredIcon,
loadingIcon,
// Event handlers
onClick,
onDoubleClick,
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
onActionClick,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
titleTextColor,
bodyTextColor,
metaTextColor,
placeholderColor,
backgroundColor,
hoverBackgroundColor,
selectedBackgroundColor,
disabledBackgroundColor,
featuredBackgroundColor,
overlayColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
hoverBoxShadow,
focusBoxShadow,
featuredBoxShadow,
padding,
paddingX,
paddingY,
headerPadding,
bodyPadding,
footerPadding,
actionGap,
mediaGap,
// Accessibility
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-expanded": ariaExpanded,
"aria-selected": ariaSelected,
role = "article",
...props
}, ref) => {
const [internalSelected, setInternalSelected] = useState(defaultSelected);
const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
const [internalLoading, setInternalLoading] = useState(defaultLoading);
const [internalDisabled, setInternalDisabled] = useState(defaultDisabled);
const [internalFeatured, setInternalFeatured] = useState(defaultFeatured);
const isSelectedControlled = isSelected !== void 0;
const isExpandedControlled = isExpanded !== void 0;
const isLoadingControlled = isLoading !== void 0;
const isDisabledControlled = isDisabled !== void 0;
const isFeaturedControlled = isFeatured !== void 0;
const currentSelected = isSelectedControlled ? isSelected : internalSelected;
const currentExpanded = isExpandedControlled ? isExpanded : internalExpanded;
const currentLoading = isLoadingControlled ? isLoading : internalLoading;
const currentDisabled = isDisabledControlled ? isDisabled : internalDisabled;
const currentFeatured = isFeaturedControlled ? isFeatured : internalFeatured;
const handleSelectChange = useCallback(
(selected) => {
if (!isSelectedControlled) {
setInternalSelected(selected);
}
onSelectChange == null ? void 0 : onSelectChange(selected);
},
[isSelectedControlled, onSelectChange]
);
const handleExpandChange = useCallback(
(expanded) => {
if (!isExpandedControlled) {
setInternalExpanded(expanded);
}
onExpandChange == null ? void 0 : onExpandChange(expanded);
},
[isExpandedControlled, onExpandChange]
);
const handleLoadingChange = useCallback(
(loading) => {
if (!isLoadingControlled) {
setInternalLoading(loading);
}
onLoadingChange == null ? void 0 : onLoadingChange(loading);
},
[isLoadingControlled, onLoadingChange]
);
const handleDisabledChange = useCallback(
(disabled) => {
if (!isDisabledControlled) {
setInternalDisabled(disabled);
}
onDisabledChange == null ? void 0 : onDisabledChange(disabled);
},
[isDisabledControlled, onDisabledChange]
);
const handleFeaturedChange = useCallback(
(featured) => {
if (!isFeaturedControlled) {
setInternalFeatured(featured);
}
onFeaturedChange == null ? void 0 : onFeaturedChange(featured);
},
[isFeaturedControlled, onFeaturedChange]
);
const handleClick = useCallback(() => {
if (currentDisabled) return;
if (selectable && !expandable) {
handleSelectChange(!currentSelected);
} else if (expandable && !selectable) {
handleExpandChange(!currentExpanded);
}
onClick == null ? void 0 : onClick();
}, [
currentDisabled,
selectable,
expandable,
currentSelected,
currentExpanded,
handleSelectChange,
handleExpandChange,
onClick
]);
const handleKeyDown = useCallback(
(event) => {
if (currentDisabled) return;
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
handleClick();
}
if (expandable && (event.key === "ArrowDown" || event.key === "ArrowUp")) {
event.preventDefault();
handleExpandChange(event.key === "ArrowDown");
}
},
[currentDisabled, handleClick, expandable, handleExpandChange]
);
const contextValue = useMemo(
() => ({
isSelected: currentSelected,
setIsSelected: handleSelectChange,
isExpanded: currentExpanded,
setIsExpanded: handleExpandChange,
isLoading: currentLoading,
setIsLoading: handleLoadingChange,
isDisabled: currentDisabled,
setIsDisabled: handleDisabledChange,
isFeatured: currentFeatured,
setIsFeatured: handleFeaturedChange,
variant,
size,
status,
transition,
transitionDuration,
onSelectChange,
onExpandChange,
onFeaturedChange,
onClick,
onDoubleClick,
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
titleTextColor,
bodyTextColor,
metaTextColor,
placeholderColor,
backgroundColor,
hoverBackgroundColor,
selectedBackgroundColor,
disabledBackgroundColor,
featuredBackgroundColor,
overlayColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
hoverBoxShadow,
focusBoxShadow,
featuredBoxShadow,
padding,
paddingX,
paddingY,
headerPadding,
bodyPadding,
footerPadding,
actionGap,
mediaGap
}),
[
currentSelected,
handleSelectChange,
currentExpanded,
handleExpandChange,
currentLoading,
handleLoadingChange,
currentDisabled,
handleDisabledChange,
currentFeatured,
handleFeaturedChange,
variant,
size,
status,
transition,
transitionDuration,
onSelectChange,
onExpandChange,
onFeaturedChange,
onClick,
onDoubleClick,
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
titleTextColor,
bodyTextColor,
metaTextColor,
placeholderColor,
backgroundColor,
hoverBackgroundColor,
selectedBackgroundColor,
disabledBackgroundColor,
featuredBackgroundColor,
overlayColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
hoverBoxShadow,
focusBoxShadow,
featuredBoxShadow,
padding,
paddingX,
paddingY,
headerPadding,
bodyPadding,
footerPadding,
actionGap,
mediaGap
]
);
const baseStyles = "relative focus:outline-none transition-all";
const variants = {
default: "rounded-lg border border-gray-200 bg-white shadow-sm",
elevated: "rounded-lg bg-white shadow-lg border-0",
outlined: "rounded-lg border-2 border-gray-300 bg-white shadow-none",
flat: "rounded-lg bg-gray-50 border-0 shadow-none",
glass: "rounded-lg bg-white/80 backdrop-blur-sm border border-gray-200/50 shadow-lg",
"card-with-shadow": "rounded-xl bg-white shadow-xl border border-gray-100",
interactive: "rounded-lg bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow cursor-pointer",
bordered: "rounded-lg bg-white border-2 border-gray-400 shadow-none",
ghost: "rounded-lg bg-transparent border-0 shadow-none"
};
const sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
const statusStyles = {
default: "",
success: "border-green-200 bg-green-50",
warning: "border-yellow-200 bg-yellow-50",
error: "border-red-200 bg-red-50",
info: "border-blue-200 bg-blue-50",
featured: "border-purple-200 bg-purple-50 ring-2 ring-purple-200"
};
const stateStyles = cn(
currentSelected && "ring-2 ring-blue-500",
currentDisabled && "opacity-50 cursor-not-allowed",
currentFeatured && "ring-2 ring-purple-500",
hoverElevation && "hover:shadow-lg",
(selectable || expandable) && !currentDisabled && "cursor-pointer"
);
const transitionStyles = {
none: "",
slide: `transition-all duration-${transitionDuration} ease-in-out`,
scale: `transition-transform duration-${transitionDuration} hover:scale-105`,
fade: `transition-opacity duration-${transitionDuration}`,
bounce: `transition-all duration-${transitionDuration} ease-bounce`,
smooth: `transition-all duration-${transitionDuration} ease-out`
};
const customStyles = {};
if (borderWidth) customStyles.borderWidth = borderWidth;
if (borderColor) customStyles.borderColor = borderColor;
if (borderStyle) customStyles.borderStyle = borderStyle;
if (borderRadius) customStyles.borderRadius = borderRadius;
if (fontSize) customStyles.fontSize = fontSize;
if (fontWeight) customStyles.fontWeight = fontWeight;
if (fontFamily) customStyles.fontFamily = fontFamily;
if (backgroundColor) customStyles.backgroundColor = backgroundColor;
if (boxShadow) customStyles.boxShadow = boxShadow;
if (padding) customStyles.padding = padding;
if (paddingX) {
customStyles.paddingLeft = paddingX;
customStyles.paddingRight = paddingX;
}
if (paddingY) {
customStyles.paddingTop = paddingY;
customStyles.paddingBottom = paddingY;
}
if (currentSelected && selectedBackgroundColor) {
customStyles.backgroundColor = selectedBackgroundColor;
}
if (currentDisabled && disabledBackgroundColor) {
customStyles.backgroundColor = disabledBackgroundColor;
}
if (currentFeatured && featuredBackgroundColor) {
customStyles.backgroundColor = featuredBackgroundColor;
}
if (currentFeatured && featuredBoxShadow) {
customStyles.boxShadow = featuredBoxShadow;
}
const hasContent = !!(title || subtitle || description || metadata || children || media || badges || actions || primaryAction || secondaryActions);
return /* @__PURE__ */ jsx(CardContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
baseStyles,
variants[variant],
sizes[size],
statusStyles[status],
stateStyles,
transitionStyles[transition],
className
),
style: customStyles,
onClick: handleClick,
onDoubleClick,
onMouseEnter,
onMouseLeave,
onFocus,
onBlur,
onKeyDown: handleKeyDown,
tabIndex: currentDisabled ? -1 : selectable || expandable ? 0 : void 0,
role,
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-expanded": ariaExpanded ?? (expandable ? currentExpanded : void 0),
"aria-selected": ariaSelected ?? (selectable ? currentSelected : void 0),
"aria-disabled": currentDisabled,
"data-testid": "card",
...props,
children: [
currentLoading && renderLoading ? renderLoading() : currentLoading ? /* @__PURE__ */ jsx(
CardLoading,
{
message: loadingMessage,
skeletonLines,
icon: loadingIcon
}
) : null,
!currentLoading && !hasContent && renderEmpty ? renderEmpty() : !currentLoading && !hasContent ? /* @__PURE__ */ jsx(
CardEmpty,
{
message: emptyMessage,
illustration: emptyIllustration,
action: emptyAction,
onActionClick
}
) : null,
!currentLoading && hasContent && /* @__PURE__ */ jsxs(Fragment, { children: [
showCheckbox && selectable && /* @__PURE__ */ jsx(CardSelectCheckbox, { position: checkboxPosition, icon: selectedIcon }),
badges && badges.length > 0 && /* @__PURE__ */ jsx("div", { className: "absolute top-2 left-2 flex flex-wrap gap-1 z-10", children: badges.map((badge) => /* @__PURE__ */ jsx(CardBadge, { ...badge }, badge.id)) }),
/* @__PURE__ */ jsxs(
"div",
{
className: cn(
showCheckbox && selectable && (checkboxPosition === "top-left" || checkboxPosition === "top-right" ? "pt-8" : checkboxPosition === "bottom-left" || checkboxPosition === "bottom-right" ? "pb-8" : "")
),
children: [
renderHeader ? renderHeader(currentSelected, currentExpanded, currentDisabled, currentFeatured) : title || subtitle || expandable ? /* @__PURE__ */ jsx(
CardHeader,
{
title,
subtitle,
expandable,
expandIcon,
collapseIcon
}
) : null,
renderMedia ? renderMedia(currentSelected, currentExpanded, currentDisabled, currentFeatured) : media ? /* @__PURE__ */ jsx(CardMedia, { ...media }) : null,
renderBody ? renderBody(currentSelected, currentExpanded, currentDisabled, currentFeatured) : description || metadata || children ? /* @__PURE__ */ jsx(CardBody, { description, metadata, children }) : null,
expandable && currentExpanded && /* @__PURE__ */ jsx(CardExpandablePanel, { children: renderBody ? renderBody(
currentSelected,
currentExpanded,
currentDisabled,
currentFeatured
) : children }),
renderFooter ? renderFooter(currentSelected, currentExpanded, currentDisabled, currentFeatured) : actions || primaryAction || secondaryActions || helperText ? /* @__PURE__ */ jsx(
CardFooter,
{
actions,
primaryAction,
secondaryActions,
helperText,
onActionClick
}
) : null,
renderOverlay && /* @__PURE__ */ jsx(CardOverlay, { children: renderOverlay(
currentSelected,
currentExpanded,
currentDisabled,
currentFeatured
) }),
currentFeatured && featuredIcon && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 text-purple-500", children: featuredIcon })
]
}
)
] })
]
}
) });
}
);
Card.displayName = "Card";
const CardHeader = React.forwardRef(
({ className, title, subtitle, expandable, expandIcon, collapseIcon, children, ...props }, ref) => {
const { isExpanded, setIsExpanded, size, headerPadding, titleTextColor } = useCard();
const handleExpandToggle = (e) => {
e.stopPropagation();
setIsExpanded(!isExpanded);
};
const sizeStyles = {
sm: "px-4 py-3",
md: "px-6 py-4",
lg: "px-8 py-5"
};
const titleSizes = {
sm: "text-lg",
md: "text-xl",
lg: "text-2xl"
};
const customStyles = {};
if (headerPadding) customStyles.padding = headerPadding;
if (titleTextColor) customStyles.color = titleTextColor;
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(sizeStyles[size], "flex items-center justify-between", className),
style: customStyles,
...props,
children: [
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
title && /* @__PURE__ */ jsx("h3", { className: cn("font-semibold leading-tight truncate", titleSizes[size]), children: title }),
subtitle && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mt-1 truncate", children: subtitle }),
children
] }),
expandable && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handleExpandToggle,
className: "ml-3 p-1 rounded-full hover:bg-gray-100 transition-colors",
"aria-label": isExpanded ? "Collapse" : "Expand",
children: isExpanded ? collapseIcon || /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M5 15l7-7 7 7"
}
) }) : expandIcon || /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M19 9l-7 7-7-7"
}
) })
}
)
]
}
);
}
);
CardHeader.displayName = "CardHeader";
const CardMedia = React.forwardRef(
({
className,
type,
src,
alt,
aspectRatio = "16/9",
objectFit = "cover",
loading = "lazy",
poster,
controls = true,
autoplay = false,
muted = false,
loop = false,
...props
}, ref) => {
const { mediaGap } = useCard();
const customStyles = {
aspectRatio
};
if (mediaGap) customStyles.margin = mediaGap;
const objectFitClass = {
cover: "object-cover",
contain: "object-contain",
fill: "object-fill",
none: "object-none",
"scale-down": "object-scale-down"
};
const renderMedia = () => {
switch (type) {
case "image":
return /* @__PURE__ */ jsx(
"img",
{
src,
alt,
loading,
className: cn("w-full h-full", objectFitClass[objectFit])
}
);
case "video":
return /* @__PURE__ */ jsx(
"video",
{
src,
poster,
controls,
autoPlay: autoplay,
muted,
loop,
className: cn("w-full h-full", objectFitClass[objectFit]),
children: "Your browser does not support the video tag."
}
);
case "audio":
return /* @__PURE__ */ jsx(
"audio",
{
src,
controls,
autoPlay: autoplay,
muted,
loop,
className: "w-full",
children: "Your browser does not support the audio tag."
}
);
case "iframe":
return /* @__PURE__ */ jsx("iframe", { src, title: alt, className: "w-full h-full border-0", allowFullScreen: true });
default:
return null;
}
};
return /* @__PURE__ */ jsx("div", { ref, className: cn("overflow-hidden", className), style: customStyles, ...props, children: renderMedia() });
}
);
CardMedia.displayName = "CardMedia";
const CardBody = React.forwardRef(
({ className, description, metadata, children, ...props }, ref) => {
const { size, bodyPadding, bodyTextColor, metaTextColor } = useCard();
const sizeStyles = {
sm: "px-4 py-3",
md: "px-6 py-4",
lg: "px-8 py-5"
};
const customStyles = {};
if (bodyPadding) customStyles.padding = bodyPadding;
if (bodyTextColor) customStyles.color = bodyTextColor;
return /* @__PURE__ */ jsxs("div", { ref, className: cn(sizeStyles[size], className), style: customStyles, ...props, children: [
description && /* @__PURE__ */ jsx("p", { className: "text-gray-700 leading-relaxed", children: description }),
metadata && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", style: { color: metaTextColor }, children: metadata }),
children
] });
}
);
CardBody.displayName = "CardBody";
const CardFooter = React.forwardRef(
({
className,
actions,
primaryAction,
secondaryActions,
helperText,
onActionClick,
children,
...props
}, ref) => {
const { size, footerPadding, actionGap } = useCard();
const sizeStyles = {
sm: "px-4 py-3",
md: "px-6 py-4",
lg: "px-8 py-5"
};
const customStyles = {};
if (footerPadding) customStyles.padding = footerPadding;
const allActions = [
...actions || [],
...primaryAction ? [primaryAction] : [],
...secondaryActions || []
];
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(sizeStyles[size], "border-t border-gray-100", className),
style: customStyles,
...props,
children: [
helperText && /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 mb-3", children: helperText }),
allActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap", style: { gap: actionGap }, children: allActions.map((action) => /* @__PURE__ */ jsx(CardActions, { action, onActionClick }, action.id)) }),
children
]
}
);
}
);
CardFooter.displayName = "CardFooter";
const CardActions = React.memo(({ action, onActionClick }) => {
const { isDisabled } = useCard();
const handleClick = () => {
var _a;
if (action.disabled || isDisabled || action.loading) return;
(_a = action.onClick) == null ? void 0 : _a.call(action);
onActionClick == null ? void 0 : onActionClick(action.id, action);
};
const variants = {
primary: "bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-300",
secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 disabled:bg-gray-50",
ghost: "bg-transparent text-gray-700 hover:bg-gray-100 disabled:text-gray-400",
danger: "bg-red-600 text-white hover:bg-red-700 disabled:bg-red-300"
};
return /* @__PURE__ */ jsxs(
"button",
{
type: "button",
onClick: handleClick,
disabled: action.disabled || isDisabled || action.loading,
className: cn(
"inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500",
variants[action.variant || "secondary"]
),
children: [
action.loading ? /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] }) : action.icon ? action.icon : null,
action.label
]
}
);
});
CardActions.displayName = "CardActions";
const CardBadge = React.memo(
({ label, variant = "default", icon, position = "top-right", color, backgroundColor }) => {
const variants = {
default: "bg-gray-100 text-gray-800",
primary: "bg-blue-100 text-blue-800",
secondary: "bg-gray-100 text-gray-800",
success: "bg-green-100 text-green-800",
warning: "bg-yellow-100 text-yellow-800",
error: "bg-red-100 text-red-800",
info: "bg-blue-100 text-blue-800"
};
const positions = {
"top-left": "top-2 left-2",
"top-right": "top-2 right-2",
"bottom-left": "bottom-2 left-2",
"bottom-right": "bottom-2 right-2"
};
const customStyles = {};
if (color) customStyles.color = color;
if (backgroundColor) customStyles.backgroundColor = backgroundColor;
return /* @__PURE__ */ jsxs(
"span",
{
className: cn(
"absolute z-10 inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-full",
variants[variant],
positions[position]
),
style: customStyles,
children: [
icon,
label
]
}
);
}
);
CardBadge.displayName = "CardBadge";
const CardSelectCheckbox = React.memo(
({ position = "top-left", icon }) => {
const { isSelected, setIsSelected, isDisabled } = useCard();
const handleToggle = (e) => {
e.stopPropagation();
if (!isDisabled) {
setIsSelected(!isSelected);
}
};
const positions = {
"top-left": "top-3 left-3",
"top-right": "top-3 right-3",
"bottom-left": "bottom-3 left-3",
"bottom-right": "bottom-3 right-3"
};
return /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handleToggle,
disabled: isDisabled,
className: cn(
"absolute z-10 w-5 h-5 rounded border-2 border-gray-300 bg-white flex items-center justify-center transition-all",
isSelected && "border-blue-500 bg-blue-500",
isDisabled && "opacity-50 cursor-not-allowed",
positions[position]
),
"aria-label": isSelected ? "Deselect card" : "Select card",
children: isSelected && (icon || /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
clipRule: "evenodd"
}
) }))
}
);
}
);
CardSelectCheckbox.displayName = "CardSelectCheckbox";
const CardOverlay = React.forwardRef(
({ className, children, ...props }, ref) => {
const { overlayColor } = useCard();
const customStyles = {};
if (overlayColor) customStyles.backgroundColor = overlayColor;
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"absolute inset-0 bg-black/50 flex items-center justify-center z-20",
className
),
style: customStyles,
...props,
children
}
);
}
);
CardOverlay.displayName = "CardOverlay";
const CardExpandablePanel = React.forwardRef(
({ className, children, ...props }, ref) => {
const { transition, transitionDuration, size, bodyPadding } = useCard();
const sizeStyles = {
sm: "px-4 py-3",
md: "px-6 py-4",
lg: "px-8 py-5"
};
const transitionStyles = {
none: "",
slide: `transition-all duration-${transitionDuration} ease-in-out`,
scale: `transition-transform duration-${transitionDuration}`,
fade: `transition-opacity duration-${transitionDuration}`,
bounce: `transition-all duration-${transitionDuration} ease-bounce`,
smooth: `transition-all duration-${transitionDuration} ease-out`
};
const customStyles = {};
if (bodyPadding) customStyles.padding = bodyPadding;
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"border-t border-gray-100 bg-gray-50",
sizeStyles[size],
transitionStyles[transition],
className
),
style: customStyles,
...props,
children
}
);
}
);
CardExpandablePanel.displayName = "CardExpandablePanel";
const CardLoading = React.memo(
({ message = "Loading...", skeletonLines = 3, icon }) => {
const { size } = useCard();
const sizeStyles = {
sm: "px-4 py-8",
md: "px-6 py-12",
lg: "px-8 py-16"
};
const defaultIcon = /* @__PURE__ */ jsxs("svg", { className: "w-6 h-6 animate-spin text-gray-400", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] });
return /* @__PURE__ */ jsxs(
"div",
{
className: cn("flex flex-col items-center justify-center text-center", sizeStyles[size]),
children: [
/* @__PURE__ */ jsx("div", { className: "mb-4", children: icon || defaultIcon }),
/* @__PURE__ */ jsx("p", { className: "text-gray-500 mb-4", children: message }),
/* @__PURE__ */ jsx("div", { className: "w-full max-w-xs space-y-2", children: Array.from({ length: skeletonLines }).map((_, index) => /* @__PURE__ */ jsx(
"div",
{
className: "h-4 bg-gray-200 rounded animate-pulse",
style: { width: `${80 + Math.random() * 20}%` }
},
index
)) })
]
}
);
}
);
CardLoading.displayName = "CardLoading";
const CardEmpty = React.memo(
({ message = "No content available", illustration, action, onActionClick }) => {
const { size } = useCard();
const sizeStyles = {
sm: "px-4 py-8",
md: "px-6 py-12",
lg: "px-8 py-16"
};
const defaultIllustration = /* @__PURE__ */ jsx(
"svg",
{
className: "w-16 h-16 text-gray-300",
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
}
)
}
);
return /* @__PURE__ */ jsxs(
"div",
{
className: cn("flex flex-col items-center justify-center text-center", sizeStyles[size]),
children: [
/* @__PURE__ */ jsx("div", { className: "mb-4", children: illustration || defaultIllustration }),
/* @__PURE__ */ jsx("p", { className: "text-gray-500 mb-4", children: message }),
action && /* @__PURE__ */ jsx(CardActions, { action, onActionClick })
]
}
);
}
);
CardEmpty.displayName = "CardEmpty";
const CardCompound = Card;
CardCompound.Header = CardHeader;
CardCompound.Media = CardMedia;
CardCompound.Body = CardBody;
CardCompound.Footer = CardFooter;
CardCompound.Actions = CardActions;
CardCompound.Badge = CardBadge;
CardCompound.SelectCheckbox = CardSelectCheckbox;
CardCompound.Overlay = CardOverlay;
CardCompound.ExpandablePanel = CardExpandablePanel;
CardCompound.Loading = CardLoading;
CardCompound.Empty = CardEmpty;
const CarouselContext = createContext(void 0);
const useCarousel = () => {
const context = useContext(CarouselContext);
if (!context) {
throw new Error("useCarousel must be used within a Carousel");
}
return context;
};
const SlideIndexContext = React.createContext(0);
const Carousel = React.forwardRef(
({
className,
variant = "default",
axis = "horizontal",
transitionType = "slide",
direction = "ltr",
loop = false,
autoplay = false,
autoplayInterval = 3e3,
duration = 500,
pauseOnHover = true,
pauseOnFocus = true,
keyboardNavigation = true,
touchEnabled = true,
swipeEnabled = true,
snap: _snap = true,
dragEnabled: _dragEnabled = false,
lazyLoad: _lazyLoad = false,
dynamicHeight: _dynamicHeight = false,
itemsPerSlide = 1,
responsive: _responsive,
currentIndex: controlledIndex,
onSlideChange,
imageMode = "cover",
// Size & Style
height,
width,
maxWidth,
aspectRatio,
gap = "0",
spacing,
padding,
margin,
borderRadius,
boxShadow,
backgroundColor,
borderColor,
borderWidth,
borderStyle,
// Component overrides
showIndicators = true,
showControls = true,
indicatorPosition = "bottom",
controlPosition = "center",
nextIcon,
prevIcon,
indicatorIcon,
// Slide styles
slideBackgroundColor,
slideBorderRadius,
slidePadding,
slideBoxShadow,
slideBorderColor,
slideBorderWidth,
slideBorderStyle,
// Control styles
controlBackgroundColor,
controlHoverBackgroundColor,
controlActiveBackgroundColor,
controlTextColor,
controlHoverTextColor,
controlActiveTextColor,
controlSize,
controlBorderRadius,
controlPadding,
controlBoxShadow,
controlBorderColor,
controlBorderWidth,
controlBorderStyle,
controlOpacity,
controlHoverOpacity,
// Indicator styles
indicatorBackgroundColor,
indicatorActiveBackgroundColor,
indicatorHoverBackgroundColor,
indicatorSize,
indicatorBorderRadius,
indicatorMargin,
indicatorBoxShadow,
indicatorBorderColor,
indicatorBorderWidth,
indicatorBorderStyle,
indicatorOpacity,
indicatorActiveOpacity,
// Focus styles
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor,
// Typography
fontSize,
fontWeight,
fontFamily,
textColor,
// Loading state
loading = false,
loadingMessage = "Loading...",
children,
style,
...props
}, ref) => {
const [uncontrolledIndex, setUncontrolledIndex] = useState(0);
const [isPaused, setIsPaused] = useState(false);
const containerRef = useRef(null);
const touchStartX = useRef(null);
const touchStartY = useRef(null);
const slides = React.Children.toArray(children).filter(
(child) => {
var _a;
return React.isValidElement(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === "CarouselSlide";
}
);
const totalSlides = slides.length;
const currentIndex = controlledIndex !== void 0 ? controlledIndex : uncontrolledIndex;
const goTo = useCallback(
(index) => {
let newIndex = index;
if (loop) {
if (index < 0) {
newIndex = totalSlides - 1;
} else if (index >= totalSlides) {
newIndex = 0;
}
} else {
newIndex = Math.max(0, Math.min(index, totalSlides - 1));
}
if (controlledIndex === void 0) {
setUncontrolledIndex(newIndex);
}
onSlideChange == null ? void 0 : onSlideChange(newIndex);
},
[loop, totalSlides, controlledIndex, onSlideChange]
);
const next = useCallback(() => {
goTo(currentIndex + 1);
}, [currentIndex, goTo]);
const prev = useCallback(() => {
goTo(currentIndex - 1);
}, [currentIndex, goTo]);
useEffect(() => {
if (autoplay && !isPaused && totalSlides > 1) {
const timer = setInterval(() => {
next();
}, autoplayInterval);
return () => clearInterval(timer);
}
}, [autoplay, isPaused, autoplayInterval, next, totalSlides]);
useEffect(() => {
if (!keyboardNavigation) return;
const handleKeyDown = (e) => {
if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
e.preventDefault();
prev();
} else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
e.preventDefault();
next();
}
};
const container = containerRef.current;
if (container) {
container.addEventListener("keydown", handleKeyDown);
return () => container.removeEventListener("keydown", handleKeyDown);
}
}, [keyboardNavigation, prev, next]);
const handleTouchStart = useCallback(
(e) => {
if (!touchEnabled || !swipeEnabled) return;
touchStartX.current = e.touches[0].clientX;
touchStartY.current = e.touches[0].clientY;
},
[touchEnabled, swipeEnabled]
);
const handleTouchMove = useCallback(
(e) => {
if (!touchEnabled || !swipeEnabled) return;
if (touchStartX.current === null || touchStartY.current === null) return;
const touchEndX = e.touches[0].clientX;
const touchEndY = e.touches[0].clientY;
const diffX = touchStartX.current - touchEndX;
const diffY = touchStartY.current - touchEndY;
if (Math.abs(diffX) > Math.abs(diffY)) {
if (axis === "horizontal") {
if (diffX > 50) {
next();
} else if (diffX < -50) {
prev();
}
}
} else {
if (axis === "vertical") {
if (diffY > 50) {
next();
} else if (diffY < -50) {
prev();
}
}
}
},
[touchEnabled, swipeEnabled, axis, next, prev]
);
const handleTouchEnd = useCallback(() => {
touchStartX.current = null;
touchStartY.current = null;
}, []);
const baseStyles = "relative w-full overflow-hidden";
const customStyles = {
height,
width,
maxWidth,
aspectRatio,
padding,
margin,
borderRadius,
boxShadow,
backgroundColor,
borderColor,
borderWidth,
borderStyle,
fontSize,
fontWeight,
fontFamily,
color: textColor,
...style
};
const contextValue = {
currentIndex,
totalSlides,
goTo,
next,
prev,
variant,
axis,
transitionType,
direction,
loop,
duration,
imageMode,
gap,
itemsPerSlide,
// Style props
slideBackgroundColor,
slideBorderRadius,
slidePadding,
slideBoxShadow,
slideBorderColor,
slideBorderWidth,
slideBorderStyle,
controlBackgroundColor,
controlHoverBackgroundColor,
controlActiveBackgroundColor,
controlTextColor,
controlHoverTextColor,
controlActiveTextColor,
controlSize,
controlBorderRadius,
controlPadding,
controlBoxShadow,
controlBorderColor,
controlBorderWidth,
controlBorderStyle,
controlOpacity,
controlHoverOpacity,
indicatorBackgroundColor,
indicatorActiveBackgroundColor,
indicatorHoverBackgroundColor,
indicatorSize,
indicatorBorderRadius,
indicatorMargin,
indicatorBoxShadow,
indicatorBorderColor,
indicatorBorderWidth,
indicatorBorderStyle,
indicatorOpacity,
indicatorActiveOpacity,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor,
fontSize,
fontWeight,
fontFamily,
textColor
};
return /* @__PURE__ */ jsx(CarouselContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, loading && "animate-pulse", className),
style: customStyles,
onMouseEnter: () => pauseOnHover && setIsPaused(true),
onMouseLeave: () => pauseOnHover && setIsPaused(false),
onFocus: () => pauseOnFocus && setIsPaused(true),
onBlur: () => pauseOnFocus && setIsPaused(false),
onTouchStart: handleTouchStart,
onTouchMove: handleTouchMove,
onTouchEnd: handleTouchEnd,
tabIndex: keyboardNavigation ? 0 : void 0,
role: "region",
"aria-roledescription": "carousel",
"aria-label": "Image carousel",
...props,
children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-gray-500", children: loadingMessage }) : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"div",
{
ref: containerRef,
className: "relative h-full w-full overflow-hidden",
style: { gap: spacing || gap },
children: React.Children.map(children, (child, index) => {
var _a;
if (React.isValidElement(child) && ((_a = child.type) == null ? void 0 : _a.displayName) === "CarouselSlide") {
return /* @__PURE__ */ jsx(SlideIndexContext.Provider, { value: index, children: child });
}
return child;
})
}
),
showControls && totalSlides > 1 && /* @__PURE__ */ jsxs(CarouselControls, { position: controlPosition, children: [
/* @__PURE__ */ jsx(CarouselPrev, { icon: prevIcon }),
/* @__PURE__ */ jsx(CarouselNext, { icon: nextIcon })
] }),
showIndicators && totalSlides > 1 && /* @__PURE__ */ jsx(CarouselIndicators, { position: indicatorPosition, icon: indicatorIcon })
] })
}
) });
}
);
Carousel.displayName = "Carousel";
const CarouselSlide = React.forwardRef(
({ className, children, style, ...props }, ref) => {
const {
currentIndex,
totalSlides,
variant,
axis,
transitionType,
duration,
imageMode,
slideBackgroundColor,
slideBorderRadius,
slidePadding,
slideBoxShadow,
slideBorderColor,
slideBorderWidth,
slideBorderStyle
} = useCarousel();
const slideIndex = React.useContext(SlideIndexContext);
const isActive = currentIndex === slideIndex;
const isPrev = currentIndex === slideIndex + 1 || currentIndex === 0 && slideIndex === totalSlides - 1;
const isNext = currentIndex === slideIndex - 1 || currentIndex === totalSlides - 1 && slideIndex === 0;
const baseStyles = "absolute inset-0 h-full w-full";
const getTransform = () => {
if (variant === "fade" || transitionType === "fade") {
return {};
}
if (variant === "slide" || transitionType === "slide") {
if (axis === "horizontal") {
if (isActive) return { transform: "translateX(0%)" };
if (isPrev) return { transform: "translateX(-100%)" };
if (isNext) return { transform: "translateX(100%)" };
return { transform: slideIndex < currentIndex ? "translateX(-100%)" : "translateX(100%)" };
} else {
if (isActive) return { transform: "translateY(0%)" };
if (isPrev) return { transform: "translateY(-100%)" };
if (isNext) return { transform: "translateY(100%)" };
return { transform: slideIndex < currentIndex ? "translateY(-100%)" : "translateY(100%)" };
}
}
if (variant === "zoom" || transitionType === "scale") {
if (isActive) return { transform: "scale(1)", opacity: 1 };
return { transform: "scale(0.9)", opacity: 0 };
}
if (variant === "stacked") {
const offset = (slideIndex - currentIndex) * 20;
const scale = isActive ? 1 : 0.9;
const zIndex = totalSlides - Math.abs(slideIndex - currentIndex);
return {
transform: `translateX(${offset}px) scale(${scale})`,
zIndex,
opacity: Math.abs(slideIndex - currentIndex) > 2 ? 0 : 1
};
}
if (variant === "coverflow") {
const rotateY = isActive ? 0 : isPrev ? -45 : isNext ? 45 : 0;
const translateZ = isActive ? 0 : -200;
const translateX = (slideIndex - currentIndex) * 100;
return {
transform: `translateX(${translateX}px) translateZ(${translateZ}px) rotateY(${rotateY}deg)`,
opacity: Math.abs(slideIndex - currentIndex) > 1 ? 0 : 1
};
}
return {};
};
const getOpacity = () => {
if (variant === "fade" || transitionType === "fade") {
return isActive ? 1 : 0;
}
return 1;
};
const customStyles = {
backgroundColor: slideBackgroundColor,
borderRadius: slideBorderRadius,
padding: slidePadding,
boxShadow: slideBoxShadow,
borderColor: slideBorderColor,
borderWidth: slideBorderWidth,
borderStyle: slideBorderStyle,
transition: `all ${duration}ms ease-in-out`,
opacity: getOpacity(),
...getTransform(),
...style
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, className),
style: customStyles,
"aria-hidden": !isActive,
...props,
children: React.Children.map(children, (child) => {
if (React.isValidElement(child) && child.type === "img") {
return React.cloneElement(child, {
style: {
width: "100%",
height: "100%",
objectFit: imageMode,
...child.props.style
}
});
}
return child;
})
}
);
}
);
CarouselSlide.displayName = "CarouselSlide";
const CarouselControls = React.forwardRef(
({ className, position = "center", children, style, ...props }, ref) => {
const positionStyles = {
inside: "absolute inset-x-4 top-1/2 -translate-y-1/2 flex justify-between z-10",
outside: "absolute -inset-x-12 top-1/2 -translate-y-1/2 flex justify-between z-10",
center: "absolute inset-x-0 top-1/2 -translate-y-1/2 flex justify-between px-4 z-10",
corners: "absolute inset-0 z-10"
};
return /* @__PURE__ */ jsx("div", { ref, className: cn(positionStyles[position], className), style, ...props, children });
}
);
CarouselControls.displayName = "CarouselControls";
const CarouselPrev = React.forwardRef(
({ className, icon, style, ...props }, ref) => {
const {
prev,
currentIndex,
loop,
controlBackgroundColor,
controlHoverBackgroundColor,
controlActiveBackgroundColor,
controlTextColor,
controlHoverTextColor,
controlActiveTextColor,
controlSize,
controlBorderRadius,
controlPadding,
controlBoxShadow,
controlBorderColor,
controlBorderWidth,
controlBorderStyle,
controlOpacity,
controlHoverOpacity,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor
} = useCarousel();
const [isHovered, setIsHovered] = useState(false);
const [isActive, setIsActive] = useState(false);
const disabled = !loop && currentIndex === 0;
const defaultIcon = /* @__PURE__ */ jsx(
"svg",
{
width: controlSize || "24",
height: controlSize || "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" })
}
);
const customStyles = {
backgroundColor: isActive ? controlActiveBackgroundColor || "#1f2937" : isHovered ? controlHoverBackgroundColor || "#374151" : controlBackgroundColor || "#4b5563",
color: isActive ? controlActiveTextColor || "#ffffff" : isHovered ? controlHoverTextColor || "#ffffff" : controlTextColor || "#ffffff",
borderRadius: controlBorderRadius || "50%",
padding: controlPadding || "0.5rem",
boxShadow: controlBoxShadow || "0 2px 4px rgba(0, 0, 0, 0.1)",
borderColor: controlBorderColor,
borderWidth: controlBorderWidth,
borderStyle: controlBorderStyle,
opacity: isHovered ? controlHoverOpacity || "1" : controlOpacity || "0.9",
"--tw-ring-color": focusRingColor || "#3b82f6",
"--tw-ring-width": focusRingWidth || "2px",
"--tw-ring-offset-width": focusRingOffset || "2px",
"--tw-ring-offset-color": focusRingOffsetColor || "#ffffff",
transition: "all 200ms ease-in-out",
...style
};
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
className: cn(
"inline-flex items-center justify-center focus:outline-none focus-visible:ring",
disabled && "cursor-not-allowed opacity-50",
className
),
style: customStyles,
onClick: prev,
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
onMouseDown: () => setIsActive(true),
onMouseUp: () => setIsActive(false),
disabled,
"aria-label": "Previous slide",
...props,
children: icon || defaultIcon
}
);
}
);
CarouselPrev.displayName = "CarouselPrev";
const CarouselNext = React.forwardRef(
({ className, icon, style, ...props }, ref) => {
const {
next,
currentIndex,
totalSlides,
loop,
controlBackgroundColor,
controlHoverBackgroundColor,
controlActiveBackgroundColor,
controlTextColor,
controlHoverTextColor,
controlActiveTextColor,
controlSize,
controlBorderRadius,
controlPadding,
controlBoxShadow,
controlBorderColor,
controlBorderWidth,
controlBorderStyle,
controlOpacity,
controlHoverOpacity,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusRingOffsetColor
} = useCarousel();
const [isHovered, setIsHovered] = useState(false);
const [isActive, setIsActive] = useState(false);
const disabled = !loop && currentIndex === totalSlides - 1;
const defaultIcon = /* @__PURE__ */ jsx(
"svg",
{
width: controlSize || "24",
height: controlSize || "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
}
);
const customStyles = {
backgroundColor: isActive ? controlActiveBackgroundColor || "#1f2937" : isHovered ? controlHoverBackgroundColor || "#374151" : controlBackgroundColor || "#4b5563",
color: isActive ? controlActiveTextColor || "#ffffff" : isHovered ? controlHoverTextColor || "#ffffff" : controlTextColor || "#ffffff",
borderRadius: controlBorderRadius || "50%",
padding: controlPadding || "0.5rem",
boxShadow: controlBoxShadow || "0 2px 4px rgba(0, 0, 0, 0.1)",
borderColor: controlBorderColor,
borderWidth: controlBorderWidth,
borderStyle: controlBorderStyle,
opacity: isHovered ? controlHoverOpacity || "1" : controlOpacity || "0.9",
"--tw-ring-color": focusRingColor || "#3b82f6",
"--tw-ring-width": focusRingWidth || "2px",
"--tw-ring-offset-width": focusRingOffset || "2px",
"--tw-ring-offset-color": focusRingOffsetColor || "#ffffff",
transition: "all 200ms ease-in-out",
...style
};
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
className: cn(
"inline-flex items-center justify-center focus:outline-none focus-visible:ring",
disabled && "cursor-not-allowed opacity-50",
className
),
style: customStyles,
onClick: next,
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
onMouseDown: () => setIsActive(true),
onMouseUp: () => setIsActive(false),
disabled,
"aria-label": "Next slide",
...props,
children: icon || defaultIcon
}
);
}
);
CarouselNext.displayName = "CarouselNext";
const CarouselIndicators = React.forwardRef(
({ className, position = "bottom", icon, style, ...props }, ref) => {
const {
currentIndex,
totalSlides,
goTo,
indicatorBackgroundColor,
indicatorActiveBackgroundColor,
indicatorHoverBackgroundColor,
indicatorSize,
indicatorBorderRadius,
indicatorMargin,
indicatorBoxShadow,
indicatorBorderColor,
indicatorBorderWidth,
indicatorBorderStyle,
indicatorOpacity,
indicatorActiveOpacity
} = useCarousel();
const positionStyles = {
inside: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10",
outside: "absolute -bottom-8 left-1/2 -translate-x-1/2 z-10",
bottom: "absolute bottom-2 left-1/2 -translate-x-1/2 z-10",
top: "absolute top-2 left-1/2 -translate-x-1/2 z-10"
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("flex gap-2", positionStyles[position], className),
style,
"aria-label": "Slide indicators",
...props,
children: Array.from({ length: totalSlides }, (_, index) => /* @__PURE__ */ jsx(
IndicatorButton,
{
index,
currentIndex,
goTo,
icon,
indicatorActiveBackgroundColor,
indicatorHoverBackgroundColor,
indicatorBackgroundColor,
indicatorSize,
indicatorBorderRadius,
indicatorMargin,
indicatorBoxShadow,
indicatorBorderColor,
indicatorBorderWidth,
indicatorBorderStyle,
indicatorOpacity,
indicatorActiveOpacity
},
index
))
}
);
}
);
CarouselIndicators.displayName = "CarouselIndicators";
const IndicatorButton = ({
index,
currentIndex,
goTo,
icon,
indicatorActiveBackgroundColor,
indicatorHoverBackgroundColor,
indicatorBackgroundColor,
indicatorSize,
indicatorBorderRadius,
indicatorMargin,
indicatorBoxShadow,
indicatorBorderColor,
indicatorBorderWidth,
indicatorBorderStyle,
indicatorOpacity,
indicatorActiveOpacity
}) => {
const isActive = currentIndex === index;
const [isHovered, setIsHovered] = useState(false);
const customStyles = {
backgroundColor: isActive ? indicatorActiveBackgroundColor || "#1f2937" : isHovered ? indicatorHoverBackgroundColor || "#6b7280" : indicatorBackgroundColor || "#9ca3af",
width: indicatorSize || (isActive ? "2rem" : "0.5rem"),
height: indicatorSize || "0.5rem",
borderRadius: indicatorBorderRadius || "9999px",
margin: indicatorMargin,
boxShadow: indicatorBoxShadow,
borderColor: indicatorBorderColor,
borderWidth: indicatorBorderWidth,
borderStyle: indicatorBorderStyle,
opacity: isActive ? indicatorActiveOpacity || "1" : indicatorOpacity || "0.5",
transition: "all 300ms ease-in-out",
cursor: "pointer"
};
return /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
style: customStyles,
onClick: () => goTo(index),
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
"aria-label": `Go to slide ${index + 1}`,
"aria-current": isActive,
children: icon && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
"Slide ",
index + 1
] })
}
);
};
const CascadeContext = createContext(void 0);
const useCascade = () => {
const context = useContext(CascadeContext);
if (!context) {
throw new Error("useCascade must be used within a Cascade component");
}
return context;
};
const ChevronDownIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
const XIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) });
const SpinnerIcon = () => /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
/* @__PURE__ */ jsx(
"circle",
{
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "2",
fill: "none",
opacity: "0.25"
}
),
/* @__PURE__ */ jsx("path", { d: "m4.93 4.93 4.24 4.24", stroke: "currentColor", strokeWidth: "2" })
] });
const CascadeInput = React.forwardRef(
({ className, placeholder, dropdownIcon, clearIcon, loadingIcon, ...props }, ref) => {
const {
isOpen,
setIsOpen,
value,
onChange,
searchQuery,
setSearchQuery,
disabled,
loading,
clearable,
searchable,
placeholder: contextPlaceholder,
renderValue,
renderPath,
showPath,
onFocus,
onBlur,
onSearch,
// Style props
variant,
size,
status,
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
placeholderColor,
boxShadow,
padding,
paddingX,
paddingY,
clearIconColor,
dropdownIconColor,
loadingIconColor
} = useCascade();
const inputRef = useRef(null);
const handleClick = () => {
if (!disabled && !loading) {
setIsOpen(!isOpen);
}
};
const handleClear = (e) => {
e.stopPropagation();
onChange(null);
setSearchQuery("");
};
const handleInputChange = (e) => {
if (searchable) {
setSearchQuery(e.target.value);
onSearch == null ? void 0 : onSearch(e.target.value);
}
};
const handleFocus = () => {
onFocus == null ? void 0 : onFocus();
};
const handleBlur = () => {
onBlur == null ? void 0 : onBlur();
};
const handleKeyDown = (e) => {
if (e.key === "Enter" && !isOpen) {
setIsOpen(true);
}
};
const renderDisplayValue = () => {
var _a;
if (!value) return null;
if (renderValue) {
return renderValue(value);
}
if (Array.isArray(value)) {
return value.map((v) => v.label).join(", ");
}
if (showPath && renderPath && Array.isArray(value)) {
return renderPath(value);
}
return Array.isArray(value) ? (_a = value[0]) == null ? void 0 : _a.label : value.label;
};
const baseClasses = cn(
"relative flex items-center justify-between w-full cursor-pointer",
"transition-all duration-200 ease-in-out",
{
// Variants
"bg-white border border-gray-300": variant === "default",
"bg-gray-50 border border-gray-300": variant === "filled",
"bg-transparent border border-gray-300": variant === "outlined",
"bg-transparent border-none": variant === "ghost",
"bg-transparent border-b border-gray-300 rounded-none": variant === "underlined",
// Sizes
"text-sm px-3 py-2": size === "sm",
"text-base px-4 py-2.5": size === "md",
"text-lg px-4 py-3": size === "lg",
// Status
"border-red-500": status === "error",
"border-yellow-500": status === "warning",
"border-green-500": status === "success",
// States
"opacity-50 cursor-not-allowed": disabled,
"hover:border-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20": !disabled,
"ring-2 ring-blue-500/20 border-blue-500": isOpen && !disabled
}
);
const style = {
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
color: textColor,
boxShadow,
padding,
paddingLeft: paddingX,
paddingRight: paddingX,
paddingTop: paddingY,
paddingBottom: paddingY
};
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(baseClasses, className),
style,
onClick: handleClick,
onFocus: handleFocus,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
tabIndex: disabled ? -1 : 0,
role: "combobox",
"aria-expanded": isOpen,
"aria-haspopup": "listbox",
...props,
children: [
/* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: searchable && isOpen ? /* @__PURE__ */ jsx(
"input",
{
ref: inputRef,
type: "text",
value: searchQuery,
onChange: handleInputChange,
placeholder: placeholder || contextPlaceholder,
className: "w-full bg-transparent outline-none",
style: { color: textColor },
autoFocus: true
}
) : /* @__PURE__ */ jsx("div", { className: "truncate", style: { color: value ? textColor : placeholderColor }, children: renderDisplayValue() || placeholder || contextPlaceholder }) }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-2", children: [
loading && /* @__PURE__ */ jsx("div", { className: "animate-spin", style: { color: loadingIconColor }, children: loadingIcon || /* @__PURE__ */ jsx(SpinnerIcon, {}) }),
clearable && value && !disabled && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handleClear,
className: "p-0.5 hover:bg-gray-100 rounded",
style: { color: clearIconColor },
children: clearIcon || /* @__PURE__ */ jsx(XIcon, {})
}
),
/* @__PURE__ */ jsx(
"div",
{
className: cn("transition-transform duration-200", {
"rotate-180": isOpen
}),
style: { color: dropdownIconColor },
children: dropdownIcon || /* @__PURE__ */ jsx(ChevronDownIcon, {})
}
)
] })
]
}
);
}
);
CascadeInput.displayName = "CascadeInput";
const CascadeDropdown = React.forwardRef(
({ className, maxHeight, offset, children, ...props }, ref) => {
const {
isOpen,
placement,
dropdownBackgroundColor,
dropdownBorderColor,
dropdownBorderWidth,
dropdownBorderRadius,
dropdownBoxShadow,
dropdownZIndex
} = useCascade();
if (!isOpen) return null;
const baseClasses = cn(
"absolute z-50 bg-white border border-gray-200 rounded-md shadow-lg",
"transition-all duration-200 ease-in-out",
{
"top-full mt-1": placement === "bottom",
"bottom-full mb-1": placement === "top"
}
);
const style = {
backgroundColor: dropdownBackgroundColor,
borderColor: dropdownBorderColor,
borderWidth: dropdownBorderWidth,
borderRadius: dropdownBorderRadius,
boxShadow: dropdownBoxShadow,
zIndex: dropdownZIndex,
maxHeight,
transform: `translateY(${offset || 0}px)`
};
return /* @__PURE__ */ jsx("div", { ref, className: cn(baseClasses, className), style, ...props, children });
}
);
CascadeDropdown.displayName = "CascadeDropdown";
const CascadeOptionComponent = React.forwardRef(
({ className, option, level, index, ...props }, ref) => {
const {
value,
onChange,
highlightedIndex,
setHighlightedIndex,
activeLevel,
setActiveLevel,
renderOption,
optionPadding,
optionSelectedBackgroundColor,
optionSelectedTextColor,
optionDisabledOpacity,
onLevelChange
} = useCascade();
const isSelected = Array.isArray(value) ? value.some((v) => v.value === option.value) : (value == null ? void 0 : value.value) === option.value;
const isHighlighted = highlightedIndex === index && activeLevel === level;
const hasChildren = option.children && option.children.length > 0;
const handleClick = () => {
if (option.disabled) return;
if (hasChildren) {
setActiveLevel(level + 1);
onLevelChange == null ? void 0 : onLevelChange(level + 1);
} else {
const newValue = {
value: option.value,
label: option.label,
path: [option.value],
level
};
onChange(newValue);
}
};
const handleMouseEnter = () => {
setHighlightedIndex(index);
};
const baseClasses = cn(
"flex items-center justify-between px-3 py-2 cursor-pointer",
"transition-colors duration-150 ease-in-out",
{
"opacity-50 cursor-not-allowed": option.disabled,
"hover:bg-gray-100": !option.disabled,
"bg-blue-50 text-blue-700": isSelected,
"bg-gray-100": isHighlighted
}
);
const style = {
padding: optionPadding,
backgroundColor: isSelected ? optionSelectedBackgroundColor : void 0,
color: isSelected ? optionSelectedTextColor : void 0,
opacity: option.disabled ? optionDisabledOpacity : void 0
};
if (renderOption) {
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseClasses, className),
style,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
role: "option",
"aria-selected": isSelected,
"aria-disabled": option.disabled,
...props,
children: renderOption(option, isSelected, level)
}
);
}
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(baseClasses, className),
style,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
role: "option",
"aria-selected": isSelected,
"aria-disabled": option.disabled,
...props,
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
option.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: option.icon }),
/* @__PURE__ */ jsx("span", { className: "flex-1", children: option.label }),
option.description && /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: option.description })
] }),
hasChildren && /* @__PURE__ */ jsx(ChevronDownIcon, {})
]
}
);
}
);
CascadeOptionComponent.displayName = "CascadeOption";
const CascadeEmpty = React.forwardRef(
({ className, children, ...props }, ref) => {
const { emptyMessage, renderEmpty } = useCascade();
const baseClasses = cn("px-3 py-2 text-sm text-gray-500 text-center");
return /* @__PURE__ */ jsx("div", { ref, className: cn(baseClasses, className), ...props, children: renderEmpty ? renderEmpty() : children || emptyMessage });
}
);
CascadeEmpty.displayName = "CascadeEmpty";
const CascadePath = React.forwardRef(
({ className, path, separator = " / ", ...props }, ref) => {
const { pathSeparatorColor, pathSeparator: contextSeparator } = useCascade();
const baseClasses = cn("flex items-center gap-1 text-sm");
const separatorToUse = contextSeparator || separator;
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseClasses, className),
style: { color: pathSeparatorColor },
...props,
children: path.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
/* @__PURE__ */ jsx("span", { children: item.label }),
index < path.length - 1 && /* @__PURE__ */ jsx("span", { children: separatorToUse })
] }, item.value))
}
);
}
);
CascadePath.displayName = "CascadePath";
const Cascade = React.forwardRef(
({
className,
options,
value,
onChange,
defaultValue,
placeholder = "Select options...",
disabled = false,
loading = false,
multiple = false,
clearable = false,
searchable = false,
required = false,
showPath = false,
maxLevels = 3,
label,
helperText,
errorMessage,
emptyMessage = "No options available",
loadingMessage = "Loading...",
variant = "default",
size = "md",
status = "default",
transition = "fade",
transitionDuration = 200,
renderOption,
renderValue,
renderEmpty,
renderPath,
dropdownIcon,
clearIcon,
loadingIcon,
placement = "bottom",
offset = 0,
maxHeight = 300,
onFocus,
onBlur,
onOpen,
onClose,
onSearch,
onLevelChange,
children,
...props
}, _ref) => {
const [isOpen, setIsOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [highlightedIndex, setHighlightedIndex] = useState(0);
const [activeLevel, setActiveLevel] = useState(0);
const [internalValue, setInternalValue] = useState(
value || defaultValue || null
);
const containerRef = useRef(null);
useEffect(() => {
if (value !== void 0) {
setInternalValue(value);
}
}, [value]);
useEffect(() => {
if (isOpen) {
onOpen == null ? void 0 : onOpen();
} else {
onClose == null ? void 0 : onClose();
}
}, [isOpen, onOpen, onClose]);
useEffect(() => {
const handleClickOutside = (event) => {
if (containerRef.current && !containerRef.current.contains(event.target)) {
setIsOpen(false);
}
};
if (isOpen) {
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}
}, [isOpen]);
const handleChange = useCallback(
(newValue) => {
setInternalValue(newValue);
onChange == null ? void 0 : onChange(newValue);
},
[onChange]
);
const handleSearch = useCallback(
(query) => {
setSearchQuery(query);
onSearch == null ? void 0 : onSearch(query);
},
[onSearch]
);
const handleLevelChange = useCallback(
(level) => {
setActiveLevel(level);
onLevelChange == null ? void 0 : onLevelChange(level);
},
[onLevelChange]
);
const getOptionsForLevel = useCallback(
(level, selectedPath = []) => {
if (level === 0) return options;
let currentOptions = options;
for (let i = 0; i < level && i < selectedPath.length; i++) {
const pathValue = selectedPath[i];
const option = currentOptions.find((opt) => opt.value === pathValue);
if (!option || !option.children) return [];
currentOptions = option.children;
}
return currentOptions;
},
[options]
);
const currentLevelOptions = useMemo(() => {
var _a;
const selectedPath = Array.isArray(internalValue) ? ((_a = internalValue[0]) == null ? void 0 : _a.path) || [] : (internalValue == null ? void 0 : internalValue.path) || [];
return getOptionsForLevel(activeLevel, selectedPath);
}, [activeLevel, internalValue, getOptionsForLevel]);
const filteredOptions = useMemo(() => {
if (!searchQuery) return currentLevelOptions;
return currentLevelOptions.filter(
(option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
);
}, [currentLevelOptions, searchQuery]);
const contextValue = useMemo(
() => ({
// State
isOpen,
setIsOpen,
value: internalValue,
onChange: handleChange,
searchQuery,
setSearchQuery: handleSearch,
highlightedIndex,
setHighlightedIndex,
activeLevel,
setActiveLevel: handleLevelChange,
// Options and levels
options,
levels: [],
filteredOptions,
// Configuration
multiple,
disabled,
loading,
searchable,
clearable,
showPath,
maxLevels,
variant,
size,
status,
transition,
transitionDuration,
placement,
// Messages
emptyMessage,
loadingMessage,
placeholder,
// Custom renders
renderOption,
renderValue,
renderEmpty,
renderPath,
// Style props
borderWidth: props.borderWidth,
borderColor: props.borderColor,
borderStyle: props.borderStyle,
borderRadius: props.borderRadius,
fontSize: props.fontSize,
fontWeight: props.fontWeight,
fontFamily: props.fontFamily,
backgroundColor: props.backgroundColor,
textColor: props.textColor,
placeholderColor: props.placeholderColor,
focusRingColor: props.focusRingColor,
focusRingWidth: props.focusRingWidth,
focusRingOffset: props.focusRingOffset,
focusBorderColor: props.focusBorderColor,
focusBackgroundColor: props.focusBackgroundColor,
boxShadow: props.boxShadow,
focusBoxShadow: props.focusBoxShadow,
padding: props.padding,
paddingX: props.paddingX,
paddingY: props.paddingY,
dropdownBackgroundColor: props.dropdownBackgroundColor,
dropdownBorderColor: props.dropdownBorderColor,
dropdownBorderWidth: props.dropdownBorderWidth,
dropdownBorderRadius: props.dropdownBorderRadius,
dropdownBoxShadow: props.dropdownBoxShadow,
dropdownZIndex: props.dropdownZIndex,
optionPadding: props.optionPadding,
optionHoverBackgroundColor: props.optionHoverBackgroundColor,
optionSelectedBackgroundColor: props.optionSelectedBackgroundColor,
optionSelectedTextColor: props.optionSelectedTextColor,
optionDisabledOpacity: props.optionDisabledOpacity,
iconColor: props.iconColor,
clearIconColor: props.clearIconColor,
dropdownIconColor: props.dropdownIconColor,
loadingIconColor: props.loadingIconColor,
pathSeparatorColor: props.pathSeparatorColor,
pathSeparator: props.pathSeparator,
// Event handlers
onFocus,
onBlur,
onOpen,
onClose,
onSearch: handleSearch,
onLevelChange: handleLevelChange
}),
[
isOpen,
internalValue,
handleChange,
searchQuery,
handleSearch,
highlightedIndex,
activeLevel,
handleLevelChange,
options,
filteredOptions,
multiple,
disabled,
loading,
searchable,
clearable,
showPath,
maxLevels,
variant,
size,
status,
transition,
transitionDuration,
placement,
emptyMessage,
loadingMessage,
placeholder,
renderOption,
renderValue,
renderEmpty,
renderPath,
onFocus,
onBlur,
onOpen,
onClose,
onLevelChange,
props
]
);
const baseClasses = cn("relative w-full", {
"opacity-50 pointer-events-none": disabled
});
return /* @__PURE__ */ jsx(CascadeContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn(baseClasses, className), ...props, children: [
label && /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: [
label,
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
/* @__PURE__ */ jsx(
CascadeInput,
{
placeholder,
dropdownIcon,
clearIcon,
loadingIcon
}
),
/* @__PURE__ */ jsx(CascadeDropdown, { maxHeight, offset, children: loading ? /* @__PURE__ */ jsx(CascadeEmpty, { children: loadingMessage }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(CascadeEmpty, { children: emptyMessage }) : /* @__PURE__ */ jsx("div", { className: "py-1", children: filteredOptions.map((option, index) => /* @__PURE__ */ jsx(
CascadeOptionComponent,
{
option,
level: activeLevel,
index
},
option.value
)) }) }),
helperText && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: helperText }),
errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-red-500", children: errorMessage }),
children
] }) });
}
);
Cascade.displayName = "Cascade";
const CascadeComponent = Cascade;
CascadeComponent.Input = CascadeInput;
CascadeComponent.Dropdown = CascadeDropdown;
CascadeComponent.Option = CascadeOptionComponent;
CascadeComponent.Empty = CascadeEmpty;
CascadeComponent.Path = CascadePath;
const CheckboxContext = createContext(null);
const CheckboxGroupContext = createContext(null);
const useCheckbox = () => {
const context = useContext(CheckboxContext);
if (!context) {
throw new Error("useCheckbox must be used within a Checkbox component");
}
return context;
};
const useCheckboxGroup = () => {
const context = useContext(CheckboxGroupContext);
return context;
};
const Checkbox = React.forwardRef(
({
className,
children,
// Core functionality
checked,
defaultChecked = false,
indeterminate = false,
onChange,
// Features
loading = false,
required = false,
disabled = false,
// Styling
variant = "default",
size = "md",
status = "default",
transition = "scale",
// Content
label,
description,
helperText,
errorText,
// Custom render functions
renderLabel,
_renderIcon,
renderDescription,
renderHelperText,
renderErrorText,
// Icons
_checkIcon,
_indeterminateIcon,
_loadingIcon,
// Event handlers
onFocus,
onBlur,
onMouseEnter,
onMouseLeave,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
backgroundColor,
checkedBackgroundColor,
indeterminateBackgroundColor,
hoverBackgroundColor,
disabledBackgroundColor,
checkmarkColor,
indeterminateColor,
labelFontSize,
labelTextSize,
labelFontWeight,
labelFontFamily,
labelTextColor,
descriptionFontSize,
descriptionTextColor,
helperTextColor,
errorTextColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
_focusBorderColor,
_focusBackgroundColor,
boxShadow,
focusBoxShadow,
checkedBoxShadow,
gap,
padding,
paddingX,
paddingY,
// Accessibility
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
...props
}, ref) => {
const inputId = useId();
const labelId = label ? `${inputId}-label` : void 0;
const descriptionId = description ? `${inputId}-description` : void 0;
const helperTextId = helperText ? `${inputId}-helper` : void 0;
const errorTextId = errorText ? `${inputId}-error` : void 0;
const [internalChecked, setInternalChecked] = useState(defaultChecked);
const isControlled = checked !== void 0;
const currentChecked = isControlled ? checked : internalChecked;
const handleChange = useCallback(
(newChecked) => {
if (!isControlled) {
setInternalChecked(newChecked);
}
onChange == null ? void 0 : onChange(newChecked);
},
[isControlled, onChange]
);
const handleInputChange = useCallback(
(event) => {
if (disabled || loading) return;
handleChange(event.target.checked);
},
[disabled, loading, handleChange]
);
const handleFocus = useCallback(() => {
onFocus == null ? void 0 : onFocus();
}, [onFocus]);
const handleBlur = useCallback(() => {
onBlur == null ? void 0 : onBlur();
}, [onBlur]);
const contextValue = useMemo(
() => ({
isChecked: currentChecked,
isIndeterminate: indeterminate,
isDisabled: disabled,
isLoading: loading,
isRequired: required,
onChange: handleChange,
onFocus: handleFocus,
onBlur: handleBlur,
variant,
size,
status,
transition,
inputId,
labelId,
descriptionId,
helperTextId,
errorTextId,
borderWidth,
borderColor,
borderStyle,
borderRadius,
backgroundColor,
checkedBackgroundColor,
indeterminateBackgroundColor,
hoverBackgroundColor,
disabledBackgroundColor,
checkmarkColor,
indeterminateColor,
labelTextColor,
descriptionTextColor,
helperTextColor,
errorTextColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
boxShadow,
focusBoxShadow,
checkedBoxShadow,
labelFontSize,
labelTextSize,
labelFontWeight,
labelFontFamily,
descriptionFontSize,
gap,
padding,
paddingX,
paddingY
}),
[
currentChecked,
indeterminate,
disabled,
loading,
required,
handleChange,
handleFocus,
handleBlur,
variant,
size,
status,
transition,
inputId,
labelId,
descriptionId,
helperTextId,
errorTextId,
borderWidth,
borderColor,
borderStyle,
borderRadius,
backgroundColor,
checkedBackgroundColor,
indeterminateBackgroundColor,
hoverBackgroundColor,
disabledBackgroundColor,
checkmarkColor,
indeterminateColor,
labelTextColor,
descriptionTextColor,
helperTextColor,
errorTextColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
boxShadow,
focusBoxShadow,
checkedBoxShadow,
labelFontSize,
labelTextSize,
labelFontWeight,
labelFontFamily,
descriptionFontSize,
gap,
padding,
paddingX,
paddingY
]
);
const baseStyles = "relative flex items-start";
const sizeStyles = {
sm: "gap-2",
md: "gap-3",
lg: "gap-4"
};
const customStyles = {};
if (gap) customStyles.gap = gap;
if (padding) customStyles.padding = padding;
if (paddingX) {
customStyles.paddingLeft = paddingX;
customStyles.paddingRight = paddingX;
}
if (paddingY) {
customStyles.paddingTop = paddingY;
customStyles.paddingBottom = paddingY;
}
const computedAriaDescribedby = [ariaDescribedby, descriptionId, helperTextId, errorTextId].filter(Boolean).join(" ") || void 0;
return /* @__PURE__ */ jsx(CheckboxContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
className: cn(baseStyles, sizeStyles[size], className),
style: customStyles,
onMouseEnter,
onMouseLeave,
children: [
/* @__PURE__ */ jsx(
CheckboxInput,
{
ref,
checked: currentChecked,
onChange: handleInputChange,
disabled: disabled || loading,
required,
"aria-label": ariaLabel,
"aria-describedby": computedAriaDescribedby,
...props
}
),
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
label && (renderLabel ? renderLabel(label) : /* @__PURE__ */ jsx(CheckboxLabel, { children: label })),
description && (renderDescription ? renderDescription(description) : /* @__PURE__ */ jsx(CheckboxDescription, { children: description })),
helperText && !errorText && (renderHelperText ? renderHelperText(helperText) : /* @__PURE__ */ jsx(CheckboxHelperText, { children: helperText })),
errorText && (renderErrorText ? renderErrorText(errorText) : /* @__PURE__ */ jsx(CheckboxErrorText, { children: errorText })),
children
] })
]
}
) });
}
);
Checkbox.displayName = "Checkbox";
const CheckboxInput = React.forwardRef(
({ className, style, ...props }, ref) => {
const {
isChecked,
isIndeterminate,
isDisabled,
isLoading,
variant,
size,
status,
transition,
inputId,
borderWidth,
borderColor,
borderStyle,
borderRadius,
backgroundColor,
checkedBackgroundColor,
indeterminateBackgroundColor,
// hoverBackgroundColor, // TODO: Implement hover styles
disabledBackgroundColor,
// checkmarkColor, // Used in icon components
// indeterminateColor, // Used in icon components
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor: _focusBorderColor,
// focusBackgroundColor, // TODO: Implement focus background styles
boxShadow,
// focusBoxShadow, // TODO: Implement focus shadow styles
checkedBoxShadow
} = useCheckbox();
const baseStyles = "relative flex items-center justify-center shrink-0 border-2 focus:outline-none";
const variantStyles = {
default: "border-gray-300 bg-white",
filled: "border-gray-400 bg-gray-50",
outlined: "border-gray-400 bg-transparent",
ghost: "border-transparent bg-gray-100",
toggle: "border-gray-300 bg-white rounded-full",
switch: "border-gray-300 bg-white rounded-full",
card: "border-gray-200 bg-white shadow-sm"
};
const sizeStyles = {
sm: "w-4 h-4 rounded",
md: "w-5 h-5 rounded-md",
lg: "w-6 h-6 rounded-lg"
};
const statusStyles = {
default: "",
success: "border-green-500",
warning: "border-yellow-500",
error: "border-red-500",
info: "border-blue-500"
};
const stateStyles = cn(
isChecked && "bg-blue-600 border-blue-600",
isIndeterminate && "bg-blue-600 border-blue-600",
isDisabled && "opacity-50 cursor-not-allowed",
isLoading && "opacity-60 cursor-wait",
!isDisabled && !isLoading && "cursor-pointer hover:border-gray-400"
);
const transitionStyles = {
none: "",
fade: "transition-opacity duration-200",
scale: "transition-all duration-200 hover:scale-105",
slide: "transition-all duration-200",
bounce: "transition-all duration-300 ease-bounce"
};
const customStyles = { ...style };
if (borderWidth) customStyles.borderWidth = borderWidth;
if (borderColor) customStyles.borderColor = borderColor;
if (borderStyle) customStyles.borderStyle = borderStyle;
if (borderRadius) customStyles.borderRadius = borderRadius;
if (backgroundColor && !isChecked && !isIndeterminate)
customStyles.backgroundColor = backgroundColor;
if (checkedBackgroundColor && isChecked) customStyles.backgroundColor = checkedBackgroundColor;
if (indeterminateBackgroundColor && isIndeterminate)
customStyles.backgroundColor = indeterminateBackgroundColor;
if (disabledBackgroundColor && isDisabled)
customStyles.backgroundColor = disabledBackgroundColor;
if (boxShadow) customStyles.boxShadow = boxShadow;
if (checkedBoxShadow && (isChecked || isIndeterminate))
customStyles.boxShadow = checkedBoxShadow;
const focusStyles = [
"focus:ring-2",
focusRingColor ? "" : "focus:ring-blue-500",
focusRingOffset ? "" : "focus:ring-offset-2"
].filter(Boolean).join(" ");
if (focusRingColor) {
customStyles["--tw-ring-color"] = focusRingColor;
}
if (focusRingWidth) {
customStyles["--tw-ring-width"] = focusRingWidth;
}
if (focusRingOffset) {
customStyles["--tw-ring-offset-width"] = focusRingOffset;
}
if (_focusBorderColor) {
customStyles["--tw-ring-offset-color"] = _focusBorderColor;
}
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsx("input", { ref, id: inputId, type: "checkbox", className: "sr-only", ...props }),
/* @__PURE__ */ jsx(
"div",
{
className: cn(
baseStyles,
variantStyles[variant],
sizeStyles[size],
statusStyles[status],
stateStyles,
transitionStyles[transition],
focusStyles,
className
),
style: customStyles,
children: isLoading ? /* @__PURE__ */ jsx(CheckboxLoadingIcon, {}) : isIndeterminate ? /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, {}) : isChecked ? /* @__PURE__ */ jsx(CheckboxCheckIcon, {}) : null
}
)
] });
}
);
CheckboxInput.displayName = "CheckboxInput";
const CheckboxCheckIcon = React.memo(() => {
const { size, checkmarkColor } = useCheckbox();
const sizeStyles = {
sm: "w-3 h-3",
md: "w-4 h-4",
lg: "w-5 h-5"
};
const customStyles = {};
if (checkmarkColor) customStyles.color = checkmarkColor;
return /* @__PURE__ */ jsx(
"svg",
{
className: cn("text-white", sizeStyles[size]),
style: customStyles,
fill: "currentColor",
viewBox: "0 0 20 20",
children: /* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
clipRule: "evenodd"
}
)
}
);
});
CheckboxCheckIcon.displayName = "CheckboxCheckIcon";
const CheckboxIndeterminateIcon = React.memo(() => {
const { size, indeterminateColor } = useCheckbox();
const sizeStyles = {
sm: "w-3 h-3",
md: "w-4 h-4",
lg: "w-5 h-5"
};
const customStyles = {};
if (indeterminateColor) customStyles.color = indeterminateColor;
return /* @__PURE__ */ jsx(
"svg",
{
className: cn("text-white", sizeStyles[size]),
style: customStyles,
fill: "currentColor",
viewBox: "0 0 20 20",
children: /* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
d: "M4 10a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z",
clipRule: "evenodd"
}
)
}
);
});
CheckboxIndeterminateIcon.displayName = "CheckboxIndeterminateIcon";
const CheckboxLoadingIcon = React.memo(() => {
const { size } = useCheckbox();
const sizeStyles = {
sm: "w-3 h-3",
md: "w-4 h-4",
lg: "w-5 h-5"
};
return /* @__PURE__ */ jsxs(
"svg",
{
className: cn("animate-spin text-gray-400", sizeStyles[size]),
fill: "none",
viewBox: "0 0 24 24",
children: [
/* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
]
}
);
});
CheckboxLoadingIcon.displayName = "CheckboxLoadingIcon";
const CheckboxLabel = React.forwardRef(
({ className, style, children, ...props }, ref) => {
const {
inputId,
labelId,
isDisabled,
size,
labelFontSize,
labelTextSize,
labelFontWeight,
labelFontFamily,
labelTextColor
} = useCheckbox();
const sizeStyles = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
const customStyles = { ...style };
if (labelFontSize || labelTextSize) customStyles.fontSize = labelTextSize || labelFontSize;
if (labelFontWeight) customStyles.fontWeight = labelFontWeight;
if (labelFontFamily) customStyles.fontFamily = labelFontFamily;
if (labelTextColor) customStyles.color = labelTextColor;
return /* @__PURE__ */ jsx(
"label",
{
ref,
id: labelId,
htmlFor: inputId,
className: cn(
"font-medium leading-tight",
sizeStyles[size],
isDisabled && "opacity-50 cursor-not-allowed",
!isDisabled && "cursor-pointer",
className
),
style: customStyles,
...props,
children
}
);
}
);
CheckboxLabel.displayName = "CheckboxLabel";
const CheckboxDescription = React.forwardRef(
({ className, style, children, ...props }, ref) => {
const { descriptionId, isDisabled, size, descriptionFontSize, descriptionTextColor } = useCheckbox();
const sizeStyles = {
sm: "text-xs mt-1",
md: "text-sm mt-1",
lg: "text-base mt-2"
};
const customStyles = { ...style };
if (descriptionFontSize) customStyles.fontSize = descriptionFontSize;
if (descriptionTextColor) customStyles.color = descriptionTextColor;
return /* @__PURE__ */ jsx(
"p",
{
ref,
id: descriptionId,
className: cn("text-gray-600", sizeStyles[size], isDisabled && "opacity-50", className),
style: customStyles,
...props,
children
}
);
}
);
CheckboxDescription.displayName = "CheckboxDescription";
const CheckboxHelperText = React.forwardRef(
({ className, style, children, ...props }, ref) => {
const { helperTextId, isDisabled, size, helperTextColor } = useCheckbox();
const sizeStyles = {
sm: "text-xs mt-1",
md: "text-sm mt-1",
lg: "text-base mt-2"
};
const customStyles = { ...style };
if (helperTextColor) customStyles.color = helperTextColor;
return /* @__PURE__ */ jsx(
"p",
{
ref,
id: helperTextId,
className: cn("text-gray-500", sizeStyles[size], isDisabled && "opacity-50", className),
style: customStyles,
...props,
children
}
);
}
);
CheckboxHelperText.displayName = "CheckboxHelperText";
const CheckboxErrorText = React.forwardRef(
({ className, style, children, ...props }, ref) => {
const { errorTextId, isDisabled, size, errorTextColor } = useCheckbox();
const sizeStyles = {
sm: "text-xs mt-1",
md: "text-sm mt-1",
lg: "text-base mt-2"
};
const customStyles = { ...style };
if (errorTextColor) customStyles.color = errorTextColor;
return /* @__PURE__ */ jsx(
"p",
{
ref,
id: errorTextId,
className: cn("text-red-600", sizeStyles[size], isDisabled && "opacity-50", className),
style: customStyles,
...props,
children
}
);
}
);
CheckboxErrorText.displayName = "CheckboxErrorText";
const CheckboxGroup = React.forwardRef(
({
children,
className,
value,
defaultValue = [],
onChange,
disabled = false,
required = false,
variant = "default",
size = "md",
status = "default",
label,
description,
helperText,
errorText,
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
...props
}, ref) => {
const [internalValue, setInternalValue] = useState(defaultValue);
const isControlled = value !== void 0;
const currentValue = isControlled ? value : internalValue;
const handleChange = useCallback(
(newValue) => {
if (!isControlled) {
setInternalValue(newValue);
}
onChange == null ? void 0 : onChange(newValue);
},
[isControlled, onChange]
);
const groupUtils = useMemo(() => {
const isSelected = (itemValue) => currentValue.includes(itemValue);
const toggleItem = (itemValue) => {
const newValue = isSelected(itemValue) ? currentValue.filter((v) => v !== itemValue) : [...currentValue, itemValue];
handleChange(newValue);
};
const selectAll = () => {
};
const selectNone = () => handleChange([]);
const allSelected = false;
const isIndeterminate = currentValue.length > 0 && !allSelected;
return { isSelected, toggleItem, selectAll, selectNone, allSelected, isIndeterminate };
}, [currentValue, handleChange]);
const contextValue = useMemo(
() => ({
value: currentValue,
onChange: handleChange,
isDisabled: disabled,
isRequired: required,
variant,
size,
status,
...groupUtils
}),
[currentValue, handleChange, disabled, required, variant, size, status, groupUtils]
);
const groupId = useId();
const labelId = label ? `${groupId}-label` : void 0;
const descriptionId = description ? `${groupId}-description` : void 0;
const helperTextId = helperText ? `${groupId}-helper` : void 0;
const errorTextId = errorText ? `${groupId}-error` : void 0;
const computedAriaDescribedby = [ariaDescribedby, descriptionId, helperTextId, errorTextId].filter(Boolean).join(" ") || void 0;
return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn("space-y-2", className),
role: "group",
"aria-label": ariaLabel,
"aria-describedby": computedAriaDescribedby,
"aria-required": required,
...props,
children: [
label && /* @__PURE__ */ jsxs("div", { id: labelId, className: "font-medium text-gray-900", children: [
label,
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-sm text-gray-600", children: description }),
/* @__PURE__ */ jsx("div", { className: "space-y-2", children }),
helperText && !errorText && /* @__PURE__ */ jsx("p", { id: helperTextId, className: "text-sm text-gray-500", children: helperText }),
errorText && /* @__PURE__ */ jsx("p", { id: errorTextId, className: "text-sm text-red-600", children: errorText })
]
}
) });
}
);
CheckboxGroup.displayName = "CheckboxGroup";
const CheckboxItem = React.forwardRef(
({ value, children, ...props }, ref) => {
const groupContext = useCheckboxGroup();
if (!groupContext) {
throw new Error("CheckboxItem must be used within a CheckboxGroup");
}
const { isSelected, toggleItem, isDisabled, variant, size, status } = groupContext;
const handleChange = useCallback(() => {
toggleItem(value);
}, [toggleItem, value]);
return /* @__PURE__ */ jsx(
Checkbox,
{
ref,
checked: isSelected(value),
onChange: handleChange,
disabled: isDisabled,
variant,
size,
status,
...props,
children
}
);
}
);
CheckboxItem.displayName = "CheckboxItem";
const CheckboxSelectAll = React.forwardRef(
({ children, ...props }, ref) => {
const groupContext = useCheckboxGroup();
if (!groupContext) {
throw new Error("CheckboxSelectAll must be used within a CheckboxGroup");
}
const { allSelected, isIndeterminate, selectAll, selectNone } = groupContext;
const handleChange = useCallback(
(checked) => {
if (checked) {
selectAll();
} else {
selectNone();
}
},
[selectAll, selectNone]
);
return /* @__PURE__ */ jsx(
Checkbox,
{
ref,
checked: allSelected,
indeterminate: isIndeterminate,
onChange: handleChange,
...props,
children
}
);
}
);
CheckboxSelectAll.displayName = "CheckboxSelectAll";
const CheckboxCompound = Checkbox;
CheckboxCompound.Input = CheckboxInput;
CheckboxCompound.Label = CheckboxLabel;
CheckboxCompound.Description = CheckboxDescription;
CheckboxCompound.HelperText = CheckboxHelperText;
CheckboxCompound.ErrorText = CheckboxErrorText;
CheckboxCompound.Group = CheckboxGroup;
CheckboxCompound.Item = CheckboxItem;
CheckboxCompound.SelectAll = CheckboxSelectAll;
const ChipContext = createContext(void 0);
const useChip = () => {
const context = useContext(ChipContext);
if (!context) {
throw new Error("useChip must be used within a Chip");
}
return context;
};
const Chip = React.forwardRef(
({
className,
value,
onChange,
variant = "default",
size = "md",
status = "default",
disabled = false,
loading = false,
removable = false,
selectable = false,
multiple = false,
maxChips,
label,
helperText,
required = false,
emptyMessage = "No chips selected",
loadingMessage = "Loading...",
onRemove,
onSelect,
renderChip,
children,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
backgroundColor,
selectedBackgroundColor,
hoverBackgroundColor,
disabledBackgroundColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
hoverBoxShadow,
padding,
paddingX,
paddingY,
gap,
iconColor,
removeIconColor,
loadingIconColor,
labelFontSize,
labelFontWeight,
labelColor,
labelMarginBottom,
helperTextFontSize,
helperTextColor,
helperTextMarginTop,
requiredColor,
containerBackgroundColor,
containerBorderColor,
containerBorderWidth,
containerBorderRadius,
containerPadding,
containerGap,
...props
}, ref) => {
const handleChange = useCallback(
(newValue) => {
if (onChange) {
onChange(newValue);
}
},
[onChange]
);
const handleRemove = useCallback(
(chipValue) => {
if (onRemove) {
onRemove(chipValue);
}
if (Array.isArray(value)) {
const newValue = value.filter((v) => v !== chipValue);
handleChange(newValue.length > 0 ? newValue : null);
} else if (value === chipValue) {
handleChange(null);
}
},
[value, onRemove, handleChange]
);
const handleSelect = useCallback(
(chipValue) => {
if (onSelect) {
onSelect(chipValue);
}
if (multiple && Array.isArray(value)) {
const isSelected = value.includes(chipValue);
if (isSelected) {
const newValue = value.filter((v) => v !== chipValue);
handleChange(newValue.length > 0 ? newValue : null);
} else {
if (maxChips && value.length >= maxChips) return;
handleChange([...value, chipValue]);
}
} else {
handleChange(chipValue);
}
},
[value, multiple, maxChips, onSelect, handleChange]
);
const baseStyles = "relative";
return /* @__PURE__ */ jsx(
ChipContext.Provider,
{
value: {
value: value || null,
onChange: handleChange,
variant,
size,
status,
disabled,
loading,
removable,
selectable,
multiple,
maxChips,
onRemove: handleRemove,
onSelect: handleSelect,
renderChip,
emptyMessage,
loadingMessage,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
backgroundColor,
selectedBackgroundColor,
hoverBackgroundColor,
disabledBackgroundColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
hoverBoxShadow,
padding,
paddingX,
paddingY,
gap,
iconColor,
removeIconColor,
loadingIconColor,
containerBackgroundColor,
containerBorderColor,
containerBorderWidth,
containerBorderRadius,
containerPadding,
containerGap
},
children: /* @__PURE__ */ jsxs("div", { ref, className: cn(baseStyles, className), ...props, children: [
label && /* @__PURE__ */ jsxs(
"label",
{
className: cn(
"block mb-2 font-medium",
size === "sm" && "text-sm",
size === "md" && "text-base",
size === "lg" && "text-lg",
status === "error" ? "text-red-600" : "text-gray-900",
disabled && "opacity-50"
),
style: {
fontSize: labelFontSize,
fontWeight: labelFontWeight,
color: labelColor,
marginBottom: labelMarginBottom
},
children: [
label,
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", style: { color: requiredColor }, children: "*" })
]
}
),
children || /* @__PURE__ */ jsx(ChipContainer, {}),
helperText && /* @__PURE__ */ jsx(
"p",
{
className: cn(
"mt-2",
size === "sm" && "text-xs",
size === "md" && "text-sm",
size === "lg" && "text-base",
status === "success" ? "text-green-600" : status === "warning" ? "text-yellow-600" : status === "error" ? "text-red-600" : "text-gray-500"
),
style: {
fontSize: helperTextFontSize,
color: helperTextColor,
marginTop: helperTextMarginTop
},
children: helperText
}
)
] })
}
);
}
);
Chip.displayName = "Chip";
const ChipContainer = React.forwardRef(
({ className, children, ...props }, ref) => {
const {
value,
loading,
loadingMessage,
emptyMessage,
// Container style props
containerBackgroundColor,
containerBorderColor,
containerBorderWidth,
containerBorderRadius,
containerPadding,
containerGap
} = useChip();
const baseStyles = cn(
"flex flex-wrap items-center gap-2 min-h-[2.5rem]",
"border border-gray-200 rounded-md bg-white",
"focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2"
);
const customContainerStyles = {};
if (containerBackgroundColor) customContainerStyles.backgroundColor = containerBackgroundColor;
if (containerBorderColor) customContainerStyles.borderColor = containerBorderColor;
if (containerBorderWidth) customContainerStyles.borderWidth = containerBorderWidth;
if (containerBorderRadius) customContainerStyles.borderRadius = containerBorderRadius;
if (containerPadding) customContainerStyles.padding = containerPadding;
if (containerGap) customContainerStyles.gap = containerGap;
if (loading) {
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, "justify-center", className),
style: customContainerStyles,
...props,
children: /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: loadingMessage })
}
);
}
if (!value || Array.isArray(value) && value.length === 0) {
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, "justify-center", className),
style: customContainerStyles,
...props,
children: /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: emptyMessage })
}
);
}
return /* @__PURE__ */ jsx("div", { ref, className: cn(baseStyles, className), style: customContainerStyles, ...props, children: children || /* @__PURE__ */ jsx(Fragment, { children: Array.isArray(value) ? value.map((chipValue) => /* @__PURE__ */ jsx(ChipItem, { value: chipValue }, chipValue)) : /* @__PURE__ */ jsx(ChipItem, { value }) }) });
}
);
ChipContainer.displayName = "ChipContainer";
const ChipItem = React.forwardRef(
({ className, value, icon, avatar, children, ...props }, ref) => {
const {
value: selectedValue,
variant,
size,
status,
disabled,
removable,
selectable,
multiple: _multiple,
onRemove,
onSelect,
renderChip,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
backgroundColor,
selectedBackgroundColor,
hoverBackgroundColor: _hoverBackgroundColor,
disabledBackgroundColor,
focusRingColor: _focusRingColor,
focusRingWidth: _focusRingWidth,
focusRingOffset: _focusRingOffset,
focusBorderColor: _focusBorderColor,
focusBackgroundColor: _focusBackgroundColor,
boxShadow,
focusBoxShadow,
hoverBoxShadow,
padding,
paddingX,
paddingY,
gap,
iconColor,
removeIconColor
} = useChip();
const isSelected = useMemo(() => {
if (Array.isArray(selectedValue)) {
return selectedValue.includes(value);
}
return selectedValue === value;
}, [selectedValue, value]);
const handleClick = () => {
if (disabled) return;
if (selectable) {
onSelect == null ? void 0 : onSelect(value);
}
};
const handleRemove = (e) => {
e.stopPropagation();
if (disabled) return;
onRemove == null ? void 0 : onRemove(value);
};
const baseStyles = cn(
"inline-flex items-center gap-1 rounded-full font-medium transition-all",
"focus:outline-none focus:ring-2 focus:ring-offset-2",
disabled && "cursor-not-allowed opacity-50",
selectable && !disabled && "cursor-pointer"
);
const baseVariantStyles = {
default: cn(
"border border-gray-300 bg-white text-gray-700",
"hover:bg-gray-50 focus:ring-gray-400",
isSelected && "bg-gray-100 border-gray-400"
),
filled: cn("border-0", isSelected && "bg-gray-200"),
outlined: cn("border-2 bg-transparent", isSelected && "border-gray-500 bg-gray-50"),
soft: cn("border-0", isSelected && "bg-gray-100"),
gradient: cn(
"border-0 text-white",
isSelected && "bg-gradient-to-r from-gray-500 to-gray-700"
)
};
const statusVariantStyles = {
default: {
success: "",
warning: "",
error: "",
info: "",
default: ""
},
filled: {
success: "bg-green-100 text-green-800",
warning: "bg-yellow-100 text-yellow-800",
error: "bg-red-100 text-red-800",
info: "bg-blue-100 text-blue-800",
default: "bg-gray-100 text-gray-800"
},
outlined: {
success: "border-green-500 text-green-700",
warning: "border-yellow-500 text-yellow-700",
error: "border-red-500 text-red-700",
info: "border-blue-500 text-blue-700",
default: "border-gray-300 text-gray-700"
},
soft: {
success: "bg-green-50 text-green-700",
warning: "bg-yellow-50 text-yellow-700",
error: "bg-red-50 text-red-700",
info: "bg-blue-50 text-blue-700",
default: "bg-gray-50 text-gray-700"
},
gradient: {
success: "bg-gradient-to-r from-green-400 to-green-600",
warning: "bg-gradient-to-r from-yellow-400 to-yellow-600",
error: "bg-gradient-to-r from-red-400 to-red-600",
info: "bg-gradient-to-r from-blue-400 to-blue-600",
default: "bg-gradient-to-r from-gray-400 to-gray-600"
}
};
const getVariantStyles = () => {
var _a, _b;
const currentVariant = variant || "default";
const currentStatus = status || "default";
const baseStyle = baseVariantStyles[currentVariant] || baseVariantStyles.default;
const statusStyle = ((_a = statusVariantStyles[currentVariant]) == null ? void 0 : _a[currentStatus]) || ((_b = statusVariantStyles[currentVariant]) == null ? void 0 : _b.default) || "";
return cn(baseStyle, statusStyle);
};
const variantClassName = getVariantStyles();
const sizes = {
sm: "px-2 py-0.5 text-xs",
md: "px-3 py-1 text-sm",
lg: "px-4 py-1.5 text-base"
};
const customStyles = {};
if (borderWidth) customStyles.borderWidth = borderWidth;
if (borderColor) customStyles.borderColor = borderColor;
if (borderStyle) customStyles.borderStyle = borderStyle;
if (borderRadius) customStyles.borderRadius = borderRadius;
if (fontSize) customStyles.fontSize = fontSize;
if (fontWeight) customStyles.fontWeight = fontWeight;
if (fontFamily) customStyles.fontFamily = fontFamily;
if (textColor) customStyles.color = textColor;
if (backgroundColor) customStyles.backgroundColor = backgroundColor;
if (isSelected && selectedBackgroundColor)
customStyles.backgroundColor = selectedBackgroundColor;
if (disabled && disabledBackgroundColor) customStyles.backgroundColor = disabledBackgroundColor;
if (boxShadow) customStyles.boxShadow = boxShadow;
if (isSelected && focusBoxShadow) customStyles.boxShadow = focusBoxShadow;
if (padding) customStyles.padding = padding;
if (paddingX) {
customStyles.paddingLeft = paddingX;
customStyles.paddingRight = paddingX;
}
if (paddingY) {
customStyles.paddingTop = paddingY;
customStyles.paddingBottom = paddingY;
}
if (gap) customStyles.gap = gap;
const defaultRemoveIcon = /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}
) });
if (renderChip) {
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, variantClassName, sizes[size || "md"], className),
style: {
...customStyles,
...hoverBoxShadow && {
":hover": { boxShadow: hoverBoxShadow }
}
},
onClick: handleClick,
...props,
children: renderChip(value, isSelected)
}
);
}
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(baseStyles, variantClassName, sizes[size || "md"], className),
style: {
...customStyles,
...hoverBoxShadow && {
":hover": { boxShadow: hoverBoxShadow }
}
},
onClick: handleClick,
...props,
children: [
avatar && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: avatar }),
icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", style: { color: iconColor }, children: icon }),
/* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: children || value }),
removable && /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: "flex-shrink-0 ml-1 hover:bg-black/10 rounded-full p-0.5 transition-colors",
style: { color: removeIconColor || iconColor },
onClick: handleRemove,
disabled,
children: defaultRemoveIcon
}
)
]
}
);
}
);
ChipItem.displayName = "ChipItem";
const ChipInput = React.forwardRef(
({ className, placeholder = "Add chip...", onAdd, validateInput, ...props }, ref) => {
const {
value,
onChange,
multiple,
maxChips,
disabled,
size,
// Style props
fontSize,
fontWeight,
fontFamily,
textColor,
placeholderColor
} = useChip();
const [inputValue, setInputValue] = useState("");
const handleKeyDown = (e) => {
if (e.key === "Enter" || e.key === ",") {
e.preventDefault();
const trimmedValue = inputValue.trim();
if (trimmedValue) {
if (validateInput) {
const validation = validateInput(trimmedValue);
if (validation === true) {
addChip(trimmedValue);
} else if (typeof validation === "string") {
console.warn(validation);
}
} else {
addChip(trimmedValue);
}
}
} else if (e.key === "Backspace" && !inputValue && Array.isArray(value) && value.length > 0) {
const newValue = value.slice(0, -1);
onChange(newValue.length > 0 ? newValue : null);
}
};
const addChip = (chipValue) => {
if (onAdd) {
onAdd(chipValue);
}
if (multiple && Array.isArray(value)) {
if (!value.includes(chipValue) && (!maxChips || value.length < maxChips)) {
onChange([...value, chipValue]);
}
} else {
onChange(chipValue);
}
setInputValue("");
};
const handleChange = (e) => {
setInputValue(e.target.value);
};
const baseStyles = cn("flex-1 min-w-0 bg-transparent outline-none", "placeholder:text-gray-400");
const sizes = {
sm: "text-xs",
md: "text-sm",
lg: "text-base"
};
const customInputStyles = {};
if (fontSize) customInputStyles.fontSize = fontSize;
if (fontWeight) customInputStyles.fontWeight = fontWeight;
if (fontFamily) customInputStyles.fontFamily = fontFamily;
if (textColor) customInputStyles.color = textColor;
if (placeholderColor) {
customInputStyles["--placeholder-color"] = placeholderColor;
}
return /* @__PURE__ */ jsx(
"input",
{
ref,
type: "text",
className: cn(baseStyles, sizes[size || "md"], className),
style: customInputStyles,
value: inputValue,
onChange: handleChange,
onKeyDown: handleKeyDown,
placeholder,
disabled,
...props
}
);
}
);
ChipInput.displayName = "ChipInput";
const PopoverContext = createContext(null);
const usePopover = () => {
const context = useContext(PopoverContext);
if (!context) {
throw new Error("usePopover must be used within a Popover component");
}
return context;
};
PopoverContext.displayName = "PopoverContext";
const OFFSET = 8;
const ARROW_SIZE = 8;
function calculatePopoverPosition(triggerElement, contentElement, preferredPosition, hasArrow = true, offset = OFFSET, offsetTop = 0, offsetBottom = 0, offsetLeft = 0, offsetRight = 0) {
const triggerRect = triggerElement.getBoundingClientRect();
const contentRect = contentElement.getBoundingClientRect();
const viewport = {
width: window.innerWidth,
height: window.innerHeight
};
const arrowOffset = hasArrow ? ARROW_SIZE : 0;
const totalOffset = offset + arrowOffset;
const positions = {
top: {
top: triggerRect.top - contentRect.height - totalOffset - offsetTop,
left: triggerRect.left + (triggerRect.width - contentRect.width) / 2 + offsetLeft - offsetRight
},
"top-start": {
top: triggerRect.top - contentRect.height - totalOffset - offsetTop,
left: triggerRect.left + offsetLeft
},
"top-end": {
top: triggerRect.top - contentRect.height - totalOffset - offsetTop,
left: triggerRect.right - contentRect.width - offsetRight
},
bottom: {
top: triggerRect.bottom + totalOffset + offsetBottom,
left: triggerRect.left + (triggerRect.width - contentRect.width) / 2 + offsetLeft - offsetRight
},
"bottom-start": {
top: triggerRect.bottom + totalOffset + offsetBottom,
left: triggerRect.left + offsetLeft
},
"bottom-end": {
top: triggerRect.bottom + totalOffset + offsetBottom,
left: triggerRect.right - contentRect.width - offsetRight
},
left: {
top: triggerRect.top + (triggerRect.height - contentRect.height) / 2 + offsetTop - offsetBottom,
left: triggerRect.left - contentRect.width - totalOffset - offsetLeft
},
"left-start": {
top: triggerRect.top + offsetTop,
left: triggerRect.left - contentRect.width - totalOffset - offsetLeft
},
"left-end": {
top: triggerRect.bottom - contentRect.height - offsetBottom,
left: triggerRect.left - contentRect.width - totalOffset - offsetLeft
},
right: {
top: triggerRect.top + (triggerRect.height - contentRect.height) / 2 + offsetTop - offsetBottom,
left: triggerRect.right + totalOffset + offsetRight
},
"right-start": {
top: triggerRect.top + offsetTop,
left: triggerRect.right + totalOffset + offsetRight
},
"right-end": {
top: triggerRect.bottom - contentRect.height - offsetBottom,
left: triggerRect.right + totalOffset + offsetRight
}
};
const fitsInViewport = (pos) => {
return pos.top >= 0 && pos.left >= 0 && pos.top + contentRect.height <= viewport.height && pos.left + contentRect.width <= viewport.width;
};
let actualPosition = preferredPosition;
let finalPosition = positions[preferredPosition];
if (preferredPosition === "auto" || !fitsInViewport(finalPosition)) {
const positionPriority = [
"bottom",
"top",
"right",
"left",
"bottom-start",
"bottom-end",
"top-start",
"top-end",
"right-start",
"right-end",
"left-start",
"left-end"
];
for (const pos of positionPriority) {
const testPos = positions[pos];
if (fitsInViewport(testPos)) {
actualPosition = pos;
finalPosition = testPos;
break;
}
}
}
const constrainedPosition = {
top: Math.max(0, Math.min(finalPosition.top, viewport.height - contentRect.height)),
left: Math.max(0, Math.min(finalPosition.left, viewport.width - contentRect.width))
};
let arrowPosition;
if (hasArrow) {
const isTopOrBottom = actualPosition.startsWith("top") || actualPosition.startsWith("bottom");
const isLeftOrRight = actualPosition.startsWith("left") || actualPosition.startsWith("right");
if (isTopOrBottom) {
const triggerCenter = triggerRect.left + triggerRect.width / 2;
const contentLeft = constrainedPosition.left;
const arrowLeft = triggerCenter - contentLeft - ARROW_SIZE / 2;
arrowPosition = {
left: Math.max(8, Math.min(arrowLeft, contentRect.width - ARROW_SIZE - 8)),
top: actualPosition.startsWith("top") ? contentRect.height - ARROW_SIZE / 2 : -ARROW_SIZE / 2,
transform: "rotate(45deg)"
};
} else if (isLeftOrRight) {
const triggerCenter = triggerRect.top + triggerRect.height / 2;
const contentTop = constrainedPosition.top;
const arrowTop = triggerCenter - contentTop - ARROW_SIZE / 2;
arrowPosition = {
top: Math.max(8, Math.min(arrowTop, contentRect.height - ARROW_SIZE - 8)),
left: actualPosition.startsWith("left") ? contentRect.width - ARROW_SIZE / 2 : -ARROW_SIZE / 2,
transform: "rotate(45deg)"
};
}
}
return {
top: constrainedPosition.top,
left: constrainedPosition.left,
actualPosition,
arrowPosition
};
}
const Popover = forwardRef(
({
children,
// Controlled/uncontrolled props
open,
defaultOpen = false,
onOpenChange,
// Positioning and behavior
position = "bottom",
trigger = "click",
closeOnBlur = true,
closeOnEscape = true,
closeOnOutsideClick = true,
// Styling
variant = "default",
size = "md",
tone = "light",
// Arrow
hasArrow = true,
// Animation
transition = "fade",
enterDuration = 200,
exitDuration = 150,
easing = "cubic-bezier(0.4, 0, 0.2, 1)",
// Portal
portalContainer: _portalContainer,
// Focus management
initialFocus,
returnFocus = true,
// Render props
renderContent: _renderContent,
renderTrigger: _renderTrigger,
// Event handlers
onClose,
onOpen,
onEscapeKeyDown,
onOutsideClick,
onAnimationStart: _onAnimationStart,
onAnimationEnd: _onAnimationEnd,
onEnter: _onEnter,
onExit: _onExit,
onFocus: _onFocus,
onBlur: _onBlur,
onMouseEnter: _onMouseEnter,
onMouseLeave: _onMouseLeave,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
headingColor,
descriptionColor,
backgroundColor,
textColor,
shadowColor,
arrowColor,
focusBorderColor,
focusRingColor,
focusRingOffset,
boxShadow,
hoverShadow,
focusBoxShadow,
padding,
margin,
gap,
offset,
arrowSize,
// Fine-tuned positioning offsets
offsetTop = 0,
offsetBottom = 0,
offsetLeft = 0,
offsetRight = 0,
// Accessibility
"aria-label": _ariaLabel,
"aria-describedby": _ariaDescribedby,
role: _role = "dialog",
...props
}, ref) => {
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const isControlled = open !== void 0;
const currentOpen = isControlled ? open : internalOpen;
const handleOpenChange = useCallback(
(newOpen) => {
if (!isControlled) {
setInternalOpen(newOpen);
}
onOpenChange == null ? void 0 : onOpenChange(newOpen);
if (newOpen) {
onOpen == null ? void 0 : onOpen();
} else {
onClose == null ? void 0 : onClose();
}
},
[isControlled, onOpenChange, onOpen, onClose]
);
const triggerRef = useRef(null);
const contentRef = useRef(null);
const arrowRef = useRef(null);
const triggerId = useId();
const contentId = useId();
const titleId = useId();
const descriptionId = useId();
const animation = useMemo(
() => ({
enterDuration,
exitDuration,
easing,
animationType: transition
}),
[enterDuration, exitDuration, easing, transition]
);
useEffect(() => {
if (!currentOpen || !closeOnEscape) return;
const handleEscape = (event) => {
if (event.key === "Escape") {
event.preventDefault();
handleOpenChange(false);
onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(event);
}
};
document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape);
}, [currentOpen, closeOnEscape, handleOpenChange, onEscapeKeyDown]);
useEffect(() => {
if (!currentOpen || !closeOnOutsideClick) return;
const handleOutsideClick = (event) => {
const target = event.target;
if (contentRef.current && !contentRef.current.contains(target) && triggerRef.current && !triggerRef.current.contains(target)) {
handleOpenChange(false);
onOutsideClick == null ? void 0 : onOutsideClick(event);
}
};
document.addEventListener("mousedown", handleOutsideClick);
return () => document.removeEventListener("mousedown", handleOutsideClick);
}, [currentOpen, closeOnOutsideClick, handleOpenChange, onOutsideClick]);
useEffect(() => {
if (currentOpen && (initialFocus == null ? void 0 : initialFocus.current)) {
initialFocus.current.focus();
}
}, [currentOpen, initialFocus]);
useEffect(() => {
const currentTrigger = triggerRef.current;
return () => {
if (!currentOpen && returnFocus && currentTrigger) {
currentTrigger.focus();
}
};
}, [currentOpen, returnFocus]);
const contextValue = useMemo(
() => ({
open: currentOpen,
setOpen: handleOpenChange,
position,
trigger,
variant,
size,
tone,
closeOnBlur,
closeOnEscape,
closeOnOutsideClick,
hasArrow,
triggerId,
contentId,
titleId,
descriptionId,
arrowRef,
triggerRef,
contentRef,
animation,
onOpenChange,
onClose,
onOpen,
// Style props
borderColor,
borderWidth,
borderRadius,
borderStyle,
backgroundColor,
textColor,
shadowColor,
arrowColor,
fontSize,
fontWeight,
fontFamily,
headingColor,
descriptionColor,
padding,
margin,
gap,
offset,
arrowSize,
offsetTop,
offsetBottom,
offsetLeft,
offsetRight,
focusBorderColor,
focusRingColor,
focusRingOffset,
boxShadow,
hoverShadow,
focusBoxShadow
}),
[
currentOpen,
handleOpenChange,
position,
trigger,
variant,
size,
tone,
closeOnBlur,
closeOnEscape,
closeOnOutsideClick,
hasArrow,
triggerId,
contentId,
titleId,
descriptionId,
animation,
onOpenChange,
onClose,
onOpen,
borderColor,
borderWidth,
borderRadius,
borderStyle,
backgroundColor,
textColor,
shadowColor,
arrowColor,
fontSize,
fontWeight,
fontFamily,
headingColor,
descriptionColor,
padding,
margin,
gap,
offset,
arrowSize,
offsetTop,
offsetBottom,
offsetLeft,
offsetRight,
focusBorderColor,
focusRingColor,
focusRingOffset,
boxShadow,
hoverShadow,
focusBoxShadow
]
);
return /* @__PURE__ */ jsx(PopoverContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { ref, role: "group", ...props, children }) });
}
);
Popover.displayName = "Popover";
const PopoverTrigger = forwardRef(
({ children, asChild = false, onClick, onMouseEnter, onMouseLeave, onBlur, ...props }, ref) => {
const { open, setOpen, trigger, triggerId, contentId, triggerRef, closeOnBlur } = React.useContext(PopoverContext);
const handleClick = useCallback(
(event) => {
if (trigger === "click") {
setOpen(!open);
}
onClick == null ? void 0 : onClick(event);
},
[trigger, open, setOpen, onClick]
);
const handleMouseEnter = useCallback(
(event) => {
if (trigger === "hover") {
setOpen(true);
}
onMouseEnter == null ? void 0 : onMouseEnter(event);
},
[trigger, setOpen, onMouseEnter]
);
const handleMouseLeave = useCallback(
(event) => {
if (trigger === "hover") {
setOpen(false);
}
onMouseLeave == null ? void 0 : onMouseLeave(event);
},
[trigger, setOpen, onMouseLeave]
);
const handleBlur = useCallback(
(event) => {
if (closeOnBlur) {
setOpen(false);
}
onBlur == null ? void 0 : onBlur(event);
},
[closeOnBlur, setOpen, onBlur]
);
const triggerProps = {
ref: (node) => {
if (node) {
triggerRef.current = node;
}
if (typeof ref === "function") ref(node);
else if (ref) ref.current = node;
},
id: triggerId,
"aria-haspopup": "dialog",
"aria-expanded": open,
"aria-controls": open ? contentId : void 0,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onBlur: handleBlur,
...props
};
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children, triggerProps);
}
return /* @__PURE__ */ jsx("button", { type: "button", ...triggerProps, children });
}
);
PopoverTrigger.displayName = "PopoverTrigger";
const PopoverContent = forwardRef(
({ children, className, portalContainer, style, ...props }, ref) => {
const {
open,
position,
variant,
size,
tone,
contentId,
titleId,
descriptionId,
contentRef,
triggerRef,
hasArrow,
animation,
offset,
offsetTop,
offsetBottom,
offsetLeft,
offsetRight,
// Style props
borderColor,
borderWidth,
borderRadius,
borderStyle,
backgroundColor,
textColor,
fontSize,
fontWeight,
fontFamily,
padding,
boxShadow
} = React.useContext(PopoverContext);
const [positioningResult, setPositioningResult] = useState(null);
useEffect(() => {
if (!open || !triggerRef.current) {
setPositioningResult(null);
return;
}
const updatePosition = () => {
if (triggerRef.current && contentRef.current) {
try {
const positioning = calculatePopoverPosition(
triggerRef.current,
contentRef.current,
position,
hasArrow,
parseInt(offset || "8"),
offsetTop || 0,
offsetBottom || 0,
offsetLeft || 0,
offsetRight || 0
);
setPositioningResult(positioning);
} catch (error) {
console.error("Error calculating popover position:", error);
const triggerRect = triggerRef.current.getBoundingClientRect();
setPositioningResult({
top: triggerRect.bottom + 8,
left: triggerRect.left,
actualPosition: position
});
}
}
};
const timeoutId = setTimeout(() => {
updatePosition();
}, 0);
const handleUpdate = () => updatePosition();
window.addEventListener("scroll", handleUpdate, true);
window.addEventListener("resize", handleUpdate);
return () => {
clearTimeout(timeoutId);
window.removeEventListener("scroll", handleUpdate, true);
window.removeEventListener("resize", handleUpdate);
};
}, [
open,
position,
hasArrow,
offset,
offsetTop,
offsetBottom,
offsetLeft,
offsetRight,
triggerRef,
contentRef
]);
if (!open) return null;
const baseStyles = "outline-none";
const variants = {
default: "bg-white border border-gray-200 shadow-lg",
bordered: "bg-white border-2 border-gray-300 shadow-md",
shadowed: "bg-white border-0 shadow-xl",
filled: "bg-gray-50 border border-gray-200 shadow-sm",
translucent: "bg-white/95 backdrop-blur-sm border border-gray-200/50 shadow-lg",
minimal: "bg-white border border-gray-100 shadow-sm"
};
const sizes = {
sm: "text-sm max-w-xs",
md: "text-base max-w-sm",
lg: "text-lg max-w-md"
};
const tones = {
light: "",
dark: "bg-gray-900 text-white border-gray-700",
info: "bg-blue-50 text-blue-900 border-blue-200",
danger: "bg-red-50 text-red-900 border-red-200",
success: "bg-green-50 text-green-900 border-green-200",
warning: "bg-yellow-50 text-yellow-900 border-yellow-200"
};
const paddingStyles = {
sm: "p-3",
md: "p-4",
lg: "p-6"
};
const radiusStyles = {
sm: "rounded-md",
md: "rounded-lg",
lg: "rounded-xl"
};
const getAnimationStyles = () => {
switch (animation.animationType) {
case "fade":
return `transition-opacity duration-${animation.enterDuration} ${animation.easing}`;
case "scale":
return `transition-all duration-${animation.enterDuration} ${animation.easing} animate-in zoom-in-95`;
case "slide":
return `transition-all duration-${animation.enterDuration} ${animation.easing} animate-in slide-in-from-top-2`;
case "pop":
return `transition-all duration-${animation.enterDuration} ${animation.easing} animate-in zoom-in-95 slide-in-from-bottom-2`;
default:
return "";
}
};
const getFallbackPosition = () => {
if (!triggerRef.current) return { top: 0, left: 0 };
const rect = triggerRef.current.getBoundingClientRect();
const pos = {
top: rect.bottom + 8,
left: rect.left
};
return pos;
};
const fallbackPos = getFallbackPosition();
const customStyles = {
...style,
position: "fixed",
top: (positioningResult == null ? void 0 : positioningResult.top) ?? fallbackPos.top,
left: (positioningResult == null ? void 0 : positioningResult.left) ?? fallbackPos.left,
zIndex: 9999
};
if (borderWidth) customStyles.borderWidth = borderWidth;
if (borderColor) customStyles.borderColor = borderColor;
if (borderStyle) customStyles.borderStyle = borderStyle;
if (borderRadius) customStyles.borderRadius = borderRadius;
if (fontSize) customStyles.fontSize = fontSize;
if (fontWeight) customStyles.fontWeight = fontWeight;
if (fontFamily) customStyles.fontFamily = fontFamily;
if (backgroundColor) customStyles.backgroundColor = backgroundColor;
if (textColor) customStyles.color = textColor;
if (boxShadow) customStyles.boxShadow = boxShadow;
if (padding) customStyles.padding = padding;
const content = /* @__PURE__ */ jsx(
"div",
{
ref: (node) => {
if (contentRef) {
contentRef.current = node;
}
if (typeof ref === "function") ref(node);
else if (ref) ref.current = node;
},
id: contentId,
className: cn(
baseStyles,
variants[variant],
sizes[size],
tones[tone],
!padding && paddingStyles[size],
!borderRadius && radiusStyles[size],
getAnimationStyles(),
className
),
style: customStyles,
role: "dialog",
"aria-labelledby": titleId,
"aria-describedby": descriptionId,
...props,
children
}
);
const container = portalContainer || document.body;
return createPortal(content, container);
}
);
PopoverContent.displayName = "PopoverContent";
const PopoverArrow = forwardRef(
({ className, style, ...props }, ref) => {
const {
hasArrow,
open,
position,
arrowRef,
triggerRef,
contentRef,
variant: _variant,
tone,
arrowColor,
arrowSize,
offset,
offsetTop,
offsetBottom,
offsetLeft,
offsetRight
} = React.useContext(PopoverContext);
const [arrowPosition, setArrowPosition] = useState({});
useEffect(() => {
if (!open || !hasArrow || !triggerRef.current || !contentRef.current) {
return;
}
const updateArrowPosition = () => {
if (triggerRef.current && contentRef.current) {
const positioning = calculatePopoverPosition(
triggerRef.current,
contentRef.current,
position,
hasArrow,
parseInt(offset || "8"),
offsetTop || 0,
offsetBottom || 0,
offsetLeft || 0,
offsetRight || 0
);
if (positioning.arrowPosition) {
setArrowPosition(positioning.arrowPosition);
}
}
};
updateArrowPosition();
const handleUpdate = () => updateArrowPosition();
window.addEventListener("scroll", handleUpdate, true);
window.addEventListener("resize", handleUpdate);
return () => {
window.removeEventListener("scroll", handleUpdate, true);
window.removeEventListener("resize", handleUpdate);
};
}, [
open,
hasArrow,
position,
offset,
offsetTop,
offsetBottom,
offsetLeft,
offsetRight,
triggerRef,
contentRef
]);
if (!hasArrow) return null;
const getArrowColor = () => {
if (arrowColor) return arrowColor;
switch (tone) {
case "dark":
return "#1f2937";
case "info":
return "#dbeafe";
case "danger":
return "#fef2f2";
case "success":
return "#f0fdf4";
case "warning":
return "#fffbeb";
default:
return "#ffffff";
}
};
const customStyles = {
...style,
...arrowPosition,
width: arrowSize || "8px",
height: arrowSize || "8px",
backgroundColor: getArrowColor()
};
return /* @__PURE__ */ jsx(
"div",
{
ref: (node) => {
if (arrowRef) {
arrowRef.current = node;
}
if (typeof ref === "function") ref(node);
else if (ref) ref.current = node;
},
className: cn("absolute border border-inherit", className),
style: customStyles,
...props
}
);
}
);
PopoverArrow.displayName = "PopoverArrow";
const PopoverTitle = forwardRef(
({ children, className, level = 3, style, ...props }, ref) => {
const { titleId, size, headingColor, fontSize, fontWeight } = React.useContext(PopoverContext);
const titleSizes = {
sm: "text-sm font-medium",
md: "text-base font-semibold",
lg: "text-lg font-semibold"
};
const customStyles = { ...style };
if (headingColor) customStyles.color = headingColor;
if (fontSize) customStyles.fontSize = fontSize;
if (fontWeight) customStyles.fontWeight = fontWeight;
return React.createElement(
`h${level}`,
{
ref,
id: titleId,
className: cn("leading-none", titleSizes[size], className),
style: customStyles,
...props
},
children
);
}
);
PopoverTitle.displayName = "PopoverTitle";
const PopoverDescription = forwardRef(
({ children, className, style, ...props }, ref) => {
const { descriptionId, size, descriptionColor, fontSize } = React.useContext(PopoverContext);
const descriptionSizes = {
sm: "text-xs",
md: "text-sm",
lg: "text-base"
};
const customStyles = { ...style };
if (descriptionColor) customStyles.color = descriptionColor;
if (fontSize) customStyles.fontSize = fontSize;
return /* @__PURE__ */ jsx(
"p",
{
ref,
id: descriptionId,
className: cn("text-gray-600 leading-relaxed", descriptionSizes[size], className),
style: customStyles,
...props,
children
}
);
}
);
PopoverDescription.displayName = "PopoverDescription";
const PopoverClose = forwardRef(
({ children, asChild = false, onClick, ...props }, ref) => {
const { setOpen } = React.useContext(PopoverContext);
const handleClick = useCallback(
(event) => {
setOpen(false);
onClick == null ? void 0 : onClick(event);
},
[setOpen, onClick]
);
const closeProps = {
ref,
onClick: handleClick,
...props
};
if (asChild && React.isValidElement(children)) {
return React.cloneElement(children, closeProps);
}
return /* @__PURE__ */ jsx("button", { type: "button", ...closeProps, children: children || /* @__PURE__ */ jsx(
"svg",
{
className: "w-4 h-4",
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx("path", { d: "M6 18L18 6M6 6l12 12" })
}
) });
}
);
PopoverClose.displayName = "PopoverClose";
const PopoverCompound = Popover;
PopoverCompound.Trigger = PopoverTrigger;
PopoverCompound.Content = PopoverContent;
PopoverCompound.Arrow = PopoverArrow;
PopoverCompound.Title = PopoverTitle;
PopoverCompound.Description = PopoverDescription;
PopoverCompound.Close = PopoverClose;
const SliderContext = createContext(void 0);
const useSlider = () => {
const context = useContext(SliderContext);
if (!context) {
throw new Error("useSlider must be used within a Slider");
}
return context;
};
const Slider = forwardRef(
({
className,
value: controlledValue,
defaultValue = 0,
min = 0,
max = 100,
step = 1,
disabled = false,
readOnly = false,
required = false,
name,
range = false,
variant = "default",
size = "md",
status = "default",
label,
labelIcon,
showTooltip = true,
tooltipPosition = "top",
formatTooltip,
valueLabelDisplay = "auto",
marks,
showMarks = false,
markStep,
markIcons = false,
onChange,
onChangeEnd,
onFocus,
onBlur,
onDragStart,
onDragEnd,
onKeyDown,
transition = "smooth",
transitionDuration = 200,
renderThumb,
renderMark,
children,
style,
...props
}, ref) => {
const [uncontrolledValues, setUncontrolledValues] = useState(() => {
const initialValue = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
return initialValue.map((v) => Math.max(min, Math.min(max, v)));
});
const [focused, setFocused] = useState(false);
const [dragging, setDragging] = useState(false);
const [hovered, setHovered] = useState(false);
const [tooltipVisible, setTooltipVisible] = useState(false);
const trackRef = useRef(null);
const isControlled = controlledValue !== void 0;
const values = isControlled ? Array.isArray(controlledValue) ? controlledValue : [controlledValue] : uncontrolledValues;
const rangeConfig = { min, max, step };
const getValueFromPercentage = useCallback(
(percentage) => {
const clampedPercentage = Math.max(0, Math.min(100, percentage));
const value = min + clampedPercentage / 100 * (max - min);
return snapToStep(value);
},
[min, max, step]
);
const getPercentageFromValue = useCallback(
(value) => {
const clampedValue = Math.max(min, Math.min(max, value));
return (clampedValue - min) / (max - min) * 100;
},
[min, max]
);
const snapToStep = useCallback(
(value) => {
const steps = Math.round((value - min) / step);
return min + steps * step;
},
[min, step]
);
const formatValue = useCallback(
(value) => {
if (formatTooltip) return formatTooltip(value);
return value.toString();
},
[formatTooltip]
);
const handleChange = useCallback(
(newValues) => {
if (disabled || readOnly) return;
const clampedValues = newValues.map((v) => Math.max(min, Math.min(max, snapToStep(v))));
if (!isControlled) {
setUncontrolledValues(clampedValues);
}
onChange == null ? void 0 : onChange(clampedValues);
},
[disabled, readOnly, min, max, isControlled, onChange, snapToStep]
);
const handleFocus = useCallback(() => {
setFocused(true);
onFocus == null ? void 0 : onFocus();
}, [onFocus]);
const handleBlur = useCallback(() => {
setFocused(false);
onBlur == null ? void 0 : onBlur();
}, [onBlur]);
const handleDragStart = useCallback(() => {
setDragging(true);
onDragStart == null ? void 0 : onDragStart();
}, [onDragStart]);
const handleDragEnd = useCallback(() => {
setDragging(false);
onChangeEnd == null ? void 0 : onChangeEnd(values);
onDragEnd == null ? void 0 : onDragEnd();
}, [onDragEnd, onChangeEnd, values]);
const handleKeyDown = useCallback(
(event) => {
if (disabled || readOnly) return;
const currentValue = values[0];
let newValue = currentValue;
switch (event.key) {
case "ArrowLeft":
case "ArrowDown":
event.preventDefault();
newValue = Math.max(min, currentValue - step);
break;
case "ArrowRight":
case "ArrowUp":
event.preventDefault();
newValue = Math.min(max, currentValue + step);
break;
case "PageDown":
event.preventDefault();
newValue = Math.max(min, currentValue - step * 10);
break;
case "PageUp":
event.preventDefault();
newValue = Math.min(max, currentValue + step * 10);
break;
case "Home":
event.preventDefault();
newValue = min;
break;
case "End":
event.preventDefault();
newValue = max;
break;
default:
onKeyDown == null ? void 0 : onKeyDown(event);
return;
}
handleChange([newValue]);
},
[disabled, readOnly, values, min, max, step, handleChange, onKeyDown]
);
const statusColors = useMemo(() => {
const colors = {
default: {
track: "#e0e0e0",
range: "#1976d2",
thumb: "#1976d2",
focus: "#1976d2"
},
success: {
track: "#e0e0e0",
range: "#2e7d32",
thumb: "#2e7d32",
focus: "#2e7d32"
},
warning: {
track: "#e0e0e0",
range: "#ed6c02",
thumb: "#ed6c02",
focus: "#ed6c02"
},
error: {
track: "#e0e0e0",
range: "#d32f2f",
thumb: "#d32f2f",
focus: "#d32f2f"
},
info: {
track: "#e0e0e0",
range: "#0288d1",
thumb: "#0288d1",
focus: "#0288d1"
}
};
return colors[status];
}, [status]);
const dimensions = useMemo(() => {
const sizeDimensions = {
sm: {
trackHeight: "2px",
thumbSize: "8px",
padding: "4px",
labelFontSize: "0.75rem"
},
md: {
trackHeight: "4px",
thumbSize: "12px",
padding: "6px",
labelFontSize: "0.875rem"
},
lg: {
trackHeight: "6px",
thumbSize: "16px",
padding: "8px",
labelFontSize: "1rem"
}
};
return sizeDimensions[size];
}, [size]);
const sliderValues = values.map((value) => ({
value,
percentage: getPercentageFromValue(value)
}));
const handleTrackClick = useCallback(
(event) => {
if (disabled || readOnly) return;
const trackElement = event.currentTarget;
const trackRect = trackElement.getBoundingClientRect();
const percentage = (event.clientX - trackRect.left) / trackRect.width * 100;
const newValue = getValueFromPercentage(percentage);
if (range && sliderValues.length > 1) {
const distances = sliderValues.map((sv) => Math.abs(sv.value - newValue));
const closestIndex = distances.indexOf(Math.min(...distances));
const newValues = [...values];
newValues[closestIndex] = newValue;
handleChange(newValues);
} else {
handleChange([newValue]);
}
},
[disabled, readOnly, range, sliderValues, values, getValueFromPercentage, handleChange]
);
const contextValue = {
values: sliderValues,
range: rangeConfig,
isRange: range,
disabled,
readOnly,
focused,
dragging,
hovered,
onChange: handleChange,
onFocus: handleFocus,
onBlur: handleBlur,
onDragStart: handleDragStart,
onDragEnd: handleDragEnd,
getValueFromPercentage,
getPercentageFromValue,
snapToStep,
formatValue,
variant,
size,
status
};
const shouldShowTooltip = showTooltip && (valueLabelDisplay === "on" || valueLabelDisplay === "auto" && (focused || dragging || tooltipVisible));
return /* @__PURE__ */ jsx(SliderContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn("relative", className),
style,
role: "slider",
"aria-valuemin": min,
"aria-valuemax": max,
"aria-valuenow": values[0],
"aria-valuetext": formatValue(values[0]),
"aria-disabled": disabled,
"aria-readonly": readOnly,
tabIndex: disabled || readOnly ? -1 : 0,
onFocus: handleFocus,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
onMouseEnter: () => setHovered(true),
onMouseLeave: () => setHovered(false),
...props,
children: [
label && /* @__PURE__ */ jsxs(
"div",
{
className: "mb-2 flex items-center gap-2",
style: {
color: "#374151",
fontSize: dimensions.labelFontSize,
fontWeight: "500",
marginBottom: "0.5rem"
},
children: [
labelIcon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", style: { fontSize: "0.875em" }, children: labelIcon }),
/* @__PURE__ */ jsx("span", { children: label })
]
}
),
/* @__PURE__ */ jsxs(
"div",
{
ref: trackRef,
className: "relative slider-track",
role: "slider",
tabIndex: disabled || readOnly ? -1 : 0,
onMouseDown: handleTrackClick,
onKeyDown: handleKeyDown,
style: {
padding: dimensions.padding,
position: "relative",
width: "100%",
height: dimensions.trackHeight,
backgroundColor: statusColors.track,
borderRadius: "9999px",
transition: transition === "none" ? "none" : `all ${transitionDuration}ms ease-in-out`,
cursor: disabled || readOnly ? "not-allowed" : "pointer",
opacity: disabled ? 0.5 : 1,
marginBottom: "24px",
...focused && {
outline: "none",
boxShadow: `0 0 0 2px ${statusColors.focus}`
}
},
children: [
variant !== "removed-track" && /* @__PURE__ */ jsx(
"div",
{
className: "absolute inset-0",
style: {
backgroundColor: statusColors.track,
borderRadius: "9999px"
}
}
),
sliderValues.length > 0 && variant !== "removed-track" && /* @__PURE__ */ jsx(
"div",
{
className: "absolute inset-0",
style: {
backgroundColor: statusColors.range,
borderRadius: "9999px",
left: variant === "inverted-track" ? `${sliderValues[0].percentage}%` : "0%",
right: variant === "inverted-track" ? "0%" : range && sliderValues.length > 1 ? `${Math.max(0, 100 - sliderValues[1].percentage)}%` : `${Math.max(0, 100 - sliderValues[0].percentage)}%`
}
}
),
showMarks && (marks || markStep) && /* @__PURE__ */ jsx(
SliderMarks,
{
marks,
markStep,
markIcons,
renderMark
}
),
variant !== "thumbless" && sliderValues.map((sliderValue, index) => /* @__PURE__ */ jsx(
SliderThumb,
{
value: sliderValue,
index,
renderThumb,
showTooltip: shouldShowTooltip,
tooltipPosition,
onDragStart: handleDragStart,
onDragEnd: handleDragEnd,
onValueChange: (newValue) => {
const newValues = [...values];
newValues[index] = newValue;
handleChange(newValues);
},
onTooltipVisibilityChange: setTooltipVisible
},
index
)),
/* @__PURE__ */ jsx(
"input",
{
type: "hidden",
name,
value: values.join(","),
required,
disabled
}
)
]
}
),
children
]
}
) });
}
);
Slider.displayName = "Slider";
const SliderTrack = forwardRef(
({ className, children, ...props }, ref) => {
const { disabled, readOnly } = useSlider();
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("relative", className),
style: {
cursor: disabled || readOnly ? "not-allowed" : "pointer"
},
...props,
children
}
);
}
);
SliderTrack.displayName = "SliderTrack";
const SliderRange = forwardRef(
({ className, children, ...props }, ref) => {
const { values, isRange } = useSlider();
if (values.length === 0) return null;
const leftPercentage = values[0].percentage;
const rightPercentage = isRange && values.length > 1 ? values[1].percentage : 100;
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("absolute inset-0", className),
style: {
left: `${leftPercentage}%`,
right: `${100 - rightPercentage}%`
},
...props,
children
}
);
}
);
SliderRange.displayName = "SliderRange";
const SliderThumb = forwardRef(
({
className,
value,
index,
renderThumb,
showTooltip = true,
tooltipPosition = "top",
onValueChange,
onDragStart,
onDragEnd,
onTooltipVisibilityChange,
...props
}, _ref) => {
const { disabled, readOnly, getValueFromPercentage, formatValue, size, status } = useSlider();
const [isDragging, setIsDragging] = useState(false);
const [tooltipVisible, setTooltipVisible] = useState(false);
const [hovered, setHovered] = useState(false);
const thumbRef = useRef(null);
const handleMouseDown = useCallback(
(e) => {
if (disabled || readOnly) return;
e.preventDefault();
e.stopPropagation();
setIsDragging(true);
onDragStart == null ? void 0 : onDragStart();
},
[disabled, readOnly, onDragStart]
);
const handleMouseUp = useCallback(() => {
if (isDragging) {
setIsDragging(false);
onDragEnd == null ? void 0 : onDragEnd();
}
}, [isDragging, onDragEnd]);
const handleMouseMove = useCallback(
(e) => {
if (!isDragging || !onValueChange) return;
const trackElement = document.querySelector(".slider-track");
if (!trackElement) return;
const trackRect = trackElement.getBoundingClientRect();
const percentage = Math.max(
0,
Math.min(100, (e.clientX - trackRect.left) / trackRect.width * 100)
);
const newValue = getValueFromPercentage(percentage);
const currentValue = value.value;
if (Math.abs(newValue - currentValue) > 0.1) {
onValueChange(newValue);
}
},
[isDragging, onValueChange, getValueFromPercentage, value.value]
);
useEffect(() => {
if (isDragging) {
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("mouseup", handleMouseUp);
return () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
}
}, [isDragging, handleMouseMove, handleMouseUp]);
const dimensions = useMemo(() => {
const sizeDimensions = {
sm: { thumbSize: "8px" },
md: { thumbSize: "12px" },
lg: { thumbSize: "16px" }
};
return sizeDimensions[size];
}, [size]);
const statusColors = useMemo(() => {
const colors = {
default: { thumb: "#1976d2" },
success: { thumb: "#2e7d32" },
warning: { thumb: "#ed6c02" },
error: { thumb: "#d32f2f" },
info: { thumb: "#0288d1" }
};
return colors[status];
}, [status]);
const thumbStyles = {
position: "absolute",
top: "50%",
left: `${Math.max(0, Math.min(100, value.percentage))}%`,
transform: isDragging ? "translate(-50%, -50%) scale(1.2)" : hovered && !disabled ? "translate(-50%, -50%) scale(1.1)" : "translate(-50%, -50%)",
width: dimensions.thumbSize,
height: dimensions.thumbSize,
backgroundColor: statusColors.thumb,
border: "2px solid #ffffff",
borderRadius: "50%",
boxShadow: isDragging ? "0 0 0 8px rgba(25, 118, 210, 0.16)" : hovered && !disabled ? "0 0 0 6px rgba(25, 118, 210, 0.12)" : "0 2px 4px 0 rgba(0, 0, 0, 0.2)",
cursor: disabled || readOnly ? "not-allowed" : "grab",
zIndex: isDragging ? 10 : 1,
transition: "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
userSelect: "none",
display: "flex",
alignItems: "center",
justifyContent: "center"
};
const handleTooltipVisibilityChange = (visible) => {
setTooltipVisible(visible);
onTooltipVisibilityChange == null ? void 0 : onTooltipVisibilityChange(visible);
};
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"div",
{
ref: thumbRef,
className: cn("absolute", className),
style: thumbStyles,
onMouseDown: handleMouseDown,
onMouseEnter: () => {
setHovered(true);
handleTooltipVisibilityChange(true);
},
onMouseLeave: () => {
setHovered(false);
handleTooltipVisibilityChange(false);
},
...props,
children: renderThumb ? renderThumb(value, index) : null
}
),
showTooltip && tooltipVisible && /* @__PURE__ */ jsx(
"div",
{
className: "absolute pointer-events-none",
style: {
top: tooltipPosition === "bottom" ? "100%" : "-30px",
left: `${value.percentage}%`,
transform: "translateX(-50%)",
backgroundColor: "#374151",
color: "#ffffff",
padding: "4px 8px",
borderRadius: "4px",
fontSize: "0.75rem",
whiteSpace: "nowrap",
zIndex: 20,
boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)"
},
children: formatValue(value.value)
}
)
] });
}
);
SliderThumb.displayName = "SliderThumb";
const SliderLabel = forwardRef(
({ className, children, ...props }, ref) => {
const { disabled, readOnly } = useSlider();
return /* @__PURE__ */ jsx(
"label",
{
ref,
className: cn(
"text-sm font-medium leading-none",
disabled && "cursor-not-allowed opacity-50",
readOnly && "cursor-default",
className
),
...props,
children
}
);
}
);
SliderLabel.displayName = "SliderLabel";
const SliderInput = forwardRef(
({ className, index = 0, ...props }, ref) => {
var _a;
const { values, disabled, readOnly, onChange } = useSlider();
const handleChange = (e) => {
const newValue = parseFloat(e.target.value);
const newValues = [...values.map((v) => v.value)];
newValues[index] = newValue;
onChange(newValues);
};
return /* @__PURE__ */ jsx(
"input",
{
ref,
type: "number",
className: cn("sr-only", className),
value: ((_a = values[index]) == null ? void 0 : _a.value) || 0,
onChange: handleChange,
disabled: disabled || readOnly,
...props
}
);
}
);
SliderInput.displayName = "SliderInput";
const SliderMarks = forwardRef(
({ className, marks, markStep, markIcons, renderMark, ...props }, ref) => {
const { range, getPercentageFromValue } = useSlider();
const markPositions = useMemo(() => {
if (marks) {
return marks.map((mark) => ({
...mark,
percentage: getPercentageFromValue(mark.value)
}));
}
if (markStep) {
const positions = [];
for (let i = range.min; i <= range.max; i += markStep) {
positions.push({
value: i,
percentage: getPercentageFromValue(i)
});
}
return positions;
}
return [];
}, [marks, markStep, range, getPercentageFromValue]);
return /* @__PURE__ */ jsx("div", { ref, className: cn("absolute inset-0", className), ...props, children: markPositions.map((mark, index) => /* @__PURE__ */ jsx(
"div",
{
className: "absolute top-0 w-1 h-full bg-gray-300 transform -translate-x-1/2",
style: { left: `${mark.percentage}%` },
onClick: mark.onClick,
children: renderMark ? renderMark(mark) : /* @__PURE__ */ jsxs(
"div",
{
className: "mt-4 text-xs text-gray-600 text-center whitespace-nowrap",
style: {
minWidth: "40px",
marginLeft: "8px",
transform: "rotate(0deg)",
transformOrigin: "center"
},
children: [
mark.icon && markIcons && /* @__PURE__ */ jsx("div", { className: "mb-1 flex justify-center", children: /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75em" }, children: mark.icon }) }),
mark.label
]
}
)
},
index
)) });
}
);
SliderMarks.displayName = "SliderMarks";
const SliderComponent = Slider;
SliderComponent.Track = SliderTrack;
SliderComponent.Range = SliderRange;
SliderComponent.Thumb = SliderThumb;
SliderComponent.Label = SliderLabel;
SliderComponent.Input = SliderInput;
SliderComponent.Marks = SliderMarks;
const ColorPickerContext = React.createContext(null);
const useColorPicker = () => {
const context = React.useContext(ColorPickerContext);
if (!context) {
throw new Error("useColorPicker must be used within a ColorPicker");
}
return context;
};
const hexToRgb = (hex) => {
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex);
if (!result) {
return { r: 0, g: 0, b: 0, a: 1 };
}
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
a: result[4] ? parseInt(result[4], 16) / 255 : 1
};
};
const rgbToHex = (rgb) => {
const toHex = (n) => {
const hex2 = Math.round(n).toString(16);
return hex2.length === 1 ? "0" + hex2 : hex2;
};
const hex = `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
if (rgb.a !== void 0 && rgb.a < 1) {
return hex + toHex(rgb.a * 255);
}
return hex;
};
const rgbToHsl = (rgb) => {
const r2 = rgb.r / 255;
const g = rgb.g / 255;
const b = rgb.b / 255;
const max = Math.max(r2, g, b);
const min = Math.min(r2, g, b);
let h = 0;
let s = 0;
const l = (max + min) / 2;
if (max !== min) {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r2:
h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
break;
case g:
h = ((b - r2) / d + 2) / 6;
break;
case b:
h = ((r2 - g) / d + 4) / 6;
break;
}
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100),
a: rgb.a
};
};
const hslToRgb = (hsl) => {
const h = hsl.h / 360;
const s = hsl.s / 100;
const l = hsl.l / 100;
let r2, g, b;
if (s === 0) {
r2 = g = b = l;
} else {
const hue2rgb = (p2, q2, t) => {
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1 / 6) return p2 + (q2 - p2) * 6 * t;
if (t < 1 / 2) return q2;
if (t < 2 / 3) return p2 + (q2 - p2) * (2 / 3 - t) * 6;
return p2;
};
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
const p = 2 * l - q;
r2 = hue2rgb(p, q, h + 1 / 3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1 / 3);
}
return {
r: Math.round(r2 * 255),
g: Math.round(g * 255),
b: Math.round(b * 255),
a: hsl.a
};
};
const parseColor = (value) => {
let rgb;
let format = "hex";
if (value.startsWith("#")) {
rgb = hexToRgb(value);
format = value.length > 7 ? "hex" : "hex";
} else if (value.startsWith("rgb")) {
const match = value.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
if (match) {
rgb = {
r: parseInt(match[1]),
g: parseInt(match[2]),
b: parseInt(match[3]),
a: match[4] ? parseFloat(match[4]) : 1
};
format = match[4] ? "rgba" : "rgb";
} else {
rgb = { r: 0, g: 0, b: 0, a: 1 };
}
} else if (value.startsWith("hsl")) {
const match = value.match(/hsla?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/);
if (match) {
const hsl2 = {
h: parseInt(match[1]),
s: parseInt(match[2]),
l: parseInt(match[3]),
a: match[4] ? parseFloat(match[4]) : 1
};
rgb = hslToRgb(hsl2);
format = match[4] ? "hsla" : "hsl";
} else {
rgb = { r: 0, g: 0, b: 0, a: 1 };
}
} else {
rgb = { r: 0, g: 0, b: 0, a: 1 };
}
const hsl = rgbToHsl(rgb);
const hex = rgbToHex(rgb);
return { hex, rgb, hsl, format };
};
const formatColor = (color, format) => {
switch (format) {
case "hex":
return color.rgb.a && color.rgb.a < 1 ? color.hex.slice(0, 7) : color.hex;
case "rgb":
return `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`;
case "rgba":
return `rgba(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}, ${color.rgb.a || 1})`;
case "hsl":
return `hsl(${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%)`;
case "hsla":
return `hsla(${color.hsl.h}, ${color.hsl.s}%, ${color.hsl.l}%, ${color.hsl.a || 1})`;
default:
return color.hex;
}
};
const ColorPicker = forwardRef(
({
value,
onChange,
disabled = false,
readOnly = false,
allowAlpha = true,
defaultFormat = "hex",
presetColors,
showPreview = true,
showInputs = true,
showSliders = true,
showPresets = true,
variant = "default",
size = "md",
label,
placeholder = "Select color",
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
backgroundColor,
focusRingColor,
focusBorderColor,
focusBoxShadow,
padding,
gap,
transitionDuration = 200,
// Component-specific props
swatchShape = "square",
swatchSize,
swatchBorderColor,
swatchBorderWidth,
popoverBackgroundColor,
popoverBorderColor,
popoverBorderRadius,
popoverBoxShadow,
popoverPadding,
popoverPosition = "bottom",
popoverOffset,
popoverOffsetTop,
popoverOffsetBottom,
popoverOffsetLeft,
popoverOffsetRight,
// Render props
renderTrigger,
renderSwatch,
// Events
onFocus,
onBlur,
onOpen,
onClose,
onFormatChange,
// Accessibility
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-invalid": ariaInvalid,
className,
children,
...props
}, ref) => {
const [isOpen, setIsOpen] = useState(false);
const [format, setFormat] = useState(defaultFormat);
const colorValue = useMemo(() => parseColor(value), [value]);
const handleChange = useCallback(
(newColor) => {
const updatedColor = { ...colorValue, ...newColor };
if (newColor.hex) {
const parsed = parseColor(newColor.hex);
Object.assign(updatedColor, parsed);
} else if (newColor.rgb) {
updatedColor.hex = rgbToHex(newColor.rgb);
updatedColor.hsl = rgbToHsl(newColor.rgb);
} else if (newColor.hsl) {
updatedColor.rgb = hslToRgb(newColor.hsl);
updatedColor.hex = rgbToHex(updatedColor.rgb);
}
const formattedValue = formatColor(updatedColor, format);
onChange(formattedValue, updatedColor);
},
[colorValue, format, onChange]
);
const handleFormatChange = useCallback(
(newFormat) => {
setFormat(newFormat);
onFormatChange == null ? void 0 : onFormatChange(newFormat);
const formattedValue = formatColor(colorValue, newFormat);
onChange(formattedValue, { ...colorValue, format: newFormat });
},
[colorValue, onChange, onFormatChange]
);
const handleOpenChange = useCallback(
(open) => {
if (!disabled && !readOnly) {
setIsOpen(open);
if (open) {
onOpen == null ? void 0 : onOpen();
} else {
onClose == null ? void 0 : onClose();
}
}
},
[disabled, readOnly, onOpen, onClose]
);
const contextValue = {
value: colorValue,
onChange: handleChange,
format,
setFormat: handleFormatChange,
isOpen,
setIsOpen: handleOpenChange,
disabled,
readOnly,
allowAlpha,
variant,
size,
presetColors,
showPreview,
showInputs,
showSliders,
showPresets,
swatchShape,
swatchSize,
swatchBorderColor,
swatchBorderWidth,
popoverBackgroundColor,
popoverBorderColor,
popoverBorderRadius,
popoverBoxShadow,
popoverPadding,
renderSwatch
};
const baseStyles = "relative inline-block";
return /* @__PURE__ */ jsx(ColorPickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(baseStyles, className),
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-invalid": ariaInvalid,
...props,
children: [
label && /* @__PURE__ */ jsx(
"label",
{
className: cn(
"block mb-1.5 font-medium",
size === "sm" && "text-sm",
size === "md" && "text-base",
size === "lg" && "text-lg",
disabled && "opacity-50"
),
style: {
fontSize,
fontWeight,
fontFamily,
color: textColor
},
children: label
}
),
children || /* @__PURE__ */ jsx(Fragment, { children: variant === "inline" ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
ColorPickerTrigger,
{
placeholder,
borderWidth,
borderColor,
borderStyle,
borderRadius,
backgroundColor,
focusRingColor,
focusBorderColor,
focusBoxShadow,
padding,
transitionDuration,
renderTrigger,
onFocus,
onBlur
}
),
/* @__PURE__ */ jsx(ColorPickerContent, { className: "mt-2", gap })
] }) : /* @__PURE__ */ jsxs(
PopoverCompound,
{
open: isOpen,
onOpenChange: handleOpenChange,
position: popoverPosition,
trigger: "click",
closeOnEscape: true,
closeOnOutsideClick: true,
closeOnBlur: false,
hasArrow: false,
transition: "scale",
enterDuration: transitionDuration,
exitDuration: transitionDuration * 0.75,
backgroundColor: popoverBackgroundColor,
borderColor: popoverBorderColor,
borderRadius: popoverBorderRadius,
boxShadow: popoverBoxShadow,
padding: popoverPadding,
offset: popoverOffset,
offsetTop: popoverOffsetTop,
offsetBottom: popoverOffsetBottom,
offsetLeft: popoverOffsetLeft,
offsetRight: popoverOffsetRight,
children: [
/* @__PURE__ */ jsx(PopoverCompound.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
ColorPickerTrigger,
{
placeholder,
borderWidth,
borderColor,
borderStyle,
borderRadius,
backgroundColor,
focusRingColor,
focusBorderColor,
focusBoxShadow,
padding,
transitionDuration,
renderTrigger,
onFocus,
onBlur,
asChild: true
}
) }),
/* @__PURE__ */ jsx(PopoverCompound.Content, { className: "min-w-[280px]", children: /* @__PURE__ */ jsx(ColorPickerContent, { gap }) })
]
}
) })
]
}
) });
}
);
ColorPicker.displayName = "ColorPicker";
const ColorPickerTrigger = forwardRef(
({
borderWidth,
borderColor,
borderStyle,
borderRadius,
backgroundColor,
focusRingColor,
focusBorderColor,
focusBoxShadow,
padding,
transitionDuration,
renderTrigger,
onFocus,
onBlur
}, ref) => {
const {
value,
isOpen,
setIsOpen,
disabled,
readOnly,
variant,
size,
swatchShape,
swatchSize,
swatchBorderColor,
swatchBorderWidth
} = useColorPicker();
const [isFocused, setIsFocused] = useState(false);
const handleClick = () => {
if (!disabled && !readOnly && variant !== "inline") {
setIsOpen(!isOpen);
}
};
const handleFocus = () => {
setIsFocused(true);
onFocus == null ? void 0 : onFocus();
};
const handleBlur = () => {
setIsFocused(false);
onBlur == null ? void 0 : onBlur();
};
if (renderTrigger) {
return /* @__PURE__ */ jsx(Fragment, { children: renderTrigger({ color: value, onClick: handleClick, disabled }) });
}
const sizes = {
sm: "h-8 px-3 text-sm",
md: "h-10 px-4 text-base",
lg: "h-12 px-5 text-lg"
};
const customStyles = {
borderWidth: borderWidth || "1px",
borderColor: borderColor || "#e5e7eb",
borderStyle: borderStyle || "solid",
borderRadius: borderRadius || "0.375rem",
backgroundColor: backgroundColor || "white",
padding,
transition: `all ${transitionDuration}ms ease-in-out`,
...isFocused && focusBorderColor && { borderColor: focusBorderColor },
...isFocused && focusBoxShadow && { boxShadow: focusBoxShadow },
...isFocused && focusRingColor && {
boxShadow: `0 0 0 3px ${focusRingColor}`
}
};
const swatchStyles = {
backgroundColor: value.hex,
width: swatchSize || (size === "sm" ? "20px" : size === "lg" ? "28px" : "24px"),
height: swatchSize || (size === "sm" ? "20px" : size === "lg" ? "28px" : "24px"),
borderRadius: swatchShape === "circle" ? "50%" : "0.25rem",
borderWidth: swatchBorderWidth || "1px",
borderColor: swatchBorderColor || "#e5e7eb",
borderStyle: "solid"
};
if (variant === "minimal") {
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
className: cn(
"inline-flex items-center justify-center transition-all",
"hover:opacity-80 focus:outline-none",
disabled && "cursor-not-allowed opacity-50"
),
style: swatchStyles,
onClick: handleClick,
onFocus: handleFocus,
onBlur: handleBlur,
disabled,
"aria-label": `Color picker, current color ${value.hex}`
}
);
}
return /* @__PURE__ */ jsxs(
"button",
{
ref,
type: "button",
className: cn(
"inline-flex items-center gap-2 font-medium transition-all",
"hover:bg-gray-50 focus:outline-none",
sizes[size],
disabled && "cursor-not-allowed opacity-50"
),
style: customStyles,
onClick: handleClick,
onFocus: handleFocus,
onBlur: handleBlur,
disabled,
children: [
/* @__PURE__ */ jsx("span", { style: swatchStyles }),
/* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: value.hex }),
variant !== "inline" && /* @__PURE__ */ jsx(
"svg",
{
className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"),
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
}
)
]
}
);
}
);
ColorPickerTrigger.displayName = "ColorPickerTrigger";
const ColorPickerContent = ({ className, gap }) => {
const { showSliders, showInputs, showPresets } = useColorPicker();
const customStyles = {
gap: gap || "1rem"
};
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), style: customStyles, children: [
showSliders && /* @__PURE__ */ jsx(ColorPickerSliders, {}),
showInputs && /* @__PURE__ */ jsx(ColorPickerInputs, {}),
showPresets && /* @__PURE__ */ jsx(ColorPickerPresets, {})
] });
};
const ColorPickerSliders = () => {
const { value, onChange, allowAlpha, size } = useColorPicker();
const handleHueChange = (values) => {
onChange({ hsl: { ...value.hsl, h: values[0] } });
};
const handleSaturationChange = (values) => {
onChange({ hsl: { ...value.hsl, s: values[0] } });
};
const handleLightnessChange = (values) => {
onChange({ hsl: { ...value.hsl, l: values[0] } });
};
const handleAlphaChange = (values) => {
onChange({ rgb: { ...value.rgb, a: values[0] }, hsl: { ...value.hsl, a: values[0] } });
};
const hueTrackStyle = {
background: `linear-gradient(to right,
hsl(0, 100%, 50%),
hsl(60, 100%, 50%),
hsl(120, 100%, 50%),
hsl(180, 100%, 50%),
hsl(240, 100%, 50%),
hsl(300, 100%, 50%),
hsl(360, 100%, 50%))`
};
const saturationTrackStyle = {
background: `linear-gradient(to right,
hsl(${value.hsl.h}, 0%, ${value.hsl.l}%),
hsl(${value.hsl.h}, 100%, ${value.hsl.l}%))`
};
const lightnessTrackStyle = {
background: `linear-gradient(to right,
hsl(${value.hsl.h}, ${value.hsl.s}%, 0%),
hsl(${value.hsl.h}, ${value.hsl.s}%, 50%),
hsl(${value.hsl.h}, ${value.hsl.s}%, 100%))`
};
const alphaTrackStyle = {
background: `linear-gradient(to right,
rgba(${value.rgb.r}, ${value.rgb.g}, ${value.rgb.b}, 0),
rgba(${value.rgb.r}, ${value.rgb.g}, ${value.rgb.b}, 1))`
};
const sliderSize = size === "sm" ? "sm" : size === "lg" ? "md" : "sm";
return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-700 mb-1 block", children: "Hue" }),
/* @__PURE__ */ jsxs(
SliderComponent,
{
value: value.hsl.h,
onChange: handleHueChange,
min: 0,
max: 360,
step: 1,
size: sliderSize,
variant: "default",
showTooltip: false,
children: [
/* @__PURE__ */ jsx(SliderComponent.Track, { style: hueTrackStyle, children: /* @__PURE__ */ jsx(SliderComponent.Range, { style: { background: "transparent" } }) }),
/* @__PURE__ */ jsx(
SliderComponent.Thumb,
{
index: 0,
value: { value: value.hsl.h, percentage: value.hsl.h / 360 * 100 }
}
)
]
}
)
] }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-700 mb-1 block", children: "Saturation" }),
/* @__PURE__ */ jsxs(
SliderComponent,
{
value: value.hsl.s,
onChange: handleSaturationChange,
min: 0,
max: 100,
step: 1,
size: sliderSize,
variant: "default",
showTooltip: false,
children: [
/* @__PURE__ */ jsx(SliderComponent.Track, { style: saturationTrackStyle, children: /* @__PURE__ */ jsx(SliderComponent.Range, { style: { background: "transparent" } }) }),
/* @__PURE__ */ jsx(SliderComponent.Thumb, { index: 0, value: { value: value.hsl.s, percentage: value.hsl.s } })
]
}
)
] }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-700 mb-1 block", children: "Lightness" }),
/* @__PURE__ */ jsxs(
SliderComponent,
{
value: value.hsl.l,
onChange: handleLightnessChange,
min: 0,
max: 100,
step: 1,
size: sliderSize,
variant: "default",
showTooltip: false,
children: [
/* @__PURE__ */ jsx(SliderComponent.Track, { style: lightnessTrackStyle, children: /* @__PURE__ */ jsx(SliderComponent.Range, { style: { background: "transparent" } }) }),
/* @__PURE__ */ jsx(SliderComponent.Thumb, { index: 0, value: { value: value.hsl.l, percentage: value.hsl.l } })
]
}
)
] }),
allowAlpha && /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-700 mb-1 block", children: "Alpha" }),
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsx(
"div",
{
className: "absolute inset-0 rounded",
style: {
backgroundImage: `repeating-linear-gradient(45deg, #e5e7eb 0px, #e5e7eb 5px, #f3f4f6 5px, #f3f4f6 10px)`,
height: "8px",
borderRadius: "4px",
top: "50%",
transform: "translateY(-50%)"
}
}
),
/* @__PURE__ */ jsxs(
SliderComponent,
{
value: value.rgb.a || 1,
onChange: handleAlphaChange,
min: 0,
max: 1,
step: 0.01,
size: sliderSize,
variant: "default",
showTooltip: false,
style: { position: "relative", zIndex: 1 },
children: [
/* @__PURE__ */ jsx(SliderComponent.Track, { style: { ...alphaTrackStyle, backgroundColor: "transparent" }, children: /* @__PURE__ */ jsx(SliderComponent.Range, { style: { background: "transparent" } }) }),
/* @__PURE__ */ jsx(
SliderComponent.Thumb,
{
index: 0,
value: { value: value.rgb.a || 1, percentage: (value.rgb.a || 1) * 100 }
}
)
]
}
)
] })
] })
] });
};
const ColorPickerInputs = () => {
const { value, onChange, format, setFormat, allowAlpha } = useColorPicker();
const [inputValue, setInputValue] = useState("");
useEffect(() => {
setInputValue(formatColor(value, format));
}, [value, format]);
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
const handleInputBlur = () => {
try {
const parsed = parseColor(inputValue);
onChange(parsed);
} catch {
setInputValue(formatColor(value, format));
}
};
const handleFormatChange = (e) => {
setFormat(e.target.value);
};
const formats = allowAlpha ? ["hex", "rgb", "rgba", "hsl", "hsla"] : ["hex", "rgb", "hsl"];
return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
/* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
/* @__PURE__ */ jsx(
"input",
{
type: "text",
value: inputValue,
onChange: handleInputChange,
onBlur: handleInputBlur,
className: "flex-1 px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",
placeholder: format.toUpperCase()
}
),
/* @__PURE__ */ jsx(
"select",
{
value: format,
onChange: handleFormatChange,
className: "px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent",
children: formats.map((f) => /* @__PURE__ */ jsx("option", { value: f, children: f.toUpperCase() }, f))
}
)
] }),
format.startsWith("rgb") && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2", children: [
/* @__PURE__ */ jsx(
"input",
{
type: "number",
min: "0",
max: "255",
value: value.rgb.r,
onChange: (e) => onChange({ rgb: { ...value.rgb, r: parseInt(e.target.value) || 0 } }),
className: "px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary-500",
placeholder: "R"
}
),
/* @__PURE__ */ jsx(
"input",
{
type: "number",
min: "0",
max: "255",
value: value.rgb.g,
onChange: (e) => onChange({ rgb: { ...value.rgb, g: parseInt(e.target.value) || 0 } }),
className: "px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary-500",
placeholder: "G"
}
),
/* @__PURE__ */ jsx(
"input",
{
type: "number",
min: "0",
max: "255",
value: value.rgb.b,
onChange: (e) => onChange({ rgb: { ...value.rgb, b: parseInt(e.target.value) || 0 } }),
className: "px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary-500",
placeholder: "B"
}
),
allowAlpha && format === "rgba" && /* @__PURE__ */ jsx(
"input",
{
type: "number",
min: "0",
max: "1",
step: "0.01",
value: value.rgb.a || 1,
onChange: (e) => onChange({ rgb: { ...value.rgb, a: parseFloat(e.target.value) || 1 } }),
className: "px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary-500",
placeholder: "A"
}
)
] }),
format.startsWith("hsl") && /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-4 gap-2", children: [
/* @__PURE__ */ jsx(
"input",
{
type: "number",
min: "0",
max: "360",
value: value.hsl.h,
onChange: (e) => onChange({ hsl: { ...value.hsl, h: parseInt(e.target.value) || 0 } }),
className: "px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary-500",
placeholder: "H"
}
),
/* @__PURE__ */ jsx(
"input",
{
type: "number",
min: "0",
max: "100",
value: value.hsl.s,
onChange: (e) => onChange({ hsl: { ...value.hsl, s: parseInt(e.target.value) || 0 } }),
className: "px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary-500",
placeholder: "S"
}
),
/* @__PURE__ */ jsx(
"input",
{
type: "number",
min: "0",
max: "100",
value: value.hsl.l,
onChange: (e) => onChange({ hsl: { ...value.hsl, l: parseInt(e.target.value) || 0 } }),
className: "px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary-500",
placeholder: "L"
}
),
allowAlpha && format === "hsla" && /* @__PURE__ */ jsx(
"input",
{
type: "number",
min: "0",
max: "1",
step: "0.01",
value: value.hsl.a || 1,
onChange: (e) => onChange({ hsl: { ...value.hsl, a: parseFloat(e.target.value) || 1 } }),
className: "px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-primary-500",
placeholder: "A"
}
)
] })
] });
};
const ColorPickerPresets = () => {
const {
value,
onChange,
presetColors,
renderSwatch,
swatchShape,
swatchSize,
swatchBorderColor,
swatchBorderWidth
} = useColorPicker();
const defaultPresets = [
{ value: "#000000", label: "Black" },
{ value: "#ffffff", label: "White" },
{ value: "#ef4444", label: "Red" },
{ value: "#f59e0b", label: "Amber" },
{ value: "#10b981", label: "Emerald" },
{ value: "#3b82f6", label: "Blue" },
{ value: "#8b5cf6", label: "Violet" },
{ value: "#ec4899", label: "Pink" }
];
const colors = presetColors || defaultPresets;
const handleSwatchClick = (color) => {
const parsed = parseColor(color);
onChange(parsed);
};
const swatchStyles = (color) => ({
backgroundColor: color,
width: swatchSize || "32px",
height: swatchSize || "32px",
borderRadius: swatchShape === "circle" ? "50%" : "0.25rem",
borderWidth: swatchBorderWidth || "1px",
borderColor: swatchBorderColor || "#e5e7eb",
borderStyle: "solid"
});
return /* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("h4", { className: "text-xs font-medium text-gray-700 mb-2", children: "Preset Colors" }),
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-8 gap-2", children: colors.map((preset, index) => {
const isSelected = value.hex.toLowerCase() === preset.value.toLowerCase();
if (renderSwatch) {
return /* @__PURE__ */ jsx("div", { children: renderSwatch({
color: preset.value,
selected: isSelected,
onClick: () => handleSwatchClick(preset.value)
}) }, index);
}
return /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: cn(
"transition-all hover:scale-110 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500",
isSelected && "ring-2 ring-offset-2 ring-primary-500"
),
style: swatchStyles(preset.value),
onClick: () => handleSwatchClick(preset.value),
title: preset.label || preset.value,
"aria-label": `Select ${preset.label || preset.value}`
},
index
);
}) })
] });
};
const ColorPickerCompound = ColorPicker;
ColorPickerCompound.Trigger = ColorPickerTrigger;
ColorPickerCompound.Content = ColorPickerContent;
ColorPickerCompound.Sliders = ColorPickerSliders;
ColorPickerCompound.Inputs = ColorPickerInputs;
ColorPickerCompound.Presets = ColorPickerPresets;
const DialogContext = createContext(null);
const useDialogContext = () => {
const context = useContext(DialogContext);
if (!context) {
throw new Error("Dialog components must be used within a Dialog");
}
return context;
};
const DialogOverlay = forwardRef(
({ className, children, customStyles, onClick, ...props }, ref) => {
const { isOpen, modal, transition, onClose, disabled, transitionDuration, backdropColor } = useDialogContext();
const overlayStyles = cn(
"fixed inset-0 z-50 transition-opacity ease-out",
{
"bg-black/50": modal && !backdropColor,
"pointer-events-none": !modal || disabled,
"opacity-100": isOpen && transition !== "none",
"opacity-0": !isOpen && transition !== "none"
},
className
);
const handleClick = (e) => {
if (disabled || e.target !== e.currentTarget) return;
onClick == null ? void 0 : onClick(e);
onClose == null ? void 0 : onClose();
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: overlayStyles,
style: {
transitionDuration: `${transitionDuration}ms`,
...backdropColor && modal && { backgroundColor: backdropColor },
...customStyles
},
onClick: handleClick,
"aria-hidden": "true",
...props,
children
}
);
}
);
DialogOverlay.displayName = "DialogOverlay";
const DialogContent = forwardRef(
({ className, children, customStyles, style, ...props }, ref) => {
const { isOpen, size, variant, position, transition, transitionDuration, backgroundColor } = useDialogContext();
const getPositionStyles = () => {
const basePosition = "fixed z-50";
switch (position) {
case "center":
return `${basePosition} top-1/2 left-1/2`;
case "top":
return `${basePosition} top-4 left-1/2`;
case "bottom":
return `${basePosition} bottom-4 left-1/2`;
case "left":
return `${basePosition} left-4 top-1/2`;
case "right":
return `${basePosition} right-4 top-1/2`;
case "top-left":
return `${basePosition} top-4 left-4`;
case "top-right":
return `${basePosition} top-4 right-4`;
case "bottom-left":
return `${basePosition} bottom-4 left-4`;
case "bottom-right":
return `${basePosition} bottom-4 right-4`;
default:
return `${basePosition} top-1/2 left-1/2`;
}
};
const getTransformStyles = () => {
if (!isOpen && transition === "none") return "";
const transforms = [];
if (position === "center" || position === "top" || position === "bottom") {
transforms.push("-translate-x-1/2");
}
if (position === "center" || position === "left" || position === "right") {
transforms.push("-translate-y-1/2");
}
if (transition === "scale") {
transforms.push(isOpen ? "scale-100" : "scale-95");
} else if (transition === "slide") {
if (position === "top" || position === "top-left" || position === "top-right") {
transforms.push(isOpen ? "translate-y-0" : "-translate-y-full");
} else if (position === "bottom" || position === "bottom-left" || position === "bottom-right") {
transforms.push(isOpen ? "translate-y-0" : "translate-y-full");
} else if (position === "left") {
transforms.push(isOpen ? "translate-x-0" : "-translate-x-full");
} else if (position === "right") {
transforms.push(isOpen ? "translate-x-0" : "translate-x-full");
} else if (position === "center") {
transforms.push(isOpen ? "translate-y-0" : "translate-y-full");
}
}
return transforms.join(" ");
};
const contentStyles = cn(
getPositionStyles(),
getTransformStyles(),
"transition-all ease-out overflow-hidden",
// Opacity for fade and scale transitions
{
"opacity-100": isOpen || transition === "slide" || transition === "none",
"opacity-0": !isOpen && (transition === "fade" || transition === "scale")
},
// Size variants with max-height to prevent viewport overflow
{
"w-full max-w-sm": size === "sm",
"w-full max-w-lg": size === "md",
"w-full max-w-2xl": size === "lg",
"w-full max-w-4xl": size === "xl",
"w-screen h-screen max-w-full": size === "full"
},
// Add max-height for non-full sizes
size !== "full" && "max-h-[calc(100vh-2rem)]",
// Variant styles (only apply if no custom backgroundColor)
!backgroundColor && {
"bg-white border border-gray-200 shadow-lg": variant === "default",
"bg-gray-900 text-white shadow-xl": variant === "filled",
"bg-white border-2 border-gray-300": variant === "outlined",
"bg-white/95 backdrop-blur-sm": variant === "ghost",
"bg-white/80 backdrop-blur-md border border-white/20 shadow-xl": variant === "glass"
},
// Always apply variant borders and shadows
{
"border border-gray-200 shadow-lg": variant === "default" && backgroundColor,
"shadow-xl": variant === "filled" && backgroundColor,
"border-2 border-gray-300": variant === "outlined" && backgroundColor,
"backdrop-blur-sm": variant === "ghost" && backgroundColor,
"backdrop-blur-md border border-white/20 shadow-xl": variant === "glass" && backgroundColor
},
// Default rounded corners except for full size
size !== "full" && "rounded-lg",
// Ensure content is scrollable
"flex flex-col",
className
);
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: contentStyles,
style: {
transitionDuration: `${transitionDuration}ms`,
...backgroundColor && { backgroundColor },
...customStyles,
...style
},
role: "dialog",
"aria-modal": "true",
...props,
children
}
);
}
);
DialogContent.displayName = "DialogContent";
const DialogHeader = forwardRef(
({ className, children, customStyles, ...props }, ref) => {
const { size } = useDialogContext();
const headerStyles = cn(
"flex items-center justify-between border-b",
{
"p-4": size === "sm",
"p-6": size === "md" || size === "lg",
"p-8": size === "xl" || size === "full"
},
className
);
return /* @__PURE__ */ jsx("div", { ref, className: headerStyles, style: customStyles, ...props, children });
}
);
DialogHeader.displayName = "DialogHeader";
const DialogBody = forwardRef(
({ className, children, customStyles, ...props }, ref) => {
const { size } = useDialogContext();
const bodyStyles = cn(
"overflow-y-auto flex-1 min-h-0",
{
"p-4": size === "sm",
"p-6": size === "md" || size === "lg",
"p-8": size === "xl" || size === "full"
},
className
);
return /* @__PURE__ */ jsx("div", { ref, className: bodyStyles, style: customStyles, ...props, children });
}
);
DialogBody.displayName = "DialogBody";
const DialogFooter = forwardRef(
({ className, children, customStyles, ...props }, ref) => {
const { size } = useDialogContext();
const footerStyles = cn(
"flex items-center justify-end gap-2 border-t",
{
"p-4": size === "sm",
"p-6": size === "md" || size === "lg",
"p-8": size === "xl" || size === "full"
},
className
);
return /* @__PURE__ */ jsx("div", { ref, className: footerStyles, style: customStyles, ...props, children });
}
);
DialogFooter.displayName = "DialogFooter";
const DialogTitle = forwardRef(
({ className, children, customStyles, ...props }, ref) => {
const { size } = useDialogContext();
const titleStyles = cn(
"font-semibold leading-none tracking-tight",
{
"text-lg": size === "sm",
"text-xl": size === "md",
"text-2xl": size === "lg" || size === "xl",
"text-3xl": size === "full"
},
className
);
return /* @__PURE__ */ jsx("h2", { ref, className: titleStyles, style: customStyles, ...props, children });
}
);
DialogTitle.displayName = "DialogTitle";
const DialogDescription = forwardRef(
({ className, children, customStyles, ...props }, ref) => {
const { size } = useDialogContext();
const descriptionStyles = cn(
"text-muted-foreground",
{
"text-sm mt-1": size === "sm",
"text-sm mt-2": size === "md",
"text-base mt-2": size === "lg" || size === "xl" || size === "full"
},
className
);
return /* @__PURE__ */ jsx("p", { ref, className: descriptionStyles, style: customStyles, ...props, children });
}
);
DialogDescription.displayName = "DialogDescription";
const DialogClose = forwardRef(
({ className, children, customStyles, onClick, ...props }, ref) => {
const { disabled, loading, onClose } = useDialogContext();
const closeStyles = cn(
"rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
{
"opacity-50 cursor-not-allowed": disabled || loading
},
className
);
const handleClick = (e) => {
onClick == null ? void 0 : onClick(e);
onClose == null ? void 0 : onClose();
};
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
className: closeStyles,
style: customStyles,
onClick: handleClick,
disabled: disabled || loading,
"aria-label": "Close dialog",
...props,
children: children || /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}
) })
}
);
}
);
DialogClose.displayName = "DialogClose";
const Dialog = forwardRef(
({
open,
onOpenChange,
className,
variant = "default",
size = "md",
status = "default",
position = "center",
offsetX,
offsetY,
maxWidth,
maxHeight,
minWidth,
minHeight,
disabled = false,
loading = false,
required = false,
modal = true,
closeOnEsc = true,
closeOnOverlayClick = true,
preventScroll = true,
container,
title,
description,
children,
label,
helperText,
customStyles = {},
onClose,
onEscapeKeyDown,
onOverlayClick,
transitionDuration = 200,
transition = "scale",
backdropColor,
backgroundColor,
renderOverlay,
renderContent,
renderHeader,
renderBody,
renderFooter,
...props
}, _ref) => {
const dialogRef = useRef(null);
const handleClose = useCallback(() => {
if (disabled || loading) return;
onOpenChange(false);
onClose == null ? void 0 : onClose();
}, [disabled, loading, onOpenChange, onClose]);
useEffect(() => {
if (!open || !closeOnEsc || disabled) return;
const handleEscape = (e) => {
if (e.key === "Escape") {
onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(e);
handleClose();
}
};
document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape);
}, [open, closeOnEsc, disabled, handleClose, onEscapeKeyDown]);
const handleOverlayClick = useCallback(
(e) => {
if (!closeOnOverlayClick || disabled) return;
onOverlayClick == null ? void 0 : onOverlayClick(e);
handleClose();
},
[closeOnOverlayClick, disabled, handleClose, onOverlayClick]
);
useEffect(() => {
if (!modal || !open || !preventScroll) return;
const originalStyle = document.body.style.overflow;
const originalPaddingRight = document.body.style.paddingRight;
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
document.body.style.overflow = "hidden";
if (scrollbarWidth > 0) {
document.body.style.paddingRight = `${scrollbarWidth}px`;
}
return () => {
document.body.style.overflow = originalStyle;
document.body.style.paddingRight = originalPaddingRight;
};
}, [modal, open, preventScroll]);
const contextValue = useMemo(
() => ({
isOpen: open,
variant,
size,
status,
disabled,
loading,
onClose: handleClose,
modal,
customStyles,
position,
transition,
transitionDuration,
backdropColor,
backgroundColor
}),
[
open,
variant,
size,
status,
disabled,
loading,
handleClose,
modal,
customStyles,
position,
transition,
transitionDuration,
backdropColor,
backgroundColor
]
);
const contentInlineStyles = {
transitionDuration: `${transitionDuration}ms`,
...offsetX !== void 0 && {
left: typeof offsetX === "number" ? `${offsetX}px` : offsetX
},
...offsetY !== void 0 && {
top: typeof offsetY === "number" ? `${offsetY}px` : offsetY
},
...maxWidth && { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth },
...maxHeight && { maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight },
...minWidth && { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth },
...minHeight && { minHeight: typeof minHeight === "number" ? `${minHeight}px` : minHeight },
...customStyles.contentStyles
};
if (!open) return null;
const overlay = renderOverlay ? renderOverlay({
customStyles: customStyles.overlayStyles,
onClick: handleOverlayClick
}) : /* @__PURE__ */ jsx(DialogOverlay, { onClick: handleOverlayClick, customStyles: customStyles.overlayStyles });
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
title && (renderHeader ? renderHeader({
children: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(DialogTitle, { customStyles: customStyles.titleStyles, children: title }),
description && /* @__PURE__ */ jsx(DialogDescription, { customStyles: customStyles.descriptionStyles, children: description })
] }),
customStyles: customStyles.headerStyles
}) : /* @__PURE__ */ jsxs(DialogHeader, { customStyles: customStyles.headerStyles, children: [
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsx(DialogTitle, { customStyles: customStyles.titleStyles, children: title }),
description && /* @__PURE__ */ jsx(DialogDescription, { customStyles: customStyles.descriptionStyles, children: description })
] }),
/* @__PURE__ */ jsx(DialogClose, { customStyles: customStyles.closeButtonStyles })
] })),
renderBody ? renderBody({
children,
customStyles: customStyles.bodyStyles
}) : /* @__PURE__ */ jsx(DialogBody, { customStyles: customStyles.bodyStyles, children }),
renderFooter && renderFooter({ customStyles: customStyles.footerStyles })
] });
const dialogContent = renderContent ? renderContent({
children: content,
customStyles: contentInlineStyles
}) : /* @__PURE__ */ jsx(
DialogContent,
{
className,
style: contentInlineStyles,
customStyles: contentInlineStyles,
children: content
}
);
const dialogElement = /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref: dialogRef,
"aria-label": label,
"aria-describedby": helperText ? "dialog-helper" : void 0,
"aria-required": required,
"aria-disabled": disabled,
"aria-busy": loading,
...props,
children: [
overlay,
dialogContent,
helperText && /* @__PURE__ */ jsx("div", { id: "dialog-helper", className: "sr-only", children: helperText })
]
}
) });
const portalContainer = container || (typeof document !== "undefined" ? document.body : null);
if (!portalContainer) return null;
return createPortal(dialogElement, portalContainer);
}
);
Dialog.displayName = "Dialog";
const DrawerContext = createContext(void 0);
const useDrawer = () => {
const context = useContext(DrawerContext);
if (!context) {
throw new Error("useDrawer must be used within a Drawer component");
}
return context;
};
const Drawer = React.forwardRef(
({
className,
items = [],
open,
onOpenChange,
defaultOpen = false,
position = "left",
variant = "default",
size = "md",
title,
children,
footer,
header,
disabled = false,
loading = false,
collapsible = false,
collapsed: controlledCollapsed,
onCollapsedChange,
closeOnOverlayClick = true,
closeOnEscape = true,
preventScroll = true,
focusTrap = true,
showCloseIcon = false,
loadingMessage = "Loading...",
emptyMessage = "No items found",
status = "default",
transition = "slide",
transitionDuration = 300,
renderItem,
renderHeader,
renderFooter,
renderEmpty,
// Dimensions
width,
height,
maxWidth,
maxHeight,
minWidth,
minHeight,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
overlayColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
headerBackgroundColor,
headerBorderColor,
headerPadding,
headerFontSize,
headerFontWeight,
headerTextColor,
footerBackgroundColor,
footerBorderColor,
footerPadding,
itemPadding,
itemHoverBackgroundColor,
itemActiveBackgroundColor,
itemActiveTextColor,
itemDisabledOpacity,
iconColor,
// Event handlers
onFocus,
onBlur,
onItemClick,
onKeyDown,
onTransitionStart: _onTransitionStart,
onTransitionEnd: _onTransitionEnd,
// Close icon
closeIcon,
closeIconPosition = "right",
closeIconClassName,
// Accessibility
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-labelledby": ariaLabelledby,
...props
}, ref) => {
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const [internalCollapsed, setInternalCollapsed] = useState(false);
const isControlledOpen = open !== void 0;
const currentOpen = isControlledOpen ? open : internalOpen;
const isControlledCollapsed = controlledCollapsed !== void 0;
const currentCollapsed = isControlledCollapsed ? controlledCollapsed : internalCollapsed;
const drawerRef = useRef(null);
const handleOpenChange = useCallback(
(newOpen) => {
if (!isControlledOpen) {
setInternalOpen(newOpen);
}
onOpenChange == null ? void 0 : onOpenChange(newOpen);
},
[isControlledOpen, onOpenChange]
);
const handleCollapsedChange = useCallback(
(newCollapsed) => {
if (!isControlledCollapsed) {
setInternalCollapsed(newCollapsed);
}
onCollapsedChange == null ? void 0 : onCollapsedChange(newCollapsed);
},
[isControlledCollapsed, onCollapsedChange]
);
useEffect(() => {
if (!closeOnEscape || !currentOpen) return;
const handleEscape = (event) => {
if (event.key === "Escape") {
handleOpenChange(false);
}
};
document.addEventListener("keydown", handleEscape);
return () => document.removeEventListener("keydown", handleEscape);
}, [closeOnEscape, currentOpen, handleOpenChange]);
useEffect(() => {
if (!preventScroll || !currentOpen) return;
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = "";
};
}, [preventScroll, currentOpen]);
useEffect(() => {
if (!focusTrap || !currentOpen || !drawerRef.current) return;
const drawer = drawerRef.current;
const focusableElements = drawer.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
if (focusableElements.length === 0) return;
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];
const handleTabKey = (event) => {
if (event.key !== "Tab") return;
if (event.shiftKey) {
if (document.activeElement === firstElement) {
event.preventDefault();
lastElement.focus();
}
} else {
if (document.activeElement === lastElement) {
event.preventDefault();
firstElement.focus();
}
}
};
drawer.addEventListener("keydown", handleTabKey);
firstElement.focus();
return () => {
drawer.removeEventListener("keydown", handleTabKey);
};
}, [focusTrap, currentOpen]);
const contextValue = {
open: currentOpen,
setOpen: handleOpenChange,
collapsed: currentCollapsed,
setCollapsed: handleCollapsedChange,
items,
position,
variant,
size,
status,
transition,
transitionDuration,
disabled,
loading,
collapsible,
loadingMessage,
emptyMessage,
renderItem,
renderHeader,
renderFooter,
renderEmpty,
width,
height,
maxWidth,
maxHeight,
minWidth,
minHeight,
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
overlayColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
headerBackgroundColor,
headerBorderColor,
headerPadding,
headerFontSize,
headerFontWeight,
headerTextColor,
footerBackgroundColor,
footerBorderColor,
footerPadding,
itemPadding,
itemHoverBackgroundColor,
itemActiveBackgroundColor,
itemActiveTextColor,
itemDisabledOpacity,
iconColor,
onFocus,
onBlur,
onItemClick,
showCloseIcon,
closeIcon,
closeIconPosition,
closeIconClassName,
onOpenChange: handleOpenChange
};
if (!currentOpen && variant !== "persistent") {
return null;
}
return /* @__PURE__ */ jsxs(DrawerContext.Provider, { value: contextValue, children: [
variant === "overlay" && /* @__PURE__ */ jsx(
DrawerOverlay,
{
onClick: closeOnOverlayClick ? () => handleOpenChange(false) : void 0
}
),
/* @__PURE__ */ jsxs(
DrawerContainer,
{
ref,
className,
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-labelledby": ariaLabelledby,
onKeyDown,
...props,
children: [
(renderHeader || header || title) && /* @__PURE__ */ jsx(DrawerHeader, { children: renderHeader ? renderHeader() : header || title }),
/* @__PURE__ */ jsx(DrawerContent, { children: children || /* @__PURE__ */ jsx(DrawerItemList, {}) }),
(renderFooter || footer) && /* @__PURE__ */ jsx(DrawerFooter, { children: renderFooter ? renderFooter() : footer })
]
}
)
] });
}
);
Drawer.displayName = "Drawer";
const DrawerContainer = React.forwardRef(
({ className, children, ...props }, ref) => {
const {
open,
collapsed,
position,
variant,
size,
status,
transition,
transitionDuration,
disabled,
width,
height,
maxWidth,
maxHeight,
minWidth,
minHeight,
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
boxShadow,
padding,
paddingX,
paddingY
} = useDrawer();
const baseStyles = cn(
"fixed flex flex-col bg-white border-r border-gray-200 z-50",
!boxShadow && "shadow-lg",
disabled && "pointer-events-none opacity-50"
);
const positionStyles = {
left: cn("top-0 left-0 h-full", open ? "translate-x-0" : "-translate-x-full"),
right: cn("top-0 right-0 h-full", open ? "translate-x-0" : "translate-x-full"),
top: cn("top-0 left-0 w-full", open ? "translate-y-0" : "-translate-y-full"),
bottom: cn("bottom-0 left-0 w-full", open ? "translate-y-0" : "translate-y-full")
};
const variantStyles = {
default: "",
overlay: "z-50",
push: "relative",
mini: collapsed ? "w-16" : "",
persistent: "relative"
};
const sizeStyles = {
sm: position === "left" || position === "right" ? "w-64" : "h-48",
md: position === "left" || position === "right" ? "w-80" : "h-64",
lg: position === "left" || position === "right" ? "w-96" : "h-80",
xl: position === "left" || position === "right" ? "w-112" : "h-96",
full: position === "left" || position === "right" ? "w-full" : "h-full"
};
const statusStyles = {
default: "",
success: "border-green-200",
warning: "border-yellow-200",
error: "border-red-200"
};
const getTransitionClass = () => {
switch (transition) {
case "none":
return "transition-none";
case "fade":
return "transition-opacity ease-in-out";
case "slide":
return "transition-transform ease-in-out";
case "scale":
return "transition-all ease-in-out";
case "flip":
return "transition-all ease-in-out";
default:
return "transition-transform ease-in-out";
}
};
const customStyles = {
transitionDuration: `${transitionDuration}ms`
};
if (width) customStyles.width = width;
if (height) customStyles.height = height;
if (maxWidth) customStyles.maxWidth = maxWidth;
if (maxHeight) customStyles.maxHeight = maxHeight;
if (minWidth) customStyles.minWidth = minWidth;
if (minHeight) customStyles.minHeight = minHeight;
if (borderWidth) customStyles.borderWidth = borderWidth;
if (borderColor) customStyles.borderColor = borderColor;
if (borderStyle) customStyles.borderStyle = borderStyle;
if (borderRadius) customStyles.borderRadius = borderRadius;
if (fontSize) customStyles.fontSize = fontSize;
if (fontWeight) customStyles.fontWeight = fontWeight;
if (fontFamily) customStyles.fontFamily = fontFamily;
if (textColor) customStyles.color = textColor;
if (backgroundColor) customStyles.backgroundColor = backgroundColor;
if (boxShadow) customStyles.boxShadow = boxShadow;
if (padding) customStyles.padding = padding;
if (paddingX) {
customStyles.paddingLeft = paddingX;
customStyles.paddingRight = paddingX;
}
if (paddingY) {
customStyles.paddingTop = paddingY;
customStyles.paddingBottom = paddingY;
}
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
baseStyles,
positionStyles[position],
variantStyles[variant],
// Only apply size styles if no custom dimensions are provided
!width && !height && sizeStyles[size],
statusStyles[status],
getTransitionClass(),
className
),
style: customStyles,
...props,
children
}
);
}
);
DrawerContainer.displayName = "DrawerContainer";
const DrawerOverlay = React.forwardRef(
({ className, ...props }, ref) => {
const { overlayColor, transitionDuration, open } = useDrawer();
const customStyles = {
transitionDuration: `${transitionDuration}ms`
};
if (overlayColor) customStyles.backgroundColor = overlayColor;
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"fixed inset-0 bg-black z-40 transition-opacity ease-in-out",
open ? "bg-opacity-50 opacity-100" : "bg-opacity-0 opacity-0",
className
),
style: customStyles,
...props
}
);
}
);
DrawerOverlay.displayName = "DrawerOverlay";
const DrawerHeader = React.forwardRef(
({ className, children, ...props }, ref) => {
const {
headerBackgroundColor,
headerBorderColor,
headerPadding,
headerFontSize,
headerFontWeight,
headerTextColor,
showCloseIcon,
closeIcon,
closeIconPosition,
closeIconClassName,
onOpenChange
} = useDrawer();
const customStyles = {};
if (headerBackgroundColor) customStyles.backgroundColor = headerBackgroundColor;
if (headerBorderColor) customStyles.borderColor = headerBorderColor;
if (headerPadding) customStyles.padding = headerPadding;
if (headerFontSize) customStyles.fontSize = headerFontSize;
if (headerFontWeight) customStyles.fontWeight = headerFontWeight;
if (headerTextColor) customStyles.color = headerTextColor;
const defaultCloseIcon = /* @__PURE__ */ jsx(
"svg",
{
width: "20",
height: "20",
viewBox: "0 0 20 20",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx(
"path",
{
d: "M15 5L5 15M5 5L15 15",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
}
)
}
);
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"flex-shrink-0 border-b border-gray-200 p-4 font-semibold text-gray-900",
className
),
style: customStyles,
...props,
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
closeIconPosition === "left" && showCloseIcon && /* @__PURE__ */ jsx(
"button",
{
onClick: () => onOpenChange == null ? void 0 : onOpenChange(false),
className: cn("p-1 rounded hover:bg-gray-100 transition-colors", closeIconClassName),
"aria-label": "Close drawer",
children: closeIcon || defaultCloseIcon
}
),
/* @__PURE__ */ jsx("div", { className: "flex-1", children }),
closeIconPosition === "right" && showCloseIcon && /* @__PURE__ */ jsx(
"button",
{
onClick: () => onOpenChange == null ? void 0 : onOpenChange(false),
className: cn("p-1 rounded hover:bg-gray-100 transition-colors", closeIconClassName),
"aria-label": "Close drawer",
children: closeIcon || defaultCloseIcon
}
)
] })
}
);
}
);
DrawerHeader.displayName = "DrawerHeader";
const DrawerContent = React.forwardRef(
({ className, children, ...props }, ref) => {
const { loading, loadingMessage } = useDrawer();
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 overflow-auto", className), ...props, children: loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900" }),
/* @__PURE__ */ jsx("span", { className: "text-gray-600", children: loadingMessage })
] }) }) : children });
}
);
DrawerContent.displayName = "DrawerContent";
const DrawerFooter = React.forwardRef(
({ className, children, ...props }, ref) => {
const { footerBackgroundColor, footerBorderColor, footerPadding } = useDrawer();
const customStyles = {};
if (footerBackgroundColor) customStyles.backgroundColor = footerBackgroundColor;
if (footerBorderColor) customStyles.borderColor = footerBorderColor;
if (footerPadding) customStyles.padding = footerPadding;
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("flex-shrink-0 border-t border-gray-200 p-4", className),
style: customStyles,
...props,
children
}
);
}
);
DrawerFooter.displayName = "DrawerFooter";
const DrawerItemList = React.forwardRef(
({ className, ...props }, ref) => {
const { items, renderEmpty, emptyMessage } = useDrawer();
if (items.length === 0) {
return /* @__PURE__ */ jsx("div", { ref, className: cn("p-4", className), ...props, children: renderEmpty ? renderEmpty() : /* @__PURE__ */ jsxs("div", { className: "text-center text-gray-500 py-8", children: [
/* @__PURE__ */ jsx("div", { className: "text-4xl mb-2", children: "📂" }),
/* @__PURE__ */ jsx("div", { children: emptyMessage })
] }) });
}
return /* @__PURE__ */ jsx("div", { ref, className: cn("py-2", className), ...props, children: items.map((item, index) => /* @__PURE__ */ jsx(DrawerItemComponent, { item }, item.id || index)) });
}
);
DrawerItemList.displayName = "DrawerItemList";
const DrawerItemComponent = React.forwardRef(
({ className, item, ...props }, ref) => {
const { collapsed, renderItem, onItemClick, itemPadding, itemDisabledOpacity, iconColor } = useDrawer();
const [isActive, setIsActive] = useState(false);
const handleClick = useCallback(() => {
var _a;
if (item.disabled) return;
(_a = item.onClick) == null ? void 0 : _a.call(item);
onItemClick == null ? void 0 : onItemClick(item);
}, [item, onItemClick]);
const customStyles = {};
if (itemPadding) customStyles.padding = itemPadding;
if (item.disabled && itemDisabledOpacity) customStyles.opacity = itemDisabledOpacity;
if (renderItem) {
return /* @__PURE__ */ jsx("div", { ref, className, ...props, children: renderItem(item, isActive) });
}
if (item.href) {
return /* @__PURE__ */ jsxs(
"a",
{
ref,
className: cn(
"w-full flex items-center gap-3 px-4 py-2 text-left transition-colors",
"hover:bg-gray-100 focus:bg-gray-100 focus:outline-none",
item.disabled && "cursor-not-allowed opacity-50",
!item.disabled && "cursor-pointer",
className
),
style: customStyles,
href: item.href,
onClick: handleClick,
onFocus: () => setIsActive(true),
onBlur: () => setIsActive(false),
...props,
children: [
item.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 flex items-center", style: { color: iconColor }, children: item.icon }),
!collapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxs("div", { className: "truncate font-medium text-gray-900", children: [
item.label,
item.badge && /* @__PURE__ */ jsx("span", { className: "ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800", children: item.badge })
] }),
item.description && /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-gray-500 mt-0.5", children: item.description })
] })
]
}
);
}
return /* @__PURE__ */ jsxs(
"button",
{
ref,
className: cn(
"w-full flex items-center gap-3 px-4 py-2 text-left transition-colors",
"hover:bg-gray-100 focus:bg-gray-100 focus:outline-none",
item.disabled && "cursor-not-allowed opacity-50",
!item.disabled && "cursor-pointer",
className
),
style: customStyles,
disabled: item.disabled,
onClick: handleClick,
onFocus: () => setIsActive(true),
onBlur: () => setIsActive(false),
...props,
children: [
item.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 flex items-center", style: { color: iconColor }, children: item.icon }),
!collapsed && /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsxs("div", { className: "truncate font-medium text-gray-900", children: [
item.label,
item.badge && /* @__PURE__ */ jsx("span", { className: "ml-2 inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800", children: item.badge })
] }),
item.description && /* @__PURE__ */ jsx("div", { className: "truncate text-sm text-gray-500 mt-0.5", children: item.description })
] })
]
}
);
}
);
DrawerItemComponent.displayName = "DrawerItem";
const DrawerCompound = Drawer;
DrawerCompound.Container = DrawerContainer;
DrawerCompound.Overlay = DrawerOverlay;
DrawerCompound.Header = DrawerHeader;
DrawerCompound.Content = DrawerContent;
DrawerCompound.Footer = DrawerFooter;
DrawerCompound.ItemList = DrawerItemList;
DrawerCompound.Item = DrawerItemComponent;
const InputContext = createContext(null);
const useInputContext = () => {
const context = useContext(InputContext);
if (!context) {
throw new Error("Input compound components must be used within an Input component");
}
return context;
};
const InputIcon = memo(
forwardRef(
({ className, style, color, size, children, ...props }, ref) => {
const context = useInputContext();
const iconStyles = cn(
"absolute inset-y-0 flex items-center justify-center pointer-events-none",
context.size === "sm" && "w-8",
context.size === "md" && "w-10",
context.size === "lg" && "w-12",
context.iconPosition === "left" && "left-0",
context.iconPosition === "right" && "right-0",
context.isDisabled && "opacity-50",
className
);
return /* @__PURE__ */ jsx(
"span",
{
ref,
className: iconStyles,
style: { color, fontSize: size, ...style },
...props,
children
}
);
}
)
);
InputIcon.displayName = "InputIcon";
const InputLabel = memo(
forwardRef(
({ className, style, required, children, ...props }, ref) => {
const context = useInputContext();
const labelStyles = cn(
"block text-sm font-medium mb-1",
context.status === "error" && "text-red-600",
context.status === "success" && "text-green-600",
context.status === "warning" && "text-yellow-600",
context.status === "info" && "text-blue-600",
context.status === "default" && "text-gray-700",
context.isDisabled && "text-gray-400",
className
);
return /* @__PURE__ */ jsxs("label", { ref, className: labelStyles, style, ...props, children: [
children,
(required || context.isRequired) && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
] });
}
)
);
InputLabel.displayName = "InputLabel";
const InputHelperText = memo(
forwardRef(
({ className, style, children, ...props }, ref) => {
const context = useInputContext();
const helperStyles = cn(
"mt-1 text-xs",
context.status === "error" && "text-red-600",
context.status === "success" && "text-green-600",
context.status === "warning" && "text-yellow-600",
context.status === "info" && "text-blue-600",
context.status === "default" && "text-gray-500",
context.isDisabled && "text-gray-400",
className
);
return /* @__PURE__ */ jsx("div", { ref, className: helperStyles, style, ...props, children });
}
)
);
InputHelperText.displayName = "InputHelperText";
const InputBase = memo(
forwardRef(
({
// Core props
variant = "default",
size = "md",
status = "default",
disabled = false,
loading = false,
required = false,
readOnly = false,
// Content props
children,
label,
helperText,
placeholder,
icon,
iconPosition = "left",
loadingText,
loadingSpinner,
// Input specific props
type = "text",
value,
defaultValue,
autoComplete,
autoFocus,
maxLength,
minLength,
pattern,
step,
min,
max,
// Styling props
className,
style = {},
// Border styling
borderWidth,
borderColor,
borderStyle,
borderRadius,
// Typography
fontSize,
fontWeight,
fontFamily,
textColor,
placeholderColor,
// Colors
backgroundColor,
focusBackgroundColor,
// Focus styles
focusBorderColor,
// Shadows
boxShadow,
focusBoxShadow,
// Spacing
padding,
paddingX,
paddingY,
margin,
marginX,
marginY,
// Layout
width,
height,
minWidth,
maxWidth,
// Transitions
transitionDuration = "150ms",
transitionProperty = "all",
transitionTimingFunction = "ease-in-out",
// Event handlers
onFocus,
onBlur,
onChange,
onKeyDown,
onKeyUp,
onClick,
// Rest of props
...props
}, ref) => {
const [isFocused, setIsFocused] = useState(false);
const isDisabled = disabled || loading;
const hasError = status === "error";
const hasIcon = Boolean(icon);
let extractedLabel = label;
let extractedHelperText = helperText;
let extractedIcon = icon;
if (children) {
React.Children.forEach(children, (child) => {
if (React.isValidElement(child)) {
if (child.type === InputLabel) {
extractedLabel = child.props.children;
} else if (child.type === InputHelperText) {
extractedHelperText = child.props.children;
} else if (child.type === InputIcon) {
extractedIcon = child.props.children;
}
}
});
}
const contextValue = {
variant,
size,
status,
isDisabled,
isLoading: loading,
isRequired: required,
isFocused,
hasError,
hasIcon: Boolean(extractedIcon || icon),
iconPosition,
value: typeof value === "string" ? value : void 0,
onChange: onChange ? (val) => onChange({ target: { value: val } }) : void 0
};
const baseStyles = cn(
"relative flex items-center w-full transition-all",
"focus-within:outline-none",
"disabled:cursor-not-allowed disabled:opacity-50"
);
const variantStyles = {
default: cn(
"border bg-white",
"focus-within:ring-2 focus-within:ring-offset-1",
hasError && "border-red-500 focus-within:ring-red-500",
status === "success" && "border-green-500 focus-within:ring-green-500",
status === "warning" && "border-yellow-500 focus-within:ring-yellow-500",
status === "info" && "border-blue-500 focus-within:ring-blue-500",
status === "default" && "border-gray-300 focus-within:ring-blue-500"
),
filled: cn(
"border-0 bg-gray-100",
"focus-within:ring-2 focus-within:ring-offset-1",
hasError && "bg-red-50 focus-within:ring-red-500",
status === "success" && "bg-green-50 focus-within:ring-green-500",
status === "warning" && "bg-yellow-50 focus-within:ring-yellow-500",
status === "info" && "bg-blue-50 focus-within:ring-blue-500",
status === "default" && "focus-within:ring-blue-500"
),
outlined: cn(
"border-2 bg-transparent",
"focus-within:ring-0",
hasError && "border-red-500 focus-within:border-red-600",
status === "success" && "border-green-500 focus-within:border-green-600",
status === "warning" && "border-yellow-500 focus-within:border-yellow-600",
status === "info" && "border-blue-500 focus-within:border-blue-600",
status === "default" && "border-gray-300 focus-within:border-blue-500"
),
ghost: cn(
"border-0 bg-transparent",
"focus-within:ring-2 focus-within:ring-offset-1",
hasError && "focus-within:ring-red-500",
status === "success" && "focus-within:ring-green-500",
status === "warning" && "focus-within:ring-yellow-500",
status === "info" && "focus-within:ring-blue-500",
status === "default" && "focus-within:ring-blue-500"
),
underlined: cn(
"border-0 border-b-2 bg-transparent rounded-none",
"focus-within:ring-0",
hasError && "border-red-500 focus-within:border-red-600",
status === "success" && "border-green-500 focus-within:border-green-600",
status === "warning" && "border-yellow-500 focus-within:border-yellow-600",
status === "info" && "border-blue-500 focus-within:border-blue-600",
status === "default" && "border-gray-300 focus-within:border-blue-500"
)
};
const sizeStyles = {
sm: cn(
"h-8 text-xs rounded-md",
variant !== "underlined" && "px-2",
hasIcon && iconPosition === "left" && "pl-8",
hasIcon && iconPosition === "right" && "pr-8"
),
md: cn(
"h-10 text-sm rounded-md",
variant !== "underlined" && "px-3",
hasIcon && iconPosition === "left" && "pl-10",
hasIcon && iconPosition === "right" && "pr-10"
),
lg: cn(
"h-12 text-base rounded-lg",
variant !== "underlined" && "px-4",
hasIcon && iconPosition === "left" && "pl-12",
hasIcon && iconPosition === "right" && "pr-12"
)
};
const customStyles = {
...style,
// Border
...borderWidth && {
borderWidth: typeof borderWidth === "number" ? `${borderWidth}px` : borderWidth
},
...borderColor && { borderColor },
...borderStyle && { borderStyle },
...borderRadius && {
borderRadius: typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius
},
// Typography
...fontSize && { fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize },
...fontWeight && { fontWeight },
...fontFamily && { fontFamily },
...textColor && { color: textColor },
// Colors
...backgroundColor && { backgroundColor },
// Shadows
...boxShadow && { boxShadow },
// Spacing
...padding && { padding: typeof padding === "number" ? `${padding}px` : padding },
...paddingX && {
paddingLeft: typeof paddingX === "number" ? `${paddingX}px` : paddingX,
paddingRight: typeof paddingX === "number" ? `${paddingX}px` : paddingX
},
...paddingY && {
paddingTop: typeof paddingY === "number" ? `${paddingY}px` : paddingY,
paddingBottom: typeof paddingY === "number" ? `${paddingY}px` : paddingY
},
...margin && { margin: typeof margin === "number" ? `${margin}px` : margin },
...marginX && {
marginLeft: typeof marginX === "number" ? `${marginX}px` : marginX,
marginRight: typeof marginX === "number" ? `${marginX}px` : marginX
},
...marginY && {
marginTop: typeof marginY === "number" ? `${marginY}px` : marginY,
marginBottom: typeof marginY === "number" ? `${marginY}px` : marginY
},
// Layout
...width && { width: typeof width === "number" ? `${width}px` : width },
...height && { height: typeof height === "number" ? `${height}px` : height },
...minWidth && { minWidth: typeof minWidth === "number" ? `${minWidth}px` : minWidth },
...maxWidth && { maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth },
// Transition
...transitionDuration && { transitionDuration },
...transitionProperty && { transitionProperty },
...transitionTimingFunction && { transitionTimingFunction },
// Focus states
...isFocused && focusBackgroundColor && { backgroundColor: focusBackgroundColor },
...isFocused && focusBorderColor && { borderColor: focusBorderColor },
...isFocused && focusBoxShadow && { boxShadow: focusBoxShadow }
};
const inputStyles = cn(
"w-full bg-transparent border-0 outline-none",
"placeholder:text-gray-400",
loading && "cursor-wait",
readOnly && "cursor-default",
className
);
const handleFocus = (event) => {
setIsFocused(true);
onFocus == null ? void 0 : onFocus(event);
};
const handleBlur = (event) => {
setIsFocused(false);
onBlur == null ? void 0 : onBlur(event);
};
const renderWrapper = () => {
if (!extractedLabel && !extractedHelperText) {
return renderInput();
}
return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
extractedLabel && /* @__PURE__ */ jsx(InputLabel, { required, children: extractedLabel }),
renderInput(),
extractedHelperText && /* @__PURE__ */ jsx(InputHelperText, { children: extractedHelperText })
] });
};
const renderInput = () => /* @__PURE__ */ jsxs(
"div",
{
className: cn(baseStyles, variantStyles[variant], sizeStyles[size], "relative"),
style: customStyles,
children: [
(extractedIcon || icon) && iconPosition === "left" && /* @__PURE__ */ jsx(InputIcon, { children: extractedIcon || icon }),
/* @__PURE__ */ jsx(
"input",
{
ref,
type,
value,
defaultValue,
placeholder: loading ? loadingText || "Loading..." : placeholder,
disabled: isDisabled,
readOnly,
required,
autoComplete,
autoFocus,
maxLength,
minLength,
pattern,
step,
min,
max,
className: inputStyles,
style: {
...placeholderColor && { "--placeholder-color": placeholderColor }
},
onFocus: handleFocus,
onBlur: handleBlur,
onChange,
onKeyDown,
onKeyUp,
onClick,
"aria-invalid": hasError,
"aria-required": required,
...props
}
),
loading && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3", children: loadingSpinner || /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4 text-gray-400", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] }) }),
(extractedIcon || icon) && iconPosition === "right" && !loading && /* @__PURE__ */ jsx(InputIcon, { children: extractedIcon || icon })
]
}
);
return /* @__PURE__ */ jsx(InputContext.Provider, { value: contextValue, children: renderWrapper() });
}
)
);
InputBase.displayName = "Input";
const Input = InputBase;
Input.Icon = InputIcon;
Input.Label = InputLabel;
Input.HelperText = InputHelperText;
const ListContext = createContext(void 0);
const useList = () => {
const context = useContext(ListContext);
if (!context) {
throw new Error("useList must be used within a List");
}
return context;
};
const List = React.forwardRef(
({
className,
style,
items = [],
value,
onChange,
variant = "default",
size = "md",
status = "default",
disabled = false,
loading = false,
selectable = false,
multiple = false,
maxSelection,
label,
helperText,
required = false,
emptyMessage = "No items found",
loadingMessage = "Loading...",
onItemClick,
onItemSelect,
renderItem,
children: _children,
...props
}, ref) => {
const handleChange = useCallback(
(newValue) => {
if (onChange) {
onChange(newValue);
}
},
[onChange]
);
const handleItemSelect = useCallback(
(item) => {
if (onItemSelect) {
onItemSelect(item);
}
if (selectable) {
if (multiple && Array.isArray(value)) {
const isSelected = value.includes(item.id);
if (isSelected) {
const newValue = value.filter((v) => v !== item.id);
handleChange(newValue.length > 0 ? newValue : null);
} else {
if (maxSelection && value.length >= maxSelection) return;
handleChange([...value, item.id]);
}
} else {
handleChange(item.id);
}
}
},
[value, multiple, maxSelection, selectable, onItemSelect, handleChange]
);
const baseStyles = "relative";
return /* @__PURE__ */ jsx(
ListContext.Provider,
{
value: {
items,
value: value || null,
onChange: handleChange,
variant,
size,
status,
disabled,
loading,
selectable,
multiple,
maxSelection,
onItemClick,
onItemSelect: handleItemSelect,
renderItem,
emptyMessage,
loadingMessage
},
children: /* @__PURE__ */ jsxs("div", { ref, className: cn(baseStyles, className), style, ...props, children: [
label && /* @__PURE__ */ jsxs(
"label",
{
className: cn(
"block mb-2 font-medium",
size === "sm" && "text-sm",
size === "md" && "text-base",
size === "lg" && "text-lg",
status === "error" && "text-red-600",
disabled && "opacity-50"
),
children: [
label,
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
]
}
),
_children || /* @__PURE__ */ jsx(ListContainer, {}),
helperText && /* @__PURE__ */ jsx(
"p",
{
className: cn(
"mt-2",
size === "sm" && "text-xs",
size === "md" && "text-sm",
size === "lg" && "text-base",
status === "success" && "text-green-600",
status === "warning" && "text-yellow-600",
status === "error" && "text-red-600",
status === "default" && "text-gray-500"
),
children: helperText
}
)
] })
}
);
}
);
List.displayName = "List";
const ListContainer = React.forwardRef(
({ className, children: _children, ...props }, ref) => {
const { items, loading, loadingMessage, emptyMessage } = useList();
const baseStyles = cn(
"flex flex-col",
"focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2"
);
if (loading) {
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, "justify-center items-center py-8", className),
...props,
children: /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: loadingMessage })
}
);
}
if (!items || items.length === 0) {
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, "justify-center items-center py-8", className),
...props,
children: /* @__PURE__ */ jsx("span", { className: "text-gray-500", children: emptyMessage })
}
);
}
return /* @__PURE__ */ jsx("div", { ref, className: cn(baseStyles, className), ...props, children: _children || /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => /* @__PURE__ */ jsx(ListItem, { item }, item.id)) }) });
}
);
ListContainer.displayName = "ListContainer";
const ListItem = React.forwardRef(
({ className, item, children: _children, ...props }, ref) => {
const {
value,
variant,
size,
disabled,
selectable,
multiple,
onItemClick,
onItemSelect,
renderItem
} = useList();
const isSelected = useMemo(() => {
if (Array.isArray(value)) {
return value.includes(item.id);
}
return value === item.id;
}, [value, item.id]);
const handleClick = () => {
if (disabled || item.disabled) return;
if (onItemClick) {
onItemClick(item);
}
if (selectable) {
onItemSelect == null ? void 0 : onItemSelect(item);
}
};
const baseStyles = cn(
"flex items-center gap-3 p-4 transition-all cursor-pointer",
"focus:outline-none focus:ring-2 focus:ring-offset-2",
disabled && "cursor-not-allowed opacity-50",
item.disabled && "cursor-not-allowed opacity-50",
selectable && !disabled && !item.disabled && "cursor-pointer"
);
const variants = {
default: cn(
"border-b border-gray-200 last:border-b-0",
"hover:bg-gray-50 focus:ring-gray-400"
),
bordered: cn("border border-gray-200 rounded-md", "hover:bg-gray-50 focus:ring-gray-400"),
card: cn(
"border border-gray-200 rounded-lg shadow-sm",
"hover:shadow-md focus:ring-gray-400"
),
minimal: cn("border-0", "hover:bg-gray-50 focus:ring-gray-400"),
elevated: cn(
"border border-gray-200 rounded-lg shadow-md",
"hover:shadow-lg focus:ring-gray-400"
)
};
const sizes = {
sm: "p-3 gap-2",
md: "p-4 gap-3",
lg: "p-6 gap-4"
};
if (renderItem) {
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(baseStyles, variants[variant || "default"], sizes[size || "md"], className),
onClick: handleClick,
...props,
children: renderItem(item, isSelected)
}
);
}
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(baseStyles, variants[variant || "default"], sizes[size || "md"], className),
onClick: handleClick,
...props,
children: [
selectable && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-5 h-5 border-2 border-gray-300 rounded flex items-center justify-center", children: isSelected && (multiple ? /* @__PURE__ */ jsx(
"svg",
{
width: "12",
height: "12",
viewBox: "0 0 24 24",
fill: "currentColor",
className: "text-blue-600",
children: /* @__PURE__ */ jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" })
}
) : /* @__PURE__ */ jsx("div", { className: "w-2 h-2 bg-blue-600 rounded-full" })) }),
item.avatar && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 w-10 h-10 rounded-full overflow-hidden", children: item.avatar }),
item.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 text-gray-500", children: item.icon }),
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
/* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900", children: item.title }),
item.description && /* @__PURE__ */ jsx("div", { className: "text-gray-500 mt-1", children: item.description })
] }),
item.badge && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: item.badge }),
item.action && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 text-gray-400", children: item.action })
]
}
);
}
);
ListItem.displayName = "ListItem";
const ListHeader = React.forwardRef(
({ className, children, ...props }, ref) => {
const { size } = useList();
const baseStyles = cn("px-4 py-2 font-medium text-gray-700 bg-gray-50 border-b border-gray-200");
const sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
return /* @__PURE__ */ jsx("div", { ref, className: cn(baseStyles, sizes[size || "md"], className), ...props, children });
}
);
ListHeader.displayName = "ListHeader";
const ListFooter = React.forwardRef(
({ className, children, ...props }, ref) => {
const { size } = useList();
const baseStyles = cn("px-4 py-2 text-gray-500 bg-gray-50 border-t border-gray-200");
const sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
return /* @__PURE__ */ jsx("div", { ref, className: cn(baseStyles, sizes[size || "md"], className), ...props, children });
}
);
ListFooter.displayName = "ListFooter";
const PaginationContext = createContext(void 0);
const usePagination = () => {
const context = useContext(PaginationContext);
if (!context) {
throw new Error("usePagination must be used within a Pagination");
}
return context;
};
const Pagination = forwardRef(
({
className,
currentPage: controlledCurrentPage,
defaultCurrentPage = 1,
totalPages = 1,
totalItems,
itemsPerPage = 10,
onChange,
disabled = false,
_required = false,
variant = "default",
size = "md",
status = "default",
shape,
type = "pagination",
showFirstLast = true,
showPrevNext = true,
showPageNumbers = true,
showPageInfo = false,
showItemsPerPage = false,
showTotalItems = false,
maxPageNumbers = 5,
labelDisplayedRows,
labelRowsPerPage = "Rows per page:",
rowsPerPageOptions = [5, 10, 25, 50],
label,
helperText,
errorMessage,
_transition = "smooth",
transitionDuration = 200,
loading = false,
_loadingIcon,
// Container styles
containerClassName,
containerStyle,
backgroundColor,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding,
paddingX,
paddingY,
boxShadow,
// Button styles
buttonBackgroundColor,
_buttonBackgroundColorHover,
_buttonBackgroundColorActive,
buttonBackgroundColorDisabled,
buttonBackgroundColorCurrent,
_buttonBackgroundColorCurrentHover,
buttonBorderWidth,
buttonBorderColor,
_buttonBorderColorHover,
_buttonBorderColorActive,
buttonBorderColorDisabled,
buttonBorderColorCurrent,
buttonBorderStyle,
buttonBorderRadius,
buttonPadding,
buttonPaddingX,
buttonPaddingY,
buttonBoxShadow,
_buttonBoxShadowHover,
_buttonBoxShadowActive,
buttonBoxShadowDisabled,
buttonBoxShadowCurrent,
// Text styles
textColor,
_textColorHover,
_textColorActive,
textColorDisabled,
textColorCurrent,
_textColorCurrentHover,
fontSize,
fontWeight,
fontFamily,
// Icon styles
iconColor,
_iconColorHover,
_iconColorActive,
iconColorDisabled,
_iconColorCurrent,
_iconColorCurrentHover,
iconSize,
// Focus styles
focusRingColor,
focusRingWidth,
_focusRingOffset,
_focusRingOffsetColor,
_focusBorderColor,
_focusBackgroundColor,
focusBoxShadow,
// Spacing
gap,
buttonGap,
// Custom render
renderButton,
renderFirstButton,
renderLastButton,
renderPrevButton,
renderNextButton,
renderPageInfo: customRenderPageInfo,
renderItemsPerPage,
// Custom icons
firstIcon,
lastIcon,
prevIcon,
nextIcon,
// Status colors
successColor,
warningColor,
errorColor,
children,
...props
}, ref) => {
const [uncontrolledCurrentPage, setUncontrolledCurrentPage] = useState(defaultCurrentPage);
const [isFocused, setIsFocused] = useState(false);
const isControlled = controlledCurrentPage !== void 0;
const currentPage = isControlled ? controlledCurrentPage : uncontrolledCurrentPage;
const handlePageChange = useCallback(
(page) => {
if (disabled || loading || page < 1 || page > totalPages) return;
if (!isControlled) {
setUncontrolledCurrentPage(page);
}
onChange == null ? void 0 : onChange(page);
},
[disabled, loading, isControlled, onChange, totalPages]
);
const getStatusColors = () => {
const statusColors2 = {
default: { primary: "#3b82f6", hover: "#2563eb", active: "#1d4ed8" },
success: { primary: successColor || "#10b981", hover: "#059669", active: "#047857" },
warning: { primary: warningColor || "#f59e0b", hover: "#d97706", active: "#b45309" },
error: { primary: errorColor || "#ef4444", hover: "#dc2626", active: "#b91c1c" }
};
return statusColors2[status];
};
const statusColors = getStatusColors();
const getSizeDimensions = () => {
const dimensions2 = {
sm: { padding: "0.375rem 0.75rem", fontSize: "0.875rem", iconSize: "1rem" },
md: { padding: "0.5rem 1rem", fontSize: "1rem", iconSize: "1.25rem" },
lg: { padding: "0.75rem 1.5rem", fontSize: "1.125rem", iconSize: "1.5rem" }
};
return dimensions2[size];
};
const dimensions = getSizeDimensions();
const getDefaultStyles = () => {
const variantStyles = {
default: {
button: {
backgroundColor: buttonBackgroundColor || "#ffffff",
borderColor: buttonBorderColor || "#d1d5db",
borderWidth: buttonBorderWidth || "1px",
boxShadow: buttonBoxShadow || "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
},
current: {
backgroundColor: buttonBackgroundColorCurrent || statusColors.primary,
borderColor: buttonBorderColorCurrent || statusColors.primary,
color: textColorCurrent || "#ffffff",
boxShadow: buttonBoxShadowCurrent || "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
}
},
filled: {
button: {
backgroundColor: buttonBackgroundColor || "#f3f4f6",
borderColor: buttonBorderColor || "transparent",
borderWidth: buttonBorderWidth || "0",
boxShadow: buttonBoxShadow || "none"
},
current: {
backgroundColor: buttonBackgroundColorCurrent || statusColors.primary,
borderColor: buttonBorderColorCurrent || statusColors.primary,
color: textColorCurrent || "#ffffff",
boxShadow: buttonBoxShadowCurrent || "none"
}
},
outlined: {
button: {
backgroundColor: buttonBackgroundColor || "transparent",
borderColor: buttonBorderColor || "#d1d5db",
borderWidth: buttonBorderWidth || "1px",
boxShadow: buttonBoxShadow || "none"
},
current: {
backgroundColor: buttonBackgroundColorCurrent || "transparent",
borderColor: buttonBorderColorCurrent || statusColors.primary,
color: textColorCurrent || statusColors.primary,
boxShadow: buttonBoxShadowCurrent || "none"
}
},
flat: {
button: {
backgroundColor: buttonBackgroundColor || "transparent",
borderColor: buttonBorderColor || "transparent",
borderWidth: buttonBorderWidth || "0",
boxShadow: buttonBoxShadow || "none"
},
current: {
backgroundColor: buttonBackgroundColorCurrent || statusColors.primary,
borderColor: buttonBorderColorCurrent || "transparent",
color: textColorCurrent || "#ffffff",
boxShadow: buttonBoxShadowCurrent || "none"
}
},
elevated: {
button: {
backgroundColor: buttonBackgroundColor || "#ffffff",
borderColor: buttonBorderColor || "transparent",
borderWidth: buttonBorderWidth || "0",
boxShadow: buttonBoxShadow || "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
},
current: {
backgroundColor: buttonBackgroundColorCurrent || statusColors.primary,
borderColor: buttonBorderColorCurrent || statusColors.primary,
color: textColorCurrent || "#ffffff",
boxShadow: buttonBoxShadowCurrent || "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
}
},
circular: {
button: {
backgroundColor: buttonBackgroundColor || "#ffffff",
borderColor: buttonBorderColor || "#d1d5db",
borderWidth: buttonBorderWidth || "1px",
boxShadow: buttonBoxShadow || "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
},
current: {
backgroundColor: buttonBackgroundColorCurrent || statusColors.primary,
borderColor: buttonBorderColorCurrent || statusColors.primary,
color: textColorCurrent || "#ffffff",
boxShadow: buttonBoxShadowCurrent || "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
}
},
square: {
button: {
backgroundColor: buttonBackgroundColor || "#ffffff",
borderColor: buttonBorderColor || "#d1d5db",
borderWidth: buttonBorderWidth || "1px",
boxShadow: buttonBoxShadow || "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
},
current: {
backgroundColor: buttonBackgroundColorCurrent || statusColors.primary,
borderColor: buttonBorderColorCurrent || statusColors.primary,
color: textColorCurrent || "#ffffff",
boxShadow: buttonBoxShadowCurrent || "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
}
}
};
return variantStyles[variant];
};
const defaultStyles = getDefaultStyles();
const getPageNumbers = () => {
if (!showPageNumbers) return [];
const pages = [];
const halfMax = Math.floor(maxPageNumbers / 2);
if (totalPages <= maxPageNumbers) {
for (let i = 1; i <= totalPages; i++) {
pages.push(i);
}
} else {
let start = Math.max(1, currentPage - halfMax);
const end = Math.min(totalPages, start + maxPageNumbers - 1);
if (end === totalPages) {
start = Math.max(1, end - maxPageNumbers + 1);
}
if (start > 1) {
pages.push(1);
if (start > 2) {
pages.push("...");
}
}
for (let i = start; i <= end; i++) {
pages.push(i);
}
if (end < totalPages) {
if (end < totalPages - 1) {
pages.push("...");
}
pages.push(totalPages);
}
}
return pages;
};
const pageNumbers = getPageNumbers();
const getButtonStyles = (isCurrent = false, isDisabled = false) => {
let borderRadius2 = buttonBorderRadius;
if (!borderRadius2) {
if (shape === "circular" || variant === "circular") {
borderRadius2 = "50%";
} else if (shape === "square" || variant === "square") {
borderRadius2 = "0";
} else {
borderRadius2 = "0.375rem";
}
}
const baseStyles = {
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
padding: buttonPadding || dimensions.padding,
paddingLeft: buttonPaddingX,
paddingRight: buttonPaddingX,
paddingTop: buttonPaddingY,
paddingBottom: buttonPaddingY,
fontSize: fontSize || dimensions.fontSize,
fontWeight: fontWeight || "500",
fontFamily,
borderWidth: defaultStyles.button.borderWidth,
borderColor: isCurrent ? defaultStyles.current.borderColor : isDisabled ? buttonBorderColorDisabled || "#e5e7eb" : defaultStyles.button.borderColor,
borderStyle: buttonBorderStyle || "solid",
borderRadius: borderRadius2,
backgroundColor: isCurrent ? defaultStyles.current.backgroundColor : isDisabled ? buttonBackgroundColorDisabled || "#f9fafb" : defaultStyles.button.backgroundColor,
color: isCurrent ? defaultStyles.current.color : isDisabled ? textColorDisabled || "#9ca3af" : textColor || "#374151",
boxShadow: isCurrent ? defaultStyles.current.boxShadow : isDisabled ? buttonBoxShadowDisabled || "none" : defaultStyles.button.boxShadow,
cursor: isDisabled ? "not-allowed" : "pointer",
opacity: isDisabled ? 0.5 : 1,
transition: `all ${transitionDuration}ms ease-in-out`,
minWidth: "2.5rem",
height: "2.5rem"
};
return baseStyles;
};
const containerStyles = {
backgroundColor,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding: padding || (paddingX || paddingY ? void 0 : "0"),
paddingLeft: paddingX,
paddingRight: paddingX,
paddingTop: paddingY,
paddingBottom: paddingY,
boxShadow,
...containerStyle
};
const focusStyles = isFocused ? {
outline: "none",
boxShadow: focusBoxShadow || `0 0 0 ${focusRingWidth || "2px"} ${focusRingColor || statusColors.primary}`
} : {};
const renderPageButton = (page, isCurrent = false) => {
if (typeof page === "string") {
return /* @__PURE__ */ jsx(
"span",
{
className: "px-3 py-2 text-gray-500",
style: {
fontSize: fontSize || dimensions.fontSize,
fontWeight: fontWeight || "500"
},
children: page
},
`ellipsis-${page}`
);
}
const isDisabled = disabled || loading || page === currentPage;
if (renderButton) {
return renderButton(page, isCurrent, isDisabled);
}
return /* @__PURE__ */ jsx(
"button",
{
type: "button",
disabled: isDisabled,
onClick: () => handlePageChange(page),
style: {
...getButtonStyles(isCurrent, isDisabled),
...focusStyles
},
className: cn(
"inline-flex items-center justify-center",
isDisabled && "cursor-not-allowed opacity-50",
className
),
onFocus: () => setIsFocused(true),
onBlur: () => setIsFocused(false),
"aria-label": `Go to page ${page}`,
"aria-current": isCurrent ? "page" : void 0,
children: loading && isCurrent ? _loadingIcon || /* @__PURE__ */ jsxs("svg", { className: "w-4 h-4 animate-spin", viewBox: "0 0 24 24", fill: "none", children: [
/* @__PURE__ */ jsx(
"circle",
{
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4",
opacity: "0.25"
}
),
/* @__PURE__ */ jsx("path", { d: "M12 2a10 10 0 0 1 10 10", stroke: "currentColor", strokeWidth: "4" })
] }) : page
},
page
);
};
const renderNavigationButton = (type2, disabled2) => {
const isDisabled = disabled2 || loading;
const getIcon = () => {
const customIcons = {
first: firstIcon,
last: lastIcon,
prev: prevIcon,
next: nextIcon
};
const customIcon = customIcons[type2];
if (customIcon) {
return customIcon;
}
switch (type2) {
case "first":
return /* @__PURE__ */ jsx(
"svg",
{
width: iconSize || dimensions.iconSize,
height: iconSize || dimensions.iconSize,
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M11 19l-7-7 7-7m8 14l-7-7 7-7"
}
)
}
);
case "last":
return /* @__PURE__ */ jsx(
"svg",
{
width: iconSize || dimensions.iconSize,
height: iconSize || dimensions.iconSize,
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M13 5l7 7-7 7M5 5l7 7-7 7"
}
)
}
);
case "prev":
return /* @__PURE__ */ jsx(
"svg",
{
width: iconSize || dimensions.iconSize,
height: iconSize || dimensions.iconSize,
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M15 19l-7-7 7-7"
}
)
}
);
case "next":
return /* @__PURE__ */ jsx(
"svg",
{
width: iconSize || dimensions.iconSize,
height: iconSize || dimensions.iconSize,
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 5l7 7-7 7"
}
)
}
);
}
};
const getLabel = () => {
switch (type2) {
case "first":
return "Go to first page";
case "last":
return "Go to last page";
case "prev":
return "Go to previous page";
case "next":
return "Go to next page";
}
};
const getTargetPage = () => {
switch (type2) {
case "first":
return 1;
case "last":
return totalPages;
case "prev":
return Math.max(1, currentPage - 1);
case "next":
return Math.min(totalPages, currentPage + 1);
}
};
const renderFunction = {
first: renderFirstButton,
last: renderLastButton,
prev: renderPrevButton,
next: renderNextButton
}[type2];
if (renderFunction) {
return renderFunction(isDisabled);
}
return /* @__PURE__ */ jsx(
"button",
{
type: "button",
disabled: isDisabled,
onClick: () => handlePageChange(getTargetPage()),
style: {
...getButtonStyles(false, isDisabled),
color: isDisabled ? iconColorDisabled || "#9ca3af" : iconColor || "#6b7280"
},
className: cn(
"inline-flex items-center justify-center",
isDisabled && "cursor-not-allowed opacity-50",
className
),
"aria-label": getLabel(),
children: getIcon()
}
);
};
const renderPageInfoContent = () => {
if (!showPageInfo) return null;
if (customRenderPageInfo) {
return customRenderPageInfo(currentPage, totalPages, totalItems);
}
return /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-600", children: [
"Page ",
currentPage,
" of ",
totalPages,
totalItems && ` (${totalItems} total items)`
] });
};
const renderItemsPerPageSelector = () => {
if (!showItemsPerPage) return null;
const handleItemsPerPageChange = (value) => {
console.log("Items per page changed to:", value);
};
if (renderItemsPerPage) {
return renderItemsPerPage(itemsPerPage, handleItemsPerPageChange);
}
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600", children: labelRowsPerPage }),
/* @__PURE__ */ jsx(
"select",
{
value: itemsPerPage,
onChange: (e) => handleItemsPerPageChange(Number(e.target.value)),
className: "text-sm border border-gray-300 rounded px-2 py-1",
children: rowsPerPageOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
}
)
] });
};
if (type === "table") {
const from = (currentPage - 1) * itemsPerPage + 1;
const to = Math.min(currentPage * itemsPerPage, totalItems || 0);
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn("flex items-center justify-between", containerClassName),
style: containerStyles,
role: "navigation",
"aria-label": "table pagination navigation",
...props,
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
renderItemsPerPageSelector(),
/* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600", children: labelDisplayedRows ? labelDisplayedRows(from, to, totalItems || 0) : `${from}-${to} of ${totalItems || 0}` })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
showFirstLast && renderNavigationButton("first", currentPage === 1),
showPrevNext && renderNavigationButton("prev", currentPage === 1),
showPrevNext && renderNavigationButton("next", currentPage === totalPages),
showFirstLast && renderNavigationButton("last", currentPage === totalPages)
] })
]
}
);
}
return /* @__PURE__ */ jsx(
PaginationContext.Provider,
{
value: {
currentPage,
totalPages,
totalItems,
itemsPerPage,
disabled,
loading,
size,
variant,
status,
onChange
},
children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn("flex flex-col items-center justify-center", containerClassName),
style: containerStyles,
role: "navigation",
"aria-label": "pagination navigation",
...props,
children: [
label && /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-medium text-gray-700", children: label }),
/* @__PURE__ */ jsxs(
"div",
{
className: "inline-flex items-center justify-center",
style: { gap: gap || buttonGap || "0.25rem" },
children: [
showFirstLast && renderNavigationButton("first", currentPage === 1),
showPrevNext && renderNavigationButton("prev", currentPage === 1),
pageNumbers.map((page) => renderPageButton(page, page === currentPage)),
showPrevNext && renderNavigationButton("next", currentPage === totalPages),
showFirstLast && renderNavigationButton("last", currentPage === totalPages)
]
}
),
(showPageInfo || showItemsPerPage || showTotalItems) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-center gap-4 text-sm text-gray-600", children: [
renderPageInfoContent(),
renderItemsPerPageSelector(),
showTotalItems && totalItems && /* @__PURE__ */ jsxs("span", { children: [
"Total: ",
totalItems,
" items"
] })
] }),
helperText && !errorMessage && /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-gray-500", children: helperText }),
errorMessage && /* @__PURE__ */ jsx("div", { className: "mt-2 text-sm text-red-500", children: errorMessage }),
children
]
}
)
}
);
}
);
Pagination.displayName = "Pagination";
const PaginationButton = forwardRef(
({ className, page, isCurrent = false, disabled = false, children, ...props }, ref) => {
const { onChange } = usePagination();
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
disabled,
onClick: () => onChange == null ? void 0 : onChange(page),
className: cn(
"inline-flex items-center justify-center px-3 py-2 text-sm font-medium border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
isCurrent && "bg-blue-600 text-white border-blue-600",
disabled && "cursor-not-allowed opacity-50",
className
),
"aria-current": isCurrent ? "page" : void 0,
...props,
children: children || page
}
);
}
);
PaginationButton.displayName = "PaginationButton";
const PaginationInfo = forwardRef(
({ className, children, ...props }, ref) => {
return /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm text-gray-600", className), ...props, children });
}
);
PaginationInfo.displayName = "PaginationInfo";
const ProgressContext = createContext(void 0);
const useProgress = () => {
const context = useContext(ProgressContext);
if (context === void 0) {
throw new Error("useProgress must be used within a Progress component");
}
return context;
};
const clampValue = (value, min = 0, max = 100) => {
return Math.max(min, Math.min(max, value));
};
const getStatusColor = (status) => {
const statusColors = {
default: "#3b82f6",
success: "#10b981",
warning: "#f59e0b",
error: "#ef4444",
paused: "#6b7280",
complete: "#10b981",
failed: "#ef4444"
};
return statusColors[status] || statusColors.default;
};
const getSizeStyles = (size, variant) => {
if (variant === "circular") {
const sizes2 = {
sm: { diameter: "32px", strokeWidth: "2px" },
md: { diameter: "48px", strokeWidth: "3px" },
lg: { diameter: "64px", strokeWidth: "4px" }
};
return sizes2[size];
}
const sizes = {
sm: { height: "4px", fontSize: "12px" },
md: { height: "8px", fontSize: "14px" },
lg: { height: "12px", fontSize: "16px" }
};
return sizes[size];
};
const isCircularSizeStyles = (styles) => {
return "diameter" in styles;
};
const ProgressTrack = React.forwardRef(function ProgressTrack2({ className, ...props }, ref) {
const context = useProgress();
const trackStyles = useMemo(() => {
const baseStyles = {};
if (context.backgroundColor) baseStyles.backgroundColor = context.backgroundColor;
if (context.trackColor) baseStyles.backgroundColor = context.trackColor;
if (context.trackGradient) baseStyles.background = context.trackGradient;
if (context.borderColor) baseStyles.borderColor = context.borderColor;
if (context.trackBorderColor) baseStyles.borderColor = context.trackBorderColor;
if (context.trackBorderWidth) baseStyles.borderWidth = context.trackBorderWidth;
if (context.borderRadius) baseStyles.borderRadius = context.borderRadius;
if (context.height && context.variant !== "circular") baseStyles.height = context.height;
if (context.boxShadow) baseStyles.boxShadow = context.boxShadow;
if (context.trackOpacity !== void 0) baseStyles.opacity = context.trackOpacity;
if (context.animationDuration) baseStyles.transitionDuration = context.animationDuration;
if (context.customCSS) {
Object.assign(baseStyles, context.customCSS);
}
return baseStyles;
}, [context]);
if (context.variant === "circular") {
const sizeStyles = getSizeStyles(context.size, context.variant);
const diameter = isCircularSizeStyles(sizeStyles) ? sizeStyles.diameter : "48px";
const size = context.diameter || diameter;
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("relative flex items-center justify-center", className),
style: { width: size, height: size, ...trackStyles },
...props,
children: /* @__PURE__ */ jsx(
"svg",
{
width: size,
height: size,
className: "transform -rotate-90",
viewBox: `0 0 ${parseInt(size)} ${parseInt(size)}`,
children: /* @__PURE__ */ jsx(
"circle",
{
cx: "50%",
cy: "50%",
r: `${(parseInt(size) - 8) / 2}`,
fill: "none",
stroke: context.trackColor || "#e5e7eb",
strokeWidth: "4"
}
)
}
)
}
);
}
return /* @__PURE__ */ jsx(
"div",
{
ref,
id: context.trackId,
className: cn(
"relative w-full overflow-hidden",
"bg-gray-200 dark:bg-gray-700",
context.variant === "pill" && "rounded-full",
context.variant === "bordered" && "border border-gray-300",
context.variant === "minimal" && "bg-transparent",
className
),
style: trackStyles,
...props
}
);
});
const ProgressBar = React.forwardRef(function ProgressBar2({ className, value: propValue, segment, ...props }, ref) {
const context = useProgress();
const value = propValue ?? context.value;
const barStyles = useMemo(() => {
const baseStyles = {};
const color = (segment == null ? void 0 : segment.color) || context.barColor || context.progressColor || getStatusColor(context.status);
if (context.barGradient || context.gradient) {
baseStyles.background = context.barGradient || context.gradient;
} else {
baseStyles.backgroundColor = color;
}
if (context.barBorderColor) baseStyles.borderColor = context.barBorderColor;
if (context.barBorderWidth) baseStyles.borderWidth = context.barBorderWidth;
if (context.barShadow) baseStyles.boxShadow = context.barShadow;
if (context.borderRadius) baseStyles.borderRadius = context.borderRadius;
if (context.barOpacity !== void 0) baseStyles.opacity = context.barOpacity;
const duration = context.animationDuration || "0.3s";
if (context.transition !== "none") {
const transitions = {
smooth: `all ${duration} ease-in-out`,
bounce: `all ${duration} cubic-bezier(0.68, -0.55, 0.265, 1.55)`,
elastic: `all ${duration} cubic-bezier(0.175, 0.885, 0.32, 1.275)`,
spring: `all ${duration} cubic-bezier(0.25, 0.46, 0.45, 0.94)`
};
baseStyles.transition = transitions[context.transition];
}
return baseStyles;
}, [context, segment]);
if (context.variant === "circular") {
const sizeStyles = getSizeStyles(context.size, context.variant);
const diameter = isCircularSizeStyles(sizeStyles) ? sizeStyles.diameter : "48px";
const size = context.diameter || diameter;
const radius = (parseInt(size) - 8) / 2;
const circumference = 2 * Math.PI * radius;
const strokeDasharray = circumference;
const strokeDashoffset = circumference - value / 100 * circumference;
return /* @__PURE__ */ jsx(
"svg",
{
ref,
width: size,
height: size,
className: "absolute inset-0 transform -rotate-90",
viewBox: `0 0 ${parseInt(size)} ${parseInt(size)}`,
children: /* @__PURE__ */ jsx(
"circle",
{
cx: "50%",
cy: "50%",
r: radius,
fill: "none",
stroke: barStyles.backgroundColor,
strokeWidth: "4",
strokeDasharray,
strokeDashoffset,
strokeLinecap: "round",
className: cn(
context.transition !== "none" && "transition-all duration-300 ease-in-out",
className
)
}
)
}
);
}
if (context.isIndeterminate) {
return /* @__PURE__ */ jsx(
"div",
{
ref,
id: context.barId,
className: cn(
"absolute inset-y-0 left-0",
"bg-current animate-pulse",
context.variant === "striped" && "bg-gradient-to-r from-transparent via-current to-transparent",
className
),
style: {
...barStyles,
width: "40%",
animation: "progress-indeterminate 2s ease-in-out infinite"
},
...props
}
);
}
const clampedValue = clampValue(value);
return /* @__PURE__ */ jsx(
"div",
{
ref,
id: context.barId,
className: cn(
"absolute inset-y-0 left-0",
"bg-current",
context.variant === "striped" && "bg-gradient-to-r from-current to-current bg-[length:20px_20px]",
context.variant === "dashed" && "border-r-2 border-dashed border-white",
className
),
style: {
...barStyles,
width: `${clampedValue}%`
},
...props
}
);
});
const ProgressLabel = React.forwardRef(function ProgressLabel2({ className, format = "percentage", showValue = true, customContent, ...props }, ref) {
const context = useProgress();
const labelStyles = useMemo(() => {
const baseStyles = {};
if (context.labelFontSize) baseStyles.fontSize = context.labelFontSize;
if (context.labelFontWeight) baseStyles.fontWeight = context.labelFontWeight;
if (context.labelColor) baseStyles.color = context.labelColor;
if (context.textColor) baseStyles.color = context.textColor;
if (context.percentageColor) baseStyles.color = context.percentageColor;
if (!context.labelFontSize && context.labelSize) {
const sizeFontMap = {
sm: "12px",
md: "14px",
lg: "16px"
};
baseStyles.fontSize = sizeFontMap[context.labelSize];
}
const position = context.labelPosition || "outside";
if (position === "overlay" || position === "inside" || context.variant === "bar-with-label" || context.variant === "overlay-style") {
baseStyles.position = "absolute";
baseStyles.top = "50%";
baseStyles.left = "50%";
baseStyles.transform = "translate(-50%, -50%)";
baseStyles.zIndex = "10";
baseStyles.pointerEvents = "none";
if (position === "inside" || context.variant === "bar-with-label") {
baseStyles.color = baseStyles.color || "#ffffff";
}
}
return baseStyles;
}, [context]);
const getFormattedValue = () => {
if (customContent) return customContent;
if (!showValue) return null;
if (context.isIndeterminate) return "Loading...";
const value = clampValue(context.value);
switch (format) {
case "fraction":
return `${Math.round(value)}/100`;
case "percentage":
default:
return `${Math.round(value)}%`;
}
};
if (context.renderLabel) {
return /* @__PURE__ */ jsx(
"span",
{
ref,
id: context.labelId,
className: cn("text-sm font-medium", className),
style: labelStyles,
...props,
children: context.renderLabel(context.value, context.status)
}
);
}
return /* @__PURE__ */ jsx(
"span",
{
ref,
id: context.labelId,
className: cn(
"text-sm font-medium",
context.variant === "circular" && "absolute inset-0 flex items-center justify-center",
className
),
style: labelStyles,
...props,
children: getFormattedValue()
}
);
});
const ProgressValueDescription = React.forwardRef(
function ProgressValueDescription2({ className, content, ...props }, ref) {
const context = useProgress();
const getDescription = () => {
if (content) return content;
if (context.isIndeterminate) return "Loading in progress";
const value = clampValue(context.value);
return `${Math.round(value)}% complete`;
};
return /* @__PURE__ */ jsx("span", { ref, id: context.descriptionId, className: cn("sr-only", className), ...props, children: getDescription() });
}
);
const ProgressThresholdMarker = React.forwardRef(
function ProgressThresholdMarker2({ className, threshold, ...props }, ref) {
const context = useProgress();
if (context.variant === "circular") {
return null;
}
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"absolute top-0 bottom-0 w-0.5 z-10",
"bg-gray-400 dark:bg-gray-500",
className
),
style: {
left: `${threshold.value}%`,
backgroundColor: threshold.color
},
title: threshold.label || `${threshold.value}%`,
...props
}
);
}
);
const ProgressIndicator = React.forwardRef(
function ProgressIndicator2({ className, type = "spinner", customIcon, ...props }, ref) {
const context = useProgress();
const getIndicatorContent = () => {
if (customIcon) return customIcon;
if (context.renderIndicator) {
return context.renderIndicator(context.status, context.isIndeterminate);
}
switch (type) {
case "check":
return /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M5 13l4 4L19 7"
}
) });
case "error":
return /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}
) });
case "spinner":
default:
return /* @__PURE__ */ jsxs("svg", { className: "animate-spin w-4 h-4", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] });
}
};
if (context.status === "complete" || context.status === "failed" || context.isIndeterminate) {
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"flex items-center justify-center",
context.variant === "circular" && "absolute inset-0",
className
),
...props,
children: getIndicatorContent()
}
);
}
return null;
}
);
const ProgressContainer = React.forwardRef(
function ProgressContainer2({ className, children, ...props }, ref) {
const context = useProgress();
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"relative",
context.variant === "circular" ? "inline-flex" : "w-full",
className
),
...props,
children
}
);
}
);
const ProgressComponent = React.forwardRef(
({
// Core functionality
value = 0,
bufferValue,
segments = [],
isIndeterminate = false,
// Configuration
variant = "linear",
size = "md",
status = "default",
transition = "smooth",
// Simulation
simulation,
// Thresholds
thresholds = [],
// Styling
trackColor,
barColor,
bufferColor,
_secondaryBarColor,
_completeColor,
_errorColor,
_stripeColor,
backgroundColor,
borderColor,
_borderWidth,
borderRadius,
boxShadow,
_barShadow,
// Enhanced styling props
gradient,
trackGradient,
barGradient,
textColor,
percentageColor,
progressColor,
trackBorderColor,
barBorderColor,
trackBorderWidth,
barBorderWidth,
trackOpacity,
barOpacity,
animationDuration,
customCSS,
// Focus styling
_focusRingColor,
_focusRingWidth,
_focusRingOffset,
_focusBoxShadow,
// Dimensions
height,
_thickness,
diameter,
width,
// Typography
labelFontSize,
labelFontWeight,
_labelFontFamily,
labelColor,
labelSize,
labelPosition = "outside",
_descriptionFontSize,
_descriptionColor,
// Spacing
padding,
margin,
_gap,
// Custom render functions
_renderLabel,
_renderTrack,
_renderBar,
_renderThreshold,
_renderIndicator,
_renderTooltip,
// Event handlers
onChange,
onComplete,
onError,
onThresholdCross,
_onPause,
_onResume,
_onCancel,
// Loading/Status text
loadingText,
showLoadingText = false,
loadingTextPosition = "center",
customLoadingContent,
// Indicator control
hideIndicator = false,
// Accessibility
ariaLabel,
ariaLabelledBy,
ariaDescribedBy,
// Standard props
className,
children,
...props
}, ref) => {
const trackId = useId();
const barId = useId();
const labelId = useId();
const descriptionId = useId();
const [currentValue, setCurrentValue] = useState(value);
const [currentStatus, setCurrentStatus] = useState(status);
const [simulationState, setSimulationState] = useState({
isRunning: false,
isPaused: false,
intervalId: null
});
const startSimulation = useCallback(() => {
if (!(simulation == null ? void 0 : simulation.enabled) || simulationState.isRunning) return;
const { increment = 1, interval = 50, autoComplete = true } = simulation;
const incrementValue = increment;
const intervalId = setInterval(() => {
setCurrentValue((prev) => {
const newValue = prev + incrementValue;
if (newValue >= 100) {
setSimulationState((state) => ({ ...state, isRunning: false }));
if (autoComplete) {
setCurrentStatus("complete");
onComplete == null ? void 0 : onComplete();
}
return 100;
}
return newValue;
});
}, interval);
setSimulationState((state) => ({
...state,
isRunning: true,
intervalId
}));
}, [simulation, simulationState.isRunning, onComplete]);
useEffect(() => {
if (!(simulation == null ? void 0 : simulation.enabled)) {
setCurrentValue(value);
}
}, [value, simulation == null ? void 0 : simulation.enabled]);
useEffect(() => {
if (!(simulation == null ? void 0 : simulation.enabled)) {
setCurrentStatus(status);
}
}, [status, simulation == null ? void 0 : simulation.enabled]);
useEffect(() => {
if ((simulation == null ? void 0 : simulation.enabled) && !simulationState.isRunning && !simulationState.isPaused) {
startSimulation();
}
return () => {
if (simulationState.intervalId) {
clearInterval(simulationState.intervalId);
}
};
}, [
simulation == null ? void 0 : simulation.enabled,
startSimulation,
simulationState.isRunning,
simulationState.isPaused,
simulationState.intervalId
]);
useEffect(() => {
thresholds.forEach((threshold) => {
var _a;
if (currentValue >= threshold.value && onThresholdCross) {
(_a = threshold.callback) == null ? void 0 : _a.call(threshold, currentValue);
onThresholdCross(threshold, currentValue);
}
});
}, [currentValue, thresholds, onThresholdCross]);
useEffect(() => {
onChange == null ? void 0 : onChange(currentValue);
}, [currentValue, onChange]);
useEffect(() => {
if (currentValue >= 100 && currentStatus !== "complete") {
setCurrentStatus("complete");
onComplete == null ? void 0 : onComplete();
}
}, [currentValue, currentStatus, onComplete]);
const contextValue = useMemo(
() => ({
// Core state
value: currentValue,
bufferValue,
segments,
isIndeterminate,
status: currentStatus,
// Configuration
variant,
size,
transition,
// Styling
trackColor,
barColor,
backgroundColor,
borderColor,
borderRadius,
height,
diameter,
boxShadow,
// Enhanced styling
gradient,
trackGradient,
barGradient,
textColor,
percentageColor,
progressColor,
trackBorderColor,
barBorderColor,
trackBorderWidth,
barBorderWidth,
trackOpacity,
barOpacity,
animationDuration,
customCSS,
// Typography
labelFontSize,
labelFontWeight,
labelColor,
labelSize,
labelPosition,
// Functions
onValueChange: onChange,
onComplete,
onError,
onThresholdCross,
// Thresholds
thresholds,
// Loading/Status text
loadingText,
showLoadingText,
loadingTextPosition,
customLoadingContent,
// Indicator control
hideIndicator,
// Accessibility
ariaLabel,
ariaDescribedBy,
// IDs
trackId,
barId,
labelId,
descriptionId
}),
[
currentValue,
bufferValue,
segments,
isIndeterminate,
currentStatus,
variant,
size,
transition,
trackColor,
barColor,
backgroundColor,
borderColor,
borderRadius,
height,
diameter,
boxShadow,
gradient,
trackGradient,
barGradient,
textColor,
percentageColor,
progressColor,
trackBorderColor,
barBorderColor,
trackBorderWidth,
barBorderWidth,
trackOpacity,
barOpacity,
animationDuration,
customCSS,
labelFontSize,
labelFontWeight,
labelColor,
labelSize,
labelPosition,
onChange,
onComplete,
onError,
onThresholdCross,
thresholds,
loadingText,
showLoadingText,
loadingTextPosition,
customLoadingContent,
hideIndicator,
ariaLabel,
ariaDescribedBy,
trackId,
barId,
labelId,
descriptionId
]
);
const containerStyles = useMemo(() => {
const baseStyles = {};
if (width) baseStyles.width = width;
if (padding) baseStyles.padding = padding;
if (margin) baseStyles.margin = margin;
if (boxShadow) baseStyles.boxShadow = boxShadow;
return baseStyles;
}, [width, padding, margin, boxShadow]);
const sizeStyles = getSizeStyles(size, variant);
const defaultHeight = isCircularSizeStyles(sizeStyles) ? void 0 : sizeStyles.height;
return /* @__PURE__ */ jsx(ProgressContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"relative",
variant === "circular" ? "inline-flex items-center justify-center relative" : "w-full",
className
),
style: {
...containerStyles,
...!variant.includes("circular") && { height: height || defaultHeight }
},
role: "progressbar",
"aria-valuemin": 0,
"aria-valuemax": 100,
"aria-valuenow": isIndeterminate ? void 0 : Math.round(currentValue),
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy || descriptionId,
...props,
children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(ProgressTrack, {}),
/* @__PURE__ */ jsx(ProgressBar, {}),
bufferValue && /* @__PURE__ */ jsx(
ProgressBar,
{
value: bufferValue,
className: "opacity-50",
style: { backgroundColor: bufferColor }
}
),
segments.map((segment) => /* @__PURE__ */ jsx(ProgressBar, { segment, value: segment.value }, segment.id)),
thresholds.map((threshold, index) => /* @__PURE__ */ jsx(ProgressThresholdMarker, { threshold }, index)),
variant === "circular" && showLoadingText && /* @__PURE__ */ jsx(
"div",
{
className: cn(
"absolute inset-0 flex items-center justify-center",
loadingTextPosition === "center" && "text-center",
"pointer-events-none z-10"
),
style: {
...textColor && { color: textColor },
...percentageColor && { color: percentageColor }
},
children: customLoadingContent || /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: isIndeterminate ? loadingText || "Loading..." : loadingText || `${Math.round(currentValue)}%` })
}
),
(() => {
const position = labelPosition || "outside";
const isOverlayPosition = position === "overlay" || position === "inside" || variant === "bar-with-label" || variant === "overlay-style";
if (isOverlayPosition) {
return /* @__PURE__ */ jsx(ProgressLabel, {});
}
switch (position) {
case "top":
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-3", children: [
/* @__PURE__ */ jsx(ProgressLabel, {}),
/* @__PURE__ */ jsx(ProgressValueDescription, {})
] }) });
case "bottom":
case "outside":
default:
return /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mt-2 mb-2", children: [
/* @__PURE__ */ jsx(ProgressLabel, {}),
/* @__PURE__ */ jsx(ProgressValueDescription, {})
] });
case "left":
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
/* @__PURE__ */ jsx(ProgressLabel, {}),
/* @__PURE__ */ jsx("div", { className: "flex-1" })
] });
case "right":
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-2", children: [
/* @__PURE__ */ jsx("div", { className: "flex-1" }),
/* @__PURE__ */ jsx(ProgressLabel, {})
] });
}
})(),
!hideIndicator && /* @__PURE__ */ jsx(ProgressIndicator, {})
] })
}
) });
}
);
ProgressComponent.displayName = "Progress";
const ProgressWithSubcomponents = ProgressComponent;
ProgressWithSubcomponents.Track = ProgressTrack;
ProgressWithSubcomponents.Bar = ProgressBar;
ProgressWithSubcomponents.Label = ProgressLabel;
ProgressWithSubcomponents.ValueDescription = ProgressValueDescription;
ProgressWithSubcomponents.ThresholdMarker = ProgressThresholdMarker;
ProgressWithSubcomponents.Indicator = ProgressIndicator;
ProgressWithSubcomponents.Container = ProgressContainer;
const RadioGroupContext = createContext(null);
const useRadioGroupContext = () => {
const context = useContext(RadioGroupContext);
if (!context) {
throw new Error("RadioGroup compound components must be used within a RadioGroup component");
}
return context;
};
const RadioGroupLabel = forwardRef(
({ className, style, required, children, ...props }, ref) => {
const context = useRadioGroupContext();
const labelStyles = cn(
"block text-sm font-medium mb-2",
context.status === "error" && "text-red-600",
context.status === "success" && "text-green-600",
context.status === "warning" && "text-yellow-600",
context.status === "default" && "text-gray-700",
context.disabled && "text-gray-400",
className
);
return /* @__PURE__ */ jsxs("label", { ref, className: labelStyles, style, ...props, children: [
children,
(required || context.required) && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
] });
}
);
RadioGroupLabel.displayName = "RadioGroupLabel";
const RadioGroupHelperText = forwardRef(
({ className, style, children, ...props }, ref) => {
const context = useRadioGroupContext();
const helperStyles = cn(
"mt-2 text-xs",
context.status === "error" && "text-red-600",
context.status === "success" && "text-green-600",
context.status === "warning" && "text-yellow-600",
context.status === "default" && "text-gray-500",
context.disabled && "text-gray-400",
className
);
return /* @__PURE__ */ jsx("div", { ref, className: helperStyles, style, ...props, children });
}
);
RadioGroupHelperText.displayName = "RadioGroupHelperText";
const RadioOption = forwardRef(
({
value,
label,
description,
disabled = false,
icon,
checkedIcon,
className,
style,
children,
// Option-specific styles
optionBackgroundColor,
optionBorderColor,
optionBorderWidth,
optionBorderRadius,
optionPadding,
// Radio button styles
radioSize,
radioBackgroundColor,
radioBorderColor,
radioBorderWidth,
radioCheckedColor: _radioCheckedColor,
radioBoxShadow,
// Label styles
labelColor,
labelFontSize,
labelFontWeight,
descriptionColor,
descriptionFontSize,
// Focus styles
focusRingColor: _focusRingColor,
focusRingWidth: _focusRingWidth,
focusBackgroundColor,
// Hover styles
hoverBackgroundColor,
hoverBorderColor,
...props
}, ref) => {
const context = useRadioGroupContext();
const [isFocused, setIsFocused] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const isSelected = context.value === value;
const isDisabled = disabled || context.disabled || context.loading;
const handleChange = useCallback(() => {
if (!isDisabled && context.onChange) {
context.onChange(value);
}
}, [isDisabled, context, value]);
const getSizeDimensions = () => {
const dimensions2 = {
sm: { radio: "16px", fontSize: "0.875rem", padding: "0.5rem" },
md: { radio: "20px", fontSize: "1rem", padding: "0.75rem" },
lg: { radio: "24px", fontSize: "1.125rem", padding: "1rem" }
};
return dimensions2[context.size || "md"];
};
const dimensions = getSizeDimensions();
const getVariantStyles = () => {
const variantStyles = {
default: cn(
"border bg-white hover:bg-gray-50",
isSelected && "border-blue-500 bg-blue-50",
context.status === "error" && "border-red-300",
context.status === "success" && "border-green-300",
context.status === "warning" && "border-yellow-300",
!isSelected && context.status === "default" && "border-gray-200"
),
filled: cn(
"border-0 bg-gray-100 hover:bg-gray-200",
isSelected && "bg-blue-100",
context.status === "error" && isSelected && "bg-red-100",
context.status === "success" && isSelected && "bg-green-100",
context.status === "warning" && isSelected && "bg-yellow-100"
),
outlined: cn(
"border-2 bg-transparent hover:bg-gray-50",
isSelected && "border-blue-500 bg-blue-50",
context.status === "error" && "border-red-500",
context.status === "success" && "border-green-500",
context.status === "warning" && "border-yellow-500",
!isSelected && context.status === "default" && "border-gray-300"
),
ghost: cn("border-0 bg-transparent hover:bg-gray-100", isSelected && "bg-blue-100"),
card: cn(
"border bg-white hover:bg-gray-50 shadow-sm hover:shadow-md",
isSelected && "border-blue-500 bg-blue-50 shadow-md"
)
};
return variantStyles[context.variant || "default"];
};
const optionStyles = cn(
"relative flex items-start gap-3 p-3 rounded-lg cursor-pointer transition-all duration-200",
"focus-within:outline-none",
getVariantStyles(),
isDisabled && "cursor-not-allowed opacity-50",
isFocused && "ring-2 ring-offset-1",
isFocused && context.status === "error" && "ring-red-500",
isFocused && context.status === "success" && "ring-green-500",
isFocused && context.status === "warning" && "ring-yellow-500",
isFocused && context.status === "default" && "ring-blue-500",
className
);
const radioStyles = cn(
"mt-0.5 border-2 rounded-full flex-shrink-0 relative",
"focus:outline-none focus:ring-2 focus:ring-offset-1",
isSelected && "border-current",
!isSelected && "border-gray-300",
isDisabled && "cursor-not-allowed",
context.status === "error" && "text-red-500",
context.status === "success" && "text-green-500",
context.status === "warning" && "text-yellow-500",
context.status === "default" && "text-blue-500"
);
const customOptionStyles = {
backgroundColor: isHovered && hoverBackgroundColor ? hoverBackgroundColor : optionBackgroundColor,
borderColor: isHovered && hoverBorderColor ? hoverBorderColor : optionBorderColor,
borderWidth: optionBorderWidth,
borderRadius: optionBorderRadius,
padding: optionPadding || dimensions.padding,
...isFocused && focusBackgroundColor && { backgroundColor: focusBackgroundColor },
...style
};
const customRadioStyles = {
width: radioSize || dimensions.radio,
height: radioSize || dimensions.radio,
backgroundColor: radioBackgroundColor,
borderColor: radioBorderColor,
borderWidth: radioBorderWidth,
boxShadow: radioBoxShadow
// Note: Focus ring color would be applied here if needed
};
const customLabelStyles = {
color: labelColor,
fontSize: labelFontSize || dimensions.fontSize,
fontWeight: labelFontWeight
};
const customDescriptionStyles = {
color: descriptionColor,
fontSize: descriptionFontSize
};
return /* @__PURE__ */ jsxs(
"label",
{
className: optionStyles,
style: customOptionStyles,
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
onClick: handleChange,
children: [
/* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsx(
"input",
{
ref,
type: "radio",
name: context.name,
value,
checked: isSelected,
disabled: isDisabled,
required: context.required,
className: "sr-only",
onFocus: () => setIsFocused(true),
onBlur: () => setIsFocused(false),
onChange: handleChange,
"aria-describedby": description ? `${value}-description` : void 0,
...props
}
),
/* @__PURE__ */ jsx("div", { className: radioStyles, style: customRadioStyles, children: isSelected && /* @__PURE__ */ jsx("div", { className: "absolute inset-1 rounded-full bg-current", children: checkedIcon && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full h-full text-white", children: checkedIcon }) }) })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
icon && !isSelected && /* @__PURE__ */ jsx("div", { className: "mb-1 text-gray-400", children: icon }),
(label || children) && /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", style: customLabelStyles, children: label || children }),
description && /* @__PURE__ */ jsx(
"div",
{
id: `${value}-description`,
className: "mt-1 text-xs text-gray-500",
style: customDescriptionStyles,
children: description
}
)
] })
]
}
);
}
);
RadioOption.displayName = "RadioOption";
const RadioGroupBase = forwardRef(
({
// Core props
value: controlledValue,
defaultValue,
onChange,
disabled = false,
required = false,
loading = false,
name,
// Visual props
variant = "default",
size = "md",
status = "default",
orientation = "vertical",
// Content props
children,
label,
helperText,
errorMessage,
emptyMessage,
// Animation props
transition: _transition = "smooth",
transitionDuration: _transitionDuration = 200,
// Container styles
className,
style,
containerClassName,
containerStyle,
backgroundColor,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding,
paddingX,
paddingY,
boxShadow,
// Radio group styles
gap,
groupBackgroundColor,
groupBorderWidth,
groupBorderColor,
groupBorderRadius,
groupPadding,
// Label styles
labelColor,
labelFontSize,
labelFontWeight,
labelFontFamily,
// Helper text styles
helperTextColor,
helperTextFontSize,
errorMessageColor,
// Focus styles
focusRingColor: _focusRingColor2,
focusRingWidth: _focusRingWidth2,
focusRingOffset: _focusRingOffset,
focusBorderColor: _focusBorderColor,
focusBackgroundColor: _focusBackgroundColor,
focusBoxShadow: _focusBoxShadow,
// Custom render props
renderLabel,
renderOption,
// Status colors
successColor: _successColor,
warningColor: _warningColor,
errorColor: _errorColor,
...props
}, ref) => {
const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue || "");
const isControlled = controlledValue !== void 0;
const value = isControlled ? controlledValue : uncontrolledValue;
const handleChange = useCallback(
(newValue) => {
if (disabled || loading) return;
if (!isControlled) {
setUncontrolledValue(newValue);
}
onChange == null ? void 0 : onChange(newValue);
},
[disabled, loading, isControlled, onChange]
);
let extractedLabel = label;
let extractedHelperText = helperText;
const radioOptions = [];
if (children) {
React.Children.forEach(children, (child) => {
if (React.isValidElement(child)) {
if (child.type === RadioGroupLabel) {
extractedLabel = child.props.children;
} else if (child.type === RadioGroupHelperText) {
extractedHelperText = child.props.children;
} else if (child.type === RadioOption) {
radioOptions.push(child);
}
}
});
}
const contextValue = {
value,
onChange: handleChange,
disabled,
required,
loading,
variant,
size,
status,
name
};
const containerStyles = {
backgroundColor,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding: padding || (paddingX || paddingY ? void 0 : "0"),
paddingLeft: paddingX,
paddingRight: paddingX,
paddingTop: paddingY,
paddingBottom: paddingY,
boxShadow,
...containerStyle
};
const groupStyles = cn(
"space-y-2",
orientation === "horizontal" && "flex flex-wrap gap-4 space-y-0",
disabled && "opacity-50"
);
const customGroupStyles = {
backgroundColor: groupBackgroundColor,
borderWidth: groupBorderWidth,
borderColor: groupBorderColor,
borderRadius: groupBorderRadius,
padding: groupPadding,
gap,
...style
};
const customLabelStyles = {
color: labelColor,
fontSize: labelFontSize,
fontWeight: labelFontWeight,
fontFamily: labelFontFamily
};
const customHelperTextStyles = {
color: helperTextColor,
fontSize: helperTextFontSize
};
const customErrorStyles = {
color: errorMessageColor || _errorColor,
fontSize: helperTextFontSize
};
const renderOptions = () => {
if (radioOptions.length === 0 && emptyMessage) {
return /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 italic py-4 text-center", children: emptyMessage });
}
return radioOptions.map((option) => {
if (renderOption) {
return renderOption(
option.props,
value === option.props.value,
disabled || option.props.disabled
);
}
return option;
});
};
const labelContent = renderLabel ? renderLabel(required) : extractedLabel;
return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", containerClassName), style: containerStyles, children: [
labelContent && /* @__PURE__ */ jsx(RadioGroupLabel, { required, style: customLabelStyles, children: labelContent }),
/* @__PURE__ */ jsx(
"div",
{
ref,
role: "radiogroup",
"aria-required": required,
"aria-invalid": status === "error" || !!errorMessage,
"aria-describedby": errorMessage ? "radiogroup-error" : extractedHelperText ? "radiogroup-helper" : void 0,
className: cn(groupStyles, className),
style: customGroupStyles,
...props,
children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-8", children: [
/* @__PURE__ */ jsxs("svg", { className: "animate-spin h-6 w-6 text-gray-400", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] }),
/* @__PURE__ */ jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Loading options..." })
] }) : renderOptions()
}
),
extractedHelperText && !errorMessage && /* @__PURE__ */ jsx(RadioGroupHelperText, { style: customHelperTextStyles, children: extractedHelperText }),
errorMessage && /* @__PURE__ */ jsx(RadioGroupHelperText, { style: customErrorStyles, children: errorMessage })
] }) });
}
);
RadioGroupBase.displayName = "RadioGroup";
const RadioGroup = RadioGroupBase;
RadioGroup.Option = RadioOption;
RadioGroup.Label = RadioGroupLabel;
RadioGroup.HelperText = RadioGroupHelperText;
const RatingContext = createContext(null);
const useRatingContext = () => {
const context = useContext(RatingContext);
if (!context) {
throw new Error("Rating compound components must be used within a Rating component");
}
return context;
};
const RatingStar = memo(
forwardRef(({ index, children, className, style, ...props }, ref) => {
const {
value,
hoverValue,
maxValue,
precision,
size,
variant,
status,
isDisabled,
isReadOnly,
onChange,
onHoverChange,
onFocus,
onBlur,
// Style props
iconSpacing: _iconSpacing,
iconSize,
filledColor,
emptyColor,
hoverColor,
disabledColor,
focusRingColor,
focusRingWidth,
// Custom renderers
renderIcon
} = useRatingContext();
const [isFocused, setIsFocused] = useState(false);
const currentValue = hoverValue !== null ? hoverValue : value;
const isFilled = currentValue >= index + 1;
const isPartial = precision < 1 && currentValue > index && currentValue < index + 1;
const partialValue = isPartial ? (currentValue - index) / 1 : 0;
const isHovered = hoverValue !== null;
const handleClick = useCallback(() => {
if (isDisabled || isReadOnly) return;
const newValue = index + 1;
onChange(newValue);
}, [index, isDisabled, isReadOnly, onChange]);
const handleMouseEnter = useCallback(() => {
if (isDisabled || isReadOnly) return;
onHoverChange(index + 1);
}, [index, isDisabled, isReadOnly, onHoverChange]);
const handleMouseLeave = useCallback(() => {
if (isDisabled || isReadOnly) return;
onHoverChange(null);
}, [isDisabled, isReadOnly, onHoverChange]);
const handleFocus = useCallback(() => {
if (isDisabled || isReadOnly) return;
setIsFocused(true);
onFocus == null ? void 0 : onFocus();
}, [isDisabled, isReadOnly, onFocus]);
const handleBlur = useCallback(() => {
if (isDisabled || isReadOnly) return;
setIsFocused(false);
onBlur == null ? void 0 : onBlur();
}, [isDisabled, isReadOnly, onBlur]);
const handleKeyDown = useCallback(
(event) => {
if (isDisabled || isReadOnly) return;
switch (event.key) {
case "ArrowRight":
case "ArrowUp": {
event.preventDefault();
const nextValue = Math.min(value + precision, maxValue);
onChange(nextValue);
break;
}
case "ArrowLeft":
case "ArrowDown": {
event.preventDefault();
const prevValue = Math.max(value - precision, 0);
onChange(prevValue);
break;
}
case "Home":
event.preventDefault();
onChange(0);
break;
case "End":
event.preventDefault();
onChange(maxValue);
break;
case "Enter":
case " ":
event.preventDefault();
handleClick();
break;
}
},
[isDisabled, isReadOnly, value, precision, maxValue, onChange, handleClick]
);
const baseStyles = cn(
"inline-flex items-center justify-center transition-all focus-visible:outline-none",
"cursor-pointer select-none",
isDisabled && "cursor-not-allowed opacity-50",
isReadOnly && "cursor-default"
);
const sizeStyles = {
sm: cn("w-4 h-4", iconSize || "w-4 h-4"),
md: cn("w-5 h-5", iconSize || "w-5 h-5"),
lg: cn("w-6 h-6", iconSize || "w-6 h-6")
};
const variantStyles = {
default: cn(
"text-gray-300",
isFilled && "text-yellow-400",
isHovered && !isFilled && "text-yellow-300",
isFocused && "ring-2 ring-offset-2 ring-yellow-500"
),
soft: cn(
"text-gray-200",
isFilled && "text-yellow-300",
isHovered && !isFilled && "text-yellow-200",
isFocused && "ring-2 ring-offset-2 ring-yellow-400"
),
minimal: cn(
"text-gray-300",
isFilled && "text-yellow-500",
isHovered && !isFilled && "text-yellow-400",
isFocused && "ring-1 ring-yellow-500"
),
outlined: cn(
"text-gray-300 border border-gray-300",
isFilled && "text-yellow-400 border-yellow-400",
isHovered && !isFilled && "text-yellow-300 border-yellow-300",
isFocused && "ring-2 ring-offset-2 ring-yellow-500"
),
compact: cn(
"text-gray-300",
isFilled && "text-yellow-400",
isHovered && !isFilled && "text-yellow-300",
isFocused && "ring-1 ring-yellow-500"
),
emoji: cn("text-2xl", isFilled && "scale-110", isHovered && !isFilled && "scale-105")
};
const statusStyles = {
default: "",
success: cn(
"text-green-300",
isFilled && "text-green-400",
isHovered && !isFilled && "text-green-300"
),
warning: cn(
"text-yellow-300",
isFilled && "text-yellow-400",
isHovered && !isFilled && "text-yellow-300"
),
error: cn(
"text-red-300",
isFilled && "text-red-400",
isHovered && !isFilled && "text-red-300"
),
info: cn(
"text-blue-300",
isFilled && "text-blue-400",
isHovered && !isFilled && "text-blue-300"
)
};
const customStyles = {
...style,
...iconSize && { width: iconSize, height: iconSize },
...isFilled && filledColor && { color: filledColor },
...!isFilled && emptyColor && { color: emptyColor },
...isHovered && hoverColor && { color: hoverColor },
...isDisabled && disabledColor && { color: disabledColor },
...isFocused && focusRingColor && focusRingWidth && {
boxShadow: `0 0 0 ${focusRingWidth} ${focusRingColor}`
}
};
const iconProps = {
index,
value,
hoverValue,
isFilled,
isPartial,
partialValue,
isHovered,
isDisabled,
isReadOnly,
size,
variant,
status
};
const defaultIcon = /* @__PURE__ */ jsx(
"svg",
{
className: "w-full h-full",
fill: "currentColor",
viewBox: "0 0 24 24",
stroke: "currentColor",
strokeWidth: variant === "outlined" ? 1 : 0,
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
}
)
}
);
const renderPartialStar = () => {
if (!isPartial) return null;
return /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full", children: [
/* @__PURE__ */ jsx(
"div",
{
className: "absolute inset-0 overflow-hidden",
style: { width: `${partialValue * 100}%` },
children: renderIcon ? renderIcon(iconProps) : defaultIcon
}
),
/* @__PURE__ */ jsx("div", { className: "absolute inset-0 opacity-30", children: renderIcon ? renderIcon(iconProps) : defaultIcon })
] });
};
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
className: cn(
baseStyles,
sizeStyles[size],
variantStyles[variant],
statusStyles[status],
className
),
style: customStyles,
disabled: isDisabled,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onFocus: handleFocus,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
role: "radio",
"aria-checked": isFilled,
"aria-label": `Rate ${index + 1} out of ${maxValue}`,
tabIndex: isDisabled || isReadOnly ? -1 : 0,
...props,
children: children || (isPartial ? renderPartialStar() : renderIcon ? renderIcon(iconProps) : defaultIcon)
}
);
})
);
RatingStar.displayName = "RatingStar";
const RatingLabel = memo(
forwardRef(
({ children, className, ...props }, ref) => {
const {
value,
maxValue,
isDisabled,
isReadOnly,
size,
variant,
status,
labelColor,
labelFontSize,
labelFontWeight,
labelMarginBottom,
renderLabel
} = useRatingContext();
const labelProps = {
value,
maxValue,
isDisabled,
isReadOnly,
size,
variant,
status
};
const baseStyles = cn(
"block font-medium leading-tight text-gray-700",
size === "sm" && "text-xs",
size === "md" && "text-sm",
size === "lg" && "text-base",
isDisabled && "opacity-50"
);
const customStyles = {
...labelColor && { color: labelColor },
...labelFontSize && { fontSize: labelFontSize },
...labelFontWeight && { fontWeight: labelFontWeight },
...labelMarginBottom && { marginBottom: labelMarginBottom }
};
return /* @__PURE__ */ jsx("span", { ref, className: cn(baseStyles, className), style: customStyles, ...props, children: children || (renderLabel ? renderLabel(labelProps) : `${value} out of ${maxValue}`) });
}
)
);
RatingLabel.displayName = "RatingLabel";
const RatingDescription = memo(
forwardRef(
({ children, className, ...props }, ref) => {
const {
value,
maxValue,
isDisabled,
isReadOnly,
size,
variant,
status,
descriptionColor,
descriptionFontSize,
descriptionFontWeight,
descriptionMarginTop,
renderDescription
} = useRatingContext();
const descriptionProps = {
value,
maxValue,
isDisabled,
isReadOnly,
size,
variant,
status
};
const baseStyles = cn(
"block leading-tight text-gray-600",
size === "sm" && "text-xs",
size === "md" && "text-sm",
size === "lg" && "text-base",
isDisabled && "opacity-50"
);
const customStyles = {
...descriptionColor && { color: descriptionColor },
...descriptionFontSize && { fontSize: descriptionFontSize },
...descriptionFontWeight && { fontWeight: descriptionFontWeight },
...descriptionMarginTop && { marginTop: descriptionMarginTop }
};
return /* @__PURE__ */ jsx("span", { ref, className: cn(baseStyles, className), style: customStyles, ...props, children: children || (renderDescription ? renderDescription(descriptionProps) : "") });
}
)
);
RatingDescription.displayName = "RatingDescription";
const RatingInput = memo(
forwardRef(
({ className, ...props }, ref) => {
const { value, isDisabled, isReadOnly, isRequired } = useRatingContext();
return /* @__PURE__ */ jsx(
"input",
{
ref,
type: "hidden",
value,
disabled: isDisabled,
readOnly: isReadOnly,
required: isRequired,
className: cn("sr-only", className),
...props
}
);
}
)
);
RatingInput.displayName = "RatingInput";
const RatingIcon = memo(
forwardRef(
({ children, className, ...props }, ref) => {
const { size } = useRatingContext();
const iconStyles = cn(
"inline-flex items-center justify-center",
size === "sm" && "w-4 h-4",
size === "md" && "w-5 h-5",
size === "lg" && "w-6 h-6",
className
);
return /* @__PURE__ */ jsx("span", { ref, className: iconStyles, ...props, children });
}
)
);
RatingIcon.displayName = "RatingIcon";
const RatingBase = memo(
forwardRef(
({
// Core functionality
value: controlledValue,
defaultValue = 0,
maxValue = 5,
precision = 1,
onChange,
onHoverChange,
// States
disabled = false,
readOnly = false,
required = false,
// Labels and messages
children,
label,
description,
helperText,
errorMessage,
// Styling variants
variant = "default",
size = "md",
status = "default",
// Animation and transitions
transition = "scale",
transitionDuration = 200,
// Custom render functions
renderIcon,
renderLabel,
renderDescription,
// Icons
emptyIcon: _emptyIcon,
filledIcon: _filledIcon,
hoverIcon: _hoverIcon,
partialIcon: _partialIcon,
readOnlyIcon: _readOnlyIcon,
// Form integration
name,
form,
// Style props
className,
style = {},
// Border styling
borderWidth,
borderColor,
borderStyle,
borderRadius,
// Typography
fontSize,
fontWeight,
fontFamily,
textColor,
// Colors
backgroundColor,
hoverBackgroundColor: _hoverBackgroundColor,
// Focus styles
focusRingColor,
focusRingWidth,
focusRingOffset: _focusRingOffset,
focusBorderColor: _focusBorderColor,
focusBackgroundColor: _focusBackgroundColor,
// Shadows
boxShadow,
focusBoxShadow: _focusBoxShadow,
hoverBoxShadow: _hoverBoxShadow,
// Spacing
padding,
paddingX,
paddingY,
gap,
iconSpacing,
// Icon customization
iconSize,
iconColor: _iconColor,
filledColor,
emptyColor,
hoverColor,
disabledColor,
partialColor: _partialColor,
// Label styles
labelColor,
labelFontSize: _labelFontSize,
labelFontWeight: _labelFontWeight,
labelMarginBottom: _labelMarginBottom,
// Description styles
descriptionColor,
descriptionFontSize: _descriptionFontSize,
descriptionFontWeight: _descriptionFontWeight,
descriptionMarginTop: _descriptionMarginTop,
// Helper text styles
helperTextFontSize,
helperTextColor,
helperTextMarginTop,
// Required asterisk styles
requiredColor: _requiredColor,
// Event handlers
onFocus,
onBlur,
onMouseEnter,
onMouseLeave,
onKeyDown,
// Accessibility
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-invalid": ariaInvalid,
"aria-required": ariaRequired,
"aria-valuenow": ariaValuenow,
"aria-valuemin": ariaValuemin,
"aria-valuemax": ariaValuemax,
"aria-valuetext": ariaValuetext,
// Rest of props
...props
}, ref) => {
const [internalValue, setInternalValue] = useState(defaultValue);
const [hoverValue, setHoverValue] = useState(null);
const isControlled = controlledValue !== void 0;
const currentValue = isControlled ? controlledValue : internalValue;
const hasError = status === "error" || Boolean(errorMessage);
const handleChange = useCallback(
(newValue) => {
if (!isControlled) {
setInternalValue(newValue);
}
onChange == null ? void 0 : onChange(newValue);
},
[isControlled, onChange]
);
const handleHoverChange = useCallback(
(newHoverValue) => {
setHoverValue(newHoverValue);
onHoverChange == null ? void 0 : onHoverChange(newHoverValue);
},
[onHoverChange]
);
const handleFocus = useCallback(() => {
onFocus == null ? void 0 : onFocus();
}, [onFocus]);
const handleBlur = useCallback(() => {
onBlur == null ? void 0 : onBlur();
}, [onBlur]);
const handleMouseEnter = useCallback(() => {
onMouseEnter == null ? void 0 : onMouseEnter();
}, [onMouseEnter]);
const handleMouseLeave = useCallback(() => {
handleHoverChange(null);
onMouseLeave == null ? void 0 : onMouseLeave();
}, [handleHoverChange, onMouseLeave]);
const handleKeyDown = useCallback(
(event) => {
onKeyDown == null ? void 0 : onKeyDown(event);
},
[onKeyDown]
);
const contextValue = {
value: currentValue,
hoverValue,
maxValue,
precision,
size,
variant,
status,
isDisabled: disabled,
isReadOnly: readOnly,
isRequired: required,
hasError,
onChange: handleChange,
onHoverChange: handleHoverChange,
onFocus: handleFocus,
onBlur: handleBlur,
// Style props
iconSpacing,
iconSize,
filledColor,
emptyColor,
hoverColor,
disabledColor,
focusRingColor,
focusRingWidth,
labelColor,
descriptionColor,
fontSize,
fontWeight,
fontFamily,
gap,
padding,
// Custom renderers
renderIcon,
renderLabel,
renderDescription
};
const baseStyles = cn(
"inline-flex items-center",
disabled && "pointer-events-none",
readOnly && "pointer-events-none"
);
const transitionStyles = {
none: "",
fade: cn("transition-opacity", `duration-${transitionDuration}`),
scale: cn("transition-transform", `duration-${transitionDuration}`),
grow: cn("transition-all", `duration-${transitionDuration}`),
bounce: cn("transition-all ease-bounce", `duration-${transitionDuration}`)
};
const customStyles = {
...style,
// Border
...borderWidth && { borderWidth },
...borderColor && { borderColor },
...borderStyle && { borderStyle },
...borderRadius && { borderRadius },
// Typography
...fontSize && { fontSize },
...fontWeight && { fontWeight },
...fontFamily && { fontFamily },
...textColor && { color: textColor },
// Colors
...backgroundColor && { backgroundColor },
// Shadows
...boxShadow && { boxShadow },
// Spacing
...padding && { padding },
...paddingX && {
paddingLeft: paddingX,
paddingRight: paddingX
},
...paddingY && {
paddingTop: paddingY,
paddingBottom: paddingY
},
...gap && { gap }
};
const stars = useMemo(() => {
return Array.from({ length: maxValue }, (_, index) => /* @__PURE__ */ jsx(RatingStar, { index }, index));
}, [maxValue]);
return /* @__PURE__ */ jsx(RatingContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(baseStyles, transitionStyles[transition], className),
style: customStyles,
role: "radiogroup",
"aria-label": ariaLabel || (typeof label === "string" ? label : "Rating"),
"aria-describedby": ariaDescribedby,
"aria-invalid": ariaInvalid || hasError,
"aria-required": ariaRequired || required,
"aria-valuenow": ariaValuenow || currentValue,
"aria-valuemin": ariaValuemin || 0,
"aria-valuemax": ariaValuemax || maxValue,
"aria-valuetext": ariaValuetext || `${currentValue} out of ${maxValue}`,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onKeyDown: handleKeyDown,
...props,
children: [
children || /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
label && /* @__PURE__ */ jsx(RatingLabel, { children: label }),
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: stars })
] }),
description && /* @__PURE__ */ jsx("div", { className: "mt-3 ml-2", children: /* @__PURE__ */ jsx(RatingDescription, { children: description }) }),
/* @__PURE__ */ jsx(RatingInput, { name, form })
] }),
(helperText || errorMessage) && /* @__PURE__ */ jsx(
"p",
{
className: cn(
"mt-1.5 leading-tight",
size === "sm" && "text-xs",
size === "md" && "text-sm",
size === "lg" && "text-base",
hasError ? "text-red-600" : "text-gray-500"
),
style: {
fontSize: helperTextFontSize,
color: helperTextColor,
marginTop: helperTextMarginTop
},
children: errorMessage || helperText
}
)
]
}
) });
}
)
);
RatingBase.displayName = "Rating";
const Rating = RatingBase;
Rating.Star = RatingStar;
Rating.Label = RatingLabel;
Rating.Description = RatingDescription;
Rating.Input = RatingInput;
Rating.Icon = RatingIcon;
const SegmentedContext = createContext(null);
const useSegmented = () => {
const context = useContext(SegmentedContext);
if (!context) {
throw new Error("useSegmented must be used within a Segmented component");
}
return context;
};
const Segmented = forwardRef(
({
value,
defaultValue,
onChange,
options,
disabled = false,
readOnly = false,
fullWidth = false,
rounded = false,
stretch: _stretch = false,
variant = "solid",
size = "md",
direction = "horizontal",
transition = "smooth",
// Style props
borderWidth,
borderColor,
borderRadius,
borderStyle,
fontSize,
fontWeight,
fontFamily,
textColor,
backgroundColor,
hoverColor,
activeColor,
selectedTextColor,
indicatorColor,
indicatorTransition,
indicatorBorderRadius,
padding,
gap,
margin,
focusRingColor,
focusBorderColor,
hoverShadow,
// Advanced features
animateIndicator = true,
flexWrap = false,
// Custom render
renderItem,
// Accessibility
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className,
children,
...props
}, _ref) => {
var _a;
const [internalValue, setInternalValue] = useState(defaultValue || ((_a = options[0]) == null ? void 0 : _a.value) || "");
const [indicatorStyle, setIndicatorStyle] = useState({});
const containerRef = useRef(null);
const currentValue = value !== void 0 ? value : internalValue;
const handleChange = useCallback(
(newValue) => {
if (disabled || readOnly) return;
if (value === void 0) {
setInternalValue(newValue);
}
onChange == null ? void 0 : onChange(newValue);
},
[disabled, readOnly, value, onChange]
);
const updateIndicator = useCallback(
(element) => {
if (!element || !containerRef.current || !animateIndicator) return;
const container = containerRef.current;
const containerRect = container.getBoundingClientRect();
const elementRect = element.getBoundingClientRect();
const transitionStyles = {
smooth: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
bouncy: "all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)",
swift: "all 0.15s cubic-bezier(0.23, 1, 0.32, 1)",
elastic: "all 0.8s cubic-bezier(0.68, -0.55, 0.085, 1.35)",
instant: "none",
fade: "all 0.4s ease-in-out"
};
const newStyle = {
position: "absolute",
transition: indicatorTransition || transitionStyles[transition],
...variant === "underline" ? {
left: elementRect.left - containerRect.left,
width: elementRect.width,
height: "2px",
bottom: 0,
backgroundColor: indicatorColor || "#3b82f6",
borderRadius: 0
} : direction === "horizontal" ? {
left: elementRect.left - containerRect.left,
width: elementRect.width,
height: "100%",
top: 0,
backgroundColor: indicatorColor || (variant === "solid" ? "#3b82f6" : "rgba(59, 130, 246, 0.1)"),
borderRadius: indicatorBorderRadius || borderRadius || "0.25rem"
} : {
top: elementRect.top - containerRect.top,
height: elementRect.height,
width: "100%",
left: 0,
backgroundColor: indicatorColor || (variant === "solid" ? "#3b82f6" : "rgba(59, 130, 246, 0.1)"),
borderRadius: indicatorBorderRadius || borderRadius || "0.25rem"
},
zIndex: 0
};
setIndicatorStyle(newStyle);
},
[
direction,
indicatorTransition,
indicatorColor,
variant,
indicatorBorderRadius,
borderRadius,
animateIndicator,
transition
]
);
const handleKeyDown = useCallback(
(event) => {
var _a2, _b;
if (disabled || readOnly) return;
const { key } = event;
const currentIndex = options.findIndex((option) => option.value === currentValue);
let newIndex = currentIndex;
if (direction === "horizontal") {
if (key === "ArrowLeft" || key === "ArrowUp") {
event.preventDefault();
newIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
} else if (key === "ArrowRight" || key === "ArrowDown") {
event.preventDefault();
newIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
}
} else {
if (key === "ArrowUp" || key === "ArrowLeft") {
event.preventDefault();
newIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
} else if (key === "ArrowDown" || key === "ArrowRight") {
event.preventDefault();
newIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
}
}
while (((_a2 = options[newIndex]) == null ? void 0 : _a2.disabled) && newIndex !== currentIndex) {
if (key === "ArrowLeft" || key === "ArrowUp") {
newIndex = newIndex > 0 ? newIndex - 1 : options.length - 1;
} else {
newIndex = newIndex < options.length - 1 ? newIndex + 1 : 0;
}
}
if (newIndex !== currentIndex && !((_b = options[newIndex]) == null ? void 0 : _b.disabled)) {
handleChange(options[newIndex].value);
setTimeout(() => {
var _a3;
const newElement = (_a3 = containerRef.current) == null ? void 0 : _a3.querySelector(
`[data-value="${options[newIndex].value}"]`
);
newElement == null ? void 0 : newElement.focus();
}, 0);
}
},
[disabled, readOnly, direction, options, currentValue, handleChange]
);
useEffect(() => {
var _a2;
if (!animateIndicator) return;
const selectedElement = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
`[data-value="${currentValue}"]`
);
if (selectedElement) {
setTimeout(() => updateIndicator(selectedElement), 0);
}
}, [currentValue, updateIndicator, animateIndicator]);
const contextValue = {
value: currentValue,
onChange: handleChange,
disabled,
readOnly,
variant,
size,
direction,
transition,
options,
borderWidth,
borderColor,
borderRadius,
borderStyle,
fontSize,
fontWeight,
fontFamily,
textColor,
backgroundColor,
hoverColor,
activeColor,
selectedTextColor,
indicatorColor,
indicatorTransition,
indicatorBorderRadius,
padding,
gap,
focusRingColor,
focusBorderColor,
hoverShadow,
animateIndicator,
renderItem,
indicatorStyle,
updateIndicator
};
const sizes = {
sm: "text-sm",
md: "text-base",
lg: "text-lg"
};
const baseStyles = cn(
"relative inline-flex",
variant !== "underline" && "bg-gray-100 border border-gray-200",
direction === "horizontal" ? "flex-row" : "flex-col",
sizes[size],
fullWidth && "w-full",
rounded && "rounded-full",
flexWrap && "flex-wrap",
disabled && "opacity-50 cursor-not-allowed"
);
const customStyles = {
...variant !== "underline" && {
borderWidth: borderWidth || "1px",
borderColor: borderColor || "#e5e7eb",
borderStyle: borderStyle || "solid",
borderRadius: borderRadius || (rounded ? "9999px" : "0.5rem"),
backgroundColor: backgroundColor || "#f3f4f6"
},
fontSize,
fontWeight,
fontFamily,
color: textColor,
padding: padding || (variant === "underline" ? "0" : "0.25rem"),
gap: gap || (variant === "underline" ? "1.5rem" : "0.25rem"),
margin
};
return /* @__PURE__ */ jsx(SegmentedContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref: containerRef,
role: "radiogroup",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
className: cn(baseStyles, className),
style: customStyles,
onKeyDown: handleKeyDown,
...props,
children: [
animateIndicator && variant !== "underline" && /* @__PURE__ */ jsx(SegmentedIndicator, {}),
children || options.map((option) => /* @__PURE__ */ jsx(SegmentedItem, { option }, option.value))
]
}
) });
}
);
Segmented.displayName = "Segmented";
const SegmentedItem = ({ option }) => {
const {
value: selectedValue,
onChange,
disabled: groupDisabled,
readOnly,
variant,
size,
direction: _direction2,
transition,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
hoverColor,
activeColor,
selectedTextColor,
padding,
focusRingColor,
focusBorderColor,
hoverShadow,
renderItem,
updateIndicator
} = useSegmented();
const itemRef = useRef(null);
const isSelected = selectedValue === option.value;
const isDisabled = groupDisabled || option.disabled;
const handleClick = () => {
if (isDisabled || readOnly) return;
onChange(option.value);
};
useEffect(() => {
if (isSelected && itemRef.current) {
updateIndicator(itemRef.current);
}
}, [isSelected, updateIndicator]);
if (renderItem) {
return /* @__PURE__ */ jsx("div", { "data-value": option.value, onClick: handleClick, children: renderItem(option, isSelected, Boolean(isDisabled)) });
}
const sizes = {
sm: "px-3 py-1.5 text-sm",
md: "px-4 py-2 text-base",
lg: "px-5 py-2.5 text-lg"
};
const transitionDurations = {
smooth: "duration-300",
bouncy: "duration-500",
swift: "duration-150",
elastic: "duration-700",
instant: "duration-0",
fade: "duration-400"
};
const transitionTiming = {
smooth: "ease-in-out",
bouncy: "ease-in-out",
swift: "ease-out",
elastic: "ease-in-out",
instant: "",
fade: "ease-in-out"
};
const transitionClass = `transition-all ${transitionDurations[transition]} ${transitionTiming[transition]}`;
const variants = {
solid: cn(
"bg-transparent hover:bg-white/10",
transitionClass,
isSelected && "text-white bg-transparent"
),
outline: cn(
"bg-transparent hover:bg-gray-50",
transitionClass,
isSelected && "bg-white border-gray-300 shadow-sm"
),
ghost: cn(
"bg-transparent hover:bg-gray-100",
transitionClass,
isSelected && "bg-gray-200 text-gray-900"
),
filled: cn(
"bg-transparent hover:bg-gray-50",
transitionClass,
isSelected && "bg-blue-50 text-blue-700"
),
minimal: cn(
"bg-transparent hover:bg-gray-50",
transitionClass,
isSelected && "text-blue-600 bg-transparent"
),
underline: cn(
"bg-transparent hover:text-gray-700 border-b-2",
transitionClass,
isSelected ? "text-blue-600 border-blue-600" : "text-gray-600 border-transparent"
)
};
const baseStyles = cn(
"relative z-10 flex items-center justify-center gap-2 font-medium transition-all",
"focus:outline-none",
"disabled:cursor-not-allowed disabled:opacity-50",
sizes[size],
variants[variant],
isDisabled && "cursor-not-allowed opacity-50"
);
const customStyles = {
borderRadius: borderRadius || "0.25rem",
fontSize,
fontWeight,
fontFamily,
color: isSelected ? selectedTextColor : textColor,
padding,
...hoverColor && { ":hover": { backgroundColor: hoverColor } },
...activeColor && { ":active": { backgroundColor: activeColor } },
...hoverShadow && { ":hover": { boxShadow: hoverShadow } },
...focusRingColor && { "--tw-ring-color": focusRingColor },
...focusBorderColor && { "--tw-ring-offset-color": focusBorderColor }
};
return /* @__PURE__ */ jsxs(
"button",
{
ref: itemRef,
type: "button",
role: "radio",
"aria-checked": isSelected,
"data-value": option.value,
className: baseStyles,
style: customStyles,
onClick: handleClick,
disabled: isDisabled,
tabIndex: isSelected ? 0 : -1,
children: [
option.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: option.icon }),
/* @__PURE__ */ jsx("span", { children: option.label })
]
}
);
};
SegmentedItem.displayName = "SegmentedItem";
const SegmentedIndicator = () => {
const { indicatorStyle, animateIndicator } = useSegmented();
if (!animateIndicator) return null;
return /* @__PURE__ */ jsx("div", { style: indicatorStyle });
};
SegmentedIndicator.displayName = "SegmentedIndicator";
const SegmentedCompound = Segmented;
SegmentedCompound.Item = SegmentedItem;
SegmentedCompound.Indicator = SegmentedIndicator;
const SelectContext = createContext(void 0);
const useSelect = () => {
const context = useContext(SelectContext);
if (!context) {
throw new Error("useSelect must be used within a Select component");
}
return context;
};
const Select = React.forwardRef(
({
className,
options,
value,
onChange,
defaultValue,
placeholder = "Select...",
disabled = false,
loading = false,
multiple = false,
clearable = true,
searchable = false,
required = false,
label,
helperText,
errorMessage,
emptyMessage = "No options found",
loadingMessage = "Loading...",
variant = "default",
size = "md",
status = "default",
transition = "scale",
transitionDuration = 200,
renderOption,
renderValue,
renderEmpty,
dropdownIcon,
clearIcon,
loadingIcon,
placement = "bottom",
offset = 4,
maxHeight = 300,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
placeholderColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
dropdownBackgroundColor,
dropdownBorderColor,
dropdownBorderWidth,
dropdownBorderRadius,
dropdownBoxShadow,
dropdownZIndex,
optionPadding,
optionHoverBackgroundColor,
optionSelectedBackgroundColor,
optionSelectedTextColor,
optionDisabledOpacity,
iconColor,
clearIconColor,
dropdownIconColor,
loadingIconColor,
labelFontSize,
labelFontWeight,
labelColor,
labelMarginBottom,
helperTextFontSize,
helperTextColor,
helperTextMarginTop,
requiredColor,
// Event handlers
onFocus,
onBlur,
onOpen,
onClose,
onSearch,
onKeyDown,
// Accessibility
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-invalid": ariaInvalid,
"aria-required": ariaRequired,
children,
...props
}, ref) => {
const [internalValue, setInternalValue] = useState(
defaultValue || (multiple ? [] : null)
);
const [isOpen, setIsOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("");
const [highlightedIndex, setHighlightedIndex] = useState(-1);
const isControlled = value !== void 0;
const currentValue = isControlled ? value : internalValue;
const handleChange = useCallback(
(newValue) => {
if (!isControlled) {
setInternalValue(newValue);
}
onChange == null ? void 0 : onChange(newValue);
},
[isControlled, onChange]
);
const handleOpen = useCallback(() => {
if (!disabled && !loading) {
setIsOpen(true);
onOpen == null ? void 0 : onOpen();
}
}, [disabled, loading, onOpen]);
const handleClose = useCallback(() => {
setIsOpen(false);
setSearchQuery("");
setHighlightedIndex(-1);
onClose == null ? void 0 : onClose();
}, [onClose]);
const handleSearch = useCallback(
(query) => {
setSearchQuery(query);
onSearch == null ? void 0 : onSearch(query);
},
[onSearch]
);
const filteredOptions = useMemo(() => {
if (!searchable || !searchQuery) return options;
return options.filter(
(option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
);
}, [options, searchQuery, searchable]);
const contextValue = {
isOpen,
setIsOpen: (open) => open ? handleOpen() : handleClose(),
value: currentValue,
onChange: handleChange,
searchQuery,
setSearchQuery: handleSearch,
highlightedIndex,
setHighlightedIndex,
options,
filteredOptions,
multiple,
disabled,
loading,
searchable,
clearable,
variant,
size,
status,
transition,
transitionDuration,
placement,
emptyMessage,
loadingMessage,
renderOption,
renderValue,
renderEmpty,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
placeholderColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
dropdownBackgroundColor,
dropdownBorderColor,
dropdownBorderWidth,
dropdownBorderRadius,
dropdownBoxShadow,
dropdownZIndex,
optionPadding,
optionHoverBackgroundColor,
optionSelectedBackgroundColor,
optionSelectedTextColor,
optionDisabledOpacity,
iconColor,
clearIconColor,
dropdownIconColor,
loadingIconColor,
onFocus,
onBlur,
onOpen,
onClose,
onSearch
};
const baseStyles = "relative w-full";
const hasError = status === "error" || Boolean(errorMessage);
const handleKeyDown = useCallback(
(event) => {
if (!isOpen) {
if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp") {
event.preventDefault();
setIsOpen(true);
setHighlightedIndex(0);
}
onKeyDown == null ? void 0 : onKeyDown(event);
return;
}
switch (event.key) {
case "ArrowDown":
event.preventDefault();
setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
break;
case "ArrowUp":
event.preventDefault();
setHighlightedIndex((prev) => prev > 0 ? prev - 1 : prev);
break;
case "Enter":
event.preventDefault();
if (highlightedIndex >= 0 && highlightedIndex < filteredOptions.length) {
const option = filteredOptions[highlightedIndex];
if (!option.disabled) {
if (multiple && Array.isArray(currentValue)) {
const isSelected = currentValue.some((v) => v.value === option.value);
if (isSelected) {
handleChange(currentValue.filter((v) => v.value !== option.value));
} else {
handleChange([...currentValue, option]);
}
} else {
handleChange(option);
setIsOpen(false);
}
}
}
break;
case "Escape":
event.preventDefault();
setIsOpen(false);
break;
case "Home":
event.preventDefault();
setHighlightedIndex(0);
break;
case "End":
event.preventDefault();
setHighlightedIndex(filteredOptions.length - 1);
break;
case "Tab":
setIsOpen(false);
break;
}
onKeyDown == null ? void 0 : onKeyDown(event);
},
[
isOpen,
setIsOpen,
filteredOptions,
highlightedIndex,
setHighlightedIndex,
currentValue,
handleChange,
multiple,
onKeyDown
]
);
return /* @__PURE__ */ jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(baseStyles, className),
onKeyDown: handleKeyDown,
role: "combobox",
"aria-expanded": isOpen,
"aria-haspopup": "listbox",
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-invalid": ariaInvalid || hasError,
"aria-required": ariaRequired || required,
tabIndex: disabled ? -1 : 0,
...props,
children: [
label && /* @__PURE__ */ jsxs(
"label",
{
className: cn(
"block mb-1.5 font-medium leading-tight",
size === "sm" && "text-sm",
size === "md" && "text-base",
size === "lg" && "text-lg",
hasError && "text-red-600",
disabled && "opacity-50"
),
style: {
fontSize: labelFontSize,
fontWeight: labelFontWeight,
color: labelColor,
marginBottom: labelMarginBottom
},
children: [
label,
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", style: { color: requiredColor }, children: "*" })
]
}
),
children || /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
SelectInput,
{
placeholder,
dropdownIcon,
clearIcon,
loadingIcon
}
),
/* @__PURE__ */ jsx(SelectDropdown, { maxHeight, offset })
] }),
(helperText || errorMessage) && /* @__PURE__ */ jsx(
"p",
{
className: cn(
"mt-1.5 leading-tight",
size === "sm" && "text-xs",
size === "md" && "text-sm",
size === "lg" && "text-base",
hasError ? "text-red-600" : "text-gray-500"
),
style: {
fontSize: helperTextFontSize,
color: helperTextColor,
marginTop: helperTextMarginTop
},
children: errorMessage || helperText
}
)
]
}
) });
}
);
Select.displayName = "Select";
const SelectInput = React.forwardRef(
({ className, placeholder, dropdownIcon, clearIcon, loadingIcon, ...props }, ref) => {
const {
isOpen,
setIsOpen,
value,
onChange,
searchQuery,
setSearchQuery,
highlightedIndex,
multiple,
disabled,
loading,
searchable,
clearable,
variant,
size,
status,
renderValue,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
backgroundColor,
textColor,
placeholderColor,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
iconColor,
clearIconColor,
dropdownIconColor,
loadingIconColor,
onFocus,
onBlur
} = useSelect();
const [isFocused, setIsFocused] = useState(false);
const inputRef = useRef(null);
const handleClick = () => {
var _a;
if (!disabled && !loading) {
setIsOpen(!isOpen);
if (searchable) {
(_a = inputRef.current) == null ? void 0 : _a.focus();
}
}
};
const handleClear = (e) => {
e.stopPropagation();
onChange(multiple ? [] : null);
setSearchQuery("");
};
const handleInputChange = (e) => {
setSearchQuery(e.target.value);
if (!isOpen) {
setIsOpen(true);
}
};
const handleFocus = () => {
setIsFocused(true);
onFocus == null ? void 0 : onFocus();
};
const handleBlur = () => {
setIsFocused(false);
onBlur == null ? void 0 : onBlur();
};
const displayValue = useMemo(() => {
if (searchable && searchQuery && isOpen) return searchQuery;
if (!value) return "";
if (renderValue) {
return renderValue(value);
}
if (Array.isArray(value)) {
if (value.length === 0) return "";
if (value.length === 1) return value[0].label;
return `${value.length} selected`;
}
return value.label;
}, [value, searchQuery, searchable, isOpen, renderValue]);
const baseStyles = "w-full pr-10 transition-all focus:outline-none cursor-pointer flex items-center";
const variants = {
default: cn(
"border rounded-md bg-white",
status === "error" ? "border-red-500 focus-within:ring-red-500" : "border-gray-300 focus-within:ring-primary-600",
"focus-within:ring-2 focus-within:ring-offset-2"
),
filled: cn(
"border-0 rounded-md",
status === "error" ? "bg-red-50 focus-within:bg-red-100" : "bg-gray-100 focus-within:bg-gray-200"
),
outlined: cn(
"border-2 rounded-md bg-transparent",
status === "error" ? "border-red-500 focus-within:border-red-600" : "border-gray-300 focus-within:border-primary-600"
),
ghost: cn(
"border-0 bg-transparent",
"focus-within:ring-2 focus-within:ring-offset-2",
status === "error" ? "focus-within:ring-red-500" : "focus-within:ring-primary-600"
),
underlined: cn(
"border-0 border-b-2 rounded-none bg-transparent px-0",
status === "error" ? "border-red-500 focus-within:border-red-600" : "border-gray-300 focus-within:border-primary-600"
)
};
const sizes = {
sm: "h-8 px-3 text-sm leading-8",
md: "h-10 px-4 text-base leading-10",
lg: "h-12 px-5 text-lg leading-12"
};
const customStyles = {};
if (borderWidth) customStyles.borderWidth = borderWidth;
if (borderColor) customStyles.borderColor = borderColor;
if (borderStyle) customStyles.borderStyle = borderStyle;
if (borderRadius) customStyles.borderRadius = borderRadius;
if (fontSize) customStyles.fontSize = fontSize;
if (fontWeight) customStyles.fontWeight = fontWeight;
if (fontFamily) customStyles.fontFamily = fontFamily;
if (textColor) customStyles.color = textColor;
if (backgroundColor) customStyles.backgroundColor = backgroundColor;
if (boxShadow) customStyles.boxShadow = boxShadow;
if (padding) customStyles.padding = padding;
if (paddingX) {
customStyles.paddingLeft = paddingX;
customStyles.paddingRight = paddingX;
}
if (paddingY) {
customStyles.paddingTop = paddingY;
customStyles.paddingBottom = paddingY;
}
const focusStyles = {
...isFocused && focusBorderColor && { borderColor: focusBorderColor },
...isFocused && focusBackgroundColor && { backgroundColor: focusBackgroundColor },
...isFocused && focusBoxShadow && { boxShadow: focusBoxShadow },
...isFocused && focusRingColor && focusRingWidth && {
boxShadow: `0 0 0 ${focusRingWidth} ${focusRingColor}${focusRingOffset ? `, 0 0 0 calc(${focusRingWidth} + ${focusRingOffset}) transparent` : ""}`
}
};
const defaultDropdownIcon = /* @__PURE__ */ jsx(
"svg",
{
className: cn("h-4 w-4 transition-transform", isOpen && "rotate-180"),
fill: "none",
viewBox: "0 0 24 24",
stroke: "currentColor",
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
}
);
const defaultClearIcon = /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}
) });
const defaultLoadingIcon = /* @__PURE__ */ jsxs("svg", { className: "h-4 w-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] });
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
baseStyles,
variants[variant],
sizes[size],
disabled && "cursor-not-allowed opacity-50",
"relative",
className
),
style: {
...customStyles,
...focusStyles,
...placeholderColor && {
"--placeholder-color": placeholderColor
}
},
onClick: handleClick,
...props,
children: [
searchable ? /* @__PURE__ */ jsx(
"input",
{
ref: inputRef,
type: "text",
className: "w-full bg-transparent border-0 outline-none placeholder:text-gray-400 h-full flex items-center",
placeholder: !value ? placeholder : "",
value: searchQuery,
onChange: handleInputChange,
onFocus: handleFocus,
onBlur: handleBlur,
disabled,
readOnly: !isOpen,
"aria-autocomplete": "list",
"aria-activedescendant": highlightedIndex >= 0 ? `select-option-${highlightedIndex}` : void 0,
role: "combobox"
}
) : /* @__PURE__ */ jsx(
"span",
{
className: cn("truncate flex items-center h-full", !value && "text-gray-400"),
role: "combobox",
"aria-readonly": "true",
children: displayValue || placeholder
}
),
/* @__PURE__ */ jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 gap-1.5", children: [
loading && /* @__PURE__ */ jsx("span", { className: "text-gray-400", style: { color: loadingIconColor || iconColor }, children: loadingIcon || defaultLoadingIcon }),
clearable && value && !loading && /* @__PURE__ */ jsx(
"button",
{
type: "button",
className: "text-gray-400 hover:text-gray-600",
style: { color: clearIconColor || iconColor },
onClick: handleClear,
disabled,
children: clearIcon || defaultClearIcon
}
),
/* @__PURE__ */ jsx(
"span",
{
className: "text-gray-400 pointer-events-none",
style: { color: dropdownIconColor || iconColor },
children: dropdownIcon || defaultDropdownIcon
}
)
] })
]
}
);
}
);
SelectInput.displayName = "SelectInput";
const SelectDropdown = React.forwardRef(
({ className, maxHeight = 300, offset = 4, children, ...props }, _ref) => {
const {
isOpen,
filteredOptions,
loading,
transition,
transitionDuration,
placement,
emptyMessage,
loadingMessage,
renderEmpty,
multiple,
// Dropdown style props
dropdownBackgroundColor,
dropdownBorderColor,
dropdownBorderWidth,
dropdownBorderRadius,
dropdownBoxShadow,
dropdownZIndex
} = useSelect();
const listRef = useRef(null);
if (!isOpen) return null;
const baseStyles = cn(
"absolute z-50 w-full mt-1 bg-white rounded-md shadow-lg border border-gray-200 overflow-auto",
placement === "top" && "bottom-full mb-1 mt-0"
);
const transitions = {
none: "",
fade: cn(
"transition-opacity",
`duration-${transitionDuration}`,
isOpen ? "opacity-100" : "opacity-0"
),
slide: cn(
"transition-all",
`duration-${transitionDuration}`,
isOpen ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"
),
scale: cn(
"transition-all origin-top",
`duration-${transitionDuration}`,
isOpen ? "scale-100 opacity-100" : "scale-95 opacity-0"
),
flip: cn(
"transition-all origin-top",
`duration-${transitionDuration}`,
isOpen ? "rotateX-0 opacity-100" : "rotateX-90 opacity-0"
)
};
const customDropdownStyles = {
maxHeight,
marginTop: offset
};
if (dropdownBackgroundColor) customDropdownStyles.backgroundColor = dropdownBackgroundColor;
if (dropdownBorderColor) customDropdownStyles.borderColor = dropdownBorderColor;
if (dropdownBorderWidth) customDropdownStyles.borderWidth = dropdownBorderWidth;
if (dropdownBorderRadius) customDropdownStyles.borderRadius = dropdownBorderRadius;
if (dropdownBoxShadow) customDropdownStyles.boxShadow = dropdownBoxShadow;
if (dropdownZIndex) customDropdownStyles.zIndex = dropdownZIndex;
return /* @__PURE__ */ jsx(
"ul",
{
ref: listRef,
className: cn(baseStyles, transitions[transition], className),
style: customDropdownStyles,
role: "listbox",
"aria-multiselectable": multiple,
...props,
children: loading ? /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-center text-gray-500", children: loadingMessage }) : filteredOptions.length === 0 ? renderEmpty ? renderEmpty() : /* @__PURE__ */ jsx("li", { className: "px-4 py-3 text-center text-gray-500", children: emptyMessage }) : children || filteredOptions.map((option, index) => /* @__PURE__ */ jsx(SelectOptionComponent, { option, index }, option.value))
}
);
}
);
SelectDropdown.displayName = "SelectDropdown";
const SelectOptionComponent = React.forwardRef(
({ className, option, index, ...props }, ref) => {
const {
value,
onChange,
multiple,
highlightedIndex,
setHighlightedIndex,
setIsOpen,
size,
renderOption,
// Option style props
optionPadding,
optionHoverBackgroundColor,
optionSelectedBackgroundColor,
optionSelectedTextColor,
optionDisabledOpacity
} = useSelect();
const isSelected = useMemo(() => {
if (!value) return false;
if (Array.isArray(value)) {
return value.some((v) => v.value === option.value);
}
return value.value === option.value;
}, [value, option]);
const isHighlighted = highlightedIndex === index;
const handleClick = () => {
if (option.disabled) return;
if (multiple && Array.isArray(value)) {
if (isSelected) {
onChange(value.filter((v) => v.value !== option.value));
} else {
onChange([...value, option]);
}
} else {
onChange(option);
setIsOpen(false);
}
};
const handleMouseEnter = () => {
setHighlightedIndex(index);
};
const baseStyles = cn(
"cursor-pointer transition-colors",
option.disabled && "cursor-not-allowed opacity-50"
);
const sizes = {
sm: "px-3 py-2 text-sm",
md: "px-4 py-2.5 text-base",
lg: "px-5 py-3 text-lg"
};
const stateStyles = cn(
isHighlighted && !option.disabled && "bg-gray-100",
isSelected && "bg-primary-50 text-primary-700",
!option.disabled && "hover:bg-gray-100"
);
const customOptionStyles = {};
if (optionPadding) customOptionStyles.padding = optionPadding;
if (option.disabled && optionDisabledOpacity) customOptionStyles.opacity = optionDisabledOpacity;
if (isSelected) {
if (optionSelectedBackgroundColor)
customOptionStyles.backgroundColor = optionSelectedBackgroundColor;
if (optionSelectedTextColor) customOptionStyles.color = optionSelectedTextColor;
} else if (isHighlighted && !option.disabled && optionHoverBackgroundColor) {
customOptionStyles.backgroundColor = optionHoverBackgroundColor;
}
if (renderOption) {
return /* @__PURE__ */ jsx(
"li",
{
ref,
id: `select-option-${index}`,
className: cn(baseStyles, sizes[size], stateStyles, className),
style: customOptionStyles,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
role: "option",
"aria-selected": isSelected,
"aria-disabled": option.disabled,
...props,
children: renderOption(option, isSelected)
}
);
}
return /* @__PURE__ */ jsx(
"li",
{
ref,
id: `select-option-${index}`,
className: cn(baseStyles, sizes[size], stateStyles, className),
style: customOptionStyles,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
role: "option",
"aria-selected": isSelected,
"aria-disabled": option.disabled,
...props,
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between min-h-[1.5rem]", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
option.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 flex items-center", children: option.icon }),
/* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
/* @__PURE__ */ jsx("div", { className: "truncate", children: option.label }),
option.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 mt-0.5 truncate", children: option.description })
] })
] }),
isSelected && /* @__PURE__ */ jsx(
"svg",
{
className: "h-4 w-4 text-primary-600 flex-shrink-0 ml-2",
fill: "currentColor",
viewBox: "0 0 20 20",
children: /* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
clipRule: "evenodd"
}
)
}
)
] })
}
);
}
);
SelectOptionComponent.displayName = "SelectOption";
const SelectEmpty = React.forwardRef(
({ className, children, ...props }, ref) => {
const { size, emptyMessage } = useSelect();
const sizes = {
sm: "px-3 py-6 text-sm",
md: "px-4 py-8 text-base",
lg: "px-5 py-10 text-lg"
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("text-center text-gray-500", sizes[size], className),
...props,
children: children || emptyMessage
}
);
}
);
SelectEmpty.displayName = "SelectEmpty";
const SelectCompound = Select;
SelectCompound.Input = SelectInput;
SelectCompound.Dropdown = SelectDropdown;
SelectCompound.Option = SelectOptionComponent;
SelectCompound.Empty = SelectEmpty;
const Skeleton = memo(
forwardRef(
({
variant = "default",
size = "md",
animation = "pulse",
lines = 1,
width,
height,
radius,
animationDuration = 1e3,
animationDelay = 0,
showContent = false,
contentOpacity = 0.3,
backgroundColor,
foregroundColor,
borderColor,
borderWidth,
borderStyle,
gap,
padding,
margin,
className,
style,
children,
...props
}, ref) => {
const baseStyles = cn(
"relative overflow-hidden",
"bg-gray-50 dark:bg-gray-500",
"animate-pulse"
);
const variantStyles = {
default: "rounded",
rounded: "rounded-lg",
circular: "rounded-full",
text: "rounded h-4",
avatar: "rounded-full",
button: "rounded-md",
card: "rounded-lg border border-gray-50 dark:border-gray-400"
};
const sizeStyles = {
sm: {
default: "h-3 w-16",
rounded: "h-3 w-16",
circular: "h-3 w-16",
text: "h-3",
avatar: "h-8 w-8",
button: "h-8 w-20",
card: "h-20 w-32"
},
md: {
default: "h-4 w-24",
rounded: "h-4 w-24",
circular: "h-4 w-24",
text: "h-4",
avatar: "h-10 w-10",
button: "h-10 w-24",
card: "h-32 w-48"
},
lg: {
default: "h-6 w-32",
rounded: "h-6 w-32",
circular: "h-6 w-32",
text: "h-6",
avatar: "h-12 w-12",
button: "h-12 w-32",
card: "h-40 w-64"
},
xl: {
default: "h-8 w-40",
rounded: "h-8 w-40",
circular: "h-8 w-40",
text: "h-8",
avatar: "h-16 w-16",
button: "h-16 w-40",
card: "h-48 w-80"
}
};
const animationStyles = {
pulse: "animate-pulse",
wave: "animate-pulse",
shimmer: "animate-pulse",
none: ""
};
const customStyles = {
...style,
...width && { width: typeof width === "number" ? `${width}px` : width },
...height && { height: typeof height === "number" ? `${height}px` : height },
...radius && { borderRadius: typeof radius === "number" ? `${radius}px` : radius },
...backgroundColor && { backgroundColor },
...foregroundColor && { color: foregroundColor },
...borderColor && { borderColor },
...borderWidth && { borderWidth },
...borderStyle && { borderStyle },
...gap && { gap: typeof gap === "number" ? `${gap}px` : gap },
...padding && { padding: typeof padding === "number" ? `${padding}px` : padding },
...margin && { margin: typeof margin === "number" ? `${margin}px` : margin },
...animationDuration && { animationDuration: `${animationDuration}ms` },
...animationDelay && { animationDelay: `${animationDelay}ms` }
};
const contentStyles = {
opacity: showContent ? contentOpacity : 0,
pointerEvents: showContent ? "auto" : "none"
};
if (variant === "text" && lines > 1) {
return /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), style: customStyles, ...props, children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx(
"div",
{
className: cn(
baseStyles,
variantStyles[variant],
sizeStyles[size][variant],
animationStyles[animation]
),
style: {
...customStyles,
width: index === lines - 1 ? "60%" : "100%"
}
},
index
)) });
}
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
baseStyles,
variantStyles[variant],
sizeStyles[size][variant],
animationStyles[animation],
className
),
style: customStyles,
...props,
children: [
children && /* @__PURE__ */ jsx("div", { style: contentStyles, className: "relative z-10", children }),
animation === "shimmer" && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent animate-pulse" })
]
}
);
}
)
);
Skeleton.displayName = "Skeleton";
const StepperContext = createContext(null);
const useStepperContext = () => {
const context = useContext(StepperContext);
if (!context) {
throw new Error("Stepper components must be used within a Stepper");
}
return context;
};
const Stepper = forwardRef(
({
steps,
currentStep = 0,
onStepChange,
variant = "horizontal",
size = "md",
status = "default",
showStepNumbers = true,
showStepDescriptions = true,
allowStepClick = true,
loading = false,
loadingMessage = "Loading...",
disabled = false,
required = false,
label,
helperText,
errorMessage,
alternativeLabel = false,
linear = true,
showStepContent = false,
colors,
animationSettings,
children,
onStepClick,
onStepComplete: _onStepComplete,
onStepError: _onStepError,
renderStepIcon,
renderStepContent,
renderStepTitle,
renderStepDescription,
renderStepConnector: _renderStepConnector,
animationDuration = 300,
animationType = "fade",
customStyles,
className,
matchBorderColor = false,
showShadow = true,
showEffects = true,
...props
}, ref) => {
const getStepStatus = useCallback(
(index) => {
if (index < currentStep) return "completed";
if (index === currentStep) return "current";
return "pending";
},
[currentStep]
);
const isStepAccessible = useCallback(
(index) => {
var _a;
if (disabled || loading) return false;
if (!allowStepClick) return false;
if (linear) {
return index <= currentStep || ((_a = steps[index]) == null ? void 0 : _a.disabled) === false;
}
return true;
},
[disabled, loading, allowStepClick, linear, currentStep, steps]
);
const handleStepClick = useCallback(
(step, index) => {
if (!isStepAccessible(index)) return;
onStepClick == null ? void 0 : onStepClick(step, index);
onStepChange == null ? void 0 : onStepChange(index);
},
[isStepAccessible, onStepClick, onStepChange]
);
const contextValue = useMemo(
() => ({
steps,
currentStep,
variant,
size,
status,
showStepNumbers,
showStepDescriptions,
allowStepClick,
loading,
disabled,
alternativeLabel,
linear,
showStepContent,
colors,
animationSettings,
onStepChange: onStepChange || (() => {
}),
onStepClick: handleStepClick,
getStepStatus,
isStepAccessible,
renderStepIcon,
renderStepContent,
renderStepTitle,
renderStepDescription,
renderStepConnector: _renderStepConnector,
animationDuration,
animationType,
matchBorderColor,
showShadow,
showEffects
}),
[
steps,
currentStep,
variant,
size,
status,
showStepNumbers,
showStepDescriptions,
allowStepClick,
loading,
disabled,
alternativeLabel,
linear,
showStepContent,
colors,
animationSettings,
onStepChange,
handleStepClick,
getStepStatus,
isStepAccessible,
renderStepIcon,
renderStepContent,
renderStepTitle,
renderStepDescription,
_renderStepConnector,
animationDuration,
animationType,
matchBorderColor,
showShadow,
showEffects
]
);
const baseStyles = cn(
"flex transition-all duration-200",
{
"flex-row": variant === "horizontal",
"flex-col": variant === "vertical",
"flex-row items-center space-x-2": variant === "compact",
"flex-col space-y-4": variant === "center"
},
className
);
if (loading) {
return /* @__PURE__ */ jsx("div", { ref, className: cn(baseStyles, "items-center justify-center"), ...props, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 p-4 bg-gray-50 rounded-lg", children: [
/* @__PURE__ */ jsx("div", { className: "animate-spin rounded-full h-6 w-6 border-2 border-primary-600 border-t-transparent" }),
/* @__PURE__ */ jsx("span", { className: "text-sm text-gray-600 font-medium", children: loadingMessage })
] }) });
}
return /* @__PURE__ */ jsx(StepperContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
baseStyles,
"focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary-500"
),
style: customStyles,
role: "navigation",
"aria-label": label || "Stepper navigation",
...props,
children: [
label && /* @__PURE__ */ jsxs("label", { className: "block text-sm font-medium text-gray-700 mb-3", children: [
label,
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
/* @__PURE__ */ jsx("div", { className: "flex-1", children }),
helperText && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500 leading-relaxed", children: helperText }),
errorMessage && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-red-600 font-medium", children: errorMessage })
]
}
) });
}
);
Stepper.displayName = "Stepper";
const Step = memo(
forwardRef(
({
step,
index,
renderIcon,
renderContent,
renderTitle,
renderDescription,
renderConnector: _renderConnector,
className,
...props
}, ref) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
const {
variant,
size,
showStepNumbers,
showStepDescriptions,
isStepAccessible,
getStepStatus,
onStepClick,
alternativeLabel,
renderStepIcon,
renderStepContent,
renderStepTitle,
renderStepDescription,
renderStepConnector: _renderStepConnector,
animationDuration,
animationType,
matchBorderColor,
showShadow,
showEffects
} = useStepperContext();
const status = step.status || getStepStatus(index);
const isAccessible = isStepAccessible(index);
const stepSizes = {
sm: "w-8 h-8 text-sm",
md: "w-10 h-10 text-base",
lg: "w-12 h-12 text-lg"
};
const stepVariants = {
horizontal: alternativeLabel ? "flex flex-col items-center space-y-3" : "flex items-center space-x-4",
vertical: "flex flex-col items-start space-y-4",
compact: "flex items-center space-x-3",
center: "flex flex-col items-center space-y-3"
};
const statusColors = {
completed: "bg-primary-600 text-white",
current: "bg-primary-600 text-white",
pending: "bg-gray-100 text-gray-600 border border-gray-300",
error: "bg-red-600 text-white"
};
const getDefaultColors = (status2) => {
switch (status2) {
case "completed":
return {
backgroundColor: "#3b82f6",
textColor: "#ffffff",
titleColor: "#3b82f6",
descriptionColor: "#6b7280"
};
case "current":
return {
backgroundColor: "#3b82f6",
textColor: "#ffffff",
titleColor: "#3b82f6",
descriptionColor: "#6b7280"
};
case "error":
return {
backgroundColor: "#ef4444",
textColor: "#ffffff",
titleColor: "#ef4444",
descriptionColor: "#6b7280"
};
default:
return {
backgroundColor: "#f3f4f6",
textColor: "#6b7280",
titleColor: "#6b7280",
descriptionColor: "#9ca3af"
};
}
};
const animationClasses = {
fade: "animate-fade-in",
slide: "animate-slide-in",
scale: "animate-scale-in",
bounce: "animate-bounce-in",
none: ""
};
const handleClick = useCallback(() => {
if (isAccessible) {
onStepClick(step, index);
}
}, [isAccessible, onStepClick, step, index]);
const handleKeyDown = useCallback(
(event) => {
if (event.key === "Enter" || event.key === " ") {
event.preventDefault();
handleClick();
}
},
[handleClick]
);
const backgroundColor = ((_a = step.colors) == null ? void 0 : _a.backgroundColor) || getDefaultColors(status).backgroundColor;
const borderColor = ((_b = step.colors) == null ? void 0 : _b.borderColor) || (matchBorderColor ? backgroundColor : void 0);
const shadowStyle = showShadow && ((_c = step.colors) == null ? void 0 : _c.shadowColor) ? `0 4px 14px 0 ${step.colors.shadowColor}` : void 0;
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
"flex items-center transition-all duration-200",
stepVariants[variant],
showEffects && animationClasses[animationType],
{
"cursor-pointer hover:opacity-80 hover:scale-105 transform": isAccessible && showEffects,
"cursor-not-allowed opacity-50": !isAccessible
},
className
),
style: {
animationDuration: `${animationDuration}ms`,
...step.customStyles
},
onClick: handleClick,
onKeyDown: handleKeyDown,
role: "button",
tabIndex: isAccessible ? 0 : -1,
"aria-label": `Step ${index + 1}: ${step.title}`,
"aria-current": status === "current" ? "step" : void 0,
...props,
children: [
/* @__PURE__ */ jsx(
"div",
{
className: cn(
"flex items-center justify-center rounded-full border-2 transition-all duration-300",
stepSizes[size],
!step.colors && statusColors[status],
{
"border-gray-300": status === "pending" && !borderColor,
"animate-pulse": status === "current" && showEffects
}
),
style: {
backgroundColor,
color: ((_d = step.colors) == null ? void 0 : _d.textColor) || getDefaultColors(status).textColor,
borderColor,
boxShadow: shadowStyle
},
children: renderIcon ? renderIcon(step, index) : renderStepIcon ? renderStepIcon(step, index) : step.icon ? step.icon : showStepNumbers ? /* @__PURE__ */ jsx("span", { className: "font-medium", children: status === "completed" ? /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
"path",
{
fillRule: "evenodd",
d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
clipRule: "evenodd"
}
) }) : index + 1 }) : null
}
),
/* @__PURE__ */ jsxs("div", { className: cn("flex-1 min-w-0", alternativeLabel && "text-center"), children: [
/* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-2", children: [
renderTitle ? renderTitle(step, index) : renderStepTitle ? renderStepTitle(step, index) : /* @__PURE__ */ jsxs(
"span",
{
className: cn("font-semibold text-base transition-colors duration-200", {
"text-gray-900": status === "current" && !((_e = step.colors) == null ? void 0 : _e.titleColor),
"text-primary-600": status === "completed" && !((_f = step.colors) == null ? void 0 : _f.titleColor),
"text-gray-500": status === "pending" && !((_g = step.colors) == null ? void 0 : _g.titleColor),
"text-red-600": status === "error" && !((_h = step.colors) == null ? void 0 : _h.titleColor)
}),
style: {
color: ((_i = step.colors) == null ? void 0 : _i.titleColor) || getDefaultColors(status).titleColor
},
children: [
step.title,
step.optional && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-400 ml-2", children: "(Optional)" })
]
}
),
showStepDescriptions && step.description && (renderDescription ? renderDescription(step, index) : renderStepDescription ? renderStepDescription(step, index) : /* @__PURE__ */ jsx(
"span",
{
className: "text-sm leading-relaxed",
style: {
color: ((_j = step.colors) == null ? void 0 : _j.descriptionColor) || getDefaultColors(status).descriptionColor
},
children: step.description
}
)),
step.errorMessage && status === "error" && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-600 mt-1", children: step.errorMessage })
] }),
renderContent && renderContent(step, index),
renderStepContent && renderStepContent(step, index),
step.content && step.content
] })
]
}
);
}
)
);
Step.displayName = "Step";
const Connector = memo(
forwardRef(({ index, className, ...props }, ref) => {
var _a, _b;
const { variant, steps, getStepStatus, animationDuration, alternativeLabel } = useStepperContext();
const nextStep = steps[index + 1];
const isLastStep = index === steps.length - 1;
const nextStepStatus = getStepStatus(index + 1);
if (isLastStep) return null;
const connectorVariants = {
horizontal: alternativeLabel ? "flex-1 h-0.5 mx-2 mt-4" : "flex-1 h-0.5 mx-2",
vertical: "w-0.5 h-8 ml-4",
compact: "flex-1 h-0.5 mx-1",
center: "w-0.5 h-4 mx-auto mt-2"
};
const connectorColors = {
completed: "bg-primary-600",
current: "bg-primary-600",
pending: "bg-gray-200",
error: "bg-red-600"
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"transition-all duration-300 ease-in-out",
connectorVariants[variant],
!((_a = nextStep == null ? void 0 : nextStep.colors) == null ? void 0 : _a.connectorColor) && connectorColors[nextStepStatus],
{
"animate-pulse": nextStepStatus === "current"
},
className
),
style: {
animationDuration: `${animationDuration}ms`,
backgroundColor: (_b = nextStep == null ? void 0 : nextStep.colors) == null ? void 0 : _b.connectorColor
},
...props
}
);
})
);
Connector.displayName = "Connector";
const StepList = memo(
forwardRef(
({
renderStepIcon,
renderStepContent,
renderStepTitle,
renderStepDescription,
renderStepConnector,
className,
...props
}, ref) => {
const { steps, variant, alternativeLabel } = useStepperContext();
const listVariants = {
horizontal: alternativeLabel ? "flex items-center justify-center" : "flex items-center",
vertical: "flex flex-col space-y-4",
compact: "flex items-center space-x-2",
center: "flex flex-col space-y-4"
};
return /* @__PURE__ */ jsx("div", { ref, className: cn(listVariants[variant], className), ...props, children: steps.map((step, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
/* @__PURE__ */ jsx(
Step,
{
step,
index,
renderIcon: renderStepIcon,
renderContent: renderStepContent,
renderTitle: renderStepTitle,
renderDescription: renderStepDescription,
renderConnector: renderStepConnector
}
),
/* @__PURE__ */ jsx(Connector, { index })
] }, step.id)) });
}
)
);
StepList.displayName = "StepList";
const Content = memo(
forwardRef(({ renderContent, className, ...props }, ref) => {
const {
steps,
currentStep,
renderStepContent,
animationDuration,
animationType,
showStepContent
} = useStepperContext();
const currentStepData = steps[currentStep];
if (!currentStepData || !showStepContent) return null;
const animationClasses = {
fade: "animate-fade-in",
slide: "animate-slide-in",
scale: "animate-scale-in",
bounce: "animate-bounce-in",
none: ""
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"mt-6 p-6 border border-gray-200 rounded-lg bg-white shadow-sm transition-all duration-300",
animationClasses[animationType],
className
),
style: {
animationDuration: `${animationDuration}ms`
},
...props,
children: renderContent ? renderContent(currentStepData, currentStep) : renderStepContent ? renderStepContent(currentStepData, currentStep) : currentStepData.content ? currentStepData.content : /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900", children: currentStepData.title }),
currentStepData.description && /* @__PURE__ */ jsx("p", { className: "text-gray-600 leading-relaxed", children: currentStepData.description })
] })
}
);
})
);
Content.displayName = "Content";
const Navigation = memo(
forwardRef(
({
showPrevious = true,
showNext = true,
showComplete = true,
previousText = "Previous",
nextText = "Next",
completeText = "Complete",
onPrevious,
onNext,
onComplete,
className,
...props
}, ref) => {
const { steps, currentStep, onStepChange, disabled } = useStepperContext();
const isFirstStep = currentStep === 0;
const isLastStep = currentStep === steps.length - 1;
const canGoNext = currentStep < steps.length - 1;
const handlePrevious = useCallback(() => {
if (!isFirstStep && !disabled) {
onPrevious == null ? void 0 : onPrevious();
onStepChange(currentStep - 1);
}
}, [isFirstStep, disabled, onPrevious, onStepChange, currentStep]);
const handleNext = useCallback(() => {
if (canGoNext && !disabled) {
onNext == null ? void 0 : onNext();
onStepChange(currentStep + 1);
}
}, [canGoNext, disabled, onNext, onStepChange, currentStep]);
const handleComplete = useCallback(() => {
if (isLastStep && !disabled) {
onComplete == null ? void 0 : onComplete();
}
}, [isLastStep, disabled, onComplete]);
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn("flex items-center justify-between mt-6 space-x-4", className),
...props,
children: [
/* @__PURE__ */ jsx("div", { className: "flex space-x-3", children: showPrevious && !isFirstStep && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handlePrevious,
disabled,
className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200",
children: previousText
}
) }),
/* @__PURE__ */ jsxs("div", { className: "flex space-x-3", children: [
showNext && canGoNext && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handleNext,
disabled,
className: "px-4 py-2 text-sm font-medium text-white bg-primary-600 border border-transparent rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200",
children: nextText
}
),
showComplete && isLastStep && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handleComplete,
disabled,
className: "px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200",
children: completeText
}
)
] })
]
}
);
}
)
);
Navigation.displayName = "Navigation";
const StepperRoot = Object.assign(Stepper, {
Step,
StepList,
Content,
Navigation
});
const SwitchContext = createContext(void 0);
const useSwitch = () => {
const context = useContext(SwitchContext);
if (!context) {
throw new Error("useSwitch must be used within a Switch");
}
return context;
};
const Switch = forwardRef(
({
className,
checked: controlledChecked,
defaultChecked = false,
onChange,
disabled = false,
required = false,
name,
value,
variant = "default",
size = "md",
status = "default",
label,
labelPosition = "end",
labelSpacing,
helperText,
errorMessage,
transition = "slide",
transitionDuration = 200,
loading = false,
loadingIcon,
// Container styles
containerClassName,
containerStyle,
backgroundColor,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding,
paddingX,
paddingY,
boxShadow,
// Track styles
trackBackgroundColor,
trackBackgroundColorChecked,
trackBorderWidth,
trackBorderColor,
trackBorderColorChecked,
trackBorderStyle,
trackBorderRadius,
trackWidth,
trackHeight,
trackPadding,
trackBoxShadow,
trackBoxShadowChecked,
// Thumb styles
thumbBackgroundColor,
thumbBackgroundColorChecked,
thumbBorderWidth,
thumbBorderColor,
thumbBorderColorChecked,
thumbBorderStyle,
thumbBorderRadius,
thumbSize,
thumbBoxShadow,
thumbBoxShadowChecked,
thumbIcon,
thumbIconChecked,
thumbIconColor,
thumbIconColorChecked,
// Label styles
labelColor,
labelColorChecked,
labelFontSize,
labelFontWeight,
labelFontFamily,
// Helper text styles
helperTextColor,
helperTextFontSize,
errorMessageColor,
// Focus styles
focusRingColor,
focusRingWidth,
focusRingOffset: _focusRingOffset,
focusRingOffsetColor: _focusRingOffsetColor,
focusBorderColor: _focusBorderColor,
focusBackgroundColor: _focusBackgroundColor,
focusBoxShadow,
// Hover styles
hoverTrackBackgroundColor,
hoverThumbBackgroundColor,
hoverBorderColor,
hoverBoxShadow,
// Active styles
activeTrackBackgroundColor,
activeThumbBackgroundColor,
activeScale,
// Custom render
renderLabel,
renderThumb,
// Status colors
successColor,
warningColor,
errorColor,
children,
style,
...props
}, ref) => {
const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked);
const [isFocused, setIsFocused] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const [isActive, setIsActive] = useState(false);
const isControlled = controlledChecked !== void 0;
const checked = isControlled ? controlledChecked : uncontrolledChecked;
const handleChange = useCallback(
(e) => {
if (disabled || loading) return;
const newChecked = e.target.checked;
if (!isControlled) {
setUncontrolledChecked(newChecked);
}
onChange == null ? void 0 : onChange(newChecked);
},
[disabled, loading, isControlled, onChange]
);
const getStatusColors = () => {
const statusColors2 = {
default: { track: "#e5e7eb", trackChecked: "#3b82f6", thumb: "#ffffff" },
success: { track: "#e5e7eb", trackChecked: successColor || "#10b981", thumb: "#ffffff" },
warning: { track: "#e5e7eb", trackChecked: warningColor || "#f59e0b", thumb: "#ffffff" },
error: { track: "#e5e7eb", trackChecked: errorColor || "#ef4444", thumb: "#ffffff" }
};
return statusColors2[status];
};
const statusColors = getStatusColors();
const getSizeDimensions = () => {
const dimensions2 = {
sm: { track: { width: "36px", height: "20px" }, thumb: "16px", fontSize: "0.875rem" },
md: { track: { width: "44px", height: "24px" }, thumb: "20px", fontSize: "1rem" },
lg: { track: { width: "56px", height: "32px" }, thumb: "28px", fontSize: "1.125rem" }
};
return dimensions2[size];
};
const dimensions = getSizeDimensions();
const getDefaultStyles = () => {
const variantStyles = {
default: {
track: {
backgroundColor: checked ? trackBackgroundColorChecked || statusColors.trackChecked : trackBackgroundColor || statusColors.track,
borderWidth: trackBorderWidth || "0",
boxShadow: trackBoxShadow || "none"
},
thumb: {
backgroundColor: thumbBackgroundColor || statusColors.thumb,
boxShadow: thumbBoxShadow || "0 1px 3px 0 rgba(0, 0, 0, 0.1)"
}
},
filled: {
track: {
backgroundColor: checked ? trackBackgroundColorChecked || statusColors.trackChecked : trackBackgroundColor || "#d1d5db",
borderWidth: trackBorderWidth || "0",
boxShadow: checked ? trackBoxShadowChecked || "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)" : trackBoxShadow || "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
},
thumb: {
backgroundColor: thumbBackgroundColor || "#ffffff",
boxShadow: thumbBoxShadow || "0 2px 4px -1px rgba(0, 0, 0, 0.06)"
}
},
outlined: {
track: {
backgroundColor: checked ? trackBackgroundColorChecked || statusColors.trackChecked : trackBackgroundColor || "transparent",
borderWidth: trackBorderWidth || "2px",
borderColor: checked ? trackBorderColorChecked || statusColors.trackChecked : trackBorderColor || "#d1d5db",
boxShadow: trackBoxShadow || "none"
},
thumb: {
backgroundColor: checked ? thumbBackgroundColorChecked || statusColors.trackChecked : thumbBackgroundColor || "#6b7280",
boxShadow: thumbBoxShadow || "none"
}
},
flat: {
track: {
backgroundColor: checked ? trackBackgroundColorChecked || statusColors.trackChecked : trackBackgroundColor || "#e5e7eb",
borderWidth: trackBorderWidth || "0",
boxShadow: trackBoxShadow || "none"
},
thumb: {
backgroundColor: thumbBackgroundColor || "#ffffff",
boxShadow: thumbBoxShadow || "none"
}
},
elevated: {
track: {
backgroundColor: checked ? trackBackgroundColorChecked || statusColors.trackChecked : trackBackgroundColor || "#e5e7eb",
borderWidth: trackBorderWidth || "0",
boxShadow: checked ? trackBoxShadowChecked || "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" : trackBoxShadow || "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
},
thumb: {
backgroundColor: thumbBackgroundColor || "#ffffff",
boxShadow: thumbBoxShadow || "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
}
}
};
return variantStyles[variant];
};
const defaultStyles = getDefaultStyles();
const trackStyles = {
position: "relative",
display: "inline-flex",
alignItems: "center",
width: trackWidth || dimensions.track.width,
height: trackHeight || dimensions.track.height,
backgroundColor: isHovered && hoverTrackBackgroundColor ? hoverTrackBackgroundColor : isActive && activeTrackBackgroundColor ? activeTrackBackgroundColor : defaultStyles.track.backgroundColor,
borderWidth: defaultStyles.track.borderWidth,
borderColor: isHovered && hoverBorderColor ? hoverBorderColor : defaultStyles.track.borderColor || "transparent",
borderStyle: trackBorderStyle || "solid",
borderRadius: trackBorderRadius || "9999px",
padding: trackPadding || "2px",
boxShadow: isHovered && hoverBoxShadow ? hoverBoxShadow : defaultStyles.track.boxShadow,
transition: `all ${transitionDuration}ms ease-in-out`,
cursor: disabled || loading ? "not-allowed" : "pointer",
opacity: disabled ? 0.5 : 1
};
const thumbTranslateX = checked ? `calc(${trackWidth || dimensions.track.width} - ${thumbSize || dimensions.thumb} - ${trackPadding || "2px"} * 2)` : "0";
const thumbStyles = {
position: "absolute",
display: "flex",
alignItems: "center",
justifyContent: "center",
width: thumbSize || dimensions.thumb,
height: thumbSize || dimensions.thumb,
backgroundColor: isHovered && hoverThumbBackgroundColor ? hoverThumbBackgroundColor : isActive && activeThumbBackgroundColor ? activeThumbBackgroundColor : checked && thumbBackgroundColorChecked ? thumbBackgroundColorChecked : defaultStyles.thumb.backgroundColor,
borderWidth: thumbBorderWidth || "0",
borderColor: checked && thumbBorderColorChecked ? thumbBorderColorChecked : thumbBorderColor || "transparent",
borderStyle: thumbBorderStyle || "solid",
borderRadius: thumbBorderRadius || "50%",
boxShadow: checked && thumbBoxShadowChecked ? thumbBoxShadowChecked : defaultStyles.thumb.boxShadow,
transform: `translateX(${thumbTranslateX}) scale(${isActive && activeScale ? activeScale : "1"})`,
transition: transition === "none" ? "none" : transition === "bounce" ? `all ${transitionDuration}ms cubic-bezier(0.68, -0.55, 0.265, 1.55)` : transition === "smooth" ? `all ${transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)` : `all ${transitionDuration}ms ease-in-out`
};
const labelStyles = {
color: checked && labelColorChecked ? labelColorChecked : labelColor || "#374151",
fontSize: labelFontSize || dimensions.fontSize,
fontWeight: labelFontWeight || "500",
fontFamily: labelFontFamily,
marginLeft: labelPosition === "end" ? labelSpacing || "0.5rem" : void 0,
marginRight: labelPosition === "start" ? labelSpacing || "0.5rem" : void 0,
cursor: disabled || loading ? "not-allowed" : "pointer",
userSelect: "none"
};
const containerStyles = {
backgroundColor,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding: padding || (paddingX || paddingY ? void 0 : "0"),
paddingLeft: paddingX,
paddingRight: paddingX,
paddingTop: paddingY,
paddingBottom: paddingY,
boxShadow,
...containerStyle
};
const focusStyles = isFocused ? {
outline: "none",
boxShadow: focusBoxShadow || `0 0 0 ${focusRingWidth || "2px"} ${focusRingColor || statusColors.trackChecked}`
} : {};
const renderThumbContent = () => {
if (loading && loadingIcon) {
return /* @__PURE__ */ jsx("span", { className: "animate-spin", children: loadingIcon });
}
if (renderThumb) {
return renderThumb(checked, disabled);
}
if (checked && thumbIconChecked) {
return /* @__PURE__ */ jsx("span", { style: { color: thumbIconColorChecked || "currentColor" }, children: thumbIconChecked });
}
if (!checked && thumbIcon) {
return /* @__PURE__ */ jsx("span", { style: { color: thumbIconColor || "currentColor" }, children: thumbIcon });
}
return null;
};
const labelContent = renderLabel ? renderLabel(checked, disabled) : label;
return /* @__PURE__ */ jsx(
SwitchContext.Provider,
{
value: {
checked,
disabled,
loading,
size,
variant,
status,
onChange
},
children: /* @__PURE__ */ jsxs("div", { className: cn("inline-flex flex-col", containerClassName), style: containerStyles, children: [
/* @__PURE__ */ jsxs(
"label",
{
className: cn(
"inline-flex items-center",
disabled && "cursor-not-allowed opacity-50",
className
),
style,
children: [
labelContent && labelPosition === "start" && /* @__PURE__ */ jsx("span", { style: labelStyles, children: labelContent }),
/* @__PURE__ */ jsxs("div", { className: "relative inline-flex", children: [
/* @__PURE__ */ jsx(
"input",
{
ref,
type: "checkbox",
checked,
onChange: handleChange,
disabled: disabled || loading,
required,
name,
value,
className: "sr-only",
onFocus: () => setIsFocused(true),
onBlur: () => setIsFocused(false),
"aria-label": typeof label === "string" ? label : void 0,
"aria-invalid": status === "error" || !!errorMessage,
"aria-describedby": errorMessage ? "switch-error" : helperText ? "switch-helper" : void 0,
...props
}
),
/* @__PURE__ */ jsx(
"div",
{
style: { ...trackStyles, ...focusStyles },
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
onMouseDown: () => setIsActive(true),
onMouseUp: () => setIsActive(false),
children: /* @__PURE__ */ jsx("div", { style: thumbStyles, children: renderThumbContent() })
}
)
] }),
labelContent && labelPosition === "end" && /* @__PURE__ */ jsx("span", { style: labelStyles, children: labelContent })
]
}
),
helperText && !errorMessage && /* @__PURE__ */ jsx(
"span",
{
id: "switch-helper",
className: "mt-1",
style: {
fontSize: helperTextFontSize || "0.875rem",
color: helperTextColor || "#6b7280"
},
children: helperText
}
),
errorMessage && /* @__PURE__ */ jsx(
"span",
{
id: "switch-error",
className: "mt-1",
style: {
fontSize: helperTextFontSize || "0.875rem",
color: errorMessageColor || errorColor || "#ef4444"
},
children: errorMessage
}
),
children
] })
}
);
}
);
Switch.displayName = "Switch";
const SwitchLabel = forwardRef(
({ className, children, ...props }, ref) => {
const { disabled } = useSwitch();
return /* @__PURE__ */ jsx(
"label",
{
ref,
className: cn(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
disabled && "cursor-not-allowed opacity-50",
className
),
...props,
children
}
);
}
);
SwitchLabel.displayName = "SwitchLabel";
const TableContext = createContext(void 0);
const useTable = () => {
const context = useContext(TableContext);
if (!context) {
throw new Error("useTable must be used within a Table component");
}
return context;
};
const useTableData = (data, {
sort,
filters,
globalFilter,
groupBy,
pagination,
paginationMode
}) => {
const filteredData = useMemo(() => {
let result = [...data];
filters.forEach((filter) => {
result = result.filter((row) => {
const value = row[filter.columnId];
const filterValue = filter.value;
if (filterValue === void 0 || filterValue === null || filterValue === "") {
return true;
}
const stringValue = String(value).toLowerCase();
const stringFilterValue = String(filterValue).toLowerCase();
switch (filter.matchMode) {
case "equals":
return stringValue === stringFilterValue;
case "notEquals":
return stringValue !== stringFilterValue;
case "contains":
default:
return stringValue.includes(stringFilterValue);
case "startsWith":
return stringValue.startsWith(stringFilterValue);
case "endsWith":
return stringValue.endsWith(stringFilterValue);
}
});
});
if (globalFilter) {
const searchValue = globalFilter.toLowerCase();
result = result.filter((row) => {
return Object.values(row).some((value) => {
if (value === null || value === void 0) return false;
return String(value).toLowerCase().includes(searchValue);
});
});
}
return result;
}, [data, filters, globalFilter]);
const sortedData = useMemo(() => {
if (!sort.length) return filteredData;
const sorted = [...filteredData];
sorted.sort((a, b) => {
for (const sortDesc of sort) {
const { columnId, direction } = sortDesc;
if (!direction) continue;
const aValue = a[columnId];
const bValue = b[columnId];
let comparison = 0;
if (aValue == null) comparison = 1;
else if (bValue == null) comparison = -1;
else if (aValue < bValue) comparison = -1;
else if (aValue > bValue) comparison = 1;
if (comparison !== 0) {
return direction === "asc" ? comparison : -comparison;
}
}
return 0;
});
return sorted;
}, [filteredData, sort]);
const groupedData = useMemo(() => {
if (!groupBy.length) return sortedData;
return sortedData;
}, [sortedData, groupBy]);
const paginatedData = useMemo(() => {
if (paginationMode === "server") return groupedData;
const start = pagination.pageIndex * pagination.pageSize;
const end = start + pagination.pageSize;
return groupedData.slice(start, end);
}, [groupedData, pagination, paginationMode]);
return {
processedData: groupedData,
paginatedData,
totalCount: filteredData.length
};
};
const useTableSelection = (data, getRowId, isRowSelectable) => {
const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
const toggleRowSelection = useCallback((rowId) => {
setSelectedRows((prev) => {
const next = new Set(prev);
if (next.has(rowId)) {
next.delete(rowId);
} else {
next.add(rowId);
}
return next;
});
}, []);
const toggleAllRowsSelection = useCallback(() => {
setSelectedRows((prev) => {
const selectableRows = data.filter((row) => {
if (isRowSelectable && !isRowSelectable(row)) return false;
return true;
});
const allRowIds = selectableRows.map((row, index) => getRowId(row, index));
const allSelected = allRowIds.every((id) => prev.has(id));
if (allSelected) {
return /* @__PURE__ */ new Set();
} else {
return new Set(allRowIds);
}
});
}, [data, getRowId, isRowSelectable]);
return {
selectedRows,
setSelectedRows,
toggleRowSelection,
toggleAllRowsSelection
};
};
const useTableSort = (enableMultiSort = false, maxMultiSortColCount = Infinity) => {
const [sort, setSort] = useState([]);
const toggleSort = useCallback(
(columnId, multiSort = false) => {
setSort((prev) => {
const existingIndex = prev.findIndex((s) => s.columnId === columnId);
if (!enableMultiSort || !multiSort) {
if (existingIndex !== -1) {
const existing = prev[existingIndex];
if (existing.direction === "asc") {
return [{ columnId, direction: "desc" }];
} else if (existing.direction === "desc") {
return [];
}
}
return [{ columnId, direction: "asc" }];
} else {
const newSort = [...prev];
if (existingIndex !== -1) {
const existing = newSort[existingIndex];
if (existing.direction === "asc") {
newSort[existingIndex] = { columnId, direction: "desc" };
} else if (existing.direction === "desc") {
newSort.splice(existingIndex, 1);
}
} else if (newSort.length < maxMultiSortColCount) {
newSort.push({ columnId, direction: "asc" });
}
return newSort;
}
});
},
[enableMultiSort, maxMultiSortColCount]
);
return {
sort,
setSort,
toggleSort
};
};
const useTableFilter = () => {
const [filters, setFilters] = useState([]);
const [globalFilter, setGlobalFilter] = useState("");
const setColumnFilter = useCallback(
(columnId, value, matchMode) => {
setFilters((prev) => {
const newFilters = prev.filter((f) => f.columnId !== columnId);
if (value !== void 0 && value !== null && value !== "") {
newFilters.push({ columnId, value, matchMode });
}
return newFilters;
});
},
[]
);
const clearFilters = useCallback(() => {
setFilters([]);
setGlobalFilter("");
}, []);
return {
filters,
setFilters,
globalFilter,
setGlobalFilter,
setColumnFilter,
clearFilters
};
};
const useTablePagination = (totalCount, defaultPageSize = 10) => {
const [pagination, setPagination] = useState({
pageIndex: 0,
pageSize: defaultPageSize
});
const pageCount = Math.ceil(totalCount / pagination.pageSize);
const canPreviousPage = pagination.pageIndex > 0;
const canNextPage = pagination.pageIndex < pageCount - 1;
const previousPage = useCallback(() => {
setPagination((prev) => ({
...prev,
pageIndex: Math.max(0, prev.pageIndex - 1)
}));
}, []);
const nextPage = useCallback(() => {
setPagination((prev) => ({
...prev,
pageIndex: Math.min(pageCount - 1, prev.pageIndex + 1)
}));
}, [pageCount]);
const gotoPage = useCallback(
(pageIndex) => {
setPagination((prev) => ({
...prev,
pageIndex: Math.max(0, Math.min(pageCount - 1, pageIndex))
}));
},
[pageCount]
);
const setPageSize = useCallback((pageSize) => {
setPagination((prev) => {
const topRowIndex = prev.pageIndex * prev.pageSize;
const pageIndex = Math.floor(topRowIndex / pageSize);
return {
pageSize,
pageIndex
};
});
}, []);
return {
pagination,
setPagination,
pageCount,
canPreviousPage,
canNextPage,
previousPage,
nextPage,
gotoPage,
setPageSize
};
};
const useTableExpansion = () => {
const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
const toggleRowExpansion = useCallback((rowId) => {
setExpandedRows((prev) => {
const next = new Set(prev);
if (next.has(rowId)) {
next.delete(rowId);
} else {
next.add(rowId);
}
return next;
});
}, []);
const expandAllRows = useCallback((rowIds) => {
setExpandedRows(new Set(rowIds));
}, []);
const collapseAllRows = useCallback(() => {
setExpandedRows(/* @__PURE__ */ new Set());
}, []);
return {
expandedRows,
setExpandedRows,
toggleRowExpansion,
expandAllRows,
collapseAllRows
};
};
const useTableEditing = (onEditCommit, onEditCancel) => {
const [editingCell, setEditingCell] = useState(null);
const editValueRef = useRef(null);
const startEditing = useCallback(
(rowId, columnId, initialValue) => {
setEditingCell({ rowId, columnId, value: initialValue });
editValueRef.current = initialValue;
},
[]
);
const commitEdit = useCallback(
async (value, row) => {
if (!editingCell) return;
try {
if (onEditCommit) {
await onEditCommit(editingCell.rowId, editingCell.columnId, value, row);
}
setEditingCell(null);
editValueRef.current = null;
} catch (error) {
console.error("Failed to commit edit:", error);
}
},
[editingCell, onEditCommit]
);
const cancelEdit = useCallback(() => {
if (editingCell && onEditCancel) {
onEditCancel(editingCell.rowId, editingCell.columnId);
}
setEditingCell(null);
editValueRef.current = null;
}, [editingCell, onEditCancel]);
return {
editingCell,
setEditingCell,
startEditing,
commitEdit,
cancelEdit
};
};
const useTableKeyboardNavigation = (tableRef, {
data,
columns,
getRowId,
selectionMode,
toggleRowSelection,
expandedRows,
toggleRowExpansion,
editMode,
startEditing
}) => {
const [focusedCell, setFocusedCell] = useState(
null
);
useEffect(() => {
const table = tableRef.current;
if (!table) return;
const handleKeyDown = (e) => {
if (!focusedCell) return;
const { rowIndex, columnIndex } = focusedCell;
let newRowIndex = rowIndex;
let newColumnIndex = columnIndex;
switch (e.key) {
case "ArrowUp":
e.preventDefault();
newRowIndex = Math.max(0, rowIndex - 1);
break;
case "ArrowDown":
e.preventDefault();
newRowIndex = Math.min(data.length - 1, rowIndex + 1);
break;
case "ArrowLeft":
e.preventDefault();
newColumnIndex = Math.max(0, columnIndex - 1);
break;
case "ArrowRight":
e.preventDefault();
newColumnIndex = Math.min(columns.length - 1, columnIndex + 1);
break;
case "Home":
e.preventDefault();
if (e.ctrlKey) {
newRowIndex = 0;
newColumnIndex = 0;
} else {
newColumnIndex = 0;
}
break;
case "End":
e.preventDefault();
if (e.ctrlKey) {
newRowIndex = data.length - 1;
newColumnIndex = columns.length - 1;
} else {
newColumnIndex = columns.length - 1;
}
break;
case "PageUp":
e.preventDefault();
newRowIndex = Math.max(0, rowIndex - 10);
break;
case "PageDown":
e.preventDefault();
newRowIndex = Math.min(data.length - 1, rowIndex + 10);
break;
case " ":
if (selectionMode !== "none" && rowIndex < data.length) {
e.preventDefault();
const rowId = getRowId(data[rowIndex], rowIndex);
toggleRowSelection(rowId);
}
break;
case "Enter":
if (editMode !== "none" && rowIndex < data.length && columnIndex < columns.length) {
e.preventDefault();
const rowId = getRowId(data[rowIndex], rowIndex);
const column = columns[columnIndex];
if (column.editable) {
startEditing(rowId, column.id);
}
} else if (expandedRows && rowIndex < data.length) {
e.preventDefault();
const rowId = getRowId(data[rowIndex], rowIndex);
toggleRowExpansion(rowId);
}
break;
default:
return;
}
if (newRowIndex !== rowIndex || newColumnIndex !== columnIndex) {
setFocusedCell({ rowIndex: newRowIndex, columnIndex: newColumnIndex });
const newCell = table.querySelector(
`[data-row-index="${newRowIndex}"][data-column-index="${newColumnIndex}"]`
);
newCell == null ? void 0 : newCell.focus();
}
};
table.addEventListener("keydown", handleKeyDown);
return () => {
table.removeEventListener("keydown", handleKeyDown);
};
}, [
tableRef,
focusedCell,
data,
columns,
getRowId,
selectionMode,
toggleRowSelection,
expandedRows,
toggleRowExpansion,
editMode,
startEditing
]);
return {
focusedCell,
setFocusedCell
};
};
const Table = forwardRef(
({
// Data
data = [],
columns = [],
getRowId = (row, index) => row.id ?? index,
// Variants & Styling
variant = "default",
size = "md",
className,
style,
// States
loading = false,
loadingComponent,
empty = data.length === 0,
emptyComponent,
disabled = false,
// Selection
selectionMode = "none",
selectedRows: controlledSelectedRows,
defaultSelectedRows,
onSelectionChange,
isRowSelectable,
// Sorting
enableSorting = true,
sort: controlledSort,
defaultSort = [],
onSortChange,
enableMultiSort = false,
maxMultiSortColCount = Infinity,
// Filtering
enableFiltering = false,
filters: controlledFilters,
defaultFilters = [],
onFiltersChange,
globalFilter: controlledGlobalFilter,
onGlobalFilterChange,
// Pagination
enablePagination = false,
paginationMode = "client",
pagination: controlledPagination,
defaultPagination = { pageIndex: 0, pageSize: 10 },
onPaginationChange,
totalCount: controlledTotalCount,
pageSizeOptions = [10, 20, 30, 40, 50],
// Expansion
enableExpanding = false,
expandedRows: controlledExpandedRows,
defaultExpandedRows,
onExpandedChange,
expandedContent,
// Editing
editMode = "none",
editingCell: controlledEditingCell,
onEditingCellChange,
onEditCommit,
onEditCancel,
// Grouping
enableGrouping = false,
groupBy = [],
groups = [],
// Virtualization
enableVirtualization: _enableVirtualization = false,
virtualizer: _virtualizer,
// Features
enableColumnResizing: _enableColumnResizing = false,
enableColumnReordering: _enableColumnReordering = false,
enableRowReordering: _enableRowReordering = false,
stickyHeader = false,
stickyColumns: _stickyColumns = false,
// Handlers
onRowClick,
onRowDoubleClick,
onCellClick,
onCellDoubleClick,
// Custom renderers
rowRenderer,
noDataRenderer: _noDataRenderer,
loadingRenderer: _loadingRenderer,
// Animation
animationType = "fade",
animationDuration = 200,
// Style customization props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
headerTextColor,
backgroundColor,
headerBackgroundColor,
footerBackgroundColor,
rowHoverBackground,
rowSelectedBackground,
alternateRowBackground,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
headerPadding,
cellPadding,
footerPadding,
// Sub-component style overrides
headerStyle,
headerClassName: _headerClassName,
bodyStyle,
bodyClassName: _bodyClassName,
footerStyle,
footerClassName: _footerClassName,
rowStyle,
rowClassName,
cellStyle,
cellClassName,
// Icon customization
sortAscIcon,
sortDescIcon,
sortNeutralIcon,
expandIcon,
collapseIcon,
selectIcon,
selectAllIcon,
filterIcon,
clearFilterIcon,
// Accessibility
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
captionComponent,
children,
...props
}, ref) => {
const tableRef = useRef(null);
const mergedRef = ref || tableRef;
const isSelectionControlled = controlledSelectedRows !== void 0;
const {
selectedRows: internalSelectedRows,
setSelectedRows: setInternalSelectedRows,
toggleRowSelection: internalToggleRowSelection,
toggleAllRowsSelection: internalToggleAllRowsSelection
} = useTableSelection(data, getRowId, isRowSelectable);
const selectedRows = isSelectionControlled ? controlledSelectedRows : defaultSelectedRows ?? internalSelectedRows;
const setSelectedRows = useCallback(
(value) => {
if (isSelectionControlled && onSelectionChange) {
onSelectionChange(typeof value === "function" ? value(selectedRows) : value);
} else {
setInternalSelectedRows(value);
}
},
[isSelectionControlled, onSelectionChange, selectedRows, setInternalSelectedRows]
);
const toggleRowSelection = useCallback(
(rowId) => {
if (isSelectionControlled) {
const next = new Set(selectedRows);
if (next.has(rowId)) {
next.delete(rowId);
} else {
next.add(rowId);
}
onSelectionChange == null ? void 0 : onSelectionChange(next);
} else {
internalToggleRowSelection(rowId);
}
},
[isSelectionControlled, selectedRows, onSelectionChange, internalToggleRowSelection]
);
const toggleAllRowsSelection = useCallback(() => {
if (isSelectionControlled) {
const selectableRows = data.filter((row) => {
if (isRowSelectable && !isRowSelectable(row)) return false;
return true;
});
const allRowIds = selectableRows.map((row, index) => getRowId(row, index));
const allSelected = allRowIds.every((id) => selectedRows.has(id));
onSelectionChange == null ? void 0 : onSelectionChange(allSelected ? /* @__PURE__ */ new Set() : new Set(allRowIds));
} else {
internalToggleAllRowsSelection();
}
}, [
isSelectionControlled,
data,
getRowId,
isRowSelectable,
selectedRows,
onSelectionChange,
internalToggleAllRowsSelection
]);
const isSortControlled = controlledSort !== void 0;
const {
sort: internalSort,
setSort: setInternalSort,
toggleSort: internalToggleSort
} = useTableSort(enableMultiSort, maxMultiSortColCount);
const sort = isSortControlled ? controlledSort : defaultSort.length ? defaultSort : internalSort;
const setSort = useCallback(
(value) => {
if (isSortControlled && onSortChange) {
onSortChange(typeof value === "function" ? value(sort) : value);
} else {
setInternalSort(value);
}
},
[isSortControlled, onSortChange, sort, setInternalSort]
);
const toggleSort = useCallback(
(columnId, multiSort = false) => {
if (isSortControlled) {
const existingIndex = sort.findIndex((s) => s.columnId === columnId);
let newSort = [...sort];
if (!enableMultiSort || !multiSort) {
if (existingIndex !== -1) {
const existing = sort[existingIndex];
if (existing.direction === "asc") {
newSort = [{ columnId, direction: "desc" }];
} else if (existing.direction === "desc") {
newSort = [];
}
} else {
newSort = [{ columnId, direction: "asc" }];
}
} else {
if (existingIndex !== -1) {
const existing = newSort[existingIndex];
if (existing.direction === "asc") {
newSort[existingIndex] = { columnId, direction: "desc" };
} else if (existing.direction === "desc") {
newSort.splice(existingIndex, 1);
}
} else if (newSort.length < maxMultiSortColCount) {
newSort.push({ columnId, direction: "asc" });
}
}
onSortChange == null ? void 0 : onSortChange(newSort);
} else {
internalToggleSort(columnId, multiSort);
}
},
[
isSortControlled,
sort,
enableMultiSort,
maxMultiSortColCount,
onSortChange,
internalToggleSort
]
);
const isFiltersControlled = controlledFilters !== void 0;
const isGlobalFilterControlled = controlledGlobalFilter !== void 0;
const {
filters: internalFilters,
setFilters: setInternalFilters,
globalFilter: internalGlobalFilter,
setGlobalFilter: setInternalGlobalFilter
} = useTableFilter();
const filters = isFiltersControlled ? controlledFilters : defaultFilters.length ? defaultFilters : internalFilters;
const globalFilter = isGlobalFilterControlled ? controlledGlobalFilter : internalGlobalFilter;
const setFilters = useCallback(
(value) => {
if (isFiltersControlled && onFiltersChange) {
onFiltersChange(typeof value === "function" ? value(filters) : value);
} else {
setInternalFilters(value);
}
},
[isFiltersControlled, onFiltersChange, filters, setInternalFilters]
);
const setGlobalFilter = useCallback(
(value) => {
if (isGlobalFilterControlled && onGlobalFilterChange) {
onGlobalFilterChange(value);
} else {
setInternalGlobalFilter(value);
}
},
[isGlobalFilterControlled, onGlobalFilterChange, setInternalGlobalFilter]
);
const isPaginationControlled = controlledPagination !== void 0;
const { pagination: internalPagination, setPagination: setInternalPagination } = useTablePagination(controlledTotalCount ?? data.length, defaultPagination.pageSize);
const pagination = isPaginationControlled ? controlledPagination : internalPagination;
const setPagination = useCallback(
(value) => {
if (isPaginationControlled && onPaginationChange) {
onPaginationChange(typeof value === "function" ? value(pagination) : value);
} else {
setInternalPagination(value);
}
},
[isPaginationControlled, onPaginationChange, pagination, setInternalPagination]
);
const isExpansionControlled = controlledExpandedRows !== void 0;
const {
expandedRows: internalExpandedRows,
setExpandedRows: setInternalExpandedRows,
toggleRowExpansion: internalToggleRowExpansion
} = useTableExpansion();
const expandedRows = isExpansionControlled ? controlledExpandedRows : defaultExpandedRows ?? internalExpandedRows;
const setExpandedRows = useCallback(
(value) => {
if (isExpansionControlled && onExpandedChange) {
onExpandedChange(typeof value === "function" ? value(expandedRows) : value);
} else {
setInternalExpandedRows(value);
}
},
[isExpansionControlled, onExpandedChange, expandedRows, setInternalExpandedRows]
);
const toggleRowExpansion = useCallback(
(rowId) => {
if (isExpansionControlled) {
const next = new Set(expandedRows);
if (next.has(rowId)) {
next.delete(rowId);
} else {
next.add(rowId);
}
onExpandedChange == null ? void 0 : onExpandedChange(next);
} else {
internalToggleRowExpansion(rowId);
}
},
[isExpansionControlled, expandedRows, onExpandedChange, internalToggleRowExpansion]
);
const isEditingControlled = controlledEditingCell !== void 0;
const {
editingCell: internalEditingCell,
setEditingCell: setInternalEditingCell,
startEditing: internalStartEditing,
commitEdit: internalCommitEdit,
cancelEdit: internalCancelEdit
} = useTableEditing(onEditCommit, onEditCancel);
const editingCell = isEditingControlled ? controlledEditingCell : internalEditingCell;
const setEditingCell = useCallback(
(value) => {
if (isEditingControlled && onEditingCellChange) {
onEditingCellChange(value);
} else {
setInternalEditingCell(value);
}
},
[isEditingControlled, onEditingCellChange, setInternalEditingCell]
);
const startEditing = useCallback(
(rowId, columnId) => {
const rowIndex = data.findIndex((row2, index) => getRowId(row2, index) === rowId);
if (rowIndex === -1) return;
const column = columns.find((col) => col.id === columnId);
if (!column || !column.editable) return;
const row = data[rowIndex];
const value = column.accessorFn ? column.accessorFn(row) : row[column.accessorKey];
if (isEditingControlled) {
onEditingCellChange == null ? void 0 : onEditingCellChange({ rowId, columnId, value });
} else {
internalStartEditing(rowId, columnId, value);
}
},
[data, columns, getRowId, isEditingControlled, onEditingCellChange, internalStartEditing]
);
const commitEdit = useCallback(
async (value) => {
if (!editingCell) return;
const rowIndex = data.findIndex((row2, index) => getRowId(row2, index) === editingCell.rowId);
if (rowIndex === -1) return;
const row = data[rowIndex];
await internalCommitEdit(value, row);
if (isEditingControlled) {
onEditingCellChange == null ? void 0 : onEditingCellChange(null);
}
},
[editingCell, data, getRowId, internalCommitEdit, isEditingControlled, onEditingCellChange]
);
const cancelEdit = useCallback(() => {
internalCancelEdit();
if (isEditingControlled) {
onEditingCellChange == null ? void 0 : onEditingCellChange(null);
}
}, [internalCancelEdit, isEditingControlled, onEditingCellChange]);
const { processedData, paginatedData, totalCount } = useTableData(data, {
sort,
filters,
globalFilter,
groupBy,
pagination,
paginationMode
});
const finalTotalCount = controlledTotalCount ?? totalCount;
const pageCount = Math.ceil(finalTotalCount / pagination.pageSize);
const canPreviousPage = pagination.pageIndex > 0;
const canNextPage = pagination.pageIndex < pageCount - 1;
const { focusedCell } = useTableKeyboardNavigation(
mergedRef,
{
data: paginatedData,
columns,
getRowId,
selectionMode,
toggleRowSelection,
expandedRows,
toggleRowExpansion,
editMode,
startEditing
}
);
const styles = useMemo(
() => ({
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
headerTextColor,
backgroundColor,
headerBackgroundColor,
footerBackgroundColor,
rowHoverBackground,
rowSelectedBackground,
alternateRowBackground,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
headerPadding,
cellPadding,
footerPadding
}),
[
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
headerTextColor,
backgroundColor,
headerBackgroundColor,
footerBackgroundColor,
rowHoverBackground,
rowSelectedBackground,
alternateRowBackground,
focusRingColor,
focusRingWidth,
focusRingOffset,
focusBorderColor,
focusBackgroundColor,
boxShadow,
focusBoxShadow,
padding,
paddingX,
paddingY,
headerPadding,
cellPadding,
footerPadding
]
);
const icons = useMemo(
() => ({
sortAsc: sortAscIcon,
sortDesc: sortDescIcon,
sortNeutral: sortNeutralIcon,
expand: expandIcon,
collapse: collapseIcon,
select: selectIcon,
selectAll: selectAllIcon,
filter: filterIcon,
clearFilter: clearFilterIcon
}),
[
sortAscIcon,
sortDescIcon,
sortNeutralIcon,
expandIcon,
collapseIcon,
selectIcon,
selectAllIcon,
filterIcon,
clearFilterIcon
]
);
const contextValue = {
// Data & columns
data,
columns,
getRowId,
// Variants & styling
variant,
size,
// States
loading,
empty,
disabled,
// Selection
selectionMode,
selectedRows,
setSelectedRows,
isRowSelectable,
toggleRowSelection,
toggleAllRowsSelection,
// Sorting
enableSorting,
sort,
setSort,
toggleSort,
// Filtering
enableFiltering,
filters,
setFilters,
globalFilter,
setGlobalFilter,
// Pagination
enablePagination,
paginationMode,
pagination,
setPagination,
totalCount: finalTotalCount,
pageSizeOptions,
pageCount,
canPreviousPage,
canNextPage,
// Expansion
enableExpanding,
expandedRows,
setExpandedRows,
toggleRowExpansion,
expandedContent,
// Editing
editMode,
editingCell,
setEditingCell,
startEditing,
commitEdit,
cancelEdit,
// Grouping
enableGrouping,
groupBy,
groups,
// Processed data
processedData,
paginatedData,
// Animation
animationType,
animationDuration,
// Styles
styles,
// Icons
icons,
// Additional props
headerStyle,
bodyStyle,
footerStyle,
rowStyle,
rowClassName,
cellStyle,
cellClassName,
stickyHeader,
rowRenderer,
onRowClick,
onRowDoubleClick,
onCellClick,
onCellDoubleClick
};
const tableStyles = {
...style
};
if (borderWidth) tableStyles.borderWidth = borderWidth;
if (borderColor) tableStyles.borderColor = borderColor;
if (borderStyle) tableStyles.borderStyle = borderStyle;
if (borderRadius) tableStyles.borderRadius = borderRadius;
if (fontSize) tableStyles.fontSize = fontSize;
if (fontWeight) tableStyles.fontWeight = fontWeight;
if (fontFamily) tableStyles.fontFamily = fontFamily;
if (textColor) tableStyles.color = textColor;
if (backgroundColor) tableStyles.backgroundColor = backgroundColor;
if (boxShadow) tableStyles.boxShadow = boxShadow;
if (focusBoxShadow && focusedCell) tableStyles.boxShadow = focusBoxShadow;
const sizeClasses = {
sm: "text-xs",
md: "text-sm",
lg: "text-base"
};
const variantClasses = {
default: "border-collapse",
striped: "border-collapse",
bordered: "border",
minimal: "border-collapse",
"card-style": "border rounded-lg shadow-sm",
compact: "border-collapse"
};
const wrapperClasses = cn(
"relative w-full overflow-auto",
stickyHeader && "max-h-[600px]",
disabled && "opacity-50 pointer-events-none"
);
const tableClasses = cn(
"w-full caption-bottom",
sizeClasses[size],
variantClasses[variant],
className
);
return /* @__PURE__ */ jsx(TableContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: wrapperClasses, children: [
captionComponent && /* @__PURE__ */ jsx("div", { className: "sr-only", id: ariaLabelledBy, children: captionComponent }),
/* @__PURE__ */ jsx(
"table",
{
ref: mergedRef,
className: tableClasses,
style: tableStyles,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledBy,
"aria-describedby": ariaDescribedBy,
role: "table",
...props,
children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
loading && loadingComponent,
!loading && empty && emptyComponent,
!loading && !empty && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(TableHeader, {}),
/* @__PURE__ */ jsx(TableBody, {}),
columns.some((col) => col.footer) && /* @__PURE__ */ jsx(TableFooter, {})
] })
] })
}
)
] }) });
}
);
Table.displayName = "Table";
const TableHeader = forwardRef(
({ className, style, ...props }, ref) => {
const { columns, styles, headerStyle, stickyHeader, variant, selectionMode, enableExpanding } = useTable();
const headerStyles = {
...headerStyle,
...style
};
if (styles.headerBackgroundColor)
headerStyles.backgroundColor = styles.headerBackgroundColor;
if (styles.headerTextColor) headerStyles.color = styles.headerTextColor;
if (styles.headerPadding) headerStyles.padding = styles.headerPadding;
const headerClasses = cn(
variant === "bordered" && "border-b",
stickyHeader && "sticky top-0 z-10 bg-background",
className
);
return /* @__PURE__ */ jsx("thead", { ref, className: headerClasses, style: headerStyles, ...props, children: /* @__PURE__ */ jsxs("tr", { children: [
enableExpanding && /* @__PURE__ */ jsx(TableHeaderCell, { className: "w-8" }),
selectionMode !== "none" && /* @__PURE__ */ jsx(TableSelectAllHeaderCell, {}),
columns.map((column) => /* @__PURE__ */ jsx(TableHeaderCell, { column }, column.id))
] }) });
}
);
TableHeader.displayName = "TableHeader";
const TableBody = forwardRef(
({ className, style, ...props }, ref) => {
const {
paginatedData,
columns,
getRowId,
variant,
bodyStyle,
rowRenderer,
onRowClick,
onRowDoubleClick,
selectionMode,
enableExpanding
} = useTable();
const bodyStyles = {
...bodyStyle,
...style
};
const bodyClasses = cn(
"[&_tr:last-child]:border-0",
variant === "striped" && "[&_tr:nth-child(even)]:bg-muted/50",
className
);
return /* @__PURE__ */ jsx("tbody", { ref, className: bodyClasses, style: bodyStyles, ...props, children: paginatedData.map((row, rowIndex) => {
const rowId = getRowId(row, rowIndex);
const rowContent = /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
TableRow,
{
row,
rowIndex,
onClick: onRowClick ? (e) => onRowClick(row, rowIndex, e) : void 0,
onDoubleClick: onRowDoubleClick ? (e) => onRowDoubleClick(row, rowIndex, e) : void 0,
children: [
enableExpanding && /* @__PURE__ */ jsx(TableExpandCell, { rowId }),
selectionMode !== "none" && /* @__PURE__ */ jsx(TableSelectCell, { rowId, row }),
columns.map((column, colIndex) => /* @__PURE__ */ jsx(
TableCell,
{
row,
column,
rowIndex,
columnIndex: colIndex
},
column.id
))
]
},
rowId
),
enableExpanding && /* @__PURE__ */ jsx(TableExpandedRow, { rowId, row, rowIndex })
] });
return rowRenderer ? /* @__PURE__ */ jsx(React.Fragment, { children: rowRenderer({ row, rowIndex, children: rowContent }) }, rowId) : rowContent;
}) });
}
);
TableBody.displayName = "TableBody";
const TableFooter = forwardRef(
({ className, style, ...props }, ref) => {
const { columns, styles, footerStyle, variant, selectionMode, enableExpanding } = useTable();
const footerStyles = {
...footerStyle,
...style
};
if (styles.footerBackgroundColor)
footerStyles.backgroundColor = styles.footerBackgroundColor;
if (styles.footerPadding) footerStyles.padding = styles.footerPadding;
const footerClasses = cn("font-medium", variant === "bordered" && "border-t", className);
return /* @__PURE__ */ jsx("tfoot", { ref, className: footerClasses, style: footerStyles, ...props, children: /* @__PURE__ */ jsxs("tr", { children: [
enableExpanding && /* @__PURE__ */ jsx("td", {}),
selectionMode !== "none" && /* @__PURE__ */ jsx("td", {}),
columns.map((column) => /* @__PURE__ */ jsx("td", { className: cn("px-4 py-2", column.footerClassName), children: typeof column.footer === "function" ? column.footer({ column }) : column.footer }, column.id))
] }) });
}
);
TableFooter.displayName = "TableFooter";
const TableRow = forwardRef(({ className, style, row, rowIndex, status, selected, expanded, disabled, ...props }, ref) => {
const {
getRowId,
selectedRows,
styles,
rowStyle,
rowClassName,
variant,
animationType,
animationDuration
} = useTable();
const rowId = getRowId(row, rowIndex);
const isSelected = selected ?? selectedRows.has(rowId);
const rowStyles = {
...typeof rowStyle === "function" ? rowStyle(row, rowIndex) : rowStyle,
...style
};
if (isSelected && styles.rowSelectedBackground) {
rowStyles.backgroundColor = styles.rowSelectedBackground;
} else if (rowIndex % 2 === 1 && styles.alternateRowBackground && variant !== "striped") {
rowStyles.backgroundColor = styles.alternateRowBackground;
}
if (animationType !== "none") {
rowStyles.transition = `all ${animationDuration}ms ${animationType}`;
}
const statusClasses = {
default: "",
success: "bg-green-50 hover:bg-green-100",
warning: "bg-yellow-50 hover:bg-yellow-100",
error: "bg-red-50 hover:bg-red-100",
info: "bg-blue-50 hover:bg-blue-100"
};
const rowClasses = cn(
"border-b transition-colors",
styles.rowHoverBackground ? `hover:bg-[${styles.rowHoverBackground}]` : "hover:bg-muted/50",
isSelected && "bg-muted",
status && statusClasses[status],
disabled && "opacity-50 pointer-events-none",
variant === "minimal" && "border-b-0",
typeof rowClassName === "function" ? rowClassName(row, rowIndex) : rowClassName,
className
);
return /* @__PURE__ */ jsx(
"tr",
{
ref,
className: rowClasses,
style: rowStyles,
"data-row-index": rowIndex,
role: "row",
"aria-selected": isSelected,
"aria-expanded": expanded,
"aria-disabled": disabled,
...props
}
);
});
TableRow.displayName = "TableRow";
const TableCell = forwardRef(({ className, style, row, column, rowIndex, columnIndex, status: _status, ...props }, ref) => {
const {
getRowId,
styles,
cellStyle,
cellClassName,
editingCell,
editMode,
startEditing,
commitEdit,
cancelEdit,
onCellClick,
onCellDoubleClick
} = useTable();
const rowId = getRowId(row, rowIndex);
const isEditing = (editingCell == null ? void 0 : editingCell.rowId) === rowId && (editingCell == null ? void 0 : editingCell.columnId) === column.id;
const value = column.accessorFn ? column.accessorFn(row) : row[column.accessorKey];
const cellStyles = {
...typeof cellStyle === "function" ? cellStyle(row, column) : cellStyle,
...style
};
if (styles.cellPadding) cellStyles.padding = styles.cellPadding;
if (column.width) cellStyles.width = column.width;
if (column.minWidth) cellStyles.minWidth = column.minWidth;
if (column.maxWidth) cellStyles.maxWidth = column.maxWidth;
const alignClasses = {
left: "text-left",
center: "text-center",
right: "text-right"
};
const cellClasses = cn(
"p-4",
column.align && alignClasses[column.align],
column.sticky && "sticky bg-background",
column.sticky === "left" && "left-0",
column.sticky === "right" && "right-0",
column.hidden && "hidden",
column.cellClassName,
typeof cellClassName === "function" ? cellClassName(row, column) : cellClassName,
className
);
const handleClick = (e) => {
onCellClick == null ? void 0 : onCellClick(row, column, rowIndex, e);
};
const handleDoubleClick = (e) => {
onCellDoubleClick == null ? void 0 : onCellDoubleClick(row, column, rowIndex, e);
if (editMode === "cell" && column.editable) {
startEditing(rowId, column.id);
}
};
const handleKeyDown = (e) => {
if (e.key === "Enter" && editMode === "cell" && column.editable && !isEditing) {
e.preventDefault();
startEditing(rowId, column.id);
}
};
return /* @__PURE__ */ jsx(
"td",
{
ref,
className: cellClasses,
style: cellStyles,
onClick: handleClick,
onDoubleClick: handleDoubleClick,
onKeyDown: handleKeyDown,
tabIndex: column.editable ? 0 : -1,
"data-column-index": columnIndex,
role: "cell",
...props,
children: isEditing && column.editComponent ? column.editComponent({
value: editingCell.value,
row,
column,
onSave: commitEdit,
onCancel: cancelEdit
}) : isEditing ? /* @__PURE__ */ jsx(
TableEditCell,
{
value: editingCell.value,
row,
column,
onSave: commitEdit,
onCancel: cancelEdit
}
) : column.cell ? column.cell({ value, row, column, rowIndex }) : String(value ?? "")
}
);
});
TableCell.displayName = "TableCell";
const TableHeaderCell = forwardRef(
({
className,
style,
column,
sorted: _sorted,
sortable,
resizable: _resizable,
reorderable: _reorderable,
...props
}, ref) => {
const { sort, toggleSort, enableSorting, styles } = useTable();
if (!column) {
return /* @__PURE__ */ jsx("th", { ref, className, style, ...props });
}
const isSortable = sortable ?? (column.sortable !== false && enableSorting);
const currentSort = sort.find((s) => s.columnId === column.id);
const sortDirection = (currentSort == null ? void 0 : currentSort.direction) ?? null;
const headerStyles = {
...style
};
if (column.width) headerStyles.width = column.width;
if (column.minWidth) headerStyles.minWidth = column.minWidth;
if (column.maxWidth) headerStyles.maxWidth = column.maxWidth;
if (styles.headerPadding) headerStyles.padding = styles.headerPadding;
const alignClasses = {
left: "text-left",
center: "text-center",
right: "text-right"
};
const headerClasses = cn(
"h-12 px-4 font-medium text-muted-foreground",
column.align && alignClasses[column.align],
column.sticky && "sticky bg-background",
column.sticky === "left" && "left-0",
column.sticky === "right" && "right-0",
column.hidden && "hidden",
isSortable && "cursor-pointer select-none hover:text-foreground",
column.headerClassName,
className
);
const handleClick = (e) => {
if (isSortable) {
toggleSort(column.id, e.shiftKey);
}
};
const handleKeyDown = (e) => {
if (e.key === "Enter" && isSortable) {
e.preventDefault();
toggleSort(column.id, e.shiftKey);
}
};
return /* @__PURE__ */ jsx(
"th",
{
ref,
className: headerClasses,
style: headerStyles,
onClick: handleClick,
onKeyDown: handleKeyDown,
tabIndex: isSortable ? 0 : -1,
role: "columnheader",
"aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none",
...props,
children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ jsx("span", { children: typeof column.header === "function" ? column.header({ column }) : column.header }),
isSortable && /* @__PURE__ */ jsx(TableSortIcon, { direction: sortDirection })
] })
}
);
}
);
TableHeaderCell.displayName = "TableHeaderCell";
const TableSelectAllHeaderCell = () => {
const { data, selectedRows, toggleAllRowsSelection, selectionMode, isRowSelectable, getRowId } = useTable();
if (selectionMode === "single") {
return /* @__PURE__ */ jsx("th", { className: "w-10 px-2" });
}
const selectableRows = data.filter((row) => {
if (isRowSelectable && !isRowSelectable(row)) return false;
return true;
});
const allRowIds = selectableRows.map((row, index) => getRowId(row, index));
const selectedCount = allRowIds.filter((id) => selectedRows.has(id)).length;
const allSelected = selectedCount === allRowIds.length && allRowIds.length > 0;
const indeterminate = selectedCount > 0 && selectedCount < allRowIds.length;
return /* @__PURE__ */ jsx("th", { className: "w-10 px-2", children: /* @__PURE__ */ jsx(
TableSelectCheckbox,
{
checked: allSelected,
indeterminate,
onChange: toggleAllRowsSelection,
"aria-label": "Select all rows"
}
) });
};
const TableSelectCell = ({ rowId, row }) => {
const { selectedRows, toggleRowSelection, isRowSelectable } = useTable();
const isSelected = selectedRows.has(rowId);
const isDisabled = isRowSelectable ? !isRowSelectable(row) : false;
return /* @__PURE__ */ jsx("td", { className: "w-10 px-2", children: /* @__PURE__ */ jsx(
TableSelectCheckbox,
{
checked: isSelected,
onChange: () => toggleRowSelection(rowId),
disabled: isDisabled,
"aria-label": `Select row ${rowId}`
}
) });
};
const TableExpandCell = ({ rowId }) => {
const { expandedRows, toggleRowExpansion } = useTable();
const isExpanded = expandedRows.has(rowId);
return /* @__PURE__ */ jsx("td", { className: "w-8 px-1", children: /* @__PURE__ */ jsx(TableExpandButton, { expanded: isExpanded, onToggle: () => toggleRowExpansion(rowId) }) });
};
const TableExpandedRow = ({
rowId,
row,
rowIndex
}) => {
const {
expandedRows,
expandedContent,
columns,
selectionMode,
enableExpanding,
animationType,
animationDuration
} = useTable();
const isExpanded = expandedRows.has(rowId);
if (!isExpanded || !expandedContent) return null;
const colSpan = columns.length + (selectionMode !== "none" ? 1 : 0) + (enableExpanding ? 1 : 0);
const expandedStyles = {};
if (animationType !== "none") {
expandedStyles.transition = `all ${animationDuration}ms ${animationType}`;
}
return /* @__PURE__ */ jsx(TableExpandedPanel, { colSpan, style: expandedStyles, children: expandedContent({ row, rowIndex }) });
};
const TableSortIcon = ({ direction, className, ...props }) => {
const { icons } = useTable();
if (direction === "asc") {
return /* @__PURE__ */ jsx("span", { className: cn("ml-2 h-4 w-4", className), ...props, children: icons.sortAsc || /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) });
}
if (direction === "desc") {
return /* @__PURE__ */ jsx("span", { className: cn("ml-2 h-4 w-4", className), ...props, children: icons.sortDesc || /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) });
}
return /* @__PURE__ */ jsx("span", { className: cn("ml-2 h-4 w-4 opacity-50", className), ...props, children: icons.sortNeutral || /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4" }) });
};
const ChevronsUpDown = ({ className }) => /* @__PURE__ */ jsx(
"svg",
{
width: "15",
height: "15",
viewBox: "0 0 15 15",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
className,
children: /* @__PURE__ */ jsx(
"path",
{
d: "M4.93179 5.43179C4.75605 5.60753 4.75605 5.89245 4.93179 6.06819C5.10753 6.24392 5.39245 6.24392 5.56819 6.06819L7.49999 4.13638L9.43179 6.06819C9.60753 6.24392 9.89245 6.24392 10.0682 6.06819C10.2439 5.89245 10.2439 5.60753 10.0682 5.43179L7.81819 3.18179C7.73379 3.0974 7.61933 3.04999 7.49999 3.04999C7.38064 3.04999 7.26618 3.0974 7.18179 3.18179L4.93179 5.43179ZM10.0682 9.56819C10.2439 9.39245 10.2439 9.10753 10.0682 8.93179C9.89245 8.75606 9.60753 8.75606 9.43179 8.93179L7.49999 10.8636L5.56819 8.93179C5.39245 8.75606 5.10753 8.75606 4.93179 8.93179C4.75605 9.10753 4.75605 9.39245 4.93179 9.56819L7.18179 11.8182C7.26618 11.9026 7.38064 11.95 7.49999 11.95C7.61933 11.95 7.73379 11.9026 7.81819 11.8182L10.0682 9.56819Z",
fill: "currentColor",
fillRule: "evenodd",
clipRule: "evenodd"
}
)
}
);
const TableExpandButton = ({
expanded,
onToggle,
className,
...props
}) => {
const { icons } = useTable();
return /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: onToggle,
className: cn(
"inline-flex h-6 w-6 items-center justify-center rounded hover:bg-muted",
className
),
"aria-expanded": expanded,
"aria-label": expanded ? "Collapse row" : "Expand row",
...props,
children: expanded ? icons.collapse || /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : icons.expand || /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
}
);
};
const TableSelectCheckbox = ({
checked,
indeterminate,
onChange,
className,
...props
}) => {
const { icons } = useTable();
const ref = useRef(null);
useEffect(() => {
if (ref.current) {
ref.current.indeterminate = indeterminate ?? false;
}
}, [indeterminate]);
return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
/* @__PURE__ */ jsx(
"input",
{
ref,
type: "checkbox",
checked,
onChange,
className: cn(
"h-4 w-4 rounded border-gray-300 text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2",
className
),
...props
}
),
checked && icons.select && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: icons.select }),
indeterminate && /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(Minus, { className: "h-3 w-3" }) })
] });
};
const TableEditCell = ({ value, onSave, onCancel }) => {
const [editValue, setEditValue] = useState(value);
const inputRef = useRef(null);
useEffect(() => {
var _a, _b;
(_a = inputRef.current) == null ? void 0 : _a.focus();
(_b = inputRef.current) == null ? void 0 : _b.select();
}, []);
const handleKeyDown = (e) => {
if (e.key === "Enter") {
e.preventDefault();
onSave(editValue);
} else if (e.key === "Escape") {
e.preventDefault();
onCancel();
}
};
const handleBlur = () => {
onSave(editValue);
};
return /* @__PURE__ */ jsx(
"input",
{
ref: inputRef,
type: "text",
value: String(editValue ?? ""),
onChange: (e) => setEditValue(e.target.value),
onKeyDown: handleKeyDown,
onBlur: handleBlur,
className: "w-full rounded border px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
}
);
};
const TableEmpty = ({
message = "No data available",
action,
illustration,
className,
...props
}) => {
const { columns, selectionMode, enableExpanding } = useTable();
const colSpan = columns.length + (selectionMode !== "none" ? 1 : 0) + (enableExpanding ? 1 : 0);
return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, children: /* @__PURE__ */ jsxs(
"div",
{
className: cn("flex flex-col items-center justify-center py-12 text-center", className),
...props,
children: [
illustration && /* @__PURE__ */ jsx("div", { className: "mb-4", children: illustration }),
/* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message }),
action && /* @__PURE__ */ jsx("div", { className: "mt-4", children: action })
]
}
) }) });
};
const TableLoading = ({
message = "Loading...",
showSkeleton = true,
skeletonRows = 5,
className,
...props
}) => {
const { columns, selectionMode, enableExpanding } = useTable();
const colSpan = columns.length + (selectionMode !== "none" ? 1 : 0) + (enableExpanding ? 1 : 0);
if (showSkeleton) {
return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: skeletonRows }).map((_, index) => /* @__PURE__ */ jsxs("tr", { children: [
enableExpanding && /* @__PURE__ */ jsx("td", { className: "w-8 px-1", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-pulse rounded bg-muted" }) }),
selectionMode !== "none" && /* @__PURE__ */ jsx("td", { className: "w-10 px-2", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-pulse rounded bg-muted" }) }),
columns.map((column) => /* @__PURE__ */ jsx("td", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "h-4 animate-pulse rounded bg-muted" }) }, column.id))
] }, index)) });
}
return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan, children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-center py-12", className), ...props, children: [
/* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }),
/* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: message })
] }) }) });
};
const TableExpandedPanel = ({
colSpan,
className,
children,
...props
}) => {
return /* @__PURE__ */ jsx("tr", { className: cn("border-b", className), ...props, children: /* @__PURE__ */ jsx("td", { colSpan, className: "p-4", children }) });
};
const TablePagination = ({
showPageSizeSelector = true,
showPageNumbers = true,
showTotalCount = true,
compact = false,
className,
...props
}) => {
const {
pagination,
setPagination,
pageCount,
canPreviousPage,
canNextPage,
totalCount,
pageSizeOptions
} = useTable();
const handlePageChange = (pageIndex) => {
setPagination((prev) => ({ ...prev, pageIndex }));
};
const handlePageSizeChange = (pageSize) => {
setPagination({ pageIndex: 0, pageSize });
};
const startItem = pagination.pageIndex * pagination.pageSize + 1;
const endItem = Math.min((pagination.pageIndex + 1) * pagination.pageSize, totalCount);
return /* @__PURE__ */ jsxs(
"div",
{
className: cn("flex items-center justify-between px-2", compact ? "py-2" : "py-4", className),
...props,
children: [
showTotalCount && /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
"Showing ",
startItem,
" to ",
endItem,
" of ",
totalCount,
" results"
] }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
showPageSizeSelector && /* @__PURE__ */ jsx(
"select",
{
value: pagination.pageSize,
onChange: (e) => handlePageSizeChange(Number(e.target.value)),
className: "h-8 w-20 rounded border px-2 text-xs",
children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs("option", { value: size, children: [
size,
" per page"
] }, size))
}
),
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
/* @__PURE__ */ jsx(
"button",
{
onClick: () => handlePageChange(0),
disabled: !canPreviousPage,
className: "inline-flex h-8 w-8 items-center justify-center rounded hover:bg-muted disabled:opacity-50",
"aria-label": "Go to first page",
children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
}
),
/* @__PURE__ */ jsx(
"button",
{
onClick: () => handlePageChange(pagination.pageIndex - 1),
disabled: !canPreviousPage,
className: "inline-flex h-8 w-8 items-center justify-center rounded hover:bg-muted disabled:opacity-50",
"aria-label": "Go to previous page",
children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
}
),
showPageNumbers && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: Array.from({ length: pageCount }).map((_, index) => {
if (index === 0 || index === pageCount - 1 || Math.abs(index - pagination.pageIndex) <= 1) {
return /* @__PURE__ */ jsx(
"button",
{
onClick: () => handlePageChange(index),
className: cn(
"inline-flex h-8 min-w-[2rem] items-center justify-center rounded px-3 text-sm",
pagination.pageIndex === index ? "bg-primary text-primary-foreground" : "hover:bg-muted"
),
"aria-label": `Go to page ${index + 1}`,
"aria-current": pagination.pageIndex === index ? "page" : void 0,
children: index + 1
},
index
);
} else if (index === pagination.pageIndex - 2 || index === pagination.pageIndex + 2) {
return /* @__PURE__ */ jsx("span", { className: "px-1", children: "..." }, index);
}
return null;
}) }),
/* @__PURE__ */ jsx(
"button",
{
onClick: () => handlePageChange(pagination.pageIndex + 1),
disabled: !canNextPage,
className: "inline-flex h-8 w-8 items-center justify-center rounded hover:bg-muted disabled:opacity-50",
"aria-label": "Go to next page",
children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
}
),
/* @__PURE__ */ jsx(
"button",
{
onClick: () => handlePageChange(pageCount - 1),
disabled: !canNextPage,
className: "inline-flex h-8 w-8 items-center justify-center rounded hover:bg-muted disabled:opacity-50",
"aria-label": "Go to last page",
children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
}
)
] })
] })
]
}
);
};
const TableFilter = ({
column: _column,
value,
onChange,
matchMode: _matchMode = "contains",
placeholder = "Filter...",
className,
...props
}) => {
const { icons } = useTable();
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ...props, children: [
/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: icons.filter || /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4 text-muted-foreground" }) }),
/* @__PURE__ */ jsx(
"input",
{
type: "text",
value: String(value ?? ""),
onChange: (e) => onChange(e.target.value),
placeholder,
className: "h-8 w-full rounded border pl-9 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
}
),
String(value) && /* @__PURE__ */ jsx(
"button",
{
onClick: () => onChange(""),
className: "absolute inset-y-0 right-0 flex items-center pr-3",
"aria-label": "Clear filter",
children: icons.clearFilter || /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-muted-foreground hover:text-foreground" })
}
)
] });
};
const TableGlobalFilter = ({
value,
onChange,
placeholder = "Search all columns...",
debounceMs = 300,
className,
...props
}) => {
const [localValue, setLocalValue] = useState(value);
useEffect(() => {
const timeout = setTimeout(() => {
onChange(localValue);
}, debounceMs);
return () => clearTimeout(timeout);
}, [localValue, onChange, debounceMs]);
useEffect(() => {
setLocalValue(value);
}, [value]);
return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ...props, children: [
/* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3", children: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4 text-muted-foreground" }) }),
/* @__PURE__ */ jsx(
"input",
{
type: "text",
value: localValue,
onChange: (e) => setLocalValue(e.target.value),
placeholder,
className: "h-10 w-full rounded-md border pl-10 pr-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
}
),
localValue && /* @__PURE__ */ jsx(
"button",
{
onClick: () => {
setLocalValue("");
onChange("");
},
className: "absolute inset-y-0 right-0 flex items-center pr-3",
"aria-label": "Clear search",
children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 text-muted-foreground hover:text-foreground" })
}
)
] });
};
const TableCompound = Table;
TableCompound.Header = TableHeader;
TableCompound.Body = TableBody;
TableCompound.Footer = TableFooter;
TableCompound.Row = TableRow;
TableCompound.Cell = TableCell;
TableCompound.HeaderCell = TableHeaderCell;
TableCompound.Pagination = TablePagination;
TableCompound.Filter = TableFilter;
TableCompound.GlobalFilter = TableGlobalFilter;
TableCompound.SortIcon = TableSortIcon;
TableCompound.ExpandButton = TableExpandButton;
TableCompound.SelectCheckbox = TableSelectCheckbox;
TableCompound.EditCell = TableEditCell;
TableCompound.Empty = TableEmpty;
TableCompound.Loading = TableLoading;
TableCompound.ExpandedPanel = TableExpandedPanel;
const ChevronDown = ({ className }) => /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
}
);
const ChevronRight = ({ className }) => /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
}
);
const ChevronUp = ({ className }) => /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: /* @__PURE__ */ jsx("polyline", { points: "18 15 12 9 6 15" })
}
);
const ChevronLeft = ({ className }) => /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
}
);
const ChevronsLeft = ({ className }) => /* @__PURE__ */ jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: [
/* @__PURE__ */ jsx("polyline", { points: "11 17 6 12 11 7" }),
/* @__PURE__ */ jsx("polyline", { points: "18 17 13 12 18 7" })
]
}
);
const ChevronsRight = ({ className }) => /* @__PURE__ */ jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: [
/* @__PURE__ */ jsx("polyline", { points: "13 17 18 12 13 7" }),
/* @__PURE__ */ jsx("polyline", { points: "6 17 11 12 6 7" })
]
}
);
const Minus = ({ className }) => /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
}
);
const Search = ({ className }) => /* @__PURE__ */ jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: [
/* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
/* @__PURE__ */ jsx("path", { d: "m21 21-4.35-4.35" })
]
}
);
const X = ({ className }) => /* @__PURE__ */ jsxs(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: [
/* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
/* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
]
}
);
const Filter = ({ className }) => /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: /* @__PURE__ */ jsx("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })
}
);
const Loader2 = ({ className }) => /* @__PURE__ */ jsx(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
className,
children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
}
);
const ToggleButtonsContext = createContext(null);
const useToggleButtonsContext = () => {
const context = useContext(ToggleButtonsContext);
if (!context) {
throw new Error(
"ToggleButtons compound components must be used within a ToggleButtons component"
);
}
return context;
};
const ToggleButtonsLabel = forwardRef(
({ className, style, required, children, ...props }, ref) => {
const context = useToggleButtonsContext();
const labelStyles = cn(
"block text-sm font-medium mb-2",
context.status === "error" && "text-red-600",
context.status === "success" && "text-green-600",
context.status === "warning" && "text-yellow-600",
context.status === "default" && "text-gray-700",
context.disabled && "text-gray-400",
className
);
return /* @__PURE__ */ jsxs("label", { ref, className: labelStyles, style, ...props, children: [
children,
(required || context.required) && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
] });
}
);
ToggleButtonsLabel.displayName = "ToggleButtonsLabel";
const ToggleButtonsHelperText = forwardRef(
({ className, style, children, ...props }, ref) => {
const context = useToggleButtonsContext();
const helperStyles = cn(
"mt-2 text-xs",
context.status === "error" && "text-red-600",
context.status === "success" && "text-green-600",
context.status === "warning" && "text-yellow-600",
context.status === "default" && "text-gray-500",
context.disabled && "text-gray-400",
className
);
return /* @__PURE__ */ jsx("div", { ref, className: helperStyles, style, ...props, children });
}
);
ToggleButtonsHelperText.displayName = "ToggleButtonsHelperText";
const ToggleButton = forwardRef(
({
value,
label,
icon,
iconPosition = "start",
disabled = false,
loading = false,
loadingIcon,
className,
style,
children,
// Button-specific styles
buttonBackgroundColor,
buttonBackgroundColorSelected,
buttonBorderColor,
buttonBorderColorSelected,
buttonBorderWidth,
buttonBorderRadius,
buttonPadding,
buttonTextColor,
buttonTextColorSelected,
buttonBoxShadow,
buttonBoxShadowSelected,
// Label styles
labelColor,
labelColorSelected,
labelFontSize,
labelFontWeight,
// Icon styles
iconColor,
iconColorSelected,
iconSize,
// Focus styles
focusRingColor,
focusRingWidth,
focusBackgroundColor,
// Hover styles
hoverBackgroundColor,
hoverBorderColor,
hoverTextColor,
hoverScale,
// Active styles
activeBackgroundColor,
activeScale,
// Custom render
renderContent,
...props
}, ref) => {
const context = useToggleButtonsContext();
const [isFocused, setIsFocused] = useState(false);
const [isHovered, setIsHovered] = useState(false);
const [isActive, setIsActive] = useState(false);
const isSelected = Array.isArray(context.value) ? context.value.includes(value) : context.value === value;
const isDisabled = disabled || context.disabled || context.loading;
const handleClick = useCallback(
(e) => {
e.preventDefault();
if (!isDisabled && context.onChange) {
if (context.selectionMode === "multiple" && Array.isArray(context.value)) {
const newValue = isSelected ? context.value.filter((v) => v !== value) : [...context.value, value];
context.onChange(newValue);
} else {
context.onChange(value);
}
}
},
[isDisabled, context, value, isSelected]
);
const getSizeDimensions = () => {
const dimensions2 = {
sm: { padding: "0.5rem 1rem", fontSize: "0.875rem", iconSize: "1rem" },
md: { padding: "0.625rem 1.25rem", fontSize: "1rem", iconSize: "1.25rem" },
lg: { padding: "0.75rem 1.5rem", fontSize: "1.125rem", iconSize: "1.5rem" }
};
return dimensions2[context.size || "md"];
};
const dimensions = getSizeDimensions();
const getVariantStyles = () => {
const variantStyles = {
default: cn(
"border bg-white hover:bg-gray-50",
isSelected && "border-blue-500 bg-blue-50 text-blue-700",
context.status === "error" && "border-red-300",
context.status === "success" && "border-green-300",
context.status === "warning" && "border-yellow-300",
!isSelected && context.status === "default" && "border-gray-300 text-gray-700"
),
filled: cn(
"border-0",
isSelected ? cn(
"bg-blue-600 text-white",
context.status === "error" && "bg-red-600",
context.status === "success" && "bg-green-600",
context.status === "warning" && "bg-yellow-600"
) : "bg-gray-100 text-gray-700 hover:bg-gray-200"
),
outlined: cn(
"border-2 bg-transparent",
isSelected ? cn(
"border-blue-500 text-blue-600",
context.status === "error" && "border-red-500 text-red-600",
context.status === "success" && "border-green-500 text-green-600",
context.status === "warning" && "border-yellow-500 text-yellow-600"
) : "border-gray-300 text-gray-700 hover:bg-gray-50"
),
ghost: cn(
"border-0 bg-transparent",
isSelected ? cn(
"bg-blue-100 text-blue-700",
context.status === "error" && "bg-red-100 text-red-700",
context.status === "success" && "bg-green-100 text-green-700",
context.status === "warning" && "bg-yellow-100 text-yellow-700"
) : "text-gray-700 hover:bg-gray-100"
),
elevated: cn(
"border-0 bg-white shadow-md hover:shadow-lg",
isSelected && "bg-blue-50 text-blue-700 shadow-xl",
!isSelected && "text-gray-700"
)
};
return variantStyles[context.variant || "default"];
};
const buttonStyles = cn(
"inline-flex items-center justify-center font-medium transition-all duration-200",
"focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
getVariantStyles(),
isDisabled && "cursor-not-allowed opacity-50",
isFocused && context.status === "error" && "ring-red-500",
isFocused && context.status === "success" && "ring-green-500",
isFocused && context.status === "warning" && "ring-yellow-500",
isFocused && context.status === "default" && "ring-blue-500",
className
);
const customButtonStyles = {
backgroundColor: isSelected ? buttonBackgroundColorSelected || (isHovered ? hoverBackgroundColor : void 0) : buttonBackgroundColor || (isHovered ? hoverBackgroundColor : void 0),
borderColor: isSelected ? buttonBorderColorSelected || (isHovered ? hoverBorderColor : void 0) : buttonBorderColor || (isHovered ? hoverBorderColor : void 0),
borderWidth: buttonBorderWidth,
borderRadius: buttonBorderRadius || "0.375rem",
padding: buttonPadding || dimensions.padding,
color: isSelected ? buttonTextColorSelected || (isHovered ? hoverTextColor : void 0) : buttonTextColor || (isHovered ? hoverTextColor : void 0),
boxShadow: isSelected ? buttonBoxShadowSelected : buttonBoxShadow,
transform: `scale(${isActive && activeScale ? activeScale : isHovered && hoverScale ? hoverScale : "1"})`,
...isFocused && focusBackgroundColor && { backgroundColor: focusBackgroundColor },
...isFocused && {
"--tw-ring-color": focusRingColor,
"--tw-ring-width": focusRingWidth
},
...isActive && activeBackgroundColor && { backgroundColor: activeBackgroundColor },
...style
};
const customLabelStyles = {
color: isSelected && labelColorSelected ? labelColorSelected : labelColor,
fontSize: labelFontSize || dimensions.fontSize,
fontWeight: labelFontWeight
};
const customIconStyles = {
color: isSelected && iconColorSelected ? iconColorSelected : iconColor,
width: iconSize || dimensions.iconSize,
height: iconSize || dimensions.iconSize
};
const renderButtonContent = () => {
if (renderContent) {
return renderContent(isSelected, isDisabled);
}
if (loading) {
return /* @__PURE__ */ jsxs(Fragment, { children: [
loadingIcon || /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] }),
/* @__PURE__ */ jsx("span", { className: "ml-2", children: "Loading..." })
] });
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
icon && iconPosition === "start" && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center mr-2", style: customIconStyles, children: icon }),
(label || children) && /* @__PURE__ */ jsx("span", { style: customLabelStyles, children: label || children }),
icon && iconPosition === "end" && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center ml-2", style: customIconStyles, children: icon })
] });
};
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
value,
disabled: isDisabled,
className: buttonStyles,
style: customButtonStyles,
onClick: handleClick,
onFocus: () => setIsFocused(true),
onBlur: () => setIsFocused(false),
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
onMouseDown: () => setIsActive(true),
onMouseUp: () => setIsActive(false),
"aria-pressed": isSelected,
"aria-disabled": isDisabled,
role: "button",
...props,
children: renderButtonContent()
}
);
}
);
ToggleButton.displayName = "ToggleButton";
const ToggleButtonsBase = forwardRef(
({
// Core props
value: controlledValue,
defaultValue,
onChange,
disabled = false,
required = false,
loading = false,
name,
selectionMode = "single",
// Visual props
variant = "default",
size = "md",
status = "default",
orientation = "horizontal",
fullWidth = false,
exclusive: _exclusive = false,
// Content props
children,
label,
helperText,
errorMessage,
emptyMessage,
// Animation props
transition = "smooth",
transitionDuration = 200,
// Container styles
className,
style,
containerClassName,
containerStyle,
backgroundColor,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding,
paddingX,
paddingY,
boxShadow,
// Group styles
gap,
groupBackgroundColor,
groupBorderWidth,
groupBorderColor,
groupBorderRadius,
groupPadding,
// Button styles
buttonBorderRadius,
buttonBackgroundColor,
buttonBackgroundColorSelected,
buttonTextColor,
buttonTextColorSelected,
buttonBorderColorSelected,
buttonBorderWidth,
groupGap: _groupGap,
// Label styles
labelColor,
labelFontSize,
labelFontWeight,
labelFontFamily,
// Helper text styles
helperTextColor,
helperTextFontSize,
errorMessageColor,
// Focus styles
focusRingColor: _focusRingColor,
focusRingWidth: _focusRingWidth,
focusRingOffset: _focusRingOffset,
focusBorderColor: _focusBorderColor,
focusBackgroundColor: _focusBackgroundColor,
focusBoxShadow: _focusBoxShadow,
// Custom render props
renderLabel,
renderButton,
// Status colors
successColor: _successColor,
warningColor: _warningColor,
errorColor,
...props
}, ref) => {
const [uncontrolledValue, setUncontrolledValue] = useState(
defaultValue || (selectionMode === "multiple" ? [] : "")
);
const isControlled = controlledValue !== void 0;
const value = isControlled ? controlledValue : uncontrolledValue;
const handleChange = useCallback(
(newValue) => {
if (disabled || loading) return;
if (!isControlled) {
setUncontrolledValue(newValue);
}
onChange == null ? void 0 : onChange(newValue);
},
[disabled, loading, isControlled, onChange]
);
let extractedLabel = label;
let extractedHelperText = helperText;
const toggleButtons = [];
if (children) {
React.Children.forEach(children, (child) => {
if (React.isValidElement(child)) {
if (child.type === ToggleButtonsLabel) {
extractedLabel = child.props.children;
} else if (child.type === ToggleButtonsHelperText) {
extractedHelperText = child.props.children;
} else if (child.type === ToggleButton) {
toggleButtons.push(child);
}
}
});
}
const contextValue = {
value,
onChange: handleChange,
disabled,
required,
loading,
variant,
size,
status,
selectionMode,
name
};
const containerStyles = {
backgroundColor,
borderWidth,
borderColor,
borderStyle,
borderRadius,
padding: padding || (paddingX || paddingY ? void 0 : "0"),
paddingLeft: paddingX,
paddingRight: paddingX,
paddingTop: paddingY,
paddingBottom: paddingY,
boxShadow,
...containerStyle
};
const groupStyles = cn(
"inline-flex",
orientation === "horizontal" ? "flex-row" : "flex-col",
fullWidth && "w-full",
disabled && "opacity-50"
);
const customGroupStyles = {
backgroundColor: groupBackgroundColor,
borderWidth: groupBorderWidth,
borderColor: groupBorderColor,
borderRadius: groupBorderRadius || "0.375rem",
padding: groupPadding,
gap: gap || "0.25rem",
transition: transition !== "none" ? `all ${transitionDuration}ms ease-in-out` : void 0,
...style
};
const customLabelStyles = {
color: labelColor,
fontSize: labelFontSize,
fontWeight: labelFontWeight,
fontFamily: labelFontFamily
};
const customHelperTextStyles = {
color: helperTextColor,
fontSize: helperTextFontSize
};
const customErrorStyles = {
color: errorMessageColor || errorColor,
fontSize: helperTextFontSize
};
const renderButtons = () => {
if (toggleButtons.length === 0 && emptyMessage) {
return /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 italic py-4 text-center", children: emptyMessage });
}
return toggleButtons.map((button, index) => {
if (renderButton) {
return renderButton(
button.props,
Array.isArray(value) ? value.includes(button.props.value) : value === button.props.value,
disabled || button.props.disabled
);
}
const isFirst = index === 0;
const isLast = index === toggleButtons.length - 1;
const positionStyles = {};
const buttonRadius = button.props.buttonBorderRadius || buttonBorderRadius || "0.375rem";
if (orientation === "horizontal" && toggleButtons.length > 1) {
if (isFirst) {
positionStyles.borderTopLeftRadius = buttonRadius;
positionStyles.borderBottomLeftRadius = buttonRadius;
positionStyles.borderTopRightRadius = "0";
positionStyles.borderBottomRightRadius = "0";
} else if (isLast) {
positionStyles.borderTopLeftRadius = "0";
positionStyles.borderBottomLeftRadius = "0";
positionStyles.borderTopRightRadius = buttonRadius;
positionStyles.borderBottomRightRadius = buttonRadius;
} else {
positionStyles.borderRadius = "0";
}
if (!isFirst) {
positionStyles.marginLeft = "-1px";
}
} else {
positionStyles.borderRadius = buttonRadius;
}
return React.cloneElement(button, {
key: button.props.value,
style: { ...button.props.style, ...positionStyles },
className: cn(button.props.className, fullWidth && "flex-1"),
// Pass down button styling props if not already set on the button
...buttonBackgroundColor && !button.props.buttonBackgroundColor && { buttonBackgroundColor },
...buttonBackgroundColorSelected && !button.props.buttonBackgroundColorSelected && { buttonBackgroundColorSelected },
...buttonTextColor && !button.props.buttonTextColor && { buttonTextColor },
...buttonTextColorSelected && !button.props.buttonTextColorSelected && { buttonTextColorSelected },
...buttonBorderColorSelected && !button.props.buttonBorderColorSelected && { buttonBorderColorSelected },
...buttonBorderWidth && !button.props.buttonBorderWidth && { buttonBorderWidth }
});
});
};
const labelContent = renderLabel ? renderLabel(required) : extractedLabel;
return /* @__PURE__ */ jsx(ToggleButtonsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: cn("w-full", containerClassName), style: containerStyles, children: [
labelContent && /* @__PURE__ */ jsx(ToggleButtonsLabel, { required, style: customLabelStyles, children: labelContent }),
/* @__PURE__ */ jsx(
"div",
{
ref,
role: "group",
"aria-required": required,
"aria-invalid": status === "error" || !!errorMessage,
"aria-describedby": errorMessage ? "togglebuttons-error" : extractedHelperText ? "togglebuttons-helper" : void 0,
className: cn(groupStyles, className),
style: customGroupStyles,
...props,
children: loading ? /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center py-4", children: [
/* @__PURE__ */ jsxs("svg", { className: "animate-spin h-6 w-6 text-gray-400", fill: "none", viewBox: "0 0 24 24", children: [
/* @__PURE__ */ jsx(
"circle",
{
className: "opacity-25",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4"
}
),
/* @__PURE__ */ jsx(
"path",
{
className: "opacity-75",
fill: "currentColor",
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
}
)
] }),
/* @__PURE__ */ jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Loading buttons..." })
] }) : renderButtons()
}
),
extractedHelperText && !errorMessage && /* @__PURE__ */ jsx(ToggleButtonsHelperText, { id: "togglebuttons-helper", style: customHelperTextStyles, children: extractedHelperText }),
errorMessage && /* @__PURE__ */ jsx(ToggleButtonsHelperText, { id: "togglebuttons-error", style: customErrorStyles, children: errorMessage })
] }) });
}
);
ToggleButtonsBase.displayName = "ToggleButtons";
const ToggleButtons = ToggleButtonsBase;
ToggleButtons.Button = ToggleButton;
ToggleButtons.Label = ToggleButtonsLabel;
ToggleButtons.HelperText = ToggleButtonsHelperText;
const TooltipContext = createContext(null);
const useTooltipContext = () => {
const context = useContext(TooltipContext);
if (!context) {
throw new Error("Tooltip sub-components must be used within a Tooltip");
}
return context;
};
const Tooltip = forwardRef(
({
className,
isOpen: controlledIsOpen,
defaultIsOpen = false,
onOpenChange,
disabled = false,
content,
title,
description,
variant = "default",
size = "md",
status = "default",
placement = "top",
offset = 8,
delayOpen = 0,
delayClose = 0,
autoPlacement = true,
// Fine-tuning position
offsetX = 0,
offsetY = 0,
nudgeLeft = 0,
nudgeRight = 0,
nudgeTop = 0,
nudgeBottom = 0,
trigger = "hover",
showArrow = true,
arrowSize = 6,
arrowColor,
transition = "fade",
transitionDuration = 200,
// Container styles
containerClassName,
containerStyle,
maxWidth,
minWidth,
width,
// Custom styles
customStyles = {},
// Content styles
contentBackgroundColor,
contentBorderWidth,
contentBorderColor,
contentBorderRadius,
contentPadding,
contentBoxShadow,
// Typography styles
titleColor,
titleFontSize,
titleFontWeight,
titleFontFamily,
descriptionColor,
descriptionFontSize,
descriptionFontWeight,
descriptionFontFamily,
// States
loading = false,
loadingMessage = "Loading...",
emptyMessage = "No content",
required = false,
// Labels
label,
helperText,
// Custom render
renderContent,
renderTrigger,
children,
style,
...props
}, _ref) => {
const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultIsOpen);
const [position, setPosition] = useState({ top: 0, left: 0 });
const [currentPlacement, setCurrentPlacement] = useState(placement);
const triggerRef = useRef(null);
const contentRef = useRef(null);
const timeoutRef = useRef();
const contentId = useId();
const isControlled = controlledIsOpen !== void 0;
const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
const getStatusColors = useMemo(() => {
const statusColors = {
default: {
background: "#1f2937",
border: "#374151",
text: "#ffffff",
arrow: "#1f2937"
},
success: {
background: "#10b981",
border: "#059669",
text: "#ffffff",
arrow: "#10b981"
},
warning: {
background: "#f59e0b",
border: "#d97706",
text: "#ffffff",
arrow: "#f59e0b"
},
error: {
background: "#ef4444",
border: "#dc2626",
text: "#ffffff",
arrow: "#ef4444"
}
};
return statusColors[status];
}, [status]);
const getSizeDimensions = useMemo(() => {
const dimensions = {
sm: {
padding: "0.25rem 0.5rem",
fontSize: "0.75rem",
arrowSize: 4,
maxWidth: "120px"
},
md: {
padding: "0.375rem 0.75rem",
fontSize: "0.875rem",
arrowSize: 6,
maxWidth: "180px"
},
lg: {
padding: "0.5rem 1rem",
fontSize: "1rem",
arrowSize: 8,
maxWidth: "240px"
}
};
return dimensions[size];
}, [size]);
const getDefaultStyles = useMemo(() => {
const variantStyles = {
default: {
background: contentBackgroundColor || getStatusColors.background,
border: contentBorderWidth ? `${contentBorderWidth} solid ${contentBorderColor || getStatusColors.border}` : "none",
boxShadow: contentBoxShadow || "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
},
filled: {
background: contentBackgroundColor || getStatusColors.background,
border: contentBorderWidth ? `${contentBorderWidth} solid ${contentBorderColor || getStatusColors.border}` : "none",
boxShadow: contentBoxShadow || "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
},
outlined: {
background: contentBackgroundColor || "rgba(255, 255, 255, 0.95)",
border: contentBorderWidth ? `${contentBorderWidth} solid ${contentBorderColor || getStatusColors.border}` : `1px solid ${getStatusColors.border}`,
boxShadow: contentBoxShadow || "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)"
},
flat: {
background: contentBackgroundColor || getStatusColors.background,
border: contentBorderWidth ? `${contentBorderWidth} solid ${contentBorderColor || getStatusColors.border}` : "none",
boxShadow: contentBoxShadow || "none"
},
elevated: {
background: contentBackgroundColor || getStatusColors.background,
border: contentBorderWidth ? `${contentBorderWidth} solid ${contentBorderColor || getStatusColors.border}` : "none",
boxShadow: contentBoxShadow || "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"
}
};
return variantStyles[variant];
}, [
variant,
contentBackgroundColor,
contentBorderWidth,
contentBorderColor,
contentBoxShadow,
getStatusColors
]);
const calculatePosition = useCallback(() => {
if (!triggerRef.current || !contentRef.current) return;
const triggerRect = triggerRef.current.getBoundingClientRect();
const contentRect = contentRef.current.getBoundingClientRect();
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
const scrollX = window.pageXOffset || document.documentElement.scrollLeft;
const scrollY = window.pageYOffset || document.documentElement.scrollTop;
let top = 0;
let left = 0;
let newPlacement = currentPlacement;
switch (currentPlacement) {
case "top":
top = triggerRect.top - contentRect.height - offset;
left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;
break;
case "bottom":
top = triggerRect.bottom + offset;
left = triggerRect.left + triggerRect.width / 2 - contentRect.width / 2;
break;
case "left":
top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;
left = triggerRect.left - contentRect.width - offset;
break;
case "right":
top = triggerRect.top + triggerRect.height / 2 - contentRect.height / 2;
left = triggerRect.right + offset;
break;
case "top-start":
top = triggerRect.top - contentRect.height - offset;
left = triggerRect.left;
break;
case "top-end":
top = triggerRect.top - contentRect.height - offset;
left = triggerRect.right - contentRect.width;
break;
case "bottom-start":
top = triggerRect.bottom + offset;
left = triggerRect.left;
break;
case "bottom-end":
top = triggerRect.bottom + offset;
left = triggerRect.right - contentRect.width;
break;
case "left-start":
top = triggerRect.top;
left = triggerRect.left - contentRect.width - offset;
break;
case "left-end":
top = triggerRect.bottom - contentRect.height;
left = triggerRect.left - contentRect.width - offset;
break;
case "right-start":
top = triggerRect.top;
left = triggerRect.right + offset;
break;
case "right-end":
top = triggerRect.bottom - contentRect.height;
left = triggerRect.right + offset;
break;
}
if (autoPlacement) {
if (left < 0) {
if (currentPlacement.includes("left")) {
newPlacement = currentPlacement.replace("left", "right");
} else if (currentPlacement.includes("right")) {
newPlacement = currentPlacement.replace("right", "left");
}
}
if (left + contentRect.width > viewportWidth) {
if (currentPlacement.includes("right")) {
newPlacement = currentPlacement.replace("right", "left");
} else if (currentPlacement.includes("left")) {
newPlacement = currentPlacement.replace("left", "right");
}
}
if (top < 0) {
if (currentPlacement.includes("top")) {
newPlacement = currentPlacement.replace("top", "bottom");
}
}
if (top + contentRect.height > viewportHeight) {
if (currentPlacement.includes("bottom")) {
newPlacement = currentPlacement.replace("bottom", "top");
}
}
}
if (newPlacement !== currentPlacement) {
setCurrentPlacement(newPlacement);
return;
}
left += offsetX;
top += offsetY;
left += nudgeRight - nudgeLeft;
top += nudgeBottom - nudgeTop;
left = Math.max(8, Math.min(left, viewportWidth - contentRect.width - 8));
top = Math.max(8, Math.min(top, viewportHeight - contentRect.height - 8));
setPosition({
top: top + scrollY,
left: left + scrollX
});
}, [
currentPlacement,
offset,
autoPlacement,
offsetX,
offsetY,
nudgeLeft,
nudgeRight,
nudgeTop,
nudgeBottom
]);
const handleOpen = useCallback(() => {
if (disabled) return;
const openTooltip = () => {
if (!isControlled) {
setUncontrolledIsOpen(true);
}
onOpenChange == null ? void 0 : onOpenChange(true);
};
if (delayOpen > 0) {
timeoutRef.current = setTimeout(openTooltip, delayOpen);
} else {
openTooltip();
}
}, [disabled, isControlled, onOpenChange, delayOpen]);
const handleClose = useCallback(() => {
const closeTooltip = () => {
if (!isControlled) {
setUncontrolledIsOpen(false);
}
onOpenChange == null ? void 0 : onOpenChange(false);
};
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
if (delayClose > 0) {
timeoutRef.current = setTimeout(closeTooltip, delayClose);
} else {
closeTooltip();
}
}, [isControlled, onOpenChange, delayClose]);
const handleMouseEnter = useCallback(() => {
if (trigger === "hover") {
handleOpen();
}
}, [trigger, handleOpen]);
const handleMouseLeave = useCallback(() => {
if (trigger === "hover") {
handleClose();
}
}, [trigger, handleClose]);
const handleFocus = useCallback(() => {
if (trigger === "focus") {
handleOpen();
}
}, [trigger, handleOpen]);
const handleBlur = useCallback(() => {
if (trigger === "focus") {
handleClose();
}
}, [trigger, handleClose]);
const handleClick = useCallback(() => {
if (trigger === "click") {
if (isOpen) {
handleClose();
} else {
handleOpen();
}
}
}, [trigger, isOpen, handleOpen, handleClose]);
useEffect(() => {
if (isOpen && contentRef.current) {
const timer = setTimeout(calculatePosition, 10);
return () => clearTimeout(timer);
}
}, [isOpen, currentPlacement, calculatePosition]);
useEffect(() => {
if (isOpen) {
const handleScroll = () => calculatePosition();
const handleResize = () => calculatePosition();
window.addEventListener("scroll", handleScroll, true);
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("scroll", handleScroll, true);
window.removeEventListener("resize", handleResize);
};
}
}, [isOpen, calculatePosition]);
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
};
}, []);
const triggerProps = useMemo(
() => ({
ref: triggerRef,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onFocus: handleFocus,
onBlur: handleBlur,
onClick: handleClick,
tabIndex: trigger === "focus" ? 0 : void 0,
"aria-describedby": isOpen ? contentId : void 0,
"aria-expanded": trigger === "click" ? isOpen : void 0
}),
[
handleMouseEnter,
handleMouseLeave,
handleFocus,
handleBlur,
handleClick,
trigger,
isOpen,
contentId
]
);
const contentStyles = useMemo(
() => ({
position: "absolute",
zIndex: 9999,
top: position.top,
left: position.left,
backgroundColor: getDefaultStyles.background,
border: getDefaultStyles.border,
borderRadius: contentBorderRadius || customStyles.borderRadius || "0.375rem",
padding: contentPadding || customStyles.padding || getSizeDimensions.padding,
boxShadow: getDefaultStyles.boxShadow,
maxWidth: maxWidth || getSizeDimensions.maxWidth,
minWidth,
width,
fontSize: customStyles.fontSize || getSizeDimensions.fontSize,
fontWeight: customStyles.fontWeight,
fontFamily: customStyles.fontFamily,
color: customStyles.textColor || getStatusColors.text,
opacity: isOpen ? 1 : 0,
visibility: isOpen ? "visible" : "hidden",
pointerEvents: isOpen ? "auto" : "none",
transition: transition === "none" ? "none" : transition === "bounce" ? `all ${transitionDuration}ms cubic-bezier(0.68, -0.55, 0.265, 1.55)` : transition === "scale" ? `all ${transitionDuration}ms ease-in-out, transform ${transitionDuration}ms ease-in-out` : `all ${transitionDuration}ms ease-in-out`,
transform: transition === "scale" ? isOpen ? "scale(1)" : "scale(0.8)" : transition === "slide" ? isOpen ? "translateY(0)" : `translateY(-${offset}px)` : "none",
lineHeight: "1.4",
whiteSpace: size === "sm" ? "nowrap" : "normal",
...customStyles.contentStyles,
...style
}),
[
position,
getDefaultStyles,
contentBorderRadius,
contentPadding,
maxWidth,
minWidth,
width,
getSizeDimensions,
getStatusColors,
isOpen,
transition,
transitionDuration,
offset,
size,
customStyles,
style
]
);
const getArrowStyles = useCallback(() => {
if (!showArrow) return {};
const arrowStyles = {
position: "absolute",
width: 0,
height: 0,
borderStyle: "solid"
};
const arrowColorValue = arrowColor || getStatusColors.arrow;
const arrowSizeValue = arrowSize || getSizeDimensions.arrowSize;
switch (currentPlacement) {
case "top":
case "top-start":
case "top-end":
arrowStyles.bottom = `-${arrowSizeValue}px`;
arrowStyles.left = "50%";
arrowStyles.transform = "translateX(-50%)";
arrowStyles.borderWidth = `${arrowSizeValue}px ${arrowSizeValue}px 0 ${arrowSizeValue}px`;
arrowStyles.borderColor = `${arrowColorValue} transparent transparent transparent`;
break;
case "bottom":
case "bottom-start":
case "bottom-end":
arrowStyles.top = `-${arrowSizeValue}px`;
arrowStyles.left = "50%";
arrowStyles.transform = "translateX(-50%)";
arrowStyles.borderWidth = `0 ${arrowSizeValue}px ${arrowSizeValue}px ${arrowSizeValue}px`;
arrowStyles.borderColor = `transparent transparent ${arrowColorValue} transparent`;
break;
case "left":
case "left-start":
case "left-end":
arrowStyles.right = `-${arrowSizeValue}px`;
arrowStyles.top = "50%";
arrowStyles.transform = "translateY(-50%)";
arrowStyles.borderWidth = `${arrowSizeValue}px 0 ${arrowSizeValue}px ${arrowSizeValue}px`;
arrowStyles.borderColor = `transparent transparent transparent ${arrowColorValue}`;
break;
case "right":
case "right-start":
case "right-end":
arrowStyles.left = `-${arrowSizeValue}px`;
arrowStyles.top = "50%";
arrowStyles.transform = "translateY(-50%)";
arrowStyles.borderWidth = `${arrowSizeValue}px ${arrowSizeValue}px ${arrowSizeValue}px 0`;
arrowStyles.borderColor = `transparent ${arrowColorValue} transparent transparent`;
break;
}
return { ...arrowStyles, ...customStyles.arrowStyles };
}, [
showArrow,
arrowColor,
arrowSize,
currentPlacement,
getStatusColors,
getSizeDimensions,
customStyles.arrowStyles
]);
const renderTooltipContent = () => {
if (renderContent) {
return renderContent(isOpen);
}
if (loading) {
return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
/* @__PURE__ */ jsxs("svg", { className: "animate-spin w-3 h-3", viewBox: "0 0 24 24", fill: "none", children: [
/* @__PURE__ */ jsx(
"circle",
{
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "4",
strokeLinecap: "round",
opacity: "0.25"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M12 2a10 10 0 0 1 10 10",
stroke: "currentColor",
strokeWidth: "4",
strokeLinecap: "round"
}
)
] }),
loadingMessage
] });
}
if (!content && !title && !description) {
return /* @__PURE__ */ jsx("div", { className: "text-gray-400", children: emptyMessage });
}
return /* @__PURE__ */ jsxs("div", { id: contentId, children: [
title && /* @__PURE__ */ jsxs(
"div",
{
style: {
color: titleColor || getStatusColors.text,
fontSize: titleFontSize || getSizeDimensions.fontSize,
fontWeight: titleFontWeight || "500",
fontFamily: titleFontFamily,
marginBottom: description ? "0.125rem" : 0
},
children: [
title,
required && /* @__PURE__ */ jsx("span", { className: "text-red-400 ml-1", children: "*" })
]
}
),
description && /* @__PURE__ */ jsx(
"div",
{
style: {
color: descriptionColor || getStatusColors.text,
fontSize: descriptionFontSize || "0.75rem",
fontWeight: descriptionFontWeight || "400",
fontFamily: descriptionFontFamily,
opacity: 0.9
},
children: description
}
),
content && /* @__PURE__ */ jsx("div", { children: content }),
label && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs opacity-80", children: label }),
helperText && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs opacity-70", children: helperText })
] });
};
const contextValue = {
isOpen,
disabled,
size,
variant,
status,
placement: currentPlacement,
onOpenChange,
triggerProps,
contentId
};
return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: cn("relative inline-block", containerClassName), style: containerStyle, children: [
renderTrigger ? renderTrigger(isOpen, triggerProps) : /* @__PURE__ */ jsx("div", { ...triggerProps, className: cn("inline-block", className), children }),
typeof document !== "undefined" && createPortal(
/* @__PURE__ */ jsxs(
"div",
{
ref: contentRef,
className: cn("tooltip-content", className),
style: contentStyles,
role: "tooltip",
"aria-hidden": !isOpen,
...props,
children: [
showArrow && /* @__PURE__ */ jsx("div", { style: getArrowStyles() }),
renderTooltipContent()
]
}
),
document.body
)
] }) });
}
);
Tooltip.displayName = "Tooltip";
const TooltipTrigger = forwardRef(
({ className, children, ...props }, ref) => {
const { triggerProps } = useTooltipContext();
return /* @__PURE__ */ jsx("div", { ref, className: cn("inline-block", className), ...triggerProps, ...props, children });
}
);
TooltipTrigger.displayName = "TooltipTrigger";
const TooltipContent = forwardRef(
({ className, children, style, ...props }, ref) => {
const { isOpen, contentId } = useTooltipContext();
if (typeof document === "undefined") return null;
return createPortal(
/* @__PURE__ */ jsx(
"div",
{
ref,
id: contentId,
className: cn("tooltip-content", className),
style: {
position: "absolute",
zIndex: 9999,
backgroundColor: "#1f2937",
color: "#ffffff",
padding: "0.375rem 0.75rem",
borderRadius: "0.375rem",
fontSize: "0.875rem",
opacity: isOpen ? 1 : 0,
visibility: isOpen ? "visible" : "hidden",
pointerEvents: isOpen ? "auto" : "none",
transition: "all 200ms ease-in-out",
...style
},
role: "tooltip",
"aria-hidden": !isOpen,
...props,
children
}
),
document.body
);
}
);
TooltipContent.displayName = "TooltipContent";
const TreeSelectContext = createContext(void 0);
const useTreeSelectContext = () => {
const context = useContext(TreeSelectContext);
if (!context) {
throw new Error("TreeSelect compound components must be used within a TreeSelect component");
}
return context;
};
const findNode = (nodes, key) => {
for (const node of nodes) {
if (node.key === key) {
return node;
}
if (node.children) {
const found = findNode(node.children, key);
if (found) return found;
}
}
return void 0;
};
const getAllChildKeys = (node) => {
const keys = [];
if (node.children) {
for (const child of node.children) {
keys.push(child.key);
keys.push(...getAllChildKeys(child));
}
}
return keys;
};
const filterTree = (nodes, searchValue, filterFn) => {
if (!searchValue.trim()) return nodes;
const defaultFilter = (input, node) => {
const title = typeof node.title === "string" ? node.title : String(node.title);
return title.toLowerCase().includes(input.toLowerCase());
};
const filter = filterFn || defaultFilter;
const filterRecursive = (nodes2) => {
return nodes2.reduce((acc, node) => {
const matchesFilter = filter(searchValue, node);
const filteredChildren = node.children ? filterRecursive(node.children) : [];
if (matchesFilter || filteredChildren.length > 0) {
acc.push({
...node,
children: filteredChildren.length > 0 ? filteredChildren : node.children
});
}
return acc;
}, []);
};
return filterRecursive(nodes);
};
const TreeSelectInput = forwardRef(({ className, style, placeholder, onFocus, onBlur, onKeyDown, ...props }, ref) => {
const context = useTreeSelectContext();
const { searchValue, setSearchValue, setOpen, props: treeSelectProps } = context;
const handleChange = (event) => {
var _a;
const value = event.target.value;
setSearchValue(value);
(_a = treeSelectProps.onSearch) == null ? void 0 : _a.call(treeSelectProps, value);
};
const handleFocus = (event) => {
var _a;
setOpen(true);
onFocus == null ? void 0 : onFocus(event);
(_a = treeSelectProps.onFocus) == null ? void 0 : _a.call(treeSelectProps, event);
};
const handleBlur = (event) => {
var _a;
onBlur == null ? void 0 : onBlur(event);
(_a = treeSelectProps.onBlur) == null ? void 0 : _a.call(treeSelectProps, event);
};
const handleKeyDown = (event) => {
if (event.key === "Escape") {
setOpen(false);
}
onKeyDown == null ? void 0 : onKeyDown(event);
};
return /* @__PURE__ */ jsx(
"input",
{
ref,
type: "text",
value: searchValue,
onChange: handleChange,
onFocus: handleFocus,
onBlur: handleBlur,
onKeyDown: handleKeyDown,
placeholder: placeholder || treeSelectProps.placeholder,
disabled: context.disabled,
className: cn(
"flex-1 border-none outline-none bg-transparent",
"placeholder:text-gray-400",
className
),
style,
...props
}
);
});
TreeSelectInput.displayName = "TreeSelect.Input";
const TreeSelectPopup = forwardRef(({ className, style, children, ...props }, ref) => {
const context = useTreeSelectContext();
const { open, props: treeSelectProps } = context;
if (!open) return null;
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"absolute z-50 mt-1 w-full",
"bg-white border border-gray-200 rounded-md shadow-lg",
"max-h-64 overflow-auto",
treeSelectProps.popupClassName,
className
),
style: {
...treeSelectProps.popupStyle,
...treeSelectProps.dropdownStyle,
...style
},
...props,
children
}
);
});
TreeSelectPopup.displayName = "TreeSelect.Popup";
const TreeSelectNode = forwardRef(({ node, level = 0, className, style, ...props }, ref) => {
const context = useTreeSelectContext();
const {
isNodeSelected,
isNodeChecked,
isNodeHalfChecked,
isNodeExpanded,
isNodeDisabled,
selectNode,
checkNode,
toggleExpanded,
mode,
checkable,
props: treeSelectProps
} = context;
const selected = isNodeSelected(node.key);
const checked = isNodeChecked(node.key);
const halfChecked = isNodeHalfChecked(node.key);
const expanded = isNodeExpanded(node.key);
const disabled = isNodeDisabled(node);
const hasChildren = node.children && node.children.length > 0;
const handleClick = () => {
if (disabled) return;
if (mode === "single") {
selectNode(node, !selected);
}
};
const handleCheck = (event) => {
event.stopPropagation();
if (disabled) return;
checkNode(node, !checked);
};
const handleExpand = (event) => {
event.stopPropagation();
if (hasChildren || node.loading) {
toggleExpanded(node.key);
}
};
const indentSize = treeSelectProps.indentSize || "1rem";
const paddingLeft = `calc(${level} * ${indentSize})`;
if (treeSelectProps.renderNode) {
return /* @__PURE__ */ jsx("div", { ref, className, style, ...props, children: treeSelectProps.renderNode(node, {
selected,
checked,
halfChecked,
expanded,
level
}) });
}
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
"flex items-center px-2 py-1 cursor-pointer hover:bg-gray-50",
{
"bg-blue-50 text-blue-600": selected,
"text-gray-400 cursor-not-allowed": disabled,
"bg-gray-100": disabled
},
className
),
style: { paddingLeft, ...style },
onClick: handleClick,
...props,
children: [
hasChildren && /* @__PURE__ */ jsx(
"button",
{
onClick: handleExpand,
className: "mr-1 p-0.5 hover:bg-gray-200 rounded",
disabled,
children: treeSelectProps.switcherIcon ? treeSelectProps.switcherIcon({ expanded, loading: !!node.loading }) : /* @__PURE__ */ jsx("span", { className: cn("transition-transform", expanded && "rotate-90"), children: "▶" })
}
),
checkable && /* @__PURE__ */ jsx(
TreeSelectCheckbox,
{
checked,
halfChecked,
disabled,
onChange: handleCheck,
className: "mr-2"
}
),
node.icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: node.icon }),
/* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: node.title }),
node.loading && /* @__PURE__ */ jsx("span", { className: "ml-2 text-gray-400", children: "Loading..." })
]
}
);
});
TreeSelectNode.displayName = "TreeSelect.Node";
const TreeSelectCheckbox = forwardRef(({ checked, halfChecked, disabled, onChange, className, style, ...props }, _ref) => {
const context = useTreeSelectContext();
const { props: treeSelectProps } = context;
return /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"relative w-4 h-4 border border-gray-300 rounded",
{
"bg-blue-600 border-blue-600": checked,
"bg-blue-100 border-blue-300": halfChecked,
"bg-gray-100 border-gray-200 cursor-not-allowed": disabled,
"cursor-pointer": !disabled
},
className
),
style,
onClick: disabled ? void 0 : onChange,
...props,
children: [
checked && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-white text-xs", children: treeSelectProps.checkIcon || "✓" }),
halfChecked && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-blue-600 text-xs", children: "−" })
]
}
);
});
TreeSelectCheckbox.displayName = "TreeSelect.Checkbox";
const TreeSelectClearButton = forwardRef(({ className, style, onClear, ...props }, ref) => {
const context = useTreeSelectContext();
const { clearSelection, props: treeSelectProps } = context;
const handleClear = (event) => {
var _a;
event.stopPropagation();
clearSelection();
onClear == null ? void 0 : onClear();
(_a = treeSelectProps.onClear) == null ? void 0 : _a.call(treeSelectProps);
};
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
onClick: handleClear,
className: cn(
"p-1 text-gray-400 hover:text-gray-600 rounded",
"transition-colors duration-150",
className
),
style,
...props,
children: treeSelectProps.clearIcon || "×"
}
);
});
TreeSelectClearButton.displayName = "TreeSelect.ClearButton";
const TreeSelectExpandIcon = forwardRef(({ expanded, loading, className, style, ...props }, ref) => {
const context = useTreeSelectContext();
const { props: treeSelectProps } = context;
if (loading) {
return /* @__PURE__ */ jsx("span", { ref, className: cn("animate-spin", className), style, ...props, children: "⟳" });
}
if (treeSelectProps.switcherIcon) {
return /* @__PURE__ */ jsx("span", { ref, className, style, ...props, children: treeSelectProps.switcherIcon({ expanded: !!expanded, loading: !!loading }) });
}
return /* @__PURE__ */ jsx(
"span",
{
ref,
className: cn("transition-transform duration-150", expanded && "rotate-90", className),
style,
...props,
children: expanded ? treeSelectProps.collapseIcon || "▼" : treeSelectProps.expandIcon || "▶"
}
);
});
TreeSelectExpandIcon.displayName = "TreeSelect.ExpandIcon";
const TreeSelectBase = forwardRef(
({
value,
defaultValue,
treeData = [],
placeholder = "Please select",
mode = "single",
checkable = false,
checkStrategy = "SHOW_CHILD",
open,
defaultOpen = false,
expandedKeys,
defaultExpandedKeys = [],
searchValue,
defaultSearchValue = "",
disabled = false,
loading = false,
clearable = true,
variant = "bordered",
size = "md",
inline = false,
maxTagCount,
maxTagPlaceholder,
searchable = false,
filterTreeNode,
showSearch = false,
searchPlaceholder = "Search...",
loadData,
className,
style,
popupClassName,
popupStyle,
dropdownStyle,
// Styling props
borderRadius,
borderColor,
borderWidth,
borderStyle,
backgroundColor,
hoverColor,
selectedColor,
disabledColor,
focusRingColor,
fontSize,
fontWeight,
placeholderColor,
textColor,
selectedTextColor,
paddingX,
paddingY,
indentSize,
// Icons
dropdownIcon,
clearIcon,
expandIcon,
collapseIcon,
checkIcon,
switcherIcon,
// Custom Renderers
renderNode,
renderTag,
renderEmpty,
renderLoading,
// Event Handlers
onChange,
onSelect,
onDeselect,
onSearch,
onClear,
onExpand,
onLoad,
onFocus,
onBlur,
onDropdownVisibleChange,
// Accessibility
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-describedby": ariaDescribedby,
id,
children,
...props
}, ref) => {
const [internalValue, setInternalValue] = useState(defaultValue);
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const [internalExpandedKeys, setInternalExpandedKeys] = useState(defaultExpandedKeys);
const [internalSearchValue, setInternalSearchValue] = useState(defaultSearchValue);
const [selectedKeys, setSelectedKeys] = useState([]);
const [checkedKeys, setCheckedKeys] = useState([]);
const [halfCheckedKeys, setHalfCheckedKeys] = useState([]);
const [loadedKeys, setLoadedKeys] = useState([]);
const [focused, setFocused] = useState(false);
const isControlledValue = value !== void 0;
const isControlledOpen = open !== void 0;
const isControlledExpanded = expandedKeys !== void 0;
const isControlledSearch = searchValue !== void 0;
const currentValue = isControlledValue ? value : internalValue;
const currentOpen = isControlledOpen ? open : internalOpen;
const currentExpandedKeys = isControlledExpanded ? expandedKeys : internalExpandedKeys;
const currentSearchValue = isControlledSearch ? searchValue : internalSearchValue;
const getNodeByKey = useCallback(
(key) => {
return findNode(treeData, key);
},
[treeData]
);
const getSelectedNodes = useCallback(() => {
return selectedKeys.map((key) => getNodeByKey(key)).filter(Boolean);
}, [selectedKeys, getNodeByKey]);
const getCheckedNodes = useCallback(() => {
return checkedKeys.map((key) => getNodeByKey(key)).filter(Boolean);
}, [checkedKeys, getNodeByKey]);
const isNodeSelected = useCallback(
(key) => {
return selectedKeys.includes(key);
},
[selectedKeys]
);
const isNodeChecked = useCallback(
(key) => {
return checkedKeys.includes(key);
},
[checkedKeys]
);
const isNodeHalfChecked = useCallback(
(key) => {
return halfCheckedKeys.includes(key);
},
[halfCheckedKeys]
);
const isNodeExpanded = useCallback(
(key) => {
return currentExpandedKeys.includes(key);
},
[currentExpandedKeys]
);
const isNodeDisabled = useCallback(
(node) => {
return disabled || node.disabled === true;
},
[disabled]
);
const setValue = useCallback(
(newValue) => {
if (!isControlledValue) {
setInternalValue(newValue);
}
if (Array.isArray(newValue)) {
setSelectedKeys(newValue.map((v) => v.key));
} else if (newValue) {
setSelectedKeys([newValue.key]);
} else {
setSelectedKeys([]);
}
onChange == null ? void 0 : onChange(newValue, Array.isArray(newValue) ? getSelectedNodes() : getSelectedNodes()[0]);
},
[isControlledValue, onChange, getSelectedNodes]
);
const setOpen = useCallback(
(isOpen) => {
if (!isControlledOpen) {
setInternalOpen(isOpen);
}
onDropdownVisibleChange == null ? void 0 : onDropdownVisibleChange(isOpen);
},
[isControlledOpen, onDropdownVisibleChange]
);
const setSearchValue = useCallback(
(search) => {
if (!isControlledSearch) {
setInternalSearchValue(search);
}
onSearch == null ? void 0 : onSearch(search);
},
[isControlledSearch, onSearch]
);
const setExpandedKeys = useCallback(
(keys) => {
if (!isControlledExpanded) {
setInternalExpandedKeys(keys);
}
},
[isControlledExpanded]
);
const toggleExpanded = useCallback(
async (key) => {
const node = getNodeByKey(key);
if (!node) return;
const isExpanded = currentExpandedKeys.includes(key);
const newExpandedKeys = isExpanded ? currentExpandedKeys.filter((k) => k !== key) : [...currentExpandedKeys, key];
setExpandedKeys(newExpandedKeys);
onExpand == null ? void 0 : onExpand(newExpandedKeys, { expanded: !isExpanded, node });
if (!isExpanded && loadData && !loadedKeys.includes(key)) {
try {
await loadData(node);
setLoadedKeys((prev) => [...prev, key]);
onLoad == null ? void 0 : onLoad(loadedKeys, { event: "load", node });
} catch (error) {
console.error("Failed to load node data:", error);
}
}
},
[currentExpandedKeys, getNodeByKey, setExpandedKeys, onExpand, loadData, loadedKeys, onLoad]
);
const selectNode = useCallback(
(node, selected) => {
if (isNodeDisabled(node)) return;
if (mode === "single") {
const newValue = selected ? { key: node.key, title: node.title, value: node.value } : void 0;
setValue(newValue);
} else {
const currentValues = Array.isArray(currentValue) ? currentValue : [];
const newValues = selected ? [...currentValues, { key: node.key, title: node.title, value: node.value }] : currentValues.filter((v) => v.key !== node.key);
setValue(newValues);
}
onSelect == null ? void 0 : onSelect(selectedKeys, {
selected,
selectedNodes: getSelectedNodes(),
node,
event: {}
// Placeholder for event
});
},
[mode, currentValue, setValue, selectedKeys, getSelectedNodes, onSelect, isNodeDisabled]
);
const checkNode = useCallback(
(node, checked) => {
if (isNodeDisabled(node)) return;
const updateCheckedKeys = (keys, nodeKey, isChecked) => {
return isChecked ? [...keys.filter((k) => k !== nodeKey), nodeKey] : keys.filter((k) => k !== nodeKey);
};
let newCheckedKeys = updateCheckedKeys(checkedKeys, node.key, checked);
if (checked) {
const childKeys = getAllChildKeys(node);
childKeys.forEach((childKey) => {
newCheckedKeys = updateCheckedKeys(newCheckedKeys, childKey, true);
});
} else {
const childKeys = getAllChildKeys(node);
childKeys.forEach((childKey) => {
newCheckedKeys = updateCheckedKeys(newCheckedKeys, childKey, false);
});
}
setCheckedKeys(newCheckedKeys);
const checkedNodes = newCheckedKeys.map((key) => getNodeByKey(key)).filter(Boolean);
const checkedValues = checkedNodes.map((n) => ({
key: n.key,
title: n.title,
value: n.value
}));
setValue(checkedValues);
},
[checkedKeys, getNodeByKey, setValue, isNodeDisabled]
);
const clearSelection = useCallback(() => {
setValue(void 0);
setSelectedKeys([]);
setCheckedKeys([]);
setHalfCheckedKeys([]);
}, [setValue]);
const filteredTreeData = useMemo(() => {
return filterTree(treeData, currentSearchValue, filterTreeNode);
}, [treeData, currentSearchValue, filterTreeNode]);
const renderTreeNodes = useCallback(
(nodes, level = 0) => {
return nodes.map((node) => {
const isExpanded = isNodeExpanded(node.key);
const hasChildren = node.children && node.children.length > 0;
return /* @__PURE__ */ jsxs(React.Fragment, { children: [
/* @__PURE__ */ jsx(TreeSelectNode, { node, level }),
hasChildren && isExpanded && renderTreeNodes(node.children, level + 1)
] }, node.key);
});
},
[isNodeExpanded]
);
const contextValue = {
// State
value: currentValue,
treeData: filteredTreeData,
expandedKeys: currentExpandedKeys,
searchValue: currentSearchValue,
selectedKeys,
checkedKeys,
halfCheckedKeys,
loadedKeys,
open: currentOpen,
focused,
mode,
checkable,
checkStrategy,
// Styling
variant,
size,
disabled,
loading,
// Methods
setValue,
setOpen,
setSearchValue,
setExpandedKeys,
toggleExpanded,
selectNode,
checkNode,
clearSelection,
// Node utilities
getNodeByKey,
getSelectedNodes,
getCheckedNodes,
isNodeSelected,
isNodeChecked,
isNodeHalfChecked,
isNodeExpanded,
isNodeDisabled,
// Props
props: {
value,
defaultValue,
treeData,
placeholder,
mode,
checkable,
checkStrategy,
open,
defaultOpen,
expandedKeys,
defaultExpandedKeys,
searchValue,
defaultSearchValue,
disabled,
loading,
clearable,
variant,
size,
inline,
maxTagCount,
maxTagPlaceholder,
searchable,
filterTreeNode,
showSearch,
searchPlaceholder,
loadData,
className,
style,
popupClassName,
popupStyle,
dropdownStyle,
borderRadius,
borderColor,
borderWidth,
borderStyle,
backgroundColor,
hoverColor,
selectedColor,
disabledColor,
focusRingColor,
fontSize,
fontWeight,
placeholderColor,
textColor,
selectedTextColor,
paddingX,
paddingY,
indentSize,
dropdownIcon,
clearIcon,
expandIcon,
collapseIcon,
checkIcon,
switcherIcon,
renderNode,
renderTag,
renderEmpty,
renderLoading,
onChange,
onSelect,
onDeselect,
onSearch,
onClear,
onExpand,
onLoad,
onFocus,
onBlur,
onDropdownVisibleChange,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-describedby": ariaDescribedby,
id
}
};
const sizeStyles = {
sm: "text-sm px-2 py-1",
md: "text-base px-3 py-2",
lg: "text-lg px-4 py-3"
};
const variantStyles = {
bordered: "border border-gray-300 rounded-md",
minimal: "border-b border-gray-300",
"inline-tree": "border-none",
"popup-tree": "border border-gray-300 rounded-md",
searchable: "border border-gray-300 rounded-md",
"multi-select": "border border-gray-300 rounded-md min-h-[2.5rem]"
};
const customStyles = {
borderRadius,
borderColor,
borderWidth,
borderStyle,
backgroundColor,
color: textColor,
fontSize,
fontWeight,
padding: paddingX || paddingY ? `${paddingY || "0.5rem"} ${paddingX || "0.75rem"}` : void 0,
...style
};
const renderSelectedValues = () => {
if (!currentValue) {
return /* @__PURE__ */ jsx("span", { className: "text-gray-400", style: { color: placeholderColor }, children: placeholder });
}
if (Array.isArray(currentValue)) {
const visibleValues = maxTagCount && currentValue.length > maxTagCount ? currentValue.slice(0, maxTagCount) : currentValue;
const hiddenCount = maxTagCount && currentValue.length > maxTagCount ? currentValue.length - maxTagCount : 0;
return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
visibleValues.map((val) => {
if (renderTag) {
return renderTag({
value: val,
onClose: () => {
const newValues = currentValue.filter((v) => v.key !== val.key);
setValue(newValues.length > 0 ? newValues : void 0);
},
disabled
});
}
return /* @__PURE__ */ jsxs(
"span",
{
className: "inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm",
children: [
val.title,
!disabled && /* @__PURE__ */ jsx(
"button",
{
onClick: (e) => {
e.stopPropagation();
const newValues = currentValue.filter((v) => v.key !== val.key);
setValue(newValues.length > 0 ? newValues : void 0);
},
className: "ml-1 text-blue-600 hover:text-blue-800",
children: "×"
}
)
]
},
val.key
);
}),
hiddenCount > 0 && /* @__PURE__ */ jsx("span", { className: "text-gray-500 text-sm", children: maxTagPlaceholder ? maxTagPlaceholder(currentValue.slice(maxTagCount)) : `+${hiddenCount} more` })
] });
}
return /* @__PURE__ */ jsx("span", { style: { color: selectedTextColor }, children: currentValue.title });
};
const handleContainerClick = () => {
if (!disabled) {
setOpen(!currentOpen);
}
};
const handleKeyDown = (event) => {
if (disabled) return;
switch (event.key) {
case "Escape":
setOpen(false);
break;
case "Enter":
case " ":
event.preventDefault();
setOpen(!currentOpen);
break;
case "ArrowDown":
event.preventDefault();
if (!currentOpen) {
setOpen(true);
}
break;
case "ArrowUp":
event.preventDefault();
break;
}
};
if (inline) {
return /* @__PURE__ */ jsx(TreeSelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("w-full", className),
style: customStyles,
role: "tree",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-describedby": ariaDescribedby,
id,
...props,
children: children || /* @__PURE__ */ jsx("div", { className: "space-y-1", children: filteredTreeData.length > 0 ? renderTreeNodes(filteredTreeData) : /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-gray-500", children: renderEmpty ? renderEmpty() : "No data" }) })
}
) });
}
return /* @__PURE__ */ jsx(TreeSelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
/* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
"flex items-center cursor-pointer relative",
sizeStyles[size],
variantStyles[variant],
{
"bg-gray-100 cursor-not-allowed": disabled,
"ring-2 ring-blue-500 ring-opacity-50": focused && focusRingColor,
"hover:border-gray-400": !disabled && hoverColor
},
className
),
style: customStyles,
onClick: handleContainerClick,
onKeyDown: handleKeyDown,
tabIndex: disabled ? -1 : 0,
role: "combobox",
"aria-expanded": currentOpen,
"aria-haspopup": "tree",
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
"aria-describedby": ariaDescribedby,
id,
onFocus: () => setFocused(true),
onBlur: () => setFocused(false),
...props,
children: [
(searchable || showSearch) && currentOpen ? /* @__PURE__ */ jsx(TreeSelectInput, { placeholder: searchPlaceholder, className: "flex-1" }) : /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: renderSelectedValues() }),
clearable && currentValue && !disabled && /* @__PURE__ */ jsx(TreeSelectClearButton, { className: "mr-2" }),
/* @__PURE__ */ jsx("span", { className: cn("text-gray-400 transition-transform", currentOpen && "rotate-180"), children: dropdownIcon || "▼" })
]
}
),
children ? children : /* @__PURE__ */ jsx(TreeSelectPopup, { children: loading ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-gray-500", children: renderLoading ? renderLoading() : "Loading..." }) : filteredTreeData.length > 0 ? /* @__PURE__ */ jsx("div", { className: "py-1", children: renderTreeNodes(filteredTreeData) }) : /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-gray-500", children: renderEmpty ? renderEmpty() : "No data" }) })
] }) });
}
);
TreeSelectBase.displayName = "TreeSelect";
const TreeSelectWithSubComponents = TreeSelectBase;
TreeSelectWithSubComponents.Input = TreeSelectInput;
TreeSelectWithSubComponents.Popup = TreeSelectPopup;
TreeSelectWithSubComponents.Node = TreeSelectNode;
TreeSelectWithSubComponents.Checkbox = TreeSelectCheckbox;
TreeSelectWithSubComponents.ClearButton = TreeSelectClearButton;
TreeSelectWithSubComponents.ExpandIcon = TreeSelectExpandIcon;
const SplitterContext = createContext(null);
const useSplitterContext = () => {
const context = useContext(SplitterContext);
if (!context) {
throw new Error("Splitter components must be used within a Splitter");
}
return context;
};
const SplitterComponent = forwardRef(
({
direction = "horizontal",
sizes: controlledSizes,
initialSizes = [50, 50],
minSize = 10,
maxSize = 90,
controlled = false,
variant = "basic",
handleSize = "md",
onResize,
onDragStart,
onDragEnd,
className,
style,
borderWidth,
borderColor,
borderStyle,
borderRadius,
animateResize = true,
transitionDuration = "150ms",
persistSizes = false,
storageKey = "splitter-sizes",
children,
...props
}, ref) => {
const [internalSizes, setInternalSizes] = useState(() => {
if (controlled) return controlledSizes || initialSizes;
if (persistSizes && typeof window !== "undefined") {
try {
const saved = localStorage.getItem(storageKey);
if (saved) {
const parsed = JSON.parse(saved);
if (Array.isArray(parsed) && parsed.length === initialSizes.length) {
return parsed;
}
}
} catch (error) {
console.warn("Failed to load splitter sizes from localStorage:", error);
}
}
return initialSizes;
});
const [isDragging, setIsDragging] = useState(false);
const [activeHandleIndex, setActiveHandleIndex] = useState(null);
const currentSizes = controlled ? controlledSizes || internalSizes : internalSizes;
useEffect(() => {
if (persistSizes && !controlled && typeof window !== "undefined") {
try {
localStorage.setItem(storageKey, JSON.stringify(currentSizes));
} catch (error) {
console.warn("Failed to save splitter sizes to localStorage:", error);
}
}
}, [currentSizes, persistSizes, controlled, storageKey]);
useEffect(() => {
if (controlled && controlledSizes) {
setInternalSizes(controlledSizes);
}
}, [controlled, controlledSizes]);
const setSizes = useCallback(
(newSizes) => {
if (!controlled) {
setInternalSizes(newSizes);
}
onResize == null ? void 0 : onResize(activeHandleIndex ?? 0, newSizes);
},
[controlled, onResize, activeHandleIndex]
);
const contextValue = {
direction,
sizes: currentSizes,
setSizes,
isDragging,
setIsDragging,
activeHandleIndex,
setActiveHandleIndex,
minSize,
maxSize,
onResize,
onDragStart,
onDragEnd
};
const containerStyle = {
display: "flex",
flexDirection: direction === "horizontal" ? "row" : "column",
width: "100%",
height: "100%",
borderWidth: borderWidth ? `${borderWidth}px` : void 0,
borderColor,
borderStyle,
borderRadius: borderRadius ? `${borderRadius}px` : void 0,
transition: animateResize ? `all ${transitionDuration} ease-in-out` : void 0,
overflow: "hidden",
position: "relative",
...style
};
return /* @__PURE__ */ jsx(SplitterContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn(
"splitter",
`splitter-${direction}`,
`splitter-${variant}`,
`splitter-handle-${handleSize}`,
className
),
style: containerStyle,
role: "separator",
"aria-orientation": direction,
...props,
children
}
) });
}
);
SplitterComponent.displayName = "Splitter";
const SplitterPane = forwardRef(
({
index,
children,
className,
style,
minSize: paneMinSize,
maxSize: paneMaxSize,
collapsed = false,
...props
}, ref) => {
const { direction, sizes } = useSplitterContext();
const paneStyle = {
flex: collapsed ? "0 0 0px" : `0 0 ${sizes[index] || 0}%`,
minWidth: direction === "horizontal" ? `${paneMinSize || 0}px` : void 0,
minHeight: direction === "vertical" ? `${paneMinSize || 0}px` : void 0,
maxWidth: direction === "horizontal" ? `${paneMaxSize || 100}%` : void 0,
maxHeight: direction === "vertical" ? `${paneMaxSize || 100}%` : void 0,
overflow: "hidden",
position: "relative",
...style
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
className: cn("splitter-pane", className),
style: paneStyle,
"data-index": index,
"data-collapsed": collapsed,
...props,
children
}
);
}
);
SplitterPane.displayName = "SplitterPane";
const SplitterHandle = forwardRef(
({
index,
children,
className,
style,
icon,
disabled = false,
"aria-label": ariaLabel,
...props
}, _ref) => {
const {
direction,
isDragging,
setIsDragging,
activeHandleIndex,
setActiveHandleIndex,
sizes,
setSizes,
onDragStart,
onDragEnd
} = useSplitterContext();
const handleRef = useRef(null);
const startPos = useRef(0);
const startSizes = useRef([]);
const isActiveHandle = activeHandleIndex === index;
const handleMouseDown = useCallback(
(event) => {
if (disabled) return;
event.preventDefault();
event.stopPropagation();
document.body.style.userSelect = "none";
document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
setIsDragging(true);
setActiveHandleIndex(index);
onDragStart == null ? void 0 : onDragStart(index);
const pos = direction === "horizontal" ? event.clientX : event.clientY;
startPos.current = pos;
startSizes.current = [...sizes];
const handleMouseMove = (moveEvent) => {
var _a;
moveEvent.preventDefault();
moveEvent.stopPropagation();
const currentPos = direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
const delta = currentPos - startPos.current;
const splitterContainer = (_a = handleRef.current) == null ? void 0 : _a.closest(".splitter");
if (splitterContainer) {
const containerRect = splitterContainer.getBoundingClientRect();
const containerSize = direction === "horizontal" ? containerRect.width : containerRect.height;
const deltaPercent = delta / containerSize * 100;
const newSizes = [...startSizes.current];
const currentSize = newSizes[index];
const nextSize = newSizes[index + 1];
if (currentSize !== void 0 && nextSize !== void 0) {
const newCurrentSize = Math.max(10, Math.min(90, currentSize + deltaPercent));
const newNextSize = 100 - newCurrentSize;
newSizes[index] = newCurrentSize;
newSizes[index + 1] = newNextSize;
setSizes(newSizes);
}
}
};
const handleMouseUp = (upEvent) => {
upEvent.preventDefault();
upEvent.stopPropagation();
setIsDragging(false);
setActiveHandleIndex(null);
onDragEnd == null ? void 0 : onDragEnd(index);
document.body.style.userSelect = "";
document.body.style.cursor = "";
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("mouseup", handleMouseUp);
};
document.addEventListener("mousemove", handleMouseMove, { passive: false });
document.addEventListener("mouseup", handleMouseUp, { passive: false });
},
[
disabled,
direction,
index,
setIsDragging,
setActiveHandleIndex,
onDragStart,
onDragEnd,
sizes,
setSizes
]
);
const handleKeyDown = useCallback(
(event) => {
if (disabled) return;
const step = event.shiftKey ? 10 : 1;
let delta = 0;
switch (event.key) {
case "ArrowLeft":
if (direction === "horizontal") delta = -step;
break;
case "ArrowRight":
if (direction === "horizontal") delta = step;
break;
case "ArrowUp":
if (direction === "vertical") delta = -step;
break;
case "ArrowDown":
if (direction === "vertical") delta = step;
break;
default:
return;
}
if (delta !== 0) {
event.preventDefault();
const newSizes = [...sizes];
const currentSize = newSizes[index];
const nextSize = newSizes[index + 1];
if (currentSize && nextSize) {
const newCurrentSize = Math.max(10, Math.min(90, currentSize + delta));
const newNextSize = 100 - newCurrentSize;
newSizes[index] = newCurrentSize;
newSizes[index + 1] = newNextSize;
setSizes(newSizes);
}
}
},
[disabled, direction, index, sizes, setSizes]
);
const handleStyle = {
position: "relative",
backgroundColor: isDragging ? "#3b82f6" : "#e5e7eb",
cursor: direction === "horizontal" ? "col-resize" : "row-resize",
userSelect: "none",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "background-color 150ms ease-in-out",
width: direction === "horizontal" ? "12px" : "100%",
height: direction === "vertical" ? "12px" : "100%",
minWidth: direction === "horizontal" ? "12px" : void 0,
minHeight: direction === "vertical" ? "12px" : void 0,
zIndex: 10,
border: isActiveHandle ? "2px solid #3b82f6" : "1px solid #d1d5db",
boxShadow: isDragging ? "0 0 0 2px rgba(59, 130, 246, 0.2)" : "none",
flexShrink: 0,
...style
};
const defaultIcon = direction === "horizontal" ? /* @__PURE__ */ jsx("div", { className: "w-1 h-6 bg-current opacity-50" }) : /* @__PURE__ */ jsx("div", { className: "h-1 w-6 bg-current opacity-50" });
return /* @__PURE__ */ jsx(
"div",
{
ref: handleRef,
className: cn(
"splitter-handle",
`splitter-handle-${direction}`,
isDragging && "splitter-handle-dragging",
disabled && "splitter-handle-disabled",
className
),
style: handleStyle,
role: "separator",
"aria-orientation": direction,
"aria-label": ariaLabel || `Resize pane ${index + 1}`,
tabIndex: disabled ? -1 : 0,
onMouseDown: handleMouseDown,
onKeyDown: handleKeyDown,
...props,
children: children || icon || defaultIcon
}
);
}
);
SplitterHandle.displayName = "SplitterHandle";
const Splitter = Object.assign(SplitterComponent, {
Pane: memo(SplitterPane),
Handle: memo(SplitterHandle)
});
const UploadContext = createContext(null);
const useUploadContext = () => {
const context = useContext(UploadContext);
if (!context) {
throw new Error("useUploadContext must be used within an Upload component");
}
return context;
};
const generateFileId = () => Math.random().toString(36).substr(2, 9);
const formatFileSize = (bytes) => {
if (bytes === 0) return "0 Bytes";
const k = 1024;
const sizes = ["Bytes", "KB", "MB", "GB"];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
};
const Dropzone = forwardRef(
({ children, className, style, ...props }, ref) => {
const { props: uploadProps, isDragging, setIsDragging, addFiles } = useUploadContext();
const inputRef = useRef(null);
const handleDragEnter = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
if (!uploadProps.disabled) {
setIsDragging(true);
}
},
[uploadProps.disabled, setIsDragging]
);
const handleDragLeave = useCallback(
(e) => {
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
},
[setIsDragging]
);
const handleDragOver = useCallback((e) => {
e.preventDefault();
e.stopPropagation();
}, []);
const handleDrop = useCallback(
(e) => {
var _a;
e.preventDefault();
e.stopPropagation();
setIsDragging(false);
if (!uploadProps.disabled) {
const droppedFiles = Array.from(e.dataTransfer.files);
addFiles(droppedFiles);
(_a = uploadProps.onDrop) == null ? void 0 : _a.call(uploadProps, droppedFiles);
}
},
[uploadProps, setIsDragging, addFiles]
);
const handleClick = useCallback(() => {
var _a;
if (!uploadProps.disabled) {
(_a = inputRef.current) == null ? void 0 : _a.click();
}
}, [uploadProps.disabled]);
const handleFileChange = useCallback(
(e) => {
const selectedFiles = Array.from(e.target.files || []);
addFiles(selectedFiles);
if (inputRef.current) {
inputRef.current.value = "";
}
},
[addFiles]
);
const dropzoneClasses = cn(
"upload-dropzone",
"relative cursor-pointer transition-all",
{
"opacity-50 cursor-not-allowed": uploadProps.disabled,
"ring-2 ring-blue-500 ring-offset-2": isDragging
},
className
);
const mergedStyle = {
...uploadProps.dropzoneStyle,
...style,
transitionDuration: typeof uploadProps.transitionDuration === "number" ? `${uploadProps.transitionDuration}ms` : uploadProps.transitionDuration || "200ms"
};
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: dropzoneClasses,
style: mergedStyle,
onDragEnter: handleDragEnter,
onDragLeave: handleDragLeave,
onDragOver: handleDragOver,
onDrop: handleDrop,
onClick: handleClick,
role: "button",
tabIndex: uploadProps.disabled ? -1 : 0,
"aria-disabled": uploadProps.disabled,
...props,
children: [
/* @__PURE__ */ jsx(
"input",
{
ref: inputRef,
type: "file",
className: "hidden",
accept: uploadProps.accept,
multiple: uploadProps.multiple,
disabled: uploadProps.disabled,
onChange: handleFileChange,
"aria-label": "File upload"
}
),
uploadProps.renderDropzone ? uploadProps.renderDropzone(isDragging) : children
]
}
);
}
);
Dropzone.displayName = "Upload.Dropzone";
const Progress = forwardRef(
({ file, className, style, ...props }, ref) => {
const { props: uploadProps } = useUploadContext();
if (uploadProps.renderProgress) {
return /* @__PURE__ */ jsx(Fragment, { children: uploadProps.renderProgress(file) });
}
const progress = file.progress || 0;
const progressClasses = cn(
"upload-progress",
"relative w-full h-2 bg-gray-200 rounded-full overflow-hidden",
className
);
const mergedStyle = {
...uploadProps.progressStyle,
...style
};
return /* @__PURE__ */ jsx("div", { ref, className: progressClasses, style: mergedStyle, ...props, children: /* @__PURE__ */ jsx(
"div",
{
className: "absolute left-0 top-0 h-full bg-blue-500 transition-all",
style: {
width: `${progress}%`,
transitionDuration: typeof uploadProps.transitionDuration === "number" ? `${uploadProps.transitionDuration}ms` : uploadProps.transitionDuration || "200ms"
}
}
) });
}
);
Progress.displayName = "Upload.Progress";
const Preview = forwardRef(
({ file, className, style, ...props }, ref) => {
var _a;
const { props: uploadProps } = useUploadContext();
const [preview, setPreview] = useState(null);
React.useEffect(() => {
const actualFile = file.file || file;
if (actualFile.type && actualFile.type.startsWith("image/")) {
const reader = new FileReader();
reader.onloadend = () => {
setPreview(reader.result);
};
reader.readAsDataURL(actualFile);
}
}, [file]);
const previewClasses = cn(
"upload-preview",
"relative w-20 h-20 rounded-lg overflow-hidden bg-gray-100",
className
);
const mergedStyle = {
...uploadProps.previewStyle,
...style
};
return /* @__PURE__ */ jsx("div", { ref, className: previewClasses, style: mergedStyle, ...props, children: preview ? /* @__PURE__ */ jsx(
"img",
{
src: preview,
alt: ((_a = file.file) == null ? void 0 : _a.name) || file.name,
className: "w-full h-full object-cover"
}
) : /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx(
"svg",
{
className: "w-8 h-8 text-gray-400",
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
}
)
}
) }) });
}
);
Preview.displayName = "Upload.Preview";
const FileList = forwardRef(
({ children, className, style, ...props }, ref) => {
const { files, removeFile, props: uploadProps } = useUploadContext();
const fileListClasses = cn("upload-file-list", "space-y-2", className);
const mergedStyle = {
...uploadProps.fileListStyle,
...style
};
const handleRemove = (fileId, file) => {
var _a;
removeFile(fileId);
const actualFile = file.file || file;
(_a = uploadProps.onRemoveFile) == null ? void 0 : _a.call(uploadProps, actualFile);
};
return /* @__PURE__ */ jsxs("div", { ref, className: fileListClasses, style: mergedStyle, ...props, children: [
files.map((file, index) => {
var _a, _b;
return /* @__PURE__ */ jsx("div", { className: "upload-file-item", children: uploadProps.renderFileItem ? uploadProps.renderFileItem(file, index) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-3 bg-gray-50 rounded-lg", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3", children: [
/* @__PURE__ */ jsx(Preview, { file, className: "w-10 h-10" }),
/* @__PURE__ */ jsxs("div", { children: [
/* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-gray-900", children: ((_a = file.file) == null ? void 0 : _a.name) || file.name }),
/* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: formatFileSize(((_b = file.file) == null ? void 0 : _b.size) || file.size) })
] })
] }),
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
file.status === "uploading" && /* @__PURE__ */ jsx(Progress, { file, className: "w-20" }),
file.status === "success" && /* @__PURE__ */ jsx(
"svg",
{
className: "w-5 h-5",
style: { color: uploadProps.successIconColor || "#10b981" },
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M5 13l4 4L19 7"
}
)
}
),
file.status === "error" && /* @__PURE__ */ jsx(
"svg",
{
className: "w-5 h-5",
style: { color: uploadProps.errorIconColor || "#ef4444" },
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
}
)
}
),
/* @__PURE__ */ jsx(
"button",
{
onClick: () => handleRemove(file.id, file),
className: "p-1 hover:bg-gray-200 rounded transition-colors",
disabled: uploadProps.disabled,
children: /* @__PURE__ */ jsx(
"svg",
{
className: "w-4 h-4",
style: { color: uploadProps.deleteIconColor || "#6b7280" },
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}
)
}
)
}
)
] })
] }) }, file.id);
}),
children
] });
}
);
FileList.displayName = "Upload.FileList";
const Button = forwardRef(
({ children, className, style, ...props }, ref) => {
const { props: uploadProps } = useUploadContext();
const inputRef = useRef(null);
const handleClick = useCallback(() => {
var _a;
if (!uploadProps.disabled) {
(_a = inputRef.current) == null ? void 0 : _a.click();
}
}, [uploadProps.disabled]);
const { addFiles } = useUploadContext();
const handleFileChange = useCallback(
(e) => {
const selectedFiles = Array.from(e.target.files || []);
addFiles(selectedFiles);
if (inputRef.current) {
inputRef.current.value = "";
}
},
[addFiles]
);
const buttonClasses = cn(
"upload-button",
"px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors",
{
"opacity-50 cursor-not-allowed": uploadProps.disabled
},
className
);
const mergedStyle = {
...uploadProps.buttonStyle,
...style,
transitionDuration: typeof uploadProps.transitionDuration === "number" ? `${uploadProps.transitionDuration}ms` : uploadProps.transitionDuration || "200ms"
};
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"input",
{
ref: inputRef,
type: "file",
className: "hidden",
accept: uploadProps.accept,
multiple: uploadProps.multiple,
disabled: uploadProps.disabled,
onChange: handleFileChange,
"aria-label": "File upload"
}
),
/* @__PURE__ */ jsx(
"button",
{
ref,
className: buttonClasses,
style: mergedStyle,
onClick: handleClick,
disabled: uploadProps.disabled,
type: "button",
...props,
children: children || "Upload Files"
}
)
] });
}
);
Button.displayName = "Upload.Button";
const UploadRoot = forwardRef((props, ref) => {
const {
files: controlledFiles,
onChange,
variant = "default",
size = "md",
status = "default",
className,
style,
children,
label,
helperText,
emptyStateMessage,
maxFiles,
maxSize,
onUploadStart,
onUploadProgress,
onUploadComplete,
onError,
...restProps
} = props;
const [internalFiles, setInternalFiles] = useState([]);
const [isDragging, setIsDragging] = useState(false);
const files = useMemo(() => {
if (controlledFiles) {
return controlledFiles.map((file) => {
const existing = internalFiles.find((f) => f.file === file);
return existing || {
id: generateFileId(),
file,
status: "pending"
};
});
}
return internalFiles;
}, [controlledFiles, internalFiles]);
const setFiles = useCallback(
(newFiles) => {
if (onChange) {
onChange(newFiles.map((f) => f.file));
} else {
setInternalFiles(newFiles);
}
},
[onChange]
);
const addFiles = useCallback(
(newFiles) => {
let filesToAdd = newFiles;
if (maxFiles && files.length + filesToAdd.length > maxFiles) {
filesToAdd = filesToAdd.slice(0, maxFiles - files.length);
onError == null ? void 0 : onError(new Error(`Maximum ${maxFiles} files allowed`));
}
filesToAdd = filesToAdd.filter((file) => {
if (maxSize && file.size > maxSize) {
onError == null ? void 0 : onError(
new Error(`File ${file.name} exceeds maximum size of ${formatFileSize(maxSize)}`),
file
);
return false;
}
return true;
});
const filesWithIds = filesToAdd.map((file) => ({
id: generateFileId(),
file,
status: "pending"
}));
setFiles([...files, ...filesWithIds]);
filesWithIds.forEach((fileWithProgress) => {
onUploadStart == null ? void 0 : onUploadStart(fileWithProgress.file);
});
},
[files, maxFiles, maxSize, onError, onUploadStart, setFiles]
);
const removeFile = useCallback(
(fileId) => {
setFiles(files.filter((f) => f.id !== fileId));
},
[files, setFiles]
);
const updateFileProgress = useCallback(
(fileId, progress) => {
setFiles(
files.map((f) => f.id === fileId ? { ...f, progress, status: "uploading" } : f)
);
const fileWithProgress = files.find((f) => f.id === fileId);
if (fileWithProgress) {
onUploadProgress == null ? void 0 : onUploadProgress(fileWithProgress.file, progress);
}
},
[files, setFiles, onUploadProgress]
);
const updateFileStatus = useCallback(
(fileId, status2, error) => {
setFiles(files.map((f) => f.id === fileId ? { ...f, status: status2, error } : f));
const fileWithProgress = files.find((f) => f.id === fileId);
if (fileWithProgress && status2 === "success") {
onUploadComplete == null ? void 0 : onUploadComplete(fileWithProgress.file);
}
},
[files, setFiles, onUploadComplete]
);
const contextValue = {
files,
setFiles,
addFiles,
removeFile,
updateFileProgress,
updateFileStatus,
props,
isDragging,
setIsDragging
};
const variantClasses = {
default: "border-2 border-gray-300",
bordered: "border-2 border-solid border-gray-400",
dashed: "border-2 border-dashed border-gray-400",
card: "border border-gray-200 shadow-sm bg-white",
ghost: "border-0 bg-transparent"
};
const sizeClasses = {
sm: "p-4 text-sm",
md: "p-6 text-base",
lg: "p-8 text-lg"
};
const statusClasses = {
default: "",
success: "border-green-500 bg-green-50",
warning: "border-yellow-500 bg-yellow-50",
error: "border-red-500 bg-red-50"
};
const uploadClasses = cn(
"upload",
"rounded-lg transition-all",
variantClasses[variant],
sizeClasses[size],
statusClasses[status],
{
"opacity-50": props.disabled
},
className
);
const mergedStyle = {
borderWidth: props.borderWidth,
borderColor: props.borderColor,
borderStyle: props.borderStyle,
borderRadius: props.borderRadius,
fontSize: props.fontSize,
fontWeight: props.fontWeight,
fontFamily: props.fontFamily,
color: props.textColor,
backgroundColor: props.backgroundColor,
boxShadow: props.boxShadow,
padding: props.padding,
paddingLeft: props.paddingX,
paddingRight: props.paddingX,
paddingTop: props.paddingY,
paddingBottom: props.paddingY,
margin: props.margin,
gap: props.gap,
transitionDuration: typeof props.transitionDuration === "number" ? `${props.transitionDuration}ms` : props.transitionDuration || "200ms",
...style
};
return /* @__PURE__ */ jsx(UploadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref, className: uploadClasses, style: mergedStyle, ...restProps, children: [
label && /* @__PURE__ */ jsxs("label", { className: "block mb-2 font-medium text-gray-700", children: [
label,
props.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
] }),
children || /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(Dropzone, { className: "border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors", children: [
/* @__PURE__ */ jsx(
"svg",
{
className: "w-12 h-12 mx-auto mb-4",
style: { color: props.uploadIconColor || "#9ca3af" },
fill: "none",
stroke: "currentColor",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
}
)
}
),
/* @__PURE__ */ jsx("p", { className: "text-gray-600 mb-2", children: emptyStateMessage || "Drag and drop files here, or click to select" }),
/* @__PURE__ */ jsx(Button, { children: "Select Files" })
] }),
files.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(FileList, {}) })
] }),
helperText && /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-gray-500", children: helperText })
] }) });
});
UploadRoot.displayName = "Upload";
const Upload = Object.assign(UploadRoot, {
Dropzone,
Preview,
Progress,
FileList,
Button
});
const DatePickerContext = createContext(null);
const useDatePicker = () => {
const context = useContext(DatePickerContext);
if (!context) {
throw new Error("DatePicker compound components must be used within a DatePicker component");
}
return context;
};
const formatDateIntl = (date, locale) => {
const options = {
year: "numeric",
month: "2-digit",
day: "2-digit"
};
if (locale.locale) {
return new Intl.DateTimeFormat(locale.locale, options).format(date);
}
return date.toLocaleDateString("en-US", options);
};
const parseInputDate = (dateString) => {
if (!dateString.trim()) return null;
try {
const date = new Date(dateString);
if (!isNaN(date.getTime())) {
return date;
}
} catch {
return null;
}
return null;
};
const isDateDisabled = (date, config) => {
if (!config) return false;
if (config.before && date < config.before) return true;
if (config.after && date > config.after) return true;
if (config.dates) {
const dateString = date.toDateString();
if (config.dates.some((d) => d.toDateString() === dateString)) return true;
}
if (config.days) {
const dayOfWeek = date.getDay();
if (config.days.includes(dayOfWeek)) return true;
}
if (config.custom) {
return config.custom(date);
}
return false;
};
const isSameDay = (date1, date2) => {
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
};
const isSameMonth = (date1, date2) => {
return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth();
};
const addMonths = (date, months) => {
const newDate = new Date(date);
newDate.setMonth(newDate.getMonth() + months);
return newDate;
};
const addYears = (date, years) => {
const newDate = new Date(date);
newDate.setFullYear(newDate.getFullYear() + years);
return newDate;
};
const getMonthDays = (date, firstDayOfWeek = 0) => {
const year = date.getFullYear();
const month = date.getMonth();
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
const startDate = new Date(firstDay);
const dayOfWeek = (firstDay.getDay() - firstDayOfWeek + 7) % 7;
startDate.setDate(startDate.getDate() - dayOfWeek);
const endDate = new Date(lastDay);
const endDayOfWeek = (lastDay.getDay() - firstDayOfWeek + 7) % 7;
endDate.setDate(endDate.getDate() + (6 - endDayOfWeek));
const days = [];
const currentDate = new Date(startDate);
while (currentDate <= endDate) {
days.push(new Date(currentDate));
currentDate.setDate(currentDate.getDate() + 1);
}
return days;
};
const DatePickerInput = memo(
forwardRef(
({ className, calendarIcon, clearIcon, onCalendarClick, onClearClick, ...props }, ref) => {
const {
variant,
size,
status,
inputId,
clearable,
isOpen,
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
placeholderColor,
backgroundColor,
boxShadow,
padding,
paddingX,
paddingY
} = useDatePicker();
const baseStyles = cn(
"relative flex items-center w-full transition-all border",
"focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-1",
"disabled:cursor-not-allowed disabled:opacity-50"
);
const variantStyles = {
default: cn(
"bg-white border-gray-300 focus-within:ring-blue-500",
status === "error" && "border-red-500 focus-within:ring-red-500",
status === "success" && "border-green-500 focus-within:ring-green-500",
status === "warning" && "border-yellow-500 focus-within:ring-yellow-500",
status === "info" && "border-blue-500 focus-within:ring-blue-500"
),
bordered: cn(
"bg-white border-2 border-gray-400 focus-within:ring-blue-500",
status === "error" && "border-red-500 focus-within:ring-red-500"
),
minimal: "bg-gray-50 border-gray-200 focus-within:ring-blue-500",
"inline-calendar": "hidden",
"popup-calendar": "bg-white border-gray-300 focus-within:ring-blue-500",
withTime: "bg-white border-gray-300 focus-within:ring-blue-500",
range: "bg-white border-gray-300 focus-within:ring-blue-500",
"month-only": "bg-white border-gray-300 focus-within:ring-blue-500"
};
const sizeStyles = {
sm: "h-8 px-2 text-xs rounded-md",
md: "h-10 px-3 text-sm rounded-md",
lg: "h-12 px-4 text-base rounded-lg"
};
const customStyles = {
...borderWidth && { borderWidth },
...borderColor && { borderColor },
...borderStyle && { borderStyle },
...borderRadius && { borderRadius },
...fontSize && { fontSize },
...fontWeight && { fontWeight },
...fontFamily && { fontFamily },
...textColor && { color: textColor },
...backgroundColor && { backgroundColor },
...boxShadow && { boxShadow },
...padding && { padding },
...paddingX && { paddingLeft: paddingX, paddingRight: paddingX },
...paddingY && { paddingTop: paddingY, paddingBottom: paddingY }
};
const inputStyles = cn(
"w-full bg-transparent border-0 outline-none",
"placeholder:text-gray-400",
clearable && "pr-8"
);
if (variant === "inline-calendar") {
return null;
}
return /* @__PURE__ */ jsxs(
"div",
{
className: cn(baseStyles, variantStyles[variant], sizeStyles[size], className),
style: customStyles,
children: [
/* @__PURE__ */ jsx(
"input",
{
ref,
id: inputId,
className: inputStyles,
style: {
...placeholderColor && { "--placeholder-color": placeholderColor }
},
...props
}
),
/* @__PURE__ */ jsxs("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2 space-x-1", children: [
clearable && props.value && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: onClearClick,
className: "p-1 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100",
"aria-label": "Clear date",
children: clearIcon || /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M6 18L18 6M6 6l12 12"
}
) })
}
),
/* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: onCalendarClick,
className: "p-1 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100",
"aria-label": isOpen ? "Close calendar" : "Open calendar",
children: calendarIcon || /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
}
) })
}
)
] })
]
}
);
}
)
);
DatePickerInput.displayName = "DatePickerInput";
const DatePickerCalendar = memo(
forwardRef(({ className, children, ...props }, ref) => {
const {
variant,
size,
transition,
isOpen,
calendarId,
calendarPopupShadow,
calendarPadding,
backgroundColor
} = useDatePicker();
if (!isOpen && (variant === "popup-calendar" || variant === "default")) {
return null;
}
const baseStyles = cn(
"bg-white border border-gray-200 rounded-lg",
variant === "inline-calendar" ? "relative" : "absolute top-full left-0 z-50 mt-1",
"shadow-lg"
);
const sizeStyles = {
sm: "text-xs",
md: "text-sm",
lg: "text-base"
};
const transitionStyles = {
none: "",
fade: "transition-opacity duration-200",
zoom: "transition-transform duration-200 transform scale-100",
slide: "transition-all duration-200"
};
const customStyles = {
...calendarPopupShadow && { boxShadow: calendarPopupShadow },
...calendarPadding && { padding: calendarPadding },
...backgroundColor && { backgroundColor }
};
return /* @__PURE__ */ jsx(
"div",
{
ref,
id: calendarId,
className: cn(baseStyles, sizeStyles[size], transitionStyles[transition], className),
style: customStyles,
role: "dialog",
"aria-modal": variant !== "inline-calendar",
"aria-label": "Date picker calendar",
...props,
children
}
);
})
);
DatePickerCalendar.displayName = "DatePickerCalendar";
const DatePickerHeader = memo(
forwardRef(
({
className,
showMonthSelector = true,
showYearSelector = true,
previousIcon,
nextIcon,
...props
}, ref) => {
const { displayDate, currentView, setDisplayDate, setCurrentView, locale, minDate, maxDate } = useDatePicker();
const monthNames = locale.monthNames || [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
];
const handlePrevious = useCallback(() => {
if (currentView === "day") {
const newDate = addMonths(displayDate, -1);
if (!minDate || newDate >= minDate) {
setDisplayDate(newDate);
}
} else if (currentView === "month") {
const newDate = addYears(displayDate, -1);
if (!minDate || newDate >= minDate) {
setDisplayDate(newDate);
}
} else if (currentView === "year") {
const newDate = addYears(displayDate, -12);
if (!minDate || newDate >= minDate) {
setDisplayDate(newDate);
}
}
}, [currentView, displayDate, minDate, setDisplayDate]);
const handleNext = useCallback(() => {
if (currentView === "day") {
const newDate = addMonths(displayDate, 1);
if (!maxDate || newDate <= maxDate) {
setDisplayDate(newDate);
}
} else if (currentView === "month") {
const newDate = addYears(displayDate, 1);
if (!maxDate || newDate <= maxDate) {
setDisplayDate(newDate);
}
} else if (currentView === "year") {
const newDate = addYears(displayDate, 12);
if (!maxDate || newDate <= maxDate) {
setDisplayDate(newDate);
}
}
}, [currentView, displayDate, maxDate, setDisplayDate]);
const handleMonthClick = useCallback(() => {
if (showMonthSelector) {
setCurrentView("month");
}
}, [showMonthSelector, setCurrentView]);
const handleYearClick = useCallback(() => {
if (showYearSelector) {
setCurrentView("year");
}
}, [showYearSelector, setCurrentView]);
const getHeaderTitle = () => {
if (currentView === "day") {
return `${monthNames[displayDate.getMonth()]} ${displayDate.getFullYear()}`;
} else if (currentView === "month") {
return displayDate.getFullYear().toString();
} else {
const startYear = Math.floor(displayDate.getFullYear() / 12) * 12;
return `${startYear} - ${startYear + 11}`;
}
};
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
"flex items-center justify-between p-3 border-b border-gray-200",
className
),
...props,
children: [
/* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handlePrevious,
className: "p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full",
"aria-label": "Previous",
children: previousIcon || /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M15 19l-7-7 7-7"
}
) })
}
),
/* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-1", children: [
currentView === "day" && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handleMonthClick,
className: "px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded",
disabled: !showMonthSelector,
children: monthNames[displayDate.getMonth()]
}
),
/* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handleYearClick,
className: "px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded",
disabled: !showYearSelector,
children: displayDate.getFullYear()
}
)
] }),
currentView !== "day" && /* @__PURE__ */ jsx("h2", { className: "text-sm font-medium text-gray-700", children: getHeaderTitle() })
] }),
/* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: handleNext,
className: "p-1 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full",
"aria-label": "Next",
children: nextIcon || /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M9 5l7 7-7 7"
}
) })
}
)
]
}
);
}
)
);
DatePickerHeader.displayName = "DatePickerHeader";
const DatePickerDay = memo(
forwardRef(
({
className,
date,
isSelected = false,
isDisabled = false,
isToday = false,
isInRange = false,
isRangeStart = false,
isRangeEnd = false,
isOtherMonth = false,
...props
}, ref) => {
const {
onDateSelect,
setHoveredDate,
selectedBackgroundColor,
todayBorderColor,
disabledDateColor
} = useDatePicker();
const handleClick = useCallback(() => {
if (!isDisabled) {
onDateSelect(date);
}
}, [date, isDisabled, onDateSelect]);
const handleMouseEnter = useCallback(() => {
if (!isDisabled) {
setHoveredDate(date);
}
}, [date, isDisabled, setHoveredDate]);
const handleMouseLeave = useCallback(() => {
setHoveredDate(void 0);
}, [setHoveredDate]);
const dayClasses = cn(
"relative flex items-center justify-center w-8 h-8 text-sm transition-colors rounded-full",
"hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500",
isSelected && "bg-blue-600 text-white hover:bg-blue-700",
isToday && !isSelected && "border-2 border-blue-600 font-semibold",
isDisabled && "text-gray-300 cursor-not-allowed hover:bg-transparent",
isOtherMonth && !isSelected && "text-gray-400",
isInRange && !isSelected && "bg-blue-100",
(isRangeStart || isRangeEnd) && "bg-blue-600 text-white",
className
);
const customStyles = {
...selectedBackgroundColor && isSelected && { backgroundColor: selectedBackgroundColor },
...todayBorderColor && isToday && { borderColor: todayBorderColor },
...disabledDateColor && isDisabled && { color: disabledDateColor }
};
return /* @__PURE__ */ jsx(
"button",
{
ref,
type: "button",
className: dayClasses,
style: customStyles,
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
disabled: isDisabled,
"aria-label": `${date.toDateString()}${isSelected ? ", selected" : ""}${isToday ? ", today" : ""}`,
"aria-selected": isSelected,
"aria-disabled": isDisabled,
...props,
children: date.getDate()
}
);
}
)
);
DatePickerDay.displayName = "DatePickerDay";
const DatePickerDaysView = memo(
forwardRef(({ className, ...props }, ref) => {
const {
displayDate,
mode,
locale,
isDateDisabled: isDateDisabled2,
isDateSelected,
isDateInRange,
isDateToday,
hoveredDate,
selectedRange,
renderDay
} = useDatePicker();
const dayNamesShort = locale.dayNamesShort || ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const firstDayOfWeek = locale.firstDayOfWeek || 0;
const orderedDayNames = useMemo(() => {
const days = [...dayNamesShort];
return [...days.slice(firstDayOfWeek), ...days.slice(0, firstDayOfWeek)];
}, [dayNamesShort, firstDayOfWeek]);
const monthDays = useMemo(() => {
return getMonthDays(displayDate, firstDayOfWeek);
}, [displayDate, firstDayOfWeek]);
const isInHoverRange = useCallback(
(date) => {
if (mode !== "range" || !(selectedRange == null ? void 0 : selectedRange.start) || !hoveredDate) return false;
const start = selectedRange.start;
const end = hoveredDate;
if (start > end) return date >= end && date <= start;
return date >= start && date <= end;
},
[mode, selectedRange, hoveredDate]
);
return /* @__PURE__ */ jsxs("div", { ref, className: cn("p-3", className), ...props, children: [
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: orderedDayNames.map((dayName) => /* @__PURE__ */ jsx(
"div",
{
className: "flex items-center justify-center w-8 h-8 text-xs font-medium text-gray-500",
children: dayName
},
dayName
)) }),
/* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 gap-1", children: monthDays.map((date) => {
const isSelected = isDateSelected(date);
const isDisabled = isDateDisabled2(date);
const isToday = isDateToday(date);
const isInRange = mode === "range" && (isDateInRange(date) || isInHoverRange(date));
const isOtherMonth = !isSameMonth(date, displayDate);
const isRangeStart = mode === "range" && (selectedRange == null ? void 0 : selectedRange.start) && isSameDay(date, selectedRange.start);
const isRangeEnd = mode === "range" && (selectedRange == null ? void 0 : selectedRange.end) && isSameDay(date, selectedRange.end);
if (renderDay) {
return /* @__PURE__ */ jsx("div", { children: renderDay(date, isSelected, isDisabled, isToday, isInRange) }, date.toISOString());
}
return /* @__PURE__ */ jsx(
DatePickerDay,
{
date,
isSelected,
isDisabled,
isToday,
isInRange,
isRangeStart,
isRangeEnd,
isOtherMonth
},
date.toISOString()
);
}) })
] });
})
);
DatePickerDaysView.displayName = "DatePickerDaysView";
const DatePickerFooter = memo(
forwardRef(
({
className,
showTodayButton = true,
showClearButton = true,
todayButtonLabel = "Today",
clearButtonLabel = "Clear",
...props
}, ref) => {
const { onTodayClick, onClear, todayButton, clearable } = useDatePicker();
if (!todayButton && !clearable) {
return null;
}
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
"flex items-center justify-between p-3 border-t border-gray-200",
className
),
...props,
children: [
/* @__PURE__ */ jsx("div", { className: "flex space-x-2", children: clearable && showClearButton && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: onClear,
className: "px-3 py-1 text-sm text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded",
children: clearButtonLabel
}
) }),
/* @__PURE__ */ jsx("div", { className: "flex space-x-2", children: todayButton && showTodayButton && /* @__PURE__ */ jsx(
"button",
{
type: "button",
onClick: onTodayClick,
className: "px-3 py-1 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-100 rounded",
children: todayButtonLabel
}
) })
]
}
);
}
)
);
DatePickerFooter.displayName = "DatePickerFooter";
const DatePickerBase = memo(
forwardRef(
({
// Core props
value,
defaultValue,
mode = "single",
variant = "default",
size = "md",
status = "default",
transition = "fade",
// State control
open,
defaultOpen = false,
disabled = false,
readOnly = false,
required = false,
clearable = true,
// Date configuration
minDate,
maxDate,
disabledDates,
showTime = false,
todayButton = true,
// Locale and formatting
locale = {},
placeholder = "Select date",
// UI configuration
inline = false,
closeOnSelect = true,
// Labels and text
label,
helperText,
errorText,
clearButtonLabel = "Clear",
todayButtonLabel = "Today",
// Icons
calendarIcon,
clearIcon,
previousIcon,
nextIcon,
// Custom renderers
renderDay: _renderDay,
renderHeader: _renderHeader,
renderFooter: _renderFooter,
// Event handlers
onChange,
onOpenChange,
onFocus,
onBlur,
onHoverDateChange,
onViewModeChange,
onClear,
onTodayClick,
// Styling props
className,
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
placeholderColor,
backgroundColor,
selectedBackgroundColor,
todayBorderColor,
focusRingColor,
boxShadow,
calendarPopupShadow,
padding,
paddingX,
paddingY,
calendarPadding,
selectedDateColor,
disabledDateColor,
// Accessibility
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-labelledby": ariaLabelledby,
"aria-required": ariaRequired,
"aria-invalid": ariaInvalid,
...props
}, ref) => {
const inputId = useId();
const calendarId = useId();
const labelId = useId();
const descriptionId = useId();
const errorId = useId();
const [internalValue, setInternalValue] = useState(
defaultValue
);
const [internalOpen, setInternalOpen] = useState(defaultOpen);
const [currentView, setCurrentView] = useState("day");
const [displayDate, setDisplayDate] = useState(() => {
if (value && value instanceof Date) return value;
if (defaultValue && defaultValue instanceof Date) return defaultValue;
return /* @__PURE__ */ new Date();
});
const [focusedDate, setFocusedDate] = useState();
const [hoveredDate, setHoveredDate] = useState();
const [inputValue, setInputValue] = useState("");
const inputRef = useRef(null);
const calendarRef = useRef(null);
const isControlledValue = value !== void 0;
const isControlledOpen = open !== void 0;
const currentValue = isControlledValue ? value : internalValue;
const currentOpen = isControlledOpen ? open : internalOpen;
useEffect(() => {
if (currentValue instanceof Date) {
setInputValue(formatDateIntl(currentValue, locale));
} else if (currentValue && typeof currentValue === "object" && "start" in currentValue) {
const range = currentValue;
if (range.start && range.end) {
setInputValue(
`${formatDateIntl(range.start, locale)} - ${formatDateIntl(range.end, locale)}`
);
} else if (range.start) {
setInputValue(formatDateIntl(range.start, locale));
} else {
setInputValue("");
}
} else {
setInputValue("");
}
}, [currentValue, locale]);
const handleValueChange = useCallback(
(newValue) => {
if (!isControlledValue) {
setInternalValue(newValue);
}
onChange == null ? void 0 : onChange(newValue);
},
[isControlledValue, onChange]
);
const handleOpenChange = useCallback(
(newOpen) => {
if (!isControlledOpen) {
setInternalOpen(newOpen);
}
onOpenChange == null ? void 0 : onOpenChange(newOpen);
},
[isControlledOpen, onOpenChange]
);
const handleDateSelect = useCallback(
(date) => {
if (mode === "single") {
handleValueChange(date);
if (closeOnSelect && !showTime) {
handleOpenChange(false);
}
} else if (mode === "range") {
const currentRange = currentValue;
if (!(currentRange == null ? void 0 : currentRange.start) || currentRange.start && currentRange.end) {
handleValueChange({ start: date });
} else {
const start = currentRange.start;
if (date < start) {
handleValueChange({ start: date, end: start });
} else {
handleValueChange({ start, end: date });
}
if (closeOnSelect) {
handleOpenChange(false);
}
}
} else if (mode === "multiple") {
const currentDates = currentValue || [];
const existingIndex = currentDates.findIndex((d) => isSameDay(d, date));
if (existingIndex >= 0) {
const newDates = [...currentDates];
newDates.splice(existingIndex, 1);
handleValueChange(newDates);
} else {
handleValueChange([...currentDates, date]);
}
}
},
[mode, currentValue, handleValueChange, closeOnSelect, showTime, handleOpenChange]
);
const handleClear = useCallback(() => {
handleValueChange(void 0);
setInputValue("");
onClear == null ? void 0 : onClear();
}, [handleValueChange, onClear]);
const handleTodayClick = useCallback(() => {
const today = /* @__PURE__ */ new Date();
handleDateSelect(today);
setDisplayDate(today);
onTodayClick == null ? void 0 : onTodayClick();
}, [handleDateSelect, onTodayClick]);
const handleViewChange = useCallback(
(view) => {
setCurrentView(view);
onViewModeChange == null ? void 0 : onViewModeChange(view);
},
[onViewModeChange]
);
const handleInputChange = useCallback(
(e) => {
const newValue = e.target.value;
setInputValue(newValue);
if (mode === "single") {
const parsedDate = parseInputDate(newValue);
if (parsedDate) {
handleValueChange(parsedDate);
setDisplayDate(parsedDate);
}
}
},
[mode, handleValueChange]
);
const handleInputFocus = useCallback(
(e) => {
if (!readOnly) {
handleOpenChange(true);
}
onFocus == null ? void 0 : onFocus(e);
},
[readOnly, handleOpenChange, onFocus]
);
const handleInputBlur = useCallback(
(e) => {
setTimeout(() => {
var _a;
if (!((_a = calendarRef.current) == null ? void 0 : _a.contains(document.activeElement))) {
handleOpenChange(false);
}
}, 100);
onBlur == null ? void 0 : onBlur(e);
},
[handleOpenChange, onBlur]
);
const handleInputKeyDown = useCallback(
(e) => {
var _a;
if (e.key === "Escape") {
handleOpenChange(false);
(_a = inputRef.current) == null ? void 0 : _a.blur();
} else if (e.key === "Enter") {
if (!currentOpen) {
handleOpenChange(true);
}
} else if (e.key === "ArrowDown") {
e.preventDefault();
handleOpenChange(true);
}
},
[currentOpen, handleOpenChange]
);
const handleCalendarClick = useCallback(() => {
handleOpenChange(!currentOpen);
}, [currentOpen, handleOpenChange]);
const handleClearClick = useCallback(() => {
handleClear();
}, [handleClear]);
const isDateDisabledUtil = useCallback(
(date) => {
if (minDate && date < minDate) return true;
if (maxDate && date > maxDate) return true;
return isDateDisabled(date, disabledDates);
},
[minDate, maxDate, disabledDates]
);
const isDateSelectedUtil = useCallback(
(date) => {
if (mode === "single") {
return currentValue instanceof Date && isSameDay(date, currentValue);
} else if (mode === "range") {
const range = currentValue;
return !!((range == null ? void 0 : range.start) && isSameDay(date, range.start) || (range == null ? void 0 : range.end) && isSameDay(date, range.end));
} else if (mode === "multiple") {
const dates = currentValue;
return !!(dates == null ? void 0 : dates.some((d) => isSameDay(date, d)));
}
return false;
},
[mode, currentValue]
);
const isDateInRangeUtil = useCallback(
(date) => {
if (mode !== "range") return false;
const range = currentValue;
if (!(range == null ? void 0 : range.start) || !(range == null ? void 0 : range.end)) return false;
return date >= range.start && date <= range.end;
},
[mode, currentValue]
);
const isDateTodayUtil = useCallback((date) => {
const today = /* @__PURE__ */ new Date();
return isSameDay(date, today);
}, []);
const formatDateUtil = useCallback(
(date) => {
return formatDateIntl(date, locale);
},
[locale]
);
const contextValue = useMemo(
() => ({
// Core state
selectedDate: mode === "single" ? currentValue : void 0,
selectedRange: mode === "range" ? currentValue : void 0,
selectedDates: mode === "multiple" ? currentValue : void 0,
isOpen: currentOpen,
currentView,
displayDate,
focusedDate,
hoveredDate,
// Configuration
mode,
variant: inline ? "inline-calendar" : variant,
size,
status,
transition,
locale,
disabledDates,
minDate,
maxDate,
showTime,
clearable,
todayButton,
readOnly,
// State setters
setSelectedDate: handleValueChange,
setSelectedRange: handleValueChange,
setSelectedDates: handleValueChange,
setIsOpen: handleOpenChange,
setCurrentView,
setDisplayDate,
setFocusedDate,
setHoveredDate: (date) => {
setHoveredDate(date);
onHoverDateChange == null ? void 0 : onHoverDateChange(date);
},
// Event handlers
onDateSelect: handleDateSelect,
onClear: handleClear,
onTodayClick: handleTodayClick,
// Utility functions
isDateDisabled: isDateDisabledUtil,
isDateSelected: isDateSelectedUtil,
isDateInRange: isDateInRangeUtil,
isDateToday: isDateTodayUtil,
formatDate: formatDateUtil,
// Custom renderers
renderDay: _renderDay,
// IDs
inputId,
calendarId,
labelId: label ? labelId : void 0,
descriptionId: helperText ? descriptionId : void 0,
errorId: errorText ? errorId : void 0,
// Style props
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
placeholderColor,
backgroundColor,
selectedBackgroundColor,
todayBorderColor,
focusRingColor,
boxShadow,
calendarPopupShadow,
padding,
paddingX,
paddingY,
calendarPadding,
selectedDateColor,
disabledDateColor
}),
[
mode,
currentValue,
currentOpen,
currentView,
displayDate,
focusedDate,
hoveredDate,
inline,
variant,
size,
status,
transition,
locale,
disabledDates,
minDate,
maxDate,
showTime,
clearable,
todayButton,
readOnly,
handleValueChange,
handleOpenChange,
setCurrentView,
setDisplayDate,
setFocusedDate,
onHoverDateChange,
handleDateSelect,
handleClear,
handleTodayClick,
isDateDisabledUtil,
isDateSelectedUtil,
isDateInRangeUtil,
isDateTodayUtil,
formatDateUtil,
inputId,
calendarId,
label,
labelId,
helperText,
descriptionId,
errorText,
errorId,
borderWidth,
borderColor,
borderStyle,
borderRadius,
fontSize,
fontWeight,
fontFamily,
textColor,
placeholderColor,
backgroundColor,
selectedBackgroundColor,
todayBorderColor,
focusRingColor,
boxShadow,
calendarPopupShadow,
padding,
paddingX,
paddingY,
calendarPadding,
selectedDateColor,
disabledDateColor
]
);
useEffect(() => {
const handleClickOutside = (event) => {
if (ref && typeof ref === "object" && ref.current && !ref.current.contains(event.target)) {
handleOpenChange(false);
}
};
if (currentOpen) {
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}
}, [currentOpen, handleOpenChange, ref]);
useEffect(() => {
const handleKeyDown = (e) => {
var _a;
if (!currentOpen) return;
switch (e.key) {
case "Escape":
e.preventDefault();
handleOpenChange(false);
(_a = inputRef.current) == null ? void 0 : _a.focus();
break;
}
};
if (currentOpen) {
document.addEventListener("keydown", handleKeyDown);
return () => document.removeEventListener("keydown", handleKeyDown);
}
}, [currentOpen, handleOpenChange]);
const containerClasses = cn(
"relative",
inline && "inline-block",
disabled && "opacity-50 pointer-events-none",
className
);
return /* @__PURE__ */ jsx(DatePickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
"div",
{
ref,
className: containerClasses,
"aria-label": ariaLabel,
"aria-describedby": ariaDescribedby,
"aria-labelledby": ariaLabelledby,
"aria-required": ariaRequired,
"aria-invalid": ariaInvalid,
...props,
children: [
label && /* @__PURE__ */ jsxs(
"label",
{
id: labelId,
htmlFor: inputId,
className: cn(
"block text-sm font-medium mb-1",
status === "error" && "text-red-600",
status === "success" && "text-green-600",
status === "warning" && "text-yellow-600",
status === "info" && "text-blue-600",
status === "default" && "text-gray-700",
disabled && "text-gray-400"
),
children: [
label,
required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", children: "*" })
]
}
),
/* @__PURE__ */ jsx(
DatePickerInput,
{
ref: inputRef,
value: inputValue,
placeholder,
disabled,
readOnly,
required,
onChange: handleInputChange,
onFocus: handleInputFocus,
onBlur: handleInputBlur,
onKeyDown: handleInputKeyDown,
calendarIcon,
clearIcon,
onCalendarClick: handleCalendarClick,
onClearClick: handleClearClick,
"aria-labelledby": label ? labelId : void 0,
"aria-describedby": cn(
helperText ? descriptionId : void 0,
errorText ? errorId : void 0
),
"aria-invalid": status === "error" || ariaInvalid,
"aria-expanded": currentOpen,
"aria-haspopup": "dialog"
}
),
/* @__PURE__ */ jsxs(DatePickerCalendar, { ref: calendarRef, children: [
_renderHeader ? _renderHeader(
displayDate,
currentView,
() => setDisplayDate(addMonths(displayDate, -1)),
() => setDisplayDate(addMonths(displayDate, 1)),
handleViewChange
) : /* @__PURE__ */ jsx(DatePickerHeader, { previousIcon, nextIcon }),
currentView === "day" && /* @__PURE__ */ jsx(DatePickerDaysView, {}),
_renderFooter ? _renderFooter() : /* @__PURE__ */ jsx(
DatePickerFooter,
{
todayButtonLabel,
clearButtonLabel
}
)
] }),
helperText && /* @__PURE__ */ jsx(
"div",
{
id: descriptionId,
className: cn(
"mt-1 text-xs",
status === "error" && "text-red-600",
status === "success" && "text-green-600",
status === "warning" && "text-yellow-600",
status === "info" && "text-blue-600",
status === "default" && "text-gray-500",
disabled && "text-gray-400"
),
children: helperText
}
),
errorText && /* @__PURE__ */ jsx("div", { id: errorId, className: "mt-1 text-xs text-red-600", children: errorText })
]
}
) });
}
)
);
DatePickerBase.displayName = "DatePicker";
const DatePicker = DatePickerBase;
DatePicker.Input = DatePickerInput;
DatePicker.Calendar = DatePickerCalendar;
DatePicker.Header = DatePickerHeader;
DatePicker.Day = DatePickerDay;
DatePicker.DaysView = DatePickerDaysView;
DatePicker.Footer = DatePickerFooter;
export {
Accordion,
AccordionContent,
AccordionItemWrapper as AccordionItem,
AccordionTrigger,
Alert,
AlertDescription,
AlertDismissButton,
AlertIcon,
AlertTitle,
Anchor,
AnchorContent,
AnchorContext,
AnchorGroup,
AnchorIndicator,
AnchorLink,
Autocomplete,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteList,
Avatar,
BadgeWithSubComponents as Badge,
BadgeCloseButton,
BadgeHelperText,
BadgeIcon,
BadgeLabel,
Breadcrumb,
BreadcrumbItem as BreadcrumbItemComponent,
BreadcrumbLink,
BreadcrumbSeparator,
Button$1 as Button,
ButtonIcon,
ButtonLabel,
ButtonSpinner,
CardCompound as Card,
CardActions,
CardBadge,
CardBody,
CardContext,
CardEmpty,
CardExpandablePanel,
CardFooter,
CardHeader,
CardLoading,
CardMedia,
CardOverlay,
CardSelectCheckbox,
Carousel,
CarouselControls,
CarouselIndicators,
CarouselNext,
CarouselPrev,
CarouselSlide,
CascadeComponent as Cascade,
CheckboxCompound as Checkbox,
CheckboxCheckIcon,
CheckboxDescription,
CheckboxErrorText,
CheckboxGroup,
CheckboxHelperText,
CheckboxIndeterminateIcon,
CheckboxInput,
CheckboxItem,
CheckboxLabel,
CheckboxLoadingIcon,
CheckboxSelectAll,
Chip,
ChipContainer,
ChipInput,
ChipItem,
ColorPickerCompound as ColorPicker,
Content,
DatePicker,
DatePickerCalendar,
DatePickerDay,
DatePickerDaysView,
DatePickerFooter,
DatePickerHeader,
DatePickerInput,
Dialog,
DialogBody,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogTitle,
DrawerCompound as Drawer,
DrawerContainer,
DrawerContent,
DrawerFooter,
DrawerHeader,
DrawerItemComponent,
DrawerItemList,
DrawerOverlay,
Input,
InputHelperText,
InputIcon,
InputLabel,
List,
ListContainer,
ListFooter,
ListHeader,
ListItem,
Navigation,
Pagination,
PaginationButton,
PaginationInfo,
PopoverCompound as Popover,
PopoverContext,
ProgressWithSubcomponents as Progress,
ProgressBar,
ProgressContainer,
ProgressIndicator,
ProgressLabel,
ProgressThresholdMarker,
ProgressTrack,
ProgressValueDescription,
RadioGroup,
RadioGroupHelperText,
RadioGroupLabel,
RadioOption,
Rating,
SegmentedCompound as Segmented,
SelectCompound as Select,
SelectDropdown,
SelectEmpty,
SelectInput,
SelectOptionComponent,
Skeleton,
SliderComponent as Slider,
Splitter,
Step,
StepList,
StepperRoot as Stepper,
Switch,
SwitchLabel,
TableCompound as Table,
TableBody,
TableCell,
TableEditCell,
TableEmpty,
TableExpandButton,
TableExpandedPanel,
TableFilter,
TableFooter,
TableGlobalFilter,
TableHeader,
TableHeaderCell,
TableLoading,
TablePagination,
TableRow,
TableSelectCheckbox,
TableSortIcon,
ToggleButtons,
Tooltip,
TooltipContent,
TooltipTrigger,
TreeSelectWithSubComponents as TreeSelect,
TreeSelectCheckbox,
TreeSelectClearButton,
TreeSelectExpandIcon,
TreeSelectInput,
TreeSelectNode,
TreeSelectPopup,
Upload,
cn,
useAccordion,
useAnchor,
useAutocomplete,
useBreadcrumb,
useButtonContext,
useCard,
useCarousel,
useCheckbox,
useCheckboxGroup,
useChip,
useColorPicker,
useDatePicker,
useDrawer,
useHashSync,
useInputContext,
useList,
usePagination,
usePopover,
useProgress,
useRadioGroupContext,
useScrollSpy,
useSelect,
useSmoothScroll,
useSwitch,
useTable,
useTableData,
useTableEditing,
useTableExpansion,
useTableFilter,
useTableKeyboardNavigation,
useTablePagination,
useTableSelection,
useTableSort,
useTooltipContext,
useTreeSelectContext,
useUploadContext
};