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

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/package.json

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

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/utilities/validations.d.ts

@@ -1,5 +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"]) => string;
+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,7 +5,7 @@ function e(e) {
 function t(e) {
 	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
-var n = (e, t) => new Intl.NumberFormat(e, {
+var n = (e, t, n) => n ?? new Intl.NumberFormat(e, {
 	style: "unit",
 	unit: t,
 	unitDisplay: "long"