@stamcat/craftsman 0.0.31-beta.4 → 0.0.31

package/src/components/TimePicker/TimePicker2.esm.js

@@ -4,15 +4,15 @@ import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
 import './TimePicker.css';/* empty css               */
 import { resolveLocale as n } from "./utilities.esm.js";
 import { TimePickerDisplay as r } from "./TimePickerDisplay.esm.js";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { useEffect as o, useState as s } from "react";
-import { FaClock as c, FaRegClock as l, FaX as u } from "react-icons/fa6";
+import { useEffect as i, useState as a } from "react";
+import { FaClock as o, FaRegClock as s, FaX as c } from "react-icons/fa6";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { autoUpdate as d, flip as f, offset as p, shift as m, useFloating as h } from "@floating-ui/react-dom";
 import { TimePicker as g } from "react-time-picker";
 import { isMobile as _ } from "react-device-detect";
 //#region src/components/TimePicker/TimePicker.tsx
 var v = (v) => {
-	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, ...k } = v, [A, j] = s(null), [M, N] = s(null), { floatingStyles: P } = h({
+	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, ...k } = v, [A, j] = a(null), [M, N] = a(null), { floatingStyles: P } = h({
 		placement: "bottom-start",
 		strategy: "absolute",
 		whileElementsMounted: d,
@@ -25,8 +25,8 @@ var v = (v) => {
 			reference: A,
 			floating: M
 		}
-	}), [F, I] = s(!1), L = n(b);
-	return o(() => {
+	}), [F, I] = a(!1), L = n(b);
+	return i(() => {
 		if (!F) return;
 		let e = (e) => {
 			A?.contains(e.target) || M?.contains(e.target) || I(!1);
@@ -38,7 +38,7 @@ var v = (v) => {
 		F,
 		A,
 		M
-	]), /* @__PURE__ */ a("div", {
+	]), /* @__PURE__ */ u("div", {
 		className: "timePicker",
 		ref: j,
 		onFocus: (e) => {
@@ -48,28 +48,28 @@ var v = (v) => {
 			e.key === "Enter" && I(!1);
 		},
 		children: [
-			O && /* @__PURE__ */ i("input", {
+			O && /* @__PURE__ */ l("input", {
 				type: "hidden",
 				name: O,
 				value: typeof S == "string" ? S : "",
 				readOnly: !0
 			}),
-			/* @__PURE__ */ i(t, {
+			/* @__PURE__ */ l(t, {
 				label: w,
 				labelPosition: T,
 				error: E,
 				required: D,
-				children: /* @__PURE__ */ a("div", {
+				children: /* @__PURE__ */ u("div", {
 					className: "timePicker__field",
-					children: [/* @__PURE__ */ i(g, {
+					children: [/* @__PURE__ */ l(g, {
 						...k,
 						value: S,
 						onChange: C,
 						locale: L,
 						required: D,
 						disableClock: !0,
-						clearIcon: /* @__PURE__ */ i(u, { size: 14 })
-					}), !_ && /* @__PURE__ */ i(e, {
+						clearIcon: /* @__PURE__ */ l(c, { size: 14 })
+					}), !_ && /* @__PURE__ */ l(e, {
 						type: "button",
 						variant: "text",
 						onClick: () => I((e) => !e),
@@ -77,11 +77,11 @@ var v = (v) => {
 						"aria-pressed": F,
 						disabled: v.disabled,
 						className: "input-view-toggle",
-						children: i(F ? c : l, { size: 16 })
+						children: l(F ? o : s, { size: 16 })
 					})]
 				})
 			}),
-			!_ && /* @__PURE__ */ i(r, {
+			!_ && /* @__PURE__ */ l(r, {
 				value: S,
 				onChange: (e) => C?.(e),
 				locale: L,

package/src/components/TimePicker/TimePickerDisplay.esm.js

@@ -1,8 +1,8 @@
 import { getAmPmLabels as e, getUnitLabel as t, is24HourFormat as n, isEmpty as r } from "../../utilities/validations.esm.js";
 import { padTime as i, parseTimeString as a, resolveLocale as o, resolveTimeFormat as s, to24Hour as c } from "./utilities.esm.js";
 import { IosPickerItem as l } from "./TimePickerWheel.esm.js";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
 import "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/TimePicker/TimePickerDisplay.tsx
 var f = (e, t) => e ? t : void 0, p = (p) => {
 	let { value: m, onChange: h, locale: g, format: _, labels: v, visible: y = !1, floatingRef: b, style: x } = p, S = o(g), [C, w] = a(m), T = !r(m), E = s(_, n(S)), D = +(E === 12), O = E === 12 ? e(S) : null, k = +(C >= 12), A = E === 12 ? (C % 12 + 11) % 12 : C;

package/src/components/TimePicker/TimePickerWheel.esm.js

@@ -1,9 +1,9 @@
 "use client";
 import "./constants.esm.js";
 import { inactivateEmblaTransform as e, setContainerStyles as t, setSlideStyles as n, snapOnPointerUp as r } from "./utilities.esm.js";
-import i from "clsx";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useCallback as s, useEffect as c, useLayoutEffect as l, useRef as u } from "react";
+import { useCallback as i, useEffect as a, useLayoutEffect as o, useRef as s } from "react";
+import c from "clsx";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import d from "embla-carousel-react";
 //#region src/components/TimePicker/TimePickerWheel.tsx
 var f = (f) => {
@@ -12,11 +12,11 @@ var f = (f) => {
 		axis: "y",
 		dragFree: !0,
 		containScroll: !1
-	}), w = u(null), T = u(b);
-	l(() => {
+	}), w = s(null), T = s(b);
+	o(() => {
 		T.current = b;
 	});
-	let E = p * 20, D = g ? 0 : 20, O = s((e) => {
+	let E = p * 20, D = g ? 0 : 20, O = i((e) => {
 		t(e, (p * 20 - D) * e.scrollProgress()), e.slideNodes().forEach((t, r) => {
 			n(e, r, g, p, E);
 		});
@@ -26,32 +26,32 @@ var f = (f) => {
 		D,
 		E
 	]);
-	return c(() => {
+	return a(() => {
 		if (!C) return () => {};
 		let t = (e) => T.current?.(e.selectedScrollSnap());
 		return C.on("pointerUp", r), C.on("scroll", O), C.on("reInit", e), C.on("reInit", O), C.on("select", t), e(C), O(C), () => {
 			C.off("pointerUp", r), C.off("scroll", O), C.off("reInit", e), C.off("reInit", O), C.off("select", t);
 		};
-	}, [C, O]), c(() => {
+	}, [C, O]), a(() => {
 		!C || y === void 0 || C.selectedScrollSnap() !== y && C.scrollTo(y);
-	}, [C, y]), /* @__PURE__ */ o("div", {
-		className: i("ios-picker", { "ios-picker--disabled": x }),
+	}, [C, y]), /* @__PURE__ */ u("div", {
+		className: c("ios-picker", { "ios-picker--disabled": x }),
 		"aria-disabled": x,
-		children: [/* @__PURE__ */ a("div", {
+		children: [/* @__PURE__ */ l("div", {
 			className: "ios-picker__scene",
 			ref: w,
-			children: /* @__PURE__ */ a("div", {
+			children: /* @__PURE__ */ l("div", {
 				className: `ios-picker__viewport ios-picker__viewport--perspective-${m}`,
 				ref: S,
-				children: /* @__PURE__ */ a("div", {
+				children: /* @__PURE__ */ l("div", {
 					className: "ios-picker__container",
-					children: Array.from({ length: p }, (e, t) => /* @__PURE__ */ a("div", {
+					children: Array.from({ length: p }, (e, t) => /* @__PURE__ */ l("div", {
 						className: "ios-picker__slide",
 						children: v ? v[t] : t + _
 					}, t))
 				})
 			})
-		}), /* @__PURE__ */ a("div", {
+		}), /* @__PURE__ */ l("div", {
 			className: "ios-picker__label",
 			children: h
 		})]

package/src/components/Tooltip/Tooltip2.esm.js

@@ -1,12 +1,12 @@
 "use client";
 import './Tooltip.css';/* empty css            */
-import e from "clsx";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { useEffect as r, useState as i } from "react";
+import { useEffect as e, useState as t } from "react";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { autoUpdate as a, flip as o, offset as s, shift as c, useFloating as l } from "@floating-ui/react-dom";
 //#region src/components/Tooltip/Tooltip.tsx
 var u = (u) => {
-	let { showContent: d = "hover" } = u, [f, p] = i(null), [m, h] = i(null), { floatingStyles: g, placement: _ } = l({
+	let { showContent: d = "hover" } = u, [f, p] = t(null), [m, h] = t(null), { floatingStyles: g, placement: _ } = l({
 		placement: u.placement ?? "bottom-start",
 		strategy: u.strategy ?? "absolute",
 		whileElementsMounted: a,
@@ -19,8 +19,8 @@ var u = (u) => {
 			reference: f,
 			floating: m
 		}
-	}), [v, y] = i(!1);
-	return r(() => {
+	}), [v, y] = t(!1);
+	return e(() => {
 		if (!v || d !== "click") return;
 		let e = (e) => {
 			f?.contains(e.target) || m?.contains(e.target) || y(!1);
@@ -33,10 +33,10 @@ var u = (u) => {
 		d,
 		f,
 		m
-	]), /* @__PURE__ */ n("div", {
-		className: e("tooltip"),
-		children: [/* @__PURE__ */ t("div", {
-			className: e("tooltip__anchor"),
+	]), /* @__PURE__ */ i("div", {
+		className: n("tooltip"),
+		children: [/* @__PURE__ */ r("div", {
+			className: n("tooltip__anchor"),
 			ref: p,
 			onMouseEnter: () => {
 				d === "hover" && y(!0);
@@ -49,8 +49,8 @@ var u = (u) => {
 			},
 			style: u.anchorStyles,
 			children: u.anchor
-		}), v && /* @__PURE__ */ t("div", {
-			className: e("tooltip__floating"),
+		}), v && /* @__PURE__ */ r("div", {
+			className: n("tooltip__floating"),
 			ref: h,
 			"data-placement": _,
 			style: {

package/src/components/index.d.ts

@@ -1,3 +1,4 @@
+export { Accordion } from './Accordion/Accordion';
 export { Button } from './Button/Button';
 export { Input } from './Input/Input';
 export { InputPassword } from './InputPassword/InputPassword';

package/src/styles/global/components/_input.scss

@@ -2,19 +2,19 @@
 
 @layer craftsman-base {
 
-  %interactive-focus-reset {
-    &:focus {
-      outline: 0;
-      box-shadow: none;
-    }
-  }
-
   %input-base {
     color: var(--text);
     border-radius: 6px;
     border: 1px solid var(--gray400);
     padding: #{u.width("gutter", 0.5)};
     background-color: var(--white);
+    &:focus {
+      outline: 0;
+      box-shadow: none;
+    }
+    &:hover {
+        border-color: #{u.color("gray500")};
+    }
 
     &[type="number"]::-webkit-outer-spin-button,
     &[type="number"]::-webkit-inner-spin-button {
@@ -29,10 +29,9 @@
 
     &:disabled,
     &.disabled {
-      border-color: var(--gray200);
+      border-color: var(--gray400);
       background-color: var(--gray100);
     }
 
-    @extend %interactive-focus-reset;
   }
 }

package/src/styles/global/components/_select.scss

@@ -1,21 +1,16 @@
 @use "../../utilities/functions" as u;
+@use "./input";
+
 @layer craftsman-base {
     select,
     ::picker(select) {
         appearance: base-select;
-        background: #{u.color("white")};
-        color: #{u.color("text")};
-        border: 1px solid #{u.color("gray200")};
-        border-radius: 6px;
+        @extend %input-base;
+        
     }
     select {
-        padding: 10px 40px 10px 14px;
+        padding-right: 40px;
         position: relative;
-        &:hover,
-        &:focus {
-            outline: none;
-            border-color: #{u.color("gray200")};
-        }
         &:focus-visible {
             outline: none;
         }
@@ -28,25 +23,25 @@
             transition: 0.2s rotate;
             content: "";
             display: inline-block;
-            width: 10px;
-            height: 10px;
+            width: 7px;
+            height: 7px;
             border-style: solid;
             border-width: 0 2px 2px 0;
             transform: rotate(45deg);
             margin: 0px 2px 0 12px;
             position: absolute;
-            right: 16px;
-            top: 12px;
+            right: 14px;
+            top: 14px;
         }
         &:open::picker-icon {
-            margin-top: 6px;
+            margin-top: 4px;
             rotate: 180deg;
         }
         option {
             padding: #{u.width("gutter", 0.5)};
             &:hover,
             &:focus {
-                background: #{u.color("gray100")};
+                background: #{u.color("gray300")};
             }
             &::checkmark {
                 content: "";

package/src/utilities/types.d.ts

@@ -26,6 +26,7 @@ export declare const BreakpointSchema: z.ZodEnum<{
     desktopOnly: "desktopOnly";
 }>;
 export declare const LayoutWidthsSchema: z.ZodEnum<{
+    text: "text";
     gutter: "gutter";
     column: "column";
     tablet: "tablet";
@@ -34,7 +35,6 @@ export declare const LayoutWidthsSchema: z.ZodEnum<{
     mobileMax: "mobileMax";
     tabletMax: "tabletMax";
     desktopMax: "desktopMax";
-    text: "text";
 }>;
 export type BaseWidth = z.infer<typeof BaseWidthSchema>;
 export type ScreenWidth = z.infer<typeof ScreenWidthSchema>;
@@ -54,23 +54,23 @@ export declare const zTextInputType: z.ZodEnum<{
     number: "number";
     search: "search";
     month: "month";
+    time: "time";
+    image: "image";
     text: "text";
+    hidden: "hidden";
+    color: "color";
     checkbox: "checkbox";
     radio: "radio";
-    color: "color";
+    tel: "tel";
+    url: "url";
+    email: "email";
     date: "date";
+    submit: "submit";
+    reset: "reset";
     "datetime-local": "datetime-local";
-    email: "email";
     file: "file";
-    hidden: "hidden";
-    image: "image";
     password: "password";
     range: "range";
-    reset: "reset";
-    submit: "submit";
-    tel: "tel";
-    time: "time";
-    url: "url";
     week: "week";
 }>;
 export type TextInputType = z.infer<typeof zTextInputType>;
@@ -102,6 +102,7 @@ export declare const ButtonType: z.ZodEnum<{
 }>;
 export type ButtonType = z.infer<typeof ButtonType>;
 export declare const TextTags: z.ZodEnum<{
+    div: "div";
     h1: "h1";
     h2: "h2";
     h3: "h3";
@@ -109,14 +110,13 @@ export declare const TextTags: z.ZodEnum<{
     h5: "h5";
     p: "p";
     span: "span";
-    div: "div";
 }>;
 export type TextTags = z.infer<typeof TextTags>;
 export declare const TextType: z.ZodEnum<{
-    display: "display";
+    caption: "caption";
     heading: "heading";
+    display: "display";
     paragraph: "paragraph";
-    caption: "caption";
     "small-title": "small-title";
 }>;
 export type TextType = z.infer<typeof TextType>;
@@ -134,10 +134,10 @@ export declare const CarouselPageType: z.ZodEnum<{
 }>;
 export type CarouselPageType = z.infer<typeof CarouselPageType>;
 export declare const NoticeType: z.ZodEnum<{
+    none: "none";
     help: "help";
     info: "info";
     success: "success";
     error: "error";
-    none: "none";
 }>;
 export type NoticeType = z.infer<typeof NoticeType>;