@stamcat/craftsman 0.0.31-beta.4 → 0.0.32
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/AGENTS.md +1 -0
- package/Components.esm.js +78 -76
- package/package.json +5 -1
- package/skills/craftsman-component-usage/SKILL.md +2 -0
- package/skills/craftsman-style-utilities/SKILL.md +52 -0
- package/src/components/Accordion/AGENTS.md +45 -0
- package/src/components/Accordion/Accordion.css +1 -0
- package/src/components/Accordion/Accordion.d.ts +14 -0
- package/src/components/Accordion/Accordion.esm.js +70 -0
- package/src/components/Accordion/Accordion.scss +64 -0
- package/src/components/Carousel/{Carousel2.esm.js → Carousel.esm.js} +23 -23
- package/src/components/Checkbox/Checkbox.esm.js +1 -1
- package/src/components/DatePicker/DatePicker.css +1 -1
- package/src/components/DatePicker/DatePicker.esm.js +29 -0
- package/src/components/DateRangePicker/DateRangePicker.css +1 -1
- package/src/components/DateRangePicker/{DateRangePicker2.esm.js → DateRangePicker.esm.js} +12 -12
- package/src/components/DateTimePicker/DateTimePicker.css +1 -1
- package/src/components/DateTimePicker/{DateTimePicker2.esm.js → DateTimePicker.esm.js} +16 -16
- package/src/components/Input/Input.css +1 -1
- package/src/components/Input/{Input2.esm.js → Input.esm.js} +10 -10
- package/src/components/Input/Input.scss +7 -0
- package/src/components/Input/InputWrapper.esm.js +1 -1
- package/src/components/InputNumber/{InputNumber2.esm.js → InputNumber.esm.js} +12 -12
- package/src/components/InputPassword/InputPassword.esm.js +10 -10
- package/src/components/InputPhone/{InputPhone2.esm.js → InputPhone.esm.js} +8 -8
- package/src/components/Loader/Loader.esm.js +1 -1
- package/src/components/Modal/{Modal2.esm.js → Modal.esm.js} +16 -16
- package/src/components/Notice/{Notice2.esm.js → Notice.esm.js} +2 -2
- package/src/components/Pagination/{Pagination2.esm.js → Pagination.esm.js} +2 -2
- package/src/components/RadioButton/RadioButton.esm.js +1 -1
- package/src/components/Select/Select.esm.js +18 -17
- package/src/components/SortableList/ListItem.esm.js +8 -8
- package/src/components/SortableList/{SortableList2.esm.js → SortableList.esm.js} +9 -9
- package/src/components/Text/AGENTS.md +4 -2
- package/src/components/Text/{Text2.esm.js → Text.esm.js} +1 -1
- package/src/components/Textarea/Textarea.esm.js +5 -5
- package/src/components/TimePicker/TimePicker.css +1 -1
- package/src/components/TimePicker/{TimePicker2.esm.js → TimePicker.esm.js} +16 -16
- package/src/components/TimePicker/TimePickerDisplay.esm.js +1 -1
- package/src/components/TimePicker/TimePickerWheel.esm.js +15 -15
- package/src/components/Toggle/{Toggle2.esm.js → Toggle.esm.js} +2 -2
- package/src/components/Tooltip/{Tooltip2.esm.js → Tooltip.esm.js} +13 -13
- package/src/components/index.d.ts +1 -0
- package/src/styles/global/components/_input.scss +8 -9
- package/src/styles/global/components/_select.scss +11 -16
- package/src/utilities/types.d.ts +14 -14
- package/src/components/DatePicker/DatePicker2.esm.js +0 -29
- /package/src/components/Loader/{loaders.module.esm.js → loaders.module.style.esm.js} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer craftsman-base{.react-daterange-picker__wrapper
|
|
1
|
+
@layer craftsman-base{.react-daterange-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.react-daterange-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-daterange-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-daterange-picker__wrapper{appearance:textfield}.react-daterange-picker__wrapper:disabled,.disabled.react-daterange-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-daterange-picker,.react-daterange-picker *,.react-daterange-picker :before,.react-daterange-picker :after{box-sizing:border-box}@layer craftsman-component{.react-daterange-picker{display:inline-flex;position:relative}.react-daterange-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-daterange-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-daterange-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-daterange-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-daterange-picker__inputGroup__divider,.react-daterange-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-daterange-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-daterange-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-daterange-picker__inputGroup__input:disabled{background-color:unset}.react-daterange-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-daterange-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-daterange-picker__button{border:0;padding:4px 4px 4px 7px}.react-daterange-picker__button:hover{background:0 0}.react-daterange-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-daterange-picker__calendar .react-calendar{border-width:thin}.react-daterange-picker__calendar--closed,.react-daterange-picker__clock--closed{display:none}.react-daterange-picker__calendar .react-daterange-picker__inputGroup__input:invalid{background:unset}}
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
|
|
3
|
-
import './DateRangePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css
|
|
4
|
-
/* empty css
|
|
5
|
-
import t from "
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
3
|
+
import './DateRangePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css */
|
|
4
|
+
/* empty css */
|
|
5
|
+
import { useId as t } from "react";
|
|
6
|
+
import n from "clsx";
|
|
7
|
+
import { FaRegCalendar as r, FaX as i } from "react-icons/fa6";
|
|
8
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
9
9
|
import { DateRangePicker as o } from "@wojtekmaj/react-daterange-picker";
|
|
10
10
|
//#region src/components/DateRangePicker/DateRangePicker.tsx
|
|
11
11
|
var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
|
|
12
|
-
let h =
|
|
13
|
-
return /* @__PURE__ */
|
|
12
|
+
let h = t();
|
|
13
|
+
return /* @__PURE__ */ a(e, {
|
|
14
14
|
id: c || h,
|
|
15
|
-
className:
|
|
15
|
+
className: n("dateRangePicker", p),
|
|
16
16
|
label: s,
|
|
17
17
|
labelPosition: l,
|
|
18
18
|
error: d,
|
|
19
19
|
required: u,
|
|
20
20
|
style: f,
|
|
21
|
-
children: /* @__PURE__ */
|
|
22
|
-
calendarIcon: /* @__PURE__ */
|
|
23
|
-
clearIcon: /* @__PURE__ */
|
|
21
|
+
children: /* @__PURE__ */ a(o, {
|
|
22
|
+
calendarIcon: /* @__PURE__ */ a(r, { size: 16 }),
|
|
23
|
+
clearIcon: /* @__PURE__ */ a(i, { size: 14 }),
|
|
24
24
|
...m
|
|
25
25
|
})
|
|
26
26
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer craftsman-base{.react-datetime-picker__wrapper
|
|
1
|
+
@layer craftsman-base{.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer craftsman-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-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-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { formatTime as e } from "../../utilities/validations.esm.js";
|
|
3
3
|
import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
|
|
4
|
-
import './DateTimePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css
|
|
4
|
+
import './DateTimePicker.css';import '../DatePicker/ReactCalendar.css';/* empty css */
|
|
5
5
|
import { resolveLocale as n } from "../TimePicker/utilities.esm.js";
|
|
6
6
|
import { TimePickerDisplay as r } from "../TimePicker/TimePickerDisplay.esm.js";
|
|
7
|
-
/* empty css
|
|
8
|
-
import i from "
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
7
|
+
/* empty css */
|
|
8
|
+
import { useEffect as i, useId as a, useRef as o, useState as s } from "react";
|
|
9
|
+
import c from "clsx";
|
|
10
|
+
import { FaRegCalendar as l, FaX as u } from "react-icons/fa6";
|
|
11
|
+
import { jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
12
12
|
import { isMobile as p } from "react-device-detect";
|
|
13
13
|
import { DateTimePicker as m } from "react-datetime-picker";
|
|
14
14
|
//#region src/components/DateTimePicker/DateTimePicker.tsx
|
|
15
15
|
var h = ({ label: h, id: g, labelPosition: _ = "top", required: v = !1, error: y, style: b, className: x, locale: S, labels: C, format: w, value: T, onChange: E, ...D }) => {
|
|
16
|
-
let O =
|
|
17
|
-
|
|
16
|
+
let O = a(), k = g || O, A = o(null), [j, M] = s(!1), N = n(S);
|
|
17
|
+
i(() => {
|
|
18
18
|
if (!j) return;
|
|
19
19
|
let e = (e) => {
|
|
20
20
|
let t = e.target;
|
|
@@ -40,33 +40,33 @@ var h = ({ label: h, id: g, labelPosition: _ = "top", required: v = !1, error: y
|
|
|
40
40
|
let a = T instanceof Date ? new Date(T) : /* @__PURE__ */ new Date();
|
|
41
41
|
a.setHours(r, i, 0, 0), E?.(a);
|
|
42
42
|
};
|
|
43
|
-
return /* @__PURE__ */
|
|
43
|
+
return /* @__PURE__ */ d("div", {
|
|
44
44
|
ref: A,
|
|
45
45
|
className: "dateTimePicker",
|
|
46
46
|
onKeyDown: I,
|
|
47
|
-
children: /* @__PURE__ */
|
|
47
|
+
children: /* @__PURE__ */ f(t, {
|
|
48
48
|
id: k,
|
|
49
49
|
onFocus: F,
|
|
50
|
-
className:
|
|
50
|
+
className: c(x, "dateTimePicker_wrapper"),
|
|
51
51
|
label: h,
|
|
52
52
|
labelPosition: _,
|
|
53
53
|
error: y,
|
|
54
54
|
required: v,
|
|
55
55
|
style: b,
|
|
56
56
|
value: T instanceof Date ? T.toISOString() : void 0,
|
|
57
|
-
children: [/* @__PURE__ */
|
|
57
|
+
children: [/* @__PURE__ */ d(m, {
|
|
58
58
|
isClockOpen: !1,
|
|
59
59
|
onClockOpen: P,
|
|
60
60
|
onClockClose: () => {},
|
|
61
61
|
onCalendarOpen: () => M(!1),
|
|
62
|
-
calendarIcon: /* @__PURE__ */
|
|
63
|
-
clearIcon: /* @__PURE__ */
|
|
62
|
+
calendarIcon: /* @__PURE__ */ d(l, { size: 16 }),
|
|
63
|
+
clearIcon: /* @__PURE__ */ d(u, { size: 14 }),
|
|
64
64
|
value: T,
|
|
65
65
|
onChange: E,
|
|
66
66
|
...D
|
|
67
|
-
}), j && /* @__PURE__ */
|
|
67
|
+
}), j && /* @__PURE__ */ d("div", {
|
|
68
68
|
className: "dateTimePicker__time-display",
|
|
69
|
-
children: /* @__PURE__ */
|
|
69
|
+
children: /* @__PURE__ */ d(r, {
|
|
70
70
|
value: e(T, S),
|
|
71
71
|
onChange: L,
|
|
72
72
|
locale: N,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer craftsman-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) * .25);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{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}}
|
|
1
|
+
@layer craftsman-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) * .25);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}}
|
|
@@ -2,35 +2,35 @@
|
|
|
2
2
|
import { isEmpty as e } from "../../utilities/validations.esm.js";
|
|
3
3
|
import { InputWrapper as t } from "./InputWrapper.esm.js";
|
|
4
4
|
import "../../utilities/types.esm.js";
|
|
5
|
-
import n from "
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
5
|
+
import { useId as n } from "react";
|
|
6
|
+
import r from "clsx";
|
|
7
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
8
8
|
//#region src/components/Input/Input.tsx
|
|
9
9
|
var o = (o) => {
|
|
10
|
-
let { label: s, id: c, labelPosition: l = "top", required: u = !1, type: d = "text", error: f, endAdornment: p, preAdornment: m, style: h, className: g, ..._ } = o, v =
|
|
11
|
-
return /* @__PURE__ */
|
|
10
|
+
let { label: s, id: c, labelPosition: l = "top", required: u = !1, type: d = "text", error: f, endAdornment: p, preAdornment: m, style: h, className: g, ..._ } = o, v = n(), y = c || v;
|
|
11
|
+
return /* @__PURE__ */ i(t, {
|
|
12
12
|
className: g,
|
|
13
13
|
label: s,
|
|
14
14
|
labelPosition: l,
|
|
15
15
|
error: f,
|
|
16
16
|
required: u,
|
|
17
17
|
style: h,
|
|
18
|
-
children: /* @__PURE__ */
|
|
18
|
+
children: /* @__PURE__ */ a("span", {
|
|
19
19
|
className: "input-field",
|
|
20
20
|
"data-has-end-adornment": !e(p),
|
|
21
21
|
"data-has-pre-adornment": !e(m),
|
|
22
22
|
children: [
|
|
23
|
-
!e(m) && /* @__PURE__ */
|
|
23
|
+
!e(m) && /* @__PURE__ */ i("span", {
|
|
24
24
|
className: "input-pre-adornment",
|
|
25
25
|
children: m
|
|
26
26
|
}),
|
|
27
|
-
/* @__PURE__ */
|
|
27
|
+
/* @__PURE__ */ i("input", {
|
|
28
28
|
id: y,
|
|
29
29
|
type: d,
|
|
30
|
-
className:
|
|
30
|
+
className: r("input", d),
|
|
31
31
|
..._
|
|
32
32
|
}),
|
|
33
|
-
!e(p) && /* @__PURE__ */
|
|
33
|
+
!e(p) && /* @__PURE__ */ i("span", {
|
|
34
34
|
className: "input-end-adornment",
|
|
35
35
|
children: p
|
|
36
36
|
})
|
|
@@ -126,6 +126,13 @@
|
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
128
|
|
|
129
|
+
// A select always shows visible option text, even with none explicitly chosen, so its label floats unconditionally.
|
|
130
|
+
&.select {
|
|
131
|
+
.input-label {
|
|
132
|
+
@include inside-input-label-floating;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
|
|
129
136
|
.input[type="tel"] {
|
|
130
137
|
width: 100%;
|
|
131
138
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { isEmpty as e } from "../../utilities/validations.esm.js";
|
|
3
|
-
import './Input.css';/* empty css
|
|
3
|
+
import './Input.css';/* empty css */
|
|
4
4
|
import t from "clsx";
|
|
5
5
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/Input/InputWrapper.tsx
|
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Button as e } from "../Button/Button.esm.js";
|
|
3
|
-
import { Input as t } from "../Input/
|
|
4
|
-
import './InputNumber.css';/* empty css
|
|
5
|
-
import n from "
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
3
|
+
import { Input as t } from "../Input/Input.esm.js";
|
|
4
|
+
import './InputNumber.css';/* empty css */
|
|
5
|
+
import { useRef as n } from "react";
|
|
6
|
+
import r from "clsx";
|
|
7
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
8
8
|
import { IoAddCircleOutline as a, IoRemoveCircleOutline as o } from "react-icons/io5";
|
|
9
9
|
//#region src/components/InputNumber/InputNumber.tsx
|
|
10
10
|
var s = ({ type: s = "number", className: c, iconIncrement: l, iconDecrement: u, onDecrement: d, onIncrement: f, ...p }) => {
|
|
11
|
-
let m =
|
|
12
|
-
return /* @__PURE__ */
|
|
11
|
+
let m = n(null);
|
|
12
|
+
return /* @__PURE__ */ i(t, {
|
|
13
13
|
ref: m,
|
|
14
|
-
className:
|
|
15
|
-
preAdornment: /* @__PURE__ */
|
|
14
|
+
className: r("inputNumber", c),
|
|
15
|
+
preAdornment: /* @__PURE__ */ i(e, {
|
|
16
16
|
variant: "text",
|
|
17
17
|
onClick: (e) => {
|
|
18
18
|
let t = m.current;
|
|
19
19
|
t && (t.stepDown(), t.dispatchEvent(new Event("input", { bubbles: !0 }))), d?.(e);
|
|
20
20
|
},
|
|
21
|
-
children: l || /* @__PURE__ */
|
|
21
|
+
children: l || /* @__PURE__ */ i(o, { size: "26" })
|
|
22
22
|
}),
|
|
23
|
-
endAdornment: /* @__PURE__ */
|
|
23
|
+
endAdornment: /* @__PURE__ */ i(e, {
|
|
24
24
|
variant: "text",
|
|
25
25
|
onClick: (e) => {
|
|
26
26
|
let t = m.current;
|
|
27
27
|
t && (t.stepUp(), t.dispatchEvent(new Event("input", { bubbles: !0 }))), f?.(e);
|
|
28
28
|
},
|
|
29
|
-
children: u || /* @__PURE__ */
|
|
29
|
+
children: u || /* @__PURE__ */ i(a, { size: "26" })
|
|
30
30
|
}),
|
|
31
31
|
...p,
|
|
32
32
|
type: s
|
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Button as e } from "../Button/Button.esm.js";
|
|
3
|
-
import { Input as t } from "../Input/
|
|
4
|
-
import n from "
|
|
5
|
-
import
|
|
6
|
-
import {
|
|
3
|
+
import { Input as t } from "../Input/Input.esm.js";
|
|
4
|
+
import { useState as n } from "react";
|
|
5
|
+
import r from "clsx";
|
|
6
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
7
7
|
import { ImEye as a, ImEyeBlocked as o } from "react-icons/im";
|
|
8
8
|
//#region src/components/InputPassword/InputPassword.tsx
|
|
9
|
-
var s = ({ visible: t, onToggle: n }) => /* @__PURE__ */
|
|
9
|
+
var s = ({ visible: t, onToggle: n }) => /* @__PURE__ */ i(e, {
|
|
10
10
|
type: "button",
|
|
11
11
|
variant: "text",
|
|
12
12
|
onClick: n,
|
|
13
13
|
"aria-label": t ? "Hide password" : "Show password",
|
|
14
14
|
"aria-pressed": t,
|
|
15
15
|
className: "input-view-toggle",
|
|
16
|
-
children:
|
|
16
|
+
children: i(t ? a : o, { size: 16 })
|
|
17
17
|
}), c = ({ type: e = "password", className: a, ...o }) => {
|
|
18
|
-
let [c, l] =
|
|
19
|
-
return /* @__PURE__ */
|
|
20
|
-
className:
|
|
18
|
+
let [c, l] = n(!1), u = c ? "text" : e;
|
|
19
|
+
return /* @__PURE__ */ i(t, {
|
|
20
|
+
className: r("inputPassword", a),
|
|
21
21
|
...o,
|
|
22
22
|
type: u,
|
|
23
|
-
endAdornment: /* @__PURE__ */
|
|
23
|
+
endAdornment: /* @__PURE__ */ i(s, {
|
|
24
24
|
visible: c,
|
|
25
25
|
onToggle: () => l((e) => !e)
|
|
26
26
|
})
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
|
|
3
|
-
import './InputPhone.css';/* empty css
|
|
4
|
-
import t from "
|
|
5
|
-
import
|
|
6
|
-
import
|
|
3
|
+
import './InputPhone.css';/* empty css */
|
|
4
|
+
import t, { useId as n } from "react";
|
|
5
|
+
import r from "clsx";
|
|
6
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
7
7
|
import { PhoneInput as a } from "react-international-phone";
|
|
8
8
|
//#region src/components/InputPhone/InputPhone.tsx
|
|
9
9
|
var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, defaultCountry: u = "us", error: d, style: f, className: p, ...m }) => {
|
|
10
|
-
let h =
|
|
11
|
-
return /* @__PURE__ */
|
|
10
|
+
let h = n(), g = s || h, _ = t.useRef(null);
|
|
11
|
+
return /* @__PURE__ */ i(e, {
|
|
12
12
|
id: g,
|
|
13
|
-
className:
|
|
13
|
+
className: r("inputPhone", p),
|
|
14
14
|
label: o,
|
|
15
15
|
labelPosition: c,
|
|
16
16
|
error: d,
|
|
17
17
|
required: l,
|
|
18
18
|
style: f,
|
|
19
|
-
children: /* @__PURE__ */
|
|
19
|
+
children: /* @__PURE__ */ i(a, {
|
|
20
20
|
defaultCountry: u,
|
|
21
21
|
...m,
|
|
22
22
|
ref: _
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { loaders as e } from "./types.esm.js";
|
|
3
|
-
import t from "./loaders.module.esm.js";
|
|
3
|
+
import t from "./loaders.module.style.esm.js";
|
|
4
4
|
import n from "clsx";
|
|
5
5
|
import { jsx as r } from "react/jsx-runtime";
|
|
6
6
|
//#region src/components/Loader/Loader.tsx
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Button as e } from "../Button/Button.esm.js";
|
|
3
3
|
import { color as t } from "../../styles/utilities/color.esm.js";
|
|
4
|
-
import './Modal.css';/* empty css
|
|
5
|
-
import n from "
|
|
6
|
-
import
|
|
7
|
-
import o from "react";
|
|
4
|
+
import './Modal.css';/* empty css */
|
|
5
|
+
import n from "react";
|
|
6
|
+
import r from "clsx";
|
|
7
|
+
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
8
8
|
import { LuX as s } from "react-icons/lu";
|
|
9
9
|
//#region src/components/Modal/Modal.tsx
|
|
10
|
-
var c = class extends
|
|
10
|
+
var c = class extends n.PureComponent {
|
|
11
11
|
state = { isClosing: !1 };
|
|
12
12
|
onDismiss = () => {
|
|
13
13
|
this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
|
|
@@ -18,35 +18,35 @@ var c = class extends o.PureComponent {
|
|
|
18
18
|
(this.props.backgroundDismiss ?? !0) === !0 && this.onDismiss();
|
|
19
19
|
};
|
|
20
20
|
render() {
|
|
21
|
-
let
|
|
22
|
-
return this.props.visible ? /* @__PURE__ */
|
|
23
|
-
className:
|
|
21
|
+
let n = this.props.type || "dialog";
|
|
22
|
+
return this.props.visible ? /* @__PURE__ */ o("div", {
|
|
23
|
+
className: r("modal", "wrapper", this.props.className),
|
|
24
24
|
style: this.props.style,
|
|
25
|
-
children: [/* @__PURE__ */
|
|
26
|
-
className:
|
|
25
|
+
children: [/* @__PURE__ */ o("div", {
|
|
26
|
+
className: r("content", n),
|
|
27
27
|
"data-is-closing": this.state.isClosing,
|
|
28
28
|
children: [
|
|
29
|
-
/* @__PURE__ */
|
|
29
|
+
/* @__PURE__ */ o("header", { children: [this.props.header && /* @__PURE__ */ a(i, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ a(e, {
|
|
30
30
|
variant: "primary",
|
|
31
31
|
className: "closeModal",
|
|
32
32
|
onClick: this.onDismiss,
|
|
33
|
-
children: /* @__PURE__ */
|
|
33
|
+
children: /* @__PURE__ */ a(s, {
|
|
34
34
|
fill: t("white"),
|
|
35
35
|
size: 18
|
|
36
36
|
})
|
|
37
37
|
})] }),
|
|
38
|
-
/* @__PURE__ */
|
|
39
|
-
this.props.footer && /* @__PURE__ */
|
|
38
|
+
/* @__PURE__ */ a("section", { children: this.props.children }),
|
|
39
|
+
this.props.footer && /* @__PURE__ */ a("footer", {
|
|
40
40
|
className: "actionContainer",
|
|
41
41
|
children: this.props.footer
|
|
42
42
|
})
|
|
43
43
|
]
|
|
44
|
-
}), /* @__PURE__ */
|
|
44
|
+
}), /* @__PURE__ */ a("div", {
|
|
45
45
|
className: "background",
|
|
46
46
|
"data-is-closing": this.state.isClosing,
|
|
47
47
|
onClick: this.onClickBackground
|
|
48
48
|
})]
|
|
49
|
-
}) : /* @__PURE__ */ i
|
|
49
|
+
}) : /* @__PURE__ */ a(i, {});
|
|
50
50
|
}
|
|
51
51
|
};
|
|
52
52
|
//#endregion
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Button as e } from "../Button/Button.esm.js";
|
|
3
|
-
import { Text as t } from "../Text/
|
|
4
|
-
import './Notice.css';/* empty css
|
|
3
|
+
import { Text as t } from "../Text/Text.esm.js";
|
|
4
|
+
import './Notice.css';/* empty css */
|
|
5
5
|
import n from "clsx";
|
|
6
6
|
import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
7
7
|
import { IoAlertCircleOutline as o, IoCheckmarkCircleOutline as s, IoCloseOutline as c, IoHelpCircleOutline as l, IoInformationCircleOutline as u } from "react-icons/io5";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import './Pagination.css';/* empty css
|
|
2
|
+
import './Pagination.css';/* empty css */
|
|
3
|
+
import "react";
|
|
3
4
|
import e from "clsx";
|
|
4
5
|
import { jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
5
|
-
import "react";
|
|
6
6
|
//#region src/components/Pagination/Pagination.tsx
|
|
7
7
|
var r = ({ total: r, current: i, onChange: a, className: o, style: s, showPages: c = 5 }) => {
|
|
8
8
|
function l(e, t) {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { Input as e } from "../Input/
|
|
2
|
+
import { Input as e } from "../Input/Input.esm.js";
|
|
3
3
|
import { jsx as t } from "react/jsx-runtime";
|
|
4
4
|
//#region src/components/RadioButton/RadioButton.tsx
|
|
5
5
|
var n = ({ type: n = "radio", labelPosition: r = "right", size: i, style: a, ...o }) => {
|
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
3
|
+
import { useId as t } from "react";
|
|
4
|
+
import n from "clsx";
|
|
5
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
5
6
|
//#region src/components/Select/Select.tsx
|
|
6
|
-
var
|
|
7
|
-
let
|
|
8
|
-
return /* @__PURE__ */
|
|
9
|
-
label:
|
|
10
|
-
labelPosition:
|
|
11
|
-
error:
|
|
12
|
-
required:
|
|
13
|
-
className:
|
|
14
|
-
style:
|
|
15
|
-
children: /* @__PURE__ */
|
|
16
|
-
id:
|
|
17
|
-
...
|
|
18
|
-
children:
|
|
7
|
+
var i = ({ label: i, id: a, labelPosition: o = "top", required: s = !1, error: c, options: l = [], className: u, style: d, ...f }) => {
|
|
8
|
+
let p = t(), m = a || p;
|
|
9
|
+
return /* @__PURE__ */ r(e, {
|
|
10
|
+
label: i,
|
|
11
|
+
labelPosition: o,
|
|
12
|
+
error: c,
|
|
13
|
+
required: s,
|
|
14
|
+
className: n("select", u),
|
|
15
|
+
style: d,
|
|
16
|
+
children: /* @__PURE__ */ r("select", {
|
|
17
|
+
id: m,
|
|
18
|
+
...f,
|
|
19
|
+
children: l.map((e, t) => /* @__PURE__ */ r("option", {
|
|
19
20
|
value: e.value,
|
|
20
21
|
children: e.label
|
|
21
|
-
}, `${
|
|
22
|
+
}, `${m}-opt-${t}`))
|
|
22
23
|
})
|
|
23
24
|
});
|
|
24
25
|
};
|
|
25
26
|
//#endregion
|
|
26
|
-
export {
|
|
27
|
+
export { i as Select };
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { isItemData as e } from "./utilities.esm.js";
|
|
3
|
-
import t from "
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
3
|
+
import { useEffect as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
|
|
4
|
+
import a from "clsx";
|
|
5
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
6
6
|
import { draggable as s, dropTargetForElements as c } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
|
|
7
7
|
import { combine as l } from "@atlaskit/pragmatic-drag-and-drop/utils/combine";
|
|
8
8
|
//#region src/components/SortableList/ListItem.tsx
|
|
9
9
|
function u({ item: u, index: d, getKey: f, renderItem: p, disabled: m, listId: h }) {
|
|
10
|
-
let [g, _] =
|
|
11
|
-
return
|
|
10
|
+
let [g, _] = i(null), [v, y] = i(null), [b, x] = i(!1), [S, C] = i(null), w = r(null), T = r(null), E = f(u, d);
|
|
11
|
+
return n(() => {
|
|
12
12
|
w.current = g;
|
|
13
13
|
let e = w.current;
|
|
14
14
|
if (!e) return;
|
|
@@ -18,7 +18,7 @@ function u({ item: u, index: d, getKey: f, renderItem: p, disabled: m, listId: h
|
|
|
18
18
|
!r || window.matchMedia("(prefers-reduced-motion: reduce)").matches || (e.style.transition = "none", e.style.transform = `translateY(${r}px)`, requestAnimationFrame(() => {
|
|
19
19
|
e.style.transition = "", e.style.transform = "";
|
|
20
20
|
}));
|
|
21
|
-
}, [g, d]),
|
|
21
|
+
}, [g, d]), t(() => {
|
|
22
22
|
if (!g || m) return;
|
|
23
23
|
let t = {
|
|
24
24
|
key: E,
|
|
@@ -51,9 +51,9 @@ function u({ item: u, index: d, getKey: f, renderItem: p, disabled: m, listId: h
|
|
|
51
51
|
m,
|
|
52
52
|
h,
|
|
53
53
|
u
|
|
54
|
-
]), /* @__PURE__ */
|
|
54
|
+
]), /* @__PURE__ */ o("li", {
|
|
55
55
|
ref: _,
|
|
56
|
-
className:
|
|
56
|
+
className: a("sortable-list-item", b && "dragging", S && `drop-${S}`),
|
|
57
57
|
children: p({
|
|
58
58
|
item: u,
|
|
59
59
|
index: d,
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import './SortableList.css';/* empty css
|
|
2
|
+
import './SortableList.css';/* empty css */
|
|
3
3
|
import { isItemData as e } from "./utilities.esm.js";
|
|
4
4
|
import { SortableListItem as t } from "./ListItem.esm.js";
|
|
5
|
-
import n from "
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
5
|
+
import { useEffect as n, useId as r } from "react";
|
|
6
|
+
import i from "clsx";
|
|
7
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
8
8
|
import { monitorForElements as o } from "@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter";
|
|
9
9
|
import { reorder as s } from "@atlaskit/pragmatic-drag-and-drop/utils/reorder";
|
|
10
10
|
//#region src/components/SortableList/SortableList.tsx
|
|
11
11
|
var c = ({ items: c, getKey: l, renderItem: u, onReorder: d, disabled: f, className: p, style: m, listId: h, onReceive: g }) => {
|
|
12
|
-
let _ =
|
|
12
|
+
let _ = r(), v = h ?? _, y = (e, t) => {
|
|
13
13
|
let n = c.findIndex((t, n) => l(t, n) === e), r = c.findIndex((e, n) => l(e, n) === t);
|
|
14
14
|
n === -1 || r === -1 || n === r || d(s({
|
|
15
15
|
list: c,
|
|
@@ -23,7 +23,7 @@ var c = ({ items: c, getKey: l, renderItem: u, onReorder: d, disabled: f, classN
|
|
|
23
23
|
let n = c.findIndex((e, n) => l(e, n) === t);
|
|
24
24
|
g?.(e, n === -1 ? c.length : n);
|
|
25
25
|
};
|
|
26
|
-
return
|
|
26
|
+
return n(() => {
|
|
27
27
|
if (!f) return o({ onDrop: ({ source: t, location: n }) => {
|
|
28
28
|
let r = n.current.dropTargets[0];
|
|
29
29
|
if (!r || !e(t.data) || !e(r.data)) return;
|
|
@@ -37,10 +37,10 @@ var c = ({ items: c, getKey: l, renderItem: u, onReorder: d, disabled: f, classN
|
|
|
37
37
|
f,
|
|
38
38
|
v,
|
|
39
39
|
g
|
|
40
|
-
]), /* @__PURE__ */
|
|
41
|
-
className:
|
|
40
|
+
]), /* @__PURE__ */ a("ul", {
|
|
41
|
+
className: i("sortable-list", p),
|
|
42
42
|
style: m,
|
|
43
|
-
children: c.map((e, n) => /* @__PURE__ */
|
|
43
|
+
children: c.map((e, n) => /* @__PURE__ */ a(t, {
|
|
44
44
|
item: e,
|
|
45
45
|
index: n,
|
|
46
46
|
getKey: l,
|
|
@@ -11,15 +11,17 @@ Props:
|
|
|
11
11
|
- Inherits all native HTML element props.
|
|
12
12
|
- `as?: TextTags` — HTML tag to render (default: `"div"`)
|
|
13
13
|
- `richText?: boolean` — when `true`, renders sanitized HTML from a string `children` value (always renders as `<div>`)
|
|
14
|
-
- `type?: TextType` — overrides base type styling (e.g. `"display"`, `"heading"`)
|
|
14
|
+
- `type?: TextType` — **deprecated, legacy support only** — overrides base type styling (e.g. `"display"`, `"heading"`)
|
|
15
15
|
- `size?: TextSize` — overrides base size styling
|
|
16
|
-
- `alignment?: "center" | "left" | "right"` — legacy text-align shorthand
|
|
16
|
+
- `alignment?: "center" | "left" | "right"` — **deprecated, legacy support only** — text-align shorthand
|
|
17
17
|
|
|
18
18
|
Behavior notes:
|
|
19
19
|
|
|
20
20
|
- Uses global HTML5 tag declarations by default; `type` and `size` override base styling.
|
|
21
21
|
- `richText` mode sanitizes HTML via DOMPurify. Always pass a string as `children` in this mode.
|
|
22
22
|
- Prefer semantic HTML5 tags via `as` over using `type`/`size` overrides.
|
|
23
|
+
- Prefer plain semantic HTML5 elements (`<p>`, `<h1>`-`<h6>`, `<span>`, etc.) over `Text` for ordinary static content. Reach for `Text` primarily when rendering rich text from a CMS (`richText` mode).
|
|
24
|
+
- Do not use `type` or `alignment` — both are deprecated and exist only for legacy support.
|
|
23
25
|
|
|
24
26
|
Example:
|
|
25
27
|
|