@homecode/ui 5.1.11 → 5.1.14

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.
package/dist/esm/index.js CHANGED
@@ -40,6 +40,7 @@ export { RequiredStar } from './src/components/RequiredStar/RequiredStar.js';
40
40
  export { Select, SelectHelpers } from './src/components/Select/Select.js';
41
41
  export { Select2 } from './src/components/Select/Select2.js';
42
42
  export { Scroll } from './src/components/Scroll/Scroll.js';
43
+ export { Slider } from './src/components/Slider/Slider.js';
43
44
  export { Shimmer } from './src/components/Shimmer/Shimmer.js';
44
45
  export { Spinner } from './src/components/Spinner/Spinner.js';
45
46
  export { Table } from './src/components/Table/Table.js';
@@ -60,6 +60,7 @@ import '../RadioGroup/RadioGroupContext.js';
60
60
  import '../RadioButton/RadioButton.styl.js';
61
61
  import '../RadioGroup/RadioGroup.styl.js';
62
62
  import '../Router/Router.js';
63
+ import '../Slider/Slider.styl.js';
63
64
  import '../Table/Table.styl.js';
64
65
  import '../Tabs/Tabs.styl.js';
65
66
  import '../TextShimmer/TextShimmer.js';
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".Card_root__khJ4u{background-color:var(--surface-color);border-radius:var(--border-radius-l);display:flex;flex-direction:column;gap:var(--p-5);max-height:100%;position:relative}.Card_root__khJ4u.Card_blur__VbZXN{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Card_root__khJ4u.Card_padding-xs__dd13Q{border-radius:var(--p-3);padding:var(--p-2)}.Card_root__khJ4u.Card_padding-s__S7iiZ{border-radius:var(--p-4);padding:var(--p-3)}.Card_root__khJ4u.Card_padding-m__thC3O{border-radius:var(--p-6);padding:var(--p-5)}.Card_root__khJ4u.Card_padding-l__gtTEF{border-radius:var(--p-8);padding:var(--p-8)}.Card_root__khJ4u.Card_padding-xl__y01o1{border-radius:var(--p-11);padding:var(--p-10)}.Card_header__LDTGV{align-items:flex-start;display:flex;gap:var(--p-5);justify-content:space-between}.Card_header__LDTGV:has([data-slot=card-action]){grid-template-columns:1fr auto}.Card_icon__aRlE5{align-items:center;border-radius:calc(var(--border-radius-m) + 2px);box-shadow:inset 0 0 0 1px var(--decent-color-alpha-200);display:flex;flex-shrink:0;height:48px;justify-content:center;width:48px}.Card_icon__aRlE5.Card_withBackground__lIrjx{background-color:var(--accent-color-alpha-100);box-shadow:none}.Card_icon__aRlE5>img,.Card_icon__aRlE5>svg{height:20px;width:20px}.Card_headerText__hawuL{flex-grow:1;overflow:hidden}.Card_scroll__uDcXL{max-height:100%;overflow:hidden;padding-right:var(--p-5);width:calc(100% + var(--p-5))}.Card_scroll__uDcXL [data-slot=card-content]{padding-right:1px}.Card_centered__0YX4F,.Card_fullHeight__i3n8e{display:flex;flex-direction:column}.Card_centered__0YX4F{align-items:center;justify-content:center}.Card_fullHeight__i3n8e{flex-grow:1}.Card_description__RTQTR,.Card_title__Z1SQz{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.Card_title__Z1SQz{font-size:120%;font-weight:500;line-height:1.35}.Card_description__RTQTR{color:var(--accent-color-alpha-500);max-width:100%;word-break:break-word}.Card_action__viIuL{grid-row-span:2;align-self:start;grid-column-start:2;grid-row-start:1;justify-self:end}.Card_footer__T0DXA{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;overflow:hidden}";
3
+ var css_248z = ".Card_root__khJ4u{background-color:var(--surface-color);border-radius:var(--border-radius-l);display:flex;flex-direction:column;gap:var(--p-5);max-height:100%;position:relative}.Card_root__khJ4u.Card_blur__VbZXN{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background-color:var(--decent-color-alpha-500)}.Card_root__khJ4u.Card_padding-xs__dd13Q{border-radius:var(--p-3);padding:var(--p-2)}.Card_root__khJ4u.Card_padding-s__S7iiZ{border-radius:var(--p-4);padding:var(--p-3)}.Card_root__khJ4u.Card_padding-m__thC3O{border-radius:var(--p-6);padding:var(--p-5)}.Card_root__khJ4u.Card_padding-l__gtTEF{border-radius:var(--p-8);padding:var(--p-8)}.Card_root__khJ4u.Card_padding-xl__y01o1{border-radius:var(--p-11);padding:var(--p-10)}.Card_header__LDTGV{align-items:flex-start;display:flex;gap:var(--p-5);justify-content:space-between}.Card_header__LDTGV:has([data-slot=card-action]){grid-template-columns:1fr auto}.Card_icon__aRlE5{align-items:center;border-radius:var(--p-2);box-shadow:inset 0 0 0 1px var(--decent-color-alpha-200);display:flex;flex-shrink:0;height:48px;justify-content:center;width:48px}.Card_icon__aRlE5.Card_withBackground__lIrjx{background-color:var(--accent-color-alpha-100);box-shadow:none}.Card_icon__aRlE5>img,.Card_icon__aRlE5>svg{height:20px;width:20px}.Card_headerText__hawuL{flex-grow:1;overflow:hidden}.Card_scroll__uDcXL{max-height:100%;overflow:hidden;padding-right:var(--p-5);width:calc(100% + var(--p-5))}.Card_scroll__uDcXL [data-slot=card-content]{padding-right:1px}.Card_centered__0YX4F,.Card_fullHeight__i3n8e{display:flex;flex-direction:column}.Card_centered__0YX4F{align-items:center;justify-content:center}.Card_fullHeight__i3n8e{flex-grow:1}.Card_description__RTQTR,.Card_title__Z1SQz{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.Card_title__Z1SQz{font-size:120%;font-weight:500;line-height:1}.Card_description__RTQTR{color:var(--accent-color-alpha-500);max-width:100%;word-break:break-word}.Card_action__viIuL{grid-row-span:2;align-self:start;grid-column-start:2;grid-row-start:1;justify-self:end}.Card_footer__T0DXA{align-items:center;display:flex;flex-shrink:0;justify-content:space-between;overflow:hidden}";
4
4
  var S = {"root":"Card_root__khJ4u","blur":"Card_blur__VbZXN","padding-xs":"Card_padding-xs__dd13Q","padding-s":"Card_padding-s__S7iiZ","padding-m":"Card_padding-m__thC3O","padding-l":"Card_padding-l__gtTEF","padding-xl":"Card_padding-xl__y01o1","header":"Card_header__LDTGV","icon":"Card_icon__aRlE5","withBackground":"Card_withBackground__lIrjx","headerText":"Card_headerText__hawuL","scroll":"Card_scroll__uDcXL","centered":"Card_centered__0YX4F","fullHeight":"Card_fullHeight__i3n8e","title":"Card_title__Z1SQz","description":"Card_description__RTQTR","action":"Card_action__viIuL","footer":"Card_footer__T0DXA"};
5
5
  styleInject(css_248z);
6
6
 
@@ -59,6 +59,7 @@ import '../RadioGroup/RadioGroupContext.js';
59
59
  import '../RadioButton/RadioButton.styl.js';
60
60
  import '../RadioGroup/RadioGroup.styl.js';
61
61
  import '../Router/Router.js';
62
+ import '../Slider/Slider.styl.js';
62
63
  import '../Table/Table.styl.js';
63
64
  import '../Tabs/Tabs.styl.js';
64
65
  import '../TextShimmer/TextShimmer.js';
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".Notifications_root__S3ujN{max-height:calc(var(--vh)*100);overflow:hidden;position:fixed;right:0;top:0;transform:translateZ(0);transition:right .3s ease-out;width:320px;z-index:20}.Notifications_inner__6v9e3{padding:var(--p-3)}.Notifications_empty__zCpOA{pointer-events:none}.Notifications_itemInner__nEYAl,.Notifications_item__I3Up4{border-radius:var(--p-4)}.Notifications_item__I3Up4{-webkit-backface-visibility:hidden;backface-visibility:hidden;left:100%;max-height:0;max-width:100%;opacity:0;position:relative;transition:all .3s ease-out;width:300px}.Notifications_item__I3Up4+.Notifications_item__I3Up4{padding-top:var(--p-2)}.Notifications_item__I3Up4:hover{transform:translateX(-2px)}.Notifications_visible__ln4-n{left:0;max-height:500px;opacity:1}.Notifications_itemInner__nEYAl{align-items:center;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--decent-color-alpha-500);box-shadow:inset 0 0 1px var(--accent-color-alpha-300),0 0 20px var(--decent-color);box-sizing:border-box;display:flex;padding:var(--p-3);padding-right:var(--p-6);position:relative;transition:.3s ease-out;transition-property:transform}.Notifications_type-warning__Nxg6C .Notifications_itemInner__nEYAl{background-color:var(--warning-color-alpha-300)}.Notifications_type-danger__zeIMt .Notifications_itemInner__nEYAl{background-color:var(--danger-color-alpha-300)}.Notifications_itemInner__nEYAl button{margin-bottom:calc(var(--p-2)*-1);margin-top:calc(var(--p-2)*-1)}.Notifications_icon__nKs-X{background:no-repeat 50%;height:24px;margin-right:10px;min-width:24px;width:24px}.Notifications_type-loading__N4EE5 .Notifications_icon__nKs-X{transform:translateY(-20px)}.Notifications_text__7QZL6{display:flex;flex-direction:column;flex-grow:1;z-index:1}.Notifications_title__Gu9bs{font-size:16px;font-weight:700}.Notifications_content__Zrvw2{font-size:12px;margin-top:calc(var(--p-3)/2)}.Notifications_content__Zrvw2:first-child{margin-top:0}.Notifications_close__-IUH3{background-color:transparent;border-radius:50%;cursor:pointer;height:40px!important;max-height:40px!important;max-width:40px!important;opacity:0;position:absolute;right:-5px;top:2px;transform:scale(.8);transition:.1s ease-out;transition-property:opacity,transform;width:40px!important}.Notifications_close__-IUH3:before{background-color:var(--decent-color-alpha-400);border-radius:inherit;bottom:var(--p-2);content:\"\";left:var(--p-2);pointer-events:none;position:absolute;right:var(--p-2);top:var(--p-2);transition:background-color .1s ease-out}.Notifications_close__-IUH3 svg{transform:scale(.6)}.Notifications_item__I3Up4:hover .Notifications_close__-IUH3{opacity:.8}.Notifications_close__-IUH3:hover{background-color:transparent;background-color:initial;opacity:1}.Notifications_close__-IUH3:hover:before{background-color:var(--decent-color-alpha-800)}@media (max-width:700px){.Notifications_item__I3Up4,.Notifications_root__S3ujN{width:100%}.Notifications_title__Gu9bs{font-size:20px}.Notifications_content__Zrvw2{font-size:16px}.Notifications_close__-IUH3{transform:scale(1.2)}}";
3
+ var css_248z = ".Notifications_root__S3ujN{max-height:calc(var(--vh)*100);overflow:hidden;position:fixed;right:0;top:0;transform:translateZ(0);transition:right .3s ease-out;width:320px;z-index:20}.Notifications_inner__6v9e3{padding:var(--p-5);padding-right:var(--p-3)}.Notifications_empty__zCpOA{pointer-events:none}.Notifications_itemInner__nEYAl,.Notifications_item__I3Up4{border-radius:var(--p-4)}.Notifications_item__I3Up4{-webkit-backface-visibility:hidden;backface-visibility:hidden;left:100%;max-height:0;max-width:100%;opacity:0;position:relative;transition:all .3s ease-out;width:300px}.Notifications_item__I3Up4:first-child{margin-top:calc(var(--p-2)*-1)}.Notifications_item__I3Up4+.Notifications_item__I3Up4{padding-top:var(--p-2)}.Notifications_item__I3Up4:hover{transform:translateX(-2px)}.Notifications_visible__ln4-n{left:0;max-height:500px;opacity:1}.Notifications_itemInner__nEYAl{align-items:center;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);background-color:var(--decent-color-alpha-500);box-shadow:inset 0 0 1px var(--accent-color-alpha-300),0 0 20px var(--decent-color);box-sizing:border-box;display:flex;padding:var(--p-3);padding-right:var(--p-6);position:relative;transition:.3s ease-out;transition-property:transform}.Notifications_type-warning__Nxg6C .Notifications_itemInner__nEYAl{background-color:var(--warning-color-alpha-300)}.Notifications_type-danger__zeIMt .Notifications_itemInner__nEYAl{background-color:var(--danger-color-alpha-300)}.Notifications_itemInner__nEYAl button{margin-bottom:calc(var(--p-2)*-1);margin-top:calc(var(--p-2)*-1)}.Notifications_icon__nKs-X{background:no-repeat 50%;height:24px;margin-right:10px;min-width:24px;width:24px}.Notifications_type-loading__N4EE5 .Notifications_icon__nKs-X{transform:translateY(-20px)}.Notifications_text__7QZL6{display:flex;flex-direction:column;flex-grow:1;z-index:1}.Notifications_title__Gu9bs{font-size:16px;font-weight:700}.Notifications_content__Zrvw2{font-size:12px;margin-top:calc(var(--p-3)/2)}.Notifications_content__Zrvw2:first-child{margin-top:0}.Notifications_close__-IUH3{background-color:transparent;border-radius:50%;cursor:pointer;height:40px!important;max-height:40px!important;max-width:40px!important;opacity:0;position:absolute;right:-5px;top:2px;transform:scale(.8);transition:.1s ease-out;transition-property:opacity,transform;width:40px!important}.Notifications_close__-IUH3:before{background-color:var(--decent-color-alpha-400);border-radius:inherit;bottom:var(--p-2);content:\"\";left:var(--p-2);pointer-events:none;position:absolute;right:var(--p-2);top:var(--p-2);transition:background-color .1s ease-out}.Notifications_close__-IUH3 svg{transform:scale(.6)}.Notifications_item__I3Up4:hover .Notifications_close__-IUH3{opacity:.8}.Notifications_close__-IUH3:hover{background-color:transparent;background-color:initial;opacity:1}.Notifications_close__-IUH3:hover:before{background-color:var(--decent-color-alpha-800)}@media (max-width:700px){.Notifications_item__I3Up4,.Notifications_root__S3ujN{width:100%}.Notifications_title__Gu9bs{font-size:20px}.Notifications_content__Zrvw2{font-size:16px}.Notifications_close__-IUH3{transform:scale(1.2)}}";
4
4
  var S = {"root":"Notifications_root__S3ujN","inner":"Notifications_inner__6v9e3","empty":"Notifications_empty__zCpOA","item":"Notifications_item__I3Up4","itemInner":"Notifications_itemInner__nEYAl","visible":"Notifications_visible__ln4-n","type-warning":"Notifications_type-warning__Nxg6C","type-danger":"Notifications_type-danger__zeIMt","icon":"Notifications_icon__nKs-X","type-loading":"Notifications_type-loading__N4EE5","text":"Notifications_text__7QZL6","title":"Notifications_title__Gu9bs","content":"Notifications_content__Zrvw2","close":"Notifications_close__-IUH3"};
5
5
  styleInject(css_248z);
6
6
 
@@ -0,0 +1,44 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import cn from 'classnames';
3
+ import { useRef, useState, useCallback } from 'react';
4
+ import { Tooltip } from '../Tooltip/Tooltip.js';
5
+ import S from './Slider.styl.js';
6
+
7
+ const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
8
+ const valueToPct = (value, min, max) => {
9
+ const range = max - min;
10
+ return range > 0 ? `${((value - min) / range) * 100}%` : '0%';
11
+ };
12
+ function Slider({ className, label, value, min = 0, max = 100, step, size = 'm', disabled = false, showGhost = false, markers, markerClassName, onMarkerClick, onChange, onInput, ...inputProps }) {
13
+ const trackWrapRef = useRef(null);
14
+ const [ghostRatio, setGhostRatio] = useState(null);
15
+ const progressPct = valueToPct(value, min, max);
16
+ const updateGhostFromPointer = useCallback((clientX) => {
17
+ if (disabled || !showGhost)
18
+ return;
19
+ const wrap = trackWrapRef.current;
20
+ if (!wrap)
21
+ return;
22
+ const { left, width } = wrap.getBoundingClientRect();
23
+ if (width <= 0)
24
+ return;
25
+ setGhostRatio(clamp((clientX - left) / width, 0, 1));
26
+ }, [disabled, showGhost]);
27
+ const clearGhost = useCallback(() => setGhostRatio(null), []);
28
+ const classes = cn(S.root, S[`size-${size}`], disabled && S.disabled, label && S.hasLabel, className);
29
+ return (jsxs("div", { className: classes, children: [label ? jsx("span", { className: S.label, children: label }) : null, jsxs("div", { ref: trackWrapRef, className: cn(S.trackWrap, markers?.length ? S.hasMarkers : null), onPointerEnter: showGhost ? e => updateGhostFromPointer(e.clientX) : undefined, onPointerMove: showGhost ? e => updateGhostFromPointer(e.clientX) : undefined, onPointerLeave: showGhost ? clearGhost : undefined, children: [jsxs("div", { className: S.trackRow, children: [jsx("input", { type: "range", className: S.control, style: { '--progress': progressPct }, value: value, min: min, max: max, step: step, disabled: disabled, onInput: e => {
30
+ onInput?.(e);
31
+ onChange?.(Number(e.currentTarget.value), e);
32
+ }, ...inputProps }), showGhost && ghostRatio !== null && !disabled ? (jsx("span", { className: S.ghost, style: { left: `${ghostRatio * 100}%` }, "aria-hidden": true })) : null] }), markers?.length ? (jsx("div", { className: S.markersRow, children: markers.map((marker, index) => {
33
+ const markerButton = (jsx("button", { type: "button", className: cn(S.marker, markerClassName), "aria-label": typeof marker.label === 'string' ? marker.label : undefined, disabled: disabled, onPointerDown: e => {
34
+ e.stopPropagation();
35
+ }, onClick: e => {
36
+ e.stopPropagation();
37
+ if (!disabled)
38
+ onMarkerClick?.(marker.value);
39
+ } }));
40
+ return (jsx("span", { className: S.markerWrap, style: { left: valueToPct(marker.value, min, max) }, children: marker.label ? (jsx(Tooltip, { content: marker.label, direction: "top", children: markerButton })) : (markerButton) }, marker.key ?? index));
41
+ }) })) : null] })] }));
42
+ }
43
+
44
+ export { Slider };
@@ -0,0 +1,7 @@
1
+ import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = ".Slider_root__hLZtd{color:var(--accent-color);position:relative;width:100%}.Slider_disabled__jz0lx{opacity:.4;pointer-events:none}.Slider_disabled__jz0lx .Slider_control__vtxup[disabled]{opacity:1}.Slider_hasLabel__Epyqi{align-items:center;display:flex;gap:var(--p-2)}.Slider_label__Gi7GI{color:inherit;font-size:inherit;white-space:nowrap}.Slider_trackWrap__PX861{display:flex;flex:1;flex-direction:column;min-width:0;position:relative}.Slider_hasMarkers__YfnMG{gap:var(--p-1)}.Slider_trackRow__hbQdR{align-items:center;display:flex;position:relative;width:100%}.Slider_markersRow__l-yga{flex-shrink:0;height:var(--marker-size);position:relative;width:100%}.Slider_markerWrap__6hLJN{pointer-events:auto;position:absolute;top:50%;transform:translate(-50%,-50%)}.Slider_marker__vtOv9{background:var(--accent-color);border:none;border-radius:50%;box-shadow:0 0 0 1px var(--decent-color-alpha-800);cursor:pointer;display:block;height:var(--marker-size);margin:0;padding:0;width:var(--marker-size)}.Slider_marker__vtOv9:hover{background:var(--active-color)}.Slider_marker__vtOv9:disabled{cursor:default;opacity:.5}.Slider_control__vtxup{--track-radius:50px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;cursor:pointer;height:var(--thumb-size);margin:0;padding:0;position:relative;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;width:100%;z-index:2}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background-color:var(--active-color-alpha-100)}.Slider_control__vtxup[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Slider_control__vtxup:focus,.Slider_control__vtxup:hover{background:transparent!important}.Slider_control__vtxup:focus{box-shadow:inset 0 0 0 2px none}.Slider_control__vtxup::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--active-color) 0,var(--active-color) var(--progress),var(--accent-color-alpha-100) var(--progress),var(--accent-color-alpha-100) 100%);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--active-color);border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);margin-top:calc((var(--track-height) - var(--thumb-size))/2);width:var(--thumb-size)}.Slider_control__vtxup::-moz-range-track{background:var(--accent-color-alpha-100);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-progress{background:var(--active-color);border-radius:var(--track-radius);height:var(--track-height)}.Slider_control__vtxup::-moz-range-thumb{background:var(--active-color);border:none;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size)}.Slider_ghost__tfPtm{background:var(--accent-color);border-radius:50%;height:var(--ghost-size);left:0;opacity:.45;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--ghost-size);z-index:2}.Slider_size-xs__v6UDK{--track-height:1px;--thumb-size:10px;--ghost-size:10px;--marker-size:6px;font-size:12px}.Slider_size-s__8hGSO{--track-height:2px;--thumb-size:12px;--ghost-size:12px;--marker-size:7px;font-size:14px}.Slider_size-m__Dj7LT{--track-height:8px;--thumb-size:16px;--ghost-size:16px;--marker-size:8px;font-size:16px}.Slider_size-l__Qi6tI{--track-height:12px;--thumb-size:20px;--ghost-size:20px;--marker-size:10px;font-size:18px}.Slider_size-xl__85Gcz{--track-height:16px;--thumb-size:24px;--ghost-size:24px;--marker-size:12px;font-size:20px}";
4
+ var S = {"root":"Slider_root__hLZtd","disabled":"Slider_disabled__jz0lx","control":"Slider_control__vtxup","hasLabel":"Slider_hasLabel__Epyqi","label":"Slider_label__Gi7GI","trackWrap":"Slider_trackWrap__PX861","hasMarkers":"Slider_hasMarkers__YfnMG","trackRow":"Slider_trackRow__hbQdR","markersRow":"Slider_markersRow__l-yga","markerWrap":"Slider_markerWrap__6hLJN","marker":"Slider_marker__vtOv9","ghost":"Slider_ghost__tfPtm","size-xs":"Slider_size-xs__v6UDK","size-s":"Slider_size-s__8hGSO","size-m":"Slider_size-m__Dj7LT","size-l":"Slider_size-l__Qi6tI","size-xl":"Slider_size-xl__85Gcz"};
5
+ styleInject(css_248z);
6
+
7
+ export { S as default };
@@ -0,0 +1,4 @@
1
+ import * as T from './Slider.types';
2
+ export type SliderProps = T.Props;
3
+ export type SliderMarker = T.SliderMarker;
4
+ export declare function Slider({ className, label, value, min, max, step, size, disabled, showGhost, markers, markerClassName, onMarkerClick, onChange, onInput, ...inputProps }: SliderProps): JSX.Element;
@@ -0,0 +1,21 @@
1
+ import { ReactNode, ChangeEvent, FormEvent, InputHTMLAttributes } from 'react';
2
+ import { Size, ComponentType } from '../../types';
3
+ export type SliderMarker = {
4
+ key?: string;
5
+ value: number;
6
+ label?: ReactNode;
7
+ };
8
+ export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value'> & ComponentType & {
9
+ value: number;
10
+ min?: number;
11
+ max?: number;
12
+ step?: number;
13
+ size?: Size;
14
+ disabled?: boolean;
15
+ showGhost?: boolean;
16
+ label?: ReactNode;
17
+ markers?: SliderMarker[];
18
+ markerClassName?: string;
19
+ onMarkerClick?: (value: number) => void;
20
+ onChange?: (value: number, e: ChangeEvent<HTMLInputElement> | FormEvent<HTMLInputElement>) => void;
21
+ };
@@ -40,6 +40,7 @@ export * from './RequiredStar/RequiredStar';
40
40
  export * from './Select/Select';
41
41
  export * from './Select/Select2';
42
42
  export * from './Scroll/Scroll';
43
+ export * from './Slider/Slider';
43
44
  export * from './Shimmer/Shimmer';
44
45
  export * from './Spinner/Spinner';
45
46
  export * from './Table/Table';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homecode/ui",
3
- "version": "5.1.11",
3
+ "version": "5.1.14",
4
4
  "description": "React UI components library",
5
5
  "scripts": {
6
6
  "tests": "jest",
@@ -140,5 +140,6 @@
140
140
  "webpack-cli": "^5.0.1",
141
141
  "webpack-dev-server": "^4.11.1",
142
142
  "webpack-merge": "^5.8.0"
143
- }
143
+ },
144
+ "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
144
145
  }