@stamcat/craftsman 0.0.27-alpha.14 → 0.0.27-alpha.16

package/AGENTS.md

@@ -76,7 +76,7 @@ hexToRgba(colors.blue500, 0.5)
 **Sass** — import `functions` as `u`:
 
 ```scss
-@use "@stamcat/craftsman/styles/utilities/functions" as u;
+@use "@stamcat/craftsman/styles/utilities/_functions" as u;
 
 .element {
   color:      #{u.color(blue500)};
@@ -103,7 +103,7 @@ width("column", 3)     // calc((var(--w-column) * 3) + (var(--w-gutter) * 2))
 **Sass** — import `functions` as `u`:
 
 ```scss
-@use "@stamcat/craftsman/styles/utilities/functions" as u;
+@use "@stamcat/craftsman/styles/utilities/_functions" as u;
 
 .card {
   padding:   #{u.width(gutter)};
@@ -135,7 +135,7 @@ media.tablet  // => "(min-width: 660px)"
 **Sass** — `@include breakpoint(key)` wraps content in the correct `@media` query:
 
 ```scss
-@use "@stamcat/craftsman/styles/utilities/functions" as u;
+@use "@stamcat/craftsman/styles/utilities/_functions" as u;
 
 .sidebar {
   display: none;

package/Components.esm.js

@@ -1,20 +1,21 @@
 import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
 import { Button as t } from "./src/components/Button/Button.esm.js";
 import { Input as n } from "./src/components/Input/Input2.esm.js";
-import { InputPassword as r } from "./src/components/Input/InputPassword.esm.js";
+import { InputPassword as r } from "./src/components/InputPassword/InputPassword.esm.js";
 import { Loader as i } from "./src/components/Loader/Loader.esm.js";
-import { RadioButton as a } from "./src/components/Input/RadioButton.esm.js";
-import { Checkbox as o } from "./src/components/Input/Checkbox.esm.js";
-import { Textarea as s } from "./src/components/Input/Textarea.esm.js";
+import { RadioButton as a } from "./src/components/RadioButton/RadioButton.esm.js";
+import { Checkbox as o } from "./src/components/Checkbox/Checkbox.esm.js";
+import { Textarea as s } from "./src/components/Textarea/Textarea.esm.js";
 import { Text as c } from "./src/components/Text/Text2.esm.js";
 import { Modal as l } from "./src/components/Modal/Modal.esm.js";
 import { Select as u } from "./src/components/Select/Select.esm.js";
-import { DatePicker as d } from "./src/components/Input/DatePicker.esm.js";
-import { InputPhone as f } from "./src/components/Input/InputPhone.esm.js";
+import { DatePicker as d } from "./src/components/DatePicker/DatePicker2.esm.js";
+import { InputPhone as f } from "./src/components/InputPhone/InputPhone2.esm.js";
 import { Pagination as p } from "./src/components/Pagination/Pagination2.esm.js";
 import { Carousel as m } from "./src/components/Carousel/Carousel2.esm.js";
+import { TimePicker as h } from "./src/components/TimePicker/TimePicker2.esm.js";
 //#region src/components/index.ts
-var h = /* @__PURE__ */ e({
+var g = /* @__PURE__ */ e({
 	Button: () => t,
 	Carousel: () => m,
 	Checkbox: () => o,
@@ -28,7 +29,8 @@ var h = /* @__PURE__ */ e({
 	RadioButton: () => a,
 	Select: () => u,
 	Text: () => c,
-	Textarea: () => s
+	Textarea: () => s,
+	TimePicker: () => h
 });
 //#endregion
-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 };
+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/Styles.esm.js

@@ -1,7 +1,7 @@
-import { defaultColors as e, defaultWidths as t } from "./src/styles/utilities/constants.esm.js";
-import { color as n, colors as r, hexToRgba as i } from "./src/styles/utilities/color.esm.js";
-import { BaseWidthSchema as a, BreakpointSchema as o, ButtonType as s, CarouselPageType as c, LayoutWidthsSchema as l, MaxScreenWidthSchema as u, ScreenWidthSchema as d, TextSize as f, TextTags as p, TextType as m, zLabelPosition as h, zTextInputExclusions as g, zTextInputType as _, zTextInputTypes as v } from "./src/utilities/types.esm.js";
-import { breakpoint as y, media as b, width as x, widths as S } from "./src/styles/utilities/layout.esm.js";
+import { BaseWidthSchema as e, BreakpointSchema as t, ButtonType as n, CarouselPageType as r, LayoutWidthsSchema as i, MaxScreenWidthSchema as a, ScreenWidthSchema as o, TextSize as s, TextTags as c, TextType as l, zLabelPosition as u, zTextInputExclusions as d, zTextInputType as f, zTextInputTypes as p } from "./src/utilities/types.esm.js";
+import { defaultColors as m, defaultWidths as h } from "./src/styles/utilities/constants.esm.js";
+import { breakpoint as g, media as _, width as v, widths as y } from "./src/styles/utilities/layout.esm.js";
+import { color as b, colors as x, hexToRgba as S } from "./src/styles/utilities/color.esm.js";
 import { themeBuilder as C } from "./src/styles/theme/theme.esm.js";
 import { ThemeProvider as w } from "./src/styles/components/ThemeProvider.esm.js";
-export { a as BaseWidthSchema, o as BreakpointSchema, s as ButtonType, c as CarouselPageType, l as LayoutWidthsSchema, u as MaxScreenWidthSchema, d as ScreenWidthSchema, f as TextSize, p as TextTags, m as TextType, w as ThemeProvider, y as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, i as hexToRgba, b as media, C as themeBuilder, x as width, S as widths, h as zLabelPosition, g as zTextInputExclusions, _ as zTextInputType, v as zTextInputTypes };
+export { e as BaseWidthSchema, t as BreakpointSchema, n as ButtonType, r as CarouselPageType, i as LayoutWidthsSchema, a as MaxScreenWidthSchema, o as ScreenWidthSchema, s as TextSize, c as TextTags, l as TextType, w as ThemeProvider, g as breakpoint, b as color, x as colors, m as defaultColors, h as defaultWidths, S as hexToRgba, _ as media, C as themeBuilder, v as width, y as widths, u as zLabelPosition, d as zTextInputExclusions, f as zTextInputType, p as zTextInputTypes };

package/Utilities.esm.js

@@ -1,2 +1,2 @@
-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";
-export { e as getAmPmLabels, t as getUnitLabel, n as is24HourFormat, r as isEmpty, i as isTouchDevice, a as validateEmail };
+import { formatTime as e, getAmPmLabels as t, getUnitLabel as n, is24HourFormat as r, isEmpty as i, isTouchDevice as a, validateEmail as o } from "./src/utilities/validations.esm.js";
+export { e as formatTime, t as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, i as isEmpty, a as isTouchDevice, o as validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.14",
+  "version": "0.0.27-alpha.16",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -35,6 +35,7 @@
     "react-icons": "5.7.0",
     "react-international-phone": "4.8.0",
     "react-intl": "10.1.20",
+    "react-time-picker": "8.1.0",
     "react-toastify": "11.1.0",
     "sass-embedded": "1.100.0",
     "typescript-plugin-css-modules": "5.2.0",
@@ -119,6 +120,10 @@
     "./Carousel": {
       "types": "./src/components/Carousel.d.ts",
       "default": "./src/components/Carousel.esm.js"
+    },
+    "./TimePicker": {
+      "types": "./src/components/TimePicker.d.ts",
+      "default": "./src/components/TimePicker.esm.js"
     }
   }
 }

package/src/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonType } from '../../styles';
+import { ButtonType } from '../../utilities/types';
 export type ButtonProps = React.ComponentProps<"button"> & {
     variant?: ButtonType;
     size?: number;

package/src/components/Button/Button.esm.js

@@ -1,7 +1,6 @@
 "use client";
 import { isEmpty as e } from "../../utilities/validations.esm.js";
 import { width as t } from "../../styles/utilities/layout.esm.js";
-import "../../../Styles.esm.js";
 import n from "clsx";
 import { Fragment as r, jsx as i } from "react/jsx-runtime";
 //#region src/components/Button/Button.tsx

package/src/components/Carousel/Carousel.scss

@@ -1,4 +1,4 @@
-@use "../../styles/utilities/functions" as u;
+@use "../../styles/utilities/_functions" as u;
 
 @layer craftsman-base {
     .carousel {

package/src/components/{Input → Checkbox}/Checkbox.d.ts

@@ -1,7 +1,6 @@
-import { InputProps } from './Input';
-type CheckboxProps = InputProps & {
+import { InputProps } from '../Input/Input';
+export type CheckboxProps = InputProps & {
     type?: "checkbox";
     labelPosition?: "left" | "right" | "top" | "bottom";
 };
 export declare const Checkbox: React.FC<CheckboxProps>;
-export {};

package/src/components/{Input → Checkbox}/Checkbox.esm.js

@@ -1,7 +1,7 @@
 "use client";
-import { Input as e } from "./Input2.esm.js";
+import { Input as e } from "../Input/Input2.esm.js";
 import { jsx as t } from "react/jsx-runtime";
-//#region src/components/Input/Checkbox.tsx
+//#region src/components/Checkbox/Checkbox.tsx
 var n = ({ type: n = "checkbox", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
 	type: n,
 	labelPosition: r,

package/src/components/DatePicker/DatePicker.css

@@ -0,0 +1 @@
+@layer craftsman-base{.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-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-date-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-date-picker__wrapper{appearance:textfield}.react-date-picker__wrapper:disabled,.disabled.react-date-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}.react-date-picker{display:inline-flex;position:relative}.react-date-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-date-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-date-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-date-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-date-picker__inputGroup__divider,.react-date-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-date-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}.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-date-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-date-picker__button{border:0;padding:4px 4px 4px 7px}.react-date-picker__button:hover{background:0 0}.react-date-picker__calendar{z-index:1;width:350px;max-width:100vw}.react-date-picker__calendar .react-calendar{border-width:thin}.react-date-picker__calendar--closed,.react-date-picker__clock--closed{display:none}.react-date-picker__calendar .react-date-picker__inputGroup__input:invalid{background:unset}}.react-date-picker,.react-date-picker *,.react-date-picker :before,.react-date-picker :after{box-sizing:border-box}

package/src/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { LabeledInput } from '../Input/InputWrapper';
+import { DatePickerProps as ReactDatePickerProps } from 'react-date-picker';
+export type DatePickerProps = ReactDatePickerProps & LabeledInput & {
+    id?: string;
+    style?: React.CSSProperties;
+};
+export declare const DatePicker: React.FC<DatePickerProps>;

package/src/components/DatePicker/DatePicker.scss

@@ -0,0 +1,61 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+@use "./_DateTimePicker";
+@layer craftsman-base {
+    .react-date-picker,
+    .react-date-picker *,
+    .react-date-picker *:before,
+    .react-date-picker *:after {
+        @extend %border-box;
+    }
+
+    .react-date-picker {
+        @extend %date-picker-styles;
+        &--disabled {
+            @extend %date-picker-disabled;
+        }
+        &__wrapper {
+            @extend %date-picker-wrapper;
+        }
+        &__inputGroup {
+            @extend %date-picker-input-group;
+        }
+        &__inputGroup__divider {
+            @extend %date-picker-divider;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            @extend %date-picker-leading-zero-divider;
+        }
+        &__inputGroup__input {
+            @extend %date-picker-group-input;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            @extend %date-picker-input-spinner;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            @extend %date-picker-input-leading-zero;
+        }
+        &__button {
+            @extend %date-picker-button;
+        }
+        &__calendar {
+            width: 350px;
+            max-width: 100vw;
+            z-index: 1;
+            .react-calendar {
+                    border-width: thin;
+            }
+        }
+        &__calendar--closed, &__clock--closed {
+            display: none;
+        }
+
+    }
+    .react-date-picker__calendar 
+    .react-date-picker__inputGroup__input:invalid {
+        background: unset;
+    }
+}

package/src/components/DatePicker/DatePicker2.esm.js

@@ -0,0 +1,29 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import './ReactCalendar.css';import './DatePicker.css';/* empty css               */
+/* empty css                  */
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { useId as r } from "react";
+import { DatePicker as i } from "react-date-picker";
+import { FaRegCalendar as a, FaX as o } from "react-icons/fa6";
+//#region src/components/DatePicker/DatePicker.tsx
+var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, error: d, style: f, className: p, ...m }) => {
+	let h = r();
+	return /* @__PURE__ */ n(e, {
+		id: c || h,
+		className: t(p),
+		label: s,
+		labelPosition: l,
+		error: d,
+		required: u,
+		style: f,
+		children: /* @__PURE__ */ n(i, {
+			calendarIcon: /* @__PURE__ */ n(a, { size: 16 }),
+			clearIcon: /* @__PURE__ */ n(o, { size: 14 }),
+			...m
+		})
+	});
+};
+//#endregion
+export { s as DatePicker };

package/src/components/DatePicker/ReactCalendar.css

@@ -0,0 +1 @@
+.react-calendar,.react-calendar *,.react-calendar :before,.react-calendar :after{box-sizing:border-box}@layer craftsman-base{.react-calendar{background:#fff;border:1px solid #a0a096;width:350px;max-width:100%;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 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%}}

package/src/components/DatePicker/ReactCalendar.scss

@@ -0,0 +1,179 @@
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+
+@layer craftsman-base {
+    .react-calendar,
+    .react-calendar *,
+    .react-calendar *:before,
+    .react-calendar *:after {
+        @extend %border-box;
+    }
+
+    .react-calendar {
+        width: 350px;
+        max-width: 100%;
+        background: white;
+        border: 1px solid #a0a096;
+        line-height: 1.125em;
+    }
+
+    .react-calendar--doubleView {
+        width: 700px;
+    }
+
+    .react-calendar--doubleView .react-calendar__viewContainer {
+        display: flex;
+        margin: -0.5em;
+    }
+
+    .react-calendar--doubleView .react-calendar__viewContainer > * {
+        width: 50%;
+        margin: 0.5em;
+    }
+    .react-calendar button {
+        margin: 0;
+        border: 0;
+        outline: none;
+    }
+
+    .react-calendar button:enabled:hover {
+        cursor: pointer;
+    }
+
+    .react-calendar__navigation {
+        display: flex;
+        height: 44px;
+        margin-bottom: 1em;
+    }
+
+    .react-calendar__navigation button {
+        min-width: 44px;
+        background: none;
+    }
+
+    .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: 0.75em;
+        font-weight: bold;
+    }
+
+    .react-calendar__month-view__weekdays__weekday {
+        padding: 0.5em;
+    }
+
+    .react-calendar__month-view__weekNumbers .react-calendar__tile {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font: inherit;
+        font-size: 0.75em;
+        font-weight: bold;
+    }
+
+    .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 0.5em;
+    }
+
+    .react-calendar__tile {
+        max-width: 100%;
+        padding: 10px 6.6667px;
+        background: none;
+        text-align: center;
+        font: inherit;
+        font-size: 0.833em;
+    }
+
+    .react-calendar__tile:disabled {
+        background-color: #f0f0f0;
+        color: #ababab;
+    }
+
+    .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 {
+        background: #006edc;
+        color: white;
+    }
+
+    .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: #{u.color("gray400")};
+    }
+    .react-calendar button {
+        justify-content: center;
+    }
+    .react-calendar__month-view__days {
+        button {
+            &.react-calendar__tile {
+                height: 50px;
+                &:hover {
+                    border-radius: 50%;
+                }
+                &--active {
+                    border-radius: 50%;
+                }
+                &--now {
+                    border-radius: 50%;
+                }
+            }
+        }
+    }
+
+}

package/src/components/DatePicker/_DateTimePicker.scss

@@ -0,0 +1,67 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+
+@layer craftsman-base {
+    %date-picker-styles {
+        display: inline-flex;
+        position: relative;
+    }
+    %date-picker-disabled {
+        background-color: #f0f0f0;
+        color: #6d6d6d;
+    }
+    %date-picker-wrapper {
+        display: flex;
+        flex-grow: 1;
+        flex-shrink: 0;
+        @extend %input-base;
+        padding: 6px 8px;
+    }
+    %date-picker-input-group {
+        // min-width: calc((4px * 3) + 0.54em * 8 + 0.217em * 2);
+        flex-grow: 1;
+        padding: 0 2px;
+        box-sizing: content-box;
+    }
+    %date-picker-divider {
+        padding: 1px 0;
+        white-space: pre;
+    }
+    %date-picker-leading-zero-divider {
+        display: inline-block;
+        font: inherit;
+    }
+    %date-picker-group-input {
+        min-width: calc(2ch + 1px);
+        text-align: center;
+        height: calc(100% - 2px);
+        position: relative;
+        padding: 1px;
+        border: 0;
+        background: none;
+        color: currentColor;
+        font: inherit;
+        box-sizing: content-box;
+        -webkit-appearance: textfield;
+        -moz-appearance: textfield;
+        appearance: textfield;
+    }
+    %date-picker-input-spinner {
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        margin: 0;
+    }
+    %date-picker-input-leading-zero {
+        margin-left: -0.54em;
+        padding-left: calc(1px + 0.54em);
+    }
+    %date-picker-button {
+        border: 0;
+        padding: 4px 4px 4px 7px;
+        &:hover {
+            background: transparent;
+        }
+    }
+}

package/src/components/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { LabeledInput } from '../Input/InputWrapper';
+import { DateTimePickerProps as ReactDateTimePickerProps } from 'react-datetime-picker';
+export type DateTimePickerProps = ReactDateTimePickerProps & LabeledInput & {
+    id?: string;
+    style?: React.CSSProperties;
+    format?: 24 | 12;
+    labels?: {
+        hour?: string;
+        minute?: string;
+    };
+};
+export declare const DateTimePicker: React.FC<DateTimePickerProps>;

package/src/components/DateTimePicker/DateTimePicker.scss

@@ -0,0 +1,86 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+@use "../DatePicker/_DateTimePicker";
+@layer craftsman-base {
+    .react-datetime-picker,
+    .react-datetime-picker *,
+    .react-datetime-picker *:before,
+    .react-datetime-picker *:after {
+        @extend %border-box;
+    }
+    .react-datetime-picker {
+        @extend %date-picker-styles;
+        &--disabled {
+            @extend %date-picker-disabled;
+        }
+        &__wrapper {
+            @extend %date-picker-wrapper;
+        }
+        &__inputGroup {
+            @extend %date-picker-input-group;
+        }
+        &__inputGroup__divider {
+            @extend %date-picker-divider;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            @extend %date-picker-leading-zero-divider;
+        }
+        &__inputGroup__input {
+            @extend %date-picker-group-input;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            @extend %date-picker-input-spinner;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            @extend %date-picker-input-leading-zero;
+        }
+        &__button {
+            @extend %date-picker-button;
+        }
+        &__calendar--closed, &__clock--closed {
+            display: none;
+        }
+
+    }
+    .react-datetime-picker__calendar,
+    .react-datetime-picker__clock {
+        z-index: 1;
+    }
+
+    .react-datetime-picker__inputGroup__input:invalid {
+        background: rgba(255, 0, 0, 0.1);
+    }
+
+    .react-datetime-picker__inputGroup__amPm {
+        font: inherit;
+        -webkit-appearance: menulist;
+        -moz-appearance: menulist;
+        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;
+    }
+}

package/src/components/Input/Input.scss

@@ -1,5 +1,5 @@
 @use "../../styles/global/components/input";
-@use "../../styles/utilities/functions" as u;
+@use "../../styles/utilities/_functions" as u;
 
 @mixin inside-input-label-floating {
     top: -0.5rem;

package/src/components/{Input → InputPassword}/InputPassword.d.ts

@@ -1,5 +1,5 @@
 import { TextInputType } from '../../utilities/types';
-import { InputProps } from './Input';
+import { InputProps } from '../Input/Input';
 export type InputPasswordProps = React.ComponentProps<"input"> & {} & Omit<InputProps, "type" | "endAdornment"> & {
     type?: Extract<TextInputType, "password">;
 };

package/src/components/{Input → InputPassword}/InputPassword.esm.js

@@ -1,10 +1,10 @@
 "use client";
 import { Button as e } from "../Button/Button.esm.js";
-import { Input as t } from "./Input2.esm.js";
+import { Input as t } from "../Input/Input2.esm.js";
 import { jsx as n } from "react/jsx-runtime";
 import { useState as r } from "react";
 import { ImEye as i, ImEyeBlocked as a } from "react-icons/im";
-//#region src/components/Input/InputPassword.tsx
+//#region src/components/InputPassword/InputPassword.tsx
 var o = ({ visible: t, onToggle: r }) => /* @__PURE__ */ n(e, {
 	type: "button",
 	variant: "text",