@react-hive/honey-style 1.4.3 → 1.5.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.
@@ -378,7 +378,8 @@
378
378
 
379
379
 
380
380
 
381
- if (false) {} else {
381
+ if (false) // removed by dead control flow
382
+ {} else {
382
383
  module.exports = __webpack_require__(/*! ./cjs/react-jsx-runtime.development.js */ "./node_modules/react/cjs/react-jsx-runtime.development.js");
383
384
  }
384
385
 
@@ -1163,6 +1164,78 @@ function filter (array, pattern) {
1163
1164
  }
1164
1165
 
1165
1166
 
1167
+ /***/ }),
1168
+
1169
+ /***/ "./src/at-rules/index.ts":
1170
+ /*!*******************************!*\
1171
+ !*** ./src/at-rules/index.ts ***!
1172
+ \*******************************/
1173
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1174
+
1175
+ __webpack_require__.r(__webpack_exports__);
1176
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
1177
+ /* harmony export */ mediaQuery: () => (/* reexport safe */ _media_query__WEBPACK_IMPORTED_MODULE_0__.mediaQuery)
1178
+ /* harmony export */ });
1179
+ /* harmony import */ var _media_query__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./media-query */ "./src/at-rules/media-query.ts");
1180
+
1181
+
1182
+
1183
+ /***/ }),
1184
+
1185
+ /***/ "./src/at-rules/media-query.ts":
1186
+ /*!*************************************!*\
1187
+ !*** ./src/at-rules/media-query.ts ***!
1188
+ \*************************************/
1189
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
1190
+
1191
+ __webpack_require__.r(__webpack_exports__);
1192
+ /* harmony export */ __webpack_require__.d(__webpack_exports__, {
1193
+ /* harmony export */ mediaQuery: () => (/* binding */ mediaQuery)
1194
+ /* harmony export */ });
1195
+ /**
1196
+ * Constructs a complete `@media` query string from an array of media rule objects.
1197
+ * Each rule defines conditions such as screen size, orientation, or resolution,
1198
+ * which are converted into standard CSS media query syntax.
1199
+ *
1200
+ * @param rules - An array of media rule objects used to generate individual media queries.
1201
+ *
1202
+ * @returns A string containing a full `@media` query that can be used in CSS or injected into a stylesheet.
1203
+ *
1204
+ * @example
1205
+ * ```ts
1206
+ * atMedia([
1207
+ * { minWidth: '768px', orientation: 'landscape' },
1208
+ * { mediaType: 'print' }
1209
+ * ]);
1210
+ * // Returns: "@media screen and (min-width: 768px) and (orientation: landscape), print"
1211
+ * ```
1212
+ */
1213
+ const mediaQuery = (rules) => {
1214
+ const mediaRules = rules.map(rule => {
1215
+ const conditions = [
1216
+ rule.width && ['width', rule.width],
1217
+ rule.minWidth && ['min-width', rule.minWidth],
1218
+ rule.maxWidth && ['max-width', rule.maxWidth],
1219
+ rule.height && ['height', rule.height],
1220
+ rule.minHeight && ['min-height', rule.minHeight],
1221
+ rule.maxHeight && ['max-height', rule.maxHeight],
1222
+ rule.orientation && ['orientation', rule.orientation],
1223
+ rule.minResolution && ['min-resolution', rule.minResolution],
1224
+ rule.maxResolution && ['max-resolution', rule.maxResolution],
1225
+ rule.resolution && ['resolution', rule.resolution],
1226
+ rule.update && ['update', rule.update],
1227
+ ]
1228
+ .filter(Boolean)
1229
+ .map(r => r && `(${r[0]}: ${r[1]})`)
1230
+ .join(' and ');
1231
+ const operatorPart = rule.operator ? `${rule.operator} ` : '';
1232
+ const conditionsPart = conditions ? ` and ${conditions}` : '';
1233
+ return `${operatorPart}${rule.mediaType ?? 'screen'}${conditionsPart}`;
1234
+ });
1235
+ return `@media ${mediaRules.join(', ')}`;
1236
+ };
1237
+
1238
+
1166
1239
  /***/ }),
1167
1240
 
1168
1241
  /***/ "./src/constants.ts":
@@ -1191,80 +1264,95 @@ const HONEY_GLOBAL_STYLE_ATTR = 'data-honey-global-style';
1191
1264
  const HONEY_STYLE_ATTR = 'data-honey-style';
1192
1265
  const HONEY_BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
1193
1266
  const VALID_HTML_ATTRS = new Set([
1267
+ // Standard Attributes
1194
1268
  'accept',
1195
1269
  'accessKey',
1196
- 'alt',
1197
- 'aria',
1198
- 'as',
1199
1270
  'autoCapitalize',
1200
1271
  'autoComplete',
1201
1272
  'autoFocus',
1202
1273
  'capture',
1203
- 'checked',
1274
+ 'class',
1204
1275
  'className',
1205
1276
  'contentEditable',
1206
1277
  'contextMenu',
1207
- 'controls',
1208
- 'crossOrigin',
1209
- 'dangerouslySetInnerHTML',
1210
- 'data',
1211
1278
  'dir',
1212
- 'disabled',
1213
- 'download',
1214
1279
  'draggable',
1280
+ 'hidden',
1281
+ 'id',
1282
+ 'inert',
1283
+ 'inputMode',
1284
+ 'is',
1285
+ 'lang',
1286
+ 'nonce',
1287
+ 'part',
1288
+ 'slot',
1289
+ 'spellCheck',
1290
+ 'style',
1291
+ 'tabIndex',
1292
+ 'title',
1293
+ 'translate',
1294
+ 'unselectable',
1295
+ // Form Attributes
1296
+ 'checked',
1297
+ 'disabled',
1215
1298
  'form',
1216
1299
  'formAction',
1217
1300
  'formEncType',
1218
1301
  'formMethod',
1219
1302
  'formNoValidate',
1220
1303
  'formTarget',
1221
- 'height',
1222
- 'hidden',
1223
- 'href',
1224
- 'hrefLang',
1225
- 'id',
1226
- 'is',
1227
- 'isMap',
1228
- 'inert',
1229
- 'key',
1230
- 'lang',
1231
1304
  'list',
1232
- 'loop',
1233
1305
  'max',
1234
1306
  'maxLength',
1235
- 'media',
1236
1307
  'min',
1237
1308
  'minLength',
1238
1309
  'multiple',
1239
- 'muted',
1240
1310
  'name',
1241
1311
  'pattern',
1242
1312
  'placeholder',
1243
1313
  'readOnly',
1244
1314
  'required',
1245
- 'role',
1246
1315
  'size',
1247
- 'slot',
1248
- 'spellCheck',
1249
- 'src',
1250
- 'srcSet',
1251
1316
  'step',
1252
- 'style',
1253
- 'tabIndex',
1254
- 'target',
1255
- 'title',
1256
- 'translate',
1257
1317
  'type',
1258
- 'useMap',
1259
1318
  'value',
1319
+ // Media Attributes
1320
+ 'alt',
1321
+ 'controls',
1322
+ 'crossOrigin',
1323
+ 'height',
1324
+ 'isMap',
1325
+ 'loop',
1326
+ 'media',
1327
+ 'muted',
1328
+ 'poster',
1329
+ 'preload',
1330
+ 'src',
1331
+ 'srcSet',
1332
+ 'useMap',
1260
1333
  'width',
1334
+ // Anchor & Link Attributes
1335
+ 'download',
1336
+ 'href',
1337
+ 'hrefLang',
1338
+ 'referrerPolicy',
1339
+ 'rel',
1340
+ 'target',
1341
+ // React Specific
1342
+ 'dangerouslySetInnerHTML',
1343
+ 'key',
1261
1344
  'ref',
1262
1345
  'children',
1263
- 'class',
1346
+ // Deprecated/Obscure Attributes (still valid in some contexts)
1264
1347
  'char',
1265
1348
  'charOff',
1266
- 'unselectable',
1267
- 'inputMode',
1349
+ // Web Components / Shadow DOM
1350
+ 'exportparts',
1351
+ 'popover',
1352
+ 'popoverTarget',
1353
+ 'popoverTargetAction',
1354
+ 'virtualkeyboardpolicy',
1355
+ 'writingsuggestions',
1268
1356
  ]);
1269
1357
  const VALID_TABLE_ATTRS = new Set([
1270
1358
  'colSpan',
@@ -1473,10 +1561,10 @@ __webpack_require__.r(__webpack_exports__);
1473
1561
 
1474
1562
 
1475
1563
  const resolveCssInterpolation = (value, context) => {
1476
- if (value === '' || value === false || value === undefined || value === null) {
1564
+ if (value === '' || value === false || (0,_utils__WEBPACK_IMPORTED_MODULE_1__.isNil)(value)) {
1477
1565
  return '';
1478
1566
  }
1479
- if (typeof value === 'function') {
1567
+ if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isFunction)(value)) {
1480
1568
  if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isStyledComponent)(value)) {
1481
1569
  return `.${value[_constants__WEBPACK_IMPORTED_MODULE_0__.HONEY_STYLED_COMPONENT_ID_PROP]}`;
1482
1570
  }
@@ -1485,7 +1573,7 @@ const resolveCssInterpolation = (value, context) => {
1485
1573
  if (Array.isArray(value)) {
1486
1574
  return value.map(v => resolveCssInterpolation(v, context)).join('\n');
1487
1575
  }
1488
- if (value && typeof value === 'object') {
1576
+ if ((0,_utils__WEBPACK_IMPORTED_MODULE_1__.isObject)(value)) {
1489
1577
  return Object.entries(value)
1490
1578
  .filter(([, v]) => v !== undefined && v !== false)
1491
1579
  .map(([k, v]) => `${(0,_utils__WEBPACK_IMPORTED_MODULE_1__.toKebabCase)(k)}: ${v};`)
@@ -1751,7 +1839,7 @@ const evaluateDynamicCss = (interpolation, context) => {
1751
1839
  if (!interpolation) {
1752
1840
  return '';
1753
1841
  }
1754
- if (typeof interpolation === 'string') {
1842
+ if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(interpolation)) {
1755
1843
  return interpolation;
1756
1844
  }
1757
1845
  // @ts-expect-error
@@ -1767,7 +1855,7 @@ const styled = (target, defaultProps) => {
1767
1855
  }
1768
1856
  const { theme } = (0,_hooks__WEBPACK_IMPORTED_MODULE_5__.useHoneyStyle)();
1769
1857
  const cleanedProps = Object.fromEntries(Object.entries(props).filter(([, value]) => value !== undefined));
1770
- const resolvedDefaultProps = typeof defaultProps === 'function'
1858
+ const resolvedDefaultProps = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isFunction)(defaultProps)
1771
1859
  ? defaultProps({ theme, as, className, ...cleanedProps })
1772
1860
  : (defaultProps ?? {});
1773
1861
  const context = {
@@ -1781,7 +1869,7 @@ const styled = (target, defaultProps) => {
1781
1869
  const baseCss = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.processCss)(rawCss, `.${baseClassName}`);
1782
1870
  return (0,_mount_style__WEBPACK_IMPORTED_MODULE_4__.mountStyle)(baseClassName, baseCss, __compositionDepth);
1783
1871
  }, [baseClassName]);
1784
- const cssPropRaw = typeof cssProp === 'function' ? cssProp(context) : cssProp;
1872
+ const cssPropRaw = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isFunction)(cssProp) ? cssProp(context) : cssProp;
1785
1873
  const cssPropString = evaluateDynamicCss(cssPropRaw, context);
1786
1874
  const cssPropClassName = cssPropString ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.resolveClassName)(cssPropString) : '';
1787
1875
  (0,react__WEBPACK_IMPORTED_MODULE_0__.useInsertionEffect)(() => {
@@ -1796,8 +1884,10 @@ const styled = (target, defaultProps) => {
1796
1884
  className: (0,_utils__WEBPACK_IMPORTED_MODULE_2__.combineClassNames)([componentId, baseClassName, className, cssPropClassName]),
1797
1885
  };
1798
1886
  const finalComponent = as || target;
1799
- if (typeof target === 'string') {
1800
- const filteredProps = typeof finalComponent === 'string' ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.filterNonHtmlAttrs)(mergedProps) : mergedProps;
1887
+ if ((0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(target)) {
1888
+ const filteredProps = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(finalComponent)
1889
+ ? (0,_utils__WEBPACK_IMPORTED_MODULE_2__.filterNonHtmlAttrs)(mergedProps)
1890
+ : mergedProps;
1801
1891
  return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(finalComponent, filteredProps);
1802
1892
  }
1803
1893
  return (0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(target, {
@@ -1810,7 +1900,9 @@ const styled = (target, defaultProps) => {
1810
1900
  };
1811
1901
  StyledComponent[_constants__WEBPACK_IMPORTED_MODULE_1__.HONEY_STYLED_COMPONENT_ID_PROP] = componentId;
1812
1902
  if (_constants__WEBPACK_IMPORTED_MODULE_1__.__DEV__) {
1813
- const componentName = typeof target === 'string' ? target : target.displayName || target.name || 'Component';
1903
+ const componentName = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.isString)(target)
1904
+ ? target
1905
+ : target.displayName || target.name || 'Component';
1814
1906
  StyledComponent.displayName = `HoneyStyledComponent(${componentName})`;
1815
1907
  }
1816
1908
  return StyledComponent;
@@ -1872,7 +1964,10 @@ __webpack_require__.r(__webpack_exports__);
1872
1964
  /* harmony export */ combineClassNames: () => (/* binding */ combineClassNames),
1873
1965
  /* harmony export */ filterNonHtmlAttrs: () => (/* binding */ filterNonHtmlAttrs),
1874
1966
  /* harmony export */ generateId: () => (/* binding */ generateId),
1875
- /* harmony export */ hashString: () => (/* binding */ hashString),
1967
+ /* harmony export */ isFunction: () => (/* binding */ isFunction),
1968
+ /* harmony export */ isNil: () => (/* binding */ isNil),
1969
+ /* harmony export */ isObject: () => (/* binding */ isObject),
1970
+ /* harmony export */ isString: () => (/* binding */ isString),
1876
1971
  /* harmony export */ isStyledComponent: () => (/* binding */ isStyledComponent),
1877
1972
  /* harmony export */ processCss: () => (/* binding */ processCss),
1878
1973
  /* harmony export */ resolveClassName: () => (/* binding */ resolveClassName),
@@ -1890,6 +1985,41 @@ function assert(condition, message) {
1890
1985
  }
1891
1986
  const generateId = (prefix) => `${prefix}-${Math.random().toString(36).slice(2, 8)}`;
1892
1987
  const toKebabCase = (str) => str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
1988
+ const isString = (value) => typeof value === 'string';
1989
+ const isObject = (value) => typeof value === 'object';
1990
+ const isFunction = (value) => typeof value === 'function';
1991
+ /**
1992
+ * Checks if a value is null or undefined.
1993
+ *
1994
+ * @param value - The value to check.
1995
+ *
1996
+ * @returns `true` if the value is `null` or `undefined`, otherwise `false`.
1997
+ */
1998
+ const isNil = (value) => value === undefined || value === null;
1999
+ /**
2000
+ * Generates a short, consistent hash string from an input string using a DJB2-inspired algorithm.
2001
+ *
2002
+ * This function uses a variation of the DJB2 algorithm, which is a simple yet effective hashing algorithm
2003
+ * based on bitwise XOR (`^`) and multiplication by 33. It produces a non-negative 32-bit integer,
2004
+ * which is then converted to a base-36 string (digits + lowercase letters) to produce a compact output.
2005
+ *
2006
+ * Useful for:
2007
+ * - Generating stable class names in CSS-in-JS libraries.
2008
+ * - Producing consistent cache keys.
2009
+ * - Quick and lightweight hashing needs where cryptographic security is not required.
2010
+ *
2011
+ * ⚠️ This is not cryptographically secure and should not be used for hashing passwords or sensitive data.
2012
+ *
2013
+ * @param str - The input string to hash.
2014
+ *
2015
+ * @returns A short, base-36 encoded hash string.
2016
+ *
2017
+ * @example
2018
+ * ```ts
2019
+ * const className = hashString('background-color: red;');
2020
+ * // → 'e4k1z0x'
2021
+ * ```
2022
+ */
1893
2023
  const hashString = (str) => {
1894
2024
  let hash = 5381;
1895
2025
  for (let i = 0; i < str.length; i++) {
@@ -2032,6 +2162,7 @@ __webpack_require__.r(__webpack_exports__);
2032
2162
  /* harmony export */ __DEV__: () => (/* reexport safe */ _constants__WEBPACK_IMPORTED_MODULE_0__.__DEV__),
2033
2163
  /* harmony export */ createGlobalStyle: () => (/* reexport safe */ _global_style__WEBPACK_IMPORTED_MODULE_6__.createGlobalStyle),
2034
2164
  /* harmony export */ css: () => (/* reexport safe */ _css__WEBPACK_IMPORTED_MODULE_5__.css),
2165
+ /* harmony export */ mediaQuery: () => (/* reexport safe */ _at_rules__WEBPACK_IMPORTED_MODULE_8__.mediaQuery),
2035
2166
  /* harmony export */ styled: () => (/* reexport safe */ _styled__WEBPACK_IMPORTED_MODULE_7__.styled),
2036
2167
  /* harmony export */ useHoneyStyle: () => (/* reexport safe */ _hooks__WEBPACK_IMPORTED_MODULE_3__.useHoneyStyle)
2037
2168
  /* harmony export */ });
@@ -2043,6 +2174,8 @@ __webpack_require__.r(__webpack_exports__);
2043
2174
  /* harmony import */ var _css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./css */ "./src/css.ts");
2044
2175
  /* harmony import */ var _global_style__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./global-style */ "./src/global-style.ts");
2045
2176
  /* harmony import */ var _styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./styled */ "./src/styled.ts");
2177
+ /* harmony import */ var _at_rules__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./at-rules */ "./src/at-rules/index.ts");
2178
+
2046
2179
 
2047
2180
 
2048
2181