@luminescent/ui 0.19.0 → 0.19.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/index.qwik.cjs +48 -39
  2. package/lib/index.qwik.mjs +48 -39
  3. package/package.json +1 -1
package/lib/index.qwik.cjs CHANGED
@@ -295,26 +295,26 @@ const mobileSizeClasses = {
295
295
  xs: {
296
296
  base: "text-sm gap-1",
297
297
  round: "rounded-md",
298
- pad: "px-2 py-1",
299
- equal: "p-1"
298
+ pad: "px-2.5 py-1.5",
299
+ equal: "p-1.5"
300
300
  },
301
301
  sm: {
302
302
  base: "text-sm gap-2",
303
- round: "rounded-md",
304
- pad: "px-2.5 py-1.5",
305
- equal: "p-1.5"
303
+ round: "rounded-lg",
304
+ pad: "px-3 py-2",
305
+ equal: "p-2"
306
306
  },
307
307
  md: {
308
308
  base: "text-base gap-3",
309
- round: "rounded-md",
309
+ round: "rounded-lg",
310
310
  pad: "px-4 py-2",
311
311
  equal: "p-2"
312
312
  },
313
313
  lg: {
314
314
  base: "text-lg gap-3",
315
- round: "rounded-lg",
316
- pad: "px-6 py-3",
317
- equal: "p-3"
315
+ round: "rounded-xl",
316
+ pad: "px-7 py-4",
317
+ equal: "p-4"
318
318
  },
319
319
  xl: {
320
320
  base: "text-lg gap-4",
@@ -391,6 +391,7 @@ const ButtonAnchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
391
391
  "color",
392
392
  "transparent",
393
393
  "size",
394
+ "mobilesize",
394
395
  "round",
395
396
  "square"
396
397
  ]);
@@ -399,10 +400,14 @@ const ButtonAnchor = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inli
399
400
  [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
400
401
  "border-transparent": props.transparent,
401
402
  [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
403
+ [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].base]: true,
402
404
  [sizeClasses[props.size ?? "md"].base]: true,
405
+ [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].round]: !props.round,
403
406
  [sizeClasses[props.size ?? "md"].round]: !props.round,
404
407
  "rounded-full": props.round,
408
+ [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].pad]: !props.square,
405
409
  [sizeClasses[props.size ?? "md"].pad]: !props.square,
410
+ [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].equal]: props.square,
406
411
  [sizeClasses[props.size ?? "md"].equal]: props.square,
407
412
  ...props1.class
408
413
  };
@@ -840,7 +845,8 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
840
845
  });
841
846
  const setColor = /* @__PURE__ */ qwik.inlinedQrl((color) => {
842
847
  const [maxHue2, props2, store2, width2] = qwik.useLexicalScope();
843
- if (!color.match(/^#[0-9A-F]{6}$/i)) return;
848
+ if (!color.match(/^#[0-9A-F]{6}$/i))
849
+ return;
844
850
  const number = hexStringToNumber(color);
845
851
  const hsv = rgbToHsv(hexNumberToRgb(number));
846
852
  store2.hue.position = hsv.h * maxHue2;
@@ -946,7 +952,8 @@ const ColorPicker = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlin
946
952
  ], "p0.id"),
947
953
  onInput$: /* @__PURE__ */ qwik.inlinedQrl((e, el) => {
948
954
  const [setColor2] = qwik.useLexicalScope();
949
- if (!el.dataset.value) return;
955
+ if (!el.dataset.value)
956
+ return;
950
957
  setColor2(el.dataset.value);
951
958
  }, "ColorPicker_component_div_onInput_61AfRqNB51A", [
952
959
  setColor
@@ -1467,35 +1474,37 @@ const Header = /* @__PURE__ */ qwik.componentQrl(/* @__PURE__ */ qwik.inlinedQrl
1467
1474
  }, 3, "dL_2"), 1, "dL_3")
1468
1475
  ], 1, null)
1469
1476
  }, 1, "dL_4");
1470
- if (props.subheader) Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
1471
- class: "flex flex-col gap-1"
1472
- }, [
1473
- Component,
1474
- /* @__PURE__ */ qwik._jsxQ("h3", null, {
1475
- class: "flex items-center text-gray-400 text-sm"
1476
- }, qwik._fnSignal((p0) => p0.subheader, [
1477
- props
1478
- ], "p0.subheader"), 3, null)
1479
- ], 1, "dL_5");
1480
- if (props.loading !== void 0) Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
1481
- class: "flex"
1482
- }, [
1483
- Component,
1484
- /* @__PURE__ */ qwik._jsxQ("div", null, {
1485
- class: qwik._fnSignal((p0) => ({
1486
- "motion-safe:transition-all duration-200": true,
1487
- "opacity-0": !p0.loading,
1488
- "opacity-100": p0.loading
1489
- }), [
1477
+ if (props.subheader)
1478
+ Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
1479
+ class: "flex flex-col gap-1"
1480
+ }, [
1481
+ Component,
1482
+ /* @__PURE__ */ qwik._jsxQ("h3", null, {
1483
+ class: "flex items-center text-gray-400 text-sm"
1484
+ }, qwik._fnSignal((p0) => p0.subheader, [
1490
1485
  props
1491
- ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
1492
- }, /* @__PURE__ */ qwik._jsxC(LoadingIcon, {
1493
- width: 24,
1494
- [qwik._IMMUTABLE]: {
1495
- width: qwik._IMMUTABLE
1496
- }
1497
- }, 3, "dL_6"), 1, null)
1498
- ], 1, "dL_7");
1486
+ ], "p0.subheader"), 3, null)
1487
+ ], 1, "dL_5");
1488
+ if (props.loading !== void 0)
1489
+ Component = /* @__PURE__ */ qwik._jsxQ("div", null, {
1490
+ class: "flex"
1491
+ }, [
1492
+ Component,
1493
+ /* @__PURE__ */ qwik._jsxQ("div", null, {
1494
+ class: qwik._fnSignal((p0) => ({
1495
+ "motion-safe:transition-all duration-200": true,
1496
+ "opacity-0": !p0.loading,
1497
+ "opacity-100": p0.loading
1498
+ }), [
1499
+ props
1500
+ ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
1501
+ }, /* @__PURE__ */ qwik._jsxC(LoadingIcon, {
1502
+ width: 24,
1503
+ [qwik._IMMUTABLE]: {
1504
+ width: qwik._IMMUTABLE
1505
+ }
1506
+ }, 3, "dL_6"), 1, null)
1507
+ ], 1, "dL_7");
1499
1508
  return Component;
1500
1509
  }, "Header_component_FfGOhhBNG5k"));
1501
1510
  const navColorClasses = {
package/lib/index.qwik.mjs CHANGED
@@ -293,26 +293,26 @@ const mobileSizeClasses = {
293
293
  xs: {
294
294
  base: "text-sm gap-1",
295
295
  round: "rounded-md",
296
- pad: "px-2 py-1",
297
- equal: "p-1"
296
+ pad: "px-2.5 py-1.5",
297
+ equal: "p-1.5"
298
298
  },
299
299
  sm: {
300
300
  base: "text-sm gap-2",
301
- round: "rounded-md",
302
- pad: "px-2.5 py-1.5",
303
- equal: "p-1.5"
301
+ round: "rounded-lg",
302
+ pad: "px-3 py-2",
303
+ equal: "p-2"
304
304
  },
305
305
  md: {
306
306
  base: "text-base gap-3",
307
- round: "rounded-md",
307
+ round: "rounded-lg",
308
308
  pad: "px-4 py-2",
309
309
  equal: "p-2"
310
310
  },
311
311
  lg: {
312
312
  base: "text-lg gap-3",
313
- round: "rounded-lg",
314
- pad: "px-6 py-3",
315
- equal: "p-3"
313
+ round: "rounded-xl",
314
+ pad: "px-7 py-4",
315
+ equal: "p-4"
316
316
  },
317
317
  xl: {
318
318
  base: "text-lg gap-4",
@@ -389,6 +389,7 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
389
389
  "color",
390
390
  "transparent",
391
391
  "size",
392
+ "mobilesize",
392
393
  "round",
393
394
  "square"
394
395
  ]);
@@ -397,10 +398,14 @@ const ButtonAnchor = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pr
397
398
  [buttonColorClasses[props.color ?? "darkgray"].bg]: !props.transparent,
398
399
  "border-transparent": props.transparent,
399
400
  [buttonColorClasses[props.color ?? "darkgray"].hover]: true,
401
+ [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].base]: true,
400
402
  [sizeClasses[props.size ?? "md"].base]: true,
403
+ [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].round]: !props.round,
401
404
  [sizeClasses[props.size ?? "md"].round]: !props.round,
402
405
  "rounded-full": props.round,
406
+ [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].pad]: !props.square,
403
407
  [sizeClasses[props.size ?? "md"].pad]: !props.square,
408
+ [mobileSizeClasses[props.mobilesize ? props.mobilesize : (props.size ?? "md") == "xs" ? "xs" : (props.size ?? "md") == "sm" ? "xs" : (props.size ?? "md") == "md" ? "sm" : (props.size ?? "md") == "lg" ? "md" : (props.size ?? "md") == "xl" ? "lg" : "md"].equal]: props.square,
404
409
  [sizeClasses[props.size ?? "md"].equal]: props.square,
405
410
  ...props1.class
406
411
  };
@@ -838,7 +843,8 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
838
843
  });
839
844
  const setColor = /* @__PURE__ */ inlinedQrl((color) => {
840
845
  const [maxHue2, props2, store2, width2] = useLexicalScope();
841
- if (!color.match(/^#[0-9A-F]{6}$/i)) return;
846
+ if (!color.match(/^#[0-9A-F]{6}$/i))
847
+ return;
842
848
  const number = hexStringToNumber(color);
843
849
  const hsv = rgbToHsv(hexNumberToRgb(number));
844
850
  store2.hue.position = hsv.h * maxHue2;
@@ -944,7 +950,8 @@ const ColorPicker = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((pro
944
950
  ], "p0.id"),
945
951
  onInput$: /* @__PURE__ */ inlinedQrl((e, el) => {
946
952
  const [setColor2] = useLexicalScope();
947
- if (!el.dataset.value) return;
953
+ if (!el.dataset.value)
954
+ return;
948
955
  setColor2(el.dataset.value);
949
956
  }, "ColorPicker_component_div_onInput_61AfRqNB51A", [
950
957
  setColor
@@ -1465,35 +1472,37 @@ const Header = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) =
1465
1472
  }, 3, "dL_2"), 1, "dL_3")
1466
1473
  ], 1, null)
1467
1474
  }, 1, "dL_4");
1468
- if (props.subheader) Component = /* @__PURE__ */ _jsxQ("div", null, {
1469
- class: "flex flex-col gap-1"
1470
- }, [
1471
- Component,
1472
- /* @__PURE__ */ _jsxQ("h3", null, {
1473
- class: "flex items-center text-gray-400 text-sm"
1474
- }, _fnSignal((p0) => p0.subheader, [
1475
- props
1476
- ], "p0.subheader"), 3, null)
1477
- ], 1, "dL_5");
1478
- if (props.loading !== void 0) Component = /* @__PURE__ */ _jsxQ("div", null, {
1479
- class: "flex"
1480
- }, [
1481
- Component,
1482
- /* @__PURE__ */ _jsxQ("div", null, {
1483
- class: _fnSignal((p0) => ({
1484
- "motion-safe:transition-all duration-200": true,
1485
- "opacity-0": !p0.loading,
1486
- "opacity-100": p0.loading
1487
- }), [
1475
+ if (props.subheader)
1476
+ Component = /* @__PURE__ */ _jsxQ("div", null, {
1477
+ class: "flex flex-col gap-1"
1478
+ }, [
1479
+ Component,
1480
+ /* @__PURE__ */ _jsxQ("h3", null, {
1481
+ class: "flex items-center text-gray-400 text-sm"
1482
+ }, _fnSignal((p0) => p0.subheader, [
1488
1483
  props
1489
- ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
1490
- }, /* @__PURE__ */ _jsxC(LoadingIcon, {
1491
- width: 24,
1492
- [_IMMUTABLE]: {
1493
- width: _IMMUTABLE
1494
- }
1495
- }, 3, "dL_6"), 1, null)
1496
- ], 1, "dL_7");
1484
+ ], "p0.subheader"), 3, null)
1485
+ ], 1, "dL_5");
1486
+ if (props.loading !== void 0)
1487
+ Component = /* @__PURE__ */ _jsxQ("div", null, {
1488
+ class: "flex"
1489
+ }, [
1490
+ Component,
1491
+ /* @__PURE__ */ _jsxQ("div", null, {
1492
+ class: _fnSignal((p0) => ({
1493
+ "motion-safe:transition-all duration-200": true,
1494
+ "opacity-0": !p0.loading,
1495
+ "opacity-100": p0.loading
1496
+ }), [
1497
+ props
1498
+ ], '{"motion-safe:transition-all duration-200":true,"opacity-0":!p0.loading,"opacity-100":p0.loading}')
1499
+ }, /* @__PURE__ */ _jsxC(LoadingIcon, {
1500
+ width: 24,
1501
+ [_IMMUTABLE]: {
1502
+ width: _IMMUTABLE
1503
+ }
1504
+ }, 3, "dL_6"), 1, null)
1505
+ ], 1, "dL_7");
1497
1506
  return Component;
1498
1507
  }, "Header_component_FfGOhhBNG5k"));
1499
1508
  const navColorClasses = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@luminescent/ui",
3
- "version": "0.19.0",
3
+ "version": "0.19.2",
4
4
  "description": "Luminescent UI library",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",