@stamcat/craftsman 0.0.27-alpha.11 → 0.0.27-alpha.13

package/AGENTS.md

@@ -746,6 +746,11 @@ Sass usage (framework source):
 2. Keep accessibility props in place (`aria-label`, `disabled`, semantic `type`).
 3. Use `variant="primary"` for main actions and `variant="text"` for low-emphasis actions.
 4. For loading states, pair `Loader` with accessible status text where needed.
+5. **Functional component declaration order** — always organize the body in this sequence:
+   1. Hook calls (`useSomething`)
+   2. State (`useState`)
+   3. Derived state / variables (values computed from state or props)
+   4. Action handlers (`const handle*`, `const dispatch*`, `useEffect`)
 
 ## Known Limitations (Current Package State)
 

package/Components.esm.js

@@ -11,9 +11,12 @@ import { Modal as l } from "./src/components/Modal/Modal.esm.js";
 import { Select as u } from "./src/components/Select/Select.esm.js";
 import { DatePicker as d } from "./src/components/Input/DatePicker.esm.js";
 import { InputPhone as f } from "./src/components/Input/InputPhone.esm.js";
+import { Pagination as p } from "./src/components/Pagination/Pagination2.esm.js";
+import { Carousel as m } from "./src/components/Carousel/Carousel2.esm.js";
 //#region src/components/index.ts
-var p = /* @__PURE__ */ e({
+var h = /* @__PURE__ */ e({
 	Button: () => t,
+	Carousel: () => m,
 	Checkbox: () => o,
 	DatePicker: () => d,
 	Input: () => n,
@@ -21,10 +24,11 @@ var p = /* @__PURE__ */ e({
 	InputPhone: () => f,
 	Loader: () => i,
 	Modal: () => l,
+	Pagination: () => p,
 	RadioButton: () => a,
 	Select: () => u,
 	Text: () => c,
 	Textarea: () => s
 });
 //#endregion
-export { t as Button, o as Checkbox, d as DatePicker, n as Input, r as InputPassword, f as InputPhone, i as Loader, l as Modal, a as RadioButton, u as Select, c as Text, s as Textarea, p as components_exports };
+export { t as Button, m as Carousel, o as Checkbox, d as DatePicker, n as Input, r as InputPassword, f as InputPhone, i as Loader, l as Modal, p as Pagination, a as RadioButton, u as Select, c as Text, s as Textarea, h as components_exports };

package/Utilities.esm.js

@@ -1,2 +1,2 @@
-import { isEmpty as e, validateEmail as t } from "./src/utilities/validations.esm.js";
-export { e as isEmpty, t as validateEmail };
+import { getAmPmLabels as e, getUnitLabel as t, is24HourFormat as n, isEmpty as r, validateEmail as i } from "./src/utilities/validations.esm.js";
+export { e as getAmPmLabels, t as getUnitLabel, n as is24HourFormat, r as isEmpty, i as validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.11",
+  "version": "0.0.27-alpha.13",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -23,6 +23,7 @@
     "prepublishOnly": "node ./scripts/prepublishCheck.js"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "2.1.9",
     "clsx": "2.1.1",
     "dompurify": "3.4.13",
     "embla-carousel-react": "8.6.0",
@@ -33,6 +34,7 @@
     "react-dom": "19.2.7",
     "react-icons": "5.7.0",
     "react-international-phone": "4.8.0",
+    "react-intl": "10.1.20",
     "react-toastify": "11.1.0",
     "sass-embedded": "1.100.0",
     "typescript-plugin-css-modules": "5.2.0",
@@ -109,6 +111,14 @@
     "./InputPhone": {
       "types": "./src/components/InputPhone.d.ts",
       "default": "./src/components/InputPhone.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"
     }
   }
 }

package/src/components/Carousel/Carousel.css

@@ -0,0 +1 @@
+@layer craftsman-base{.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

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

package/src/components/Carousel/Carousel.scss

@@ -1,32 +1,34 @@
 @use "../../styles/utilities/functions" as u;
 
-.carousel {
-    position: relative;
+@layer craftsman-base {
+    .carousel {
+        position: relative;
 
-    &__viewport {
-        overflow: hidden;
-    }
+        &__viewport {
+            overflow: hidden;
+        }
 
-    &__container {
-        display: flex;
-        touch-action: pan-y pinch-zoom;
-    }
+        &__container {
+            display: flex;
+            touch-action: pan-y pinch-zoom;
+        }
 
-    &__slide {
-        flex: 0 0 100%;
-        min-width: 0;
-    }
+        &__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)};
-    }
+        &__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 n from "../../../node_modules/embla-carousel-react/esm/embla-carousel-react.esm.esm.js";
+import './Carousel.css';/* empty css             */
+import r from "clsx";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useCallback as o, useSyncExternalStore as s } from "react";
+import { FaAngleLeft as c, FaAngleRight as l, FaCircle as u, FaRegCircle as d } from "react-icons/fa6";
+//#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] = n(v), x = o((e) => b ? (b.on("select", e).on("reInit", e), () => {
+		b.off("select", e), b.off("reInit", e);
+	}) : () => {}, [b]), S = s(x, () => !!b?.canScrollPrev(), () => !1), C = s(x, () => !!b?.canScrollNext(), () => !1), w = s(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__ */ a("div", {
+		className: r("carousel", m),
+		style: h,
+		children: [/* @__PURE__ */ i("div", {
+			className: "carousel__viewport",
+			ref: y,
+			children: /* @__PURE__ */ i("div", {
+				className: "carousel__container",
+				children: p.map((e, t) => /* @__PURE__ */ i("div", {
+					className: "carousel__slide",
+					children: e
+				}, `slide-${t}`))
+			})
+		}), /* @__PURE__ */ a("div", {
+			className: "carousel__controls",
+			children: [
+				g && /* @__PURE__ */ a("div", {
+					className: "carousel__buttons",
+					children: [/* @__PURE__ */ i(e, {
+						variant: "text",
+						onClick: T,
+						disabled: !S,
+						name: "prev",
+						children: /* @__PURE__ */ i(c, {
+							size: 24,
+							"aria-label": "prev"
+						})
+					}), /* @__PURE__ */ i(e, {
+						variant: "text",
+						onClick: E,
+						disabled: !C,
+						name: "next",
+						children: /* @__PURE__ */ i(l, {
+							size: 24,
+							"aria-label": "next"
+						})
+					})]
+				}),
+				_ === "dots" && /* @__PURE__ */ i("div", {
+					className: "carousel__dots",
+					children: p.map((t, n) => /* @__PURE__ */ i(e, {
+						variant: "text",
+						value: n,
+						onClick: D,
+						children: i(w === n ? u : d, { size: 16 })
+					}, `dot-${n}`))
+				}),
+				_ === "numbers" && /* @__PURE__ */ i(t, {
+					total: p.length,
+					current: w,
+					onChange: D
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { f as Carousel };

package/src/components/Input/Input.css

@@ -1 +1 @@
-@layer craftsman-base;.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .25);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .25);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] .input::placeholder{opacity:0;transition:opacity .2s}.input-wrapper .input-field{align-items:center;display:inline-flex;position:relative}.input-wrapper .input-field[data-has-end-adornment=true]>.input{width:100%;padding-right:calc(var(--w-gutter) * 1.5)}.input-wrapper .input-adornment{right:calc(var(--w-gutter) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper .input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-wrapper .input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}
+@layer craftsman-base{.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .25);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .25);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] .input::placeholder{opacity:0;transition:opacity .2s}.input-wrapper .input-field{align-items:center;display:inline-flex;position:relative}.input-wrapper .input-field[data-has-end-adornment=true]>.input{width:100%;padding-right:calc(var(--w-gutter) * 1.5)}.input-wrapper .input-adornment{right:calc(var(--w-gutter) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper .input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-wrapper .input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}}

package/src/components/Input/Input.scss

@@ -6,158 +6,159 @@
     left: #{u.width("gutter", 0.125)};
     font-size: #{u.width("text", 0.75)};
 }
-
-.input-wrapper {
-    label {
-        .input-label {
-            margin-bottom: #{u.width("gutter", 0.25)};
-        }
-    }
-
-    &[data-required="true"] {
+@layer craftsman-base {
+    .input-wrapper {
         label {
             .input-label {
-                &::after {
-                    content: "*";
-                    color: var(--red700);
+                margin-bottom: #{u.width("gutter", 0.25)};
+            }
+        }
+
+        &[data-required="true"] {
+            label {
+                .input-label {
+                    &::after {
+                        content: "*";
+                        color: var(--red700);
+                    }
                 }
             }
         }
-    }
 
-    &[data-label-position="left"] {
-        label {
-            display: inline-flex;
-            align-items: center;
+        &[data-label-position="left"] {
+            label {
+                display: inline-flex;
+                align-items: center;
 
-            .input-label {
-                width: fit-content;
-                margin-right: #{u.width("gutter", 0.75)};
+                .input-label {
+                    width: fit-content;
+                    margin-right: #{u.width("gutter", 0.75)};
+                }
+            }
+            &.textarea {
+                label {
+                    align-items: flex-start;
+                }
             }
         }
-        &.textarea {
+
+        &[data-label-position="bottom"] {
             label {
+                display: inline-flex;
+                flex-direction: column-reverse;
                 align-items: flex-start;
+
+                .input-label {
+                    margin-bottom: 0;
+                    margin-top: #{u.width("gutter", 0.25)};
+                }
             }
         }
-    }
 
-    &[data-label-position="bottom"] {
-        label {
-            display: inline-flex;
-            flex-direction: column-reverse;
-            align-items: flex-start;
+        &[data-label-position="right"] {
+            label {
+                display: inline-flex;
+                flex-direction: row-reverse;
+                align-items: baseline;
 
-            .input-label {
-                margin-bottom: 0;
-                margin-top: #{u.width("gutter", 0.25)};
+                .input-label {
+                    margin-left: #{u.width("gutter", 0.25)};
+                    margin-bottom: 0;
+                }
             }
         }
-    }
 
-    &[data-label-position="right"] {
-        label {
-            display: inline-flex;
-            flex-direction: row-reverse;
-            align-items: baseline;
+        &[data-label-position="inside"] {
+            --react-international-phone-height: 50px;
+            --react-international-phone-border-radius: 8px;
+            --react-international-phone-border-color: #c0c0c0ff;
+            position: relative;
 
             .input-label {
-                margin-left: #{u.width("gutter", 0.25)};
-                margin-bottom: 0;
+                position: absolute;
+                background-color: var(--white);
+                z-index: 1;
+                width: fit-content;
+                padding: 0 5px;
+                top: #{u.width(gutter, 0.25)};
+                left: #{u.width(gutter, 0.25)};
+                pointer-events: none;
+                transition:
+                    top 150ms ease,
+                    left 150ms ease,
+                    font-size 150ms ease,
+                    color 150ms ease;
             }
-        }
-    }
 
-    &[data-label-position="inside"] {
-        --react-international-phone-height: 50px;
-        --react-international-phone-border-radius: 8px;
-        --react-international-phone-border-color: #c0c0c0ff;
-        position: relative;
+            > label > .input-field > .input,
+            > .input {
+                transition: border-color 200ms ease;
+            }
 
-        .input-label {
-            position: absolute;
-            background-color: var(--white);
-            z-index: 1;
-            width: fit-content;
-            padding: 0 5px;
-            top: #{u.width(gutter, 0.25)};
-            left: #{u.width(gutter, 0.25)};
-            pointer-events: none;
-            transition:
-                top 150ms ease,
-                left 150ms ease,
-                font-size 150ms ease,
-                color 150ms ease;
-        }
+            &:focus-within {
+                .input-label {
+                    @include inside-input-label-floating;
+                    color: var(--blue500);
+                }
 
-        > label > .input-field > .input,
-        > .input {
-            transition: border-color 200ms ease;
-        }
+                .input {
+                    border-color: var(--blue500);
+                }
 
-        &:focus-within {
-            .input-label {
-                @include inside-input-label-floating;
-                color: var(--blue500);
+                .input::placeholder {
+                    opacity: 1;
+                }
+            }
+
+            &[data-has-input="true"] {
+                .input-label {
+                    @include inside-input-label-floating;
+                }
             }
 
-            .input {
-                border-color: var(--blue500);
+            .input[type="tel"] {
+                width: 100%;
             }
 
             .input::placeholder {
-                opacity: 1;
+                opacity: 0;
+                transition: opacity 200ms ease;
             }
         }
+        .input-field {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
 
-        &[data-has-input="true"] {
-            .input-label {
-                @include inside-input-label-floating;
+            &[data-has-end-adornment="true"] {
+                > .input {
+                    width: 100%;
+                    padding-right: #{u.width("gutter", 1.5)};
+                }
             }
         }
 
-        .input[type="tel"] {
-            width: 100%;
+        .input-adornment {
+            position: absolute;
+            right: #{u.width("gutter", 0.5)};
+            top: 50%;
+            transform: translateY(-50%);
+            margin-top: 0;
+            z-index: 1;
+            display: inline-flex;
+            align-items: center;
         }
 
-        .input::placeholder {
-            opacity: 0;
-            transition: opacity 200ms ease;
+        .input-error {
+            margin-top: #{u.width("gutter", 0.25)};
+            font-size: #{u.width("text", 0.75)};
+            color: var(--red600);
         }
-    }
-    .input-field {
-        position: relative;
-        display: inline-flex;
-        align-items: center;
-
-        &[data-has-end-adornment="true"] {
-            > .input {
-                width: 100%;
-                padding-right: #{u.width("gutter", 1.5)};
-            }
+        .input-view-toggle {
+            padding: 0;
+            display: inline-flex;
+            align-items: "center";
+            line-height: 1;
         }
     }
-
-    .input-adornment {
-        position: absolute;
-        right: #{u.width("gutter", 0.5)};
-        top: 50%;
-        transform: translateY(-50%);
-        margin-top: 0;
-        z-index: 1;
-        display: inline-flex;
-        align-items: center;
-    }
-
-    .input-error {
-        margin-top: #{u.width("gutter", 0.25)};
-        font-size: #{u.width("text", 0.75)};
-        color: var(--red600);
-    }
-    .input-view-toggle {
-        padding: 0;
-        display: inline-flex;
-        align-items: "center";
-        line-height: 1;
-    }
 }

package/src/components/Pagination/Pagination.css

@@ -0,0 +1 @@
+@layer craftsman-base{.pagination{align-items:center;gap:calc(var(--w-gutter) * .25);display:inline-flex}.pagination .active{color:var(--gray700);border:1px solid;justify-content:center;align-items:center;width:20px;height:20px;display:inline-flex}}

package/src/components/Pagination/Pagination.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export type PaginationProps = {
+    total: number;
+    current: number;
+    showPages?: number;
+    onChange: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const Pagination: React.FC<PaginationProps>;

package/src/components/Pagination/Pagination.scss

@@ -0,0 +1,21 @@
+
+@use "../../styles/utilities/functions" as u;
+
+@layer craftsman-base {
+    .pagination {
+        display: inline-flex;
+        align-items: center;
+        gap: #{u.width("gutter", 0.25)};
+
+        .active {
+            color: #{u.color("gray700")};
+            border: 1px solid;
+            width: 20px;
+            height: 20px;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            
+        }
+    }
+}

package/src/components/Pagination/Pagination2.esm.js

@@ -0,0 +1,66 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import './Pagination.css';/* empty css               */
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import "react";
+//#region src/components/Pagination/Pagination.tsx
+var i = ({ total: i, current: a, onChange: o, className: s, style: c, showPages: l = 5 }) => {
+	function u(e, t) {
+		let n = Math.floor(l / 2), r = Math.max(0, e - n), i = Math.min(t - 1, r + l - 1);
+		r = Math.max(0, i - l + 1);
+		let a = [];
+		for (let e = r; e <= i; e++) a.push(e);
+		return a;
+	}
+	let d = u(a, i), f = Math.floor(a / l), p = f > 0, m = (f + 1) * l < i, h = (f - 1) * l, g = (f + 1) * l;
+	return /* @__PURE__ */ r("nav", {
+		className: t("pagination", s),
+		style: c,
+		"aria-label": "Pagination",
+		children: [
+			/* @__PURE__ */ n(e, {
+				variant: "text",
+				value: 0,
+				onClick: o,
+				disabled: a === 0,
+				"aria-label": "First page",
+				children: "«"
+			}),
+			p && /* @__PURE__ */ n(e, {
+				variant: "text",
+				value: h,
+				onClick: o,
+				"aria-label": `Back ${l} pages`,
+				children: "‹‹"
+			}),
+			d.map((t) => /* @__PURE__ */ n(e, {
+				variant: "text",
+				value: t,
+				onClick: o,
+				disabled: t === a,
+				"aria-label": `Page ${t + 1}`,
+				"aria-current": t === a ? "page" : void 0,
+				className: t === a ? "active" : void 0,
+				children: t + 1
+			}, t)),
+			m && /* @__PURE__ */ n(e, {
+				variant: "text",
+				value: g,
+				onClick: o,
+				"aria-label": `Forward ${l} pages`,
+				children: "››"
+			}),
+			/* @__PURE__ */ n(e, {
+				variant: "text",
+				value: i - 1,
+				onClick: o,
+				disabled: a === i - 1,
+				"aria-label": "Last page",
+				children: "»"
+			})
+		]
+	});
+};
+//#endregion
+export { i as Pagination };

package/src/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { LabeledInput } from '../Input/InputWrapper';
+type PropType = Omit<React.ComponentProps<"input">, "type"> & LabeledInput & {
+    locale?: Intl.LocalesArgument;
+    format?: 24 | 12;
+    labels?: {
+        hour?: "string";
+        minute?: "string";
+    };
+};
+export declare const TimePicker: (props: PropType) => React.JSX.Element;
+export {};

package/src/components/TimePicker/TimePicker.scss

@@ -0,0 +1,144 @@
+@use "../../styles/utilities/functions" as u;
+
+@layer craftsman-base {
+
+    .timePicker {
+        position: relative;
+        display: inline-flex;
+        height: 160px;
+        background-color: #{u.color("white")};
+        border: 1px solid #{u.color("gray400")};
+        border-radius: 8px;
+        z-index: 1;
+        &:before,
+        &:after {
+            position: absolute;
+            left: 0;
+            right: 0;
+            content: "";
+            display: block;
+            height: calc(50% - 32px / 2);
+            z-index: 1;
+            pointer-events: none;
+        }
+
+        &:before {
+            top: -0.5px;
+            border-bottom: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
+            background: linear-gradient(
+                to top,
+                rgba(var(--background-site-rgb-value), 0.65) 0%,
+                rgba(var(--background-site-rgb-value), 1) 100%
+            );
+        }
+
+        &:after {
+            bottom: -0.5px;
+            border-top: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
+            background: linear-gradient(
+                to bottom,
+                rgba(var(--background-site-rgb-value), 0.65) 0%,
+                rgba(var(--background-site-rgb-value), 1) 100%
+            );
+        }
+        &__display {
+            display: inline-flex;
+            align-items: center;
+            gap: 2px;
+            background-color: white;
+            border: 1px solid #{u.color("gray400")};
+            border-radius: 4px;
+            padding: #{u.width("gutter", 0.25)} 30px #{u.width("gutter", 0.25)} #{u.width("gutter", 0.5)};
+            position: relative;
+            z-index: 1;
+            input, select {
+                border: none;
+                padding: #{u.width("gutter", 0.25)};
+            }
+            select::picker-icon {
+                display: none;
+            }
+            .input-view-toggle {
+                position: absolute;
+                right: #{u.width("gutter", 0.5)};
+            }
+        }
+
+        .ios-picker {
+            height: 100%;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 6px;
+            padding: 0 12px;
+            line-height: 1;
+            font-size: 16px;
+
+            &--disabled {
+                pointer-events: none;
+                opacity: 0.5;
+            }
+        }
+
+        .ios-picker__scene {
+            min-width: 30px;
+            height: 100%;
+            overflow: hidden;
+            display: flex;
+            align-items: center;
+            touch-action: pan-x;
+        }
+
+        .ios-picker__viewport {
+            height: 32px;
+            width: 100%;
+            perspective: 1000px;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+            -webkit-touch-callout: none;
+            -khtml-user-select: none;
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        .ios-picker__viewport--perspective-left {
+            perspective-origin: calc(50% + 130px) 50%;
+            transform: translateX(27px);
+        }
+
+        .ios-picker__viewport--perspective-right {
+            perspective-origin: calc(50% - 130px) 50%;
+            transform: translateX(-27px);
+        }
+
+        .ios-picker__viewport--perspective-center {
+            perspective-origin: 50% 50%;
+        }
+
+        .ios-picker__container {
+            height: 100%;
+            width: 100%;
+            transform-style: preserve-3d;
+            will-change: transform;
+        }
+
+        .ios-picker__slide {
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            backface-visibility: hidden;
+            opacity: 0;
+        }
+
+        .ios-picker__label {
+            font-weight: 700;
+            white-space: nowrap;
+            pointer-events: none;
+        }
+    }
+
+}

package/src/components/TimePicker/TimePickerDisplay.d.ts

@@ -0,0 +1,17 @@
+type TimePickerDisplayProps = {
+    hours: number;
+    minutes: number;
+    hasValue: boolean;
+    isReadOnly: boolean;
+    timeFormat: 12 | 24;
+    amPmLabels: string[] | null;
+    visible: boolean;
+    onToggleVisible: () => void;
+    onChange: {
+        hour: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        minute: (e: React.ChangeEvent<HTMLInputElement>) => void;
+        amPm: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    };
+};
+export declare const TimePickerDisplay: (props: TimePickerDisplayProps) => import("react").JSX.Element;
+export {};

package/src/components/TimePicker/TimePickerWheel.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export type IosPickerItemProps = {
+    loop?: boolean;
+    label: string;
+    slideCount: number;
+    perspective: "left" | "right" | "center";
+    offset?: number;
+    slides?: React.ReactNode[];
+    selectedIndex?: number;
+    onSelect?: (index: number) => void;
+    disabled?: boolean;
+};
+export declare const IosPickerItem: (props: IosPickerItemProps) => React.JSX.Element;

package/src/components/TimePicker/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const CIRCLE_DEGREES = 360;
+export declare const WHEEL_ITEM_SIZE = 32;
+export declare const WHEEL_ITEM_COUNT = 18;
+export declare const WHEEL_ITEMS_IN_VIEW = 4;
+export declare const WHEEL_ITEM_RADIUS: number;
+export declare const IN_VIEW_DEGREES: number;
+export declare const WHEEL_RADIUS: number;

package/src/components/TimePicker/utilities.d.ts

@@ -0,0 +1,14 @@
+import { EmblaCarouselType } from 'embla-carousel';
+export declare const parseTimeString: (val: unknown) => [number, number];
+export declare const padTime: (n: number) => string;
+export declare const toDisplayHour: (hours: number, is12h: boolean) => number;
+export declare const to24Hour: (display: number, isPM: boolean, is12h: boolean) => number;
+export declare const resolveLocale: (locale?: Intl.LocalesArgument) => string;
+export declare const isInView: (wheelLocation: number, slidePosition: number) => boolean;
+export declare const setSlideStyles: (emblaApi: EmblaCarouselType, index: number, loop: boolean, slideCount: number, totalRadius: number) => void;
+export declare const setContainerStyles: (emblaApi: EmblaCarouselType, wheelRotation: number) => void;
+export declare const inactivateEmblaTransform: (emblaApi: EmblaCarouselType) => void;
+export declare const snapOnPointerUp: (emblaApi: EmblaCarouselType) => void;
+export declare const resolveHasValue: (value: React.ComponentProps<"input">["value"], internalHours: number | null) => boolean;
+export declare const resolveTime: (value: unknown, h: number | null, m: number | null) => [number, number];
+export declare const toDisplayInputValue: (hasVal: boolean, val: string | number) => string;

package/src/components/index.d.ts

@@ -10,3 +10,5 @@ export { Modal } from './Modal/Modal';
 export { Select } from './Select/Select';
 export { DatePicker } from './Input/DatePicker';
 export { InputPhone } from './Input/InputPhone';
+export { Pagination } from './Pagination/Pagination';
+export { Carousel } from './Carousel/Carousel';

package/src/stories/molecules/Carousel.scss

@@ -1,19 +1,21 @@
 
 @use "../../styles/utilities/functions" as u;
 
-.carouselWrapper {
-    width: 400px;
-    img {
-        width: 100%;
-    }
-    figcaption {
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        text-align: center;
-        font-weight: bold;
-        background-color: #{u.color("white", rgba, 0.75)};
-        padding: #{u.width("gutter", 0.5)} 0 #{u.width("gutter")};
-    }
+@layer craftsman-base {
+    .carouselWrapper {
+        width: 400px;
+        img {
+            width: 100%;
+        }
+        figcaption {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            text-align: center;
+            font-weight: bold;
+            background-color: #{u.color("white", rgba, 0.75)};
+            padding: #{u.width("gutter", 0.5)} 0 #{u.width("gutter")};
+        }
 
+    }
 }

package/src/styles/global/globalStyles.scss

@@ -61,9 +61,7 @@
     }
 
     input {
-        &:not([type="radio"]):not([type="checkbox"]) {
-            @extend %input-base;
-        }
+        @extend %input-base;
         &[type="checkbox"] {
             @extend %checkbox;
         }

package/src/utilities/types.d.ts

@@ -52,6 +52,7 @@ export type TextInputExclusions = z.infer<typeof zTextInputExclusions>;
 export declare const zTextInputTypes: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week", "radio", "checkbox"];
 export declare const zTextInputType: z.ZodEnum<{
     number: "number";
+    month: "month";
     text: "text";
     checkbox: "checkbox";
     radio: "radio";
@@ -62,7 +63,6 @@ export declare const zTextInputType: z.ZodEnum<{
     file: "file";
     hidden: "hidden";
     image: "image";
-    month: "month";
     password: "password";
     range: "range";
     reset: "reset";

package/src/utilities/validations.d.ts

@@ -1,2 +1,5 @@
 export declare function isEmpty(value: unknown): boolean;
 export declare function validateEmail(value: string): boolean;
+export declare const getUnitLabel: (locale: Intl.LocalesArgument, unit: Intl.NumberFormatOptions["unit"], override?: string) => string;
+export declare const is24HourFormat: (locale: Intl.LocalesArgument) => boolean;
+export declare const getAmPmLabels: (locale: Intl.LocalesArgument) => [string, string];

package/src/utilities/validations.esm.js

@@ -5,5 +5,19 @@ function e(e) {
 function t(e) {
 	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
+var n = (e, t, n) => n ?? new Intl.NumberFormat(e, {
+	style: "unit",
+	unit: t,
+	unitDisplay: "long"
+}).formatToParts(1).find((e) => e.type === "unit")?.value ?? String(t), r = (e) => {
+	let t = new Intl.DateTimeFormat(e, { hour: "numeric" }).resolvedOptions();
+	return t.hourCycle === "h23" || t.hourCycle === "h24";
+}, i = (e) => {
+	let t = new Intl.DateTimeFormat(e, {
+		hour: "numeric",
+		hour12: !0
+	});
+	return [t.formatToParts(new Date(2e3, 0, 1, 9)).find((e) => e.type === "dayPeriod")?.value ?? "AM", t.formatToParts(new Date(2e3, 0, 1, 21)).find((e) => e.type === "dayPeriod")?.value ?? "PM"];
+};
 //#endregion
-export { e as isEmpty, t as validateEmail };
+export { i as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, e as isEmpty, t as validateEmail };