@nousantx/tenoxui-preset/dist/index.cjs.map

Ready to use tenoxui preset with minimal setup.

{"version":3,"file":"index.cjs","sources":["../node_modules/.pnpm/@nousantx+someutils@0.7.0/node_modules/@nousantx/someutils/dist/index.esm.js","../node_modules/.pnpm/@nousantx+color-generator@1.6.0/node_modules/@nousantx/color-generator/dist/index.esm.js","../src/lib/color.ts","../src/lib/sizing.ts","../src/lib/property.ts","../src/lib/values.ts","../src/lib/classes.ts","../src/index.ts"],"sourcesContent":["/*!\n * @nousantx/someutils v0.7.0 | MIT License\n *\n * Copyright (c) 2024-present NOuSantx <nousantx@gmail.com>\n *\n * Built Date: Mon Mar 03 2025 16:34:24 GMT+0700 (Western Indonesia Time)\n */\nfunction merge(...objects) {\n    return objects.reduce((result, obj) => {\n        Object.keys(obj).forEach((key) => {\n            const typedKey = key;\n            if (typeof obj[typedKey] === 'object' &&\n                obj[typedKey] !== null &&\n                !Array.isArray(obj[typedKey])) {\n                result[typedKey] = merge(result[typedKey] || {}, obj[typedKey]);\n            }\n            else {\n                result[typedKey] = obj[typedKey];\n            }\n        });\n        return result;\n    }, {});\n}\n\nfunction transformClasses(input) {\n    const output = {};\n    Object.keys(input).forEach((className) => {\n        Object.entries(input[className]).forEach(([property, value]) => {\n            const typedProperty = property;\n            if (!output[typedProperty]) {\n                output[typedProperty] = {};\n            }\n            if (value !== undefined && output[typedProperty]) {\n                output[typedProperty][className] = value;\n            }\n        });\n    });\n    return output;\n}\n\nfunction createValue(keys, values) {\n    return keys.reduce((acc, key) => {\n        acc[key] = values;\n        return acc;\n    }, {});\n}\nfunction createSameValue(values) {\n    return values.reduce((acc, value) => {\n        acc[value] = value;\n        return acc;\n    }, {});\n}\nfunction createProperty(config, valueTemplate = 'rgb({0} / var(--{1}-opacity))') {\n    return Object.entries(config).reduce((acc, [key, property]) => {\n        acc[key] = {\n            property,\n            value: valueTemplate.replace(/\\{1\\}/g, key)\n        };\n        return acc;\n    }, {});\n}\n\nfunction toChildString(styles, parentSelectors = []) {\n    let result = '';\n    for (const [key, value] of Object.entries(styles)) {\n        const currentSelectors = [...parentSelectors];\n        if (parentSelectors.length > 0) {\n            currentSelectors[currentSelectors.length - 1] += ` ${key}`;\n        }\n        else {\n            currentSelectors.push(key);\n        }\n        if (typeof value === 'string') {\n            result += `(${currentSelectors.join(' ')}): ${value};\\n`;\n        }\n        else if (typeof value === 'object' && value !== null) {\n            result += toChildString(value, currentSelectors);\n        }\n    }\n    return result;\n}\nfunction fromChildString(inputString) {\n    const result = {};\n    const regex = /\\((.*?)\\):\\s*([^;]+);/g;\n    //const matches = [...inputString.matchAll(regex)]\n    let match;\n    while ((match = regex.exec(inputString))) {\n        const [, key, value] = match;\n        result[key] = value;\n    }\n    //matches.forEach(match => {\n    //})\n    return result;\n}\n\nconst is = {\n    number: /^-?\\d+(\\.\\d+)?$/,\n    percentage: /^-?\\d+(\\.\\d+)?%$/,\n    color: /^(#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})|\\b(?:rgb|hsl|hwb|lch|oklch|oklab)\\(\\s*[\\d.]+(?:%?)\\s+[\\d.]+(?:%?)\\s+[\\d.]+(?:%?)(?:\\s*[,/]\\s*[\\d.]+(?:%?))?\\s*\\)|\\b\\d+(?:\\.\\d+)?(?:%?)\\s+\\d+(?:\\.\\d+)?(?:%?)\\s+\\d+(?:\\.\\d+)?(?:%?))$/,\n    length: /^-?\\d+(\\.\\d+)?(px|em|rem|vw|vh|vmin|vmax|%)$/,\n    fraction: /^-?\\d+(\\.\\d+)?fr$/,\n    time: /^-?\\d+(\\.\\d+)?(ms|s)$/,\n    angle: /^-?\\d+(\\.\\d+)?(deg|rad|grad|turn)$/,\n    resolution: /^-?\\d+(\\.\\d+)?(dpi|dpcm|dppx|x)$/\n};\n\nconst someutils = {\n    merge,\n    transformClasses,\n    createValue,\n    createSameValue,\n    createProperty,\n    toChildString,\n    fromChildString,\n    is\n};\n\nexport { createProperty, createSameValue, createValue, someutils as default, fromChildString, is, merge, toChildString, transformClasses };\n//# sourceMappingURL=index.esm.js.map\n","/*!\n * @nousantx/color-generator v1.6.0 | MIT License\n *\n * Copyright (c) 2024-present NOuSantx <nousantx@gmail.com>\n *\n * Built Date: Thu Feb 27 2025 09:16:59 GMT+0700 (Western Indonesia Time)\n */\nfunction rgbToHsl(r, g, b) {\n    r /= 255;\n    g /= 255;\n    b /= 255;\n    const max = Math.max(r, g, b);\n    const min = Math.min(r, g, b);\n    let h;\n    let s;\n    const l = (max + min) / 2;\n    if (max === min) {\n        h = s = 0; // Achromatic\n    }\n    else {\n        const d = max - min;\n        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);\n        switch (max) {\n            case r:\n                h = (g - b) / d + (g < b ? 6 : 0);\n                break;\n            case g:\n                h = (b - r) / d + 2;\n                break;\n            case b:\n                h = (r - g) / d + 4;\n                break;\n            default:\n                h = 0;\n        }\n        h /= 6;\n    }\n    return [h * 360, s * 100, l * 100];\n}\nfunction hslToRgb(h, s, l) {\n    h /= 360;\n    s /= 100;\n    l /= 100;\n    let r;\n    let g;\n    let b;\n    if (s === 0) {\n        r = g = b = l; // Achromatic\n    }\n    else {\n        const hue2rgb = (p, q, t) => {\n            if (t < 0)\n                t += 1;\n            if (t > 1)\n                t -= 1;\n            if (t < 1 / 6)\n                return p + (q - p) * 6 * t;\n            if (t < 1 / 2)\n                return q;\n            if (t < 2 / 3)\n                return p + (q - p) * (2 / 3 - t) * 6;\n            return p;\n        };\n        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n        const p = 2 * l - q;\n        r = hue2rgb(p, q, h + 1 / 3);\n        g = hue2rgb(p, q, h);\n        b = hue2rgb(p, q, h - 1 / 3);\n    }\n    return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];\n}\nfunction hexToRgb(hex) {\n    const r = parseInt(hex.slice(1, 3), 16);\n    const g = parseInt(hex.slice(3, 5), 16);\n    const b = parseInt(hex.slice(5, 7), 16);\n    return [r, g, b];\n}\nfunction rgbToHex([r, g, b]) {\n    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b\n        .toString(16)\n        .padStart(2, '0')}`;\n}\nfunction rgbToHwb(r, g, b) {\n    r /= 255;\n    g /= 255;\n    b /= 255;\n    const white = Math.min(r, g, b);\n    const black = 1 - Math.max(r, g, b);\n    let hue;\n    const [h] = rgbToHsl(r * 255, g * 255, b * 255);\n    hue = h;\n    return [hue, white * 100, black * 100];\n}\nfunction rgbToLab(r, g, b) {\n    const [x, y, z] = rgbToXyz(r, g, b);\n    // Using D65 illuminant\n    const xn = 0.95047;\n    const yn = 1.0;\n    const zn = 1.08883;\n    const xx = x / xn;\n    const yy = y / yn;\n    const zz = z / zn;\n    const fx = xx > 0.008856 ? Math.pow(xx, 1 / 3) : 7.787 * xx + 16 / 116;\n    const fy = yy > 0.008856 ? Math.pow(yy, 1 / 3) : 7.787 * yy + 16 / 116;\n    const fz = zz > 0.008856 ? Math.pow(zz, 1 / 3) : 7.787 * zz + 16 / 116;\n    const L = 116 * fy - 16;\n    const A = 500 * (fx - fy);\n    const B = 200 * (fy - fz);\n    return [L, A, B];\n}\nfunction rgbToLch(r, g, b) {\n    // Convert to CIE LCH color space (different from OKLch)\n    const [L, A, B] = rgbToLab(r, g, b);\n    const c = Math.sqrt(A * A + B * B);\n    let h = (Math.atan2(B, A) * 180) / Math.PI;\n    if (h < 0)\n        h += 360;\n    return [L, c, h];\n}\nfunction toLinear(value) {\n    const val = value / 255;\n    return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);\n}\nfunction rgbToXyz(r, g, b) {\n    r = toLinear(r);\n    g = toLinear(g);\n    b = toLinear(b);\n    const x = 0.4124564 * r + 0.3575761 * g + 0.1804375 * b;\n    const y = 0.2126729 * r + 0.7151522 * g + 0.072175 * b;\n    const z = 0.0193339 * r + 0.119192 * g + 0.9503041 * b;\n    return [x, y, z];\n}\nfunction xyzToOklab(x, y, z) {\n    const l = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);\n    const m = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);\n    const s = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.633851707 * z);\n    return [\n        0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,\n        1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,\n        0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s\n    ];\n}\nfunction oklabToOklch(L, a, b) {\n    const c = Math.sqrt(a * a + b * b);\n    let h = (Math.atan2(b, a) * 180) / Math.PI;\n    if (h < 0)\n        h += 360;\n    return [L, c * 1, h];\n}\nfunction rgbToOklch(r, g, b) {\n    const xyz = rgbToXyz(r, g, b);\n    const lab = xyzToOklab(...xyz);\n    const [L, c, h] = oklabToOklch(...lab);\n    return [L * 100, c, h];\n}\n\nfunction adjustShade(hsl, index, isNeutral, lighterLightness, lighterSaturation, darkerLightness, darkerSaturation) {\n    let [h, s, l] = hsl;\n    // Lighter color adjustment\n    if (index < 5) {\n        l = Math.min(98, l + (98 - l) * ((5 - index) / lighterLightness));\n        if (!isNeutral) {\n            s = Math.max(10, s - s * ((5 - index) / lighterSaturation));\n        }\n    }\n    // Darker color adjustment\n    else if (index > 5) {\n        l = l * (1 - (index - 5) / darkerLightness);\n        if (!isNeutral) {\n            s = Math.min(100, s + (100 - s) * ((index - 5) / darkerSaturation));\n        }\n    }\n    return [h, s, l];\n}\n\nfunction formatColor(hsl, format, opacityPrefix = '') {\n    const [h, s, l] = hsl;\n    const rgb = hslToRgb(h, s, l);\n    const opacityVar = opacityPrefix ? ` / var(--${opacityPrefix}-opacity)` : '';\n    // Define a helper function to extract values for *-value formats\n    const extractValues = (str) => { var _a; return ((_a = str.match(/[\\d.]+%?/g)) === null || _a === void 0 ? void 0 : _a.join(' ')) || ''; };\n    switch (format) {\n        case 'rgb':\n            return `rgb(${rgb[0]} ${rgb[1]} ${rgb[2]}${opacityVar})`;\n        case 'rgb-value':\n            return extractValues(`rgb(${rgb[0]} ${rgb[1]} ${rgb[2]})`);\n        case 'hsl':\n            return `hsl(${Math.round(h)} ${Math.round(s)}% ${l.toFixed(1)}%${opacityVar})`;\n        case 'hsl-value':\n            return extractValues(`hsl(${Math.round(h)} ${Math.round(s)}% ${l.toFixed(1)}%)`);\n        case 'hwb':\n        case 'hwb-value': {\n            const [hw, w, b] = rgbToHwb(...rgb);\n            const result = `hwb(${Math.round(hw)} ${Math.round(w)}% ${Math.round(b)}%)`;\n            return format === 'hwb-value' ? extractValues(result) : result;\n        }\n        case 'lab':\n        case 'lab-value': {\n            const [L2, a, b2] = rgbToLab(...rgb);\n            const result = `lab(${L2.toFixed(1)}% ${a.toFixed(1)} ${b2.toFixed(1)})`;\n            return format === 'lab-value' ? extractValues(result) : result;\n        }\n        case 'lch':\n        case 'lch-value': {\n            const [L3, C2, H2] = rgbToLch(...rgb);\n            const result = `lch(${L3.toFixed(1)}% ${C2.toFixed(1)} ${H2.toFixed(1)})`;\n            return format === 'lch-value' ? extractValues(result) : result;\n        }\n        case 'oklch':\n        case 'oklch-value': {\n            const [L, C, H] = rgbToOklch(...rgb);\n            const result = `oklch(${L.toFixed(1)}% ${C.toFixed(3)} ${H.toFixed(1)})`;\n            return format === 'oklch-value' ? extractValues(result) : result;\n        }\n        case 'hex':\n        default:\n            return rgbToHex(rgb);\n    }\n}\nfunction generateColors({ option = {}, color }) {\n    const { format = 'css', output = 'hex', opacityPrefix = '', prefix = '', reverse = false, lighterLightness = 4.5, lighterSaturation = 10, darkerLightness = 6.5, darkerSaturation = 7 } = option;\n    const colorSteps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];\n    const steps = reverse ? [...colorSteps].reverse() : colorSteps;\n    let result = format === 'array'\n        ? {}\n        : format === 'object' || format === 'object2'\n            ? {}\n            : format === 'tailwind'\n                ? { theme: { colors: {} } }\n                : '';\n    for (let [colorName, hexColor] of Object.entries(color)) {\n        const rgb = hexToRgb(hexColor);\n        const hsl = rgbToHsl(...rgb);\n        const isNeutral = hsl[1] < 10;\n        if (prefix !== '') {\n            colorName = prefix + colorName;\n        }\n        if (format === 'array') {\n            result[colorName] = [];\n        }\n        steps.forEach((step, index) => {\n            const adjustedHsl = adjustShade(hsl, index, isNeutral, lighterLightness, lighterSaturation, darkerLightness, darkerSaturation);\n            const colorValue = formatColor(adjustedHsl, output, opacityPrefix);\n            switch (format) {\n                case 'scss':\n                    result += `$${colorName}-${step}: ${colorValue};\\n`;\n                    break;\n                case 'tailwind':\n                    if (!result.theme.colors[colorName]) {\n                        result.theme.colors[colorName] = {};\n                    }\n                    result.theme.colors[colorName][step] = colorValue;\n                    break;\n                case 'object':\n                    if (typeof result !== 'object')\n                        result = {};\n                    if (!result[colorName])\n                        result[colorName] = {};\n                    result[colorName][step] = colorValue;\n                    break;\n                case 'object2':\n                    result[`${colorName}-${step}`] = colorValue;\n                    break;\n                case 'array':\n                    result[colorName].push(colorValue);\n                    break;\n                case 'css':\n                default:\n                    result += `--${colorName}-${step}: ${colorValue};\\n`;\n            }\n        });\n        if (format === 'array' && reverse) {\n            result[colorName].reverse();\n        }\n    }\n    return result;\n}\nvar index = {\n    generateColors,\n    rgbToHsl,\n    hslToRgb,\n    hexToRgb,\n    rgbToHex,\n    rgbToOklch,\n    rgbToHwb,\n    rgbToLab,\n    rgbToLch\n};\n\nexport { index as default, generateColors, hexToRgb, hslToRgb, rgbToHex, rgbToHsl, rgbToHwb, rgbToLab, rgbToLch, rgbToOklch };\n//# sourceMappingURL=index.esm.js.map\n","import { generateColors } from '@nousantx/color-generator'\n\nexport type ColorFormat = 'hsl' | 'rgb' | 'hwb' | 'lab' | 'lch' | 'oklch'\n\nexport const color = {\n  red: '#fb2c36',\n  orange: '#ff6900',\n  amber: '#fd9a00',\n  yellow: '#efb100',\n  lime: '#7ccf00',\n  green: '#00c951',\n  emerald: '#00bc7d',\n  teal: '#00bba7',\n  cyan: '#00b8db',\n  sky: '#00a6f4',\n  blue: '#2b7fff',\n  indigo: '#615fff',\n  violet: '#8e51ff',\n  purple: '#ad46ff',\n  fuchsia: '#e12afb',\n  pink: '#f6339a',\n  rose: '#ff2056',\n  slate: '#62748e',\n  gray: '#6a7282',\n  zinc: '#71717b',\n  neutral: '#737373',\n  stone: '#79716b'\n}\n\nexport const colorLib = ({\n  output = 'oklch',\n  colors = {}\n}: {\n  output: ColorFormat\n  colors: { [hex: string]: string }\n}): any =>\n  generateColors({\n    color: { ...color, ...colors },\n    option: {\n      format: 'object2',\n      output\n    }\n  })\n","export const sizingValues = {\n  '3xs': '16rem' /* 256px */,\n  '2xs': '18rem' /* 288px */,\n  xs: '20rem' /* 320px */,\n  sm: '24rem' /* 384px */,\n  md: '28rem' /* 448px */,\n  lg: '32rem' /* 512px */,\n  xl: '36rem' /* 576px */,\n  '2xl': '42rem' /* 672px */,\n  '3xl': '48rem' /* 768px */,\n  '4xl': '56rem' /* 896px */,\n  '5xl': '64rem' /* 1024px */,\n  '6xl': '72rem' /* 1152px */,\n  '7xl': '80rem' /* 1280px */\n}\n","import type {\n  Property,\n  PropertyParams,\n  ValueParams,\n  PropertyValue,\n  ValuePropType\n} from '@tenoxui/static'\nimport type { GetCSSProperty } from '@tenoxui/types'\nimport { is } from '@nousantx/someutils'\n\nexport const defaultProperty: Property = {\n  columns: 'columns',\n  align: 'verticalAlign',\n  whitespace: 'whiteSpace',\n  hypehns: 'hyphens',\n  content: 'content',\n  isolation: 'isolation',\n  order: 'order',\n  z: 'zIndex',\n  opacity: {\n    property: 'opacity',\n    value: '{0}%'\n  },\n  'outline-offset': {\n    property: 'outlineOffset',\n    value: '{0}px'\n  },\n  'grid-cols': {\n    property: 'gridTemplateColumns',\n    value: 'repeat({0}, minmax(0, 1fr))'\n  },\n  'col-span': {\n    property: 'gridColumn',\n    value: 'span {0} / span {0}'\n  },\n  col: 'gridColumn',\n  'col-start': 'gridColumnStart',\n  'col-end': 'gridColumnEnd',\n  // rows\n  'grid-rows': {\n    property: 'gridTemplateRows',\n    value: 'repeat({0}, minmax(0, 1fr))'\n  },\n  'row-span': {\n    property: 'gridRow',\n    value: 'span {0} / span {0}'\n  },\n  row: 'gridRow',\n  'row-start': 'gridRowStart',\n  'row-end': 'gridRowEnd',\n  // grid auto\n  'grid-flow': 'gridAutoFlow',\n  'auto-cols': 'gridAutoColumns',\n  'auto-rows': 'gridAutoRows',\n\n  filter: 'filter',\n  'backdrop-filter': 'backdropFilter'\n}\n\nexport const sizingProperty: Property = {\n  top: 'top',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left',\n  inset: 'inset',\n  gap: 'gap',\n  'gap-x': 'columnGap',\n  'gap-y': 'rowGap',\n  'min-w': 'minWidth',\n  'min-h': 'minHeight',\n  'max-w': 'maxWidth',\n  'max-h': 'maxHeight',\n  mt: 'marginTop',\n  mr: 'marginRight',\n  mb: 'marginBottom',\n  ml: 'marginLeft',\n  mx: 'marginInline',\n  my: 'marginBlock',\n  pt: 'paddingTop',\n  pr: 'paddingRight',\n  pb: 'paddingBottom',\n  pl: 'paddingLeft',\n  py: 'paddingBlock',\n  px: 'paddingInline'\n}\n\nconst createFilterFunction = (\n  filterName: string,\n  defaultUnit: string = '',\n  transformValue: (value: string | undefined, unit: string) => string = (v, u) => `${v || ''}${u}`\n): {\n  property: PropertyValue\n  value: ValuePropType\n} => {\n  return {\n    property: filterName.startsWith('backdrop-') ? 'backdropFilter' : 'filter',\n    value: ({ value = '', unit = '' }: ValueParams): string => {\n      const finalValue = transformValue(value, unit || defaultUnit)\n      return `${filterName.replace('backdrop-', '')}(${finalValue})`\n    }\n  }\n}\n\nconst sizeValues: Record<string, string> = {\n  xs: '4px',\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  xl: '24px',\n  '2xl': '40px',\n  '3xl': '64px'\n}\n\nconst dropShadowValues: Record<string, string> = {\n  xs: '0 1px 1px var(--drop-shadow-color, rgb(0 0 0 / 0.05))',\n  sm: '0 1px 2px var(--drop-shadow-color, rgb(0 0 0 / 0.15))',\n  md: '0 3px 3px var(--drop-shadow-color, rgb(0 0 0 / 0.12))',\n  lg: '0 4px 4px var(--drop-shadow-color, rgb(0 0 0 / 0.15))',\n  xl: '0 9px 7px var(--drop-shadow-color, rgb(0 0 0 / 0.1))',\n  '2xl': '0 25px 25px var(--drop-shadow-color, rgb(0 0 0 / 0.15))'\n}\n\nconst createFilterUtilities = (): Property => {\n  // Base filter definitions\n  const filters: Property = {\n    // Regular filters\n    blur: {\n      property: 'filter',\n      value: ({ value = '', unit = '' }: ValueParams): string =>\n        `blur(${sizeValues[`${value}${unit}`] || `${value}${unit}`})`\n    },\n    brightness: createFilterFunction('brightness', '%'),\n    contrast: createFilterFunction('contrast', '%'),\n    'drop-shadow': {\n      property: ({\n        value = '',\n        unit = '',\n        secondValue = '',\n        secondUnit = '',\n        key = ''\n      }: PropertyParams): GetCSSProperty => {\n        if (\n          key === 'color' ||\n          (typeof value === 'string' &&\n            (value.startsWith('rgb') || value.startsWith('oklch')) &&\n            !value.includes('/') &&\n            value.endsWith(')'))\n        ) {\n          return `--drop-shadow-color: ${value.slice(0, -1)}${\n            secondValue ? ' / ' + secondValue + (secondUnit || '%)') : ')'\n          }` as GetCSSProperty\n        }\n\n        return `filter: drop-shadow(${dropShadowValues[value] || value})` as GetCSSProperty\n      },\n      value: null\n    },\n    grayscale: createFilterFunction('grayscale', '%', (value = '', unit): string => {\n      if (!value) return '100%'\n      if (is.number.test(`${value}${unit}`)) return `${value}%`\n      return `${value}${unit}`\n    }),\n    'hue-rotate': createFilterFunction('hue-rotate', 'deg', (value = '', unit): string => {\n      if (is.number.test(`${value}${unit}`)) return `${value}deg`\n      return `${value}${unit}`\n    }),\n    invert: createFilterFunction('invert', '%', (value = '', unit): string => {\n      if (!value) return '100%'\n      if (is.number.test(`${value}${unit}`)) return `${value}%`\n      return `${value}${unit}`\n    }),\n    sepia: createFilterFunction('sepia', '%', (value = '', unit): string => {\n      if (!value) return '100%'\n      if (is.number.test(`${value}${unit}`)) return `${value}%`\n      return `${value}${unit}`\n    }),\n    saturate: createFilterFunction('saturate', '%', (value = '', unit): string => {\n      if (is.number.test(`${value}${unit}`)) return `${value}%`\n      return `${value}${unit}`\n    })\n  }\n\n  // Generate backdrop filters manually by copying properties\n  ;['brightness', 'contrast', 'grayscale', 'hue-rotate', 'invert', 'sepia', 'saturate'].forEach(\n    (name) => {\n      // Fix: Instead of spreading, explicitly create a new object with needed properties\n      const sourceFilter = filters[name] as {\n        property?: PropertyValue\n        value?: ValuePropType\n      }\n\n      filters[`backdrop-${name}`] = {\n        property: 'backdropFilter',\n        value: sourceFilter.value\n      }\n    }\n  )\n\n  // Add backdrop-blur separately\n  filters['backdrop-blur'] = {\n    property: 'backdropFilter',\n    value: ({ value = '', unit = '' }: ValueParams): string =>\n      `blur(${sizeValues[`${value}${unit}`] || `${value}${unit}`})`\n  }\n\n  // Fix typo in property name: backdropOppacity -> backdrop-opacity\n  filters['backdrop-opacity'] = createFilterFunction(\n    'backdrop-opacity',\n    '%',\n    (value = '', unit): string => {\n      if (is.number.test(`${value}${unit}`)) return `${value}%`\n      return `${value}${unit}`\n    }\n  )\n\n  return filters\n}\n\nexport const filterProperties: Property = createFilterUtilities()\n","import type { Values } from '@tenoxui/types'\n\nexport const values: Values = {\n  px: '1px',\n  fr: 'minmax(0, 1fr)',\n  full: '100%',\n  half: '50%',\n  vh: '100vh',\n  svh: '100svh',\n  lvh: '100lvh',\n  dvh: '100dvh',\n  vw: '100vw',\n  svw: '100svw',\n  lvw: '100lvw',\n  dvw: '100dvw',\n  min: 'min-content',\n  max: 'max-content',\n  fit: 'fit-content',\n  order: {\n    first: 'calc(-infinity)',\n    last: 'calc(infinity)',\n    none: '0'\n  },\n  'grid-flow': {\n    'row-dense': 'row dense',\n    'col-dense': 'column dense'\n  }\n}\n","import type { Classes } from '@tenoxui/types'\nimport { merge, transformClasses } from '@nousantx/someutils'\n\nexport const classes: Classes = merge(\n  transformClasses({\n    truncate: {\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap'\n    },\n    'outline-hidden': {\n      outline: '2px solid transparent',\n      outlineOffset: '2px'\n    }\n  }),\n  {\n    fontStyle: {\n      italic: 'italic',\n      'not-italic': 'normal'\n    },\n    textDecorationLine: {\n      underline: 'underline',\n      overline: 'overline',\n      'line-through': 'line-through',\n      'no-underline': 'none'\n    },\n    textDecorationStyle: {\n      'decoration-solid': 'solid',\n      'decoration-double': 'double',\n      'decoration-dotted': 'dotted',\n      'decoration-dashed': 'dashed',\n      'decoration-wavy': 'wavy'\n    },\n    textDecorationThickness: {\n      'decoration-thickness-from-font': 'from-font',\n      'decoration-thickness-auto': 'auto'\n    },\n    textUnderlineOffset: {\n      'underline-offsite-auto': 'auto'\n    },\n    textTransform: {\n      uppercase: 'uppercase',\n      lowercase: 'lowercase',\n      capitalize: 'capitalize',\n      'normal-case': 'none'\n    },\n    display: {\n      inline: 'inline',\n      block: 'block',\n      'inline-block': 'inline-block',\n      'flow-root': 'flow-root',\n      flex: 'flex',\n      'inline-flex': 'inline-flex',\n      grid: 'grid',\n      'inline-grid': 'inline-grid',\n      contents: 'contents',\n      table: 'table',\n      'inline-table': 'inline-table',\n      'table-caption': 'table-caption',\n      'table-cell': 'table-cell',\n      'table-column': 'table-column',\n      'table-column-group': 'table-column-group',\n      'table-footer-group': 'table-footer-group',\n      'table-header-group': 'table-header-group',\n      'table-row-group': 'table-row-group',\n      'table-row': 'table-row',\n      'list-item': 'list-item',\n      hidden: 'none'\n    },\n    position: {\n      static: 'static',\n      fixed: 'fixed',\n      absolute: 'absolute',\n      relative: 'relative',\n      sticky: 'sticky'\n    },\n    justifyContent: {\n      'justify-start': 'flex-start',\n      'justify-end': 'flex-end',\n      'justify-center': 'center',\n      'justify-between': 'space-between',\n      'justify-around': 'space-around',\n      'justify-evenly': 'space-evenly',\n      'justify-stretch': 'stretch',\n      'justify-baseline': 'baseline',\n      'justify-normal': 'normal'\n    },\n    justifyItems: {\n      'justify-items-start': 'start',\n      'justify-items-end': 'end',\n      'justify-items-center': 'center',\n      'justify-items-stretch': 'stretch',\n      'justify-items-normal': 'normal'\n    },\n    justifySelf: {\n      'justify-self-start': 'start',\n      'justify-self-end': 'end',\n      'justify-self-center': 'center',\n      'justify-self-stretch': 'stretch',\n      'justify-self-auto': 'auto'\n    },\n    alignContent: {\n      'content-start': 'flex-start',\n      'content-end': 'flex-end',\n      'content-center': 'center',\n      'content-between': 'space-between',\n      'content-around': 'space-around',\n      'content-evenly': 'space-evenly',\n      'content-stretch': 'stretch',\n      'content-baseline': 'baseline'\n    },\n    alignItems: {\n      'items-start': 'flex-start',\n      'items-end': 'flex-end',\n      'items-center': 'center',\n      'items-stretch': 'stretch',\n      'items-baseline': 'baseline'\n    },\n    alignSelf: {\n      'self-start': 'flex-start',\n      'self-end': 'flex-end',\n      'self-center': 'center',\n      'self-stretch': 'stretch',\n      'self-baseline': 'baseline',\n      'self-auto': 'auto'\n    },\n    placeContent: {\n      'place-content-start': 'start',\n      'place-content-end': 'end',\n      'place-content-center': 'center',\n      'place-content-between': 'space-between',\n      'place-content-around': 'space-around',\n      'place-content-evenly': 'space-evenly',\n      'place-content-stretch': 'stretch',\n      'place-content-baseline': 'baseline'\n    },\n    placeItems: {\n      'place-items-start': 'start',\n      'place-items-end': 'end',\n      'place-items-center': 'center',\n      'place-items-stretch': 'stretch',\n      'place-items-baseline': 'baseline'\n    },\n    placeSelf: {\n      'place-self-start': 'start',\n      'place-self-end': 'end',\n      'place-self-center': 'center',\n      'place-self-stretch': 'stretch',\n      'place-self-auto': 'auto'\n    }\n  }\n)\n","import type { Config as TenoxUIConfig, PropertyParams, Property } from '@tenoxui/static'\nimport type { GetCSSProperty } from '@tenoxui/types'\nimport { is, merge } from '@nousantx/someutils'\nimport { colorLib, type ColorFormat } from './lib/color'\nimport { sizingValues } from './lib/sizing'\nimport {\n  defaultProperty,\n  sizingProperty as sizingPropertyMap,\n  filterProperties\n} from './lib/property'\nimport { values } from './lib/values'\nimport { classes } from './lib/classes'\n\nexport interface Config {\n  sizing: number\n  colors: { [key: string]: string }\n  colorVariant: ColorFormat\n}\n\nexport { is, merge } from '@nousantx/someutils'\nexport { color, colorLib } from './lib/color'\n\nexport function createConfig({\n  sizing = 0.25,\n  colors = {},\n  colorVariant = 'oklch'\n}: Partial<Config> = {}): TenoxUIConfig {\n  const computeSizingValue = ({ value = '', unit = '' }) => {\n    return is.number.test(value + unit)\n      ? sizing * Number(value) + (value !== '0' ? 'rem' : '')\n      : value + unit\n  }\n\n  const sizingProperties = Object.fromEntries(\n    Object.entries(sizingPropertyMap).map(([key, property]) => [\n      key,\n      { property, value: computeSizingValue }\n    ])\n  )\n\n  const createSizingProperty = (\n    base: GetCSSProperty,\n    keys: Record<string, GetCSSProperty>,\n    values?: Record<string, string>\n  ): Property => ({\n    property: ({ key = '' }) => (key && key in keys ? keys[key as string] : base) as GetCSSProperty,\n    value: ({ value = '', unit = '' }) => {\n      return (\n        values && values[(value + unit) as string]\n          ? values[(value + unit) as string]\n          : value && is.number.test(value + unit)\n            ? sizing * Number(value) + 'rem'\n            : value + unit\n      ) as GetCSSProperty\n    }\n  })\n\n  return {\n    apply: {\n      ':root': `\n        [--tui-inset-shadow]-[0_0_#0000]\n        [--tui-inset-ring-shadow]-[0_0_#0000]\n        [--tui-shadow]-[0_0_#0000]\n        [--tui-ring-shadow]-[0_0_#0000]\n        [--tui-ring-offset-shadow]-[0_0_#0000]\n        [--tui-ring-offset-width]-0px\n        [--tui-ring-inset]-[_]\n        [--tui-ring-offset-color]-#fff\n        [--ease-in]-[cubic-bezier(0.4,_0,_1,_1)]\n        [--ease-out]-[cubic-bezier(0,_0,_0.2,_1)]\n        [--ease-in-out]-[cubic-bezier(0.4,_0,_0.2,_1)]\n        [--default-transition-duration]-150ms\n        [--default-transition-timing-function]-[cubic-bezier(0.4,_0,_0.2,_1)]\n      `\n    },\n    property: {\n      ...defaultProperty,\n      ...sizingProperties,\n      ...filterProperties,\n      w: createSizingProperty(\n        'width',\n        {\n          min: 'minWidth',\n          max: 'maxWidth'\n        },\n        { ...sizingValues, screen: '100vw' }\n      ),\n      h: createSizingProperty(\n        'height',\n        {\n          min: 'minHeight',\n          max: 'maxHeight'\n        },\n        { ...sizingValues, screen: '100vh' }\n      ),\n      size: {\n        property: ['width', 'height'],\n        value: ({ value = '', unit = '' }) => {\n          return is.number.test(value + unit) ? sizing * Number(value) + 'rem' : value + unit\n        }\n      },\n      p: createSizingProperty('padding', {\n        x: 'paddingInline',\n        y: 'paddingBlock',\n        t: 'paddingTop',\n        r: 'paddingRight',\n        b: 'paddingBottom',\n        l: 'paddingLeft'\n      }),\n      m: createSizingProperty('margin', {\n        x: 'marginInline',\n        y: 'marginBlock',\n        t: 'marginTop',\n        r: 'marginRight',\n        b: 'marginBottom',\n        l: 'marginLeft'\n      }),\n\n      /* background */\n      'bg-clip': {\n        property: 'backgroundClip',\n        value: ({ value }) => (value !== 'text' ? value + '-box' : value)\n      },\n      'bg-origin': {\n        property: 'backgroundOrigin',\n        value: ({ value }) => (value !== 'text' ? value + '-box' : value)\n      },\n      bg: {\n        property: ({ key, value = '', unit = '' }: PropertyParams) => {\n          const keys: Record<string, GetCSSProperty> = {\n            attachment: 'backgroundAttachment',\n            color: 'backgroundColor',\n            image: 'backgroundImage',\n            clip: 'backgroundClip',\n            position: 'backgroundPosition',\n            repeat: 'backgroundRepeat',\n            size: 'backgroundSize',\n            origin: 'backgroundOrigin'\n          }\n\n          if (\n            is.color.test(value) ||\n            ['inherit', 'current', 'black', 'white', 'transparent'].includes(value)\n          ) {\n            return keys.color\n          } else if (['fixed', 'scroll', 'local'].includes(value)) {\n            return keys.attachment\n          } else if (['repeat', 'repeat-x', 'repeat-y', 'no-repeat'].includes(value)) {\n            return keys.repeat\n          } else if (['cover', 'contain', 'auto'].includes(value) || is.length.test(value + unit)) {\n            return keys.size\n          } else if (/\\d+%|\\d+px|top|bottom|left|right|center/.test(value)) {\n            return keys.position\n          }\n\n          return key ? keys[key] : 'background'\n        },\n        value: ({ key, value = '', unit = '', secondValue = '', secondUnit = '' }) => {\n          if (value) {\n            if (\n              key === 'color' ||\n              is.color.test(value) ||\n              ['inherit', 'current', 'black', 'white', 'transparent'].includes(value)\n            ) {\n              if (value.startsWith(colorVariant) && !value.includes('/') && value.endsWith(')')) {\n                return `${value.slice(0, -1)}${\n                  secondValue ? ' / ' + secondValue + (secondUnit || '%)') : ')'\n                }`\n              } else {\n                return value === 'current' ? 'currentColor' : value\n              }\n            } else if (\n              key === 'size' ||\n              is.length.test(value + unit) ||\n              ['cover', 'contain', 'auto'].includes(value)\n            ) {\n              return value + unit\n            } else {\n              return value\n            }\n          }\n\n          return null\n        }\n      },\n\n      /* typography */\n      text: {\n        property: ({\n          key,\n          value = '',\n          unit = '',\n          secondValue = '',\n          secondUnit = ''\n        }: PropertyParams): GetCSSProperty => {\n          type SizesType = Record<string, string[]>\n\n          const sizes: SizesType = {\n            xs: ['0.75rem', 'calc(1 / 0.75)'],\n            sm: ['0.875rem', 'calc(1.25 / 0.875)'],\n            base: ['1rem', 'calc(1.5 / 1)'],\n            lg: ['1.125rem', 'calc(1.75 / 1.125)'],\n            xl: ['1.25rem', 'calc(1.75 / 1.25)'],\n            '2xl': ['1.5rem', 'calc(2 / 1.5)'],\n            '3xl': ['1.875rem', 'calc(2.25 / 1.875)'],\n            '4xl': ['2.25rem', 'calc(2.5 / 2.25)'],\n            '5xl': ['3rem', '1'],\n            '6xl': ['3.75rem', '1'],\n            '7xl': ['4.5rem', '1'],\n            '8xl': ['6rem', '1'],\n            '9xl': ['8rem', '1']\n          }\n\n          const lineHeightAlias: Record<string, string> = {\n            none: '1',\n            tight: '1.25',\n            snug: '1.375',\n            normal: '1.5',\n            relaxed: '1.625',\n            loose: '2'\n          }\n\n          if (value) {\n            if (\n              key === 'color' ||\n              is.color.test(value) ||\n              ['inherit', 'current', 'black', 'white', 'transparent'].includes(value)\n            ) {\n              return `color: ${\n                ['inherit', 'current', 'black', 'white', 'transparent'].includes(value)\n                  ? value === 'current'\n                    ? 'currentColor'\n                    : value\n                  : `${value.slice(0, -1)}${\n                      secondValue ? ' / ' + secondValue + (secondUnit || '%)') : ')'\n                    }`\n              }` as GetCSSProperty\n            } else if (\n              key === 'align' ||\n              ['center', 'justify', 'left', 'right', 'start', 'end'].includes(value)\n            ) {\n              return `text-align: ${value}` as GetCSSProperty\n            } else if (key === 'wrap' || ['wrap', 'nowrap', 'balance', 'pretty'].includes(value)) {\n              return `text-wrap: ${value}` as GetCSSProperty\n            } else if (key === 'overflow' || ['ellipsis', 'clip'].includes(value)) {\n              return `text-overflow: ${value}` as GetCSSProperty\n            } else if (key === 'size' || is.length.test(value + unit) || value + unit in sizes) {\n              if (value + unit in sizes) {\n                const sizeKey = (value + unit) as keyof SizesType\n\n                const [fontSize, lineHeight] = sizes[sizeKey]\n                return `font-size: ${fontSize}; line-height: ${\n                  lineHeightAlias[secondValue] || secondValue + secondUnit || lineHeight\n                }` as GetCSSProperty\n              }\n              return `font-size: ${value + unit}${\n                secondValue\n                  ? `; line-height: ${lineHeightAlias[secondValue] || secondValue + secondUnit}`\n                  : ''\n              }` as GetCSSProperty\n            }\n          }\n          return ('color: ' + value) as GetCSSProperty\n        },\n        value: null\n      },\n      font: {\n        value: null,\n        property: ({ key, value }): GetCSSProperty => {\n          const weightAlias: Record<string, string> = {\n            thin: '100',\n            extralight: '200',\n            light: '300',\n            normal: '400',\n            medium: '500',\n            semibold: '600',\n            bold: '700',\n            extrabold: '800',\n            black: '900'\n          }\n\n          if (value) {\n            if (\n              key === 'weight' ||\n              weightAlias[value] ||\n              is.number.test(value) ||\n              value.endsWith('00')\n            ) {\n              return `font-weight: ${weightAlias[value] || value}` as GetCSSProperty\n            } else if (key === 'family') {\n              return `font-family: ${value}` as GetCSSProperty\n            }\n          }\n          return `font-family: ${value}` as GetCSSProperty\n\n          // return `font-weight: ${weightAlias[value] || value}` as GetCSSProperty\n        }\n      },\n      tracking: {\n        property: 'letterSpacing',\n        value: ({ value = '', unit = '' }) => {\n          const values: Record<string, string> = {\n            tighter: '-0.05em',\n            tight: '-0.025em',\n            normal: '0em',\n            wide: '0.025em',\n            wider: '0.05em',\n            widest: '0.1em'\n          }\n\n          return values[value] || value + unit\n        }\n      },\n      leading: {\n        property: 'lineHeight',\n        value: ({ value = '', unit = '' }) => {\n          const values: Record<string, string> = {\n            none: '1',\n            tight: '1.25',\n            snug: '1.375',\n            normal: '1.5',\n            relaxed: '1.625',\n            loose: '2'\n          }\n          if (values[value]) {\n            return values[value]\n          } else if (!unit && is.number.test(value)) {\n            return sizing * Number(value) + 'rem'\n          } else {\n            return value + unit\n          }\n        }\n      },\n      decoration: {\n        property: ({ key, value = '', unit = '', secondValue = '', secondUnit = '' }) => {\n          if (value) {\n            if (key === 'color' || is.color.test(value)) {\n              return ('text-decoration-color: ' +\n                `${value.slice(0, -1)}${\n                  secondValue ? ' / ' + secondValue + (secondUnit || '%)') : ')'\n                }`) as GetCSSProperty\n            } else if (\n              key === 'style' ||\n              ['solid', 'dashed', 'double', 'dotted', 'wavy'].includes(value)\n            ) {\n              return `text-decoration-style: ${value}` as GetCSSProperty\n            } else if (\n              key === 'length' ||\n              ['auto', 'from-font'].includes(value) ||\n              is.number.test(value + unit) ||\n              is.length.test(value + unit)\n            ) {\n              return `text-decoration-thickness: ${\n                is.number.test(value + unit) ? value + 'px' : value + unit\n              }` as GetCSSProperty\n            }\n          }\n\n          return ('text-decoration-color: ' + value) as GetCSSProperty\n        },\n        value: null\n      },\n      'underline-offset': {\n        property: 'textUnderlineOffset',\n        value: '{0}px'\n      },\n      indent: {\n        property: 'textIndent',\n        value: ({ value = '', unit = '' }) => {\n          if (value) {\n            if (is.number.test(value + unit)) return sizing * Number(value) + 'rem'\n            else return value + unit\n          }\n          return null\n        }\n      },\n\n      radius: {\n        property: ({ key = '' }) => {\n          const keys: Record<string, GetCSSProperty> = {\n            t: ['borderTopLeftRadius', 'borderTopRightRadius'],\n            r: ['borderTopRightRadius', 'borderBottomRightRadius'],\n            b: ['borderBottomRightRadius', 'borderBottomLeftRadius'],\n            l: ['borderTopLeftRadius', 'borderBottomLeftRadius'],\n\n            tl: 'borderTopLeftRadius',\n            tr: 'borderTopRightRadius',\n            br: 'borderBottomRightRadius',\n            bl: 'borderBottomLeftRadius'\n          }\n\n          return (keys[key as string] || 'borderRadius') as GetCSSProperty\n        },\n        value: ({ value = '', unit = '' }) => {\n          const values: Record<string, string> = {\n            xs: '0.125rem',\n            sm: '0.25rem',\n            md: '0.375rem',\n            lg: '0.5rem',\n            xl: '0.75rem',\n            '2xl': '1rem',\n            '3xl': '1.5rem',\n            '4xl': '2rem'\n          }\n\n          return values[value] || value + unit\n        }\n      },\n      border: {\n        property: ({ value = '', unit = '', key = '', secondValue = '', secondUnit = '' }) => {\n          const keys: Record<string, string> = {\n            x: 'border-inline-width',\n            y: 'border-block-eidth',\n            t: 'border-top-width',\n            r: 'border-right-width',\n            b: 'border-bottom-width',\n            l: 'border-left-width'\n          }\n\n          if (\n            key === 'color' ||\n            is.color.test(value) ||\n            ['inherit', 'current', 'black', 'white', 'transparent'].includes(value)\n          ) {\n            let finalValue =\n              value.startsWith(colorVariant) && !value.includes('/') && value.endsWith(')')\n                ? `${value.slice(0, -1)}${\n                    secondValue ? ' / ' + secondValue + (secondUnit || '%)') : ')'\n                  }`\n                : value === 'current'\n                  ? 'currentColor'\n                  : value\n\n            return ('border-color: ' + finalValue) as GetCSSProperty\n          } else if (\n            key === 'style' ||\n            ['solid', 'dashed', 'double', 'hidden', 'none', 'dotted'].includes(value)\n          )\n            return ('border-style: ' + value) as GetCSSProperty\n\n          let finalValue = !value\n            ? '1px'\n            : is.number.test(value + unit)\n              ? value + 'px'\n              : value + unit\n\n          return ('border-style: ' +\n            (secondValue || 'solid') +\n            '; ' +\n            (keys[key as string] || 'border-width') +\n            ': ' +\n            finalValue) as GetCSSProperty\n        },\n        value: null\n      },\n      outline: {\n        property: ({ value = '', unit = '', key = '', secondValue = '', secondUnit = '' }) => {\n          if (\n            key === 'color' ||\n            is.color.test(value) ||\n            ['inherit', 'current', 'black', 'white', 'transparent'].includes(value)\n          ) {\n            let finalValue =\n              value.startsWith(colorVariant) && !value.includes('/') && value.endsWith(')')\n                ? `${value.slice(0, -1)}${\n                    secondValue ? ' / ' + secondValue + (secondUnit || '%)') : ')'\n                  }`\n                : value === 'current'\n                  ? 'currentColor'\n                  : value\n\n            return ('outline-color: ' + finalValue) as GetCSSProperty\n          } else if (\n            key === 'style' ||\n            ['solid', 'dashed', 'double', 'none', 'dotted'].includes(value)\n          )\n            return ('outline-style: ' + value) as GetCSSProperty\n\n          let finalValue = !value\n            ? '1px'\n            : is.number.test(value + unit)\n              ? value + 'px'\n              : value + unit\n\n          return ('outline-style: ' +\n            (secondValue || 'solid') +\n            '; ' +\n            'outline-width' +\n            ': ' +\n            finalValue) as GetCSSProperty\n        },\n        value: null\n      },\n      shadow: {\n        property: ({ key = '', value = '', secondValue = '', secondUnit = '' }) => {\n          const shadowType = key === 'inset' ? 'inset-shadow' : 'shadow'\n\n          const values: Record<string, string> = {\n            '2xs': `0 1px var(--tui-${shadowType}-color, rgb(0 0 0 / 0.05))`,\n            xs: `0 1px 2px 0 var(--tui-${shadowType}-color, rgb(0 0 0 / 0.05))`,\n            sm: `0 1px 3px 0 var(--tui-${shadowType}-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tui-${shadowType}-color, rgb(0 0 0 / 0.1))`,\n            md: `0 4px 6px -1px var(--tui-${shadowType}-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tui-${shadowType}-color, rgb(0 0 0 / 0.1))`,\n            lg: `0 10px 15px -3px var(--tui-${shadowType}-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tui-${shadowType}-color, rgb(0 0 0 / 0.1))`,\n            xl: `0 20px 25px -5px var(--tui-${shadowType}-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tui-${shadowType}-color, rgb(0 0 0 / 0.1))`,\n            '2xl': `0 25px 50px -12px var(--tui-${shadowType}-color, rgb(0 0 0 / 0.25))`,\n            none: '0 0 #0000'\n          }\n          const insetValues: Record<string, string> = {\n            '2xs': 'inset 0 1px var(--tui-inset-shadow-color, rgb(0 0 0 / 0.05)',\n            xs: 'inset 0 1px 1px var(--tui-inset-shadow-color, rgb(0 0 0 / 0.05))',\n            sm: 'inset 0 2px 4px var(--tui-inset-shadow-color, rgb(0 0 0 / 0.05))',\n            none: '0 0 #0000'\n          }\n\n          let finalValue =\n            value.startsWith(colorVariant) && !value.includes('/') && value.endsWith(')')\n              ? `${value.slice(0, -1)}${\n                  secondValue ? ' / ' + secondValue + (secondUnit || '%)') : ')'\n                }`\n              : value === 'current'\n                ? 'currentColor'\n                : value\n\n          if (is.color.test(value))\n            return `--tui-${shadowType}-color: ${finalValue}` as GetCSSProperty\n          else\n            return `--tui-${shadowType}: ${\n              (key === 'inset' ? insetValues[value] : values[value]) || value\n            }; box-shadow: var(--tui-inset-shadow), var(--tui-inset-ring-shadow), var(--tui-ring-offset-shadow), var(--tui-shadow), var(--tui-ring-shadow)` as GetCSSProperty\n        },\n        value: null\n      },\n      ring: {\n        property: ({ key = '', value = '', unit = '', secondValue = '', secondUnit = '' }) => {\n          const shadowType = key === 'inset' ? 'inset-ring-shadow' : 'ring-shadow'\n          let finalValue\n\n          if (!value) finalValue = '1px'\n          else if (is.color.test(value)) {\n            finalValue =\n              value.startsWith(colorVariant) && !value.includes('/') && value.endsWith(')')\n                ? `${value.slice(0, -1)}${\n                    secondValue ? ' / ' + secondValue + (secondUnit || '%)') : ')'\n                  }`\n                : value\n          } else if (is.number.test(value + unit)) finalValue = value + 'px'\n          else finalValue = value + unit\n\n          if (is.color.test(value) || value === 'current')\n            return `--tui-${shadowType}-color: ${\n              value === 'current' ? 'currentColor' : finalValue\n            }` as GetCSSProperty\n          else\n            return `--tui-${shadowType}: ${\n              key === 'inset' ? 'inset' : ''\n            } 0 0 0 calc(${finalValue} + var(--tui-ring-offset-width, 2px)) var(--tui-ring-shadow-color, currentColor); box-shadow: var(--tui-inset-shadow), var(--tui-inset-ring-shadow), var(--tui-ring-offset-shadow), var(--tui-shadow), var(--tui-ring-shadow)` as GetCSSProperty\n        },\n        value: null\n      },\n      'ring-offset': {\n        property: ({ key = '', value = '', unit = '', secondValue = '', secondUnit = '' }) => {\n          let finalValue\n\n          if (!value) finalValue = '1px'\n          else if (is.color.test(value)) {\n            finalValue =\n              value.startsWith(colorVariant) && !value.includes('/') && value.endsWith(')')\n                ? `${value.slice(0, -1)}${\n                    secondValue ? ' / ' + secondValue + (secondUnit || '%)') : ')'\n                  }`\n                : value\n          } else if (is.number.test(value + unit)) finalValue = value + 'px'\n          else finalValue = value + unit\n\n          if (is.color.test(value) || value === 'current')\n            return `--tui-ring-offset-color: ${\n              value === 'current' ? 'currentColor' : finalValue\n            }` as GetCSSProperty\n          else\n            return `--tui-ring-offset-width: ${finalValue}; --tui-ring-offset-shadow: 0 0 0 var(--tui-ring-offset-width) var(--tui-ring-offset-color);` as GetCSSProperty\n        },\n        value: null\n      },\n\n      /* position */\n      ...Object.fromEntries(\n        ['top', 'right', 'bottom', 'left', 'inset'].map((property) => [\n          property,\n          {\n            property,\n            value: ({ value = '', unit = '' }) => {\n              return is.number.test(value + unit)\n                ? sizing * Number(value) + (value !== '0' ? 'rem' : '')\n                : value + unit\n            }\n          }\n        ])\n      ),\n      shrink: {\n        property: 'flexShrink',\n        value: ({ value = '', unit = '' }) => {\n          return value + unit || '1'\n        }\n      },\n      grow: {\n        property: 'flexGrow',\n        value: ({ value = '', unit = '' }) => {\n          return value