@react-hive/honey-style 1.4.3 → 1.5.0

package/dist/index.dev.cjs

@@ -378,7 +378,8 @@
 
 
 
-if (false) {} else {
+if (false) // removed by dead control flow
+{} else {
   module.exports = __webpack_require__(/*! ./cjs/react-jsx-runtime.development.js */ "./node_modules/react/cjs/react-jsx-runtime.development.js");
 }
 
@@ -1191,80 +1192,95 @@ const HONEY_GLOBAL_STYLE_ATTR = 'data-honey-global-style';
 const HONEY_STYLE_ATTR = 'data-honey-style';
 const HONEY_BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
 const VALID_HTML_ATTRS = new Set([
+    // Standard Attributes
     'accept',
     'accessKey',
-    'alt',
-    'aria',
-    'as',
     'autoCapitalize',
     'autoComplete',
     'autoFocus',
     'capture',
-    'checked',
+    'class',
     'className',
     'contentEditable',
     'contextMenu',
-    'controls',
-    'crossOrigin',
-    'dangerouslySetInnerHTML',
-    'data',
     'dir',
-    'disabled',
-    'download',
     'draggable',
+    'hidden',
+    'id',
+    'inert',
+    'inputMode',
+    'is',
+    'lang',
+    'nonce',
+    'part',
+    'slot',
+    'spellCheck',
+    'style',
+    'tabIndex',
+    'title',
+    'translate',
+    'unselectable',
+    // Form Attributes
+    'checked',
+    'disabled',
     'form',
     'formAction',
     'formEncType',
     'formMethod',
     'formNoValidate',
     'formTarget',
-    'height',
-    'hidden',
-    'href',
-    'hrefLang',
-    'id',
-    'is',
-    'isMap',
-    'inert',
-    'key',
-    'lang',
     'list',
-    'loop',
     'max',
     'maxLength',
-    'media',
     'min',
     'minLength',
     'multiple',
-    'muted',
     'name',
     'pattern',
     'placeholder',
     'readOnly',
     'required',
-    'role',
     'size',
-    'slot',
-    'spellCheck',
-    'src',
-    'srcSet',
     'step',
-    'style',
-    'tabIndex',
-    'target',
-    'title',
-    'translate',
     'type',
-    'useMap',
     'value',
+    // Media Attributes
+    'alt',
+    'controls',
+    'crossOrigin',
+    'height',
+    'isMap',
+    'loop',
+    'media',
+    'muted',
+    'poster',
+    'preload',
+    'src',
+    'srcSet',
+    'useMap',
     'width',
+    // Anchor & Link Attributes
+    'download',
+    'href',
+    'hrefLang',
+    'referrerPolicy',
+    'rel',
+    'target',
+    // React Specific
+    'dangerouslySetInnerHTML',
+    'key',
     'ref',
     'children',
-    'class',
+    // Deprecated/Obscure Attributes (still valid in some contexts)
     'char',
     'charOff',
-    'unselectable',
-    'inputMode',
+    // Web Components / Shadow DOM
+    'exportparts',
+    'popover',
+    'popoverTarget',
+    'popoverTargetAction',
+    'virtualkeyboardpolicy',
+    'writingsuggestions',
 ]);
 const VALID_TABLE_ATTRS = new Set([
     'colSpan',
@@ -1473,10 +1489,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const resolveCssInterpolation = (value, context) => {
-    if (value === '' || value === false || value === undefined || value === null) {
+    if (value === '' || value === false || (0,_utils__WEBPACK_IMPORTED_MODULE_1__.isNil)(value)) {
         return '';
     }
-    if (typeof value === 'function') {
+    if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isFunction)(value)) {
         if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isStyledComponent)(value)) {
             return `.${value[_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLED_COMPONENT_ID_PROP]}`;
         }
@@ -1485,7 +1501,7 @@ const resolveCssInterpolation = (value, context) => {
     if (Array.isArray(value)) {
         return value.map(v => resolveCssInterpolation(v, context)).join('\n');
     }
-    if (value && typeof value === 'object') {
+    if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isObject)(value)) {
         return Object.entries(value)
             .filter(([, v]) => v !== undefined && v !== false)
             .map(([k, v]) => `${(0,_utils__WEBPACK_IMPORTED_MODULE_1__.toKebabCase)(k)}: ${v};`)
@@ -1751,7 +1767,7 @@ const evaluateDynamicCss = (interpolation, context) => {
     if (!interpolation) {
         return '';
     }
-    if (typeof interpolation === 'string') {
+    if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(interpolation)) {
         return interpolation;
     }
     // @ts-expect-error
@@ -1767,7 +1783,7 @@ const styled = (target, defaultProps) => {
             }
             const { theme } = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useHoneyStyle)();
             const cleanedProps = Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined));
-            const resolvedDefaultProps = typeof defaultProps === 'function'
+            const resolvedDefaultProps = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isFunction)(defaultProps)
                 ? defaultProps({ theme, as, className, ...cleanedProps })
                 : (defaultProps ?? {});
             const context = {
@@ -1781,7 +1797,7 @@ const styled = (target, defaultProps) => {
                 const baseCss = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.processCss)(rawCss, `.${baseClassName}`);
                 return (0,_mount_style__WEBPACK_IMPORTED_MODULE_4__.mountStyle)(baseClassName, baseCss, __compositionDepth);
             }, [baseClassName]);
-            const cssPropRaw = typeof cssProp === 'function' ? cssProp(context) : cssProp;
+            const cssPropRaw = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isFunction)(cssProp) ? cssProp(context) : cssProp;
             const cssPropString = evaluateDynamicCss(cssPropRaw, context);
             const cssPropClassName = cssPropString ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.resolveClassName)(cssPropString) : '';
             (0,react__WEBPACK_IMPORTED_MODULE_0__.useInsertionEffect)(() => {
@@ -1796,8 +1812,10 @@ const styled = (target, defaultProps) => {
                 className: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.combineClassNames)([componentId, baseClassName, className, cssPropClassName]),
             };
             const finalComponent = as || target;
-            if (typeof target === 'string') {
-                const filteredProps = typeof finalComponent === 'string' ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.filterNonHtmlAttrs)(mergedProps) : mergedProps;
+            if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(target)) {
+                const filteredProps = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(finalComponent)
+                    ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.filterNonHtmlAttrs)(mergedProps)
+                    : mergedProps;
                 return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(finalComponent, filteredProps);
             }
             return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(target, {
@@ -1810,7 +1828,9 @@ const styled = (target, defaultProps) => {
         };
         StyledComponent[_constants__WEBPACK_IMPORTED_MODULE_1__.HONEY_STYLED_COMPONENT_ID_PROP] = componentId;
         if (_constants__WEBPACK_IMPORTED_MODULE_1__.__DEV__) {
-            const componentName = typeof target === 'string' ? target : target.displayName || target.name || 'Component';
+            const componentName = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(target)
+                ? target
+                : target.displayName || target.name || 'Component';
             StyledComponent.displayName = `HoneyStyledComponent(${componentName})`;
         }
         return StyledComponent;
@@ -1872,8 +1892,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   combineClassNames: () => (/* binding */ combineClassNames),
 /* harmony export */   filterNonHtmlAttrs: () => (/* binding */ filterNonHtmlAttrs),
 /* harmony export */   generateId: () => (/* binding */ generateId),
-/* harmony export */   hashString: () => (/* binding */ hashString),
+/* harmony export */   isFunction: () => (/* binding */ isFunction),
+/* harmony export */   isNil: () => (/* binding */ isNil),
+/* harmony export */   isObject: () => (/* binding */ isObject),
+/* harmony export */   isString: () => (/* binding */ isString),
 /* harmony export */   isStyledComponent: () => (/* binding */ isStyledComponent),
+/* harmony export */   mediaQuery: () => (/* binding */ mediaQuery),
 /* harmony export */   processCss: () => (/* binding */ processCss),
 /* harmony export */   resolveClassName: () => (/* binding */ resolveClassName),
 /* harmony export */   toKebabCase: () => (/* binding */ toKebabCase)
@@ -1890,6 +1914,41 @@ function assert(condition, message) {
 }
 const generateId = (prefix) => `${prefix}-${Math.random().toString(36).slice(2, 8)}`;
 const toKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+const isString = (value) => typeof value === 'string';
+const isObject = (value) => typeof value === 'object';
+const isFunction = (value) => typeof value === 'function';
+/**
+ * Checks if a value is null or undefined.
+ *
+ * @param value - The value to check.
+ *
+ * @returns `true` if the value is `null` or `undefined`, otherwise `false`.
+ */
+const isNil = (value) => value === undefined || value === null;
+/**
+ * Generates a short, consistent hash string from an input string using a DJB2-inspired algorithm.
+ *
+ * This function uses a variation of the DJB2 algorithm, which is a simple yet effective hashing algorithm
+ * based on bitwise XOR (`^`) and multiplication by 33. It produces a non-negative 32-bit integer,
+ * which is then converted to a base-36 string (digits + lowercase letters) to produce a compact output.
+ *
+ * Useful for:
+ * - Generating stable class names in CSS-in-JS libraries.
+ * - Producing consistent cache keys.
+ * - Quick and lightweight hashing needs where cryptographic security is not required.
+ *
+ * ⚠️ This is not cryptographically secure and should not be used for hashing passwords or sensitive data.
+ *
+ * @param str - The input string to hash.
+ *
+ * @returns A short, base-36 encoded hash string.
+ *
+ * @example
+ * ```ts
+ * const className = hashString('background-color: red;');
+ * // → 'e4k1z0x'
+ * ```
+ */
 const hashString = (str) => {
     let hash = 5381;
     for (let i = 0; i < str.length; i++) {
@@ -1932,6 +1991,48 @@ const filterNonHtmlAttrs = (attrs) => Object.entries(attrs).reduce((allowedAttrs
     }
     return allowedAttrs;
 }, {});
+/**
+ * Constructs a complete `@media` query string from an array of media rule objects.
+ * Each rule defines conditions such as screen size, orientation, or resolution,
+ * which are converted into standard CSS media query syntax.
+ *
+ * @param rules - An array of media rule objects used to generate individual media queries.
+ *
+ * @returns A string containing a full `@media` query that can be used in CSS or injected into a stylesheet.
+ *
+ * @example
+ * ```ts
+ * atMedia([
+ *   { minWidth: '768px', orientation: 'landscape' },
+ *   { mediaType: 'print' }
+ * ]);
+ * // Returns: "@media screen and (min-width: 768px) and (orientation: landscape), print"
+ * ```
+ */
+const mediaQuery = (rules) => {
+    const mediaRules = rules.map(rule => {
+        const conditions = [
+            rule.width && ['width', rule.width],
+            rule.minWidth && ['min-width', rule.minWidth],
+            rule.maxWidth && ['max-width', rule.maxWidth],
+            rule.height && ['height', rule.height],
+            rule.minHeight && ['min-height', rule.minHeight],
+            rule.maxHeight && ['max-height', rule.maxHeight],
+            rule.orientation && ['orientation', rule.orientation],
+            rule.minResolution && ['min-resolution', rule.minResolution],
+            rule.maxResolution && ['max-resolution', rule.maxResolution],
+            rule.resolution && ['resolution', rule.resolution],
+            rule.update && ['update', rule.update],
+        ]
+            .filter(Boolean)
+            .map(r => r && `(${r[0]}: ${r[1]})`)
+            .join(' and ');
+        const operatorPart = rule.operator ? `${rule.operator} ` : '';
+        const conditionsPart = conditions ? ` and ${conditions}` : '';
+        return `${operatorPart}${rule.mediaType ?? 'screen'}${conditionsPart}`;
+    });
+    return `@media ${mediaRules.join(', ')}`;
+};
 
 
 /***/ }),