@stamcat/craftsman 0.0.27-alpha.9 → 0.0.28

package/_virtual/_rolldown/runtime.esm.js

@@ -1,11 +1,23 @@
 //#region \0rolldown/runtime.js
-var e = Object.defineProperty, t = (t, n) => {
+var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
 	let r = {};
-	for (var i in t) e(r, i, {
-		get: t[i],
+	for (var i in e) t(r, i, {
+		get: e[i],
 		enumerable: !0
 	});
-	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
-};
+	return n || t(r, Symbol.toStringTag, { value: "Module" }), r;
+}, c = (e, i, o, s) => {
+	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
+		get: ((e) => i[e]).bind(null, d),
+		enumerable: !(s = n(i, d)) || s.enumerable
+	});
+	return e;
+}, l = (n, r, a) => (a = n == null ? {} : e(i(n)), c(r || !n || !n.__esModule ? t(a, "default", {
+	value: n,
+	enumerable: !0
+}) : a, n)), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+});
 //#endregion
-export { t as __exportAll };
+export { o as __commonJSMin, s as __exportAll, u as __require, l as __toESM };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.9",
+  "version": "0.0.28",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -23,14 +23,22 @@
     "prepublishOnly": "node ./scripts/prepublishCheck.js"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "3.0.0",
+    "@floating-ui/react-dom": "2.1.9",
+    "@wojtekmaj/react-daterange-picker": "7.1.0",
     "clsx": "2.1.1",
-    "dompurify": "3.4.12",
+    "country-flag-icons": "1.6.20",
+    "dompurify": "3.4.13",
+    "embla-carousel-react": "8.6.0",
     "react": "19.2.7",
     "react-date-picker": "12.0.2",
     "react-datetime-picker": "7.0.2",
+    "react-device-detect": "2.2.3",
     "react-dom": "19.2.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",
@@ -38,7 +46,7 @@
   },
   "devDependencies": {},
   "overrides": {
-    "postcss": "8.5.20",
+    "postcss": "8.5.23",
     "sharp": "0.35.3"
   },
   "exports": {
@@ -104,9 +112,49 @@
       "types": "./src/components/DatePicker.d.ts",
       "default": "./src/components/DatePicker.esm.js"
     },
+    "./DateRangePicker": {
+      "types": "./src/components/DateRangePicker.d.ts",
+      "default": "./src/components/DateRangePicker.esm.js"
+    },
     "./InputPhone": {
       "types": "./src/components/InputPhone.d.ts",
       "default": "./src/components/InputPhone.esm.js"
+    },
+    "./InputNumber": {
+      "types": "./src/components/InputNumber.d.ts",
+      "default": "./src/components/InputNumber.esm.js"
+    },
+    "./Toggle": {
+      "types": "./src/components/Toggle.d.ts",
+      "default": "./src/components/Toggle.esm.js"
+    },
+    "./Pagination": {
+      "types": "./src/components/Pagination.d.ts",
+      "default": "./src/components/Pagination.esm.js"
+    },
+    "./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"
+    },
+    "./DateTimePicker": {
+      "types": "./src/components/DateTimePicker.d.ts",
+      "default": "./src/components/DateTimePicker.esm.js"
+    },
+    "./Tooltip": {
+      "types": "./src/components/Tooltip.d.ts",
+      "default": "./src/components/Tooltip.esm.js"
+    },
+    "./Notice": {
+      "types": "./src/components/Notice.d.ts",
+      "default": "./src/components/Notice.esm.js"
+    },
+    "./SortableList": {
+      "types": "./src/components/SortableList.d.ts",
+      "default": "./src/components/SortableList.esm.js"
     }
   }
 }

package/src/components/Button/AGENTS.md

@@ -0,0 +1,65 @@
+# Button — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Button } from "@stamcat/craftsman/Button";
+```
+
+Props:
+
+- Inherits all native `<button>` props.
+- `variant?: "primary" | "default" | "text"` (default: `"default"`)
+- `size?: number` (default visual scale is `1`)
+- `styles?: React.CSSProperties` (inline style override)
+
+Behavior notes:
+
+- `type` defaults to `"button"`.
+- For `variant !== "default"`, variant is appended to `className` (for example `"primary"`).
+- `className` is preserved and merged after component classes.
+- Theme component overrides are selector-based CSS emitted by `ThemeProvider`; `theme.components.*` accepts JS style objects or raw CSS/Sass strings for the target selector.
+- If `children` is empty (per `isEmpty`), the component renders nothing.
+- `size` is clamped to `[0.1, 10]` before styling is applied.
+- When `size` is provided, Button sets a single `--btn-size` CSS variable inline; all scaling math lives in SCSS:
+  - `border-radius: calc(var(--w-gutter) * 0.75 * var(--btn-size))`
+  - `padding: calc(var(--w-gutter) * 0.5 * var(--btn-size)) calc(var(--w-gutter) * 0.75 * var(--btn-size))`
+  - `font-size: max(10px, calc(var(--w-text) * var(--btn-size)))`
+  - This is the standard sizing pattern used across the library (see `Toggle`'s `--toggle-width`): components expose one scale/size CSS variable, and SCSS does all the `calc()` work.
+- There is no dedicated icon/loading prop. Icons, loaders, and mixed content are passed as `children`.
+- Supports both real disable (`disabled={true}`) and style-only disable (`className="disabled"`).
+- Native button modes are supported (`type="button" | "submit" | "reset"`).
+- Accessibility props such as `aria-label` pass through unchanged.
+
+Example:
+
+```tsx
+<Button variant="primary" onClick={onSave}>Save</Button>
+```
+
+Story-aligned usage examples:
+
+```tsx
+// Scaled compact button (size is clamped to [0.1, 10])
+<Button variant="primary" size={0.5}>Mini Action</Button>
+
+// Icon content
+<Button variant="primary">
+  <TruckIcon size={20} /> <span>Ship</span>
+</Button>
+
+// Loading content
+<Button aria-label="Saving">
+  <Loader type="boxy" width={32} color="#de13ca" />
+</Button>
+
+// Style-only disabled appearance while still allowing click handlers
+<Button className="disabled" onClick={onClick}>Disabled Look</Button>
+
+// Native submit behavior
+<Button type="submit" aria-label="Save form">Save</Button>
+```
+
+Implementation caution:
+
+- Size scaling depends on CSS variables provided by the package global styles (`--btn-border-radius`, `--btn-pad-y`, `--btn-pad-x`, `--w-text`).

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,26 +1,20 @@
 "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";
+import t from "clsx";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
 //#region src/components/Button/Button.tsx
-var a = (a) => {
-	let { type: o = "button", variant: s = "default", size: c, styles: l, className: u, style: d, ...f } = a, p = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, m = e(l) ? void 0 : l, h = p ? {
-		borderRadius: `calc(var(--btn-border-radius) * ${p})`,
-		padding: `calc(var(--btn-pad-y) * ${p}) calc(var(--btn-pad-x) * ${p})`,
-		fontSize: `max(10px, calc(${t("text")} * ${p}))`
-	} : {};
-	return e(a.children) ? /* @__PURE__ */ i(r, {}) : /* @__PURE__ */ i("button", {
-		type: o,
-		className: n(s, u),
+var i = (i) => {
+	let { type: a = "button", variant: o = "default", size: s, styles: c, className: l, style: u, ...d } = i, f = typeof s == "number" ? Math.min(10, Math.max(.1, s)) : void 0, p = e(c) ? void 0 : c, m = f ? { "--btn-size": f } : void 0;
+	return e(i.children) ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("button", {
+		type: a,
+		className: t("button", o, l),
 		style: {
-			...h,
 			...m,
-			...d
+			...p,
+			...u
 		},
-		...f
+		...d
 	});
 };
 //#endregion
-export { a as Button };
+export { i as Button };

package/src/components/Carousel/AGENTS.md

@@ -0,0 +1,41 @@
+# Carousel — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Carousel } from "@stamcat/craftsman/Carousel";
+```
+
+Props:
+
+- Extends `EmblaOptionsType` from `embla-carousel`, except `slides`.
+- `slides?: React.ReactNode[]`
+- `className?: string`
+- `style?: React.CSSProperties`
+- `buttons?: boolean` (default: `true`)
+- `pagination?: "dots" | "numbers"` (default: `"dots"`)
+
+Behavior notes:
+
+- `slides` is an array prop; do not pass slide content as `children`.
+- Built on `embla-carousel-react`, so standard Embla options such as `loop`, `align`, `dragFree`, and `slidesToScroll` pass through.
+- Previous/next controls are built in and can be hidden with `buttons={false}`.
+- Pagination can render dots or the shared `Pagination` component in number mode.
+- Number pagination uses zero-based indexes internally, consistent with `Pagination`.
+- The component manages its own selected index from the Embla instance; there is no separate controlled index prop.
+
+Example:
+
+```tsx
+const slides = [
+  <figure key="one"><img src="/slide-1.jpg" alt="First slide" /></figure>,
+  <figure key="two"><img src="/slide-2.jpg" alt="Second slide" /></figure>,
+];
+
+<Carousel
+  slides={slides}
+  loop={false}
+  pagination="dots"
+  align="center"
+/>
+```

package/src/components/Carousel/Carousel.css

@@ -0,0 +1 @@
+@layer craftsman-component{.carousel{position:relative}.carousel__viewport{overflow:hidden}.carousel__container{touch-action:pan-y pinch-zoom;display:flex}.carousel__slide{flex:0 0 100%;min-width:0}.carousel__controls{justify-content:space-between;gap:calc(var(--w-gutter) * .5);margin-top:calc(var(--w-gutter) * .75);flex-flow:row;width:100%;display:inline-flex}.carousel__dots button{margin:0 calc(var(--w-gutter) * .125)}}

package/src/components/Carousel/Carousel.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { EmblaOptionsType } from 'embla-carousel';
+import { CarouselPageType } from '../../utilities/types';
+export type CarouselProps = Omit<EmblaOptionsType, "slides"> & {
+    slides?: React.ReactNode[];
+    className?: string;
+    style?: React.CSSProperties;
+    buttons?: boolean;
+    pagination?: CarouselPageType;
+};
+export declare const Carousel: React.FC<CarouselProps>;

package/src/components/Carousel/Carousel.scss

@@ -0,0 +1,34 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .carousel {
+        position: relative;
+
+        &__viewport {
+            overflow: hidden;
+        }
+
+        &__container {
+            display: flex;
+            touch-action: pan-y pinch-zoom;
+        }
+
+        &__slide {
+            flex: 0 0 100%;
+            min-width: 0;
+        }
+
+        &__controls {
+            display: inline-flex;
+            justify-content: space-between;
+            flex-flow: row nowrap;
+            gap: #{u.width("gutter", 0.5)};
+            margin-top: #{u.width("gutter", 0.75)};
+            width: 100%;
+        }
+        &__dots button {
+            margin: 0 #{u.width("gutter", 0.125)};
+        }
+
+    }
+}

package/src/components/Carousel/Carousel2.esm.js

@@ -0,0 +1,75 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { Pagination as t } from "../Pagination/Pagination2.esm.js";
+import './Carousel.css';/* empty css             */
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useCallback as a, useSyncExternalStore as o } from "react";
+import { FaAngleLeft as s, FaAngleRight as c, FaCircle as l, FaRegCircle as u } from "react-icons/fa6";
+import d from "embla-carousel-react";
+//#region src/components/Carousel/Carousel.tsx
+var f = (f) => {
+	let { slides: p = [], className: m, style: h, buttons: g = !0, pagination: _ = "dots", ...v } = f, [y, b] = d(v), x = a((e) => b ? (b.on("select", e).on("reInit", e), () => {
+		b.off("select", e), b.off("reInit", e);
+	}) : () => {}, [b]), S = o(x, () => !!b?.canScrollPrev(), () => !1), C = o(x, () => !!b?.canScrollNext(), () => !1), w = o(x, () => b?.selectedScrollSnap() ?? 0, () => 0), T = () => b?.scrollPrev(), E = () => b?.scrollNext(), D = (e) => {
+		let t = parseInt(e.currentTarget.value, 10) || 0;
+		b?.scrollTo(t);
+	};
+	return /* @__PURE__ */ i("div", {
+		className: n("carousel", m),
+		style: h,
+		children: [/* @__PURE__ */ r("div", {
+			className: "carousel__viewport",
+			ref: y,
+			children: /* @__PURE__ */ r("div", {
+				className: "carousel__container",
+				children: p.map((e, t) => /* @__PURE__ */ r("div", {
+					className: "carousel__slide",
+					children: e
+				}, `slide-${t}`))
+			})
+		}), /* @__PURE__ */ i("div", {
+			className: "carousel__controls",
+			children: [
+				g && /* @__PURE__ */ i("div", {
+					className: "carousel__buttons",
+					children: [/* @__PURE__ */ r(e, {
+						variant: "text",
+						onClick: T,
+						disabled: !S,
+						name: "prev",
+						children: /* @__PURE__ */ r(s, {
+							size: 24,
+							"aria-label": "prev"
+						})
+					}), /* @__PURE__ */ r(e, {
+						variant: "text",
+						onClick: E,
+						disabled: !C,
+						name: "next",
+						children: /* @__PURE__ */ r(c, {
+							size: 24,
+							"aria-label": "next"
+						})
+					})]
+				}),
+				_ === "dots" && /* @__PURE__ */ r("div", {
+					className: "carousel__dots",
+					children: p.map((t, n) => /* @__PURE__ */ r(e, {
+						variant: "text",
+						value: n,
+						onClick: D,
+						children: r(w === n ? l : u, { size: 16 })
+					}, `dot-${n}`))
+				}),
+				_ === "numbers" && /* @__PURE__ */ r(t, {
+					total: p.length,
+					current: w,
+					onChange: D
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { f as Carousel };

package/src/components/Checkbox/AGENTS.md

@@ -0,0 +1,34 @@
+# Checkbox — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Checkbox } from "@stamcat/craftsman/Checkbox";
+```
+
+Props:
+
+- Extends `Input` props.
+- `type?: "checkbox"` (default: `"checkbox"`)
+- `labelPosition?: "left" | "right" | "top" | "bottom"` (default: `"right"`)
+- `size?: number` (default visual scale is `1`, clamped to `[0.1, 10]`)
+
+Behavior notes:
+
+- `Checkbox` is a thin wrapper around `Input` with checkbox-specific guardrails.
+- The wrapper enforces checkbox type by default and narrows label position options to common checkbox layouts.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+- When `size` is provided, Checkbox sets a single `--checkbox-size` CSS variable inline; the checkbox box and checkmark scale via SCSS `calc()` from that variable (same pattern as `Button`'s `--btn-size` and `Toggle`'s `--toggle-width`).
+
+Example:
+
+```tsx
+<Checkbox
+  id="accept-terms"
+  name="terms"
+  value="accepted"
+  label="Accept terms"
+  checked={accepted}
+  onChange={(event) => setAccepted(event.currentTarget.checked)}
+/>
+```

package/src/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { InputProps } from '../Input/Input';
+import { CheckboxLabelPosition } from '../../utilities/types';
+export type CheckboxProps = InputProps & {
+    type?: "checkbox";
+    labelPosition?: CheckboxLabelPosition;
+    size?: number;
+};
+export declare const Checkbox: React.FC<CheckboxProps>;

package/src/components/Checkbox/Checkbox.esm.js

@@ -0,0 +1,18 @@
+"use client";
+import { Input as e } from "../Input/Input2.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Checkbox/Checkbox.tsx
+var n = ({ type: n = "checkbox", labelPosition: r = "right", size: i, style: a, ...o }) => {
+	let s = typeof i == "number" ? Math.min(10, Math.max(.1, i)) : void 0;
+	return /* @__PURE__ */ t(e, {
+		type: n,
+		labelPosition: r,
+		style: {
+			...s ? { "--checkbox-size": s } : void 0,
+			...a
+		},
+		...o
+	});
+};
+//#endregion
+export { n as Checkbox };

package/src/components/DatePicker/AGENTS.md

@@ -0,0 +1,36 @@
+# DatePicker — Agent Usage Notes
+
+Import:
+
+```tsx
+import { DatePicker } from "@stamcat/craftsman/DatePicker";
+```
+
+Props:
+
+- Extends `DatePickerProps` from `react-date-picker`.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `value?: Date | null`
+- `onChange?: (value: DatePickerProps["value"]) => void`
+
+Behavior notes:
+
+- Controlled component — parent owns `value` and `onChange`.
+- Calendar flyout renders below the input; ensure the container has at least 400px of vertical space.
+- Use `useState` to manage the selected date value.
+
+Example:
+
+```tsx
+const [date, setDate] = useState<Date | null>(null);
+
+<DatePicker
+  label="Appointment Date"
+  value={date}
+  onChange={setDate}
+  required
+/>
+```

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:6px}[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__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}@layer craftsman-component{.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}[name=year].react-date-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-date-picker__inputGroup__input:disabled{background-color:unset}.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}}

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 "./_DatePicker";
+@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("datePicker", 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__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{border-radius:unset;justify-content:center;padding:12px 0}.react-calendar__year-view button,.react-calendar__decade-view button,.react-calendar__century-view button{padding:18px 0}}