@stamcat/craftsman 0.0.48 → 0.0.50
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/package.json +1 -1
- package/src/components/Input/Input.css +1 -1
- package/src/components/Input/Input.esm.js +2 -2
- package/src/components/Input/Input.scss +1 -1
- package/src/components/TimePicker/TimePicker.css +1 -1
- package/src/components/TimePicker/TimePicker.esm.js +25 -25
- package/src/components/TimePicker/TimePicker.scss +9 -2
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cf-base{.input-pre-adornment,.input-end-adornment{z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .5);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .45);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label,.input-wrapper[data-label-position=inside].select .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] input::placeholder{opacity:0;transition:opacity .2s}.input-field{align-items:center;width:
|
|
1
|
+
@layer cf-base{.input-pre-adornment,.input-end-adornment{z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .5);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .45);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label,.input-wrapper[data-label-position=inside].select .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] input::placeholder{opacity:0;transition:opacity .2s}.input-field{align-items:center;width:fit-content;display:flex;position:relative}.input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * 1.5)}.input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * 2.25)}.input-end-adornment{right:calc(var(--w-gutter) * .5)}.input-pre-adornment{left:calc(var(--w-gutter) * .5)}.input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}}
|
|
@@ -8,7 +8,7 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
|
8
8
|
var o = (o) => {
|
|
9
9
|
let { label: s, id: c, labelPosition: l = "top", required: u = !1, type: d = "text", error: f, endAdornment: p, preAdornment: m, style: h, className: g, value: _, defaultValue: v, ...y } = o, b = n(), x = c || b;
|
|
10
10
|
return /* @__PURE__ */ i(t, {
|
|
11
|
-
className:
|
|
11
|
+
className: g,
|
|
12
12
|
label: s,
|
|
13
13
|
labelPosition: l,
|
|
14
14
|
error: f,
|
|
@@ -28,7 +28,7 @@ var o = (o) => {
|
|
|
28
28
|
/* @__PURE__ */ i("input", {
|
|
29
29
|
id: x,
|
|
30
30
|
type: d,
|
|
31
|
-
className: d,
|
|
31
|
+
className: r("input", d),
|
|
32
32
|
value: _,
|
|
33
33
|
defaultValue: v,
|
|
34
34
|
...y
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cf-base{.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer cf-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px
|
|
1
|
+
@layer cf-base{.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer cf-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{width:fit-content;position:relative}.timePicker .timePicker__field:has(.input-view-toggle) .react-time-picker__wrapper{padding-right:34px}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}
|
|
@@ -12,7 +12,7 @@ import { TimePicker as g } from "react-time-picker";
|
|
|
12
12
|
import { isMobile as _ } from "react-device-detect";
|
|
13
13
|
//#region src/components/TimePicker/TimePicker.tsx
|
|
14
14
|
var v = (v) => {
|
|
15
|
-
let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O,
|
|
15
|
+
let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, disableClock: k, ...A } = v, [j, M] = a(null), [N, P] = a(null), { floatingStyles: F } = h({
|
|
16
16
|
placement: "bottom-start",
|
|
17
17
|
strategy: "absolute",
|
|
18
18
|
whileElementsMounted: d,
|
|
@@ -22,30 +22,30 @@ var v = (v) => {
|
|
|
22
22
|
m()
|
|
23
23
|
],
|
|
24
24
|
elements: {
|
|
25
|
-
reference:
|
|
26
|
-
floating:
|
|
25
|
+
reference: j,
|
|
26
|
+
floating: N
|
|
27
27
|
}
|
|
28
|
-
}), [
|
|
28
|
+
}), [I, L] = a(!1), R = n(b);
|
|
29
29
|
return i(() => {
|
|
30
|
-
if (!
|
|
30
|
+
if (!I) return;
|
|
31
31
|
let e = (e) => {
|
|
32
|
-
|
|
32
|
+
j?.contains(e.target) || N?.contains(e.target) || L(!1);
|
|
33
33
|
};
|
|
34
34
|
return document.addEventListener("pointerdown", e), () => {
|
|
35
35
|
document.removeEventListener("pointerdown", e);
|
|
36
36
|
};
|
|
37
37
|
}, [
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
38
|
+
I,
|
|
39
|
+
j,
|
|
40
|
+
N
|
|
41
41
|
]), /* @__PURE__ */ u("div", {
|
|
42
42
|
className: "timePicker",
|
|
43
|
-
ref:
|
|
43
|
+
ref: M,
|
|
44
44
|
onFocus: (e) => {
|
|
45
|
-
_ || e.target instanceof HTMLInputElement &&
|
|
45
|
+
_ || e.target instanceof HTMLInputElement && L(!0);
|
|
46
46
|
},
|
|
47
47
|
onKeyDown: (e) => {
|
|
48
|
-
e.key === "Enter" &&
|
|
48
|
+
e.key === "Enter" && L(!1);
|
|
49
49
|
},
|
|
50
50
|
children: [
|
|
51
51
|
O && /* @__PURE__ */ l("input", {
|
|
@@ -62,34 +62,34 @@ var v = (v) => {
|
|
|
62
62
|
children: /* @__PURE__ */ u("div", {
|
|
63
63
|
className: "timePicker__field",
|
|
64
64
|
children: [/* @__PURE__ */ l(g, {
|
|
65
|
-
...k,
|
|
66
65
|
value: S,
|
|
67
66
|
onChange: C,
|
|
68
|
-
locale:
|
|
67
|
+
locale: R,
|
|
69
68
|
required: D,
|
|
69
|
+
clearIcon: /* @__PURE__ */ l(c, { size: 14 }),
|
|
70
70
|
disableClock: !0,
|
|
71
|
-
|
|
72
|
-
}), !_ && /* @__PURE__ */ l(e, {
|
|
71
|
+
...A
|
|
72
|
+
}), !_ && !k && /* @__PURE__ */ l(e, {
|
|
73
73
|
type: "button",
|
|
74
74
|
variant: "text",
|
|
75
|
-
onClick: () =>
|
|
76
|
-
"aria-label":
|
|
77
|
-
"aria-pressed":
|
|
75
|
+
onClick: () => L((e) => !e),
|
|
76
|
+
"aria-label": I ? "Hide time picker" : "Show time picker",
|
|
77
|
+
"aria-pressed": I,
|
|
78
78
|
disabled: v.disabled,
|
|
79
79
|
className: "input-view-toggle",
|
|
80
|
-
children: l(
|
|
80
|
+
children: l(I ? o : s, { size: 16 })
|
|
81
81
|
})]
|
|
82
82
|
})
|
|
83
83
|
}),
|
|
84
|
-
!_ && /* @__PURE__ */ l(r, {
|
|
84
|
+
!_ && !k && /* @__PURE__ */ l(r, {
|
|
85
85
|
value: S,
|
|
86
86
|
onChange: (e) => C?.(e),
|
|
87
|
-
locale:
|
|
87
|
+
locale: R,
|
|
88
88
|
labels: y,
|
|
89
89
|
format: x,
|
|
90
|
-
visible:
|
|
91
|
-
floatingRef:
|
|
92
|
-
style:
|
|
90
|
+
visible: I,
|
|
91
|
+
floatingRef: P,
|
|
92
|
+
style: F
|
|
93
93
|
})
|
|
94
94
|
]
|
|
95
95
|
});
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
}
|
|
19
19
|
&__wrapper {
|
|
20
20
|
@extend %date-picker-wrapper;
|
|
21
|
-
padding: 6px
|
|
21
|
+
padding: 6px 8px;
|
|
22
22
|
}
|
|
23
23
|
&__inputGroup {
|
|
24
24
|
@extend %date-picker-input-group;
|
|
@@ -95,10 +95,17 @@
|
|
|
95
95
|
|
|
96
96
|
.timePicker__field {
|
|
97
97
|
position: relative;
|
|
98
|
+
width: fit-content;
|
|
99
|
+
|
|
100
|
+
&:has(.input-view-toggle) {
|
|
101
|
+
.react-time-picker__wrapper {
|
|
102
|
+
padding-right: 34px;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
98
105
|
|
|
99
106
|
.input-view-toggle {
|
|
100
107
|
position: absolute;
|
|
101
|
-
right:
|
|
108
|
+
right: 10px;
|
|
102
109
|
top: 50%;
|
|
103
110
|
transform: translateY(-50%);
|
|
104
111
|
padding: 4px;
|