@stamcat/craftsman 0.0.23-alpha.15 → 0.0.23-alpha.18

package/Components.d.ts

@@ -0,0 +1,2 @@
+export * from './src/components/index.js'
+export {}

package/Components.esm.js

@@ -1,5 +1,14 @@
-import { Button as e } from "./src/components/Button.esm.js";
-import { Input as t } from "./src/components/Input.esm.js";
-import { Loader as n } from "./src/components/Loader.esm.js";
-import { Modal as r } from "./src/components/Modal.esm.js";
-export { e as Button, t as Input, n as Loader, r as Modal };
+import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
+import { Button as t } from "./src/components/Button.esm.js";
+import { Input as n } from "./src/components/Input.esm.js";
+import { Loader as r } from "./src/components/Loader.esm.js";
+import { Modal as i } from "./src/components/Modal.esm.js";
+//#region src/components/index.ts
+var a = /* @__PURE__ */ e({
+	Button: () => t,
+	Input: () => n,
+	Loader: () => r,
+	Modal: () => i
+});
+//#endregion
+export { t as Button, n as Input, r as Loader, i as Modal, a as components_exports };

package/Styles.d.ts

@@ -0,0 +1,2 @@
+export * from './src/styles/index.js'
+export {}

package/Styles.esm.js

@@ -0,0 +1,7 @@
+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";
+export { 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 };

package/Utilities.d.ts

@@ -0,0 +1,2 @@
+export * from './src/utilities/index.js'
+export {}

package/Utilities.esm.js

@@ -0,0 +1,2 @@
+import { isEmpty as e, validateEmail as t } from "./src/utilities/validations.esm.js";
+export { e as isEmpty, t as validateEmail };

package/_virtual/_rolldown/runtime.esm.js

@@ -0,0 +1,11 @@
+//#region \0rolldown/runtime.js
+var e = Object.defineProperty, t = (t, n) => {
+	let r = {};
+	for (var i in t) e(r, i, {
+		get: t[i],
+		enumerable: !0
+	});
+	return n || e(r, Symbol.toStringTag, { value: "Module" }), r;
+};
+//#endregion
+export { t as __exportAll };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.23-alpha.15",
+  "version": "0.0.23-alpha.18",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -43,6 +43,14 @@
       "types": "./src/components/index.d.ts",
       "default": "./Components.esm.js"
     },
+    "./styles": {
+      "types": "./src/styles/index.d.ts",
+      "default": "./Styles.esm.js"
+    },
+    "./utilities": {
+      "types": "./src/utilities/index.d.ts",
+      "default": "./Utilities.esm.js"
+    },
     "./Button": {
       "types": "./src/components/Button.d.ts",
       "default": "./src/components/Button.esm.js"

package/src/components/Button.esm.js

@@ -1,27 +1,30 @@
 import { isEmpty as e } from "../utilities/validations.esm.js";
-import { css as t, useTheme as n } from "@emotion/react";
+import { ThemeContext as t, 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 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}));
     `)}
-`, s = (t) => {
-	let { type: r = "button", variant: s = "default", className: c, size: l, ...u } = t, d = typeof l == "number" ? Math.min(10, Math.max(.1, l)) : void 0, f = n(), p = typeof f?.components?.button == "string" ? f.components.button : void 0, m = [
-		s === "default" ? void 0 : s,
-		p,
-		c
-	].filter(Boolean).join(" ") || void 0;
-	return e(t.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a(o, {
-		type: r,
-		size: d,
-		className: m,
-		...u
-	});
+`, s = (n) => {
+	let { type: r = "button", variant: s = "default", className: c, size: l, ...u } = n, d = typeof l == "number" ? Math.min(10, Math.max(.1, l)) : void 0;
+	return e(n.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a(t.Consumer, { children: (e) => {
+		let t = e, n = typeof t?.components?.button == "string" ? t.components.button : void 0, i = [
+			s === "default" ? void 0 : s,
+			n,
+			c
+		].filter(Boolean).join(" ") || void 0;
+		return /* @__PURE__ */ a(o, {
+			type: r,
+			size: d,
+			className: i,
+			...u
+		});
+	} });
 };
 //#endregion
 export { s as Button };

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

@@ -0,0 +1,58 @@
+import { typography as e } from "./typography.esm.js";
+import { css as t } from "@emotion/react";
+import n from "zod";
+n.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}
+    border: none;
+    cursor: pointer;
+    display: inline-flex;
+    flex-flow: row wrap;
+    align-items: center;
+    font-weight: 500;
+    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);
+    &:not(:disabled):not(.disabled):hover {
+        background-color: var(--blue200);
+    }
+    &.text {
+        padding: 0;
+        border: none;
+        background: none;
+        &:not(:disabled):not(.disabled):hover {
+            color: var(--blue800);
+            background-color: transparent;
+            text-decoration: underline;
+        }
+    }
+    &:disabled,
+    &.disabled {
+        cursor: not-allowed;
+        border-color: var(--grey200);
+        color: var(--grey400);
+        &.primary {
+            border-color: var(--grey200);
+            background-color: var(--grey400);
+            color: var(--grey200);
+        }
+    }
+    &.primary {
+        color: var(--white);
+        background-color: var(--blue500);
+        &:not(:disabled):not(.disabled):hover {
+            background-color: var(--blue700);
+        }
+    }
+`;
+//#endregion
+export { r as button };

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

@@ -0,0 +1,21 @@
+import { css as e } from "@emotion/react";
+//#region src/styles/global/components/code.ts
+var t = e`
+    background-color: var(--grey200);
+    color: var(--grey800);
+    padding: calc(var(--w-gutter) * 0.125) calc(var(--w-gutter) * 0.25);
+    margin: calc(var(--w-gutter) * 0.125);
+    display: inline-block;
+    &:has(pre) {
+        padding: var(--w-gutter);
+        border-radius: calc(var(--w-gutter) * 0.5);
+        background-color: var(--grey800);
+        color: var(--grey200);
+    }
+
+    &:has(pre) pre {
+        margin: 0;
+    }
+`;
+//#endregion
+export { t as code };

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

@@ -0,0 +1,54 @@
+import { breakpoint as e } from "../../utilities/layout.esm.js";
+import { css as t } from "@emotion/react";
+//#region src/styles/global/components/typography.ts
+var n = {
+	body: t`
+        font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+        color: var(--text);
+        line-height: 1.5;
+        font-weight: 400;
+        font-size: var(--w-text);
+    `,
+	h1: t`
+        font-size: calc(var(--w-text) * 3.125);
+        line-height: 1.2;
+    `,
+	h2: t`
+        font-size: calc(var(--w-text) * 2.625);
+        font-weight: 625;
+        line-height: 1.1;
+    `,
+	h3: t`
+        font-size: calc(var(--w-text) * 1.625);
+        line-height: 1.1;
+    `,
+	h4: t`
+        font-size: calc(var(--w-text) * 1.25);
+        line-height: 1.1;
+        margin: calc(var(--w-gutter) * 0.5) 0px;
+        ${e("mobileOnly", t`
+                font-size: var(--w-text);
+            `)}
+    `,
+	h5: t`
+        font-size: var(--w-text);
+        line-height: 1.2;
+    `,
+	h6: t`
+        font-size: calc(var(--w-text) * 0.875);
+        line-height: 1.2;
+        font-weight: 600;
+    `,
+	p: t`
+        font-style: normal;
+        font-size: var(--w-text);
+        line-height: 1.5;
+        margin: 0;
+        ${e("mobileOnly", t`
+                line-height: 1.5;
+                font-size: calc(var(--w-text) * 0.875);
+            `)}
+    `
+}, r = Object.entries(n).map(([e, n]) => t({ [e]: n }));
+//#endregion
+export { n as typography, r as typographyStyles };

package/src/styles/global/globalStyles.esm.js

@@ -0,0 +1,64 @@
+import { colors as e, widths as t } from "./variables.esm.js";
+import { typographyStyles as n } from "./components/typography.esm.js";
+import { button as r } from "./components/button.esm.js";
+import { code as i } from "./components/code.esm.js";
+import { css as a } from "@emotion/react";
+//#region src/styles/global/globalStyles.ts
+var o = a`
+    :root {
+        ${t}
+        ${e}
+        color-scheme: light dark;
+        font-synthesis: none;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+    /* Scrollbar container */
+    ::-webkit-scrollbar {
+        width: 4px; /* vertical scrollbar width */
+        height: 4px; /* horizontal scrollbar height */
+    }
+
+    /* Scrollbar track */
+    ::-webkit-scrollbar-track {
+        background: #ddd;
+    }
+
+    /* Scrollbar thumb */
+    ::-webkit-scrollbar-thumb {
+        background: #000;
+        border-radius: 6px;
+    }
+
+    /* On hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: #555;
+    }
+    body {
+        background-color: #fff;
+        /* Enable smooth scrolling on mobile */
+        -webkit-overflow-scrolling: touch;
+        /* Prevent scroll chaining issues in iframes */
+        overscroll-behavior: contain;
+        margin: 0;
+        padding: 0;
+    }
+    fieldset {
+        padding: 0px;
+        border: 0px;
+    }
+    code {
+        ${i}
+    }
+    button {
+        ${r}
+    }
+    ul {
+        margin: 0;
+        padding: 0;
+    }
+    ${n}
+`;
+//#endregion
+export { o as globalStyles };

package/src/styles/global/variables.esm.js

@@ -0,0 +1,6 @@
+import { widths as e } from "../utilities/layout.esm.js";
+import { colors as t } from "../utilities/color.esm.js";
+//#region src/styles/global/variables.ts
+var n = Object.entries(t).map(([e, t]) => `--${e}: ${t};`).join("\n"), r = Object.entries(e).map(([e, t]) => `--w-${e}: ${t}px;`).join("\n");
+//#endregion
+export { n as colors, r as widths };

package/src/styles/index.d.ts

@@ -0,0 +1,7 @@
+export * from './utilities/color';
+export * from './utilities/config';
+export * from './utilities/constants';
+export * from './utilities/layout';
+export * from './utilities/types';
+export * from './theme/theme';
+export * from './global/globalStyles';

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

@@ -0,0 +1,12 @@
+import { components_exports as e } from "../../../Components.esm.js";
+import { htmlTagNames as t } from "./constants.esm.js";
+//#region src/styles/theme/components.ts
+function n(e) {
+	return e.charAt(0).toLowerCase() + e.slice(1);
+}
+function r(e) {
+	return t.has(e) ? e : `.${e}`;
+}
+var i = Object.keys(e).map(n), a = Object.fromEntries(i.map((e) => [e, r(e)]));
+//#endregion
+export { a as componentSelectors };

package/src/styles/theme/constants.esm.js

@@ -0,0 +1,4 @@
+//#region src/styles/theme/constants.ts
+var e = /* @__PURE__ */ new Set(/* @__PURE__ */ "a.abbr.address.area.article.aside.audio.b.base.bdi.bdo.blockquote.body.br.button.canvas.caption.cite.code.col.colgroup.data.datalist.dd.del.details.dfn.dialog.div.dl.dt.em.embed.fieldset.figcaption.figure.footer.form.h1.h2.h3.h4.h5.h6.head.header.hgroup.hr.html.i.iframe.img.input.ins.kbd.label.legend.li.link.main.map.mark.menu.meta.meter.nav.noscript.object.ol.optgroup.option.output.p.picture.pre.progress.q.rp.rt.ruby.s.samp.script.section.select.slot.small.source.span.strong.style.sub.summary.sup.table.tbody.td.template.textarea.tfoot.th.thead.time.title.tr.track.u.ul.var.video.wbr".split("."));
+//#endregion
+export { e as htmlTagNames };

package/src/styles/theme/theme.esm.js

@@ -0,0 +1,29 @@
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import { componentSelectors as t } from "./components.esm.js";
+import { toCSSObject as n } from "./utilities.esm.js";
+import { colors as r } from "../global/variables.esm.js";
+import { ThemeProvider as i, css as a } from "@emotion/react";
+import { createElement as o } from "react";
+//#region src/styles/theme/theme.ts
+function s(e) {
+	let r = [];
+	return Object.keys(t).forEach((i) => {
+		let o = e?.[i];
+		!o || typeof o == "string" || r.push(a({ [t[i]]: { ...o ? n(o) : {} } }));
+	}), r;
+}
+function c({ theme: t, children: n }) {
+	return o(i, { theme: e(t) ? {} : t }, n);
+}
+function l(e) {
+	return a([
+		r,
+		a({ ":root": {
+			...e.colors,
+			...e.root
+		} }),
+		...s(e.components)
+	]);
+}
+//#endregion
+export { c as CraftsmanThemeProvider, l as themeBuilder };

package/src/styles/theme/utilities.esm.js

@@ -0,0 +1,25 @@
+//#region src/styles/theme/utilities.ts
+function e(e) {
+	return "styles" in e && "name" in e;
+}
+function t(e) {
+	let t = {}, n = e;
+	for (; n;) {
+		let e = n.styles.split(";").map((e) => e.trim()).filter((e) => e && !e.startsWith("label:"));
+		for (let n of e) {
+			let e = n.indexOf(":");
+			if (e === -1) continue;
+			let r = n.slice(0, e).trim(), i = n.slice(e + 1).trim();
+			if (!r || !i) continue;
+			let a = r.replace(/-([a-z])/g, (e, t) => t.toUpperCase());
+			t[a] = i;
+		}
+		n = n.next;
+	}
+	return t;
+}
+function n(n) {
+	return e(n) ? t(n) : n;
+}
+//#endregion
+export { n as toCSSObject };

package/src/styles/utilities/config.esm.js

@@ -15,11 +15,27 @@ function i(e) {
 		desktopMax: e.extDesktop - 1e-5
 	};
 }
-function a() {
+function a(e) {
+	let t = Object.entries(e.colors ?? {}).reduce((e, [t, n]) => (typeof n == "string" && (e[t] = n), e), {}), n = e.widths ? { ...e.widths } : {};
+	r = {
+		colors: {
+			...r.colors,
+			...t
+		},
+		widths: {
+			...r.widths,
+			...n
+		}
+	};
+}
+function o() {
+	r = { ...n };
+}
+function s() {
 	return {
 		colors: { ...r.colors },
 		widths: i(r.widths)
 	};
 }
 //#endregion
-export { a as getCraftsmanConfig };
+export { s as getCraftsmanConfig, o as resetCraftsmanConfig, a as setCraftsmanConfig };

package/src/styles/utilities/layout.esm.js

@@ -41,8 +41,15 @@ var n = [
 	get desktopOnly() {
 		return `(min-width: ${r.desktop}px) and (max-width: ${r.desktopMax}px)`;
 	}
-}, a = (e, n) => t`@media ${i[e]} {
+}, a = (e, t = 1, n = !0) => {
+	let i = 0;
+	if (e === "column") {
+		let e = t - 1;
+		i = r.gutter * e;
+	}
+	return `${r[e] * t + i}${n ? "px" : ""}`;
+}, o = (e, n) => t`@media ${i[e]} {
         ${n}
     }`;
 //#endregion
-export { a as breakpoint, i as media, r as widths };
+export { o as breakpoint, i as media, a as width, r as widths };

package/src/utilities/index.d.ts

@@ -0,0 +1 @@
+export * from './validations';

package/src/utilities/validations.esm.js

@@ -3,5 +3,9 @@
 function e(e) {
 	return e == null || typeof e == "object" && Object.keys(e).length === 0 || typeof e == "string" && e.trim().length === 0 || typeof e == "string" && e === " ";
 }
+/* #__PURE__ */
+function t(e) {
+	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
+}
 //#endregion
-export { e as isEmpty };
+export { e as isEmpty, t as validateEmail };