@stamcat/craftsman 0.0.31-beta.4 → 0.0.32

package/AGENTS.md

@@ -13,6 +13,7 @@ Full guidance has been split out for progressive loading:
 Use these imports:
 
 ```tsx
+import { Accordion } from "@stamcat/craftsman/Accordion";
 import { Button } from "@stamcat/craftsman/Button";
 import { Carousel } from "@stamcat/craftsman/Carousel";
 import { Checkbox } from "@stamcat/craftsman/Checkbox";

package/Components.esm.js

@@ -1,81 +1,83 @@
 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/InputPassword/InputPassword.esm.js";
-import { Loader as i } from "./src/components/Loader/Loader.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/Modal2.esm.js";
-import { Select as u } from "./src/components/Select/Select.esm.js";
-import { DatePicker as d } from "./src/components/DatePicker/DatePicker2.esm.js";
-import { DateRangePicker as f } from "./src/components/DateRangePicker/DateRangePicker2.esm.js";
-import { InputPhone as p } from "./src/components/InputPhone/InputPhone2.esm.js";
-import { InputNumber as m } from "./src/components/InputNumber/InputNumber2.esm.js";
-import { Toggle as h } from "./src/components/Toggle/Toggle2.esm.js";
-import { Pagination as g } from "./src/components/Pagination/Pagination2.esm.js";
-import { Carousel as _ } from "./src/components/Carousel/Carousel2.esm.js";
-import { TimePicker as v } from "./src/components/TimePicker/TimePicker2.esm.js";
-import { DateTimePicker as y } from "./src/components/DateTimePicker/DateTimePicker2.esm.js";
-import { Tooltip as b } from "./src/components/Tooltip/Tooltip2.esm.js";
-import { Notice as x } from "./src/components/Notice/Notice2.esm.js";
-import { SortableList as S } from "./src/components/SortableList/SortableList2.esm.js";
-import { IconAmazonPay as C } from "./src/components/Icons/IconAmazonPay.esm.js";
-import { IconAmex as w } from "./src/components/Icons/IconAmex.esm.js";
-import { IconApplePay as T } from "./src/components/Icons/IconApplePay.esm.js";
-import { IconDiscover as E } from "./src/components/Icons/IconDiscover.esm.js";
-import { IconGooglePay as D } from "./src/components/Icons/IconGooglePay.esm.js";
-import { IconMaestro as O } from "./src/components/Icons/IconMaestro.esm.js";
-import { IconMastercard as k } from "./src/components/Icons/IconMastercard.esm.js";
-import { IconPayPal as A } from "./src/components/Icons/IconPayPal.esm.js";
-import { IconSepa as j } from "./src/components/Icons/IconSepa.esm.js";
-import { IconShopPay as M } from "./src/components/Icons/IconShopPay.esm.js";
-import { IconSquare as N } from "./src/components/Icons/IconSquare.esm.js";
-import { IconStripe as P } from "./src/components/Icons/IconStripe.esm.js";
-import { IconUnionPay as F } from "./src/components/Icons/IconUnionPay.esm.js";
-import { IconVenmo as I } from "./src/components/Icons/IconVenmo.esm.js";
-import { IconVisa as L } from "./src/components/Icons/IconVisa.esm.js";
+import { Accordion as t } from "./src/components/Accordion/Accordion.esm.js";
+import { Button as n } from "./src/components/Button/Button.esm.js";
+import { Input as r } from "./src/components/Input/Input.esm.js";
+import { InputPassword as i } from "./src/components/InputPassword/InputPassword.esm.js";
+import { Loader as a } from "./src/components/Loader/Loader.esm.js";
+import { RadioButton as o } from "./src/components/RadioButton/RadioButton.esm.js";
+import { Checkbox as s } from "./src/components/Checkbox/Checkbox.esm.js";
+import { Textarea as c } from "./src/components/Textarea/Textarea.esm.js";
+import { Text as l } from "./src/components/Text/Text.esm.js";
+import { Modal as u } from "./src/components/Modal/Modal.esm.js";
+import { Select as d } from "./src/components/Select/Select.esm.js";
+import { DatePicker as f } from "./src/components/DatePicker/DatePicker.esm.js";
+import { DateRangePicker as p } from "./src/components/DateRangePicker/DateRangePicker.esm.js";
+import { InputPhone as m } from "./src/components/InputPhone/InputPhone.esm.js";
+import { InputNumber as h } from "./src/components/InputNumber/InputNumber.esm.js";
+import { Toggle as g } from "./src/components/Toggle/Toggle.esm.js";
+import { Pagination as _ } from "./src/components/Pagination/Pagination.esm.js";
+import { Carousel as v } from "./src/components/Carousel/Carousel.esm.js";
+import { TimePicker as y } from "./src/components/TimePicker/TimePicker.esm.js";
+import { DateTimePicker as b } from "./src/components/DateTimePicker/DateTimePicker.esm.js";
+import { Tooltip as x } from "./src/components/Tooltip/Tooltip.esm.js";
+import { Notice as S } from "./src/components/Notice/Notice.esm.js";
+import { SortableList as C } from "./src/components/SortableList/SortableList.esm.js";
+import { IconAmazonPay as w } from "./src/components/Icons/IconAmazonPay.esm.js";
+import { IconAmex as T } from "./src/components/Icons/IconAmex.esm.js";
+import { IconApplePay as E } from "./src/components/Icons/IconApplePay.esm.js";
+import { IconDiscover as D } from "./src/components/Icons/IconDiscover.esm.js";
+import { IconGooglePay as O } from "./src/components/Icons/IconGooglePay.esm.js";
+import { IconMaestro as k } from "./src/components/Icons/IconMaestro.esm.js";
+import { IconMastercard as A } from "./src/components/Icons/IconMastercard.esm.js";
+import { IconPayPal as j } from "./src/components/Icons/IconPayPal.esm.js";
+import { IconSepa as M } from "./src/components/Icons/IconSepa.esm.js";
+import { IconShopPay as N } from "./src/components/Icons/IconShopPay.esm.js";
+import { IconSquare as P } from "./src/components/Icons/IconSquare.esm.js";
+import { IconStripe as F } from "./src/components/Icons/IconStripe.esm.js";
+import { IconUnionPay as I } from "./src/components/Icons/IconUnionPay.esm.js";
+import { IconVenmo as L } from "./src/components/Icons/IconVenmo.esm.js";
+import { IconVisa as R } from "./src/components/Icons/IconVisa.esm.js";
 import "./src/components/Icons/index.esm.js";
 //#region src/components/index.ts
-var R = /* @__PURE__ */ e({
-	Button: () => t,
-	Carousel: () => _,
-	Checkbox: () => o,
-	DatePicker: () => d,
-	DateRangePicker: () => f,
-	DateTimePicker: () => y,
-	IconAmazonPay: () => C,
-	IconAmex: () => w,
-	IconApplePay: () => T,
-	IconDiscover: () => E,
-	IconGooglePay: () => D,
-	IconMaestro: () => O,
-	IconMastercard: () => k,
-	IconPayPal: () => A,
-	IconSepa: () => j,
-	IconShopPay: () => M,
-	IconSquare: () => N,
-	IconStripe: () => P,
-	IconUnionPay: () => F,
-	IconVenmo: () => I,
-	IconVisa: () => L,
-	Input: () => n,
-	InputNumber: () => m,
-	InputPassword: () => r,
-	InputPhone: () => p,
-	Loader: () => i,
-	Modal: () => l,
-	Notice: () => x,
-	Pagination: () => g,
-	RadioButton: () => a,
-	Select: () => u,
-	SortableList: () => S,
-	Text: () => c,
-	Textarea: () => s,
-	TimePicker: () => v,
-	Toggle: () => h,
-	Tooltip: () => b
+var z = /* @__PURE__ */ e({
+	Accordion: () => t,
+	Button: () => n,
+	Carousel: () => v,
+	Checkbox: () => s,
+	DatePicker: () => f,
+	DateRangePicker: () => p,
+	DateTimePicker: () => b,
+	IconAmazonPay: () => w,
+	IconAmex: () => T,
+	IconApplePay: () => E,
+	IconDiscover: () => D,
+	IconGooglePay: () => O,
+	IconMaestro: () => k,
+	IconMastercard: () => A,
+	IconPayPal: () => j,
+	IconSepa: () => M,
+	IconShopPay: () => N,
+	IconSquare: () => P,
+	IconStripe: () => F,
+	IconUnionPay: () => I,
+	IconVenmo: () => L,
+	IconVisa: () => R,
+	Input: () => r,
+	InputNumber: () => h,
+	InputPassword: () => i,
+	InputPhone: () => m,
+	Loader: () => a,
+	Modal: () => u,
+	Notice: () => S,
+	Pagination: () => _,
+	RadioButton: () => o,
+	Select: () => d,
+	SortableList: () => C,
+	Text: () => l,
+	Textarea: () => c,
+	TimePicker: () => y,
+	Toggle: () => g,
+	Tooltip: () => x
 });
 //#endregion
-export { t as Button, _ as Carousel, o as Checkbox, d as DatePicker, f as DateRangePicker, y as DateTimePicker, C as IconAmazonPay, w as IconAmex, T as IconApplePay, E as IconDiscover, D as IconGooglePay, O as IconMaestro, k as IconMastercard, A as IconPayPal, j as IconSepa, M as IconShopPay, N as IconSquare, P as IconStripe, F as IconUnionPay, I as IconVenmo, L as IconVisa, n as Input, m as InputNumber, r as InputPassword, p as InputPhone, i as Loader, l as Modal, x as Notice, g as Pagination, a as RadioButton, u as Select, S as SortableList, c as Text, s as Textarea, v as TimePicker, h as Toggle, b as Tooltip, R as components_exports };
+export { t as Accordion, n as Button, v as Carousel, s as Checkbox, f as DatePicker, p as DateRangePicker, b as DateTimePicker, w as IconAmazonPay, T as IconAmex, E as IconApplePay, D as IconDiscover, O as IconGooglePay, k as IconMaestro, A as IconMastercard, j as IconPayPal, M as IconSepa, N as IconShopPay, P as IconSquare, F as IconStripe, I as IconUnionPay, L as IconVenmo, R as IconVisa, r as Input, h as InputNumber, i as InputPassword, m as InputPhone, a as Loader, u as Modal, S as Notice, _ as Pagination, o as RadioButton, d as Select, C as SortableList, l as Text, c as Textarea, y as TimePicker, g as Toggle, x as Tooltip, z as components_exports };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.31-beta.4",
+  "version": "0.0.32",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -81,6 +81,10 @@
     "./styles/utilities/placeholders": {
       "default": "./src/styles/utilities/_placeholders.scss"
     },
+    "./Accordion": {
+      "types": "./src/components/Accordion/Accordion.d.ts",
+      "default": "./src/components/Accordion/Accordion.esm.js"
+    },
     "./Button": {
       "types": "./src/components/Button/Button.d.ts",
       "default": "./src/components/Button/Button.esm.js"

package/skills/craftsman-component-usage/SKILL.md

@@ -12,6 +12,7 @@ Global rules for AI agents generating code against `@stamcat/craftsman`. For a s
 The package is built with component-level entry points only.
 
 ```tsx
+import { Accordion } from "@stamcat/craftsman/Accordion";
 import { Button } from "@stamcat/craftsman/Button";
 import { Carousel } from "@stamcat/craftsman/Carousel";
 import { Checkbox } from "@stamcat/craftsman/Checkbox";
@@ -51,6 +52,7 @@ Each entry links to the `AGENTS.md` co-located with that component's source for
 
 | Component | Docs |
 |---|---|
+| Accordion | [../../src/components/Accordion/AGENTS.md](../../src/components/Accordion/AGENTS.md) |
 | Button | [../../src/components/Button/AGENTS.md](../../src/components/Button/AGENTS.md) |
 | Input | [../../src/components/Input/AGENTS.md](../../src/components/Input/AGENTS.md) |
 | InputPassword | [../../src/components/InputPassword/AGENTS.md](../../src/components/InputPassword/AGENTS.md) |

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

@@ -7,6 +7,48 @@ description: 'Styling conventions for @stamcat/craftsman — color()/width()/bre
 
 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.
@@ -119,6 +161,9 @@ Available breakpoint keys: `tablet` · `tabletMax` · `tabletOnly` · `desktop`
 
 - 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
 
@@ -157,6 +202,13 @@ Do not compute `calc()` strings per-property in JS/TS (for example building a `p
 
 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

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.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/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/Carousel/{Carousel2.esm.js → Carousel.esm.js}

@@ -1,68 +1,68 @@
 "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 { Pagination as t } from "../Pagination/Pagination.esm.js";
+import './Carousel.css';/* empty css                   */
+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/Checkbox/Checkbox.esm.js

@@ -1,5 +1,5 @@
 "use client";
-import { Input as e } from "../Input/Input2.esm.js";
+import { Input as e } from "../Input/Input.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 }) => {

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/DatePicker.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 { 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 = t();
+	return /* @__PURE__ */ a(e, {
+		id: c || h,
+		className: n("datePicker", p),
+		label: s,
+		labelPosition: l,
+		error: d,
+		required: u,
+		style: f,
+		children: /* @__PURE__ */ a(o, {
+			calendarIcon: /* @__PURE__ */ a(r, { size: 16 }),
+			clearIcon: /* @__PURE__ */ a(i, { size: 14 }),
+			...m
+		})
+	});
+};
+//#endregion
+export { s as DatePicker };