@stamcat/craftsman 0.0.23-alpha.24 → 0.0.23-alpha.26

package/Styles.esm.js

@@ -1,8 +1,8 @@
 import { defaultColors as e, defaultWidths as t } from "./src/styles/utilities/constants.esm.js";
-import { getCraftsmanConfig as n, resetCraftsmanConfig as r, setCraftsmanConfig as i } from "./src/styles/utilities/config.esm.js";
-import { breakpoint as a, media as o, width as s, widths as c } from "./src/styles/utilities/layout.esm.js";
-import { color as l, colors as u, hexToRgba as d } from "./src/styles/utilities/color.esm.js";
-import { CraftsmanThemeProvider as f, themeBuilder as p } from "./src/styles/theme/theme.esm.js";
-import { globalStyles as m } from "./src/styles/global/globalStyles.esm.js";
-import { ClientProvider as h } from "./src/styles/components/ClientProvider.esm.js";
-export { h as ClientProvider, f as CraftsmanThemeProvider, a as breakpoint, l as color, u as colors, e as defaultColors, t as defaultWidths, n as getCraftsmanConfig, m as globalStyles, d as hexToRgba, o as media, r as resetCraftsmanConfig, i as setCraftsmanConfig, p as themeBuilder, s as width, c as widths };
+import { color as n, colors as r, hexToRgba as i } from "./src/styles/utilities/color.esm.js";
+import { BaseWidthSchema as a, BreakpointSchema as o, LayoutWidthsSchema as s, MaxScreenWidthSchema as c, ScreenWidthSchema as l, zTextInputExclusions as u } from "./src/styles/utilities/types.esm.js";
+import { breakpoint as d, media as f, width as p, widths as m } from "./src/styles/utilities/layout.esm.js";
+import { CraftsmanThemeProvider as h, themeBuilder as g } from "./src/styles/theme/theme.esm.js";
+import { globalStyles as _ } from "./src/styles/global/globalStyles.esm.js";
+import { ClientProvider as v } from "./src/styles/components/ClientProvider.esm.js";
+export { a as BaseWidthSchema, o as BreakpointSchema, v as ClientProvider, h as CraftsmanThemeProvider, s as LayoutWidthsSchema, c as MaxScreenWidthSchema, l as ScreenWidthSchema, d as breakpoint, n as color, r as colors, e as defaultColors, t as defaultWidths, _ as globalStyles, i as hexToRgba, f as media, g as themeBuilder, p as width, m as widths, u as zTextInputExclusions };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.23-alpha.24",
+  "version": "0.0.23-alpha.26",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {

package/src/components/Button.esm.js

@@ -1,18 +1,20 @@
 import { isEmpty as e } from "../utilities/validations.esm.js";
-import { css as t } from "@emotion/react";
-import n from "@emotion/styled";
-import { Fragment as r, jsx as i } from "react/jsx-runtime";
+import { width as t } from "../styles/utilities/layout.esm.js";
+import "../../Styles.esm.js";
+import { css as n } from "@emotion/react";
+import r from "@emotion/styled";
+import { Fragment as i, jsx as a } from "react/jsx-runtime";
 //#region src/components/Button.tsx
-var a = n.button`
+var o = r.button`
     ${(e) => e.styles}
-    ${((e) => e.size && t`
+    ${((e) => e.size && n`
         border-radius: calc(var(--btn-border-radius) * ${e.size});
         padding: calc(var(--btn-pad-y) * ${e.size}) calc(var(--btn-pad-x) * ${e.size});
-        font-size: max(10px, calc(var(--w-text) * ${e.size}));
+        font-size: max(10px, calc(${t("text")} * ${e.size}));
     `)}
-`, o = (t) => {
-	let { type: n = "button", variant: o = "default", className: s, size: c, ...l } = t, u = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, d = [o === "default" ? void 0 : o, s].filter(Boolean).join(" ") || void 0;
-	return e(t.children) ? /* @__PURE__ */ i(r, {}) : /* @__PURE__ */ i(a, {
+`, s = (t) => {
+	let { type: n = "button", variant: r = "default", className: s, size: c, ...l } = t, u = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, d = [r === "default" ? void 0 : r, s].filter(Boolean).join(" ") || void 0;
+	return e(t.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a(o, {
 		type: n,
 		size: u,
 		className: d,
@@ -20,4 +22,4 @@ var a = n.button`
 	});
 };
 //#endregion
-export { o as Button };
+export { s as Button };

package/src/components/Input.d.ts

@@ -1,2 +1,12 @@
-export type InputProps = React.ComponentProps<"input">;
+import { SerializedStyles } from '@emotion/react';
+import { TextInputExclusions } from '../styles';
+export type LabelPosition = "top" | "left" | "bottom" | "right" | "inside" | "hidden";
+export type InputProps = React.ComponentProps<"input"> & {
+    label?: string | React.ReactNode;
+    labelPosition?: LabelPosition;
+    error?: string | boolean | React.ReactNode;
+    required?: boolean;
+    styles?: SerializedStyles;
+    type?: Exclude<React.HTMLInputTypeAttribute, TextInputExclusions>;
+};
 export declare const Input: React.FC<InputProps>;

package/src/components/Input.esm.js

@@ -1,5 +1,136 @@
-import { jsx as e } from "react/jsx-runtime";
+import { isEmpty as e } from "../utilities/validations.esm.js";
+import { color as t } from "../styles/utilities/color.esm.js";
+import { width as n } from "../styles/utilities/layout.esm.js";
+import "../../Styles.esm.js";
+import { css as r } from "@emotion/react";
+import i from "@emotion/styled";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Input.tsx
-var t = (t) => /* @__PURE__ */ e("input", { ...t });
+var s = r`
+    .input-label {
+        top: -0.5rem;
+        left: ${n("gutter", .25)};
+        font-size: ${n("text", .75)};
+    }
+`, c = (e) => r`
+    --react-international-phone-height: 50px;
+    --react-international-phone-border-radius: 8px;
+    --react-international-phone-border-color: #c0c0c0ff;
+    position: relative;
+
+    .input-label {
+        position: absolute;
+        background-color: white;
+        z-index: 1;
+        width: fit-content;
+        padding: 0 5px;
+        top: ${n("gutter", .25)};
+        left: ${n("gutter", .25)};
+        pointer-events: none;
+        transition: top 150ms ease, left 150ms ease, font-size 150ms ease, color 150ms ease;
+    }
+
+    > label > input,
+    > input {
+        transition: border-color 200ms ease;
+    }
+    &:focus-within {
+        ${s}
+        .input-label {
+            color: ${t("blue500")};
+        }
+        input {
+            border-color: ${t("blue500")};
+        }
+    }
+
+    &:has(input:not(:placeholder-shown)) {
+        ${s}
+    }
+
+    &:has(input:-webkit-autofill) {
+        ${s}
+    }
+
+    ${e ? s : ""}
+    input[type="tel"] {
+        width: 100%;
+    }
+
+    input::placeholder {
+        opacity: 0;
+        transition: opacity 200ms ease;
+    }
+
+    &:focus-within input::placeholder {
+        opacity: 1;
+    }
+`, l = i.div`
+    label {
+        .input-label {
+            margin-bottom: ${n("gutter", .25)};
+            ${(e) => e.required && r`
+                ::after {
+                    content: "*";
+                    color: ${t("red700")};
+                }
+            `}
+            
+        }
+    }
+    &.left label {
+        .input-label {
+            width: fit-content;
+            margin-right: ${n("gutter", .75)};
+        }
+        display: inline-flex;
+        align-items: center;
+    }
+    &.bottom label {
+        display: inline-flex;
+        flex-direction: column-reverse;
+        align-items: flex-start;
+        .input-label {
+            display: block;
+            margin-bottom: 0;
+            margin-top: ${n("gutter", .25)};
+        }
+    }
+    &.right label {
+        display: inline-flex;
+        flex-direction: row-reverse;
+        align-items: center;
+        .input-label {
+            display: block;
+            margin-left: ${n("gutter", .75)};
+        }
+    }
+    &.inside {
+        ${(e) => c(e.hasInput)}
+    }
+    ${(e) => e.styles}
+`, u = i.div`
+    margin-top: ${n("gutter", .25)};
+    font-size: ${n("text", .75)};
+    color: ${t("red700")};
+`, d = ({ label: t, id: n, labelPosition: r = "top", required: i = !1, error: s, styles: c, ...d }) => {
+	let f = n || crypto.randomUUID(), p = !e(d.value) || !e(d.defaultValue), m = !e(s);
+	return /* @__PURE__ */ o(l, {
+		className: r,
+		required: i,
+		hasInput: p,
+		styles: c,
+		children: [e(t) ? /* @__PURE__ */ a("input", {
+			id: f,
+			...d
+		}) : /* @__PURE__ */ o("label", { children: [r !== "hidden" && /* @__PURE__ */ a("div", {
+			className: "input-label",
+			children: t
+		}), /* @__PURE__ */ a("input", {
+			id: f,
+			...d
+		})] }), m && /* @__PURE__ */ a(u, { children: s })]
+	});
+};
 //#endregion
-export { t as Input };
+export { d as Input };

package/src/components/Modal.esm.js

@@ -1,41 +1,41 @@
-import { Button as e } from "./Button.esm.js";
-import { breakpoint as t } from "../styles/utilities/layout.esm.js";
-import { color as n } from "../styles/utilities/color.esm.js";
-import { css as r, keyframes as i } from "@emotion/react";
-import a from "@emotion/styled";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
-import l from "react";
-import { LuX as u } from "react-icons/lu";
+import { color as e } from "../styles/utilities/color.esm.js";
+import { breakpoint as t, width as n } from "../styles/utilities/layout.esm.js";
+import { Button as r } from "./Button.esm.js";
+import { css as i, keyframes as a } from "@emotion/react";
+import o from "@emotion/styled";
+import s from "react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { LuX as d } from "react-icons/lu";
 //#region src/components/Modal.tsx
-var d = i`
+var f = a`
   from {
     opacity: 0;
   }
   to {
     opacity: 1;
   }
-`, f = i`
+`, p = a`
   from {
     opacity: 1;
   }
   to {
     opacity: 0;
   }
-`, p = i`
+`, m = a`
   from {
     transform: translateY(100%);
   }
   to {
     transform: translateY(0);
   }
-`, m = i`
+`, h = a`
   from {
     transform: translateY(0);
   }
   to {
     transform: translateY(100%);
   }
-`, h = a.div`
+`, g = o.div`
     position: fixed;
     width: 100%;
     height: 100%;
@@ -48,9 +48,9 @@ var d = i`
     justify-content: center;
     align-items: center;
     ${(e) => e.styles}
-`, g = a.div`
+`, _ = o.div`
     background-color: rgba(0, 0, 0, 0.5);
-    animation: ${(e) => e.isClosing ? f : d} 0.3s ease-in-out;
+    animation: ${(e) => e.isClosing ? p : f} 0.3s ease-in-out;
     animation-fill-mode: forwards;
      position: fixed;
     width: 100%;
@@ -60,60 +60,63 @@ var d = i`
     right: 0;
     bottom: 0;
     z-index: 1001;
-`, _ = r`
+`, v = i`
     width: 100%;
     height: 100%;
-`, v = r`
-    width: calc(var(--w-column) * 4);
-`, y = r`
-    width: calc(var(--w-column) * 4);
-    ${t("tablet", r`
-        width: calc(var(--w-column) * 6);
+`, y = i`
+    width: ${n("column", 4)};
+`, b = i`
+    width: ${n("column", 4)};
+    ${t("tablet", i`
+        width: ${n("column", 6)};
     `)}
-    ${t("desktop", r`
-        width: calc(var(--w-column) * 8);
+    ${t("desktop", i`
+        width: ${n("column", 8)};
     `)}
-`, b = r`
+`, x = i`
     position: fixed;
     top: 0;
     right: 0;
     height: 100%;
-    ${t("mobileOnly", _)}
-    ${t("tablet", v)}
-`, x = r`
-    border-radius: 8px;
-    ${t("mobileOnly", _)}
+    ${t("mobileOnly", v)}
     ${t("tablet", y)}
-`, S = a.div`
-    padding: calc(var(--w-gutter));
+`, S = i`
+    border-radius: 8px;
+    ${t("mobileOnly", v)}
+    ${t("tablet", b)}
+`, C = o.div`
+    padding: ${n("gutter")};
     z-index: 1002;
-    background-color: var(--white);
+    background-color: ${e("white")};
     max-height: 80vh;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
     touch-action: pan-y;
-    animation: ${(e) => e.isClosing ? m : p} 0.3s ease-in-out;
+    animation: ${(e) => e.isClosing ? h : m} 0.3s ease-in-out;
     animation-fill-mode: forwards;
-    ${(e) => e.type === "panel" && b}
-    ${(e) => e.type === "dialog" && x}
+    ${(e) => e.type === "panel" && x}
+    ${(e) => e.type === "dialog" && S}
     header {
         display: inline-flex;
         width: 100%;
         justify-content: space-between;
-        margin-bottom: calc(var(--w-gutter) * 0.5);
+        margin-bottom: ${n("gutter", .5)};
     }
-`, C = r`
+`, w = i`
     text-decoration: none;
-    height: 36px;
-    width: 36px;
+    height: 30px;
+    width: 30px;
     border-radius: 50%;
-`, w = a.footer`
-    margin-top: calc(var(--w-gutter) * 2);
-    background-color:var(--white);
+    padding: 0;
+    display: inline-flex;
+    justify-content: center;
+`, T = o.footer`
+    margin-top: ${n("gutter", 2)};
+    background-color: ${e("white")};
     height: fit-content;
     display: flex;
-    gap: var(--w-gutter);
-`, T = class extends l.PureComponent {
+    gap: ${n("gutter")};
+`, E = class extends s.PureComponent {
 	state = { isClosing: !1 };
 	onDismiss = () => {
 		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
@@ -124,31 +127,30 @@ var d = i`
 		(this.props.backgroundDismiss || !0) === !0 && this.onDismiss();
 	};
 	render() {
-		return this.props.visible ? /* @__PURE__ */ c(h, {
+		return this.props.visible ? /* @__PURE__ */ u(g, {
 			styles: this.props.styles,
-			children: [/* @__PURE__ */ c(S, {
+			children: [/* @__PURE__ */ u(C, {
 				type: this.props.type || "dialog",
 				isClosing: this.state.isClosing,
 				children: [
-					/* @__PURE__ */ c("header", { children: [this.props.header && /* @__PURE__ */ s(o, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ s(e, {
+					/* @__PURE__ */ u("header", { children: [this.props.header && /* @__PURE__ */ l(c, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ l(r, {
 						variant: "primary",
-						styles: C,
+						styles: w,
 						onClick: this.onDismiss,
-						children: /* @__PURE__ */ s(u, {
-							fill: n("white"),
-							viewBox: "6 8 14 14",
-							size: 24
+						children: /* @__PURE__ */ l(d, {
+							fill: e("white"),
+							size: 18
 						})
 					})] }),
-					/* @__PURE__ */ s("section", { children: this.props.children }),
-					this.props.footer && /* @__PURE__ */ s(w, { children: this.props.footer })
+					/* @__PURE__ */ l("section", { children: this.props.children }),
+					this.props.footer && /* @__PURE__ */ l(T, { children: this.props.footer })
 				]
-			}), /* @__PURE__ */ s(g, {
+			}), /* @__PURE__ */ l(_, {
 				isClosing: this.state.isClosing,
 				onClick: this.onClickBackground
 			})]
-		}) : /* @__PURE__ */ s(o, {});
+		}) : /* @__PURE__ */ l(c, {});
 	}
 };
 //#endregion
-export { T as Modal };
+export { E as Modal };

package/src/styles/components/ClientProvider.d.ts

@@ -1,7 +1,5 @@
-import { CraftsmanStyleConfig } from '../utilities/types';
 import { Theme } from '../theme/types';
 type ClientProviderProps = {
-    config?: CraftsmanStyleConfig;
     theme?: Theme;
     children?: React.ReactNode;
 };

package/src/styles/components/ClientProvider.esm.js

@@ -1,14 +1,13 @@
-import { setCraftsmanConfig as e } from "../utilities/config.esm.js";
-import { CraftsmanThemeProvider as t, themeBuilder as n } from "../theme/theme.esm.js";
-import { globalStyles as r } from "../global/globalStyles.esm.js";
-import { Global as i } from "@emotion/react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { CraftsmanThemeProvider as e, themeBuilder as t } from "../theme/theme.esm.js";
+import { globalStyles as n } from "../global/globalStyles.esm.js";
+import { Global as r } from "@emotion/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/styles/components/ClientProvider.tsx
-function s(s) {
-	return s.config && e(s.config), /* @__PURE__ */ o(t, {
-		theme: s.theme || {},
-		children: [/* @__PURE__ */ a(i, { styles: (e) => [r, n(e)] }), s.children]
+function o(o) {
+	return /* @__PURE__ */ a(e, {
+		theme: o.theme || {},
+		children: [/* @__PURE__ */ i(r, { styles: (e) => [n, t(e)] }), o.children]
 	});
 }
 //#endregion
-export { s as ClientProvider };
+export { o as ClientProvider };

package/src/styles/components/NextJSProvider.d.ts

@@ -1,10 +1,8 @@
-import { CraftsmanStyleConfig } from '../utilities/types';
 import { Theme } from '../theme/types';
 type StyleProviderProps = {
     key?: string;
     children?: React.ReactNode;
-    config?: CraftsmanStyleConfig;
     theme?: Theme;
 };
-export declare function NextJSProvider({ children, key, config, theme }: StyleProviderProps): import("react").JSX.Element;
+export declare function NextJSProvider({ children, key, theme }: StyleProviderProps): import("react").JSX.Element;
 export {};

package/src/styles/components/NextJSProvider.esm.js

@@ -1,17 +1,15 @@
 "use client";
-import { setCraftsmanConfig as e } from "../utilities/config.esm.js";
-import { CraftsmanThemeProvider as t, themeBuilder as n } from "../theme/theme.esm.js";
-import { globalStyles as r } from "../global/globalStyles.esm.js";
-import { CacheProvider as i, Global as a } from "@emotion/react";
+import { CraftsmanThemeProvider as e, themeBuilder as t } from "../theme/theme.esm.js";
+import { globalStyles as n } from "../global/globalStyles.esm.js";
+import { CacheProvider as r, Global as i } from "@emotion/react";
+import { useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { useState as c } from "react";
-import l from "@emotion/cache";
-import { useServerInsertedHTML as u } from "next/navigation";
+import c from "@emotion/cache";
+import { useServerInsertedHTML as l } from "next/navigation";
 //#region src/styles/components/NextJSProvider.tsx
-function d({ children: d, key: f = "app", config: p, theme: m }) {
-	p && e(p);
-	let [{ cache: h, flush: g }] = c(() => {
-		let e = l({ key: f });
+function u({ children: u, key: d = "app", theme: f }) {
+	let [{ cache: p, flush: m }] = a(() => {
+		let e = c({ key: d });
 		e.compat = !0;
 		let t = e.insert, n = [];
 		return e.insert = (...r) => {
@@ -25,22 +23,22 @@ function d({ children: d, key: f = "app", config: p, theme: m }) {
 			}
 		};
 	});
-	return u(() => {
-		let e = g();
+	return l(() => {
+		let e = m();
 		if (e.length === 0) return null;
 		let t = "";
-		for (let n of e) t += h.inserted[n];
+		for (let n of e) t += p.inserted[n];
 		return /* @__PURE__ */ o("style", {
-			"data-emotion": `${h.key} ${e.join(" ")}`,
+			"data-emotion": `${p.key} ${e.join(" ")}`,
 			dangerouslySetInnerHTML: { __html: t }
 		});
-	}), /* @__PURE__ */ o(i, {
-		value: h,
-		children: /* @__PURE__ */ s(t, {
-			theme: m || {},
-			children: [/* @__PURE__ */ o(a, { styles: (e) => [r, n(e)] }), d]
+	}), /* @__PURE__ */ o(r, {
+		value: p,
+		children: /* @__PURE__ */ s(e, {
+			theme: f || {},
+			children: [/* @__PURE__ */ o(i, { styles: (e) => [n, t(e)] }), u]
 		})
 	});
 }
 //#endregion
-export { d as NextJSProvider };
+export { u as NextJSProvider };

package/src/styles/global/components/button.d.ts

@@ -5,4 +5,5 @@ export declare const ButtonType: z.ZodEnum<{
     default: "default";
 }>;
 export type ButtonType = z.infer<typeof ButtonType>;
+export declare const textLinkStyles: import('@emotion/utils').SerializedStyles;
 export declare const button: import('@emotion/utils').SerializedStyles;

package/src/styles/global/components/button.esm.js

@@ -1,16 +1,29 @@
-import { typography as e } from "./typography.esm.js";
-import { css as t } from "@emotion/react";
-import n from "zod";
-n.enum([
+import { color as e } from "../../utilities/color.esm.js";
+import { width as t } from "../../utilities/layout.esm.js";
+import { typography as n } from "./typography.esm.js";
+import { css as r } from "@emotion/react";
+import i from "zod";
+i.enum([
 	"primary",
 	"default",
 	"text"
 ]);
-var r = t`
-    --btn-pad-y: calc(var(--w-gutter) * 0.5);
-    --btn-pad-x: calc(var(--w-gutter) * 0.75);
-    --btn-border-radius: calc(var(--w-gutter) * 0.75);
-    ${e.body}
+var a = r`
+    padding: 0;
+    border: none;
+    background: none;
+    color: ${e("blue500")};
+    &:not(:disabled):not(.disabled):hover {
+        color: ${e("teal700")};
+        background-color: transparent;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+`, o = r`
+    --btn-pad-y: ${t("gutter", .5)};
+    --btn-pad-x: ${t("gutter", .75)};
+    --btn-border-radius: ${t("gutter", .75)};
+    ${n.body}
     border: none;
     cursor: pointer;
     display: inline-flex;
@@ -20,39 +33,32 @@ var r = t`
     transition: 0.125s;
     padding: var(--btn-pad-y) var(--btn-pad-x);
     border-radius: var(--btn-border-radius);
-    border: 1px solid var(--blue600);
-    background-color: var(--white);
+    border: 1px solid ${e("blue500")};
+    background-color: ${e("white")};
     &:not(:disabled):not(.disabled):hover {
-        background-color: var(--blue200);
+        background-color: ${e("teal200")};
     }
     &.text {
-        padding: 0;
-        border: none;
-        background: none;
-        &:not(:disabled):not(.disabled):hover {
-            color: var(--blue800);
-            background-color: transparent;
-            text-decoration: underline;
-        }
+        ${a}
     }
     &:disabled,
     &.disabled {
         cursor: not-allowed;
-        border-color: var(--grey200);
-        color: var(--grey400);
+        border-color: ${e("gray200")};
+        color: ${e("gray400")};
         &.primary {
-            border-color: var(--grey200);
-            background-color: var(--grey400);
-            color: var(--grey200);
+            border-color: ${e("gray200")};
+            background-color: ${e("gray400")};
+            color: ${e("gray200")};
         }
     }
     &.primary {
-        color: var(--white);
-        background-color: var(--blue500);
+        color: ${e("white")};
+        background-color: ${e("blue500")};
         &:not(:disabled):not(.disabled):hover {
-            background-color: var(--blue700);
+            background-color: ${e("blue700")};
         }
     }
 `;
 //#endregion
-export { r as button };
+export { o as button, a as textLinkStyles };