@stamcat/craftsman 0.0.27-alpha.13 → 0.0.27-alpha.15
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/Components.esm.js +11 -9
- package/Utilities.esm.js +2 -2
- package/package.json +6 -1
- package/src/components/{Input → Checkbox}/Checkbox.d.ts +2 -3
- package/src/components/{Input → Checkbox}/Checkbox.esm.js +2 -2
- package/src/components/DatePicker/DatePicker.css +1 -0
- package/src/components/DatePicker/DatePicker.d.ts +8 -0
- package/src/{styles/global/components/_reactDatePicker.scss → components/DatePicker/DatePicker.scss} +5 -4
- package/src/components/{Input/DatePicker.esm.js → DatePicker/DatePicker2.esm.js} +4 -4
- package/src/components/DatePicker/ReactCalendar.css +1 -0
- package/src/components/DatePicker/ReactCalendar.scss +239 -0
- package/src/components/DateTimePicker/DateTimePicker.d.ts +8 -0
- package/src/components/{Input → InputPassword}/InputPassword.d.ts +1 -1
- package/src/components/{Input → InputPassword}/InputPassword.esm.js +2 -2
- package/src/{styles/global/components/_reactPhone.css → components/InputPhone/InputPhone.css} +1 -1
- package/src/components/{Input → InputPhone}/InputPhone.d.ts +1 -1
- package/src/components/InputPhone/InputPhone.scss +266 -0
- package/src/components/{Input/InputPhone.esm.js → InputPhone/InputPhone2.esm.js} +3 -3
- package/src/components/{Input → RadioButton}/RadioButton.d.ts +1 -1
- package/src/components/{Input → RadioButton}/RadioButton.esm.js +2 -2
- package/src/components/{Input → Textarea}/Textarea.d.ts +1 -1
- package/src/components/{Input → Textarea}/Textarea.esm.js +2 -2
- package/src/components/TimePicker/TimePicker.css +1 -0
- package/src/components/TimePicker/TimePicker.d.ts +5 -4
- package/src/components/TimePicker/TimePicker.scss +29 -0
- package/src/components/TimePicker/TimePicker2.esm.js +129 -0
- package/src/components/TimePicker/TimePickerDisplay.d.ts +6 -1
- package/src/components/TimePicker/TimePickerWheel.esm.js +61 -0
- package/src/components/TimePicker/constants.esm.js +3 -0
- package/src/components/TimePicker/utilities.d.ts +1 -0
- package/src/components/TimePicker/utilities.esm.js +20 -0
- package/src/components/Tooltip/Tooltip.d.ts +12 -0
- package/src/components/Tooltip/Tooltip.scss +29 -0
- package/src/components/index.d.ts +7 -6
- package/src/utilities/validations.d.ts +1 -0
- package/src/utilities/validations.esm.js +7 -4
- package/src/components/Input/DatePicker.d.ts +0 -8
- package/src/styles/global/components/_reactCalendar.css +0 -1
- package/src/styles/global/components/_reactCalendar.scss +0 -237
- package/src/styles/global/components/_reactDatePicker.css +0 -1
- package/src/styles/global/components/_reactPhone.scss +0 -265
package/Components.esm.js
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
|
|
2
2
|
import { Button as t } from "./src/components/Button/Button.esm.js";
|
|
3
3
|
import { Input as n } from "./src/components/Input/Input2.esm.js";
|
|
4
|
-
import { InputPassword as r } from "./src/components/
|
|
4
|
+
import { InputPassword as r } from "./src/components/InputPassword/InputPassword.esm.js";
|
|
5
5
|
import { Loader as i } from "./src/components/Loader/Loader.esm.js";
|
|
6
|
-
import { RadioButton as a } from "./src/components/
|
|
7
|
-
import { Checkbox as o } from "./src/components/
|
|
8
|
-
import { Textarea as s } from "./src/components/
|
|
6
|
+
import { RadioButton as a } from "./src/components/RadioButton/RadioButton.esm.js";
|
|
7
|
+
import { Checkbox as o } from "./src/components/Checkbox/Checkbox.esm.js";
|
|
8
|
+
import { Textarea as s } from "./src/components/Textarea/Textarea.esm.js";
|
|
9
9
|
import { Text as c } from "./src/components/Text/Text2.esm.js";
|
|
10
10
|
import { Modal as l } from "./src/components/Modal/Modal.esm.js";
|
|
11
11
|
import { Select as u } from "./src/components/Select/Select.esm.js";
|
|
12
|
-
import { DatePicker as d } from "./src/components/
|
|
13
|
-
import { InputPhone as f } from "./src/components/
|
|
12
|
+
import { DatePicker as d } from "./src/components/DatePicker/DatePicker2.esm.js";
|
|
13
|
+
import { InputPhone as f } from "./src/components/InputPhone/InputPhone2.esm.js";
|
|
14
14
|
import { Pagination as p } from "./src/components/Pagination/Pagination2.esm.js";
|
|
15
15
|
import { Carousel as m } from "./src/components/Carousel/Carousel2.esm.js";
|
|
16
|
+
import { TimePicker as h } from "./src/components/TimePicker/TimePicker2.esm.js";
|
|
16
17
|
//#region src/components/index.ts
|
|
17
|
-
var
|
|
18
|
+
var g = /* @__PURE__ */ e({
|
|
18
19
|
Button: () => t,
|
|
19
20
|
Carousel: () => m,
|
|
20
21
|
Checkbox: () => o,
|
|
@@ -28,7 +29,8 @@ var h = /* @__PURE__ */ e({
|
|
|
28
29
|
RadioButton: () => a,
|
|
29
30
|
Select: () => u,
|
|
30
31
|
Text: () => c,
|
|
31
|
-
Textarea: () => s
|
|
32
|
+
Textarea: () => s,
|
|
33
|
+
TimePicker: () => h
|
|
32
34
|
});
|
|
33
35
|
//#endregion
|
|
34
|
-
export { t as Button, m as Carousel, o as Checkbox, d as DatePicker, n as Input, r as InputPassword, f as InputPhone, i as Loader, l as Modal, p as Pagination, a as RadioButton, u as Select, c as Text, s as Textarea, h as components_exports };
|
|
36
|
+
export { t as Button, m as Carousel, o as Checkbox, d as DatePicker, n as Input, r as InputPassword, f as InputPhone, i as Loader, l as Modal, p as Pagination, a as RadioButton, u as Select, c as Text, s as Textarea, h as TimePicker, g as components_exports };
|
package/Utilities.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { getAmPmLabels as e, getUnitLabel as t, is24HourFormat as n, isEmpty as r,
|
|
2
|
-
export { e as getAmPmLabels, t as getUnitLabel, n as is24HourFormat, r as isEmpty, i as validateEmail };
|
|
1
|
+
import { getAmPmLabels as e, getUnitLabel as t, is24HourFormat as n, isEmpty as r, isTouchDevice as i, validateEmail as a } from "./src/utilities/validations.esm.js";
|
|
2
|
+
export { e as getAmPmLabels, t as getUnitLabel, n as is24HourFormat, r as isEmpty, i as isTouchDevice, a as validateEmail };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stamcat/craftsman",
|
|
3
|
-
"version": "0.0.27-alpha.
|
|
3
|
+
"version": "0.0.27-alpha.15",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A powerful, lightweight framework for design systems",
|
|
6
6
|
"repository": {
|
|
@@ -35,6 +35,7 @@
|
|
|
35
35
|
"react-icons": "5.7.0",
|
|
36
36
|
"react-international-phone": "4.8.0",
|
|
37
37
|
"react-intl": "10.1.20",
|
|
38
|
+
"react-time-picker": "8.1.0",
|
|
38
39
|
"react-toastify": "11.1.0",
|
|
39
40
|
"sass-embedded": "1.100.0",
|
|
40
41
|
"typescript-plugin-css-modules": "5.2.0",
|
|
@@ -119,6 +120,10 @@
|
|
|
119
120
|
"./Carousel": {
|
|
120
121
|
"types": "./src/components/Carousel.d.ts",
|
|
121
122
|
"default": "./src/components/Carousel.esm.js"
|
|
123
|
+
},
|
|
124
|
+
"./TimePicker": {
|
|
125
|
+
"types": "./src/components/TimePicker.d.ts",
|
|
126
|
+
"default": "./src/components/TimePicker.esm.js"
|
|
122
127
|
}
|
|
123
128
|
}
|
|
124
129
|
}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { InputProps } from '
|
|
2
|
-
type CheckboxProps = InputProps & {
|
|
1
|
+
import { InputProps } from '../Input/Input';
|
|
2
|
+
export type CheckboxProps = InputProps & {
|
|
3
3
|
type?: "checkbox";
|
|
4
4
|
labelPosition?: "left" | "right" | "top" | "bottom";
|
|
5
5
|
};
|
|
6
6
|
export declare const Checkbox: React.FC<CheckboxProps>;
|
|
7
|
-
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { Input as e } from "
|
|
2
|
+
import { Input as e } from "../Input/Input2.esm.js";
|
|
3
3
|
import { jsx as t } from "react/jsx-runtime";
|
|
4
|
-
//#region src/components/
|
|
4
|
+
//#region src/components/Checkbox/Checkbox.tsx
|
|
5
5
|
var n = ({ type: n = "checkbox", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
|
|
6
6
|
type: n,
|
|
7
7
|
labelPosition: r,
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer craftsman-base{.react-date-picker__wrapper:focus,.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper,.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:3px}[type=number].react-date-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper::-webkit-inner-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-date-picker__wrapper,[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.react-datetime-picker__wrapper:disabled,.disabled.react-date-picker__wrapper,.disabled.react-datetime-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after,.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}.react-date-picker,.react-datetime-picker{display:inline-flex;position:relative}.react-date-picker--disabled,.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper,.react-datetime-picker__wrapper{border:1px solid var(--gray400);border-radius:3px;flex-grow:1;flex-shrink:0;padding:2px;display:flex}.react-date-picker__inputGroup,.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider,.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero,.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-picker__inputGroup__input,.react-datetime-picker__inputGroup__input{color:currentColor;min-width:.54em;height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}.react-date-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-date-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.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-date-picker__inputGroup__input--hasLeadingZero,.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button,.react-datetime-picker__button{background:0 0;border:0;padding:4px 6px}.react-date-picker__button :enabled,.react-datetime-picker__button :enabled{cursor:pointer}.react-date-picker__button :enabled:hover .react-date-picker__button__icon,.react-date-picker__button :enabled:hover .react-datetime-picker__button__icon,.react-date-picker__button :enabled:focus .react-date-picker__button__icon,.react-date-picker__button :enabled:focus .react-datetime-picker__button__icon,.react-datetime-picker__button :enabled:hover .react-date-picker__button__icon,.react-datetime-picker__button :enabled:hover .react-datetime-picker__button__icon,.react-datetime-picker__button :enabled:focus .react-date-picker__button__icon,.react-datetime-picker__button :enabled:focus .react-datetime-picker__button__icon{stroke:#0078d7}.react-date-picker__button :disabled .react-date-picker__button__icon,.react-date-picker__button :disabled .react-datetime-picker__button__icon,.react-datetime-picker__button :disabled .react-date-picker__button__icon,.react-datetime-picker__button :disabled .react-datetime-picker__button__icon{stroke:#6d6d6d}.react-date-picker__button svg,.react-datetime-picker__button svg{display:inherit}.react-date-picker__calendar--closed,.react-date-picker__clock--closed,.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.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-datetime-picker__clock{background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { LabeledInput } from '../Input/InputWrapper';
|
|
3
|
+
import { DatePickerProps as ReactDatePickerProps } from 'react-date-picker';
|
|
4
|
+
export type DatePickerProps = ReactDatePickerProps & LabeledInput & {
|
|
5
|
+
id?: string;
|
|
6
|
+
style?: React.CSSProperties;
|
|
7
|
+
};
|
|
8
|
+
export declare const DatePicker: React.FC<DatePickerProps>;
|
package/src/{styles/global/components/_reactDatePicker.scss → components/DatePicker/DatePicker.scss}
RENAMED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
@use "
|
|
2
|
-
@use "../../utilities/functions" as u;
|
|
3
|
-
|
|
4
|
-
.react-date-picker,
|
|
1
|
+
@use "../../styles/global/components/input";
|
|
2
|
+
@use "../../styles/utilities/functions" as u;
|
|
3
|
+
@layer craftsman-base {
|
|
4
|
+
.react-date-picker,
|
|
5
5
|
.react-date-picker *,
|
|
6
6
|
.react-date-picker *:before,
|
|
7
7
|
.react-date-picker *:after,
|
|
@@ -150,3 +150,4 @@
|
|
|
150
150
|
.react-date-picker__inputGroup__input:invalid, .react-datetime-picker__inputGroup__input:invalid {
|
|
151
151
|
background: unset;
|
|
152
152
|
}
|
|
153
|
+
}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { InputWrapper as e } from "
|
|
3
|
-
import '
|
|
4
|
-
/* empty css
|
|
2
|
+
import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
|
|
3
|
+
import './ReactCalendar.css';import './DatePicker.css';/* empty css */
|
|
4
|
+
/* empty css */
|
|
5
5
|
import t from "clsx";
|
|
6
6
|
import { jsx as n } from "react/jsx-runtime";
|
|
7
7
|
import { useId as r } from "react";
|
|
8
8
|
import { DatePicker as i } from "react-date-picker";
|
|
9
|
-
//#region src/components/
|
|
9
|
+
//#region src/components/DatePicker/DatePicker.tsx
|
|
10
10
|
var a = ({ label: a, id: o, labelPosition: s = "top", required: c = !1, error: l, style: u, className: d, ...f }) => {
|
|
11
11
|
let p = r();
|
|
12
12
|
return /* @__PURE__ */ n(e, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@layer craftsman-base{.react-calendar{background:#fff;border:1px solid #a0a096;width:350px;max-width:100%;font-family:Arial,Helvetica,sans-serif;line-height:1.125em}.react-calendar--doubleView{width:700px}.react-calendar--doubleView .react-calendar__viewContainer{margin:-.5em;display:flex}.react-calendar--doubleView .react-calendar__viewContainer>*{width:50%;margin:.5em}.react-calendar,.react-calendar *,.react-calendar :before,.react-calendar :after{box-sizing:border-box}.react-calendar button{border:0;outline:none;margin:0}.react-calendar button:enabled:hover{cursor:pointer}.react-calendar__navigation{height:44px;margin-bottom:1em;display:flex}.react-calendar__navigation button{background:0 0;min-width:44px}.react-calendar__navigation button:disabled{background-color:#f0f0f0}.react-calendar__navigation button:enabled:hover,.react-calendar__navigation button:enabled:focus{background-color:#e6e6e6}.react-calendar__month-view__weekdays{text-align:center;text-transform:uppercase;font:inherit;font-size:.75em;font-weight:700}.react-calendar__month-view__weekdays__weekday{padding:.5em}.react-calendar__month-view__weekNumbers .react-calendar__tile{font:inherit;justify-content:center;align-items:center;font-size:.75em;font-weight:700;display:flex}.react-calendar__month-view__days__day--weekend{color:#d10000}.react-calendar__month-view__days__day--neighboringMonth,.react-calendar__decade-view__years__year--neighboringDecade,.react-calendar__century-view__decades__decade--neighboringCentury{color:#757575}.react-calendar__year-view .react-calendar__tile,.react-calendar__decade-view .react-calendar__tile,.react-calendar__century-view .react-calendar__tile{padding:2em .5em}.react-calendar__tile{text-align:center;max-width:100%;font:inherit;background:0 0;padding:10px 6.6667px;font-size:.833em}.react-calendar__tile:disabled{color:#ababab;background-color:#f0f0f0}.react-calendar__month-view__days__day--neighboringMonth:disabled,.react-calendar__decade-view__years__year--neighboringDecade:disabled,.react-calendar__century-view__decades__decade--neighboringCentury:disabled{color:#cdcdcd}.react-calendar__tile:enabled:hover,.react-calendar__tile:enabled:focus{background-color:#e6e6e6}.react-calendar__tile--now{background:#ffff76}.react-calendar__tile--now:enabled:hover,.react-calendar__tile--now:enabled:focus{background:#ffffa9}.react-calendar__tile--hasActive{background:#76baff}.react-calendar__tile--hasActive:enabled:hover,.react-calendar__tile--hasActive:enabled:focus{background:#a9d4ff}.react-calendar__tile--active{color:#fff;background:#006edc}.react-calendar__tile--active:enabled:hover,.react-calendar__tile--active:enabled:focus{background:#1087ff}.react-calendar--selectRange .react-calendar__tile--hover{background-color:#e6e6e6}.react-calendar{border-color:var(--gray400)}.react-calendar button{justify-content:center}.react-calendar__month-view__days button.react-calendar__tile{height:50px}.react-calendar__month-view__days button.react-calendar__tile:hover,.react-calendar__month-view__days button.react-calendar__tile--active,.react-calendar__month-view__days button.react-calendar__tile--now{border-radius:50%}.react-datetime-picker button{color:unset}.react-datetime-picker button.react-calendar__tile--active{background-color:var(--blue500);color:var(--white)}.react-datetime-picker button.react-calendar__tile--active:hover{background-color:var(--blue500)}.react-datetime-picker button.react-calendar__tile--now{border:1px solid var(--text)}.react-datetime-picker button.react-calendar__tile--now:hover{background-color:var(--gray100)}.react-datetime-picker button.react-calendar__tile--hasActive{background:var(--blue500)}.react-datetime-picker button.react-calendar__tile--hasActive:hover{background:var(--blue300)}.react-datetime-picker button:hover{background-color:unset}.react-datetime-picker input[type=number]{appearance:textfield}.react-datetime-picker input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.react-datetime-picker input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.react-datetime-picker input{background-color:unset;border:unset;box-sizing:unset;border-radius:unset}.react-datetime-picker input:focus,.react-datetime-picker input:focus-visible{border:unset;color:unset;background:unset;outline:none}}
|
|
@@ -0,0 +1,239 @@
|
|
|
1
|
+
@use "../../styles/utilities/functions" as u;
|
|
2
|
+
|
|
3
|
+
@layer craftsman-base {
|
|
4
|
+
.react-calendar {
|
|
5
|
+
width: 350px;
|
|
6
|
+
max-width: 100%;
|
|
7
|
+
background: white;
|
|
8
|
+
border: 1px solid #a0a096;
|
|
9
|
+
font-family: "Arial", "Helvetica", sans-serif;
|
|
10
|
+
line-height: 1.125em;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.react-calendar--doubleView {
|
|
14
|
+
width: 700px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.react-calendar--doubleView .react-calendar__viewContainer {
|
|
18
|
+
display: flex;
|
|
19
|
+
margin: -0.5em;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.react-calendar--doubleView .react-calendar__viewContainer > * {
|
|
23
|
+
width: 50%;
|
|
24
|
+
margin: 0.5em;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.react-calendar,
|
|
28
|
+
.react-calendar *,
|
|
29
|
+
.react-calendar *:before,
|
|
30
|
+
.react-calendar *:after {
|
|
31
|
+
-moz-box-sizing: border-box;
|
|
32
|
+
-webkit-box-sizing: border-box;
|
|
33
|
+
box-sizing: border-box;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.react-calendar button {
|
|
37
|
+
margin: 0;
|
|
38
|
+
border: 0;
|
|
39
|
+
outline: none;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.react-calendar button:enabled:hover {
|
|
43
|
+
cursor: pointer;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.react-calendar__navigation {
|
|
47
|
+
display: flex;
|
|
48
|
+
height: 44px;
|
|
49
|
+
margin-bottom: 1em;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.react-calendar__navigation button {
|
|
53
|
+
min-width: 44px;
|
|
54
|
+
background: none;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.react-calendar__navigation button:disabled {
|
|
58
|
+
background-color: #f0f0f0;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.react-calendar__navigation button:enabled:hover,
|
|
62
|
+
.react-calendar__navigation button:enabled:focus {
|
|
63
|
+
background-color: #e6e6e6;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.react-calendar__month-view__weekdays {
|
|
67
|
+
text-align: center;
|
|
68
|
+
text-transform: uppercase;
|
|
69
|
+
font: inherit;
|
|
70
|
+
font-size: 0.75em;
|
|
71
|
+
font-weight: bold;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.react-calendar__month-view__weekdays__weekday {
|
|
75
|
+
padding: 0.5em;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.react-calendar__month-view__weekNumbers .react-calendar__tile {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
justify-content: center;
|
|
82
|
+
font: inherit;
|
|
83
|
+
font-size: 0.75em;
|
|
84
|
+
font-weight: bold;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.react-calendar__month-view__days__day--weekend {
|
|
88
|
+
color: #d10000;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.react-calendar__month-view__days__day--neighboringMonth,
|
|
92
|
+
.react-calendar__decade-view__years__year--neighboringDecade,
|
|
93
|
+
.react-calendar__century-view__decades__decade--neighboringCentury {
|
|
94
|
+
color: #757575;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.react-calendar__year-view .react-calendar__tile,
|
|
98
|
+
.react-calendar__decade-view .react-calendar__tile,
|
|
99
|
+
.react-calendar__century-view .react-calendar__tile {
|
|
100
|
+
padding: 2em 0.5em;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.react-calendar__tile {
|
|
104
|
+
max-width: 100%;
|
|
105
|
+
padding: 10px 6.6667px;
|
|
106
|
+
background: none;
|
|
107
|
+
text-align: center;
|
|
108
|
+
font: inherit;
|
|
109
|
+
font-size: 0.833em;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.react-calendar__tile:disabled {
|
|
113
|
+
background-color: #f0f0f0;
|
|
114
|
+
color: #ababab;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.react-calendar__month-view__days__day--neighboringMonth:disabled,
|
|
118
|
+
.react-calendar__decade-view__years__year--neighboringDecade:disabled,
|
|
119
|
+
.react-calendar__century-view__decades__decade--neighboringCentury:disabled {
|
|
120
|
+
color: #cdcdcd;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.react-calendar__tile:enabled:hover,
|
|
124
|
+
.react-calendar__tile:enabled:focus {
|
|
125
|
+
background-color: #e6e6e6;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.react-calendar__tile--now {
|
|
129
|
+
background: #ffff76;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.react-calendar__tile--now:enabled:hover,
|
|
133
|
+
.react-calendar__tile--now:enabled:focus {
|
|
134
|
+
background: #ffffa9;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.react-calendar__tile--hasActive {
|
|
138
|
+
background: #76baff;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.react-calendar__tile--hasActive:enabled:hover,
|
|
142
|
+
.react-calendar__tile--hasActive:enabled:focus {
|
|
143
|
+
background: #a9d4ff;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.react-calendar__tile--active {
|
|
147
|
+
background: #006edc;
|
|
148
|
+
color: white;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.react-calendar__tile--active:enabled:hover,
|
|
152
|
+
.react-calendar__tile--active:enabled:focus {
|
|
153
|
+
background: #1087ff;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.react-calendar--selectRange .react-calendar__tile--hover {
|
|
157
|
+
background-color: #e6e6e6;
|
|
158
|
+
}
|
|
159
|
+
.react-calendar {
|
|
160
|
+
border-color: #{u.color("gray400")};
|
|
161
|
+
}
|
|
162
|
+
.react-calendar button {
|
|
163
|
+
justify-content: center;
|
|
164
|
+
}
|
|
165
|
+
.react-calendar__month-view__days {
|
|
166
|
+
button {
|
|
167
|
+
&.react-calendar__tile {
|
|
168
|
+
height: 50px;
|
|
169
|
+
&:hover {
|
|
170
|
+
border-radius: 50%;
|
|
171
|
+
}
|
|
172
|
+
&--active {
|
|
173
|
+
border-radius: 50%;
|
|
174
|
+
}
|
|
175
|
+
&--now {
|
|
176
|
+
border-radius: 50%;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
// .react-calendar__month-view__days__day--weekend {
|
|
183
|
+
// color: unset;
|
|
184
|
+
// }
|
|
185
|
+
.react-datetime-picker {
|
|
186
|
+
button {
|
|
187
|
+
color: unset;
|
|
188
|
+
&.react-calendar__tile {
|
|
189
|
+
&--active {
|
|
190
|
+
background-color: #{u.color("blue500")};
|
|
191
|
+
color: #{u.color("white")};
|
|
192
|
+
&:hover {
|
|
193
|
+
background-color: #{u.color("blue500")};
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
&--now {
|
|
197
|
+
// background-color: unset;
|
|
198
|
+
border: 1px solid #{u.color("text")};
|
|
199
|
+
&:hover {
|
|
200
|
+
background-color: #{u.color("gray100")};
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
&--hasActive {
|
|
204
|
+
background: #{u.color("blue500")};
|
|
205
|
+
&:hover {
|
|
206
|
+
background: #{u.color("blue300")};
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
}
|
|
210
|
+
&:hover {
|
|
211
|
+
background-color: unset;
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
input {
|
|
215
|
+
/* Disable spinner/flipper buttons */
|
|
216
|
+
&[type="number"] {
|
|
217
|
+
-webkit-appearance: textfield;
|
|
218
|
+
-moz-appearance: textfield;
|
|
219
|
+
appearance: textfield;
|
|
220
|
+
}
|
|
221
|
+
&::-webkit-inner-spin-button,
|
|
222
|
+
&::-webkit-outer-spin-button {
|
|
223
|
+
-webkit-appearance: none;
|
|
224
|
+
margin: 0;
|
|
225
|
+
}
|
|
226
|
+
background-color: unset;
|
|
227
|
+
border: unset;
|
|
228
|
+
box-sizing: unset;
|
|
229
|
+
border-radius: unset;
|
|
230
|
+
&:focus,
|
|
231
|
+
&:focus-visible {
|
|
232
|
+
border: unset;
|
|
233
|
+
color: unset;
|
|
234
|
+
background: unset;
|
|
235
|
+
outline: none;
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { LabeledInput } from '../Input/InputWrapper';
|
|
3
|
+
import { DateTimePickerProps as ReactDateTimePickerProps } from 'react-datetime-picker';
|
|
4
|
+
export type DateTimePickerProps = ReactDateTimePickerProps & LabeledInput & {
|
|
5
|
+
id?: string;
|
|
6
|
+
style?: React.CSSProperties;
|
|
7
|
+
};
|
|
8
|
+
export declare const DateTimePicker: React.FC<DateTimePickerProps>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TextInputType } from '../../utilities/types';
|
|
2
|
-
import { InputProps } from '
|
|
2
|
+
import { InputProps } from '../Input/Input';
|
|
3
3
|
export type InputPasswordProps = React.ComponentProps<"input"> & {} & Omit<InputProps, "type" | "endAdornment"> & {
|
|
4
4
|
type?: Extract<TextInputType, "password">;
|
|
5
5
|
};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Button as e } from "../Button/Button.esm.js";
|
|
3
|
-
import { Input as t } from "
|
|
3
|
+
import { Input as t } from "../Input/Input2.esm.js";
|
|
4
4
|
import { jsx as n } from "react/jsx-runtime";
|
|
5
5
|
import { useState as r } from "react";
|
|
6
6
|
import { ImEye as i, ImEyeBlocked as a } from "react-icons/im";
|
|
7
|
-
//#region src/components/
|
|
7
|
+
//#region src/components/InputPassword/InputPassword.tsx
|
|
8
8
|
var o = ({ visible: t, onToggle: r }) => /* @__PURE__ */ n(e, {
|
|
9
9
|
type: "button",
|
|
10
10
|
variant: "text",
|
package/src/{styles/global/components/_reactPhone.css → components/InputPhone/InputPhone.css}
RENAMED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer craftsman-base
|
|
1
|
+
@layer craftsman-base{.input-phone[data-label-position=inside] .input-label{top:15px;left:50px}.input-phone .react-international-phone-country-selector{position:relative}.input-phone .react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width,24px);height:var(--react-international-phone-flag-height,24px);box-sizing:border-box}.input-phone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.input-phone .react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover,whitesmoke)}.input-phone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.input-phone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.input-phone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.input-phone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.input-phone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.input-phone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.input-phone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.input-phone .react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size,4px) solid var(--react-international-phone-country-selector-arrow-color,#777);border-right:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size,4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.input-phone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.input-phone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.input-phone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.input-phone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin,0);background:var(--react-international-phone-dropdown-preferred-list-divider-color,var(--react-international-phone-border-color,gainsboro));border:none}.input-phone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.input-phone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.input-phone .react-international-phone-country-selector-dropdown__list-item--selected,.input-phone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color,var(--react-international-phone-text-color,#222))}.input-phone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.input-phone .react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color,var(--react-international-phone-dropdown-item-dial-code-color,gray))}.input-phone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.input-phone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.input-phone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.input-phone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.input-phone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));background-color:var(--react-international-phone-dial-code-preview-background-color,var(--react-international-phone-background-color,white));color:var(--react-international-phone-dial-code-preview-text-color,var(--react-international-phone-text-color,#222));font-size:var(--react-international-phone-dial-code-preview-font-size,var(--react-international-phone-font-size,13px));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.input-phone .react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color,var(--react-international-phone-disabled-text-color,#666))}.input-phone .react-international-phone-input-container{display:flex}.input-phone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.input-phone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.input-phone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.input-phone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
|
-
import { LabeledInput } from '
|
|
2
|
+
import { LabeledInput } from '../Input/InputWrapper';
|
|
3
3
|
import { PhoneInputProps } from 'react-international-phone';
|
|
4
4
|
export type InputProps = PhoneInputProps & LabeledInput & {
|
|
5
5
|
id?: string;
|