winduum 2.1.2 → 2.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "winduum",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "type": "module",
   "types": "types/index.d.ts",
   "main": "plugin/index.cjs",

package/plugin/index.cjs

@@ -1,17 +1,17 @@
-'use strict';
+'use strict'
 
-Object.defineProperty(exports, '__esModule', { value: true });
+Object.defineProperty(exports, '__esModule', { value: true })
 
-var plugin = require('tailwindcss/plugin');
-var flattenColorPalette = require('tailwindcss/src/util/flattenColorPalette');
-var withAlphaVariable = require('tailwindcss/src/util/withAlphaVariable');
-var toColorValue = require('tailwindcss/src/util/toColorValue');
-var node_fs = require('node:fs');
-var node_url = require('node:url');
-var node_path = require('node:path');
+const plugin = require('tailwindcss/plugin')
+const flattenColorPalette = require('tailwindcss/src/util/flattenColorPalette')
+const withAlphaVariable = require('tailwindcss/src/util/withAlphaVariable')
+const toColorValue = require('tailwindcss/src/util/toColorValue')
+const node_fs = require('node:fs')
+const node_url = require('node:url')
+const node_path = require('node:path')
 
-var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
-function divideGap ({ theme, e }) {
+const _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null
+function divideGap({ theme, e }) {
     return [
         ...Object.entries(theme('spacing')).map(([key, value]) => {
             return {
@@ -33,20 +33,20 @@ function divideGap ({ theme, e }) {
 }
 
 const accentColor = ({ value }, settings) => {
-    const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/);
-    const colorProperties = {};
+    const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/)
+    const colorProperties = {}
 
     if (matchValue) {
         if (settings.rgb) {
-            colorProperties['--color-accent-rgb'] =
-                `var(${matchValue[1].includes('-rgb') ? matchValue[1] : matchValue[1] + '-rgb'})`;
-            colorProperties['--color-accent-foreground-rgb'] =
-                `var(${matchValue[1].includes('-rgb') ? matchValue[1].replace('-rgb', '-foreground-rgb') : matchValue[1] + '-foreground-rgb, var(--color-light-rgb)'})`;
+            colorProperties['--color-accent-rgb']
+                = `var(${matchValue[1].includes('-rgb') ? matchValue[1] : matchValue[1] + '-rgb'})`
+            colorProperties['--color-accent-foreground-rgb']
+                = `var(${matchValue[1].includes('-rgb') ? matchValue[1].replace('-rgb', '-foreground-rgb') : matchValue[1] + '-foreground-rgb, var(--color-light-rgb)'})`
         }
 
         if (toColorValue(value).includes('calc(1 * 100%)') || toColorValue(value).includes(' / 1')) {
-            colorProperties['--color-accent'] = matchValue[0].replace('-rgb', '');
-            colorProperties['--color-accent-foreground'] = `var(${matchValue[1].replace('-rgb', '')}-foreground, var(--color-light))`;
+            colorProperties['--color-accent'] = matchValue[0].replace('-rgb', '')
+            colorProperties['--color-accent-foreground'] = `var(${matchValue[1].replace('-rgb', '')}-foreground, var(--color-light))`
 
             return {
                 ...colorProperties,
@@ -54,12 +54,12 @@ const accentColor = ({ value }, settings) => {
             }
         } else {
             if (matchValue[1].includes('-rgb')) {
-                colorProperties['--color-accent'] = toColorValue(value);
+                colorProperties['--color-accent'] = toColorValue(value)
             } else {
-                colorProperties['--color-accent'] = settings.rgb ? `rgb(var(--color-accent-rgb) / ${toColorValue(value).match(/calc\((.*?)\)/)[0]})` : toColorValue(value);
+                colorProperties['--color-accent'] = settings.rgb ? `rgb(var(--color-accent-rgb) / ${toColorValue(value).match(/calc\((.*?)\)/)[0]})` : toColorValue(value)
             }
 
-            colorProperties['--color-accent-foreground'] = settings.rgb ? 'rgb(var(--color-accent-foreground-rgb))' : `var(${matchValue[1]}-foreground, var(--color-light))`;
+            colorProperties['--color-accent-foreground'] = settings.rgb ? 'rgb(var(--color-accent-foreground-rgb))' : `var(${matchValue[1]}-foreground, var(--color-light))`
 
             return {
                 ...colorProperties,
@@ -72,14 +72,14 @@ const accentColor = ({ value }, settings) => {
         '--color-accent': toColorValue(value),
         'accent-color': 'var(--color-accent)'
     }
-};
+}
 
 const textColor = ({ value, corePlugins }, settings) => {
-    const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/);
-    const withCurrentRgb = {};
+    const matchValue = toColorValue(value).match(/var\((--color-.*?)\)/)
+    const withCurrentRgb = {}
 
     if (matchValue && settings.rgb) {
-        withCurrentRgb['--tw-text-current-rgb'] = matchValue[1].includes('rgb') ? matchValue[0] : `var(${matchValue[1]}-rgb)`;
+        withCurrentRgb['--tw-text-current-rgb'] = matchValue[1].includes('rgb') ? matchValue[0] : `var(${matchValue[1]}-rgb)`
     }
 
     if (!corePlugins('textOpacity')) {
@@ -97,7 +97,7 @@ const textColor = ({ value, corePlugins }, settings) => {
             variable: '--tw-text-opacity'
         })
     }
-};
+}
 
 /**
  * @param {[]} colors
@@ -108,20 +108,20 @@ const textColor = ({ value, corePlugins }, settings) => {
 const tailwindColors = (colors = [], colorMix = true, rgb = false) => {
     const result = {
         current: 'color-mix(in var(--default-color-space), currentcolor calc(<alpha-value> * 100%), var(--default-color-mix, transparent))'
-    };
+    }
 
     colors.forEach((name) => {
         if (rgb) {
-            result[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`;
+            result[name + '-rgb'] = `rgb(var(--color-${name}-rgb) / <alpha-value>)`
         }
 
         result[name] = colorMix
             ? `color-mix(in var(--default-color-space), var(--color-${name}) calc(<alpha-value> * 100%), var(--default-color-mix, transparent))`
-            : `rgb(var(--color-${name}) / <alpha-value>)`;
-    });
+            : `rgb(var(--color-${name}) / <alpha-value>)`
+    })
 
     return result
-};
+}
 
 /**
  * @param {string} type
@@ -135,42 +135,42 @@ const tailwindVariables = (type, variables = [], values = {}) => {
     }
 
     variables.forEach((name) => {
-        values[name] = `var(--${type}-${name.replace(/\./g, '_')})`;
-    });
+        values[name] = `var(--${type}-${name.replace(/\./g, '_')})`
+    })
 
     return values
-};
+}
 
 const tailwindParseVariables = (type, file, customValues = {}, customPath, initialValues = true) => {
     const parseFile = (fileContent) => {
-        const regex = /(--[\w-]+):\s*([^;]+);/g;
-        const matches = [...fileContent.matchAll(regex)];
-        const variables = matches.map(match => [match[1], match[2]]);
-        const values = {};
+        const regex = /(--[\w-]+):\s*([^;]+);/g
+        const matches = [...fileContent.matchAll(regex)]
+        const variables = matches.map(match => [match[1], match[2]])
+        const values = {}
 
         variables.forEach((match, index) => {
             if (!match[0].startsWith(`--${type}-`) || match[0].endsWith('--line-height')) {
                 return
             }
 
-            const name = match[0].replace(`--${type}-`, '');
+            const name = match[0].replace(`--${type}-`, '')
 
-            values[name.replace(/_/g, '.')] = type === 'font-size' ? [`var(${match})`, `var(${variables[index + 1]})`] : `var(${initialValues ? match : match[0]})`;
-        });
+            values[name.replace(/_/g, '.')] = type === 'font-size' ? [`var(${match})`, `var(${variables[index + 1]})`] : `var(${initialValues ? match : match[0]})`
+        })
 
         return values
-    };
+    }
 
-    const fileContent = node_fs.readFileSync(file).toString();
-    const values = parseFile(fileContent);
+    const fileContent = node_fs.readFileSync(file).toString()
+    const values = parseFile(fileContent)
 
     if (customPath && !Array.isArray(customPath)) {
-        const customFileContent = node_fs.readFileSync(node_path.resolve(process.cwd(), customPath)).toString();
-        customValues = { ...customValues, ...parseFile(customFileContent) };
+        const customFileContent = node_fs.readFileSync(node_path.resolve(process.cwd(), customPath)).toString()
+        customValues = { ...customValues, ...parseFile(customFileContent) }
     }
 
     return { ...values, ...customValues }
-};
+}
 
 /**
  * @param {string} type
@@ -180,11 +180,11 @@ const tailwindParseVariables = (type, file, customValues = {}, customPath, initi
  */
 const tailwindVariablesFont = (type, variables = [], values = {}) => {
     variables.forEach(({ value, initial }) => {
-        values[value] = [`var(--${type}-${value}, ${initial})`, `calc(var(--${type}-${value}) + 0.5rem)`];
-    });
+        values[value] = [`var(--${type}-${value}, ${initial})`, `calc(var(--${type}-${value}) + 0.5rem)`]
+    })
 
     return values
-};
+}
 
 /**
  * @param {string} type
@@ -192,34 +192,34 @@ const tailwindVariablesFont = (type, variables = [], values = {}) => {
  * @returns {Object}
  */
 const tailwindPropertyUtilities = (type, variables = []) => {
-    const result = {};
+    const result = {}
 
     variables.forEach((name) => {
         result[`.${type}-${name}`] = {
             [type]: `var(--${type}-${name})`
-        };
-    });
+        }
+    })
 
     return result
-};
+}
 
 /**
  * @param {string[]} values
  * @returns {Object}
  */
 const tailwindAnimations = (values) => {
-    const result = {};
+    const result = {}
 
     values.forEach((value) => {
         result[`.animation-${value}`] = {
             'animation-name': value
-        };
-    });
+        }
+    })
 
     return result
-};
+}
 
-const relativePath = file => node_path.resolve(node_path.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)))), file);
+const relativePath = file => node_path.resolve(node_path.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('index.cjs', document.baseURI).href)))), file)
 
 /**
  * @type {import('./').PluginOptions} options.
@@ -242,7 +242,7 @@ const defaultConfig = {
         rgb: false,
         colorMix: true
     }
-};
+}
 
 /**
  * @param {import('./').PluginOptions} userConfig
@@ -251,13 +251,13 @@ const createPlugin = (userConfig = {}) => {
     const settings = {
         ...defaultConfig.settings,
         ...userConfig.settings
-    };
+    }
 
     userConfig = {
         ...defaultConfig,
         ...userConfig,
         settings
-    };
+    }
 
     return plugin(({ addComponents, matchUtilities, theme, e, corePlugins }) => {
         matchUtilities(
@@ -265,18 +265,18 @@ const createPlugin = (userConfig = {}) => {
                 accent: value => accentColor({ value }, userConfig.settings)
             },
             { values: flattenColorPalette(theme('accentColor')), type: ['color', 'any'] }
-        );
+        )
         matchUtilities(
             {
                 text: value => textColor({ value, corePlugins }, userConfig.settings)
             },
             { values: flattenColorPalette(theme('textColor')), type: ['color', 'any'] }
-        );
-        addComponents(tailwindAnimations(userConfig.animations));
+        )
+        addComponents(tailwindAnimations(userConfig.animations))
         addComponents(tailwindPropertyUtilities('mask', Object.keys(tailwindParseVariables('mask', relativePath('../src/theme/config/mask.css'), {
             ...tailwindVariables('mask', userConfig.mask ?? [])
-        }, userConfig.mask, false))));
-        addComponents(divideGap({ theme, e }));
+        }, userConfig.mask, false))))
+        addComponents(divideGap({ theme, e }))
     }, {
         corePlugins: {
             preflight: false,
@@ -316,19 +316,19 @@ const createPlugin = (userConfig = {}) => {
                 }, userConfig.spacing),
                 borderRadius: tailwindParseVariables('radius', relativePath('../src/theme/config/radius.css'), {
                     ...tailwindVariables('radius', userConfig.borderRadius ?? []),
-                    DEFAULT: 'var(--radius)'
+                    DEFAULT: 'var(--radius-xl)'
                 }, userConfig.borderRadius),
                 screens: userConfig.screens
             }
         }
     })
-};
-
-exports.createPlugin = createPlugin;
-exports.default = createPlugin;
-exports.defaultConfig = defaultConfig;
-exports.tailwindAnimations = tailwindAnimations;
-exports.tailwindColors = tailwindColors;
-exports.tailwindPropertyUtilities = tailwindPropertyUtilities;
-exports.tailwindVariables = tailwindVariables;
-exports.tailwindVariablesFont = tailwindVariablesFont;
+}
+
+exports.createPlugin = createPlugin
+exports.default = createPlugin
+exports.defaultConfig = defaultConfig
+exports.tailwindAnimations = tailwindAnimations
+exports.tailwindColors = tailwindColors
+exports.tailwindPropertyUtilities = tailwindPropertyUtilities
+exports.tailwindVariables = tailwindVariables
+exports.tailwindVariablesFont = tailwindVariablesFont

package/plugin/index.js

@@ -110,7 +110,7 @@ export const createPlugin = (userConfig = {}) => {
                 }, userConfig.spacing),
                 borderRadius: tailwindParseVariables('radius', relativePath('../src/theme/config/radius.css'), {
                     ...tailwindVariables('radius', userConfig.borderRadius ?? []),
-                    DEFAULT: 'var(--radius)'
+                    DEFAULT: 'var(--radius-xl)'
                 }, userConfig.borderRadius),
                 screens: userConfig.screens
             }

package/src/components/button/props/default.css

@@ -1,7 +1,7 @@
 :root, :host {
   --x-button-outline-width: 2px;
   --x-button-border-width: 0px;
-  --x-button-border-radius: var(--radius);
+  --x-button-border-radius: var(--radius-xl);
   --x-button-font-size: var(--text-sm);
   --x-button-font-weight: var(--font-weight-medium);
   --x-button-gap: calc(var(--spacing) * 2);

package/src/components/control/default.css

@@ -61,6 +61,10 @@
     }
   }
 
+  > :where(input, select) {
+    white-space: nowrap;
+  }
+
   > :where(input, textarea) {
     &::placeholder {
       color: var(--x-control-placeholder-color);

package/src/components/control/props/default.css

@@ -4,7 +4,7 @@
   --x-control-padding-inline: 0.75rem;
   --x-control-padding-block: 0.75rem;
   --x-control-border-width: 1px;
-  --x-control-border-radius: var(--radius);
+  --x-control-border-radius: var(--radius-xl);
   --x-control-border-color: currentColor;
   --x-control-font-weight: var(--font-weight-medium);
   --x-control-font-size: var(--text-base);

package/src/components/group/default.css

@@ -1,6 +1,6 @@
 .x-group {
   display: flex;
-  border-radius: var(--radius);
+  border-radius: var(--radius-xl);
 
   &:has(.x-control) {
     > :where(.x-button) {

package/src/components/notice/props/default.css

@@ -2,7 +2,7 @@
   --x-notice-padding-block: 1.25rem;
   --x-notice-padding-inline: 1.5rem;
   --x-notice-font-size: var(--text-sm);
-  --x-notice-border-radius: var(--radius);
+  --x-notice-border-radius: var(--radius-xl);
   --x-notice-outline-width: 1px;
   --x-notice-outline-offset: calc(var(--x-notice-outline-width, 1px) * -1);
 }

package/src/components/popover/props/content.css

@@ -1,6 +1,6 @@
 :root, :host {
   --x-popover-content-background-color: var(--color-body-primary);
-  --x-popover-content-border-radius: var(--radius);
+  --x-popover-content-border-radius: var(--radius-xl);
   --x-popover-content-padding-block: calc(var(--spacing) * 2);
   --x-popover-content-padding-inline: calc(var(--spacing) * 2);
   --x-popover-content-scale-y: 0.75;

package/src/components/table/props/default.css

@@ -1,5 +1,5 @@
 :root, :host {
-  --x-table-border-radius: var(--radius);
+  --x-table-border-radius: var(--radius-xl);
   --x-table-padding-inline: 1rem;
   --x-table-cell-spacing-x: 0.625rem;
   --x-table-cell-spacing-y: 0.875rem;

package/src/components/tabs/list.css

@@ -2,7 +2,7 @@
   background-color: var(--x-tabs-list-background-color, var(--color-body-secondary));
   gap: var(--x-tabs-list-gap, calc(var(--spacing) * 1));
   padding: var(--x-tabs-list-padding, calc(var(--spacing) * 1));
-  border-radius: var(--x-tabs-list-border-radius, var(--radius));
+  border-radius: var(--x-tabs-list-border-radius, var(--radius-xl));
   display: flex;
   inline-size: max-content;
 }