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

package/AGENTS.md

@@ -750,7 +750,7 @@ Sass usage (framework source):
    1. Hook calls (`useSomething`)
    2. State (`useState`)
    3. Derived state / variables (values computed from state or props)
-   4. Action handlers (`const handle*`, `const dispatch*`)
+   4. Action handlers (`const handle*`, `const dispatch*`, `useEffect`)
 
 ## Known Limitations (Current Package State)
 

package/Utilities.esm.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.12",
+  "version": "0.0.27-alpha.14",
   "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",

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

@@ -3,6 +3,10 @@ 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

@@ -1,32 +1,15 @@
 @use "../../styles/utilities/functions" as u;
 
 @layer craftsman-base {
-    .timePicker__display {
-        display: inline-flex;
-        align-items: center;
-        gap: 2px;
-        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;
-        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)};
-        }
-    }
 
     .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;
@@ -58,6 +41,28 @@
                 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%;
@@ -135,4 +140,5 @@
             pointer-events: none;
         }
     }
+
 }

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

@@ -1,12 +1,17 @@
 type TimePickerDisplayProps = {
     hours: number;
     minutes: number;
-    hasValue: boolean;
+    hourHasValue: boolean;
+    minuteHasValue: boolean;
     isReadOnly: boolean;
     timeFormat: 12 | 24;
     amPmLabels: string[] | null;
     visible: boolean;
     onToggleVisible: () => void;
+    onClear: {
+        hour: () => void;
+        minute: () => void;
+    };
     onChange: {
         hour: (e: React.ChangeEvent<HTMLInputElement>) => void;
         minute: (e: React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -4,6 +4,7 @@ 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 resolveTimeFormat: (format: 24 | 12 | undefined, is24h: boolean) => 24 | 12;
 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;

package/src/utilities/validations.d.ts

@@ -1,5 +1,6 @@
 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"]) => string;
+export declare function isTouchDevice(): 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,14 +5,17 @@ function e(e) {
 function t(e) {
 	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
-var n = (e, t) => new Intl.NumberFormat(e, {
+function n() {
+	return typeof window < "u" && window.matchMedia("(pointer: coarse)").matches;
+}
+var r = (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) => {
+}).formatToParts(1).find((e) => e.type === "unit")?.value ?? String(t), i = (e) => {
 	let t = new Intl.DateTimeFormat(e, { hour: "numeric" }).resolvedOptions();
 	return t.hourCycle === "h23" || t.hourCycle === "h24";
-}, i = (e) => {
+}, a = (e) => {
 	let t = new Intl.DateTimeFormat(e, {
 		hour: "numeric",
 		hour12: !0
@@ -20,4 +23,4 @@ var n = (e, t) => new Intl.NumberFormat(e, {
 	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 { i as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, e as isEmpty, t as validateEmail };
+export { a as getAmPmLabels, r as getUnitLabel, i as is24HourFormat, e as isEmpty, n as isTouchDevice, t as validateEmail };