@homecode/ui 5.1.10 → 5.1.12
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 +1 -0
- package/dist/esm/src/components/Autocomplete/Autocomplete.js +1 -0
- package/dist/esm/src/components/Card/Card.styl.js +1 -1
- package/dist/esm/src/components/InputFile/InputFile.js +1 -0
- package/dist/esm/src/components/Notifications/Notifications.styl.js +1 -1
- package/dist/esm/src/components/Slider/Slider.js +31 -0
- package/dist/esm/src/components/Slider/Slider.styl.js +7 -0
- package/dist/esm/types/src/components/Slider/Slider.d.ts +3 -0
- package/dist/esm/types/src/components/Slider/Slider.types.d.ts +13 -0
- package/dist/esm/types/src/components/index.d.ts +1 -0
- package/package.json +1 -1
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:
|
|
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-5)}.Notifications_empty__zCpOA{pointer-events:none}.Notifications_itemInner__nEYAl,.Notifications_item__I3Up4{border-radius:var(--
|
|
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,31 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import cn from 'classnames';
|
|
3
|
+
import { useRef, useState, useCallback } from 'react';
|
|
4
|
+
import S from './Slider.styl.js';
|
|
5
|
+
|
|
6
|
+
const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
7
|
+
function Slider({ className, label, value, min = 0, max = 100, step, size = 'm', disabled = false, showGhost = false, onChange, onInput, ...inputProps }) {
|
|
8
|
+
const trackWrapRef = useRef(null);
|
|
9
|
+
const [ghostRatio, setGhostRatio] = useState(null);
|
|
10
|
+
const range = max - min;
|
|
11
|
+
const progressPct = range > 0 ? `${((value - min) / range) * 100}%` : '0%';
|
|
12
|
+
const updateGhostFromPointer = useCallback((clientX) => {
|
|
13
|
+
if (disabled || !showGhost)
|
|
14
|
+
return;
|
|
15
|
+
const wrap = trackWrapRef.current;
|
|
16
|
+
if (!wrap)
|
|
17
|
+
return;
|
|
18
|
+
const { left, width } = wrap.getBoundingClientRect();
|
|
19
|
+
if (width <= 0)
|
|
20
|
+
return;
|
|
21
|
+
setGhostRatio(clamp((clientX - left) / width, 0, 1));
|
|
22
|
+
}, [disabled, showGhost]);
|
|
23
|
+
const clearGhost = useCallback(() => setGhostRatio(null), []);
|
|
24
|
+
const classes = cn(S.root, S[`size-${size}`], disabled && S.disabled, label && S.hasLabel, className);
|
|
25
|
+
return (jsxs("div", { className: classes, children: [label ? jsx("span", { className: S.label, children: label }) : null, jsxs("div", { ref: trackWrapRef, className: S.trackWrap, onPointerEnter: showGhost ? e => updateGhostFromPointer(e.clientX) : undefined, onPointerMove: showGhost ? e => updateGhostFromPointer(e.clientX) : undefined, onPointerLeave: showGhost ? clearGhost : undefined, children: [jsx("input", { type: "range", className: S.control, style: { '--progress': progressPct }, value: value, min: min, max: max, step: step, disabled: disabled, onInput: e => {
|
|
26
|
+
onInput?.(e);
|
|
27
|
+
onChange?.(Number(e.currentTarget.value), e);
|
|
28
|
+
}, ...inputProps }), showGhost && ghostRatio !== null && !disabled ? (jsx("span", { className: S.ghost, style: { left: `${ghostRatio * 100}%` }, "aria-hidden": true })) : null] })] }));
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
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{align-items:center;display:flex;flex:1;min-width:0;position:relative}.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;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;width:100%}.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);margin-left:calc(var(--ghost-size)*-.3125);opacity:.45;pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:var(--ghost-size);z-index:2}.Slider_size-xs__v6UDK{--track-height:1px;--thumb-size:10px;--ghost-size:10px;font-size:12px}.Slider_size-s__8hGSO{--track-height:2px;--thumb-size:12px;--ghost-size:12px;font-size:14px}.Slider_size-m__Dj7LT{--track-height:8px;--thumb-size:16px;--ghost-size:16px;font-size:16px}.Slider_size-l__Qi6tI{--track-height:12px;--thumb-size:20px;--ghost-size:20px;font-size:18px}.Slider_size-xl__85Gcz{--track-height:16px;--thumb-size:24px;--ghost-size:24px;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","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,13 @@
|
|
|
1
|
+
import { ReactNode, ChangeEvent, FormEvent, InputHTMLAttributes } from 'react';
|
|
2
|
+
import { Size, ComponentType } from '../../types';
|
|
3
|
+
export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value'> & ComponentType & {
|
|
4
|
+
value: number;
|
|
5
|
+
min?: number;
|
|
6
|
+
max?: number;
|
|
7
|
+
step?: number;
|
|
8
|
+
size?: Size;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
showGhost?: boolean;
|
|
11
|
+
label?: ReactNode;
|
|
12
|
+
onChange?: (value: number, e: ChangeEvent<HTMLInputElement> | FormEvent<HTMLInputElement>) => void;
|
|
13
|
+
};
|
|
@@ -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';
|