blixify-ui-web 0.4.229 → 0.4.231

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 (6) hide show
  1. package/lib/components/action/slider/index.d.ts +21 -3
  2. package/lib/components/action/slider/index.d.ts.map +1 -1
  3. package/lib/components/action/slider/index.js +69 -2
  4. package/lib/components/action/slider/index.js.map +1 -1
  5. package/lib/tail.css +125 -35
  6. package/package.json +1 -1
package/lib/components/action/slider/index.d.ts CHANGED
@@ -1,15 +1,33 @@
1
1
  import React, { Component } from "react";
2
2
  import "../../../index.css";
3
- interface Props {
4
- value: string;
3
+ interface BaseProps {
5
4
  step?: string;
6
5
  minValue?: string;
7
6
  maxValue?: string;
8
7
  className?: string;
8
+ }
9
+ interface SingleValueProps extends BaseProps {
10
+ type?: "single";
11
+ value: string;
9
12
  onChangeValue: (value: string) => void;
10
13
  }
11
- export declare class Slider extends Component<Props> {
14
+ interface RangeProps extends BaseProps {
15
+ type: "range";
16
+ min: string;
17
+ max: string;
18
+ onChangeValue: (min: string, max: string) => void;
19
+ }
20
+ type Props = SingleValueProps | RangeProps;
21
+ interface State {
22
+ rangeError: string | null;
23
+ }
24
+ export declare class Slider extends Component<Props, State> {
25
+ state: State;
26
+ private getBounds;
27
+ private clampRange;
28
+ componentDidMount(): void;
12
29
  handleOnChange: (value: string) => void;
30
+ handleRangeChange: (type: "min" | "max", value: string) => void;
13
31
  render(): React.JSX.Element;
14
32
  }
15
33
  export {};
package/lib/components/action/slider/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/action/slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAE5B,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,qBAAa,MAAO,SAAQ,SAAS,CAAC,KAAK,CAAC;IAC1C,cAAc,UAAW,MAAM,UAE7B;IAEF,MAAM;CAeP"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/action/slider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAI5B,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,gBAAiB,SAAQ,SAAS;IAC1C,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,UAAU,UAAW,SAAQ,SAAS;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACnD;AAED,KAAK,KAAK,GAAG,gBAAgB,GAAG,UAAU,CAAC;AAE3C,UAAU,KAAK;IACb,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAED,qBAAa,MAAO,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACjD,KAAK,EAAE,KAAK,CAAwB;IAEpC,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,UAAU;IAWlB,iBAAiB;IAajB,cAAc,UAAW,MAAM,UAI7B;IAEF,iBAAiB,SAAU,KAAK,GAAG,KAAK,SAAS,MAAM,UAarD;IAEF,MAAM;CAuEP"}
package/lib/components/action/slider/index.js CHANGED
@@ -41,22 +41,89 @@ Object.defineProperty(exports, "__esModule", { value: true });
41
41
  exports.Slider = void 0;
42
42
  var react_1 = __importStar(require("react"));
43
43
  require("../../../index.css");
44
+ var RANGE_ERROR_MSG = "Min and max were adjusted to maintain minimum gap.";
44
45
  var Slider = /** @class */ (function (_super) {
45
46
  __extends(Slider, _super);
46
47
  function Slider() {
47
48
  var _this = _super !== null && _super.apply(this, arguments) || this;
49
+ _this.state = { rangeError: null };
48
50
  _this.handleOnChange = function (value) {
49
- if (value)
51
+ if (value && _this.props.type !== "range") {
50
52
  _this.props.onChangeValue(value);
53
+ }
54
+ };
55
+ _this.handleRangeChange = function (type, value) {
56
+ if (_this.props.type !== "range" || !value)
57
+ return;
58
+ var num = parseFloat(value);
59
+ if (Number.isNaN(num))
60
+ return;
61
+ _this.setState({ rangeError: null });
62
+ var _a = _this.getBounds(), minBound = _a.minBound, maxBound = _a.maxBound;
63
+ var currentMin = parseFloat(_this.props.min) || minBound;
64
+ var currentMax = parseFloat(_this.props.max) || maxBound;
65
+ var _b = type === "min"
66
+ ? _this.clampRange(num, currentMax)
67
+ : _this.clampRange(currentMin, num), clampedMin = _b.clampedMin, clampedMax = _b.clampedMax;
68
+ _this.props.onChangeValue(String(clampedMin), String(clampedMax));
51
69
  };
52
70
  return _this;
53
71
  }
72
+ Slider.prototype.getBounds = function () {
73
+ var minBound = this.props.minValue ? parseFloat(this.props.minValue) : 0;
74
+ var maxBound = this.props.maxValue ? parseFloat(this.props.maxValue) : 100;
75
+ var step = this.props.step ? parseFloat(this.props.step) : 1;
76
+ var minGap = step > 0 ? step : 1;
77
+ return { minBound: minBound, maxBound: maxBound, step: step, minGap: minGap };
78
+ };
79
+ Slider.prototype.clampRange = function (min, max) {
80
+ var _a = this.getBounds(), minBound = _a.minBound, maxBound = _a.maxBound, minGap = _a.minGap;
81
+ var minNum = Math.max(min, minBound);
82
+ var maxNum = Math.min(max, maxBound);
83
+ var clampedMin = Math.min(minNum, maxNum - minGap);
84
+ var clampedMax = Math.max(maxNum, minNum + minGap);
85
+ clampedMin = Math.max(clampedMin, minBound);
86
+ clampedMax = Math.min(clampedMax, maxBound);
87
+ return { clampedMin: clampedMin, clampedMax: clampedMax };
88
+ };
89
+ Slider.prototype.componentDidMount = function () {
90
+ if (this.props.type === "range") {
91
+ var _a = this.getBounds(), minBound = _a.minBound, maxBound = _a.maxBound, minGap = _a.minGap;
92
+ var minNum = parseFloat(this.props.min) || minBound;
93
+ var maxNum = parseFloat(this.props.max) || maxBound;
94
+ if (maxNum - minNum < minGap) {
95
+ this.setState({ rangeError: RANGE_ERROR_MSG });
96
+ var _b = this.clampRange(minNum, maxNum), clampedMin = _b.clampedMin, clampedMax = _b.clampedMax;
97
+ this.props.onChangeValue(String(clampedMin), String(clampedMax));
98
+ }
99
+ }
100
+ };
54
101
  Slider.prototype.render = function () {
55
102
  var _this = this;
56
103
  var defaultClassName = "h-1 w-full cursor-pointer accent-primary-500";
57
104
  if (this.props.className)
58
105
  defaultClassName += " ".concat(this.props.className);
59
- return (react_1.default.createElement("input", { type: "range", value: this.props.value, step: this.props.step, min: this.props.minValue, max: this.props.maxValue, className: defaultClassName, onChange: function (e) { return _this.handleOnChange(e.target.value); } }));
106
+ var minBound = this.props.minValue ? parseFloat(this.props.minValue) : 0;
107
+ var maxBound = this.props.maxValue ? parseFloat(this.props.maxValue) : 100;
108
+ // Single value mode (default)
109
+ if (this.props.type !== "range") {
110
+ return (react_1.default.createElement("input", { type: "range", value: this.props.value, step: this.props.step, min: this.props.minValue, max: this.props.maxValue, className: defaultClassName, onChange: function (e) { return _this.handleOnChange(e.target.value); } }));
111
+ }
112
+ // Range mode - use clampRange for display values
113
+ var _a = this.clampRange(parseFloat(this.props.min) || minBound, parseFloat(this.props.max) || maxBound), clampedMin = _a.clampedMin, clampedMax = _a.clampedMax;
114
+ var range = maxBound - minBound || 1;
115
+ var minPercent = ((clampedMin - minBound) / range) * 100;
116
+ var maxPercent = ((clampedMax - minBound) / range) * 100;
117
+ return (react_1.default.createElement("div", null,
118
+ react_1.default.createElement("div", { className: "relative w-full rangeContainer" },
119
+ react_1.default.createElement("div", { className: "absolute top-1/2 left-0 w-full h-1 bg-gray-300 rounded-full transform -translate-y-1/2" }),
120
+ react_1.default.createElement("div", { className: "absolute top-1/2 h-1 bg-primary-500 rounded-full transform -translate-y-1/2", style: {
121
+ left: "".concat(minPercent, "%"),
122
+ width: "".concat(maxPercent - minPercent, "%"),
123
+ } }),
124
+ react_1.default.createElement("input", { type: "range", value: clampedMin, step: this.props.step, min: minBound, max: maxBound, className: "rangeInput rangeInputMin", onChange: function (e) { return _this.handleRangeChange("min", e.target.value); } }),
125
+ react_1.default.createElement("input", { type: "range", value: clampedMax, step: this.props.step, min: minBound, max: maxBound, className: "rangeInput rangeInputMax", onChange: function (e) { return _this.handleRangeChange("max", e.target.value); } })),
126
+ this.state.rangeError && (react_1.default.createElement("span", { className: "text-red-500 text-sm mt-1 block" }, this.state.rangeError))));
60
127
  };
61
128
  return Slider;
62
129
  }(react_1.Component));
package/lib/components/action/slider/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/action/slider/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAyC;AACzC,8BAA4B;AAW5B;IAA4B,0BAAgB;IAA5C;;QACE,oBAAc,GAAG,UAAC,KAAa;YAC7B,IAAI,KAAK;gBAAE,KAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC,CAAC;;IAiBJ,CAAC;IAfC,uBAAM,GAAN;QAAA,iBAcC;QAbC,IAAI,gBAAgB,GAAG,8CAA8C,CAAC;QACtE,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS;YAAE,gBAAgB,IAAI,WAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAE,CAAC;QACzE,OAAO,CACL,yCACE,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EACrB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EACxB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,KAAI,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAnC,CAAmC,GACpD,CACH,CAAC;IACJ,CAAC;IACH,aAAC;AAAD,CAAC,AApBD,CAA4B,iBAAS,GAoBpC;AApBY,wBAAM"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/action/slider/index.tsx"],"names":[],"mappings":"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"}
package/lib/tail.css CHANGED
@@ -18,56 +18,56 @@ textarea[disabled] {
18
18
  /* Radio button styling for all screen sizes when using appearance-none */
19
19
  input[type="radio"].appearance-none,
20
20
  input[type="radio"][class*="appearance-none"] {
21
- -webkit-appearance: none;
22
- -moz-appearance: none;
23
- appearance: none;
24
- width: 1rem !important;
25
- height: 1rem !important;
26
- min-width: 1rem !important;
27
- min-height: 1rem !important;
28
- border: 2px solid #d1d5db !important;
29
- border-radius: 50% !important;
30
- background-color: white !important;
31
- position: relative !important;
32
- cursor: pointer;
33
- flex-shrink: 0;
34
- }
21
+ -webkit-appearance: none;
22
+ -moz-appearance: none;
23
+ appearance: none;
24
+ width: 1rem !important;
25
+ height: 1rem !important;
26
+ min-width: 1rem !important;
27
+ min-height: 1rem !important;
28
+ border: 2px solid #d1d5db !important;
29
+ border-radius: 50% !important;
30
+ background-color: white !important;
31
+ position: relative !important;
32
+ cursor: pointer;
33
+ flex-shrink: 0;
34
+ }
35
35
 
36
36
  input[type="radio"].appearance-none:checked,
37
37
  input[type="radio"][class*="appearance-none"]:checked {
38
- border-color: theme("colors.primary.600") !important;
39
- background-color: white !important;
40
- }
38
+ border-color: theme("colors.primary.600") !important;
39
+ background-color: white !important;
40
+ }
41
41
 
42
42
  input[type="radio"].appearance-none:checked::after,
43
43
  input[type="radio"][class*="appearance-none"]:checked::after {
44
- content: "" !important;
45
- position: absolute !important;
46
- top: 50% !important;
47
- left: 50% !important;
48
- transform: translate(-50%, -50%) !important;
49
- width: 0.5rem !important;
50
- height: 0.5rem !important;
51
- border-radius: 50% !important;
52
- background-color: theme("colors.primary.600") !important;
53
- display: block !important;
54
- }
44
+ content: "" !important;
45
+ position: absolute !important;
46
+ top: 50% !important;
47
+ left: 50% !important;
48
+ transform: translate(-50%, -50%) !important;
49
+ width: 0.5rem !important;
50
+ height: 0.5rem !important;
51
+ border-radius: 50% !important;
52
+ background-color: theme("colors.primary.600") !important;
53
+ display: block !important;
54
+ }
55
55
 
56
56
  input[type="radio"].appearance-none:focus,
57
57
  input[type="radio"][class*="appearance-none"]:focus {
58
- outline: 2px solid theme("colors.primary.600") !important;
59
- outline-offset: 2px !important;
60
- }
58
+ outline: 2px solid theme("colors.primary.600") !important;
59
+ outline-offset: 2px !important;
60
+ }
61
61
 
62
62
  input[type="radio"].appearance-none:disabled,
63
63
  input[type="radio"][class*="appearance-none"]:disabled {
64
- opacity: 0.5;
65
- cursor: not-allowed;
66
- }
64
+ opacity: 0.5;
65
+ cursor: not-allowed;
66
+ }
67
67
 
68
68
  input[type="radio"].appearance-none:disabled:checked::after,
69
69
  input[type="radio"][class*="appearance-none"]:disabled:checked::after {
70
- background-color: #9ca3af !important;
70
+ background-color: #9ca3af !important;
71
71
  }
72
72
 
73
73
  .PhoneInputInput {
@@ -2469,3 +2469,93 @@ body[data-color-mode*="light"] {
2469
2469
  .prose table p {
2470
2470
  margin: 0;
2471
2471
  }
2472
+
2473
+ /* Range slider constants and container */
2474
+ .rangeContainer {
2475
+ --slider-range-height: 20px;
2476
+ --slider-thumb-size: 16px;
2477
+ --slider-z-index-min: 10;
2478
+ --slider-z-index-max: 20;
2479
+
2480
+ position: relative;
2481
+ width: 100%;
2482
+ height: var(--slider-range-height);
2483
+ padding: 8px 0;
2484
+ }
2485
+
2486
+ .rangeInput {
2487
+ position: absolute;
2488
+ width: 100%;
2489
+ height: var(--slider-range-height);
2490
+ background: transparent;
2491
+ -webkit-appearance: none;
2492
+ appearance: none;
2493
+ }
2494
+
2495
+ .rangeInputMin {
2496
+ z-index: var(--slider-z-index-min);
2497
+ }
2498
+
2499
+ .rangeInputMax {
2500
+ z-index: var(--slider-z-index-max);
2501
+ }
2502
+
2503
+ /* Range input - track hidden, only thumbs interactive */
2504
+ .rangeContainer .rangeInput {
2505
+ cursor: pointer;
2506
+ pointer-events: none;
2507
+ }
2508
+
2509
+ .rangeContainer .rangeInput::-webkit-slider-thumb {
2510
+ pointer-events: auto;
2511
+ }
2512
+
2513
+ .rangeContainer .rangeInput::-moz-range-thumb {
2514
+ pointer-events: auto;
2515
+ }
2516
+
2517
+ .rangeContainer .rangeInput::-webkit-slider-track {
2518
+ background: transparent;
2519
+ height: 4px;
2520
+ }
2521
+
2522
+ .rangeContainer .rangeInput::-moz-range-track {
2523
+ background: transparent;
2524
+ height: 4px;
2525
+ }
2526
+
2527
+ /* Thumb styling */
2528
+ .rangeContainer .rangeInput::-webkit-slider-thumb {
2529
+ -webkit-appearance: none;
2530
+ appearance: none;
2531
+ background-color: rgb(99, 102, 241);
2532
+ height: var(--slider-thumb-size);
2533
+ width: var(--slider-thumb-size);
2534
+ border-radius: 50%;
2535
+ border: 2px solid white;
2536
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
2537
+ margin-top: calc((4px - var(--slider-thumb-size)) / 2);
2538
+ cursor: pointer;
2539
+ }
2540
+
2541
+ .rangeContainer .rangeInput::-moz-range-thumb {
2542
+ background-color: rgb(99, 102, 241);
2543
+ height: var(--slider-thumb-size);
2544
+ width: var(--slider-thumb-size);
2545
+ border-radius: 50%;
2546
+ border: 2px solid white;
2547
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
2548
+ cursor: pointer;
2549
+ }
2550
+
2551
+ .rangeContainer .rangeInput:focus {
2552
+ outline: none;
2553
+ }
2554
+
2555
+ .rangeContainer .rangeInput:focus::-webkit-slider-thumb {
2556
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
2557
+ }
2558
+
2559
+ .rangeContainer .rangeInput:focus::-moz-range-thumb {
2560
+ box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
2561
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "blixify-ui-web",
3
- "version": "0.4.229",
3
+ "version": "0.4.231",
4
4
  "license": "MIT",
5
5
  "main": "lib/index.js",
6
6
  "private": false,