@stamcat/craftsman 0.0.43 → 0.0.45
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 +7 -3
- package/src/components/Input/Input.scss +1 -1
- package/src/components/Input/InputWrapper.esm.js +30 -20
- package/src/components/Textarea/Textarea.esm.js +8 -4
- package/src/components/Toggle/Toggle.css +1 -1
- package/src/components/Toggle/Toggle.scss +1 -0
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) * .
|
|
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;display:inline-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}}
|
|
@@ -6,7 +6,7 @@ import r from "clsx";
|
|
|
6
6
|
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
7
7
|
//#region src/components/Input/Input.tsx
|
|
8
8
|
var o = (o) => {
|
|
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,
|
|
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
11
|
className: g,
|
|
12
12
|
label: s,
|
|
@@ -14,6 +14,8 @@ var o = (o) => {
|
|
|
14
14
|
error: f,
|
|
15
15
|
required: u,
|
|
16
16
|
style: h,
|
|
17
|
+
value: _,
|
|
18
|
+
defaultValue: v,
|
|
17
19
|
children: /* @__PURE__ */ a("span", {
|
|
18
20
|
className: "input-field",
|
|
19
21
|
"data-has-end-adornment": !e(p),
|
|
@@ -24,10 +26,12 @@ var o = (o) => {
|
|
|
24
26
|
children: m
|
|
25
27
|
}),
|
|
26
28
|
/* @__PURE__ */ i("input", {
|
|
27
|
-
id:
|
|
29
|
+
id: x,
|
|
28
30
|
type: d,
|
|
29
31
|
className: r("input", d),
|
|
30
|
-
|
|
32
|
+
value: _,
|
|
33
|
+
defaultValue: v,
|
|
34
|
+
...y
|
|
31
35
|
}),
|
|
32
36
|
!e(p) && /* @__PURE__ */ i("span", {
|
|
33
37
|
className: "input-end-adornment",
|
|
@@ -1,25 +1,35 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { isEmpty as e } from "../../utilities/validations.esm.js";
|
|
3
3
|
import './Input.css';/* empty css */
|
|
4
|
-
import t from "
|
|
5
|
-
import
|
|
4
|
+
import { useState as t } from "react";
|
|
5
|
+
import n from "clsx";
|
|
6
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
6
7
|
//#region src/components/Input/InputWrapper.tsx
|
|
7
|
-
var
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
children:
|
|
22
|
-
|
|
23
|
-
|
|
8
|
+
var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p, onLabelClick: m }) => {
|
|
9
|
+
let h = f !== void 0, [g, _] = t(!e(p)), v = h ? !e(f) : g, y = (t) => {
|
|
10
|
+
if (h) return;
|
|
11
|
+
let n = t.target;
|
|
12
|
+
_(!e(n.value));
|
|
13
|
+
};
|
|
14
|
+
return /* @__PURE__ */ i("div", {
|
|
15
|
+
"data-label-position": o,
|
|
16
|
+
"data-required": s,
|
|
17
|
+
"data-has-input": v,
|
|
18
|
+
className: n("input-wrapper", l),
|
|
19
|
+
style: u,
|
|
20
|
+
onInput: y,
|
|
21
|
+
onChange: y,
|
|
22
|
+
children: [/* @__PURE__ */ i("label", {
|
|
23
|
+
onClick: m,
|
|
24
|
+
children: [!e(a) && o !== "hidden" && /* @__PURE__ */ r("div", {
|
|
25
|
+
className: "input-label",
|
|
26
|
+
children: a
|
|
27
|
+
}), d]
|
|
28
|
+
}), !e(c) && /* @__PURE__ */ r("div", {
|
|
29
|
+
className: "input-error",
|
|
30
|
+
children: c
|
|
31
|
+
})]
|
|
32
|
+
});
|
|
33
|
+
};
|
|
24
34
|
//#endregion
|
|
25
|
-
export {
|
|
35
|
+
export { a as InputWrapper };
|
|
@@ -3,8 +3,8 @@ import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
|
|
|
3
3
|
import { useId as t } from "react";
|
|
4
4
|
import { jsx as n } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/Textarea/Textarea.tsx
|
|
6
|
-
var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, className: c, style: l,
|
|
7
|
-
let
|
|
6
|
+
var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, className: c, style: l, value: u, defaultValue: d, ...f }) => {
|
|
7
|
+
let p = t();
|
|
8
8
|
return /* @__PURE__ */ n(e, {
|
|
9
9
|
label: a,
|
|
10
10
|
className: c,
|
|
@@ -12,10 +12,14 @@ var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, cla
|
|
|
12
12
|
error: o,
|
|
13
13
|
required: s,
|
|
14
14
|
style: l,
|
|
15
|
+
value: u,
|
|
16
|
+
defaultValue: d,
|
|
15
17
|
children: /* @__PURE__ */ n("textarea", {
|
|
16
|
-
id: i ||
|
|
18
|
+
id: i || p,
|
|
17
19
|
className: "input",
|
|
18
|
-
|
|
20
|
+
value: u,
|
|
21
|
+
defaultValue: d,
|
|
22
|
+
...f
|
|
19
23
|
})
|
|
20
24
|
});
|
|
21
25
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer cf-component{.input-wrapper.toggle>label{align-items:center;gap:calc(var(--w-gutter) * .5);display:inline-flex}.input-wrapper.toggle .input-field{width:var(--toggle-width,60px);height:calc(var(--toggle-width,60px) * .56);position:relative}.input-wrapper.toggle .input.checkbox{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.input-wrapper.toggle .input-end-adornment{position:absolute;inset:0;transform:none}.input-wrapper.toggle .toggle-slider{pointer-events:none;background-color:var(--gray400);border-radius:calc(var(--toggle-width,60px) * .56);transition:background-color .2s;position:absolute;inset:0}.input-wrapper.toggle .toggle-slider:before{content:"";left:calc(var(--toggle-width,60px) * .065);bottom:calc(var(--toggle-width,60px) * .065);height:calc(var(--toggle-width,60px) * .43);width:calc(var(--toggle-width,60px) * .43);background-color:var(--white);border-radius:50%;transition:transform .2s;position:absolute}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider{background-color:var(--blue500)}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider:before{transform:translateX(calc(var(--toggle-width,60px) * .43))}}
|
|
1
|
+
@layer cf-component{.input-wrapper.toggle>label{align-items:center;gap:calc(var(--w-gutter) * .5);display:inline-flex}.input-wrapper.toggle .input-field{width:var(--toggle-width,60px);height:calc(var(--toggle-width,60px) * .56);position:relative}.input-wrapper.toggle .input.checkbox{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.input-wrapper.toggle .input-end-adornment{pointer-events:none;position:absolute;inset:0;transform:none}.input-wrapper.toggle .toggle-slider{pointer-events:none;background-color:var(--gray400);border-radius:calc(var(--toggle-width,60px) * .56);transition:background-color .2s;position:absolute;inset:0}.input-wrapper.toggle .toggle-slider:before{content:"";left:calc(var(--toggle-width,60px) * .065);bottom:calc(var(--toggle-width,60px) * .065);height:calc(var(--toggle-width,60px) * .43);width:calc(var(--toggle-width,60px) * .43);background-color:var(--white);border-radius:50%;transition:transform .2s;position:absolute}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider{background-color:var(--blue500)}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider:before{transform:translateX(calc(var(--toggle-width,60px) * .43))}}
|