@koaris/bloom-ui 1.0.5 → 1.1.1

package/dist/index.mjs

@@ -32,32 +32,32 @@ var __objRest = (source, exclude) => {
 
 // ../../node_modules/tailwind-merge/dist/bundle-mjs.mjs
 var CLASS_PART_SEPARATOR = "-";
-function createClassUtils(config) {
+var createClassGroupUtils = (config) => {
   const classMap = createClassMap(config);
   const {
     conflictingClassGroups,
     conflictingClassGroupModifiers
   } = config;
-  function getClassGroupId(className) {
+  const getClassGroupId = (className) => {
     const classParts = className.split(CLASS_PART_SEPARATOR);
     if (classParts[0] === "" && classParts.length !== 1) {
       classParts.shift();
     }
     return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
-  }
-  function getConflictingClassGroupIds(classGroupId, hasPostfixModifier) {
+  };
+  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
     const conflicts = conflictingClassGroups[classGroupId] || [];
     if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
       return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
     }
     return conflicts;
-  }
+  };
   return {
     getClassGroupId,
     getConflictingClassGroupIds
   };
-}
-function getGroupRecursive(classParts, classPartObject) {
+};
+var getGroupRecursive = (classParts, classPartObject) => {
   var _a;
   if (classParts.length === 0) {
     return classPartObject.classGroupId;
@@ -75,9 +75,9 @@ function getGroupRecursive(classParts, classPartObject) {
   return (_a = classPartObject.validators.find(({
     validator
   }) => validator(classRest))) == null ? void 0 : _a.classGroupId;
-}
+};
 var arbitraryPropertyRegex = /^\[(.+)\]$/;
-function getGroupIdForArbitraryProperty(className) {
+var getGroupIdForArbitraryProperty = (className) => {
   if (arbitraryPropertyRegex.test(className)) {
     const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
     const property = arbitraryPropertyClassName == null ? void 0 : arbitraryPropertyClassName.substring(0, arbitraryPropertyClassName.indexOf(":"));
@@ -85,8 +85,8 @@ function getGroupIdForArbitraryProperty(className) {
       return "arbitrary.." + property;
     }
   }
-}
-function createClassMap(config) {
+};
+var createClassMap = (config) => {
   const {
     theme,
     prefix
@@ -100,8 +100,8 @@ function createClassMap(config) {
     processClassesRecursively(classGroup, classMap, classGroupId, theme);
   });
   return classMap;
-}
-function processClassesRecursively(classGroup, classPartObject, classGroupId, theme) {
+};
+var processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
   classGroup.forEach((classDefinition) => {
     if (typeof classDefinition === "string") {
       const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
@@ -123,8 +123,8 @@ function processClassesRecursively(classGroup, classPartObject, classGroupId, th
       processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
     });
   });
-}
-function getPart(classPartObject, path) {
+};
+var getPart = (classPartObject, path) => {
   let currentClassPartObject = classPartObject;
   path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
     if (!currentClassPartObject.nextPart.has(pathPart)) {
@@ -136,11 +136,9 @@ function getPart(classPartObject, path) {
     currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
   });
   return currentClassPartObject;
-}
-function isThemeGetter(func) {
-  return func.isThemeGetter;
-}
-function getPrefixedClassGroupEntries(classGroupEntries, prefix) {
+};
+var isThemeGetter = (func) => func.isThemeGetter;
+var getPrefixedClassGroupEntries = (classGroupEntries, prefix) => {
   if (!prefix) {
     return classGroupEntries;
   }
@@ -156,8 +154,8 @@ function getPrefixedClassGroupEntries(classGroupEntries, prefix) {
     });
     return [classGroupId, prefixedClassGroup];
   });
-}
-function createLruCache(maxCacheSize) {
+};
+var createLruCache = (maxCacheSize) => {
   if (maxCacheSize < 1) {
     return {
       get: () => void 0,
@@ -168,7 +166,7 @@ function createLruCache(maxCacheSize) {
   let cacheSize = 0;
   let cache = /* @__PURE__ */ new Map();
   let previousCache = /* @__PURE__ */ new Map();
-  function update(key, value) {
+  const update = (key, value) => {
     cache.set(key, value);
     cacheSize++;
     if (cacheSize > maxCacheSize) {
@@ -176,7 +174,7 @@ function createLruCache(maxCacheSize) {
       previousCache = cache;
       cache = /* @__PURE__ */ new Map();
     }
-  }
+  };
   return {
     get(key) {
       let value = cache.get(key);
@@ -196,14 +194,17 @@ function createLruCache(maxCacheSize) {
       }
     }
   };
-}
+};
 var IMPORTANT_MODIFIER = "!";
-function createSplitModifiers(config) {
-  const separator = config.separator;
+var createParseClassName = (config) => {
+  const {
+    separator,
+    experimentalParseClassName
+  } = config;
   const isSeparatorSingleCharacter = separator.length === 1;
   const firstSeparatorCharacter = separator[0];
   const separatorLength = separator.length;
-  return function splitModifiers(className) {
+  const parseClassName = (className) => {
     const modifiers = [];
     let bracketDepth = 0;
     let modifierStart = 0;
@@ -238,8 +239,15 @@ function createSplitModifiers(config) {
       maybePostfixModifierPosition
     };
   };
-}
-function sortModifiers(modifiers) {
+  if (experimentalParseClassName) {
+    return (className) => experimentalParseClassName({
+      className,
+      parseClassName
+    });
+  }
+  return parseClassName;
+};
+var sortModifiers = (modifiers) => {
   if (modifiers.length <= 1) {
     return modifiers;
   }
@@ -256,73 +264,59 @@ function sortModifiers(modifiers) {
   });
   sortedModifiers.push(...unsortedModifiers.sort());
   return sortedModifiers;
-}
-function createConfigUtils(config) {
-  return __spreadValues({
-    cache: createLruCache(config.cacheSize),
-    splitModifiers: createSplitModifiers(config)
-  }, createClassUtils(config));
-}
+};
+var createConfigUtils = (config) => __spreadValues({
+  cache: createLruCache(config.cacheSize),
+  parseClassName: createParseClassName(config)
+}, createClassGroupUtils(config));
 var SPLIT_CLASSES_REGEX = /\s+/;
-function mergeClassList(classList, configUtils) {
+var mergeClassList = (classList, configUtils) => {
   const {
-    splitModifiers,
+    parseClassName,
     getClassGroupId,
     getConflictingClassGroupIds
   } = configUtils;
-  const classGroupsInConflict = /* @__PURE__ */ new Set();
-  return classList.trim().split(SPLIT_CLASSES_REGEX).map((originalClassName) => {
+  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
-    } = splitModifiers(originalClassName);
-    let classGroupId = getClassGroupId(maybePostfixModifierPosition ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
+    } = parseClassName(originalClassName);
     let hasPostfixModifier = Boolean(maybePostfixModifierPosition);
+    let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
     if (!classGroupId) {
-      if (!maybePostfixModifierPosition) {
-        return {
-          isTailwindClass: false,
-          originalClassName
-        };
+      if (!hasPostfixModifier) {
+        result = originalClassName + (result.length > 0 ? " " + result : result);
+        continue;
       }
       classGroupId = getClassGroupId(baseClassName);
       if (!classGroupId) {
-        return {
-          isTailwindClass: false,
-          originalClassName
-        };
+        result = originalClassName + (result.length > 0 ? " " + result : result);
+        continue;
       }
       hasPostfixModifier = false;
     }
     const variantModifier = sortModifiers(modifiers).join(":");
     const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
-    return {
-      isTailwindClass: true,
-      modifierId,
-      classGroupId,
-      originalClassName,
-      hasPostfixModifier
-    };
-  }).reverse().filter((parsed) => {
-    if (!parsed.isTailwindClass) {
-      return true;
-    }
-    const {
-      modifierId,
-      classGroupId,
-      hasPostfixModifier
-    } = parsed;
     const classId = modifierId + classGroupId;
-    if (classGroupsInConflict.has(classId)) {
-      return false;
+    if (classGroupsInConflict.includes(classId)) {
+      continue;
     }
-    classGroupsInConflict.add(classId);
-    getConflictingClassGroupIds(classGroupId, hasPostfixModifier).forEach((group) => classGroupsInConflict.add(modifierId + group));
-    return true;
-  }).reverse().map((parsed) => parsed.originalClassName).join(" ");
-}
+    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;
@@ -338,7 +332,7 @@ function twJoin() {
   }
   return string;
 }
-function toValue(mix) {
+var toValue = (mix) => {
   if (typeof mix === "string") {
     return mix;
   }
@@ -353,7 +347,7 @@ function toValue(mix) {
     }
   }
   return string;
-}
+};
 function createTailwindMerge(createConfigFirst, ...createConfigRest) {
   let configUtils;
   let cacheGet;
@@ -380,61 +374,35 @@ function createTailwindMerge(createConfigFirst, ...createConfigRest) {
     return functionToCall(twJoin.apply(null, arguments));
   };
 }
-function fromTheme(key) {
+var fromTheme = (key) => {
   const themeGetter = (theme) => theme[key] || [];
   themeGetter.isThemeGetter = true;
   return themeGetter;
-}
+};
 var arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
 var fractionRegex = /^\d+\/\d+$/;
 var stringLengths = /* @__PURE__ */ new Set(["px", "full", "screen"]);
 var tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
 var 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$/;
 var colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
-var shadowRegex = /^-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
+var shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
 var imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
-function isLength(value) {
-  return isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
-}
-function isArbitraryLength(value) {
-  return getIsArbitraryValue(value, "length", isLengthOnly);
-}
-function isNumber(value) {
-  return Boolean(value) && !Number.isNaN(Number(value));
-}
-function isArbitraryNumber(value) {
-  return getIsArbitraryValue(value, "number", isNumber);
-}
-function isInteger(value) {
-  return Boolean(value) && Number.isInteger(Number(value));
-}
-function isPercent(value) {
-  return value.endsWith("%") && isNumber(value.slice(0, -1));
-}
-function isArbitraryValue(value) {
-  return arbitraryValueRegex.test(value);
-}
-function isTshirtSize(value) {
-  return tshirtUnitRegex.test(value);
-}
+var isLength = (value) => isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
+var isArbitraryLength = (value) => getIsArbitraryValue(value, "length", isLengthOnly);
+var isNumber = (value) => Boolean(value) && !Number.isNaN(Number(value));
+var isArbitraryNumber = (value) => getIsArbitraryValue(value, "number", isNumber);
+var isInteger = (value) => Boolean(value) && Number.isInteger(Number(value));
+var isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
+var isArbitraryValue = (value) => arbitraryValueRegex.test(value);
+var isTshirtSize = (value) => tshirtUnitRegex.test(value);
 var sizeLabels = /* @__PURE__ */ new Set(["length", "size", "percentage"]);
-function isArbitrarySize(value) {
-  return getIsArbitraryValue(value, sizeLabels, isNever);
-}
-function isArbitraryPosition(value) {
-  return getIsArbitraryValue(value, "position", isNever);
-}
+var isArbitrarySize = (value) => getIsArbitraryValue(value, sizeLabels, isNever);
+var isArbitraryPosition = (value) => getIsArbitraryValue(value, "position", isNever);
 var imageLabels = /* @__PURE__ */ new Set(["image", "url"]);
-function isArbitraryImage(value) {
-  return getIsArbitraryValue(value, imageLabels, isImage);
-}
-function isArbitraryShadow(value) {
-  return getIsArbitraryValue(value, "", isShadow);
-}
-function isAny() {
-  return true;
-}
-function getIsArbitraryValue(value, label, testValue) {
+var isArbitraryImage = (value) => getIsArbitraryValue(value, imageLabels, isImage);
+var isArbitraryShadow = (value) => getIsArbitraryValue(value, "", isShadow);
+var isAny = () => true;
+var getIsArbitraryValue = (value, label, testValue) => {
   const result = arbitraryValueRegex.exec(value);
   if (result) {
     if (result[1]) {
@@ -443,20 +411,17 @@ function getIsArbitraryValue(value, label, testValue) {
     return testValue(result[2]);
   }
   return false;
-}
-function isLengthOnly(value) {
-  return lengthUnitRegex.test(value) && !colorFunctionRegex.test(value);
-}
-function isNever() {
-  return false;
-}
-function isShadow(value) {
-  return shadowRegex.test(value);
-}
-function isImage(value) {
-  return imageRegex.test(value);
-}
-function getDefaultConfig() {
+};
+var 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)
+);
+var isNever = () => false;
+var isShadow = (value) => shadowRegex.test(value);
+var isImage = (value) => imageRegex.test(value);
+var getDefaultConfig = () => {
   const colors = fromTheme("colors");
   const spacing = fromTheme("spacing");
   const blur = fromTheme("blur");
@@ -490,11 +455,10 @@ function getDefaultConfig() {
   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", "plus-lighter"];
+  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 getNumber = () => [isNumber, isArbitraryNumber];
   const getNumberAndArbitrary = () => [isNumber, isArbitraryValue];
   return {
     cacheSize: 500,
@@ -503,12 +467,12 @@ function getDefaultConfig() {
       colors: [isAny],
       spacing: [isLength, isArbitraryLength],
       blur: ["none", "", isTshirtSize, isArbitraryValue],
-      brightness: getNumber(),
+      brightness: getNumberAndArbitrary(),
       borderColor: [colors],
       borderRadius: ["none", "", "full", isTshirtSize, isArbitraryValue],
       borderSpacing: getSpacingWithArbitrary(),
       borderWidth: getLengthWithEmptyAndArbitrary(),
-      contrast: getNumber(),
+      contrast: getNumberAndArbitrary(),
       grayscale: getZeroAndEmpty(),
       hueRotate: getNumberAndArbitrary(),
       invert: getZeroAndEmpty(),
@@ -517,10 +481,10 @@ function getDefaultConfig() {
       gradientColorStopPositions: [isPercent, isArbitraryLength],
       inset: getSpacingWithAutoAndArbitrary(),
       margin: getSpacingWithAutoAndArbitrary(),
-      opacity: getNumber(),
+      opacity: getNumberAndArbitrary(),
       padding: getSpacingWithArbitrary(),
-      saturate: getNumber(),
-      scale: getNumber(),
+      saturate: getNumberAndArbitrary(),
+      scale: getNumberAndArbitrary(),
       sepia: getZeroAndEmpty(),
       skew: getNumberAndArbitrary(),
       space: getSpacingWithArbitrary(),
@@ -1221,7 +1185,7 @@ function getDefaultConfig() {
        * Font Variant Numeric
        * @see https://tailwindcss.com/docs/font-variant-numeric
        */
-      "fvn-fraction": ["diagonal-fractions", "stacked-fractons"],
+      "fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
       /**
        * Letter Spacing
        * @see https://tailwindcss.com/docs/letter-spacing
@@ -1745,6 +1709,20 @@ function getDefaultConfig() {
       "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
@@ -1875,7 +1853,7 @@ function getDefaultConfig() {
        * @see https://tailwindcss.com/docs/mix-blend-mode
        */
       "mix-blend": [{
-        "mix-blend": getBlendModes()
+        "mix-blend": [...getBlendModes(), "plus-lighter", "plus-darker"]
       }],
       /**
        * Background Blend Mode
@@ -2491,7 +2469,7 @@ function getDefaultConfig() {
       "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-t", "border-color-r", "border-color-b", "border-color-l"],
+      "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"],
@@ -2509,7 +2487,7 @@ function getDefaultConfig() {
       "font-size": ["leading"]
     }
   };
-}
+};
 var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 
 // src/components/Card/index.tsx
@@ -2547,11 +2525,20 @@ var Card = (_a) => {
       ),
       onClick,
       children: [
-        /* @__PURE__ */ jsx("img", { src: rest.image, alt: rest.title, width: imageSize }),
-        /* @__PURE__ */ jsxs("aside", { className: twMerge(direction === "col" && "text-center"), children: [
-          /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold font-default leading-tight", children: rest.title }),
-          /* @__PURE__ */ jsx("p", { className: "", children: rest.content })
-        ] })
+        /* @__PURE__ */ jsx("img", { src: rest.image, alt: rest.title, width: imageSize, height: "auto" }),
+        /* @__PURE__ */ jsxs(
+          "aside",
+          {
+            className: twMerge(
+              direction === "col" && "text-center",
+              "flex flex-col gap-2"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("h1", { className: "text-xl font-bold font-default leading-tight", children: rest.title }),
+              /* @__PURE__ */ jsx("p", { className: "text-justify", children: rest.content })
+            ]
+          }
+        )
       ]
     }
   );
@@ -2577,7 +2564,7 @@ var Button = (_a) => {
     "button",
     __spreadValues({
       className: twMerge(
-        "flex gap-4 items-center justify-center rounded-sm px-8 py-2 text-md font-medium hover:shadow-md hover:shadow-neutral-500 w-full",
+        "flex gap-4 items-center justify-center rounded-sm px-8 py-2 text-md font-medium hover:shadow-md hover:shadow-neutral-500 w-full max-w-[180px]",
         variant === "primary" && "bg-orange-500 text-neutral hover:bg-orange-700",
         variant === "secondary" && "bg-neutral text-orange-500 border border-orange-500 hover:text-orange-100 hover:bg-orange-500",
         size === "sm" && "px-6 py-1",
@@ -2680,7 +2667,7 @@ var Checkbox = ({ className, required, disabled }) => {
   const handleCheckboxChange = (value) => {
     setSelected(!value);
   };
-  return /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center px-2", children: /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsx5("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxs3(
     "label",
     {
       className: twMerge(
@@ -2988,18 +2975,22 @@ var TextArea = (_a) => {
   var _b = _a, {
     className,
     disabled,
+    reference,
     value,
     error,
     required,
     placeholder,
+    resize,
     onClick
   } = _b, rest = __objRest(_b, [
     "className",
     "disabled",
+    "reference",
     "value",
     "error",
     "required",
     "placeholder",
+    "resize",
     "onClick"
   ]);
   const [selected, setSelected] = useState5(false);
@@ -3020,6 +3011,7 @@ var TextArea = (_a) => {
     "textarea",
     __spreadValues({
       required,
+      ref: reference,
       disabled,
       className: twMerge(
         "rounded-sm w-full px-3 py-2 border-2 border-neutral text-md hover:shadow-md hover:shadow-neutral-500 focus:outline-none",
@@ -3027,7 +3019,8 @@ var TextArea = (_a) => {
         className,
         disabled === true && "opacity-50 cursor-not-allowed",
         selected === true && "border-2 border-orange-500",
-        error === true && "border-2 border-red-900"
+        error === true && "border-2 border-red-900",
+        resize === false && "resize-none overflow-hidden"
       ),
       onClick,
       onFocus: handleFocus,