bianic-ui 2.10.0-beta.2 → 2.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/README.md +49 -49
  2. package/dist/cjs/Empty.svg +12 -0
  3. package/dist/cjs/index.js +556 -3347
  4. package/dist/cjs/lib.css +1 -1
  5. package/dist/cjs/types/components/Forms/Checkbox/index.d.ts +2 -1
  6. package/dist/cjs/types/components/Forms/Dropdown/DropdownContainer.d.ts +1 -1
  7. package/dist/cjs/types/components/Sidebar/SidebarCointainer.d.ts +7 -6
  8. package/dist/cjs/types/components/Sidebar/SidebarItem.d.ts +9 -5
  9. package/dist/cjs/types/components/Sidebar/SidebarMenu.d.ts +10 -0
  10. package/dist/cjs/types/components/Sidebar/SidebarProfile.d.ts +17 -0
  11. package/dist/cjs/types/components/Sidebar/config.d.ts +21 -0
  12. package/dist/cjs/types/components/Sidebar/index.d.ts +2 -0
  13. package/dist/cjs/types/components/Table/Table.d.ts +6 -0
  14. package/dist/cjs/types/components/Table/TableBody.d.ts +6 -0
  15. package/dist/cjs/types/components/Table/TableHead.d.ts +6 -0
  16. package/dist/cjs/types/components/Table/TableRow/index.d.ts +6 -0
  17. package/dist/cjs/types/components/Table/TableUtility/BlockLoading.d.ts +6 -0
  18. package/dist/cjs/types/components/Table/TableUtility/EmptyTable.d.ts +7 -0
  19. package/dist/cjs/types/components/Table/TableUtility/TableFooterController.d.ts +12 -0
  20. package/dist/cjs/types/components/Table/TableUtility/TableHeaderController.d.ts +9 -0
  21. package/dist/cjs/types/components/Table/TableUtility/TableSearchInput.d.ts +11 -0
  22. package/dist/cjs/types/components/Table/TableUtility/index.d.ts +5 -0
  23. package/dist/cjs/types/components/Table/index.d.ts +5 -0
  24. package/dist/cjs/types/components/TagLabel/index.d.ts +1 -1
  25. package/dist/cjs/types/components/index.d.ts +3 -2
  26. package/dist/cjs/types/image/index.d.ts +2 -0
  27. package/dist/cjs/types/stories/Form/Checkbox/Checkbox.stories.d.ts +0 -1
  28. package/dist/cjs/types/stories/Form/Checkbox/CheckboxSimulation.stories.d.ts +0 -1
  29. package/dist/cjs/types/stories/Form/Dropdown/DropdownContainer.stories.d.ts +1 -1
  30. package/dist/cjs/types/stories/Sidebar/SidebarContainer.stories.d.ts +1 -2
  31. package/dist/cjs/types/stories/Sidebar/SidebarItem.stories.d.ts +1 -2
  32. package/dist/cjs/types/utility/helper.d.ts +2 -1
  33. package/dist/cjs/types/utility/hooks/useTableDataHandler.d.ts +54 -0
  34. package/dist/esm/Empty.svg +12 -0
  35. package/dist/esm/index.js +545 -3348
  36. package/dist/esm/lib.css +1 -1
  37. package/dist/esm/types/components/Forms/Checkbox/index.d.ts +2 -1
  38. package/dist/esm/types/components/Forms/Dropdown/DropdownContainer.d.ts +1 -1
  39. package/dist/esm/types/components/Sidebar/SidebarCointainer.d.ts +7 -6
  40. package/dist/esm/types/components/Sidebar/SidebarItem.d.ts +9 -5
  41. package/dist/esm/types/components/Sidebar/SidebarMenu.d.ts +10 -0
  42. package/dist/esm/types/components/Sidebar/SidebarProfile.d.ts +17 -0
  43. package/dist/esm/types/components/Sidebar/config.d.ts +21 -0
  44. package/dist/esm/types/components/Sidebar/index.d.ts +2 -0
  45. package/dist/esm/types/components/Table/Table.d.ts +6 -0
  46. package/dist/esm/types/components/Table/TableBody.d.ts +6 -0
  47. package/dist/esm/types/components/Table/TableHead.d.ts +6 -0
  48. package/dist/esm/types/components/Table/TableRow/index.d.ts +6 -0
  49. package/dist/esm/types/components/Table/TableUtility/BlockLoading.d.ts +6 -0
  50. package/dist/esm/types/components/Table/TableUtility/EmptyTable.d.ts +7 -0
  51. package/dist/esm/types/components/Table/TableUtility/TableFooterController.d.ts +12 -0
  52. package/dist/esm/types/components/Table/TableUtility/TableHeaderController.d.ts +9 -0
  53. package/dist/esm/types/components/Table/TableUtility/TableSearchInput.d.ts +11 -0
  54. package/dist/esm/types/components/Table/TableUtility/index.d.ts +5 -0
  55. package/dist/esm/types/components/Table/index.d.ts +5 -0
  56. package/dist/esm/types/components/TagLabel/index.d.ts +1 -1
  57. package/dist/esm/types/components/index.d.ts +3 -2
  58. package/dist/esm/types/image/index.d.ts +2 -0
  59. package/dist/esm/types/stories/Form/Checkbox/Checkbox.stories.d.ts +0 -1
  60. package/dist/esm/types/stories/Form/Checkbox/CheckboxSimulation.stories.d.ts +0 -1
  61. package/dist/esm/types/stories/Form/Dropdown/DropdownContainer.stories.d.ts +1 -1
  62. package/dist/esm/types/stories/Sidebar/SidebarContainer.stories.d.ts +1 -2
  63. package/dist/esm/types/stories/Sidebar/SidebarItem.stories.d.ts +1 -2
  64. package/dist/esm/types/utility/helper.d.ts +2 -1
  65. package/dist/esm/types/utility/hooks/useTableDataHandler.d.ts +54 -0
  66. package/dist/index.d.ts +155 -15
  67. package/package.json +143 -143
  68. package/src/font/SansCode/README.txt +88 -88
  69. package/src/style/color.css +650 -650
  70. package/src/style/scrollbar.css +78 -78
  71. package/tailwind.config.js +574 -574
  72. package/src/font/SansCode/GoogleSansCode-Italic-VariableFont_MONO,wght.ttf:Zone.Identifier +0 -0
  73. package/src/font/SansCode/GoogleSansCode-VariableFont_MONO,wght.ttf:Zone.Identifier +0 -0
  74. package/src/font/SansCode/OFL.txt:Zone.Identifier +0 -0
  75. package/src/font/SansCode/README.txt:Zone.Identifier +0 -0
package/dist/esm/index.js CHANGED
@@ -99,6 +99,8 @@ function TbCircleFilled (props) {
99
99
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"},"child":[]},{"tag":"path","attr":{"d":"M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"},"child":[]}]})(props);
100
100
  }function TbPlaystationX (props) {
101
101
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M12 21a9 9 0 0 0 9 -9a9 9 0 0 0 -9 -9a9 9 0 0 0 -9 9a9 9 0 0 0 9 9z"},"child":[]},{"tag":"path","attr":{"d":"M8.5 8.5l7 7"},"child":[]},{"tag":"path","attr":{"d":"M8.5 15.5l7 -7"},"child":[]}]})(props);
102
+ }function TbMinus (props) {
103
+ return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M5 12l14 0"},"child":[]}]})(props);
102
104
  }function TbLoader2 (props) {
103
105
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M12 3a9 9 0 1 0 9 9"},"child":[]}]})(props);
104
106
  }function TbEye (props) {
@@ -113,6 +115,8 @@ function TbCircleFilled (props) {
113
115
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M7 7l5 5l-5 5"},"child":[]},{"tag":"path","attr":{"d":"M13 7l5 5l-5 5"},"child":[]}]})(props);
114
116
  }function TbChevronsLeft (props) {
115
117
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M11 7l-5 5l5 5"},"child":[]},{"tag":"path","attr":{"d":"M17 7l-5 5l5 5"},"child":[]}]})(props);
118
+ }function TbChevronsDown (props) {
119
+ return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M7 7l5 5l5 -5"},"child":[]},{"tag":"path","attr":{"d":"M7 13l5 5l5 -5"},"child":[]}]})(props);
116
120
  }function TbChevronUp (props) {
117
121
  return GenIcon({"tag":"svg","attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M6 15l6 -6l6 6"},"child":[]}]})(props);
118
122
  }function TbChevronRight (props) {
@@ -269,6 +273,13 @@ var childrenElement = function (element) {
269
273
  // if (typeof element === 'object') return '';
270
274
  return element;
271
275
  };
276
+ var cn = function () {
277
+ var classes = [];
278
+ for (var _i = 0; _i < arguments.length; _i++) {
279
+ classes[_i] = arguments[_i];
280
+ }
281
+ return classes.filter(Boolean).join(' ');
282
+ };
272
283
  var validUnion = function (value, union) {
273
284
  return union.includes(value) ? value : union[0];
274
285
  };
@@ -722,8 +733,8 @@ Banner.defaultProps = {
722
733
  };
723
734
 
724
735
  var sizeConfig$d = {
725
- md: 'h-[16px] text-[12px]',
726
- sm: 'h-[15px] text-[10px]',
736
+ md: 'h-[16px] text-[11px]',
737
+ sm: 'h-[14px] text-[9px]',
727
738
  };
728
739
  var colorConfig$3 = {
729
740
  blue: 'bg-bia-blue-light-90 text-bia-blue-dark-10',
@@ -747,10 +758,9 @@ var MonospaceBadge = function (_a) {
747
758
  var text = _a.text, _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.color, color = _c === void 0 ? 'blue' : _c;
748
759
  var sizeClass = sizeConfig$d[size];
749
760
  var colorClass = colorConfig$3[color];
750
- var fontPosition = size === 'sm' ? 'top-[1px]' : '';
751
761
  var variantClass = "".concat(sizeClass, " ").concat(colorClass);
752
- return (React.createElement("span", { className: "relative -top-[1px] inline-flex w-fit items-center justify-center rounded-[2px] px-[3px] ".concat(variantClass) },
753
- React.createElement("span", { className: "font-sans-code relative ".concat(fontPosition) }, text)));
762
+ return (React.createElement("div", { className: "relative -top-[1px] inline-flex w-fit items-center justify-center rounded-[2px] px-[3px] ".concat(variantClass) },
763
+ React.createElement("div", { className: "font-sans-code leading-[0px]" }, text)));
754
764
  };
755
765
 
756
766
  function Biaenergi$6() {
@@ -1733,3294 +1743,6 @@ function Color() {
1733
1743
  }))));
1734
1744
  }
1735
1745
 
1736
- 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}
1737
-
1738
- /**
1739
- * Concatenates two arrays faster than the array spread operator.
1740
- */
1741
- const concatArrays = (array1, array2) => {
1742
- // Pre-allocate for better V8 optimization
1743
- const combinedArray = new Array(array1.length + array2.length);
1744
- for (let i = 0; i < array1.length; i++) {
1745
- combinedArray[i] = array1[i];
1746
- }
1747
- for (let i = 0; i < array2.length; i++) {
1748
- combinedArray[array1.length + i] = array2[i];
1749
- }
1750
- return combinedArray;
1751
- };
1752
-
1753
- // Factory function ensures consistent object shapes
1754
- const createClassValidatorObject = (classGroupId, validator) => ({
1755
- classGroupId,
1756
- validator
1757
- });
1758
- // Factory ensures consistent ClassPartObject shape
1759
- const createClassPartObject = (nextPart = new Map(), validators = null, classGroupId) => ({
1760
- nextPart,
1761
- validators,
1762
- classGroupId
1763
- });
1764
- const CLASS_PART_SEPARATOR = '-';
1765
- const EMPTY_CONFLICTS = [];
1766
- // I use two dots here because one dot is used as prefix for class groups in plugins
1767
- const ARBITRARY_PROPERTY_PREFIX = 'arbitrary..';
1768
- const createClassGroupUtils = config => {
1769
- const classMap = createClassMap(config);
1770
- const {
1771
- conflictingClassGroups,
1772
- conflictingClassGroupModifiers
1773
- } = config;
1774
- const getClassGroupId = className => {
1775
- if (className.startsWith('[') && className.endsWith(']')) {
1776
- return getGroupIdForArbitraryProperty(className);
1777
- }
1778
- const classParts = className.split(CLASS_PART_SEPARATOR);
1779
- // Classes like `-inset-1` produce an empty string as first classPart. We assume that classes for negative values are used correctly and skip it.
1780
- const startIndex = classParts[0] === '' && classParts.length > 1 ? 1 : 0;
1781
- return getGroupRecursive(classParts, startIndex, classMap);
1782
- };
1783
- const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
1784
- if (hasPostfixModifier) {
1785
- const modifierConflicts = conflictingClassGroupModifiers[classGroupId];
1786
- const baseConflicts = conflictingClassGroups[classGroupId];
1787
- if (modifierConflicts) {
1788
- if (baseConflicts) {
1789
- // Merge base conflicts with modifier conflicts
1790
- return concatArrays(baseConflicts, modifierConflicts);
1791
- }
1792
- // Only modifier conflicts
1793
- return modifierConflicts;
1794
- }
1795
- // Fall back to without postfix if no modifier conflicts
1796
- return baseConflicts || EMPTY_CONFLICTS;
1797
- }
1798
- return conflictingClassGroups[classGroupId] || EMPTY_CONFLICTS;
1799
- };
1800
- return {
1801
- getClassGroupId,
1802
- getConflictingClassGroupIds
1803
- };
1804
- };
1805
- const getGroupRecursive = (classParts, startIndex, classPartObject) => {
1806
- const classPathsLength = classParts.length - startIndex;
1807
- if (classPathsLength === 0) {
1808
- return classPartObject.classGroupId;
1809
- }
1810
- const currentClassPart = classParts[startIndex];
1811
- const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
1812
- if (nextClassPartObject) {
1813
- const result = getGroupRecursive(classParts, startIndex + 1, nextClassPartObject);
1814
- if (result) return result;
1815
- }
1816
- const validators = classPartObject.validators;
1817
- if (validators === null) {
1818
- return undefined;
1819
- }
1820
- // Build classRest string efficiently by joining from startIndex onwards
1821
- const classRest = startIndex === 0 ? classParts.join(CLASS_PART_SEPARATOR) : classParts.slice(startIndex).join(CLASS_PART_SEPARATOR);
1822
- const validatorsLength = validators.length;
1823
- for (let i = 0; i < validatorsLength; i++) {
1824
- const validatorObj = validators[i];
1825
- if (validatorObj.validator(classRest)) {
1826
- return validatorObj.classGroupId;
1827
- }
1828
- }
1829
- return undefined;
1830
- };
1831
- /**
1832
- * Get the class group ID for an arbitrary property.
1833
- *
1834
- * @param className - The class name to get the group ID for. Is expected to be string starting with `[` and ending with `]`.
1835
- */
1836
- const getGroupIdForArbitraryProperty = className => className.slice(1, -1).indexOf(':') === -1 ? undefined : (() => {
1837
- const content = className.slice(1, -1);
1838
- const colonIndex = content.indexOf(':');
1839
- const property = content.slice(0, colonIndex);
1840
- return property ? ARBITRARY_PROPERTY_PREFIX + property : undefined;
1841
- })();
1842
- /**
1843
- * Exported for testing only
1844
- */
1845
- const createClassMap = config => {
1846
- const {
1847
- theme,
1848
- classGroups
1849
- } = config;
1850
- return processClassGroups(classGroups, theme);
1851
- };
1852
- // Split into separate functions to maintain monomorphic call sites
1853
- const processClassGroups = (classGroups, theme) => {
1854
- const classMap = createClassPartObject();
1855
- for (const classGroupId in classGroups) {
1856
- const group = classGroups[classGroupId];
1857
- processClassesRecursively(group, classMap, classGroupId, theme);
1858
- }
1859
- return classMap;
1860
- };
1861
- const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
1862
- const len = classGroup.length;
1863
- for (let i = 0; i < len; i++) {
1864
- const classDefinition = classGroup[i];
1865
- processClassDefinition(classDefinition, classPartObject, classGroupId, theme);
1866
- }
1867
- };
1868
- // Split into separate functions for each type to maintain monomorphic call sites
1869
- const processClassDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
1870
- if (typeof classDefinition === 'string') {
1871
- processStringDefinition(classDefinition, classPartObject, classGroupId);
1872
- return;
1873
- }
1874
- if (typeof classDefinition === 'function') {
1875
- processFunctionDefinition(classDefinition, classPartObject, classGroupId, theme);
1876
- return;
1877
- }
1878
- processObjectDefinition(classDefinition, classPartObject, classGroupId, theme);
1879
- };
1880
- const processStringDefinition = (classDefinition, classPartObject, classGroupId) => {
1881
- const classPartObjectToEdit = classDefinition === '' ? classPartObject : getPart(classPartObject, classDefinition);
1882
- classPartObjectToEdit.classGroupId = classGroupId;
1883
- };
1884
- const processFunctionDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
1885
- if (isThemeGetter(classDefinition)) {
1886
- processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
1887
- return;
1888
- }
1889
- if (classPartObject.validators === null) {
1890
- classPartObject.validators = [];
1891
- }
1892
- classPartObject.validators.push(createClassValidatorObject(classGroupId, classDefinition));
1893
- };
1894
- const processObjectDefinition = (classDefinition, classPartObject, classGroupId, theme) => {
1895
- const entries = Object.entries(classDefinition);
1896
- const len = entries.length;
1897
- for (let i = 0; i < len; i++) {
1898
- const [key, value] = entries[i];
1899
- processClassesRecursively(value, getPart(classPartObject, key), classGroupId, theme);
1900
- }
1901
- };
1902
- const getPart = (classPartObject, path) => {
1903
- let current = classPartObject;
1904
- const parts = path.split(CLASS_PART_SEPARATOR);
1905
- const len = parts.length;
1906
- for (let i = 0; i < len; i++) {
1907
- const part = parts[i];
1908
- let next = current.nextPart.get(part);
1909
- if (!next) {
1910
- next = createClassPartObject();
1911
- current.nextPart.set(part, next);
1912
- }
1913
- current = next;
1914
- }
1915
- return current;
1916
- };
1917
- // Type guard maintains monomorphic check
1918
- const isThemeGetter = func => 'isThemeGetter' in func && func.isThemeGetter === true;
1919
-
1920
- // LRU cache implementation using plain objects for simplicity
1921
- const createLruCache = maxCacheSize => {
1922
- if (maxCacheSize < 1) {
1923
- return {
1924
- get: () => undefined,
1925
- set: () => {}
1926
- };
1927
- }
1928
- let cacheSize = 0;
1929
- let cache = Object.create(null);
1930
- let previousCache = Object.create(null);
1931
- const update = (key, value) => {
1932
- cache[key] = value;
1933
- cacheSize++;
1934
- if (cacheSize > maxCacheSize) {
1935
- cacheSize = 0;
1936
- previousCache = cache;
1937
- cache = Object.create(null);
1938
- }
1939
- };
1940
- return {
1941
- get(key) {
1942
- let value = cache[key];
1943
- if (value !== undefined) {
1944
- return value;
1945
- }
1946
- if ((value = previousCache[key]) !== undefined) {
1947
- update(key, value);
1948
- return value;
1949
- }
1950
- },
1951
- set(key, value) {
1952
- if (key in cache) {
1953
- cache[key] = value;
1954
- } else {
1955
- update(key, value);
1956
- }
1957
- }
1958
- };
1959
- };
1960
- const IMPORTANT_MODIFIER = '!';
1961
- const MODIFIER_SEPARATOR = ':';
1962
- const EMPTY_MODIFIERS = [];
1963
- // Pre-allocated result object shape for consistency
1964
- const createResultObject = (modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition, isExternal) => ({
1965
- modifiers,
1966
- hasImportantModifier,
1967
- baseClassName,
1968
- maybePostfixModifierPosition,
1969
- isExternal
1970
- });
1971
- const createParseClassName = config => {
1972
- const {
1973
- prefix,
1974
- experimentalParseClassName
1975
- } = config;
1976
- /**
1977
- * Parse class name into parts.
1978
- *
1979
- * Inspired by `splitAtTopLevelOnly` used in Tailwind CSS
1980
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v3.2.2/src/util/splitAtTopLevelOnly.js
1981
- */
1982
- let parseClassName = className => {
1983
- // Use simple array with push for better performance
1984
- const modifiers = [];
1985
- let bracketDepth = 0;
1986
- let parenDepth = 0;
1987
- let modifierStart = 0;
1988
- let postfixModifierPosition;
1989
- const len = className.length;
1990
- for (let index = 0; index < len; index++) {
1991
- const currentCharacter = className[index];
1992
- if (bracketDepth === 0 && parenDepth === 0) {
1993
- if (currentCharacter === MODIFIER_SEPARATOR) {
1994
- modifiers.push(className.slice(modifierStart, index));
1995
- modifierStart = index + 1;
1996
- continue;
1997
- }
1998
- if (currentCharacter === '/') {
1999
- postfixModifierPosition = index;
2000
- continue;
2001
- }
2002
- }
2003
- if (currentCharacter === '[') bracketDepth++;else if (currentCharacter === ']') bracketDepth--;else if (currentCharacter === '(') parenDepth++;else if (currentCharacter === ')') parenDepth--;
2004
- }
2005
- const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.slice(modifierStart);
2006
- // Inline important modifier check
2007
- let baseClassName = baseClassNameWithImportantModifier;
2008
- let hasImportantModifier = false;
2009
- if (baseClassNameWithImportantModifier.endsWith(IMPORTANT_MODIFIER)) {
2010
- baseClassName = baseClassNameWithImportantModifier.slice(0, -1);
2011
- hasImportantModifier = true;
2012
- } else if (
2013
- /**
2014
- * In Tailwind CSS v3 the important modifier was at the start of the base class name. This is still supported for legacy reasons.
2015
- * @see https://github.com/dcastil/tailwind-merge/issues/513#issuecomment-2614029864
2016
- */
2017
- baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER)) {
2018
- baseClassName = baseClassNameWithImportantModifier.slice(1);
2019
- hasImportantModifier = true;
2020
- }
2021
- const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : undefined;
2022
- return createResultObject(modifiers, hasImportantModifier, baseClassName, maybePostfixModifierPosition);
2023
- };
2024
- if (prefix) {
2025
- const fullPrefix = prefix + MODIFIER_SEPARATOR;
2026
- const parseClassNameOriginal = parseClassName;
2027
- parseClassName = className => className.startsWith(fullPrefix) ? parseClassNameOriginal(className.slice(fullPrefix.length)) : createResultObject(EMPTY_MODIFIERS, false, className, undefined, true);
2028
- }
2029
- if (experimentalParseClassName) {
2030
- const parseClassNameOriginal = parseClassName;
2031
- parseClassName = className => experimentalParseClassName({
2032
- className,
2033
- parseClassName: parseClassNameOriginal
2034
- });
2035
- }
2036
- return parseClassName;
2037
- };
2038
-
2039
- /**
2040
- * Sorts modifiers according to following schema:
2041
- * - Predefined modifiers are sorted alphabetically
2042
- * - When an arbitrary variant appears, it must be preserved which modifiers are before and after it
2043
- */
2044
- const createSortModifiers = config => {
2045
- // Pre-compute weights for all known modifiers for O(1) comparison
2046
- const modifierWeights = new Map();
2047
- // Assign weights to sensitive modifiers (highest priority, but preserve order)
2048
- config.orderSensitiveModifiers.forEach((mod, index) => {
2049
- modifierWeights.set(mod, 1000000 + index); // High weights for sensitive mods
2050
- });
2051
- return modifiers => {
2052
- const result = [];
2053
- let currentSegment = [];
2054
- // Process modifiers in one pass
2055
- for (let i = 0; i < modifiers.length; i++) {
2056
- const modifier = modifiers[i];
2057
- // Check if modifier is sensitive (starts with '[' or in orderSensitiveModifiers)
2058
- const isArbitrary = modifier[0] === '[';
2059
- const isOrderSensitive = modifierWeights.has(modifier);
2060
- if (isArbitrary || isOrderSensitive) {
2061
- // Sort and flush current segment alphabetically
2062
- if (currentSegment.length > 0) {
2063
- currentSegment.sort();
2064
- result.push(...currentSegment);
2065
- currentSegment = [];
2066
- }
2067
- result.push(modifier);
2068
- } else {
2069
- // Regular modifier - add to current segment for batch sorting
2070
- currentSegment.push(modifier);
2071
- }
2072
- }
2073
- // Sort and add any remaining segment items
2074
- if (currentSegment.length > 0) {
2075
- currentSegment.sort();
2076
- result.push(...currentSegment);
2077
- }
2078
- return result;
2079
- };
2080
- };
2081
- const createConfigUtils = config => ({
2082
- cache: createLruCache(config.cacheSize),
2083
- parseClassName: createParseClassName(config),
2084
- sortModifiers: createSortModifiers(config),
2085
- postfixLookupClassGroupIds: createPostfixLookupClassGroupIds(config),
2086
- ...createClassGroupUtils(config)
2087
- });
2088
- const createPostfixLookupClassGroupIds = config => {
2089
- const lookup = Object.create(null);
2090
- const classGroupIds = config.postfixLookupClassGroups;
2091
- if (classGroupIds) {
2092
- for (let i = 0; i < classGroupIds.length; i++) {
2093
- lookup[classGroupIds[i]] = true;
2094
- }
2095
- }
2096
- return lookup;
2097
- };
2098
- const SPLIT_CLASSES_REGEX = /\s+/;
2099
- const mergeClassList = (classList, configUtils) => {
2100
- const {
2101
- parseClassName,
2102
- getClassGroupId,
2103
- getConflictingClassGroupIds,
2104
- sortModifiers,
2105
- postfixLookupClassGroupIds
2106
- } = configUtils;
2107
- /**
2108
- * Set of classGroupIds in following format:
2109
- * `{importantModifier}{variantModifiers}{classGroupId}`
2110
- * @example 'float'
2111
- * @example 'hover:focus:bg-color'
2112
- * @example 'md:!pr'
2113
- */
2114
- const classGroupsInConflict = [];
2115
- const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
2116
- let result = '';
2117
- for (let index = classNames.length - 1; index >= 0; index -= 1) {
2118
- const originalClassName = classNames[index];
2119
- const {
2120
- isExternal,
2121
- modifiers,
2122
- hasImportantModifier,
2123
- baseClassName,
2124
- maybePostfixModifierPosition
2125
- } = parseClassName(originalClassName);
2126
- if (isExternal) {
2127
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
2128
- continue;
2129
- }
2130
- let hasPostfixModifier = !!maybePostfixModifierPosition;
2131
- let classGroupId;
2132
- if (hasPostfixModifier) {
2133
- const baseClassNameWithoutPostfix = baseClassName.substring(0, maybePostfixModifierPosition);
2134
- classGroupId = getClassGroupId(baseClassNameWithoutPostfix);
2135
- const classGroupIdWithPostfix = classGroupId && postfixLookupClassGroupIds[classGroupId] ? getClassGroupId(baseClassName) : undefined;
2136
- if (classGroupIdWithPostfix && classGroupIdWithPostfix !== classGroupId) {
2137
- classGroupId = classGroupIdWithPostfix;
2138
- hasPostfixModifier = false;
2139
- }
2140
- } else {
2141
- classGroupId = getClassGroupId(baseClassName);
2142
- }
2143
- if (!classGroupId) {
2144
- if (!hasPostfixModifier) {
2145
- // Not a Tailwind class
2146
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
2147
- continue;
2148
- }
2149
- classGroupId = getClassGroupId(baseClassName);
2150
- if (!classGroupId) {
2151
- // Not a Tailwind class
2152
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
2153
- continue;
2154
- }
2155
- hasPostfixModifier = false;
2156
- }
2157
- // Fast path: skip sorting for empty or single modifier
2158
- const variantModifier = modifiers.length === 0 ? '' : modifiers.length === 1 ? modifiers[0] : sortModifiers(modifiers).join(':');
2159
- const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
2160
- const classId = modifierId + classGroupId;
2161
- if (classGroupsInConflict.indexOf(classId) > -1) {
2162
- // Tailwind class omitted due to conflict
2163
- continue;
2164
- }
2165
- classGroupsInConflict.push(classId);
2166
- const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
2167
- for (let i = 0; i < conflictGroups.length; ++i) {
2168
- const group = conflictGroups[i];
2169
- classGroupsInConflict.push(modifierId + group);
2170
- }
2171
- // Tailwind class not in conflict
2172
- result = originalClassName + (result.length > 0 ? ' ' + result : result);
2173
- }
2174
- return result;
2175
- };
2176
-
2177
- /**
2178
- * The code in this file is copied from https://github.com/lukeed/clsx and modified to suit the needs of tailwind-merge better.
2179
- *
2180
- * Specifically:
2181
- * - Runtime code from https://github.com/lukeed/clsx/blob/v1.2.1/src/index.js
2182
- * - TypeScript types from https://github.com/lukeed/clsx/blob/v1.2.1/clsx.d.ts
2183
- *
2184
- * Original code has MIT license: Copyright (c) Luke Edwards <luke.edwards05@gmail.com> (lukeed.com)
2185
- */
2186
- const twJoin = (...classLists) => {
2187
- let index = 0;
2188
- let argument;
2189
- let resolvedValue;
2190
- let string = '';
2191
- while (index < classLists.length) {
2192
- if (argument = classLists[index++]) {
2193
- if (resolvedValue = toValue(argument)) {
2194
- string && (string += ' ');
2195
- string += resolvedValue;
2196
- }
2197
- }
2198
- }
2199
- return string;
2200
- };
2201
- const toValue = mix => {
2202
- // Fast path for strings
2203
- if (typeof mix === 'string') {
2204
- return mix;
2205
- }
2206
- let resolvedValue;
2207
- let string = '';
2208
- for (let k = 0; k < mix.length; k++) {
2209
- if (mix[k]) {
2210
- if (resolvedValue = toValue(mix[k])) {
2211
- string && (string += ' ');
2212
- string += resolvedValue;
2213
- }
2214
- }
2215
- }
2216
- return string;
2217
- };
2218
- const createTailwindMerge = (createConfigFirst, ...createConfigRest) => {
2219
- let configUtils;
2220
- let cacheGet;
2221
- let cacheSet;
2222
- let functionToCall;
2223
- const initTailwindMerge = classList => {
2224
- const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
2225
- configUtils = createConfigUtils(config);
2226
- cacheGet = configUtils.cache.get;
2227
- cacheSet = configUtils.cache.set;
2228
- functionToCall = tailwindMerge;
2229
- return tailwindMerge(classList);
2230
- };
2231
- const tailwindMerge = classList => {
2232
- const cachedResult = cacheGet(classList);
2233
- if (cachedResult) {
2234
- return cachedResult;
2235
- }
2236
- const result = mergeClassList(classList, configUtils);
2237
- cacheSet(classList, result);
2238
- return result;
2239
- };
2240
- functionToCall = initTailwindMerge;
2241
- return (...args) => functionToCall(twJoin(...args));
2242
- };
2243
- const fallbackThemeArr = [];
2244
- const fromTheme = key => {
2245
- const themeGetter = theme => theme[key] || fallbackThemeArr;
2246
- themeGetter.isThemeGetter = true;
2247
- return themeGetter;
2248
- };
2249
- const arbitraryValueRegex = /^\[(?:(\w[\w-]*):)?(.+)\]$/i;
2250
- const arbitraryVariableRegex = /^\((?:(\w[\w-]*):)?(.+)\)$/i;
2251
- const fractionRegex = /^\d+(?:\.\d+)?\/\d+(?:\.\d+)?$/;
2252
- const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
2253
- 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$/;
2254
- const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch)|color-mix)\(.+\)$/;
2255
- // Shadow always begins with x and y offset separated by underscore optionally prepended by inset
2256
- const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
2257
- const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
2258
- const isFraction = value => fractionRegex.test(value);
2259
- const isNumber = value => !!value && !Number.isNaN(Number(value));
2260
- const isInteger = value => !!value && Number.isInteger(Number(value));
2261
- const isPercent = value => value.endsWith('%') && isNumber(value.slice(0, -1));
2262
- const isTshirtSize = value => tshirtUnitRegex.test(value);
2263
- const isAny = () => true;
2264
- const isLengthOnly = value =>
2265
- // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
2266
- // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
2267
- // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
2268
- lengthUnitRegex.test(value) && !colorFunctionRegex.test(value);
2269
- const isNever = () => false;
2270
- const isShadow = value => shadowRegex.test(value);
2271
- const isImage = value => imageRegex.test(value);
2272
- const isAnyNonArbitrary = value => !isArbitraryValue(value) && !isArbitraryVariable(value);
2273
- const isNamedContainerQuery = value => value.startsWith('@container') && (value[10] === '/' && value[11] !== undefined || value[11] === 's' && value[16] !== undefined && value.startsWith('-size/', 10) || value[11] === 'n' && value[18] !== undefined && value.startsWith('-normal/', 10));
2274
- const isArbitrarySize = value => getIsArbitraryValue(value, isLabelSize, isNever);
2275
- const isArbitraryValue = value => arbitraryValueRegex.test(value);
2276
- const isArbitraryLength = value => getIsArbitraryValue(value, isLabelLength, isLengthOnly);
2277
- const isArbitraryNumber = value => getIsArbitraryValue(value, isLabelNumber, isNumber);
2278
- const isArbitraryWeight = value => getIsArbitraryValue(value, isLabelWeight, isAny);
2279
- const isArbitraryFamilyName = value => getIsArbitraryValue(value, isLabelFamilyName, isNever);
2280
- const isArbitraryPosition = value => getIsArbitraryValue(value, isLabelPosition, isNever);
2281
- const isArbitraryImage = value => getIsArbitraryValue(value, isLabelImage, isImage);
2282
- const isArbitraryShadow = value => getIsArbitraryValue(value, isLabelShadow, isShadow);
2283
- const isArbitraryVariable = value => arbitraryVariableRegex.test(value);
2284
- const isArbitraryVariableLength = value => getIsArbitraryVariable(value, isLabelLength);
2285
- const isArbitraryVariableFamilyName = value => getIsArbitraryVariable(value, isLabelFamilyName);
2286
- const isArbitraryVariablePosition = value => getIsArbitraryVariable(value, isLabelPosition);
2287
- const isArbitraryVariableSize = value => getIsArbitraryVariable(value, isLabelSize);
2288
- const isArbitraryVariableImage = value => getIsArbitraryVariable(value, isLabelImage);
2289
- const isArbitraryVariableShadow = value => getIsArbitraryVariable(value, isLabelShadow, true);
2290
- const isArbitraryVariableWeight = value => getIsArbitraryVariable(value, isLabelWeight, true);
2291
- // Helpers
2292
- const getIsArbitraryValue = (value, testLabel, testValue) => {
2293
- const result = arbitraryValueRegex.exec(value);
2294
- if (result) {
2295
- if (result[1]) {
2296
- return testLabel(result[1]);
2297
- }
2298
- return testValue(result[2]);
2299
- }
2300
- return false;
2301
- };
2302
- const getIsArbitraryVariable = (value, testLabel, shouldMatchNoLabel = false) => {
2303
- const result = arbitraryVariableRegex.exec(value);
2304
- if (result) {
2305
- if (result[1]) {
2306
- return testLabel(result[1]);
2307
- }
2308
- return shouldMatchNoLabel;
2309
- }
2310
- return false;
2311
- };
2312
- // Labels
2313
- const isLabelPosition = label => label === 'position' || label === 'percentage';
2314
- const isLabelImage = label => label === 'image' || label === 'url';
2315
- const isLabelSize = label => label === 'length' || label === 'size' || label === 'bg-size';
2316
- const isLabelLength = label => label === 'length';
2317
- const isLabelNumber = label => label === 'number';
2318
- const isLabelFamilyName = label => label === 'family-name';
2319
- const isLabelWeight = label => label === 'number' || label === 'weight';
2320
- const isLabelShadow = label => label === 'shadow';
2321
- const getDefaultConfig = () => {
2322
- /**
2323
- * Theme getters for theme variable namespaces
2324
- * @see https://tailwindcss.com/docs/theme#theme-variable-namespaces
2325
- */
2326
- /***/
2327
- const themeColor = fromTheme('color');
2328
- const themeFont = fromTheme('font');
2329
- const themeText = fromTheme('text');
2330
- const themeFontWeight = fromTheme('font-weight');
2331
- const themeTracking = fromTheme('tracking');
2332
- const themeLeading = fromTheme('leading');
2333
- const themeBreakpoint = fromTheme('breakpoint');
2334
- const themeContainer = fromTheme('container');
2335
- const themeSpacing = fromTheme('spacing');
2336
- const themeRadius = fromTheme('radius');
2337
- const themeShadow = fromTheme('shadow');
2338
- const themeInsetShadow = fromTheme('inset-shadow');
2339
- const themeTextShadow = fromTheme('text-shadow');
2340
- const themeDropShadow = fromTheme('drop-shadow');
2341
- const themeBlur = fromTheme('blur');
2342
- const themePerspective = fromTheme('perspective');
2343
- const themeAspect = fromTheme('aspect');
2344
- const themeEase = fromTheme('ease');
2345
- const themeAnimate = fromTheme('animate');
2346
- /**
2347
- * Helpers to avoid repeating the same scales
2348
- *
2349
- * We use functions that create a new array every time they're called instead of static arrays.
2350
- * This ensures that users who modify any scale by mutating the array (e.g. with `array.push(element)`) don't accidentally mutate arrays in other parts of the config.
2351
- */
2352
- /***/
2353
- const scaleBreak = () => ['auto', 'avoid', 'all', 'avoid-page', 'page', 'left', 'right', 'column'];
2354
- const scalePosition = () => ['center', 'top', 'bottom', 'left', 'right', 'top-left',
2355
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
2356
- 'left-top', 'top-right',
2357
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
2358
- 'right-top', 'bottom-right',
2359
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
2360
- 'right-bottom', 'bottom-left',
2361
- // Deprecated since Tailwind CSS v4.1.0, see https://github.com/tailwindlabs/tailwindcss/pull/17378
2362
- 'left-bottom'];
2363
- const scalePositionWithArbitrary = () => [...scalePosition(), isArbitraryVariable, isArbitraryValue];
2364
- const scaleOverflow = () => ['auto', 'hidden', 'clip', 'visible', 'scroll'];
2365
- const scaleOverscroll = () => ['auto', 'contain', 'none'];
2366
- const scaleUnambiguousSpacing = () => [isArbitraryVariable, isArbitraryValue, themeSpacing];
2367
- const scaleInset = () => [isFraction, 'full', 'auto', ...scaleUnambiguousSpacing()];
2368
- const scaleGridTemplateColsRows = () => [isInteger, 'none', 'subgrid', isArbitraryVariable, isArbitraryValue];
2369
- const scaleGridColRowStartAndEnd = () => ['auto', {
2370
- span: ['full', isInteger, isArbitraryVariable, isArbitraryValue]
2371
- }, isInteger, isArbitraryVariable, isArbitraryValue];
2372
- const scaleGridColRowStartOrEnd = () => [isInteger, 'auto', isArbitraryVariable, isArbitraryValue];
2373
- const scaleGridAutoColsRows = () => ['auto', 'min', 'max', 'fr', isArbitraryVariable, isArbitraryValue];
2374
- const scaleAlignPrimaryAxis = () => ['start', 'end', 'center', 'between', 'around', 'evenly', 'stretch', 'baseline', 'center-safe', 'end-safe'];
2375
- const scaleAlignSecondaryAxis = () => ['start', 'end', 'center', 'stretch', 'center-safe', 'end-safe'];
2376
- const scaleMargin = () => ['auto', ...scaleUnambiguousSpacing()];
2377
- const scaleSizing = () => [isFraction, 'auto', 'full', 'dvw', 'dvh', 'lvw', 'lvh', 'svw', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
2378
- const scaleSizingInline = () => [isFraction, 'screen', 'full', 'dvw', 'lvw', 'svw', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
2379
- const scaleSizingBlock = () => [isFraction, 'screen', 'full', 'lh', 'dvh', 'lvh', 'svh', 'min', 'max', 'fit', ...scaleUnambiguousSpacing()];
2380
- const scaleColor = () => [themeColor, isArbitraryVariable, isArbitraryValue];
2381
- const scaleBgPosition = () => [...scalePosition(), isArbitraryVariablePosition, isArbitraryPosition, {
2382
- position: [isArbitraryVariable, isArbitraryValue]
2383
- }];
2384
- const scaleBgRepeat = () => ['no-repeat', {
2385
- repeat: ['', 'x', 'y', 'space', 'round']
2386
- }];
2387
- const scaleBgSize = () => ['auto', 'cover', 'contain', isArbitraryVariableSize, isArbitrarySize, {
2388
- size: [isArbitraryVariable, isArbitraryValue]
2389
- }];
2390
- const scaleGradientStopPosition = () => [isPercent, isArbitraryVariableLength, isArbitraryLength];
2391
- const scaleRadius = () => [
2392
- // Deprecated since Tailwind CSS v4.0.0
2393
- '', 'none', 'full', themeRadius, isArbitraryVariable, isArbitraryValue];
2394
- const scaleBorderWidth = () => ['', isNumber, isArbitraryVariableLength, isArbitraryLength];
2395
- const scaleLineStyle = () => ['solid', 'dashed', 'dotted', 'double'];
2396
- const scaleBlendMode = () => ['normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'];
2397
- const scaleMaskImagePosition = () => [isNumber, isPercent, isArbitraryVariablePosition, isArbitraryPosition];
2398
- const scaleBlur = () => [
2399
- // Deprecated since Tailwind CSS v4.0.0
2400
- '', 'none', themeBlur, isArbitraryVariable, isArbitraryValue];
2401
- const scaleRotate = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
2402
- const scaleScale = () => ['none', isNumber, isArbitraryVariable, isArbitraryValue];
2403
- const scaleSkew = () => [isNumber, isArbitraryVariable, isArbitraryValue];
2404
- const scaleTranslate = () => [isFraction, 'full', ...scaleUnambiguousSpacing()];
2405
- return {
2406
- cacheSize: 500,
2407
- theme: {
2408
- animate: ['spin', 'ping', 'pulse', 'bounce'],
2409
- aspect: ['video'],
2410
- blur: [isTshirtSize],
2411
- breakpoint: [isTshirtSize],
2412
- color: [isAny],
2413
- container: [isTshirtSize],
2414
- 'drop-shadow': [isTshirtSize],
2415
- ease: ['in', 'out', 'in-out'],
2416
- font: [isAnyNonArbitrary],
2417
- 'font-weight': ['thin', 'extralight', 'light', 'normal', 'medium', 'semibold', 'bold', 'extrabold', 'black'],
2418
- 'inset-shadow': [isTshirtSize],
2419
- leading: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'],
2420
- perspective: ['dramatic', 'near', 'normal', 'midrange', 'distant', 'none'],
2421
- radius: [isTshirtSize],
2422
- shadow: [isTshirtSize],
2423
- spacing: ['px', isNumber],
2424
- text: [isTshirtSize],
2425
- 'text-shadow': [isTshirtSize],
2426
- tracking: ['tighter', 'tight', 'normal', 'wide', 'wider', 'widest']
2427
- },
2428
- classGroups: {
2429
- // --------------
2430
- // --- Layout ---
2431
- // --------------
2432
- /**
2433
- * Aspect Ratio
2434
- * @see https://tailwindcss.com/docs/aspect-ratio
2435
- */
2436
- aspect: [{
2437
- aspect: ['auto', 'square', isFraction, isArbitraryValue, isArbitraryVariable, themeAspect]
2438
- }],
2439
- /**
2440
- * Container
2441
- * @see https://tailwindcss.com/docs/container
2442
- * @deprecated since Tailwind CSS v4.0.0
2443
- */
2444
- container: ['container'],
2445
- /**
2446
- * Container Type
2447
- * @see https://tailwindcss.com/docs/responsive-design#container-queries
2448
- */
2449
- 'container-type': [{
2450
- '@container': ['', 'normal', 'size', isArbitraryVariable, isArbitraryValue]
2451
- }],
2452
- /**
2453
- * Container Name
2454
- * @see https://tailwindcss.com/docs/responsive-design#named-containers
2455
- */
2456
- 'container-named': [isNamedContainerQuery],
2457
- /**
2458
- * Columns
2459
- * @see https://tailwindcss.com/docs/columns
2460
- */
2461
- columns: [{
2462
- columns: [isNumber, isArbitraryValue, isArbitraryVariable, themeContainer]
2463
- }],
2464
- /**
2465
- * Break After
2466
- * @see https://tailwindcss.com/docs/break-after
2467
- */
2468
- 'break-after': [{
2469
- 'break-after': scaleBreak()
2470
- }],
2471
- /**
2472
- * Break Before
2473
- * @see https://tailwindcss.com/docs/break-before
2474
- */
2475
- 'break-before': [{
2476
- 'break-before': scaleBreak()
2477
- }],
2478
- /**
2479
- * Break Inside
2480
- * @see https://tailwindcss.com/docs/break-inside
2481
- */
2482
- 'break-inside': [{
2483
- 'break-inside': ['auto', 'avoid', 'avoid-page', 'avoid-column']
2484
- }],
2485
- /**
2486
- * Box Decoration Break
2487
- * @see https://tailwindcss.com/docs/box-decoration-break
2488
- */
2489
- 'box-decoration': [{
2490
- 'box-decoration': ['slice', 'clone']
2491
- }],
2492
- /**
2493
- * Box Sizing
2494
- * @see https://tailwindcss.com/docs/box-sizing
2495
- */
2496
- box: [{
2497
- box: ['border', 'content']
2498
- }],
2499
- /**
2500
- * Display
2501
- * @see https://tailwindcss.com/docs/display
2502
- */
2503
- 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'],
2504
- /**
2505
- * Screen Reader Only
2506
- * @see https://tailwindcss.com/docs/display#screen-reader-only
2507
- */
2508
- sr: ['sr-only', 'not-sr-only'],
2509
- /**
2510
- * Floats
2511
- * @see https://tailwindcss.com/docs/float
2512
- */
2513
- float: [{
2514
- float: ['right', 'left', 'none', 'start', 'end']
2515
- }],
2516
- /**
2517
- * Clear
2518
- * @see https://tailwindcss.com/docs/clear
2519
- */
2520
- clear: [{
2521
- clear: ['left', 'right', 'both', 'none', 'start', 'end']
2522
- }],
2523
- /**
2524
- * Isolation
2525
- * @see https://tailwindcss.com/docs/isolation
2526
- */
2527
- isolation: ['isolate', 'isolation-auto'],
2528
- /**
2529
- * Object Fit
2530
- * @see https://tailwindcss.com/docs/object-fit
2531
- */
2532
- 'object-fit': [{
2533
- object: ['contain', 'cover', 'fill', 'none', 'scale-down']
2534
- }],
2535
- /**
2536
- * Object Position
2537
- * @see https://tailwindcss.com/docs/object-position
2538
- */
2539
- 'object-position': [{
2540
- object: scalePositionWithArbitrary()
2541
- }],
2542
- /**
2543
- * Overflow
2544
- * @see https://tailwindcss.com/docs/overflow
2545
- */
2546
- overflow: [{
2547
- overflow: scaleOverflow()
2548
- }],
2549
- /**
2550
- * Overflow X
2551
- * @see https://tailwindcss.com/docs/overflow
2552
- */
2553
- 'overflow-x': [{
2554
- 'overflow-x': scaleOverflow()
2555
- }],
2556
- /**
2557
- * Overflow Y
2558
- * @see https://tailwindcss.com/docs/overflow
2559
- */
2560
- 'overflow-y': [{
2561
- 'overflow-y': scaleOverflow()
2562
- }],
2563
- /**
2564
- * Overscroll Behavior
2565
- * @see https://tailwindcss.com/docs/overscroll-behavior
2566
- */
2567
- overscroll: [{
2568
- overscroll: scaleOverscroll()
2569
- }],
2570
- /**
2571
- * Overscroll Behavior X
2572
- * @see https://tailwindcss.com/docs/overscroll-behavior
2573
- */
2574
- 'overscroll-x': [{
2575
- 'overscroll-x': scaleOverscroll()
2576
- }],
2577
- /**
2578
- * Overscroll Behavior Y
2579
- * @see https://tailwindcss.com/docs/overscroll-behavior
2580
- */
2581
- 'overscroll-y': [{
2582
- 'overscroll-y': scaleOverscroll()
2583
- }],
2584
- /**
2585
- * Position
2586
- * @see https://tailwindcss.com/docs/position
2587
- */
2588
- position: ['static', 'fixed', 'absolute', 'relative', 'sticky'],
2589
- /**
2590
- * Inset
2591
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2592
- */
2593
- inset: [{
2594
- inset: scaleInset()
2595
- }],
2596
- /**
2597
- * Inset Inline
2598
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2599
- */
2600
- 'inset-x': [{
2601
- 'inset-x': scaleInset()
2602
- }],
2603
- /**
2604
- * Inset Block
2605
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2606
- */
2607
- 'inset-y': [{
2608
- 'inset-y': scaleInset()
2609
- }],
2610
- /**
2611
- * Inset Inline Start
2612
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2613
- * @todo class group will be renamed to `inset-s` in next major release
2614
- */
2615
- start: [{
2616
- 'inset-s': scaleInset(),
2617
- /**
2618
- * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-s-*` utilities.
2619
- * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
2620
- */
2621
- start: scaleInset()
2622
- }],
2623
- /**
2624
- * Inset Inline End
2625
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2626
- * @todo class group will be renamed to `inset-e` in next major release
2627
- */
2628
- end: [{
2629
- 'inset-e': scaleInset(),
2630
- /**
2631
- * @deprecated since Tailwind CSS v4.2.0 in favor of `inset-e-*` utilities.
2632
- * @see https://github.com/tailwindlabs/tailwindcss/pull/19613
2633
- */
2634
- end: scaleInset()
2635
- }],
2636
- /**
2637
- * Inset Block Start
2638
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2639
- */
2640
- 'inset-bs': [{
2641
- 'inset-bs': scaleInset()
2642
- }],
2643
- /**
2644
- * Inset Block End
2645
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2646
- */
2647
- 'inset-be': [{
2648
- 'inset-be': scaleInset()
2649
- }],
2650
- /**
2651
- * Top
2652
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2653
- */
2654
- top: [{
2655
- top: scaleInset()
2656
- }],
2657
- /**
2658
- * Right
2659
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2660
- */
2661
- right: [{
2662
- right: scaleInset()
2663
- }],
2664
- /**
2665
- * Bottom
2666
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2667
- */
2668
- bottom: [{
2669
- bottom: scaleInset()
2670
- }],
2671
- /**
2672
- * Left
2673
- * @see https://tailwindcss.com/docs/top-right-bottom-left
2674
- */
2675
- left: [{
2676
- left: scaleInset()
2677
- }],
2678
- /**
2679
- * Visibility
2680
- * @see https://tailwindcss.com/docs/visibility
2681
- */
2682
- visibility: ['visible', 'invisible', 'collapse'],
2683
- /**
2684
- * Z-Index
2685
- * @see https://tailwindcss.com/docs/z-index
2686
- */
2687
- z: [{
2688
- z: [isInteger, 'auto', isArbitraryVariable, isArbitraryValue]
2689
- }],
2690
- // ------------------------
2691
- // --- Flexbox and Grid ---
2692
- // ------------------------
2693
- /**
2694
- * Flex Basis
2695
- * @see https://tailwindcss.com/docs/flex-basis
2696
- */
2697
- basis: [{
2698
- basis: [isFraction, 'full', 'auto', themeContainer, ...scaleUnambiguousSpacing()]
2699
- }],
2700
- /**
2701
- * Flex Direction
2702
- * @see https://tailwindcss.com/docs/flex-direction
2703
- */
2704
- 'flex-direction': [{
2705
- flex: ['row', 'row-reverse', 'col', 'col-reverse']
2706
- }],
2707
- /**
2708
- * Flex Wrap
2709
- * @see https://tailwindcss.com/docs/flex-wrap
2710
- */
2711
- 'flex-wrap': [{
2712
- flex: ['nowrap', 'wrap', 'wrap-reverse']
2713
- }],
2714
- /**
2715
- * Flex
2716
- * @see https://tailwindcss.com/docs/flex
2717
- */
2718
- flex: [{
2719
- flex: [isNumber, isFraction, 'auto', 'initial', 'none', isArbitraryValue]
2720
- }],
2721
- /**
2722
- * Flex Grow
2723
- * @see https://tailwindcss.com/docs/flex-grow
2724
- */
2725
- grow: [{
2726
- grow: ['', isNumber, isArbitraryVariable, isArbitraryValue]
2727
- }],
2728
- /**
2729
- * Flex Shrink
2730
- * @see https://tailwindcss.com/docs/flex-shrink
2731
- */
2732
- shrink: [{
2733
- shrink: ['', isNumber, isArbitraryVariable, isArbitraryValue]
2734
- }],
2735
- /**
2736
- * Order
2737
- * @see https://tailwindcss.com/docs/order
2738
- */
2739
- order: [{
2740
- order: [isInteger, 'first', 'last', 'none', isArbitraryVariable, isArbitraryValue]
2741
- }],
2742
- /**
2743
- * Grid Template Columns
2744
- * @see https://tailwindcss.com/docs/grid-template-columns
2745
- */
2746
- 'grid-cols': [{
2747
- 'grid-cols': scaleGridTemplateColsRows()
2748
- }],
2749
- /**
2750
- * Grid Column Start / End
2751
- * @see https://tailwindcss.com/docs/grid-column
2752
- */
2753
- 'col-start-end': [{
2754
- col: scaleGridColRowStartAndEnd()
2755
- }],
2756
- /**
2757
- * Grid Column Start
2758
- * @see https://tailwindcss.com/docs/grid-column
2759
- */
2760
- 'col-start': [{
2761
- 'col-start': scaleGridColRowStartOrEnd()
2762
- }],
2763
- /**
2764
- * Grid Column End
2765
- * @see https://tailwindcss.com/docs/grid-column
2766
- */
2767
- 'col-end': [{
2768
- 'col-end': scaleGridColRowStartOrEnd()
2769
- }],
2770
- /**
2771
- * Grid Template Rows
2772
- * @see https://tailwindcss.com/docs/grid-template-rows
2773
- */
2774
- 'grid-rows': [{
2775
- 'grid-rows': scaleGridTemplateColsRows()
2776
- }],
2777
- /**
2778
- * Grid Row Start / End
2779
- * @see https://tailwindcss.com/docs/grid-row
2780
- */
2781
- 'row-start-end': [{
2782
- row: scaleGridColRowStartAndEnd()
2783
- }],
2784
- /**
2785
- * Grid Row Start
2786
- * @see https://tailwindcss.com/docs/grid-row
2787
- */
2788
- 'row-start': [{
2789
- 'row-start': scaleGridColRowStartOrEnd()
2790
- }],
2791
- /**
2792
- * Grid Row End
2793
- * @see https://tailwindcss.com/docs/grid-row
2794
- */
2795
- 'row-end': [{
2796
- 'row-end': scaleGridColRowStartOrEnd()
2797
- }],
2798
- /**
2799
- * Grid Auto Flow
2800
- * @see https://tailwindcss.com/docs/grid-auto-flow
2801
- */
2802
- 'grid-flow': [{
2803
- 'grid-flow': ['row', 'col', 'dense', 'row-dense', 'col-dense']
2804
- }],
2805
- /**
2806
- * Grid Auto Columns
2807
- * @see https://tailwindcss.com/docs/grid-auto-columns
2808
- */
2809
- 'auto-cols': [{
2810
- 'auto-cols': scaleGridAutoColsRows()
2811
- }],
2812
- /**
2813
- * Grid Auto Rows
2814
- * @see https://tailwindcss.com/docs/grid-auto-rows
2815
- */
2816
- 'auto-rows': [{
2817
- 'auto-rows': scaleGridAutoColsRows()
2818
- }],
2819
- /**
2820
- * Gap
2821
- * @see https://tailwindcss.com/docs/gap
2822
- */
2823
- gap: [{
2824
- gap: scaleUnambiguousSpacing()
2825
- }],
2826
- /**
2827
- * Gap X
2828
- * @see https://tailwindcss.com/docs/gap
2829
- */
2830
- 'gap-x': [{
2831
- 'gap-x': scaleUnambiguousSpacing()
2832
- }],
2833
- /**
2834
- * Gap Y
2835
- * @see https://tailwindcss.com/docs/gap
2836
- */
2837
- 'gap-y': [{
2838
- 'gap-y': scaleUnambiguousSpacing()
2839
- }],
2840
- /**
2841
- * Justify Content
2842
- * @see https://tailwindcss.com/docs/justify-content
2843
- */
2844
- 'justify-content': [{
2845
- justify: [...scaleAlignPrimaryAxis(), 'normal']
2846
- }],
2847
- /**
2848
- * Justify Items
2849
- * @see https://tailwindcss.com/docs/justify-items
2850
- */
2851
- 'justify-items': [{
2852
- 'justify-items': [...scaleAlignSecondaryAxis(), 'normal']
2853
- }],
2854
- /**
2855
- * Justify Self
2856
- * @see https://tailwindcss.com/docs/justify-self
2857
- */
2858
- 'justify-self': [{
2859
- 'justify-self': ['auto', ...scaleAlignSecondaryAxis()]
2860
- }],
2861
- /**
2862
- * Align Content
2863
- * @see https://tailwindcss.com/docs/align-content
2864
- */
2865
- 'align-content': [{
2866
- content: ['normal', ...scaleAlignPrimaryAxis()]
2867
- }],
2868
- /**
2869
- * Align Items
2870
- * @see https://tailwindcss.com/docs/align-items
2871
- */
2872
- 'align-items': [{
2873
- items: [...scaleAlignSecondaryAxis(), {
2874
- baseline: ['', 'last']
2875
- }]
2876
- }],
2877
- /**
2878
- * Align Self
2879
- * @see https://tailwindcss.com/docs/align-self
2880
- */
2881
- 'align-self': [{
2882
- self: ['auto', ...scaleAlignSecondaryAxis(), {
2883
- baseline: ['', 'last']
2884
- }]
2885
- }],
2886
- /**
2887
- * Place Content
2888
- * @see https://tailwindcss.com/docs/place-content
2889
- */
2890
- 'place-content': [{
2891
- 'place-content': scaleAlignPrimaryAxis()
2892
- }],
2893
- /**
2894
- * Place Items
2895
- * @see https://tailwindcss.com/docs/place-items
2896
- */
2897
- 'place-items': [{
2898
- 'place-items': [...scaleAlignSecondaryAxis(), 'baseline']
2899
- }],
2900
- /**
2901
- * Place Self
2902
- * @see https://tailwindcss.com/docs/place-self
2903
- */
2904
- 'place-self': [{
2905
- 'place-self': ['auto', ...scaleAlignSecondaryAxis()]
2906
- }],
2907
- // Spacing
2908
- /**
2909
- * Padding
2910
- * @see https://tailwindcss.com/docs/padding
2911
- */
2912
- p: [{
2913
- p: scaleUnambiguousSpacing()
2914
- }],
2915
- /**
2916
- * Padding Inline
2917
- * @see https://tailwindcss.com/docs/padding
2918
- */
2919
- px: [{
2920
- px: scaleUnambiguousSpacing()
2921
- }],
2922
- /**
2923
- * Padding Block
2924
- * @see https://tailwindcss.com/docs/padding
2925
- */
2926
- py: [{
2927
- py: scaleUnambiguousSpacing()
2928
- }],
2929
- /**
2930
- * Padding Inline Start
2931
- * @see https://tailwindcss.com/docs/padding
2932
- */
2933
- ps: [{
2934
- ps: scaleUnambiguousSpacing()
2935
- }],
2936
- /**
2937
- * Padding Inline End
2938
- * @see https://tailwindcss.com/docs/padding
2939
- */
2940
- pe: [{
2941
- pe: scaleUnambiguousSpacing()
2942
- }],
2943
- /**
2944
- * Padding Block Start
2945
- * @see https://tailwindcss.com/docs/padding
2946
- */
2947
- pbs: [{
2948
- pbs: scaleUnambiguousSpacing()
2949
- }],
2950
- /**
2951
- * Padding Block End
2952
- * @see https://tailwindcss.com/docs/padding
2953
- */
2954
- pbe: [{
2955
- pbe: scaleUnambiguousSpacing()
2956
- }],
2957
- /**
2958
- * Padding Top
2959
- * @see https://tailwindcss.com/docs/padding
2960
- */
2961
- pt: [{
2962
- pt: scaleUnambiguousSpacing()
2963
- }],
2964
- /**
2965
- * Padding Right
2966
- * @see https://tailwindcss.com/docs/padding
2967
- */
2968
- pr: [{
2969
- pr: scaleUnambiguousSpacing()
2970
- }],
2971
- /**
2972
- * Padding Bottom
2973
- * @see https://tailwindcss.com/docs/padding
2974
- */
2975
- pb: [{
2976
- pb: scaleUnambiguousSpacing()
2977
- }],
2978
- /**
2979
- * Padding Left
2980
- * @see https://tailwindcss.com/docs/padding
2981
- */
2982
- pl: [{
2983
- pl: scaleUnambiguousSpacing()
2984
- }],
2985
- /**
2986
- * Margin
2987
- * @see https://tailwindcss.com/docs/margin
2988
- */
2989
- m: [{
2990
- m: scaleMargin()
2991
- }],
2992
- /**
2993
- * Margin Inline
2994
- * @see https://tailwindcss.com/docs/margin
2995
- */
2996
- mx: [{
2997
- mx: scaleMargin()
2998
- }],
2999
- /**
3000
- * Margin Block
3001
- * @see https://tailwindcss.com/docs/margin
3002
- */
3003
- my: [{
3004
- my: scaleMargin()
3005
- }],
3006
- /**
3007
- * Margin Inline Start
3008
- * @see https://tailwindcss.com/docs/margin
3009
- */
3010
- ms: [{
3011
- ms: scaleMargin()
3012
- }],
3013
- /**
3014
- * Margin Inline End
3015
- * @see https://tailwindcss.com/docs/margin
3016
- */
3017
- me: [{
3018
- me: scaleMargin()
3019
- }],
3020
- /**
3021
- * Margin Block Start
3022
- * @see https://tailwindcss.com/docs/margin
3023
- */
3024
- mbs: [{
3025
- mbs: scaleMargin()
3026
- }],
3027
- /**
3028
- * Margin Block End
3029
- * @see https://tailwindcss.com/docs/margin
3030
- */
3031
- mbe: [{
3032
- mbe: scaleMargin()
3033
- }],
3034
- /**
3035
- * Margin Top
3036
- * @see https://tailwindcss.com/docs/margin
3037
- */
3038
- mt: [{
3039
- mt: scaleMargin()
3040
- }],
3041
- /**
3042
- * Margin Right
3043
- * @see https://tailwindcss.com/docs/margin
3044
- */
3045
- mr: [{
3046
- mr: scaleMargin()
3047
- }],
3048
- /**
3049
- * Margin Bottom
3050
- * @see https://tailwindcss.com/docs/margin
3051
- */
3052
- mb: [{
3053
- mb: scaleMargin()
3054
- }],
3055
- /**
3056
- * Margin Left
3057
- * @see https://tailwindcss.com/docs/margin
3058
- */
3059
- ml: [{
3060
- ml: scaleMargin()
3061
- }],
3062
- /**
3063
- * Space Between X
3064
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
3065
- */
3066
- 'space-x': [{
3067
- 'space-x': scaleUnambiguousSpacing()
3068
- }],
3069
- /**
3070
- * Space Between X Reverse
3071
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
3072
- */
3073
- 'space-x-reverse': ['space-x-reverse'],
3074
- /**
3075
- * Space Between Y
3076
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
3077
- */
3078
- 'space-y': [{
3079
- 'space-y': scaleUnambiguousSpacing()
3080
- }],
3081
- /**
3082
- * Space Between Y Reverse
3083
- * @see https://tailwindcss.com/docs/margin#adding-space-between-children
3084
- */
3085
- 'space-y-reverse': ['space-y-reverse'],
3086
- // --------------
3087
- // --- Sizing ---
3088
- // --------------
3089
- /**
3090
- * Size
3091
- * @see https://tailwindcss.com/docs/width#setting-both-width-and-height
3092
- */
3093
- size: [{
3094
- size: scaleSizing()
3095
- }],
3096
- /**
3097
- * Inline Size
3098
- * @see https://tailwindcss.com/docs/width
3099
- */
3100
- 'inline-size': [{
3101
- inline: ['auto', ...scaleSizingInline()]
3102
- }],
3103
- /**
3104
- * Min-Inline Size
3105
- * @see https://tailwindcss.com/docs/min-width
3106
- */
3107
- 'min-inline-size': [{
3108
- 'min-inline': ['auto', ...scaleSizingInline()]
3109
- }],
3110
- /**
3111
- * Max-Inline Size
3112
- * @see https://tailwindcss.com/docs/max-width
3113
- */
3114
- 'max-inline-size': [{
3115
- 'max-inline': ['none', ...scaleSizingInline()]
3116
- }],
3117
- /**
3118
- * Block Size
3119
- * @see https://tailwindcss.com/docs/height
3120
- */
3121
- 'block-size': [{
3122
- block: ['auto', ...scaleSizingBlock()]
3123
- }],
3124
- /**
3125
- * Min-Block Size
3126
- * @see https://tailwindcss.com/docs/min-height
3127
- */
3128
- 'min-block-size': [{
3129
- 'min-block': ['auto', ...scaleSizingBlock()]
3130
- }],
3131
- /**
3132
- * Max-Block Size
3133
- * @see https://tailwindcss.com/docs/max-height
3134
- */
3135
- 'max-block-size': [{
3136
- 'max-block': ['none', ...scaleSizingBlock()]
3137
- }],
3138
- /**
3139
- * Width
3140
- * @see https://tailwindcss.com/docs/width
3141
- */
3142
- w: [{
3143
- w: [themeContainer, 'screen', ...scaleSizing()]
3144
- }],
3145
- /**
3146
- * Min-Width
3147
- * @see https://tailwindcss.com/docs/min-width
3148
- */
3149
- 'min-w': [{
3150
- 'min-w': [themeContainer, 'screen', /** Deprecated. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
3151
- 'none', ...scaleSizing()]
3152
- }],
3153
- /**
3154
- * Max-Width
3155
- * @see https://tailwindcss.com/docs/max-width
3156
- */
3157
- 'max-w': [{
3158
- 'max-w': [themeContainer, 'screen', 'none', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
3159
- 'prose', /** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
3160
- {
3161
- screen: [themeBreakpoint]
3162
- }, ...scaleSizing()]
3163
- }],
3164
- /**
3165
- * Height
3166
- * @see https://tailwindcss.com/docs/height
3167
- */
3168
- h: [{
3169
- h: ['screen', 'lh', ...scaleSizing()]
3170
- }],
3171
- /**
3172
- * Min-Height
3173
- * @see https://tailwindcss.com/docs/min-height
3174
- */
3175
- 'min-h': [{
3176
- 'min-h': ['screen', 'lh', 'none', ...scaleSizing()]
3177
- }],
3178
- /**
3179
- * Max-Height
3180
- * @see https://tailwindcss.com/docs/max-height
3181
- */
3182
- 'max-h': [{
3183
- 'max-h': ['screen', 'lh', ...scaleSizing()]
3184
- }],
3185
- // ------------------
3186
- // --- Typography ---
3187
- // ------------------
3188
- /**
3189
- * Font Size
3190
- * @see https://tailwindcss.com/docs/font-size
3191
- */
3192
- 'font-size': [{
3193
- text: ['base', themeText, isArbitraryVariableLength, isArbitraryLength]
3194
- }],
3195
- /**
3196
- * Font Smoothing
3197
- * @see https://tailwindcss.com/docs/font-smoothing
3198
- */
3199
- 'font-smoothing': ['antialiased', 'subpixel-antialiased'],
3200
- /**
3201
- * Font Style
3202
- * @see https://tailwindcss.com/docs/font-style
3203
- */
3204
- 'font-style': ['italic', 'not-italic'],
3205
- /**
3206
- * Font Weight
3207
- * @see https://tailwindcss.com/docs/font-weight
3208
- */
3209
- 'font-weight': [{
3210
- font: [themeFontWeight, isArbitraryVariableWeight, isArbitraryWeight]
3211
- }],
3212
- /**
3213
- * Font Stretch
3214
- * @see https://tailwindcss.com/docs/font-stretch
3215
- */
3216
- 'font-stretch': [{
3217
- 'font-stretch': ['ultra-condensed', 'extra-condensed', 'condensed', 'semi-condensed', 'normal', 'semi-expanded', 'expanded', 'extra-expanded', 'ultra-expanded', isPercent, isArbitraryValue]
3218
- }],
3219
- /**
3220
- * Font Family
3221
- * @see https://tailwindcss.com/docs/font-family
3222
- */
3223
- 'font-family': [{
3224
- font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont]
3225
- }],
3226
- /**
3227
- * Font Feature Settings
3228
- * @see https://tailwindcss.com/docs/font-feature-settings
3229
- */
3230
- 'font-features': [{
3231
- 'font-features': [isArbitraryValue]
3232
- }],
3233
- /**
3234
- * Font Variant Numeric
3235
- * @see https://tailwindcss.com/docs/font-variant-numeric
3236
- */
3237
- 'fvn-normal': ['normal-nums'],
3238
- /**
3239
- * Font Variant Numeric
3240
- * @see https://tailwindcss.com/docs/font-variant-numeric
3241
- */
3242
- 'fvn-ordinal': ['ordinal'],
3243
- /**
3244
- * Font Variant Numeric
3245
- * @see https://tailwindcss.com/docs/font-variant-numeric
3246
- */
3247
- 'fvn-slashed-zero': ['slashed-zero'],
3248
- /**
3249
- * Font Variant Numeric
3250
- * @see https://tailwindcss.com/docs/font-variant-numeric
3251
- */
3252
- 'fvn-figure': ['lining-nums', 'oldstyle-nums'],
3253
- /**
3254
- * Font Variant Numeric
3255
- * @see https://tailwindcss.com/docs/font-variant-numeric
3256
- */
3257
- 'fvn-spacing': ['proportional-nums', 'tabular-nums'],
3258
- /**
3259
- * Font Variant Numeric
3260
- * @see https://tailwindcss.com/docs/font-variant-numeric
3261
- */
3262
- 'fvn-fraction': ['diagonal-fractions', 'stacked-fractions'],
3263
- /**
3264
- * Letter Spacing
3265
- * @see https://tailwindcss.com/docs/letter-spacing
3266
- */
3267
- tracking: [{
3268
- tracking: [themeTracking, isArbitraryVariable, isArbitraryValue]
3269
- }],
3270
- /**
3271
- * Line Clamp
3272
- * @see https://tailwindcss.com/docs/line-clamp
3273
- */
3274
- 'line-clamp': [{
3275
- 'line-clamp': [isNumber, 'none', isArbitraryVariable, isArbitraryNumber]
3276
- }],
3277
- /**
3278
- * Line Height
3279
- * @see https://tailwindcss.com/docs/line-height
3280
- */
3281
- leading: [{
3282
- leading: [/** Deprecated since Tailwind CSS v4.0.0. @see https://github.com/tailwindlabs/tailwindcss.com/issues/2027#issuecomment-2620152757 */
3283
- themeLeading, ...scaleUnambiguousSpacing()]
3284
- }],
3285
- /**
3286
- * List Style Image
3287
- * @see https://tailwindcss.com/docs/list-style-image
3288
- */
3289
- 'list-image': [{
3290
- 'list-image': ['none', isArbitraryVariable, isArbitraryValue]
3291
- }],
3292
- /**
3293
- * List Style Position
3294
- * @see https://tailwindcss.com/docs/list-style-position
3295
- */
3296
- 'list-style-position': [{
3297
- list: ['inside', 'outside']
3298
- }],
3299
- /**
3300
- * List Style Type
3301
- * @see https://tailwindcss.com/docs/list-style-type
3302
- */
3303
- 'list-style-type': [{
3304
- list: ['disc', 'decimal', 'none', isArbitraryVariable, isArbitraryValue]
3305
- }],
3306
- /**
3307
- * Text Alignment
3308
- * @see https://tailwindcss.com/docs/text-align
3309
- */
3310
- 'text-alignment': [{
3311
- text: ['left', 'center', 'right', 'justify', 'start', 'end']
3312
- }],
3313
- /**
3314
- * Placeholder Color
3315
- * @deprecated since Tailwind CSS v3.0.0
3316
- * @see https://v3.tailwindcss.com/docs/placeholder-color
3317
- */
3318
- 'placeholder-color': [{
3319
- placeholder: scaleColor()
3320
- }],
3321
- /**
3322
- * Text Color
3323
- * @see https://tailwindcss.com/docs/text-color
3324
- */
3325
- 'text-color': [{
3326
- text: scaleColor()
3327
- }],
3328
- /**
3329
- * Text Decoration
3330
- * @see https://tailwindcss.com/docs/text-decoration
3331
- */
3332
- 'text-decoration': ['underline', 'overline', 'line-through', 'no-underline'],
3333
- /**
3334
- * Text Decoration Style
3335
- * @see https://tailwindcss.com/docs/text-decoration-style
3336
- */
3337
- 'text-decoration-style': [{
3338
- decoration: [...scaleLineStyle(), 'wavy']
3339
- }],
3340
- /**
3341
- * Text Decoration Thickness
3342
- * @see https://tailwindcss.com/docs/text-decoration-thickness
3343
- */
3344
- 'text-decoration-thickness': [{
3345
- decoration: [isNumber, 'from-font', 'auto', isArbitraryVariable, isArbitraryLength]
3346
- }],
3347
- /**
3348
- * Text Decoration Color
3349
- * @see https://tailwindcss.com/docs/text-decoration-color
3350
- */
3351
- 'text-decoration-color': [{
3352
- decoration: scaleColor()
3353
- }],
3354
- /**
3355
- * Text Underline Offset
3356
- * @see https://tailwindcss.com/docs/text-underline-offset
3357
- */
3358
- 'underline-offset': [{
3359
- 'underline-offset': [isNumber, 'auto', isArbitraryVariable, isArbitraryValue]
3360
- }],
3361
- /**
3362
- * Text Transform
3363
- * @see https://tailwindcss.com/docs/text-transform
3364
- */
3365
- 'text-transform': ['uppercase', 'lowercase', 'capitalize', 'normal-case'],
3366
- /**
3367
- * Text Overflow
3368
- * @see https://tailwindcss.com/docs/text-overflow
3369
- */
3370
- 'text-overflow': ['truncate', 'text-ellipsis', 'text-clip'],
3371
- /**
3372
- * Text Wrap
3373
- * @see https://tailwindcss.com/docs/text-wrap
3374
- */
3375
- 'text-wrap': [{
3376
- text: ['wrap', 'nowrap', 'balance', 'pretty']
3377
- }],
3378
- /**
3379
- * Text Indent
3380
- * @see https://tailwindcss.com/docs/text-indent
3381
- */
3382
- indent: [{
3383
- indent: scaleUnambiguousSpacing()
3384
- }],
3385
- /**
3386
- * Tab Size
3387
- * @see https://tailwindcss.com/docs/tab-size
3388
- */
3389
- 'tab-size': [{
3390
- tab: [isInteger, isArbitraryVariable, isArbitraryValue]
3391
- }],
3392
- /**
3393
- * Vertical Alignment
3394
- * @see https://tailwindcss.com/docs/vertical-align
3395
- */
3396
- 'vertical-align': [{
3397
- align: ['baseline', 'top', 'middle', 'bottom', 'text-top', 'text-bottom', 'sub', 'super', isArbitraryVariable, isArbitraryValue]
3398
- }],
3399
- /**
3400
- * Whitespace
3401
- * @see https://tailwindcss.com/docs/whitespace
3402
- */
3403
- whitespace: [{
3404
- whitespace: ['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces']
3405
- }],
3406
- /**
3407
- * Word Break
3408
- * @see https://tailwindcss.com/docs/word-break
3409
- */
3410
- break: [{
3411
- break: ['normal', 'words', 'all', 'keep']
3412
- }],
3413
- /**
3414
- * Overflow Wrap
3415
- * @see https://tailwindcss.com/docs/overflow-wrap
3416
- */
3417
- wrap: [{
3418
- wrap: ['break-word', 'anywhere', 'normal']
3419
- }],
3420
- /**
3421
- * Hyphens
3422
- * @see https://tailwindcss.com/docs/hyphens
3423
- */
3424
- hyphens: [{
3425
- hyphens: ['none', 'manual', 'auto']
3426
- }],
3427
- /**
3428
- * Content
3429
- * @see https://tailwindcss.com/docs/content
3430
- */
3431
- content: [{
3432
- content: ['none', isArbitraryVariable, isArbitraryValue]
3433
- }],
3434
- // -------------------
3435
- // --- Backgrounds ---
3436
- // -------------------
3437
- /**
3438
- * Background Attachment
3439
- * @see https://tailwindcss.com/docs/background-attachment
3440
- */
3441
- 'bg-attachment': [{
3442
- bg: ['fixed', 'local', 'scroll']
3443
- }],
3444
- /**
3445
- * Background Clip
3446
- * @see https://tailwindcss.com/docs/background-clip
3447
- */
3448
- 'bg-clip': [{
3449
- 'bg-clip': ['border', 'padding', 'content', 'text']
3450
- }],
3451
- /**
3452
- * Background Origin
3453
- * @see https://tailwindcss.com/docs/background-origin
3454
- */
3455
- 'bg-origin': [{
3456
- 'bg-origin': ['border', 'padding', 'content']
3457
- }],
3458
- /**
3459
- * Background Position
3460
- * @see https://tailwindcss.com/docs/background-position
3461
- */
3462
- 'bg-position': [{
3463
- bg: scaleBgPosition()
3464
- }],
3465
- /**
3466
- * Background Repeat
3467
- * @see https://tailwindcss.com/docs/background-repeat
3468
- */
3469
- 'bg-repeat': [{
3470
- bg: scaleBgRepeat()
3471
- }],
3472
- /**
3473
- * Background Size
3474
- * @see https://tailwindcss.com/docs/background-size
3475
- */
3476
- 'bg-size': [{
3477
- bg: scaleBgSize()
3478
- }],
3479
- /**
3480
- * Background Image
3481
- * @see https://tailwindcss.com/docs/background-image
3482
- */
3483
- 'bg-image': [{
3484
- bg: ['none', {
3485
- linear: [{
3486
- to: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']
3487
- }, isInteger, isArbitraryVariable, isArbitraryValue],
3488
- radial: ['', isArbitraryVariable, isArbitraryValue],
3489
- conic: [isInteger, isArbitraryVariable, isArbitraryValue]
3490
- }, isArbitraryVariableImage, isArbitraryImage]
3491
- }],
3492
- /**
3493
- * Background Color
3494
- * @see https://tailwindcss.com/docs/background-color
3495
- */
3496
- 'bg-color': [{
3497
- bg: scaleColor()
3498
- }],
3499
- /**
3500
- * Gradient Color Stops From Position
3501
- * @see https://tailwindcss.com/docs/gradient-color-stops
3502
- */
3503
- 'gradient-from-pos': [{
3504
- from: scaleGradientStopPosition()
3505
- }],
3506
- /**
3507
- * Gradient Color Stops Via Position
3508
- * @see https://tailwindcss.com/docs/gradient-color-stops
3509
- */
3510
- 'gradient-via-pos': [{
3511
- via: scaleGradientStopPosition()
3512
- }],
3513
- /**
3514
- * Gradient Color Stops To Position
3515
- * @see https://tailwindcss.com/docs/gradient-color-stops
3516
- */
3517
- 'gradient-to-pos': [{
3518
- to: scaleGradientStopPosition()
3519
- }],
3520
- /**
3521
- * Gradient Color Stops From
3522
- * @see https://tailwindcss.com/docs/gradient-color-stops
3523
- */
3524
- 'gradient-from': [{
3525
- from: scaleColor()
3526
- }],
3527
- /**
3528
- * Gradient Color Stops Via
3529
- * @see https://tailwindcss.com/docs/gradient-color-stops
3530
- */
3531
- 'gradient-via': [{
3532
- via: scaleColor()
3533
- }],
3534
- /**
3535
- * Gradient Color Stops To
3536
- * @see https://tailwindcss.com/docs/gradient-color-stops
3537
- */
3538
- 'gradient-to': [{
3539
- to: scaleColor()
3540
- }],
3541
- // ---------------
3542
- // --- Borders ---
3543
- // ---------------
3544
- /**
3545
- * Border Radius
3546
- * @see https://tailwindcss.com/docs/border-radius
3547
- */
3548
- rounded: [{
3549
- rounded: scaleRadius()
3550
- }],
3551
- /**
3552
- * Border Radius Start
3553
- * @see https://tailwindcss.com/docs/border-radius
3554
- */
3555
- 'rounded-s': [{
3556
- 'rounded-s': scaleRadius()
3557
- }],
3558
- /**
3559
- * Border Radius End
3560
- * @see https://tailwindcss.com/docs/border-radius
3561
- */
3562
- 'rounded-e': [{
3563
- 'rounded-e': scaleRadius()
3564
- }],
3565
- /**
3566
- * Border Radius Top
3567
- * @see https://tailwindcss.com/docs/border-radius
3568
- */
3569
- 'rounded-t': [{
3570
- 'rounded-t': scaleRadius()
3571
- }],
3572
- /**
3573
- * Border Radius Right
3574
- * @see https://tailwindcss.com/docs/border-radius
3575
- */
3576
- 'rounded-r': [{
3577
- 'rounded-r': scaleRadius()
3578
- }],
3579
- /**
3580
- * Border Radius Bottom
3581
- * @see https://tailwindcss.com/docs/border-radius
3582
- */
3583
- 'rounded-b': [{
3584
- 'rounded-b': scaleRadius()
3585
- }],
3586
- /**
3587
- * Border Radius Left
3588
- * @see https://tailwindcss.com/docs/border-radius
3589
- */
3590
- 'rounded-l': [{
3591
- 'rounded-l': scaleRadius()
3592
- }],
3593
- /**
3594
- * Border Radius Start Start
3595
- * @see https://tailwindcss.com/docs/border-radius
3596
- */
3597
- 'rounded-ss': [{
3598
- 'rounded-ss': scaleRadius()
3599
- }],
3600
- /**
3601
- * Border Radius Start End
3602
- * @see https://tailwindcss.com/docs/border-radius
3603
- */
3604
- 'rounded-se': [{
3605
- 'rounded-se': scaleRadius()
3606
- }],
3607
- /**
3608
- * Border Radius End End
3609
- * @see https://tailwindcss.com/docs/border-radius
3610
- */
3611
- 'rounded-ee': [{
3612
- 'rounded-ee': scaleRadius()
3613
- }],
3614
- /**
3615
- * Border Radius End Start
3616
- * @see https://tailwindcss.com/docs/border-radius
3617
- */
3618
- 'rounded-es': [{
3619
- 'rounded-es': scaleRadius()
3620
- }],
3621
- /**
3622
- * Border Radius Top Left
3623
- * @see https://tailwindcss.com/docs/border-radius
3624
- */
3625
- 'rounded-tl': [{
3626
- 'rounded-tl': scaleRadius()
3627
- }],
3628
- /**
3629
- * Border Radius Top Right
3630
- * @see https://tailwindcss.com/docs/border-radius
3631
- */
3632
- 'rounded-tr': [{
3633
- 'rounded-tr': scaleRadius()
3634
- }],
3635
- /**
3636
- * Border Radius Bottom Right
3637
- * @see https://tailwindcss.com/docs/border-radius
3638
- */
3639
- 'rounded-br': [{
3640
- 'rounded-br': scaleRadius()
3641
- }],
3642
- /**
3643
- * Border Radius Bottom Left
3644
- * @see https://tailwindcss.com/docs/border-radius
3645
- */
3646
- 'rounded-bl': [{
3647
- 'rounded-bl': scaleRadius()
3648
- }],
3649
- /**
3650
- * Border Width
3651
- * @see https://tailwindcss.com/docs/border-width
3652
- */
3653
- 'border-w': [{
3654
- border: scaleBorderWidth()
3655
- }],
3656
- /**
3657
- * Border Width Inline
3658
- * @see https://tailwindcss.com/docs/border-width
3659
- */
3660
- 'border-w-x': [{
3661
- 'border-x': scaleBorderWidth()
3662
- }],
3663
- /**
3664
- * Border Width Block
3665
- * @see https://tailwindcss.com/docs/border-width
3666
- */
3667
- 'border-w-y': [{
3668
- 'border-y': scaleBorderWidth()
3669
- }],
3670
- /**
3671
- * Border Width Inline Start
3672
- * @see https://tailwindcss.com/docs/border-width
3673
- */
3674
- 'border-w-s': [{
3675
- 'border-s': scaleBorderWidth()
3676
- }],
3677
- /**
3678
- * Border Width Inline End
3679
- * @see https://tailwindcss.com/docs/border-width
3680
- */
3681
- 'border-w-e': [{
3682
- 'border-e': scaleBorderWidth()
3683
- }],
3684
- /**
3685
- * Border Width Block Start
3686
- * @see https://tailwindcss.com/docs/border-width
3687
- */
3688
- 'border-w-bs': [{
3689
- 'border-bs': scaleBorderWidth()
3690
- }],
3691
- /**
3692
- * Border Width Block End
3693
- * @see https://tailwindcss.com/docs/border-width
3694
- */
3695
- 'border-w-be': [{
3696
- 'border-be': scaleBorderWidth()
3697
- }],
3698
- /**
3699
- * Border Width Top
3700
- * @see https://tailwindcss.com/docs/border-width
3701
- */
3702
- 'border-w-t': [{
3703
- 'border-t': scaleBorderWidth()
3704
- }],
3705
- /**
3706
- * Border Width Right
3707
- * @see https://tailwindcss.com/docs/border-width
3708
- */
3709
- 'border-w-r': [{
3710
- 'border-r': scaleBorderWidth()
3711
- }],
3712
- /**
3713
- * Border Width Bottom
3714
- * @see https://tailwindcss.com/docs/border-width
3715
- */
3716
- 'border-w-b': [{
3717
- 'border-b': scaleBorderWidth()
3718
- }],
3719
- /**
3720
- * Border Width Left
3721
- * @see https://tailwindcss.com/docs/border-width
3722
- */
3723
- 'border-w-l': [{
3724
- 'border-l': scaleBorderWidth()
3725
- }],
3726
- /**
3727
- * Divide Width X
3728
- * @see https://tailwindcss.com/docs/border-width#between-children
3729
- */
3730
- 'divide-x': [{
3731
- 'divide-x': scaleBorderWidth()
3732
- }],
3733
- /**
3734
- * Divide Width X Reverse
3735
- * @see https://tailwindcss.com/docs/border-width#between-children
3736
- */
3737
- 'divide-x-reverse': ['divide-x-reverse'],
3738
- /**
3739
- * Divide Width Y
3740
- * @see https://tailwindcss.com/docs/border-width#between-children
3741
- */
3742
- 'divide-y': [{
3743
- 'divide-y': scaleBorderWidth()
3744
- }],
3745
- /**
3746
- * Divide Width Y Reverse
3747
- * @see https://tailwindcss.com/docs/border-width#between-children
3748
- */
3749
- 'divide-y-reverse': ['divide-y-reverse'],
3750
- /**
3751
- * Border Style
3752
- * @see https://tailwindcss.com/docs/border-style
3753
- */
3754
- 'border-style': [{
3755
- border: [...scaleLineStyle(), 'hidden', 'none']
3756
- }],
3757
- /**
3758
- * Divide Style
3759
- * @see https://tailwindcss.com/docs/border-style#setting-the-divider-style
3760
- */
3761
- 'divide-style': [{
3762
- divide: [...scaleLineStyle(), 'hidden', 'none']
3763
- }],
3764
- /**
3765
- * Border Color
3766
- * @see https://tailwindcss.com/docs/border-color
3767
- */
3768
- 'border-color': [{
3769
- border: scaleColor()
3770
- }],
3771
- /**
3772
- * Border Color Inline
3773
- * @see https://tailwindcss.com/docs/border-color
3774
- */
3775
- 'border-color-x': [{
3776
- 'border-x': scaleColor()
3777
- }],
3778
- /**
3779
- * Border Color Block
3780
- * @see https://tailwindcss.com/docs/border-color
3781
- */
3782
- 'border-color-y': [{
3783
- 'border-y': scaleColor()
3784
- }],
3785
- /**
3786
- * Border Color Inline Start
3787
- * @see https://tailwindcss.com/docs/border-color
3788
- */
3789
- 'border-color-s': [{
3790
- 'border-s': scaleColor()
3791
- }],
3792
- /**
3793
- * Border Color Inline End
3794
- * @see https://tailwindcss.com/docs/border-color
3795
- */
3796
- 'border-color-e': [{
3797
- 'border-e': scaleColor()
3798
- }],
3799
- /**
3800
- * Border Color Block Start
3801
- * @see https://tailwindcss.com/docs/border-color
3802
- */
3803
- 'border-color-bs': [{
3804
- 'border-bs': scaleColor()
3805
- }],
3806
- /**
3807
- * Border Color Block End
3808
- * @see https://tailwindcss.com/docs/border-color
3809
- */
3810
- 'border-color-be': [{
3811
- 'border-be': scaleColor()
3812
- }],
3813
- /**
3814
- * Border Color Top
3815
- * @see https://tailwindcss.com/docs/border-color
3816
- */
3817
- 'border-color-t': [{
3818
- 'border-t': scaleColor()
3819
- }],
3820
- /**
3821
- * Border Color Right
3822
- * @see https://tailwindcss.com/docs/border-color
3823
- */
3824
- 'border-color-r': [{
3825
- 'border-r': scaleColor()
3826
- }],
3827
- /**
3828
- * Border Color Bottom
3829
- * @see https://tailwindcss.com/docs/border-color
3830
- */
3831
- 'border-color-b': [{
3832
- 'border-b': scaleColor()
3833
- }],
3834
- /**
3835
- * Border Color Left
3836
- * @see https://tailwindcss.com/docs/border-color
3837
- */
3838
- 'border-color-l': [{
3839
- 'border-l': scaleColor()
3840
- }],
3841
- /**
3842
- * Divide Color
3843
- * @see https://tailwindcss.com/docs/divide-color
3844
- */
3845
- 'divide-color': [{
3846
- divide: scaleColor()
3847
- }],
3848
- /**
3849
- * Outline Style
3850
- * @see https://tailwindcss.com/docs/outline-style
3851
- */
3852
- 'outline-style': [{
3853
- outline: [...scaleLineStyle(), 'none', 'hidden']
3854
- }],
3855
- /**
3856
- * Outline Offset
3857
- * @see https://tailwindcss.com/docs/outline-offset
3858
- */
3859
- 'outline-offset': [{
3860
- 'outline-offset': [isNumber, isArbitraryVariable, isArbitraryValue]
3861
- }],
3862
- /**
3863
- * Outline Width
3864
- * @see https://tailwindcss.com/docs/outline-width
3865
- */
3866
- 'outline-w': [{
3867
- outline: ['', isNumber, isArbitraryVariableLength, isArbitraryLength]
3868
- }],
3869
- /**
3870
- * Outline Color
3871
- * @see https://tailwindcss.com/docs/outline-color
3872
- */
3873
- 'outline-color': [{
3874
- outline: scaleColor()
3875
- }],
3876
- // ---------------
3877
- // --- Effects ---
3878
- // ---------------
3879
- /**
3880
- * Box Shadow
3881
- * @see https://tailwindcss.com/docs/box-shadow
3882
- */
3883
- shadow: [{
3884
- shadow: [
3885
- // Deprecated since Tailwind CSS v4.0.0
3886
- '', 'none', themeShadow, isArbitraryVariableShadow, isArbitraryShadow]
3887
- }],
3888
- /**
3889
- * Box Shadow Color
3890
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-shadow-color
3891
- */
3892
- 'shadow-color': [{
3893
- shadow: scaleColor()
3894
- }],
3895
- /**
3896
- * Inset Box Shadow
3897
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-shadow
3898
- */
3899
- 'inset-shadow': [{
3900
- 'inset-shadow': ['none', themeInsetShadow, isArbitraryVariableShadow, isArbitraryShadow]
3901
- }],
3902
- /**
3903
- * Inset Box Shadow Color
3904
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-shadow-color
3905
- */
3906
- 'inset-shadow-color': [{
3907
- 'inset-shadow': scaleColor()
3908
- }],
3909
- /**
3910
- * Ring Width
3911
- * @see https://tailwindcss.com/docs/box-shadow#adding-a-ring
3912
- */
3913
- 'ring-w': [{
3914
- ring: scaleBorderWidth()
3915
- }],
3916
- /**
3917
- * Ring Width Inset
3918
- * @see https://v3.tailwindcss.com/docs/ring-width#inset-rings
3919
- * @deprecated since Tailwind CSS v4.0.0
3920
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
3921
- */
3922
- 'ring-w-inset': ['ring-inset'],
3923
- /**
3924
- * Ring Color
3925
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-ring-color
3926
- */
3927
- 'ring-color': [{
3928
- ring: scaleColor()
3929
- }],
3930
- /**
3931
- * Ring Offset Width
3932
- * @see https://v3.tailwindcss.com/docs/ring-offset-width
3933
- * @deprecated since Tailwind CSS v4.0.0
3934
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
3935
- */
3936
- 'ring-offset-w': [{
3937
- 'ring-offset': [isNumber, isArbitraryLength]
3938
- }],
3939
- /**
3940
- * Ring Offset Color
3941
- * @see https://v3.tailwindcss.com/docs/ring-offset-color
3942
- * @deprecated since Tailwind CSS v4.0.0
3943
- * @see https://github.com/tailwindlabs/tailwindcss/blob/v4.0.0/packages/tailwindcss/src/utilities.ts#L4158
3944
- */
3945
- 'ring-offset-color': [{
3946
- 'ring-offset': scaleColor()
3947
- }],
3948
- /**
3949
- * Inset Ring Width
3950
- * @see https://tailwindcss.com/docs/box-shadow#adding-an-inset-ring
3951
- */
3952
- 'inset-ring-w': [{
3953
- 'inset-ring': scaleBorderWidth()
3954
- }],
3955
- /**
3956
- * Inset Ring Color
3957
- * @see https://tailwindcss.com/docs/box-shadow#setting-the-inset-ring-color
3958
- */
3959
- 'inset-ring-color': [{
3960
- 'inset-ring': scaleColor()
3961
- }],
3962
- /**
3963
- * Text Shadow
3964
- * @see https://tailwindcss.com/docs/text-shadow
3965
- */
3966
- 'text-shadow': [{
3967
- 'text-shadow': ['none', themeTextShadow, isArbitraryVariableShadow, isArbitraryShadow]
3968
- }],
3969
- /**
3970
- * Text Shadow Color
3971
- * @see https://tailwindcss.com/docs/text-shadow#setting-the-shadow-color
3972
- */
3973
- 'text-shadow-color': [{
3974
- 'text-shadow': scaleColor()
3975
- }],
3976
- /**
3977
- * Opacity
3978
- * @see https://tailwindcss.com/docs/opacity
3979
- */
3980
- opacity: [{
3981
- opacity: [isNumber, isArbitraryVariable, isArbitraryValue]
3982
- }],
3983
- /**
3984
- * Mix Blend Mode
3985
- * @see https://tailwindcss.com/docs/mix-blend-mode
3986
- */
3987
- 'mix-blend': [{
3988
- 'mix-blend': [...scaleBlendMode(), 'plus-darker', 'plus-lighter']
3989
- }],
3990
- /**
3991
- * Background Blend Mode
3992
- * @see https://tailwindcss.com/docs/background-blend-mode
3993
- */
3994
- 'bg-blend': [{
3995
- 'bg-blend': scaleBlendMode()
3996
- }],
3997
- /**
3998
- * Mask Clip
3999
- * @see https://tailwindcss.com/docs/mask-clip
4000
- */
4001
- 'mask-clip': [{
4002
- 'mask-clip': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
4003
- }, 'mask-no-clip'],
4004
- /**
4005
- * Mask Composite
4006
- * @see https://tailwindcss.com/docs/mask-composite
4007
- */
4008
- 'mask-composite': [{
4009
- mask: ['add', 'subtract', 'intersect', 'exclude']
4010
- }],
4011
- /**
4012
- * Mask Image
4013
- * @see https://tailwindcss.com/docs/mask-image
4014
- */
4015
- 'mask-image-linear-pos': [{
4016
- 'mask-linear': [isNumber]
4017
- }],
4018
- 'mask-image-linear-from-pos': [{
4019
- 'mask-linear-from': scaleMaskImagePosition()
4020
- }],
4021
- 'mask-image-linear-to-pos': [{
4022
- 'mask-linear-to': scaleMaskImagePosition()
4023
- }],
4024
- 'mask-image-linear-from-color': [{
4025
- 'mask-linear-from': scaleColor()
4026
- }],
4027
- 'mask-image-linear-to-color': [{
4028
- 'mask-linear-to': scaleColor()
4029
- }],
4030
- 'mask-image-t-from-pos': [{
4031
- 'mask-t-from': scaleMaskImagePosition()
4032
- }],
4033
- 'mask-image-t-to-pos': [{
4034
- 'mask-t-to': scaleMaskImagePosition()
4035
- }],
4036
- 'mask-image-t-from-color': [{
4037
- 'mask-t-from': scaleColor()
4038
- }],
4039
- 'mask-image-t-to-color': [{
4040
- 'mask-t-to': scaleColor()
4041
- }],
4042
- 'mask-image-r-from-pos': [{
4043
- 'mask-r-from': scaleMaskImagePosition()
4044
- }],
4045
- 'mask-image-r-to-pos': [{
4046
- 'mask-r-to': scaleMaskImagePosition()
4047
- }],
4048
- 'mask-image-r-from-color': [{
4049
- 'mask-r-from': scaleColor()
4050
- }],
4051
- 'mask-image-r-to-color': [{
4052
- 'mask-r-to': scaleColor()
4053
- }],
4054
- 'mask-image-b-from-pos': [{
4055
- 'mask-b-from': scaleMaskImagePosition()
4056
- }],
4057
- 'mask-image-b-to-pos': [{
4058
- 'mask-b-to': scaleMaskImagePosition()
4059
- }],
4060
- 'mask-image-b-from-color': [{
4061
- 'mask-b-from': scaleColor()
4062
- }],
4063
- 'mask-image-b-to-color': [{
4064
- 'mask-b-to': scaleColor()
4065
- }],
4066
- 'mask-image-l-from-pos': [{
4067
- 'mask-l-from': scaleMaskImagePosition()
4068
- }],
4069
- 'mask-image-l-to-pos': [{
4070
- 'mask-l-to': scaleMaskImagePosition()
4071
- }],
4072
- 'mask-image-l-from-color': [{
4073
- 'mask-l-from': scaleColor()
4074
- }],
4075
- 'mask-image-l-to-color': [{
4076
- 'mask-l-to': scaleColor()
4077
- }],
4078
- 'mask-image-x-from-pos': [{
4079
- 'mask-x-from': scaleMaskImagePosition()
4080
- }],
4081
- 'mask-image-x-to-pos': [{
4082
- 'mask-x-to': scaleMaskImagePosition()
4083
- }],
4084
- 'mask-image-x-from-color': [{
4085
- 'mask-x-from': scaleColor()
4086
- }],
4087
- 'mask-image-x-to-color': [{
4088
- 'mask-x-to': scaleColor()
4089
- }],
4090
- 'mask-image-y-from-pos': [{
4091
- 'mask-y-from': scaleMaskImagePosition()
4092
- }],
4093
- 'mask-image-y-to-pos': [{
4094
- 'mask-y-to': scaleMaskImagePosition()
4095
- }],
4096
- 'mask-image-y-from-color': [{
4097
- 'mask-y-from': scaleColor()
4098
- }],
4099
- 'mask-image-y-to-color': [{
4100
- 'mask-y-to': scaleColor()
4101
- }],
4102
- 'mask-image-radial': [{
4103
- 'mask-radial': [isArbitraryVariable, isArbitraryValue]
4104
- }],
4105
- 'mask-image-radial-from-pos': [{
4106
- 'mask-radial-from': scaleMaskImagePosition()
4107
- }],
4108
- 'mask-image-radial-to-pos': [{
4109
- 'mask-radial-to': scaleMaskImagePosition()
4110
- }],
4111
- 'mask-image-radial-from-color': [{
4112
- 'mask-radial-from': scaleColor()
4113
- }],
4114
- 'mask-image-radial-to-color': [{
4115
- 'mask-radial-to': scaleColor()
4116
- }],
4117
- 'mask-image-radial-shape': [{
4118
- 'mask-radial': ['circle', 'ellipse']
4119
- }],
4120
- 'mask-image-radial-size': [{
4121
- 'mask-radial': [{
4122
- closest: ['side', 'corner'],
4123
- farthest: ['side', 'corner']
4124
- }]
4125
- }],
4126
- 'mask-image-radial-pos': [{
4127
- 'mask-radial-at': scalePosition()
4128
- }],
4129
- 'mask-image-conic-pos': [{
4130
- 'mask-conic': [isNumber]
4131
- }],
4132
- 'mask-image-conic-from-pos': [{
4133
- 'mask-conic-from': scaleMaskImagePosition()
4134
- }],
4135
- 'mask-image-conic-to-pos': [{
4136
- 'mask-conic-to': scaleMaskImagePosition()
4137
- }],
4138
- 'mask-image-conic-from-color': [{
4139
- 'mask-conic-from': scaleColor()
4140
- }],
4141
- 'mask-image-conic-to-color': [{
4142
- 'mask-conic-to': scaleColor()
4143
- }],
4144
- /**
4145
- * Mask Mode
4146
- * @see https://tailwindcss.com/docs/mask-mode
4147
- */
4148
- 'mask-mode': [{
4149
- mask: ['alpha', 'luminance', 'match']
4150
- }],
4151
- /**
4152
- * Mask Origin
4153
- * @see https://tailwindcss.com/docs/mask-origin
4154
- */
4155
- 'mask-origin': [{
4156
- 'mask-origin': ['border', 'padding', 'content', 'fill', 'stroke', 'view']
4157
- }],
4158
- /**
4159
- * Mask Position
4160
- * @see https://tailwindcss.com/docs/mask-position
4161
- */
4162
- 'mask-position': [{
4163
- mask: scaleBgPosition()
4164
- }],
4165
- /**
4166
- * Mask Repeat
4167
- * @see https://tailwindcss.com/docs/mask-repeat
4168
- */
4169
- 'mask-repeat': [{
4170
- mask: scaleBgRepeat()
4171
- }],
4172
- /**
4173
- * Mask Size
4174
- * @see https://tailwindcss.com/docs/mask-size
4175
- */
4176
- 'mask-size': [{
4177
- mask: scaleBgSize()
4178
- }],
4179
- /**
4180
- * Mask Type
4181
- * @see https://tailwindcss.com/docs/mask-type
4182
- */
4183
- 'mask-type': [{
4184
- 'mask-type': ['alpha', 'luminance']
4185
- }],
4186
- /**
4187
- * Mask Image
4188
- * @see https://tailwindcss.com/docs/mask-image
4189
- */
4190
- 'mask-image': [{
4191
- mask: ['none', isArbitraryVariable, isArbitraryValue]
4192
- }],
4193
- // ---------------
4194
- // --- Filters ---
4195
- // ---------------
4196
- /**
4197
- * Filter
4198
- * @see https://tailwindcss.com/docs/filter
4199
- */
4200
- filter: [{
4201
- filter: [
4202
- // Deprecated since Tailwind CSS v3.0.0
4203
- '', 'none', isArbitraryVariable, isArbitraryValue]
4204
- }],
4205
- /**
4206
- * Blur
4207
- * @see https://tailwindcss.com/docs/blur
4208
- */
4209
- blur: [{
4210
- blur: scaleBlur()
4211
- }],
4212
- /**
4213
- * Brightness
4214
- * @see https://tailwindcss.com/docs/brightness
4215
- */
4216
- brightness: [{
4217
- brightness: [isNumber, isArbitraryVariable, isArbitraryValue]
4218
- }],
4219
- /**
4220
- * Contrast
4221
- * @see https://tailwindcss.com/docs/contrast
4222
- */
4223
- contrast: [{
4224
- contrast: [isNumber, isArbitraryVariable, isArbitraryValue]
4225
- }],
4226
- /**
4227
- * Drop Shadow
4228
- * @see https://tailwindcss.com/docs/drop-shadow
4229
- */
4230
- 'drop-shadow': [{
4231
- 'drop-shadow': [
4232
- // Deprecated since Tailwind CSS v4.0.0
4233
- '', 'none', themeDropShadow, isArbitraryVariableShadow, isArbitraryShadow]
4234
- }],
4235
- /**
4236
- * Drop Shadow Color
4237
- * @see https://tailwindcss.com/docs/filter-drop-shadow#setting-the-shadow-color
4238
- */
4239
- 'drop-shadow-color': [{
4240
- 'drop-shadow': scaleColor()
4241
- }],
4242
- /**
4243
- * Grayscale
4244
- * @see https://tailwindcss.com/docs/grayscale
4245
- */
4246
- grayscale: [{
4247
- grayscale: ['', isNumber, isArbitraryVariable, isArbitraryValue]
4248
- }],
4249
- /**
4250
- * Hue Rotate
4251
- * @see https://tailwindcss.com/docs/hue-rotate
4252
- */
4253
- 'hue-rotate': [{
4254
- 'hue-rotate': [isNumber, isArbitraryVariable, isArbitraryValue]
4255
- }],
4256
- /**
4257
- * Invert
4258
- * @see https://tailwindcss.com/docs/invert
4259
- */
4260
- invert: [{
4261
- invert: ['', isNumber, isArbitraryVariable, isArbitraryValue]
4262
- }],
4263
- /**
4264
- * Saturate
4265
- * @see https://tailwindcss.com/docs/saturate
4266
- */
4267
- saturate: [{
4268
- saturate: [isNumber, isArbitraryVariable, isArbitraryValue]
4269
- }],
4270
- /**
4271
- * Sepia
4272
- * @see https://tailwindcss.com/docs/sepia
4273
- */
4274
- sepia: [{
4275
- sepia: ['', isNumber, isArbitraryVariable, isArbitraryValue]
4276
- }],
4277
- /**
4278
- * Backdrop Filter
4279
- * @see https://tailwindcss.com/docs/backdrop-filter
4280
- */
4281
- 'backdrop-filter': [{
4282
- 'backdrop-filter': [
4283
- // Deprecated since Tailwind CSS v3.0.0
4284
- '', 'none', isArbitraryVariable, isArbitraryValue]
4285
- }],
4286
- /**
4287
- * Backdrop Blur
4288
- * @see https://tailwindcss.com/docs/backdrop-blur
4289
- */
4290
- 'backdrop-blur': [{
4291
- 'backdrop-blur': scaleBlur()
4292
- }],
4293
- /**
4294
- * Backdrop Brightness
4295
- * @see https://tailwindcss.com/docs/backdrop-brightness
4296
- */
4297
- 'backdrop-brightness': [{
4298
- 'backdrop-brightness': [isNumber, isArbitraryVariable, isArbitraryValue]
4299
- }],
4300
- /**
4301
- * Backdrop Contrast
4302
- * @see https://tailwindcss.com/docs/backdrop-contrast
4303
- */
4304
- 'backdrop-contrast': [{
4305
- 'backdrop-contrast': [isNumber, isArbitraryVariable, isArbitraryValue]
4306
- }],
4307
- /**
4308
- * Backdrop Grayscale
4309
- * @see https://tailwindcss.com/docs/backdrop-grayscale
4310
- */
4311
- 'backdrop-grayscale': [{
4312
- 'backdrop-grayscale': ['', isNumber, isArbitraryVariable, isArbitraryValue]
4313
- }],
4314
- /**
4315
- * Backdrop Hue Rotate
4316
- * @see https://tailwindcss.com/docs/backdrop-hue-rotate
4317
- */
4318
- 'backdrop-hue-rotate': [{
4319
- 'backdrop-hue-rotate': [isNumber, isArbitraryVariable, isArbitraryValue]
4320
- }],
4321
- /**
4322
- * Backdrop Invert
4323
- * @see https://tailwindcss.com/docs/backdrop-invert
4324
- */
4325
- 'backdrop-invert': [{
4326
- 'backdrop-invert': ['', isNumber, isArbitraryVariable, isArbitraryValue]
4327
- }],
4328
- /**
4329
- * Backdrop Opacity
4330
- * @see https://tailwindcss.com/docs/backdrop-opacity
4331
- */
4332
- 'backdrop-opacity': [{
4333
- 'backdrop-opacity': [isNumber, isArbitraryVariable, isArbitraryValue]
4334
- }],
4335
- /**
4336
- * Backdrop Saturate
4337
- * @see https://tailwindcss.com/docs/backdrop-saturate
4338
- */
4339
- 'backdrop-saturate': [{
4340
- 'backdrop-saturate': [isNumber, isArbitraryVariable, isArbitraryValue]
4341
- }],
4342
- /**
4343
- * Backdrop Sepia
4344
- * @see https://tailwindcss.com/docs/backdrop-sepia
4345
- */
4346
- 'backdrop-sepia': [{
4347
- 'backdrop-sepia': ['', isNumber, isArbitraryVariable, isArbitraryValue]
4348
- }],
4349
- // --------------
4350
- // --- Tables ---
4351
- // --------------
4352
- /**
4353
- * Border Collapse
4354
- * @see https://tailwindcss.com/docs/border-collapse
4355
- */
4356
- 'border-collapse': [{
4357
- border: ['collapse', 'separate']
4358
- }],
4359
- /**
4360
- * Border Spacing
4361
- * @see https://tailwindcss.com/docs/border-spacing
4362
- */
4363
- 'border-spacing': [{
4364
- 'border-spacing': scaleUnambiguousSpacing()
4365
- }],
4366
- /**
4367
- * Border Spacing X
4368
- * @see https://tailwindcss.com/docs/border-spacing
4369
- */
4370
- 'border-spacing-x': [{
4371
- 'border-spacing-x': scaleUnambiguousSpacing()
4372
- }],
4373
- /**
4374
- * Border Spacing Y
4375
- * @see https://tailwindcss.com/docs/border-spacing
4376
- */
4377
- 'border-spacing-y': [{
4378
- 'border-spacing-y': scaleUnambiguousSpacing()
4379
- }],
4380
- /**
4381
- * Table Layout
4382
- * @see https://tailwindcss.com/docs/table-layout
4383
- */
4384
- 'table-layout': [{
4385
- table: ['auto', 'fixed']
4386
- }],
4387
- /**
4388
- * Caption Side
4389
- * @see https://tailwindcss.com/docs/caption-side
4390
- */
4391
- caption: [{
4392
- caption: ['top', 'bottom']
4393
- }],
4394
- // ---------------------------------
4395
- // --- Transitions and Animation ---
4396
- // ---------------------------------
4397
- /**
4398
- * Transition Property
4399
- * @see https://tailwindcss.com/docs/transition-property
4400
- */
4401
- transition: [{
4402
- transition: ['', 'all', 'colors', 'opacity', 'shadow', 'transform', 'none', isArbitraryVariable, isArbitraryValue]
4403
- }],
4404
- /**
4405
- * Transition Behavior
4406
- * @see https://tailwindcss.com/docs/transition-behavior
4407
- */
4408
- 'transition-behavior': [{
4409
- transition: ['normal', 'discrete']
4410
- }],
4411
- /**
4412
- * Transition Duration
4413
- * @see https://tailwindcss.com/docs/transition-duration
4414
- */
4415
- duration: [{
4416
- duration: [isNumber, 'initial', isArbitraryVariable, isArbitraryValue]
4417
- }],
4418
- /**
4419
- * Transition Timing Function
4420
- * @see https://tailwindcss.com/docs/transition-timing-function
4421
- */
4422
- ease: [{
4423
- ease: ['linear', 'initial', themeEase, isArbitraryVariable, isArbitraryValue]
4424
- }],
4425
- /**
4426
- * Transition Delay
4427
- * @see https://tailwindcss.com/docs/transition-delay
4428
- */
4429
- delay: [{
4430
- delay: [isNumber, isArbitraryVariable, isArbitraryValue]
4431
- }],
4432
- /**
4433
- * Animation
4434
- * @see https://tailwindcss.com/docs/animation
4435
- */
4436
- animate: [{
4437
- animate: ['none', themeAnimate, isArbitraryVariable, isArbitraryValue]
4438
- }],
4439
- // ------------------
4440
- // --- Transforms ---
4441
- // ------------------
4442
- /**
4443
- * Backface Visibility
4444
- * @see https://tailwindcss.com/docs/backface-visibility
4445
- */
4446
- backface: [{
4447
- backface: ['hidden', 'visible']
4448
- }],
4449
- /**
4450
- * Perspective
4451
- * @see https://tailwindcss.com/docs/perspective
4452
- */
4453
- perspective: [{
4454
- perspective: [themePerspective, isArbitraryVariable, isArbitraryValue]
4455
- }],
4456
- /**
4457
- * Perspective Origin
4458
- * @see https://tailwindcss.com/docs/perspective-origin
4459
- */
4460
- 'perspective-origin': [{
4461
- 'perspective-origin': scalePositionWithArbitrary()
4462
- }],
4463
- /**
4464
- * Rotate
4465
- * @see https://tailwindcss.com/docs/rotate
4466
- */
4467
- rotate: [{
4468
- rotate: scaleRotate()
4469
- }],
4470
- /**
4471
- * Rotate X
4472
- * @see https://tailwindcss.com/docs/rotate
4473
- */
4474
- 'rotate-x': [{
4475
- 'rotate-x': scaleRotate()
4476
- }],
4477
- /**
4478
- * Rotate Y
4479
- * @see https://tailwindcss.com/docs/rotate
4480
- */
4481
- 'rotate-y': [{
4482
- 'rotate-y': scaleRotate()
4483
- }],
4484
- /**
4485
- * Rotate Z
4486
- * @see https://tailwindcss.com/docs/rotate
4487
- */
4488
- 'rotate-z': [{
4489
- 'rotate-z': scaleRotate()
4490
- }],
4491
- /**
4492
- * Scale
4493
- * @see https://tailwindcss.com/docs/scale
4494
- */
4495
- scale: [{
4496
- scale: scaleScale()
4497
- }],
4498
- /**
4499
- * Scale X
4500
- * @see https://tailwindcss.com/docs/scale
4501
- */
4502
- 'scale-x': [{
4503
- 'scale-x': scaleScale()
4504
- }],
4505
- /**
4506
- * Scale Y
4507
- * @see https://tailwindcss.com/docs/scale
4508
- */
4509
- 'scale-y': [{
4510
- 'scale-y': scaleScale()
4511
- }],
4512
- /**
4513
- * Scale Z
4514
- * @see https://tailwindcss.com/docs/scale
4515
- */
4516
- 'scale-z': [{
4517
- 'scale-z': scaleScale()
4518
- }],
4519
- /**
4520
- * Scale 3D
4521
- * @see https://tailwindcss.com/docs/scale
4522
- */
4523
- 'scale-3d': ['scale-3d'],
4524
- /**
4525
- * Skew
4526
- * @see https://tailwindcss.com/docs/skew
4527
- */
4528
- skew: [{
4529
- skew: scaleSkew()
4530
- }],
4531
- /**
4532
- * Skew X
4533
- * @see https://tailwindcss.com/docs/skew
4534
- */
4535
- 'skew-x': [{
4536
- 'skew-x': scaleSkew()
4537
- }],
4538
- /**
4539
- * Skew Y
4540
- * @see https://tailwindcss.com/docs/skew
4541
- */
4542
- 'skew-y': [{
4543
- 'skew-y': scaleSkew()
4544
- }],
4545
- /**
4546
- * Transform
4547
- * @see https://tailwindcss.com/docs/transform
4548
- */
4549
- transform: [{
4550
- transform: [isArbitraryVariable, isArbitraryValue, '', 'none', 'gpu', 'cpu']
4551
- }],
4552
- /**
4553
- * Transform Origin
4554
- * @see https://tailwindcss.com/docs/transform-origin
4555
- */
4556
- 'transform-origin': [{
4557
- origin: scalePositionWithArbitrary()
4558
- }],
4559
- /**
4560
- * Transform Style
4561
- * @see https://tailwindcss.com/docs/transform-style
4562
- */
4563
- 'transform-style': [{
4564
- transform: ['3d', 'flat']
4565
- }],
4566
- /**
4567
- * Translate
4568
- * @see https://tailwindcss.com/docs/translate
4569
- */
4570
- translate: [{
4571
- translate: scaleTranslate()
4572
- }],
4573
- /**
4574
- * Translate X
4575
- * @see https://tailwindcss.com/docs/translate
4576
- */
4577
- 'translate-x': [{
4578
- 'translate-x': scaleTranslate()
4579
- }],
4580
- /**
4581
- * Translate Y
4582
- * @see https://tailwindcss.com/docs/translate
4583
- */
4584
- 'translate-y': [{
4585
- 'translate-y': scaleTranslate()
4586
- }],
4587
- /**
4588
- * Translate Z
4589
- * @see https://tailwindcss.com/docs/translate
4590
- */
4591
- 'translate-z': [{
4592
- 'translate-z': scaleTranslate()
4593
- }],
4594
- /**
4595
- * Translate None
4596
- * @see https://tailwindcss.com/docs/translate
4597
- */
4598
- 'translate-none': ['translate-none'],
4599
- /**
4600
- * Zoom
4601
- * @see https://tailwindcss.com/docs/zoom
4602
- */
4603
- zoom: [{
4604
- zoom: [isInteger, isArbitraryVariable, isArbitraryValue]
4605
- }],
4606
- // ---------------------
4607
- // --- Interactivity ---
4608
- // ---------------------
4609
- /**
4610
- * Accent Color
4611
- * @see https://tailwindcss.com/docs/accent-color
4612
- */
4613
- accent: [{
4614
- accent: scaleColor()
4615
- }],
4616
- /**
4617
- * Appearance
4618
- * @see https://tailwindcss.com/docs/appearance
4619
- */
4620
- appearance: [{
4621
- appearance: ['none', 'auto']
4622
- }],
4623
- /**
4624
- * Caret Color
4625
- * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
4626
- */
4627
- 'caret-color': [{
4628
- caret: scaleColor()
4629
- }],
4630
- /**
4631
- * Color Scheme
4632
- * @see https://tailwindcss.com/docs/color-scheme
4633
- */
4634
- 'color-scheme': [{
4635
- scheme: ['normal', 'dark', 'light', 'light-dark', 'only-dark', 'only-light']
4636
- }],
4637
- /**
4638
- * Cursor
4639
- * @see https://tailwindcss.com/docs/cursor
4640
- */
4641
- cursor: [{
4642
- 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', isArbitraryVariable, isArbitraryValue]
4643
- }],
4644
- /**
4645
- * Field Sizing
4646
- * @see https://tailwindcss.com/docs/field-sizing
4647
- */
4648
- 'field-sizing': [{
4649
- 'field-sizing': ['fixed', 'content']
4650
- }],
4651
- /**
4652
- * Pointer Events
4653
- * @see https://tailwindcss.com/docs/pointer-events
4654
- */
4655
- 'pointer-events': [{
4656
- 'pointer-events': ['auto', 'none']
4657
- }],
4658
- /**
4659
- * Resize
4660
- * @see https://tailwindcss.com/docs/resize
4661
- */
4662
- resize: [{
4663
- resize: ['none', '', 'y', 'x']
4664
- }],
4665
- /**
4666
- * Scroll Behavior
4667
- * @see https://tailwindcss.com/docs/scroll-behavior
4668
- */
4669
- 'scroll-behavior': [{
4670
- scroll: ['auto', 'smooth']
4671
- }],
4672
- /**
4673
- * Scrollbar Thumb Color
4674
- * @see https://tailwindcss.com/docs/scrollbar-color
4675
- */
4676
- 'scrollbar-thumb-color': [{
4677
- 'scrollbar-thumb': scaleColor()
4678
- }],
4679
- /**
4680
- * Scrollbar Track Color
4681
- * @see https://tailwindcss.com/docs/scrollbar-color
4682
- */
4683
- 'scrollbar-track-color': [{
4684
- 'scrollbar-track': scaleColor()
4685
- }],
4686
- /**
4687
- * Scrollbar Gutter
4688
- * @see https://tailwindcss.com/docs/scrollbar-gutter
4689
- */
4690
- 'scrollbar-gutter': [{
4691
- 'scrollbar-gutter': ['auto', 'stable', 'both']
4692
- }],
4693
- /**
4694
- * Scrollbar Width
4695
- * @see https://tailwindcss.com/docs/scrollbar-width
4696
- */
4697
- 'scrollbar-w': [{
4698
- scrollbar: ['auto', 'thin', 'none']
4699
- }],
4700
- /**
4701
- * Scroll Margin
4702
- * @see https://tailwindcss.com/docs/scroll-margin
4703
- */
4704
- 'scroll-m': [{
4705
- 'scroll-m': scaleUnambiguousSpacing()
4706
- }],
4707
- /**
4708
- * Scroll Margin Inline
4709
- * @see https://tailwindcss.com/docs/scroll-margin
4710
- */
4711
- 'scroll-mx': [{
4712
- 'scroll-mx': scaleUnambiguousSpacing()
4713
- }],
4714
- /**
4715
- * Scroll Margin Block
4716
- * @see https://tailwindcss.com/docs/scroll-margin
4717
- */
4718
- 'scroll-my': [{
4719
- 'scroll-my': scaleUnambiguousSpacing()
4720
- }],
4721
- /**
4722
- * Scroll Margin Inline Start
4723
- * @see https://tailwindcss.com/docs/scroll-margin
4724
- */
4725
- 'scroll-ms': [{
4726
- 'scroll-ms': scaleUnambiguousSpacing()
4727
- }],
4728
- /**
4729
- * Scroll Margin Inline End
4730
- * @see https://tailwindcss.com/docs/scroll-margin
4731
- */
4732
- 'scroll-me': [{
4733
- 'scroll-me': scaleUnambiguousSpacing()
4734
- }],
4735
- /**
4736
- * Scroll Margin Block Start
4737
- * @see https://tailwindcss.com/docs/scroll-margin
4738
- */
4739
- 'scroll-mbs': [{
4740
- 'scroll-mbs': scaleUnambiguousSpacing()
4741
- }],
4742
- /**
4743
- * Scroll Margin Block End
4744
- * @see https://tailwindcss.com/docs/scroll-margin
4745
- */
4746
- 'scroll-mbe': [{
4747
- 'scroll-mbe': scaleUnambiguousSpacing()
4748
- }],
4749
- /**
4750
- * Scroll Margin Top
4751
- * @see https://tailwindcss.com/docs/scroll-margin
4752
- */
4753
- 'scroll-mt': [{
4754
- 'scroll-mt': scaleUnambiguousSpacing()
4755
- }],
4756
- /**
4757
- * Scroll Margin Right
4758
- * @see https://tailwindcss.com/docs/scroll-margin
4759
- */
4760
- 'scroll-mr': [{
4761
- 'scroll-mr': scaleUnambiguousSpacing()
4762
- }],
4763
- /**
4764
- * Scroll Margin Bottom
4765
- * @see https://tailwindcss.com/docs/scroll-margin
4766
- */
4767
- 'scroll-mb': [{
4768
- 'scroll-mb': scaleUnambiguousSpacing()
4769
- }],
4770
- /**
4771
- * Scroll Margin Left
4772
- * @see https://tailwindcss.com/docs/scroll-margin
4773
- */
4774
- 'scroll-ml': [{
4775
- 'scroll-ml': scaleUnambiguousSpacing()
4776
- }],
4777
- /**
4778
- * Scroll Padding
4779
- * @see https://tailwindcss.com/docs/scroll-padding
4780
- */
4781
- 'scroll-p': [{
4782
- 'scroll-p': scaleUnambiguousSpacing()
4783
- }],
4784
- /**
4785
- * Scroll Padding Inline
4786
- * @see https://tailwindcss.com/docs/scroll-padding
4787
- */
4788
- 'scroll-px': [{
4789
- 'scroll-px': scaleUnambiguousSpacing()
4790
- }],
4791
- /**
4792
- * Scroll Padding Block
4793
- * @see https://tailwindcss.com/docs/scroll-padding
4794
- */
4795
- 'scroll-py': [{
4796
- 'scroll-py': scaleUnambiguousSpacing()
4797
- }],
4798
- /**
4799
- * Scroll Padding Inline Start
4800
- * @see https://tailwindcss.com/docs/scroll-padding
4801
- */
4802
- 'scroll-ps': [{
4803
- 'scroll-ps': scaleUnambiguousSpacing()
4804
- }],
4805
- /**
4806
- * Scroll Padding Inline End
4807
- * @see https://tailwindcss.com/docs/scroll-padding
4808
- */
4809
- 'scroll-pe': [{
4810
- 'scroll-pe': scaleUnambiguousSpacing()
4811
- }],
4812
- /**
4813
- * Scroll Padding Block Start
4814
- * @see https://tailwindcss.com/docs/scroll-padding
4815
- */
4816
- 'scroll-pbs': [{
4817
- 'scroll-pbs': scaleUnambiguousSpacing()
4818
- }],
4819
- /**
4820
- * Scroll Padding Block End
4821
- * @see https://tailwindcss.com/docs/scroll-padding
4822
- */
4823
- 'scroll-pbe': [{
4824
- 'scroll-pbe': scaleUnambiguousSpacing()
4825
- }],
4826
- /**
4827
- * Scroll Padding Top
4828
- * @see https://tailwindcss.com/docs/scroll-padding
4829
- */
4830
- 'scroll-pt': [{
4831
- 'scroll-pt': scaleUnambiguousSpacing()
4832
- }],
4833
- /**
4834
- * Scroll Padding Right
4835
- * @see https://tailwindcss.com/docs/scroll-padding
4836
- */
4837
- 'scroll-pr': [{
4838
- 'scroll-pr': scaleUnambiguousSpacing()
4839
- }],
4840
- /**
4841
- * Scroll Padding Bottom
4842
- * @see https://tailwindcss.com/docs/scroll-padding
4843
- */
4844
- 'scroll-pb': [{
4845
- 'scroll-pb': scaleUnambiguousSpacing()
4846
- }],
4847
- /**
4848
- * Scroll Padding Left
4849
- * @see https://tailwindcss.com/docs/scroll-padding
4850
- */
4851
- 'scroll-pl': [{
4852
- 'scroll-pl': scaleUnambiguousSpacing()
4853
- }],
4854
- /**
4855
- * Scroll Snap Align
4856
- * @see https://tailwindcss.com/docs/scroll-snap-align
4857
- */
4858
- 'snap-align': [{
4859
- snap: ['start', 'end', 'center', 'align-none']
4860
- }],
4861
- /**
4862
- * Scroll Snap Stop
4863
- * @see https://tailwindcss.com/docs/scroll-snap-stop
4864
- */
4865
- 'snap-stop': [{
4866
- snap: ['normal', 'always']
4867
- }],
4868
- /**
4869
- * Scroll Snap Type
4870
- * @see https://tailwindcss.com/docs/scroll-snap-type
4871
- */
4872
- 'snap-type': [{
4873
- snap: ['none', 'x', 'y', 'both']
4874
- }],
4875
- /**
4876
- * Scroll Snap Type Strictness
4877
- * @see https://tailwindcss.com/docs/scroll-snap-type
4878
- */
4879
- 'snap-strictness': [{
4880
- snap: ['mandatory', 'proximity']
4881
- }],
4882
- /**
4883
- * Touch Action
4884
- * @see https://tailwindcss.com/docs/touch-action
4885
- */
4886
- touch: [{
4887
- touch: ['auto', 'none', 'manipulation']
4888
- }],
4889
- /**
4890
- * Touch Action X
4891
- * @see https://tailwindcss.com/docs/touch-action
4892
- */
4893
- 'touch-x': [{
4894
- 'touch-pan': ['x', 'left', 'right']
4895
- }],
4896
- /**
4897
- * Touch Action Y
4898
- * @see https://tailwindcss.com/docs/touch-action
4899
- */
4900
- 'touch-y': [{
4901
- 'touch-pan': ['y', 'up', 'down']
4902
- }],
4903
- /**
4904
- * Touch Action Pinch Zoom
4905
- * @see https://tailwindcss.com/docs/touch-action
4906
- */
4907
- 'touch-pz': ['touch-pinch-zoom'],
4908
- /**
4909
- * User Select
4910
- * @see https://tailwindcss.com/docs/user-select
4911
- */
4912
- select: [{
4913
- select: ['none', 'text', 'all', 'auto']
4914
- }],
4915
- /**
4916
- * Will Change
4917
- * @see https://tailwindcss.com/docs/will-change
4918
- */
4919
- 'will-change': [{
4920
- 'will-change': ['auto', 'scroll', 'contents', 'transform', isArbitraryVariable, isArbitraryValue]
4921
- }],
4922
- // -----------
4923
- // --- SVG ---
4924
- // -----------
4925
- /**
4926
- * Fill
4927
- * @see https://tailwindcss.com/docs/fill
4928
- */
4929
- fill: [{
4930
- fill: ['none', ...scaleColor()]
4931
- }],
4932
- /**
4933
- * Stroke Width
4934
- * @see https://tailwindcss.com/docs/stroke-width
4935
- */
4936
- 'stroke-w': [{
4937
- stroke: [isNumber, isArbitraryVariableLength, isArbitraryLength, isArbitraryNumber]
4938
- }],
4939
- /**
4940
- * Stroke
4941
- * @see https://tailwindcss.com/docs/stroke
4942
- */
4943
- stroke: [{
4944
- stroke: ['none', ...scaleColor()]
4945
- }],
4946
- // ---------------------
4947
- // --- Accessibility ---
4948
- // ---------------------
4949
- /**
4950
- * Forced Color Adjust
4951
- * @see https://tailwindcss.com/docs/forced-color-adjust
4952
- */
4953
- 'forced-color-adjust': [{
4954
- 'forced-color-adjust': ['auto', 'none']
4955
- }]
4956
- },
4957
- conflictingClassGroups: {
4958
- 'container-named': ['container-type'],
4959
- overflow: ['overflow-x', 'overflow-y'],
4960
- overscroll: ['overscroll-x', 'overscroll-y'],
4961
- inset: ['inset-x', 'inset-y', 'inset-bs', 'inset-be', 'start', 'end', 'top', 'right', 'bottom', 'left'],
4962
- 'inset-x': ['right', 'left'],
4963
- 'inset-y': ['top', 'bottom'],
4964
- flex: ['basis', 'grow', 'shrink'],
4965
- gap: ['gap-x', 'gap-y'],
4966
- p: ['px', 'py', 'ps', 'pe', 'pbs', 'pbe', 'pt', 'pr', 'pb', 'pl'],
4967
- px: ['pr', 'pl'],
4968
- py: ['pt', 'pb'],
4969
- m: ['mx', 'my', 'ms', 'me', 'mbs', 'mbe', 'mt', 'mr', 'mb', 'ml'],
4970
- mx: ['mr', 'ml'],
4971
- my: ['mt', 'mb'],
4972
- size: ['w', 'h'],
4973
- 'font-size': ['leading'],
4974
- 'fvn-normal': ['fvn-ordinal', 'fvn-slashed-zero', 'fvn-figure', 'fvn-spacing', 'fvn-fraction'],
4975
- 'fvn-ordinal': ['fvn-normal'],
4976
- 'fvn-slashed-zero': ['fvn-normal'],
4977
- 'fvn-figure': ['fvn-normal'],
4978
- 'fvn-spacing': ['fvn-normal'],
4979
- 'fvn-fraction': ['fvn-normal'],
4980
- 'line-clamp': ['display', 'overflow'],
4981
- 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'],
4982
- 'rounded-s': ['rounded-ss', 'rounded-es'],
4983
- 'rounded-e': ['rounded-se', 'rounded-ee'],
4984
- 'rounded-t': ['rounded-tl', 'rounded-tr'],
4985
- 'rounded-r': ['rounded-tr', 'rounded-br'],
4986
- 'rounded-b': ['rounded-br', 'rounded-bl'],
4987
- 'rounded-l': ['rounded-tl', 'rounded-bl'],
4988
- 'border-spacing': ['border-spacing-x', 'border-spacing-y'],
4989
- 'border-w': ['border-w-x', 'border-w-y', 'border-w-s', 'border-w-e', 'border-w-bs', 'border-w-be', 'border-w-t', 'border-w-r', 'border-w-b', 'border-w-l'],
4990
- 'border-w-x': ['border-w-r', 'border-w-l'],
4991
- 'border-w-y': ['border-w-t', 'border-w-b'],
4992
- 'border-color': ['border-color-x', 'border-color-y', 'border-color-s', 'border-color-e', 'border-color-bs', 'border-color-be', 'border-color-t', 'border-color-r', 'border-color-b', 'border-color-l'],
4993
- 'border-color-x': ['border-color-r', 'border-color-l'],
4994
- 'border-color-y': ['border-color-t', 'border-color-b'],
4995
- translate: ['translate-x', 'translate-y', 'translate-none'],
4996
- 'translate-none': ['translate', 'translate-x', 'translate-y', 'translate-z'],
4997
- 'scroll-m': ['scroll-mx', 'scroll-my', 'scroll-ms', 'scroll-me', 'scroll-mbs', 'scroll-mbe', 'scroll-mt', 'scroll-mr', 'scroll-mb', 'scroll-ml'],
4998
- 'scroll-mx': ['scroll-mr', 'scroll-ml'],
4999
- 'scroll-my': ['scroll-mt', 'scroll-mb'],
5000
- 'scroll-p': ['scroll-px', 'scroll-py', 'scroll-ps', 'scroll-pe', 'scroll-pbs', 'scroll-pbe', 'scroll-pt', 'scroll-pr', 'scroll-pb', 'scroll-pl'],
5001
- 'scroll-px': ['scroll-pr', 'scroll-pl'],
5002
- 'scroll-py': ['scroll-pt', 'scroll-pb'],
5003
- touch: ['touch-x', 'touch-y', 'touch-pz'],
5004
- 'touch-x': ['touch'],
5005
- 'touch-y': ['touch'],
5006
- 'touch-pz': ['touch']
5007
- },
5008
- conflictingClassGroupModifiers: {
5009
- 'font-size': ['leading']
5010
- },
5011
- postfixLookupClassGroups: ['container-type'],
5012
- orderSensitiveModifiers: ['*', '**', 'after', 'backdrop', 'before', 'details-content', 'file', 'first-letter', 'first-line', 'marker', 'placeholder', 'selection']
5013
- };
5014
- };
5015
- const twMerge = /*#__PURE__*/createTailwindMerge(getDefaultConfig);
5016
-
5017
- function cn() {
5018
- var inputs = [];
5019
- for (var _i = 0; _i < arguments.length; _i++) {
5020
- inputs[_i] = arguments[_i];
5021
- }
5022
- return twMerge(clsx(inputs));
5023
- }
5024
1746
  var BORDER_COLOR = {
5025
1747
  countdown: 'border-bia-blue',
5026
1748
  success: 'border-bia-green',
@@ -5795,14 +2517,15 @@ var sizeConfig$9 = {
5795
2517
 
5796
2518
  var sizeUnion$3 = ['md', 'sm', 'tn'];
5797
2519
  function Checkbox(_a) {
5798
- var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, props = __rest(_a, ["disabled", "id", "size", "label", "onChange"]);
5799
- var _e = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _e.checkClass, labelClass = _e.labelClass;
2520
+ var _b = _a.disabled, disabled = _b === void 0 ? false : _b, id = _a.id, _c = _a.size, size = _c === void 0 ? 'md' : _c, label = _a.label, _d = _a.onChange, onChange = _d === void 0 ? function () { } : _d, _e = _a.isIndeterminate, isIndeterminate = _e === void 0 ? false : _e, props = __rest(_a, ["disabled", "id", "size", "label", "onChange", "isIndeterminate"]);
2521
+ var _f = sizeConfig$9[validUnion(size, sizeUnion$3)], checkClass = _f.checkClass, labelClass = _f.labelClass;
2522
+ var isValidIndeterminate = isIndeterminate && props.checked && !disabled;
2523
+ var backgroundClass = size === 'tn' && props.checked ? 'bg-bia-blue' : 'bg-bia-white';
2524
+ var peerCheckedClass = size === 'tn' ? '' : 'peer-checked:border-2';
5800
2525
  return (React.createElement("div", { className: "flex items-center" },
5801
- React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full bg-white ".concat(checkClass) },
2526
+ React.createElement("div", { className: "relative flex flex-shrink-0 items-center justify-center rounded-full ".concat(backgroundClass, " ").concat(checkClass) },
5802
2527
  React.createElement("input", __assign({ id: id, type: "checkbox", className: "checkbox peer absolute box-content h-full w-full cursor-pointer appearance-none rounded-full border-2 border-bia-coolgrey-light-50 checked:border-bia-blue hover:border-bia-blue-hover focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-bia-blue focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-bia-coolgrey-light-50 disabled:checked:border-bia-blue-light-50", onChange: function (e) { return onChange(e); }, disabled: disabled }, props)),
5803
- React.createElement("div", { className: "check-icon z-1 group flex h-full w-full justify-center rounded-full text-bia-grey outline-2 outline-bia-blue peer-checked:border-2 peer-checked:border-primary-white peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:bg-bia-blue-light-50 peer-disabled:peer-checked:outline-bia-blue-light-50" },
5804
- React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: " fill-bia-grey-dark-10 peer-checked:group-[]:fill-primary-white peer-hover:group-[]:fill-bia-blue-hover peer-checked:peer-hover:group-[]:fill-primary-white peer-disabled:group-[]:fill-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:fill-primary-white", viewBox: "-5 -7 24 24", width: "24" },
5805
- React.createElement("path", { d: "M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z" })))),
2528
+ React.createElement("div", { className: "check-icon z-1 group flex h-full w-full items-center justify-center rounded-full text-bia-grey outline-2 outline-bia-blue peer-checked:border-primary-white peer-checked:bg-bia-blue peer-checked:hover:border-bia-blue-hover peer-checked:hover:outline-bia-blue-hover peer-checked:peer-hover:bg-bia-blue-hover peer-disabled:bg-bia-grey-light-80 peer-disabled:peer-checked:bg-bia-blue-light-50 peer-disabled:peer-checked:outline-bia-blue-light-50 ".concat(peerCheckedClass) }, isValidIndeterminate ? (React.createElement(TbMinus, { className: "stroke-[3px] text-bia-grey-dark-10 peer-checked:group-[]:text-bia-white peer-hover:group-[]:text-bia-blue-hover peer-checked:peer-hover:group-[]:text-bia-white peer-disabled:group-[]:text-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:text-bia-white", size: 14 })) : (React.createElement(TbCheck, { className: "stroke-[3px] text-bia-grey-dark-10 peer-checked:group-[]:text-bia-white peer-hover:group-[]:text-bia-blue-hover peer-checked:peer-hover:group-[]:text-bia-white peer-disabled:group-[]:text-bia-grey-dark-10 peer-disabled:peer-checked:group-[]:text-bia-white", size: 14 })))),
5806
2529
  React.createElement("label", { htmlFor: id, className: "ml-2 leading-4 text-primary-black ".concat(labelClass), style: { color: disabled ? '#8C8CA6' : '' } }, childrenElement(label))));
5807
2530
  }
5808
2531
  Checkbox.defaultProps = {
@@ -5972,7 +2695,7 @@ var sizeConfig$6 = {
5972
2695
  },
5973
2696
  };
5974
2697
 
5975
- var containerSizeConfig = {
2698
+ var containerSizeConfig$1 = {
5976
2699
  sm: 'min-w-[72px]',
5977
2700
  md: 'min-w-[96px]',
5978
2701
  };
@@ -5988,7 +2711,7 @@ var fontConfig = {
5988
2711
  var DropdownElement = forwardRef(function (_a, ref) {
5989
2712
  var isTopFlat = _a.isTopFlat, children = _a.children, className = _a.className, size = _a.size, zIndex = _a.zIndex, style = _a.style, onClose = _a.onClose, onClickItem = _a.onClickItem, restProps = __rest(_a, ["isTopFlat", "children", "className", "size", "zIndex", "style", "onClose", "onClickItem"]);
5990
2713
  var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
5991
- var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
2714
+ var sizeClass = containerSizeConfig$1[size] || containerSizeConfig$1['md'];
5992
2715
  var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
5993
2716
  var handleClickDrpdownItem = function (e, val) {
5994
2717
  onClickItem(e, val);
@@ -6007,8 +2730,6 @@ var DropdownElement = forwardRef(function (_a, ref) {
6007
2730
  });
6008
2731
  var DropdownContainer = function (propsComp) {
6009
2732
  var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, anchorRef = propsComp.anchorRef, matchAnchorWidth = propsComp.matchAnchorWidth, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex", "anchorRef", "matchAnchorWidth"]);
6010
- if (!open)
6011
- return null;
6012
2733
  var dropdownRef = useRef(null);
6013
2734
  var positionStyle = usePopupPosition(anchorRef, dropdownRef)[0];
6014
2735
  var newStyle = useMemo(function () {
@@ -6035,9 +2756,10 @@ var DropdownContainer = function (propsComp) {
6035
2756
  }
6036
2757
  return __assign(__assign({ zIndex: zIndex + 10 }, widthStyle), positionStyle);
6037
2758
  }, [positionStyle]);
6038
- var dropdownElement = (React.createElement(DropdownElement, __assign({ ref: dropdownRef, isTopFlat: isTopFlat, children: children, className: className, size: size, zIndex: zIndex, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
2759
+ var displayClass = open ? 'block' : 'hidden';
2760
+ var dropdownElement = (React.createElement(DropdownElement, __assign({ ref: dropdownRef, isTopFlat: isTopFlat, children: children, className: "".concat(className, " ").concat(displayClass), size: size, zIndex: zIndex, onClose: onClose, onClickItem: onClickItem, style: newStyle }, restProps)));
6039
2761
  return (React.createElement(React.Fragment, null,
6040
- isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen", style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
2762
+ isWithOverlay && (React.createElement("div", { className: "bianic-dropdown-overlay fixed left-0 top-0 h-screen w-screen ".concat(displayClass), style: { zIndex: zIndex }, onClick: function () { return onClose(); } })),
6041
2763
  (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current)
6042
2764
  ? createPortal(dropdownElement, document.body)
6043
2765
  : dropdownElement));
@@ -6049,7 +2771,7 @@ DropdownContainer.defaultProps = {
6049
2771
  var DropdownContNoAnchor = forwardRef(function DropdownContNoAnchor(propsComp, ref) {
6050
2772
  var _a = propsComp.isTopFlat, isTopFlat = _a === void 0 ? false : _a, children = propsComp.children, _b = propsComp.open, open = _b === void 0 ? true : _b, _c = propsComp.onClose, onClose = _c === void 0 ? function () { } : _c, _d = propsComp.className, className = _d === void 0 ? '' : _d, _e = propsComp.isWithOverlay, isWithOverlay = _e === void 0 ? true : _e, _f = propsComp.size, size = _f === void 0 ? 'md' : _f, _g = propsComp.onClickItem, onClickItem = _g === void 0 ? function () { } : _g, _h = propsComp.zIndex, zIndex = _h === void 0 ? 100 : _h, restProps = __rest(propsComp, ["isTopFlat", "children", "open", "onClose", "className", "isWithOverlay", "size", "onClickItem", "zIndex"]);
6051
2773
  var radiusClass = "rounded-b-radius-sm ".concat(!isTopFlat && 'rounded-t-radius-sm');
6052
- var sizeClass = containerSizeConfig[size] || containerSizeConfig['md'];
2774
+ var sizeClass = containerSizeConfig$1[size] || containerSizeConfig$1['md'];
6053
2775
  var containerClass = "".concat(sizeClass, " ").concat(radiusClass, " ").concat(className);
6054
2776
  var handleClickDrpdownItem = function (e, val) {
6055
2777
  onClickItem(e, val);
@@ -7792,16 +4514,74 @@ ResizeableDiv.defaultProps = {
7792
4514
  position: 'left',
7793
4515
  };
7794
4516
 
7795
- var SidebarContainer = function (_a) {
7796
- _a.bgColor; var children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c; _a.activeItem;
7797
- var minWidth = isMinimized ? 'min-w-0' : 'min-w-[285px]';
7798
- return (React.createElement("div", { className: "sidebar-container flex h-full flex-col justify-start bg-[#64747D] py-[30px] ".concat(minWidth) }, Children.map(children, function (child) {
4517
+ var containerSizeConfig = {
4518
+ minimized: 'w-[60px] min-w-[60px]',
4519
+ maximized: 'w-[285px] min-w-[285px]',
4520
+ };
4521
+ var itemConfig = {
4522
+ minimized: 'px-[11px]',
4523
+ maximized: 'pl-[30px] pr-[15px]',
4524
+ };
4525
+ var profileConfig = {
4526
+ minimized: 'px-[5px]',
4527
+ maximized: 'pl-[20px] pr-[15px]',
4528
+ };
4529
+ var overlaySizeConfig = {
4530
+ minimized: 'w-[38px]',
4531
+ maximized: 'w-full',
4532
+ };
4533
+ var buttonConfig = {
4534
+ 0: '',
4535
+ 1: 'pl-[30px]',
4536
+ 2: 'pl-[68px]',
4537
+ };
4538
+
4539
+ var SidebarContainer = forwardRef(function (_a, ref) {
4540
+ var _b = _a.color, color = _b === void 0 ? 'margueriteblue-dark-30' : _b, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.activeId, activeId = _d === void 0 ? undefined : _d, _e = _a.setActiveId, setActiveId = _e === void 0 ? function () { } : _e, _f = _a.className, className = _f === void 0 ? '' : _f, restProps = __rest(_a, ["color", "children", "isMinimized", "activeId", "setActiveId", "className"]);
4541
+ var minimizedState = isMinimized ? 'minimized' : 'maximized';
4542
+ var containerClass = cn("bg-bia-".concat(color), containerSizeConfig[minimizedState]);
4543
+ return (React.createElement("div", __assign({ ref: ref, className: cn('sidebar-container flex h-full flex-col justify-start py-[30px] overflow-hidden transition-[width,min-width] delay-200 ease-[cubic-bezier(0.68,-0.1,0.32,1.2)] duration-500', containerClass, className) }, restProps), Children.map(children, function (child) {
7799
4544
  return isValidElement(child)
7800
4545
  ? cloneElement(child, {
7801
4546
  isMinimized: isMinimized,
4547
+ activeId: activeId,
4548
+ setActiveId: setActiveId,
4549
+ color: color,
7802
4550
  })
7803
4551
  : child;
7804
4552
  })));
4553
+ });
4554
+ SidebarContainer.displayName = 'SidebarContainer';
4555
+
4556
+ var SidebarMenu = function (_a) {
4557
+ var _b = _a.color, color = _b === void 0 ? 'margueriteblue-dark-30' : _b, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.activeId, activeId = _d === void 0 ? undefined : _d, _e = _a.setActiveId, setActiveId = _e === void 0 ? function () { } : _e;
4558
+ var _f = useState(false), isAllExpanded = _f[0], setIsAllExpanded = _f[1];
4559
+ var menuClass = "transition-sidebar-menu-menu h-[60px]";
4560
+ var minimizedMenuClass = isMinimized
4561
+ ? 'opacity-100 h-1 w-full delay-[600ms] duration-300 ease-[cubic-bezier(0.68,-0.1,0.32,2)]'
4562
+ : 'opacity-0 w-0 duration-200';
4563
+ return (React.createElement("div", null,
4564
+ React.createElement("div", { className: "relative flex w-full text-bia-white ".concat(menuClass) },
4565
+ React.createElement("div", { className: "absolute left-0 top-[27.5px] px-[17px] ".concat(minimizedMenuClass) },
4566
+ React.createElement("div", { className: "h-[1px] w-full bg-white" })),
4567
+ React.createElement("div", { className: "absolute bottom-[11px] flex w-full justify-between pl-[78px] pr-[25px]" },
4568
+ React.createElement(Text, { variant: "small-text", className: cn('truncate text-bia-white delay-[400ms]', isMinimized
4569
+ ? 'opacity-0 duration-300 ease-in-out'
4570
+ : 'opacity-75 delay-1000 duration-700 ease-in-out') }, "Menu"),
4571
+ React.createElement(ContextualButton, { onClick: function () { return setIsAllExpanded(function (prev) { return !prev; }); }, icon: React.createElement(TbChevronsDown, { className: cn('truncate text-bia-white delay-[400ms]', isMinimized
4572
+ ? 'opacity-0 duration-300 ease-in-out'
4573
+ : 'opacity-100 delay-1000 duration-700 ease-in-out'), size: 18 }), className: "ml-auto opacity-50 hover:opacity-100 ".concat(isAllExpanded ? 'rotate-180' : '') }))),
4574
+ Children.map(children, function (child) {
4575
+ return isValidElement(child)
4576
+ ? cloneElement(child, {
4577
+ isMinimized: isMinimized,
4578
+ activeId: activeId,
4579
+ setActiveId: setActiveId,
4580
+ color: color,
4581
+ isExpand: isAllExpanded,
4582
+ })
4583
+ : child;
4584
+ })));
7805
4585
  };
7806
4586
 
7807
4587
  var colorConfig = {
@@ -7858,7 +4638,7 @@ var colorUnion = [
7858
4638
  'custom',
7859
4639
  ];
7860
4640
  var sizeUnion = ['md', 'sm', 'tn'];
7861
- var variantUnion = ['label', 'icon', 'closeable'];
4641
+ var variantUnion = ['label', 'icon', 'closeable', 'monospace'];
7862
4642
  var TagLabel = function (_a) {
7863
4643
  var color = _a.color, _b = _a.size, size = _b === void 0 ? 'md' : _b, variant = _a.variant, closeHandler = _a.closeHandler, open = _a.open, text = _a.text, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon; _a.left; _a.right; var _c = _a.bgColor, bgColor = _c === void 0 ? 'grey-light-50' : _c, _d = _a.textColor, textColor = _d === void 0 ? 'black' : _d, outlineColor = _a.outlineColor, isBlock = _a.isBlock, maxWidth = _a.maxWidth, isDark = _a.isDark; _a.style; var props = __rest(_a, ["color", "size", "variant", "closeHandler", "open", "text", "leftIcon", "rightIcon", "left", "right", "bgColor", "textColor", "outlineColor", "isBlock", "maxWidth", "isDark", "style"]);
7864
4644
  var validatedColor = validUnion(color, colorUnion);
@@ -7894,7 +4674,9 @@ var TagLabel = function (_a) {
7894
4674
  : colorConfig[validatedColor];
7895
4675
  var blockclass = isBlock && validatedVariant !== 'icon' ? 'w-full' : "w-fit";
7896
4676
  var maxWidthStyle = !isBlock ? maxWidth + 'px' : '';
7897
- var textClass = isBlock ? 'text-center' : 'text-left';
4677
+ var alignTextClass = isBlock ? 'text-center' : 'text-left';
4678
+ var fontClass = validatedVariant === 'monospace' ? 'font-sans-code' : 'font-segoe pb-[1px]';
4679
+ var textClass = "".concat(alignTextClass, " ").concat(fontClass);
7898
4680
  var containerClass = "".concat(sizeClass, " ").concat(colorClass, " ").concat(roundedClass, " ").concat(isCloseableClass, " ").concat(blockclass);
7899
4681
  var closeColor = validatedColor === 'custom'
7900
4682
  ? isDark
@@ -7911,7 +4693,7 @@ var TagLabel = function (_a) {
7911
4693
  height: sizeCount + 'px',
7912
4694
  }, className: "flex items-center justify-center", ref: containerRef }, leftIcon ||
7913
4695
  (validatedVariant === 'icon' && (React.createElement(TbCheck, { className: defaultIconSize }))))),
7914
- validatedVariant !== 'icon' && text && (React.createElement("span", { className: "w-full truncate pb-[1px] ".concat(textClass) }, text)),
4696
+ validatedVariant !== 'icon' && text && (React.createElement("span", { className: "w-full truncate ".concat(textClass) }, text)),
7915
4697
  validatedVariant === 'label' && rightIcon && (React.createElement("div", { className: "block" },
7916
4698
  " ",
7917
4699
  rightIcon,
@@ -7935,45 +4717,250 @@ TagLabel.defaultProps = {
7935
4717
  isDark: false,
7936
4718
  };
7937
4719
 
7938
- var SidebarItem = function (_a) {
7939
- var title = _a.title, icon = _a.icon, _b = _a.active, active = _b === void 0 ? false : _b, onClick = _a.onClick, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.isExpand, isExpand = _d === void 0 ? false : _d, notificationCount = _a.notificationCount, _e = _a.level, level = _e === void 0 ? 0 : _e;
7940
- var horizontalPadding = isMinimized ? 'px-[11px]' : 'pl-[30px] pr-[15px]';
7941
- var _f = useState(isExpand || false), isChildExpanded = _f[0], setIsChildExpanded = _f[1];
7942
- var hasChildren = !!children;
4720
+ var SidebarItem = forwardRef(function (_a, ref) {
4721
+ var id = _a.id, title = _a.title, icon = _a.icon; _a.active; var onClick = _a.onClick, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.isExpand, isExpand = _d === void 0 ? false : _d, notificationCount = _a.notificationCount, _e = _a.level, level = _e === void 0 ? 0 : _e, _f = _a.activeId, activeId = _f === void 0 ? null : _f, _g = _a.setActiveId, setActiveId = _g === void 0 ? function () { } : _g, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.color, color = _j === void 0 ? 'blue' : _j, restProps = __rest(_a, ["id", "title", "icon", "active", "onClick", "children", "isMinimized", "isExpand", "notificationCount", "level", "activeId", "setActiveId", "className", "color"]);
4722
+ var childDropdownRef = useRef(null);
4723
+ var _k = useState(isExpand), isChildExpanded = _k[0], setIsChildExpanded = _k[1];
4724
+ var childrenArray = Children.toArray(children);
4725
+ var hasChildren = childrenArray.length > 0;
4726
+ var nextLevel = Math.min(level + 1, 2);
4727
+ var isActive = activeId === id;
4728
+ var containerState = isMinimized ? 'minimized' : 'maximized';
4729
+ useEffect(function () {
4730
+ setIsChildExpanded(isExpand);
4731
+ }, [isExpand]);
4732
+ var isSidebarItemElement = function (node) {
4733
+ return isValidElement(node) && typeof node.props === 'object';
4734
+ };
4735
+ var collectChildIds = function (nodes) {
4736
+ return Children.toArray(nodes).reduce(function (result, node) {
4737
+ if (!isSidebarItemElement(node))
4738
+ return result;
4739
+ if (node.props.id)
4740
+ result.push(String(node.props.id));
4741
+ if (node.props.children)
4742
+ result.push.apply(result, collectChildIds(node.props.children));
4743
+ return result;
4744
+ }, []);
4745
+ };
4746
+ var sumNotificationCounts = function (nodes) {
4747
+ return Children.toArray(nodes).reduce(function (sum, node) {
4748
+ var _a;
4749
+ if (!isSidebarItemElement(node))
4750
+ return sum;
4751
+ var childSum = sumNotificationCounts(node.props.children);
4752
+ return sum + ((_a = node.props.notificationCount) !== null && _a !== void 0 ? _a : 0) + childSum;
4753
+ }, 0);
4754
+ };
4755
+ var nestedIds = collectChildIds(children);
4756
+ var isPathActive = nestedIds.some(function (nestedId) { return nestedId === activeId; });
4757
+ var notificationLabel = notificationCount !== undefined
4758
+ ? String(notificationCount)
4759
+ : String(sumNotificationCounts(children));
4760
+ var buttonIcon = isValidElement(icon)
4761
+ ? cloneElement(icon, {
4762
+ className: 'text-bia-white',
4763
+ size: '18',
4764
+ })
4765
+ : icon;
4766
+ var buttonClass = buttonConfig[level];
7943
4767
  var chevronClass = hasChildren ? 'inline-block' : 'hidden';
7944
- var nextLevel = level + 1;
7945
- var buttonClass = level === 1 ? 'pl-[30px]' : level === 2 ? 'pl-[68px]' : '';
7946
- var isGrandChild = level === 2;
7947
- return (React.createElement(React.Fragment, null,
7948
- React.createElement("div", { className: "sidebar-item relative flex h-fit items-center ".concat(horizontalPadding) },
7949
- isGrandChild && (React.createElement("div", { className: "relative left-[39px] h-full w-[1px] bg-bia-white" })),
4768
+ var itemClass = cn(itemConfig[containerState], isActive || isPathActive ? 'opacity-100' : 'opacity-75 hover:opacity-100', 'transition-sidebar-item');
4769
+ var overlayClass = cn(overlaySizeConfig[containerState], isActive ? 'opacity-15' : 'opacity-0 group-hover:opacity-[0.08]');
4770
+ var colorClass = "bg-bia-".concat(color);
4771
+ var renderChildren = function () {
4772
+ return Children.map(children, function (child) {
4773
+ return isSidebarItemElement(child)
4774
+ ? cloneElement(child, {
4775
+ level: nextLevel,
4776
+ activeId: activeId,
4777
+ setActiveId: setActiveId,
4778
+ isExpand: isExpand,
4779
+ })
4780
+ : child;
4781
+ });
4782
+ };
4783
+ var renderDropdownItems = function () {
4784
+ return childrenArray.filter(isSidebarItemElement).map(function (child) {
4785
+ var _a, _b, _c;
4786
+ var grandChildren = Children.toArray(child.props.children).filter(isSidebarItemElement);
4787
+ var childNotificationCount = grandChildren.length > 0
4788
+ ? sumNotificationCounts(child.props.children)
4789
+ : ((_a = child.props.notificationCount) !== null && _a !== void 0 ? _a : 0);
4790
+ return (React.createElement(DropdownItem, { key: (_b = child.props.id) !== null && _b !== void 0 ? _b : String((_c = child.key) !== null && _c !== void 0 ? _c : ''), content: React.createElement("div", { className: "relative" },
4791
+ child.props.title,
4792
+ isMinimized && childNotificationCount > 0 && (React.createElement("div", { className: "absolute -right-[8px] top-[2px] h-[6px] w-[6px] rounded-radius-full ".concat(colorClass) }))) }, grandChildren.length > 0 &&
4793
+ grandChildren.map(function (grandChild) {
4794
+ var _a, _b;
4795
+ return (React.createElement(DropdownItem, { key: (_a = grandChild.props.id) !== null && _a !== void 0 ? _a : String((_b = grandChild.key) !== null && _b !== void 0 ? _b : ''), content: React.createElement("div", { className: "flex justify-between gap-x-[11px]" },
4796
+ grandChild.props.title,
4797
+ grandChild.props.notificationCount ? (React.createElement(TagLabel, { text: String(grandChild.props.notificationCount), color: "custom", bgColor: color, textColor: "white", size: "tn" })) : null) }));
4798
+ })));
4799
+ });
4800
+ };
4801
+ return (React.createElement("div", { className: "relative" },
4802
+ React.createElement("div", { className: "absolute left-[33px] top-[3px] flex h-5 w-5 items-center justify-center" },
4803
+ React.createElement("div", { className: cn('rounded-radius-full bg-white', isMinimized && notificationCount === undefined
4804
+ ? sumNotificationCounts(children) > 0
4805
+ ? 'h-[6px] w-[6px] delay-[600ms] duration-300 ease-[cubic-bezier(0.68,-0.1,0.32,2)]'
4806
+ : 'h-0 w-0 duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]'
4807
+ : 'h-0 w-0 duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]') })),
4808
+ React.createElement("div", { className: cn('sidebar-item relative flex h-fit items-center', itemClass) },
4809
+ level === 2 && (React.createElement("div", { className: "relative left-[39px] h-full w-[1px] bg-bia-white" })),
7950
4810
  React.createElement("div", { className: "group relative grow" },
7951
- !isMinimized && (React.createElement("button", { onClick: function () {
7952
- if (hasChildren)
4811
+ React.createElement("button", __assign({ ref: ref }, restProps, { onClick: function () {
4812
+ if (hasChildren) {
7953
4813
  setIsChildExpanded(function (prev) { return !prev; });
7954
- else
4814
+ }
4815
+ else {
7955
4816
  onClick === null || onClick === void 0 ? void 0 : onClick();
7956
- }, className: "flex w-full min-w-fit grow items-center gap-x-2.5 p-2.5 ".concat(buttonClass) },
7957
- isValidElement(icon)
7958
- ? cloneElement(icon, {
7959
- className: 'text-bia-white',
7960
- size: '18',
7961
- })
7962
- : '',
7963
- React.createElement(Text, { variant: "normal-text", className: "text-bia-white" }, title),
7964
- React.createElement("div", { className: "ml-auto flex items-center gap-x-[5px]" },
7965
- notificationCount !== undefined ? (React.createElement(TagLabel, { text: String(notificationCount), color: "white", size: "tn" })) : (''),
7966
- React.createElement("button", { className: chevronClass }, isChildExpanded ? (React.createElement(TbChevronDown, { className: "text-bia-white", size: 18 })) : (React.createElement(TbChevronRight, { className: "text-bia-white", size: 18 })))))),
7967
- isMinimized && (React.createElement("button", { className: "flex items-center justify-center px-2.5 py-[11px] text-bia-white" }, icon)),
7968
- React.createElement("div", { className: "pointer-events-none absolute inset-0 rounded-radius-lg bg-black opacity-0 transition-opacity duration-200 group-hover:opacity-5 group-active:opacity-15" })),
7969
- active && (React.createElement("div", { className: "absolute right-0 ml-auto h-2/3 w-1 rounded-l-radius-md bg-bia-white" }))),
7970
- isChildExpanded &&
7971
- Children.map(children, function (child) {
7972
- return isValidElement(child)
7973
- ? cloneElement(child, { level: nextLevel })
7974
- : child;
4817
+ setActiveId(id);
4818
+ }
4819
+ }, className: cn('flex w-full items-center gap-x-5 p-2.5', buttonClass, className) }),
4820
+ level === 2 && (React.createElement("div", { className: "absolute left-[38px] h-full w-[1px] bg-bia-white" })),
4821
+ buttonIcon,
4822
+ React.createElement(Text, { variant: "normal-text", className: cn('truncate text-bia-white delay-[400ms]', isMinimized
4823
+ ? 'opacity-0 duration-300 ease-in-out'
4824
+ : 'opacity-100 delay-1000 duration-700 ease-in-out') }, title),
4825
+ React.createElement("div", { className: cn('ml-auto flex items-center gap-x-[5px]', isMinimized
4826
+ ? 'opacity-0 delay-200 duration-300 ease-in-out'
4827
+ : 'opacity-100 delay-[550ms] duration-500 ease-in-out') },
4828
+ (notificationCount !== undefined ||
4829
+ (!isChildExpanded &&
4830
+ sumNotificationCounts(children) > 0)) && (React.createElement(TagLabel, { text: notificationLabel, color: "white", size: "tn" })),
4831
+ React.createElement("div", { className: cn(chevronClass) },
4832
+ React.createElement(TbChevronRight, { className: cn('text-bia-white transition-transform duration-300 ease-in-out', isChildExpanded ? 'rotate-90' : ''), size: 18 })))),
4833
+ React.createElement("div", { className: cn('pointer-events-none absolute inset-0 rounded-radius-lg bg-black transition-opacity duration-200', overlayClass) })),
4834
+ isActive && (React.createElement("div", { className: "absolute right-0 ml-auto h-full w-1 rounded-l-radius-md bg-bia-white" }))),
4835
+ !isMinimized && hasChildren && isChildExpanded && renderChildren(),
4836
+ React.createElement("div", { className: "dropdown-anchor absolute left-[60px] top-0", ref: childDropdownRef }),
4837
+ isMinimized && hasChildren && (React.createElement(DropdownContainer, { open: isChildExpanded, onClose: function () { return setIsChildExpanded(false); }, anchorRef: childDropdownRef }, renderDropdownItems()))));
4838
+ });
4839
+ SidebarItem.displayName = 'SidebarItem';
4840
+
4841
+ var SidebarProfile = forwardRef(function (_a, ref) {
4842
+ var id = _a.id, username = _a.username, role = _a.role, avatarImg = _a.avatarImg; _a.active; var onClick = _a.onClick, children = _a.children, _c = _a.isMinimized, isMinimized = _c === void 0 ? false : _c, _d = _a.isExpand, isExpand = _d === void 0 ? false : _d, notificationCount = _a.notificationCount, _e = _a.activeId, activeId = _e === void 0 ? null : _e, _f = _a.setActiveId, setActiveId = _f === void 0 ? function () { } : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.color, color = _h === void 0 ? 'blue' : _h, restProps = __rest(_a, ["id", "username", "role", "avatarImg", "active", "onClick", "children", "isMinimized", "isExpand", "notificationCount", "activeId", "setActiveId", "className", "color"]);
4843
+ var childDropdownRef = useRef(null);
4844
+ var _j = useState(isExpand), isChildExpanded = _j[0], setIsChildExpanded = _j[1];
4845
+ var childrenArray = Children.toArray(children);
4846
+ var hasChildren = childrenArray.length > 0;
4847
+ var isActive = activeId === id;
4848
+ var containerState = isMinimized ? 'minimized' : 'maximized';
4849
+ var isSidebarProfileElement = function (node) {
4850
+ return isValidElement(node) && typeof node.props === 'object';
4851
+ };
4852
+ var collectChildIds = function (nodes) {
4853
+ return Children.toArray(nodes).reduce(function (result, node) {
4854
+ if (!isSidebarProfileElement(node))
4855
+ return result;
4856
+ if (node.props.id)
4857
+ result.push(String(node.props.id));
4858
+ if (node.props.children)
4859
+ result.push.apply(result, collectChildIds(node.props.children));
4860
+ return result;
4861
+ }, []);
4862
+ };
4863
+ var sumNotificationCounts = function (nodes) {
4864
+ return Children.toArray(nodes).reduce(function (sum, node) {
4865
+ var _a;
4866
+ if (!isSidebarProfileElement(node))
4867
+ return sum;
4868
+ var childSum = sumNotificationCounts(node.props.children);
4869
+ return sum + ((_a = node.props.notificationCount) !== null && _a !== void 0 ? _a : 0) + childSum;
4870
+ }, 0);
4871
+ };
4872
+ var nestedIds = collectChildIds(children);
4873
+ var isPathActive = nestedIds.some(function (nestedId) { return nestedId === activeId; });
4874
+ var notificationLabel = notificationCount !== undefined
4875
+ ? String(notificationCount)
4876
+ : String(sumNotificationCounts(children));
4877
+ var avatarImage = isValidElement(avatarImg)
4878
+ ? cloneElement(avatarImg, {
4879
+ className: 'text-bia-white',
4880
+ size: 36,
4881
+ })
4882
+ : avatarImg;
4883
+ var profileSizeConfig = {
4884
+ maximized: 'p-2.5',
4885
+ minimized: 'px-[6px] py-2.5',
4886
+ };
4887
+ var buttonClass = "".concat(buttonConfig[0], " ").concat(profileSizeConfig[containerState]);
4888
+ var chevronClass = hasChildren ? 'inline-block' : 'hidden';
4889
+ var profileClass = cn(profileConfig[containerState], 'transition-sidebar-item');
4890
+ var overlayClass = cn(overlaySizeConfig[containerState], isActive ? 'opacity-15' : 'opacity-0 group-hover:opacity-[0.08]');
4891
+ var colorClass = "bg-bia-".concat(color);
4892
+ var renderChildren = function () {
4893
+ return Children.map(children, function (child) {
4894
+ return isSidebarProfileElement(child)
4895
+ ? cloneElement(child, {
4896
+ activeId: activeId,
4897
+ setActiveId: setActiveId,
4898
+ })
4899
+ : child;
4900
+ });
4901
+ };
4902
+ var renderDropdownItems = function () {
4903
+ return childrenArray.filter(isSidebarProfileElement).map(function (child) {
4904
+ var _a, _b, _c;
4905
+ var grandChildren = Children.toArray(child.props.children).filter(isSidebarProfileElement);
4906
+ var childNotificationCount = grandChildren.length > 0
4907
+ ? sumNotificationCounts(child.props.children)
4908
+ : ((_a = child.props.notificationCount) !== null && _a !== void 0 ? _a : 0);
4909
+ return (React.createElement(DropdownItem, { key: (_b = child.props.id) !== null && _b !== void 0 ? _b : String((_c = child.key) !== null && _c !== void 0 ? _c : ''), content: React.createElement("div", { className: "relative" },
4910
+ child.props.title,
4911
+ isMinimized && childNotificationCount > 0 && (React.createElement("div", { className: "absolute -right-[8px] top-[2px] h-[6px] w-[6px] rounded-radius-full ".concat(colorClass) }))) }, grandChildren.map(function (grandChild) {
4912
+ var _a, _b;
4913
+ return (React.createElement(DropdownItem, { key: (_a = grandChild.props.id) !== null && _a !== void 0 ? _a : String((_b = grandChild.key) !== null && _b !== void 0 ? _b : ''), content: React.createElement("div", { className: "flex justify-between gap-x-[11px]" },
4914
+ grandChild.props.title,
4915
+ grandChild.props.notificationCount ? (React.createElement(TagLabel, { text: String(grandChild.props.notificationCount), color: "custom", bgColor: color, textColor: "white", size: "tn" })) : null) }));
7975
4916
  })));
7976
- };
4917
+ });
4918
+ };
4919
+ return (React.createElement("div", { className: "relative" },
4920
+ React.createElement("div", { className: "absolute left-[33px] top-[3px] flex h-5 w-5 items-center justify-center" },
4921
+ React.createElement("div", { className: cn('rounded-radius-full bg-white', isMinimized && notificationCount === undefined
4922
+ ? sumNotificationCounts(children) > 0
4923
+ ? 'h-[6px] w-[6px] delay-[600ms] duration-300 ease-[cubic-bezier(0.68,-0.1,0.32,2)]'
4924
+ : 'h-0 w-0 duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]'
4925
+ : 'h-0 w-0 duration-500 ease-[cubic-bezier(0.32,-1,0.68,1)]') })),
4926
+ React.createElement("div", { className: cn('sidebar-item relative flex h-fit items-center group/profile', profileClass) },
4927
+ React.createElement("div", { className: "group relative grow" },
4928
+ React.createElement("button", __assign({ ref: ref }, restProps, { onClick: function () {
4929
+ if (hasChildren) {
4930
+ setIsChildExpanded(function (prev) { return !prev; });
4931
+ }
4932
+ else {
4933
+ onClick === null || onClick === void 0 ? void 0 : onClick();
4934
+ setActiveId(id);
4935
+ }
4936
+ }, className: cn('cubic-bezier(0.68, -0.1, 0.32, 1.2) flex w-full items-center gap-x-2.5 delay-500 duration-300', buttonClass, className) }),
4937
+ avatarImage,
4938
+ React.createElement("div", { className: "flex flex-col" },
4939
+ React.createElement(Text, { variant: "normal-text", className: cn('truncate text-bia-white delay-[400ms]', isMinimized
4940
+ ? 'opacity-0 duration-300 ease-in-out'
4941
+ : 'opacity-100 delay-1000 duration-700 ease-in-out') }, username),
4942
+ React.createElement(Text, { variant: "small-text", className: cn('truncate text-left text-bia-white delay-[400ms]', isMinimized
4943
+ ? 'opacity-0 duration-300 ease-in-out'
4944
+ : 'opacity-50 delay-1000 duration-700 ease-in-out') }, role)),
4945
+ React.createElement("div", { className: cn('ml-auto flex items-center gap-x-[5px]', isMinimized
4946
+ ? 'opacity-0 delay-200 duration-300 ease-in-out'
4947
+ : 'opacity-100 delay-[550ms] duration-500 ease-in-out') },
4948
+ (notificationCount !== undefined ||
4949
+ (!isChildExpanded &&
4950
+ sumNotificationCounts(children) > 0)) && (React.createElement(TagLabel, { text: notificationLabel, className: isActive || isPathActive
4951
+ ? 'opacity-100'
4952
+ : 'opacity-75 group-hover/profile:opacity-100', color: "white", size: "tn" })),
4953
+ React.createElement("div", { className: cn(chevronClass) },
4954
+ React.createElement(TbChevronRight, { className: cn('text-bia-white transition-transform duration-300 ease-in-out', isChildExpanded ? 'rotate-90' : '', isActive || isPathActive
4955
+ ? 'opacity-100'
4956
+ : 'opacity-75 group-hover/profile:opacity-100'), size: 18 })))),
4957
+ React.createElement("div", { className: cn('pointer-events-none absolute inset-0 rounded-radius-lg bg-black transition-opacity duration-200', overlayClass) })),
4958
+ isActive && (React.createElement("div", { className: "absolute right-0 ml-auto h-full w-1 rounded-l-radius-md bg-bia-white" }))),
4959
+ !isMinimized && hasChildren && isChildExpanded && renderChildren(),
4960
+ React.createElement("div", { className: "dropdown-anchor absolute left-[60px] top-0", ref: childDropdownRef }),
4961
+ isMinimized && hasChildren && (React.createElement(DropdownContainer, { open: isChildExpanded, onClose: function () { return setIsChildExpanded(false); }, anchorRef: childDropdownRef }, renderDropdownItems()))));
4962
+ });
4963
+ SidebarProfile.displayName = 'SidebarProfile';
7977
4964
 
7978
4965
  function Slider(_a) {
7979
4966
  var disabled = _a.disabled;
@@ -8121,6 +5108,16 @@ var TabMenu = forwardRef(function (props, ref) {
8121
5108
  });
8122
5109
  TabMenu.displayName = 'TabMenu';
8123
5110
 
5111
+ var Table = function (_a) {
5112
+ var children = _a.children, rest = __rest(_a, ["children"]);
5113
+ return React.createElement("table", __assign({}, rest), children);
5114
+ };
5115
+
5116
+ var TableBody = function (_a) {
5117
+ var children = _a.children, rest = __rest(_a, ["children"]);
5118
+ return React.createElement("tbody", __assign({}, rest), children);
5119
+ };
5120
+
8124
5121
  var sizeConfig = {
8125
5122
  md: 'px-2.5 py-[9px]',
8126
5123
  sm: 'px-2.5 py-[7px]',
@@ -8155,6 +5152,87 @@ TableCell.defaultProps = {
8155
5152
  variant: 'body',
8156
5153
  };
8157
5154
 
5155
+ var TableHead = function (_a) {
5156
+ var children = _a.children, rest = __rest(_a, ["children"]);
5157
+ return React.createElement("thead", __assign({}, rest), children);
5158
+ };
5159
+
5160
+ var TableRow = function (_a) {
5161
+ _a.variant; var children = _a.children, rest = __rest(_a, ["variant", "children"]);
5162
+ return React.createElement("tr", __assign({}, rest), children);
5163
+ };
5164
+
5165
+ var BlockLoading = function (_a) {
5166
+ var _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? 'bg-bia-grey-light-80' : _c;
5167
+ return (React.createElement("div", { className: "block-loading flex h-full w-full items-center justify-center ".concat(backgroundColor, " ").concat(className) },
5168
+ React.createElement(Spinner, null)));
5169
+ };
5170
+
5171
+ var EmptyIcon = "Empty.svg";
5172
+
5173
+ var EmptyTable = function (_a) {
5174
+ var content = _a.content, subContent = _a.subContent;
5175
+ [
5176
+ React.createElement(ContextualButton, { key: "refresh", icon: React.createElement(TbRefresh, { size: 18 }), disabled: true }),
5177
+ React.createElement(ContextualButton, { key: "zoom", icon: React.createElement(TbZoom, { size: 18 }), disabled: true }),
5178
+ ];
5179
+ return (React.createElement("div", { className: "h-[368px] w-full rounded-b-radius-lg bg-bia-grey-light-80 pb-[63px]" },
5180
+ React.createElement("div", { className: "mb-[63px] grid h-[30px] w-full grid-cols-7 items-center gap-20 border-b border-bia-grey px-[60px]" },
5181
+ React.createElement("div", { className: "col-span-1 h-2 rounded-radius-sm bg-bia-grey-light-50" }),
5182
+ React.createElement("div", { className: "col-span-2 h-2 rounded-radius-sm bg-bia-grey-light-50" }),
5183
+ React.createElement("div", { className: "col-span-2 h-2 rounded-radius-sm bg-bia-grey-light-50" }),
5184
+ React.createElement("div", { className: "col-span-2 h-2 rounded-radius-sm bg-bia-grey-light-50" })),
5185
+ React.createElement("div", { className: "flex flex-col items-center justify-center rounded-md p-5" },
5186
+ React.createElement("img", { src: EmptyIcon, alt: "Empty State", style: { height: 72, width: 72 } }),
5187
+ React.createElement("div", { className: "mt-5 text-center" },
5188
+ content && (React.createElement(Text, { variant: 'small-text-semibold', extended: "block text-bia-black" }, content)),
5189
+ subContent && (React.createElement(Text, { variant: "small-text", extended: "mt-2 block text-bia-coolgrey'}" }, subContent))))));
5190
+ };
5191
+
5192
+ var tableSizeOption = [10, 20, 50, 100, 999];
5193
+ var TableFooterController = function (_a) {
5194
+ var currentPage = _a.currentPage, totalPages = _a.totalPages, pageSize = _a.pageSize, setCurrentPage = _a.setCurrentPage, setPageSize = _a.setPageSize, isLoading = _a.isLoading;
5195
+ // Table Button
5196
+ var tableSizeRef = useRef(null);
5197
+ var _b = useState(false), isShownTableSizeDropdown = _b[0], setIsShownTableSizeDropdown = _b[1];
5198
+ var handlePageSizeChange = function (size) {
5199
+ setPageSize(size);
5200
+ setCurrentPage(1);
5201
+ };
5202
+ var pageSizeDisplay = pageSize === 999 ? 'All' : pageSize;
5203
+ var tableSizeDropdown = (React.createElement(DropdownContainer, { open: isShownTableSizeDropdown, anchorRef: tableSizeRef, onClose: function () { return setIsShownTableSizeDropdown(false); }, onClickItem: function (e, val) { return handlePageSizeChange(val); }, size: "sm" }, tableSizeOption.map(function (value) {
5204
+ var displayValue = value === 999 ? 'All' : value;
5205
+ return React.createElement(DropdownItem, { key: value, content: displayValue, value: value });
5206
+ })));
5207
+ return (React.createElement("div", { className: "table-controller-footer flex w-full justify-between gap-[5px] rounded-b-radius-lg border-t border-bia-grey bg-bia-grey-light-80 px-2.5 pb-[7px] pt-2" },
5208
+ React.createElement("div", { className: "action-container flex gap-[5px]" }, totalPages > 0 && (React.createElement(PaginationBar, { size: "sm", currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, position: 'center' }))),
5209
+ React.createElement(Button, { ref: tableSizeRef, label: pageSizeDisplay, minWidth: 0, size: "sm", iconRight: React.createElement(TbChevronDown, { size: 14 }), onClick: function () { return setIsShownTableSizeDropdown(function (oldState) { return !oldState; }); }, disabled: isLoading, className: "w-fit" }),
5210
+ tableSizeDropdown));
5211
+ };
5212
+
5213
+ var TableHeaderController = function (_a) {
5214
+ var buttonActions = _a.buttonActions, totalData = _a.totalData, firstIndex = _a.firstIndex, lastIndex = _a.lastIndex;
5215
+ var isShowHelperText = totalData || firstIndex || lastIndex;
5216
+ return (React.createElement("div", { className: "table-controller-header flex w-full justify-between rounded-t-radius-lg border-b border-bia-grey bg-bia-grey-light-80 px-2.5 pb-[7px] pt-2" },
5217
+ React.createElement("div", { className: "action-container flex grow gap-[5px] pe-2.5" }, buttonActions && (buttonActions === null || buttonActions === void 0 ? void 0 : buttonActions.map(function (button) { return button; }))),
5218
+ isShowHelperText && (React.createElement("div", { className: "flex max-h-[22px] items-center font-segoe" },
5219
+ React.createElement(Text, { variant: "small-text", className: "text-bia-coolgrey" },
5220
+ "View ",
5221
+ lastIndex === 0 ? 0 : firstIndex,
5222
+ " - ",
5223
+ lastIndex,
5224
+ ' ',
5225
+ totalData ? "of ".concat(totalData) : '')))));
5226
+ };
5227
+
5228
+ var TableSearchInput = function (_a) {
5229
+ var isShow = _a.isShow, value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? 'Search Data' : _b;
5230
+ if (!isShow)
5231
+ return null;
5232
+ return (React.createElement("div", { className: "flex max-h-[22px] w-full items-center gap-x-1 pb-1 ps-[5px] font-segoe " },
5233
+ React.createElement(TextInput, { size: "sm", variant: "text-transparent", className: "w-full bg-transparent text-size-sm focus:border-bia-grey focus:outline-none focus:ring-0", placeholder: placeholder, value: value, onChange: onChange, autoFocus: true })));
5234
+ };
5235
+
8158
5236
  var colorConfigs = {
8159
5237
  default: 'bg-bia-black',
8160
5238
  info: 'bg-bia-teal',
@@ -8281,4 +5359,123 @@ function getRelativeTime(date) {
8281
5359
  return "".concat(Math.floor(diffMs / year), " years ago");
8282
5360
  }
8283
5361
 
8284
- export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, Rhombus as BCRhombus, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, Countdown, DatePicker, Display, Divider, DropdownContainer, DropdownItem, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, MonospaceBadge, Notification, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, SidebarContainer, SidebarItem, Slider, Spinner, Tab, TabMenu, TableCell, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, StepperItem as VerticalStepper, Window, getRelativeTime, useFileTree };
5362
+ /**
5363
+ * A custom hook to handle data processing for tables, managing internal states
5364
+ * for client-side filtering (searching) and sorting. It can also safely yield control
5365
+ * to server-side operations if configured.
5366
+ *
5367
+ * ### Key Features:
5368
+ * - **Automatic Key Detection:** Automatically finds string fields to search if no `searchKeys` are provided.
5369
+ * - **Smart Sorting:** Uses `localeCompare` for strings, standard operators for numbers, and gracefully handles `null`/`undefined` values by moving them to the bottom.
5370
+ * - **Server-Side Ready:** Setting `isServerSide: true` disables internal processing while preserving handlers for external API synchronization.
5371
+ *
5372
+ * @param {any[]} initialData - The raw array of data/rows to be displayed in the table.
5373
+ * @param {UseTableDataOptions} [options={}] - Optional configuration flags and initial states.
5374
+ * * @returns {Object} Table state and control handlers.
5375
+ * @returns {any[]} data - The processed array (filtered and sorted) ready for rendering.
5376
+ * @returns {string} searchTerm - The current text being filtered against.
5377
+ * @returns {string|undefined} sortKey - The current object key being used to sort.
5378
+ * @returns {SortOrder} sortOrder - The current direction of the sort ('asc' or 'desc').
5379
+ * @returns {(value: string) => void} handleSearchChange - Callback to update the search filter string.
5380
+ * @returns {(key: string) => void} handleSortChange - Callback to trigger sorting on a specific column. Toggles direction if called on the same column consecutively.
5381
+ *
5382
+ * @example
5383
+ * const { data, handleSearchChange, handleSortChange } = useTableDataHandler(users, {
5384
+ * searchKeys: ['name', 'email'],
5385
+ * initialSortKey: 'name'
5386
+ * });
5387
+ */
5388
+ var useTableDataHandler = function (initialData, options) {
5389
+ if (options === void 0) { options = {}; }
5390
+ var _a = options.isFilterable, isFilterable = _a === void 0 ? true : _a, _b = options.isSortable, isSortable = _b === void 0 ? true : _b, _c = options.isServerSide, isServerSide = _c === void 0 ? false : _c, configSearchKeys = options.searchKeys, initialSortKey = options.initialSortKey, _d = options.initialSortOrder, initialSortOrder = _d === void 0 ? 'asc' : _d;
5391
+ // ---- STATE ----
5392
+ var _e = useState(''), searchTerm = _e[0], setSearchTerm = _e[1];
5393
+ var _f = useState(initialSortKey), sortKey = _f[0], setSortKey = _f[1];
5394
+ var _g = useState(initialSortOrder), sortOrder = _g[0], setSortOrder = _g[1];
5395
+ var searchKeys = useMemo(function () {
5396
+ if (isServerSide || !isFilterable)
5397
+ return [];
5398
+ if (configSearchKeys && configSearchKeys.length > 0)
5399
+ return configSearchKeys;
5400
+ if (initialData && initialData.length > 0) {
5401
+ var allKeys = Object.keys(initialData[0]);
5402
+ return allKeys.filter(function (key) { return typeof initialData[0][key] === 'string'; });
5403
+ }
5404
+ return [];
5405
+ }, [initialData, configSearchKeys, isFilterable, isServerSide]);
5406
+ var processedData = useMemo(function () {
5407
+ if (!initialData)
5408
+ return [];
5409
+ if (isServerSide)
5410
+ return initialData;
5411
+ var result = __spreadArray([], initialData, true);
5412
+ // Client-Side Filter
5413
+ if (isFilterable && searchTerm && searchKeys.length > 0) {
5414
+ var keyword_1 = searchTerm.toLowerCase();
5415
+ result = result.filter(function (item) {
5416
+ return searchKeys.some(function (key) {
5417
+ var itemValue = item[key];
5418
+ return (typeof itemValue === 'string' &&
5419
+ itemValue.toLowerCase().includes(keyword_1));
5420
+ });
5421
+ });
5422
+ }
5423
+ // Client-Side Sort
5424
+ if (isSortable && sortKey) {
5425
+ var direction_1 = sortOrder === 'asc' ? 1 : -1;
5426
+ result.sort(function (a, b) {
5427
+ var valueA = a[sortKey];
5428
+ var valueB = b[sortKey];
5429
+ var isNullA = valueA === null || valueA === undefined || valueA === '';
5430
+ var isNullB = valueB === null || valueB === undefined || valueB === '';
5431
+ if (isNullA && isNullB)
5432
+ return 0;
5433
+ if (isNullA)
5434
+ return direction_1 === 1 ? 1 : -1;
5435
+ if (isNullB)
5436
+ return direction_1 === 1 ? -1 : 1;
5437
+ if (typeof valueA === 'string' && typeof valueB === 'string') {
5438
+ return (valueA.localeCompare(valueB, undefined, { sensitivity: 'base' }) *
5439
+ direction_1);
5440
+ }
5441
+ return valueA < valueB ? -1 * direction_1 : 1 * direction_1;
5442
+ });
5443
+ }
5444
+ return result;
5445
+ }, [
5446
+ initialData,
5447
+ searchTerm,
5448
+ searchKeys,
5449
+ sortKey,
5450
+ sortOrder,
5451
+ isFilterable,
5452
+ isSortable,
5453
+ isServerSide,
5454
+ ]);
5455
+ // HANDLERS
5456
+ var handleSearchChange = function (value) {
5457
+ if (isFilterable)
5458
+ setSearchTerm(value);
5459
+ };
5460
+ var handleSortChange = function (key) {
5461
+ if (!isSortable)
5462
+ return;
5463
+ if (sortKey === key) {
5464
+ setSortOrder(function (prev) { return (prev === 'asc' ? 'desc' : 'asc'); });
5465
+ }
5466
+ else {
5467
+ setSortKey(key);
5468
+ setSortOrder('asc');
5469
+ }
5470
+ };
5471
+ return {
5472
+ data: processedData,
5473
+ searchTerm: isFilterable ? searchTerm : '',
5474
+ sortKey: isSortable ? sortKey : undefined,
5475
+ sortOrder: isSortable ? sortOrder : 'asc',
5476
+ handleSearchChange: handleSearchChange,
5477
+ handleSortChange: handleSortChange,
5478
+ };
5479
+ };
5480
+
5481
+ export { Accordions, Alert, Avatar, AlertRoundedSquare as BCAlertRoundedSquare, CubeHeader as BCCubeHeader, Discrepancy as BCDiscrepancy, ExposedPort as BCExposedPort, FQAnalytical as BCFQAnalytical, FQGetaway as BCFQGetaway, FQModeler as BCFQModeler, FQOperation as BCFQOperation, FQWelldone as BCFQWelldone, Flowqount as BCFlowqount, Inlet as BCInlet, Legend as BCLegend, ModalBalance as BCModalBalance, Neutral as BCNeutral, Node as BCNode, Outlet as BCOutlet, Port as BCPort, Rhombus as BCRhombus, SelectAllAdd as BCSelectAllAdd, SelectAllRemove as BCSelectAllRemove, Spinner$1 as BCSpinner, Stack as BCStack, VirtualPort as BCVirtualPort, Badge, Banner, BlockLoading, Brand, Breadcrumb, Button, ButtonApp, Card, Checkbox, Color, ContextualButton, Countdown, DatePicker, Display, Divider, DropdownContainer, DropdownItem, EmptyTable, FileTree, FormGroup, FormGroupButton, FormGroupLabel, FormLabel, Heading, InfoPanel, Link, LiveSearch, MenuContainer, MenuItem, Modal, MonospaceBadge, Notification, P, PaginationBar, PickerCalendar, Pills, Popover, ProgressBar, ProgressCircle, Radio, ResizeableDiv, SegmentButtonGroup, SegmentButtonItem, SelectInput, SidebarContainer, SidebarItem, SidebarMenu, SidebarProfile, Slider, Spinner, Tab, TabMenu, Table, TableBody, TableCell, TableFooterController, TableHead, TableHeaderController, TableRow, TableSearchInput, TagLabel, Text, TextArea, TextInput, Toaster, Toggle, Tooltip, TreeItem, StepperItem as VerticalStepper, Window, getRelativeTime, useFileTree, useTableDataHandler };