@stamcat/craftsman 0.0.31-beta.3 → 0.0.31

package/skills/craftsman-style-utilities/SKILL.md

@@ -0,0 +1,228 @@
+---
+name: craftsman-style-utilities
+description: 'Styling conventions for @stamcat/craftsman — color()/width()/breakpoint() TypeScript and Sass helpers, styling expectations, and theme authoring (theme.root, theme.components, theme.widths). Use when writing styles, CSS-in-JS, Sass, or ThemeProvider theme objects for @stamcat/craftsman.'
+---
+
+# Craftsman Style Utilities
+
+Styling rules for AI agents generating code against `@stamcat/craftsman`. For package exports, hard rules, and component contracts, see the [craftsman-component-usage skill](../craftsman-component-usage/SKILL.md). For non-styling utility functions (`isEmpty`), see the [craftsman-utility-functions skill](../craftsman-utility-functions/SKILL.md).
+
+## General Sass Guidance
+
+When writing styles for more than 2 elements in an app that uses Sass, prefer a placeholder (`%placeholder` + `@extend`) over string concatenation to share the rule set.
+
+Prefer one meaningful class name per component root and rely on HTML5 element semantics plus Sass nesting to style descendants — not every element needs its own `className`.
+
+```scss
+// Preferred: one root class, nested element selectors
+.card {
+  padding: #{u.width(gutter)};
+
+  h3 {
+    margin-bottom: #{u.width(gutter, 0.5)};
+  }
+
+  p {
+    color: #{u.color(gray500)};
+  }
+
+  button {
+    margin-top: #{u.width(gutter)};
+  }
+}
+```
+
+```scss
+// Avoid: a className on every descendant when nesting on semantic tags is sufficient
+.card { }
+.card-title { }
+.card-body { }
+.card-action { }
+```
+
+Prefer resolving color and spacing through the `color()`/`width()` functions and mixins when the value is actually derived from a globally declared variable — for example, a width that is exactly half the declared gutter should use `width("gutter", 0.5)`. If a value isn't a derivation of a global variable (e.g. gutter is `16px` but a component needs `14px`), use the literal value directly rather than forcing it through a function.
+
+Preferred page/layout pattern:
+
+- Use one primary page/layout wrapper class and style semantic descendants via nesting (`> header`, `> main`, `> section`, etc.).
+- Avoid adding class names to semantic sectioning elements only to mirror old style objects; prefer structural selectors first.
+- Introduce small helper classes or placeholders only where they add clear value: repeated layout primitives (for example shared row/stack wrappers) or stateful/dynamic visual states.
+- Keep the DOM semantic and minimal; avoid class-heavy markup when nested selectors can express the same styling.
+
+## Sass Import Path (hard rule)
+
+Always `@use` the published subpath — never deep-import the source file directly.
+
+```scss
+// Correct
+@use "@stamcat/craftsman/styles/utilities/functions" as u;
+@use "@stamcat/craftsman/styles/utilities/mixins" as m;
+@use "@stamcat/craftsman/styles/utilities/placeholders";
+
+// Wrong — not an exported subpath, will fail to resolve at build time
+@use "@stamcat/craftsman/src/styles/utilities/functions" as u;
+```
+
+## Style Utilities
+
+Craftsman provides TypeScript helpers and matching Sass functions for color, spacing, and breakpoints. Always use these instead of hard-coded values so theming and overrides work correctly.
+
+### color()
+
+**TypeScript** — import from `@stamcat/craftsman/styles`:
+
+```ts
+import { color, colors, hexToRgba } from "@stamcat/craftsman/styles";
+
+// Returns var(--blue500)
+color("blue500")
+
+// Returns rgb(from var(--blue500) r g b / 0.5)
+color("blue500", "rgba", 0.5)
+
+// Fallback for environments that don't support CSS relative color syntax
+hexToRgba(colors.blue500, 0.5)
+```
+
+**Sass** — import `functions` as `u`:
+
+```scss
+@use "@stamcat/craftsman/styles/utilities/functions" as u;
+
+.element {
+  color:      #{u.color(blue500)};
+  background: #{u.color(black, rgba, 0.4)};
+}
+```
+
+- `color(name)` → `var(--name)` — always prefer this over hard-coded hex values so theme overrides apply.
+- `color(name, rgba, alpha)` → `rgb(from var(--name) r g b / alpha)` — uses CSS relative color syntax; verify browser support for your target.
+- Never hard-code hex color values. Always use `color()` or a CSS variable.
+
+### width()
+
+**TypeScript** — import from `@stamcat/craftsman/styles`:
+
+```ts
+import { width } from "@stamcat/craftsman/styles";
+
+width("gutter")        // var(--w-gutter, 16px)
+width("gutter", 0.5)   // calc(var(--w-gutter, 16px) * 0.5)
+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;
+
+.card {
+  padding:   #{u.width(gutter)};
+  gap:       #{u.width(gutter, 0.5)};
+  max-width: #{u.width(column, 4)};
+}
+```
+
+Valid keys: `text` · `gutter` · `column` · `tablet` · `desktop` · `extDesktop` · `mobileMax` · `tabletMax` · `desktopMax`
+
+- The `column` key automatically accounts for gutters between columns.
+- Never use hard-coded `px` values for spacing or layout widths. Always use `width()`.
+
+### breakpoint()
+
+**TypeScript** — returns a full `@media` rule string for CSS-in-JS:
+
+```ts
+import { breakpoint, media } from "@stamcat/craftsman/styles";
+
+// Full rule — use inside styled-components, emotion, or style injection
+breakpoint("desktop", "font-size: 18px;")
+// => "@media (min-width: 1040px) { font-size: 18px; }"
+
+// Raw query string only — use for conditional logic or matchMedia
+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;
+
+.sidebar {
+  display: none;
+
+  @include u.breakpoint(tablet) {
+    display: block;
+  }
+}
+```
+
+Available breakpoint keys: `tablet` · `tabletMax` · `tabletOnly` · `desktop` · `desktopMax` · `desktopOnly` · `extDesktop` · `mobileMax` · `mobileOnly` · `mobileTablet`
+
+- Breakpoint values come from `_config.scss` and stay in sync with any project overrides.
+- Never hard-code `@media (min-width: 1040px)` or similar — always use `breakpoint()` so values stay consistent with config.
+- Prefer media query breakpoints over window resize event listeners for responsive design whenever possible.
+- Responsive styling should be mobile-first (`min-width` breakpoints) whenever possible. Use `mobileOnly`/`mobileMax` only for outlier cases that require a mobile-specific exception.
+- In apps using SCSS, use the `breakpoint` mixin (`@include u.breakpoint(key)`). In apps using JS styling, use the `breakpoint` function (`breakpoint(key, styles)` or `media.key` for raw queries).
+
+## Styling Expectations
+
+- Components are built with SCSS modules and class-based variant hooks.
+- If your app does not include this package's global CSS variable setup, visual output may differ.
+- Agents should avoid hard-coding assumptions about token names beyond what the consumer app already defines.
+
+## Custom Sizing / Scale Props
+
+When a component accepts a numeric size/scale prop (for example `Button`'s `size` or `Toggle`'s `width`), the component sets **one** CSS custom property inline (only when the prop is provided), and the SCSS file does all the `calc()` math from there:
+
+```tsx
+// Component: only ever set the single scale variable
+const sizeStyle = normalizedSize ? ({ "--btn-size": normalizedSize } as React.CSSProperties) : undefined;
+```
+
+```scss
+// SCSS: give the variable a default, then derive every scaled property from it
+%button-styles {
+  --btn-size: 1;
+  padding: calc(#{u.width(gutter, 0.5)} * var(--btn-size)) calc(#{u.width(gutter, 0.75)} * var(--btn-size));
+  border-radius: calc(#{u.width(gutter, 0.75)} * var(--btn-size));
+  font-size: max(10px, calc(#{u.width(text)} * var(--btn-size)));
+}
+```
+
+Do not compute `calc()` strings per-property in JS/TS (for example building a `padding: "calc(... * 1.5)"` string in the component). Always push that math into SCSS and only pass the raw scale/size value through a single CSS variable.
+
+## Theme Authoring
+
+- `theme.root` supports JS style objects and raw CSS/Sass strings.
+- `theme.components.*` supports JS style objects and raw CSS/Sass strings.
+- `theme.widths` accepts a partial record of width/breakpoint keys to override the default `--w-*` CSS variables. Values are numbers in `px`.
+- String component styles are applied to the mapped target selector (for example `button`, `input[type='checkbox']`).
+- For multi-file Sass workflows with syntax highlighting and mixins, import compiled CSS text via `*.scss?inline`.
+
+Valid `theme.widths` keys: `"text" | "gutter" | "column" | "tablet" | "desktop" | "extDesktop" | "mobileMax" | "tabletMax" | "desktopMax"`
+
+### Theme Authoring Usage Parameters
+
+- Prefer authoring theme styles as SCSS over JS styling, except in apps that primarily use JS styling and do not use SCSS.
+- Global component styles should use the `components` object.
+- When declaring styles for multiple components globally for the app theme, use SCSS placeholders, mixins, or functions (in apps that use SCSS). For apps that use JS styling, use variables.
+- Component styles should live in a `/components` subfolder within whatever folder contains the app theme declarations.
+
+Example:
+
+```tsx
+import greenRoot from "./green.root.scss?inline";
+import greenButton from "./green.button.scss?inline";
+
+export const theme = {
+  widths: {
+    gutter: 20,
+    tablet: 768,
+  },
+  root: greenRoot,
+  components: {
+    button: greenButton,
+  },
+};
+```

package/skills/craftsman-utility-functions/SKILL.md

@@ -0,0 +1,71 @@
+---
+name: craftsman-utility-functions
+description: 'Utility function conventions for @stamcat/craftsman — the isEmpty validation helper and TypeScript/Sass parity for style utility patterns. Use when writing empty/falsy checks or referencing color()/width()/breakpoint() usage patterns for @stamcat/craftsman.'
+---
+
+# Craftsman Utility Functions
+
+Non-styling utility function rules for AI agents generating code against `@stamcat/craftsman`. For package exports, hard rules, and component contracts, see the [craftsman-component-usage skill](../craftsman-component-usage/SKILL.md). For styling and theme authoring, see the [craftsman-style-utilities skill](../craftsman-style-utilities/SKILL.md).
+
+## `isEmpty`
+
+The package exports an `isEmpty` utility. **Always use it instead of writing inline empty checks.**
+
+Import:
+
+```ts
+import { isEmpty } from "@stamcat/craftsman/utilities/validations";
+```
+
+It returns `true` for:
+
+- `undefined`
+- `null`
+- empty objects — `{}`
+- strings that are empty or whitespace-only — `""`, `" "`
+- arrays with no elements — `[]`
+
+Examples:
+
+```ts
+// DO — use isEmpty
+if (isEmpty(value)) { ... }
+if (!isEmpty(items)) { ... }
+
+// DO NOT — write these manually
+if (value === undefined || value === null) { ... }
+if (typeof value === "string" && value.trim().length === 0) { ... }
+if (Object.keys(obj).length === 0) { ... }
+if (arr.length === 0) { ... }
+```
+
+## Style utilities parity (`color`, `width`, `breakpoint`)
+
+These utility patterns exist in both TypeScript and Sass. See the [craftsman-style-utilities skill](../craftsman-style-utilities/SKILL.md) for full usage details.
+
+TypeScript usage:
+
+```ts
+import { color, width, breakpoint } from "@stamcat/craftsman/styles";
+
+const accent = color("blue500");
+const alphaAccent = color("blue500", "rgba", 0.32);
+const twoColumns = width("column", 2);
+const mobileRule = breakpoint("mobileMax", "h4{font-size:14px;}");
+```
+
+Sass usage (framework source):
+
+```scss
+@use "./src/styles/utilities" as u;
+
+.example {
+  color: #{u.color(blue500)};
+  background: #{u.color(blue500, rgba, 0.32)};
+  max-width: #{u.width(column, 2)};
+}
+
+@include u.breakpoint(mobileMax) {
+  .example { font-size: #{u.width(text)}; }
+}
+```

package/src/components/Accordion/AGENTS.md

@@ -0,0 +1,45 @@
+# Accordion — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Accordion } from "@stamcat/craftsman/Accordion";
+```
+
+Props:
+
+- `items: { id?: string; header: ReactNode; content: ReactNode; disabled?: boolean }[]` — required, data-driven like `Select`'s `options`.
+- `multiple?: boolean` (default: `false`) — when `false`, opening an item closes any other open item.
+- `expanded?: string[]` — controlled set of open item ids. Omit to let Accordion manage its own open/closed state.
+- `defaultExpanded?: string[]` (default: `[]`) — initial open item ids when uncontrolled.
+- `onChange?: (expanded: string[]) => void`
+- Inherits all native `<div>` props (except `onChange`, which is overridden above).
+
+Behavior notes:
+
+- Each item renders as an `<h3>` heading wrapping a `<button>` trigger (`aria-expanded`, `aria-controls`) and a `role="region"` panel (`aria-labelledby`) — the WAI-ARIA Accordion pattern.
+- Collapsed panels are hidden via the native `hidden` attribute (not just visually), so screen readers skip their content.
+- The chevron icon is `FaAngleUp` from `react-icons/fa6`; it rotates 180deg when collapsed and un-rotates to point up when expanded — the same rotate-on-open treatment used for `Select`'s native dropdown arrow.
+- Keyboard support mirrors a native `<select>`: `Tab` moves focus in/out, `Enter`/`Space` toggle the focused header (free via native `<button>` semantics), and `ArrowUp`/`ArrowDown`/`Home`/`End` move focus between headers without opening them.
+- `disabled` items render a disabled `<button>` (`aria-disabled` is implied by the native `disabled` attribute) and cannot be toggled.
+- If `id` is omitted per item, one is derived from `useId()` plus the item's index.
+- Renders nothing (per `isEmpty`) if `items` is empty.
+
+Example:
+
+```tsx
+<Accordion
+  items={[
+    { id: "shipping", header: "Shipping", content: <p>Ships in 3-5 business days.</p> },
+    { id: "returns", header: "Returns", content: <p>30-day return window.</p> },
+  ]}
+/>
+```
+
+Controlled usage:
+
+```tsx
+const [expanded, setExpanded] = useState<string[]>(["shipping"]);
+
+<Accordion items={items} expanded={expanded} onChange={setExpanded} multiple />
+```

package/src/components/Accordion/Accordion.css

@@ -0,0 +1 @@
+@layer craftsman-component{.accordion{border:1px solid var(--gray400);border-radius:calc(var(--w-gutter) * .5);flex-direction:column;display:flex;overflow:hidden}.accordion-item{border-bottom:1px solid var(--gray400)}.accordion-item:last-child{border-bottom:none}.accordion-item[data-disabled=true] .accordion-trigger{cursor:not-allowed;color:var(--gray400)}.accordion-item>.accordion-content{padding:calc(var(--w-gutter) * .75) var(--w-gutter)}.accordion-item>.accordion-content[hidden]{display:none}.accordion-trigger{justify-content:space-between;align-items:center;gap:calc(var(--w-gutter) * .5);width:100%;padding:calc(var(--w-gutter) * .75) var(--w-gutter);background-color:var(--white);text-align:left;color:inherit;border:none;display:flex}.accordion-trigger:focus-visible{outline:2px solid var(--blue500);outline-offset:-2px}.accordion-trigger span{flex-grow:1}.accordion-trigger svg{flex:none;transition:transform .2s;transform:rotate(180deg)}.accordion-item[data-expanded=true] .accordion-trigger svg{transform:rotate(0)}}

package/src/components/Accordion/Accordion.d.ts

@@ -0,0 +1,14 @@
+export type AccordionItemType = {
+    id?: string;
+    header: React.ReactNode;
+    content: React.ReactNode;
+    disabled?: boolean;
+};
+export type AccordionProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange"> & {
+    items: AccordionItemType[];
+    multiple?: boolean;
+    expanded?: string[];
+    defaultExpanded?: string[];
+    onChange?: (expanded: string[]) => void;
+};
+export declare const Accordion: React.FC<AccordionProps>;

package/src/components/Accordion/Accordion.scss

@@ -0,0 +1,64 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .accordion {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid var(--gray400);
+        border-radius: #{u.width("gutter", 0.5)};
+        overflow: hidden;
+    }
+
+    .accordion-item {
+        border-bottom: 1px solid var(--gray400);
+
+        &:last-child {
+            border-bottom: none;
+        }
+
+        &[data-disabled="true"] .accordion-trigger {
+            cursor: not-allowed;
+            color: var(--gray400);
+        }
+
+        > .accordion-content {
+            padding: #{u.width("gutter", 0.75)} #{u.width("gutter")};
+
+            &[hidden] {
+                display: none;
+            }
+        }
+    }
+
+    .accordion-trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: #{u.width("gutter", 0.5)};
+        width: 100%;
+        padding: #{u.width("gutter", 0.75)} #{u.width("gutter")};
+        background-color: var(--white);
+        border: none;
+        text-align: left;
+        color: inherit;
+
+        &:focus-visible {
+            outline: 2px solid var(--blue500);
+            outline-offset: -2px;
+        }
+
+        span {
+            flex-grow: 1;
+        }
+
+        svg {
+            flex: 0 0 auto;
+            transition: transform 200ms ease;
+            transform: rotate(180deg);
+        }
+    }
+
+    .accordion-item[data-expanded="true"] .accordion-trigger svg {
+        transform: rotate(0deg);
+    }
+}

package/src/components/Accordion/Accordion2.esm.js

@@ -0,0 +1,70 @@
+"use client";
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import './Accordion.css';/* empty css              */
+import { useId as t, useRef as n, useState as r } from "react";
+import i from "clsx";
+import { FaAngleUp as a } from "react-icons/fa6";
+import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/Accordion/Accordion.tsx
+var l = ({ items: l, multiple: u = !1, expanded: d, defaultExpanded: f = [], onChange: p, className: m, style: h, ...g }) => {
+	let _ = t(), v = n([]), [y, b] = r(f), x = d !== void 0, S = x ? d : y, C = (e, t) => e.id ?? `${_}-${t}`, w = (e) => {
+		x || b(e), p?.(e);
+	}, T = (e) => {
+		let t = l.length, n = (e % t + t) % t;
+		v.current[n]?.focus();
+	}, E = (e) => {
+		let t = S.includes(e);
+		w(u ? t ? S.filter((t) => t !== e) : [...S, e] : t ? [] : [e]);
+	}, D = (e, t) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), T(t + 1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), T(t - 1);
+				break;
+			case "Home":
+				e.preventDefault(), T(0);
+				break;
+			case "End":
+				e.preventDefault(), T(l.length - 1);
+				break;
+			default: break;
+		}
+	};
+	return e(l) ? /* @__PURE__ */ s(o, {}) : /* @__PURE__ */ s("div", {
+		className: i("accordion", m),
+		style: h,
+		...g,
+		children: l.map((e, t) => {
+			let n = C(e, t), r = `${n}-header`, i = `${n}-panel`, l = S.includes(n);
+			return /* @__PURE__ */ c("div", {
+				className: "accordion-item",
+				"data-expanded": l,
+				"data-disabled": e.disabled,
+				children: [/* @__PURE__ */ s("header", { children: /* @__PURE__ */ c("button", {
+					type: "button",
+					id: r,
+					ref: (e) => {
+						v.current[t] = e;
+					},
+					className: "accordion-trigger",
+					"aria-expanded": l,
+					"aria-controls": i,
+					disabled: e.disabled,
+					onClick: () => E(n),
+					onKeyDown: (e) => D(e, t),
+					children: [/* @__PURE__ */ s(o, { children: e.header }), /* @__PURE__ */ s(a, { "aria-hidden": "true" })]
+				}) }), /* @__PURE__ */ s("div", {
+					id: i,
+					className: "accordion-content",
+					"aria-labelledby": r,
+					hidden: !l,
+					children: e.content
+				})]
+			}, n);
+		})
+	});
+};
+//#endregion
+export { l as Accordion };

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

@@ -2,67 +2,67 @@
 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 { useCallback as n, useSyncExternalStore as r } from "react";
+import i from "clsx";
+import { FaAngleLeft as a, FaAngleRight as o, FaCircle as s, FaRegCircle as c } from "react-icons/fa6";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 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), () => {
+	let { slides: p = [], className: m, style: h, buttons: g = !0, pagination: _ = "dots", ...v } = f, [y, b] = d(v), x = n((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) => {
+	}) : () => {}, [b]), S = r(x, () => !!b?.canScrollPrev(), () => !1), C = r(x, () => !!b?.canScrollNext(), () => !1), w = r(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),
+	return /* @__PURE__ */ u("div", {
+		className: i("carousel", m),
 		style: h,
-		children: [/* @__PURE__ */ r("div", {
+		children: [/* @__PURE__ */ l("div", {
 			className: "carousel__viewport",
 			ref: y,
-			children: /* @__PURE__ */ r("div", {
+			children: /* @__PURE__ */ l("div", {
 				className: "carousel__container",
-				children: p.map((e, t) => /* @__PURE__ */ r("div", {
+				children: p.map((e, t) => /* @__PURE__ */ l("div", {
 					className: "carousel__slide",
 					children: e
 				}, `slide-${t}`))
 			})
-		}), /* @__PURE__ */ i("div", {
+		}), /* @__PURE__ */ u("div", {
 			className: "carousel__controls",
 			children: [
-				g && /* @__PURE__ */ i("div", {
+				g && /* @__PURE__ */ u("div", {
 					className: "carousel__buttons",
-					children: [/* @__PURE__ */ r(e, {
+					children: [/* @__PURE__ */ l(e, {
 						variant: "text",
 						onClick: T,
 						disabled: !S,
 						name: "prev",
-						children: /* @__PURE__ */ r(s, {
+						children: /* @__PURE__ */ l(a, {
 							size: 24,
 							"aria-label": "prev"
 						})
-					}), /* @__PURE__ */ r(e, {
+					}), /* @__PURE__ */ l(e, {
 						variant: "text",
 						onClick: E,
 						disabled: !C,
 						name: "next",
-						children: /* @__PURE__ */ r(c, {
+						children: /* @__PURE__ */ l(o, {
 							size: 24,
 							"aria-label": "next"
 						})
 					})]
 				}),
-				_ === "dots" && /* @__PURE__ */ r("div", {
+				_ === "dots" && /* @__PURE__ */ l("div", {
 					className: "carousel__dots",
-					children: p.map((t, n) => /* @__PURE__ */ r(e, {
+					children: p.map((t, n) => /* @__PURE__ */ l(e, {
 						variant: "text",
 						value: n,
 						onClick: D,
-						children: r(w === n ? l : u, { size: 16 })
+						children: l(w === n ? s : c, { size: 16 })
 					}, `dot-${n}`))
 				}),
-				_ === "numbers" && /* @__PURE__ */ r(t, {
+				_ === "numbers" && /* @__PURE__ */ l(t, {
 					total: p.length,
 					current: w,
 					onChange: D

package/src/components/DatePicker/DatePicker.css

@@ -1 +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}}
+@layer craftsman-base{.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}.react-date-picker__wrapper:focus{box-shadow:none;outline:0}.react-date-picker__wrapper:hover{border-color:var(--gray500)}[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(--gray400);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/DatePicker2.esm.js

@@ -2,25 +2,25 @@
 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";
+import { useId as t } from "react";
+import n from "clsx";
+import { FaRegCalendar as r, FaX as i } from "react-icons/fa6";
+import { jsx as a } from "react/jsx-runtime";
+import { DatePicker as o } from "react-date-picker";
 //#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, {
+	let h = t();
+	return /* @__PURE__ */ a(e, {
 		id: c || h,
-		className: t("datePicker", p),
+		className: n("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 }),
+		children: /* @__PURE__ */ a(o, {
+			calendarIcon: /* @__PURE__ */ a(r, { size: 16 }),
+			clearIcon: /* @__PURE__ */ a(i, { size: 14 }),
 			...m
 		})
 	});

package/src/components/DateRangePicker/DateRangePicker.css

@@ -1 +1 @@
-@layer craftsman-base{.react-daterange-picker__wrapper:focus{box-shadow:none;outline:0}.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}[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(--gray200);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}}
+@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}}