@stamcat/craftsman 0.0.55 → 0.0.58

package/Utilities.esm.js

@@ -1,2 +1,2 @@
-import { formatTime as e, getAmPmLabels as t, getUnitLabel as n, is24HourFormat as r, isEmpty as i, validateEmail as a } from "./src/utilities/validations.esm.js";
-export { e as formatTime, t as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, i as isEmpty, a as validateEmail };
+import { formatTime as e, getAmPmLabels as t, getUnitLabel as n, is24HourFormat as r, isEmpty as i, toCssString as a, validateEmail as o } from "./src/utilities/validations.esm.js";
+export { e as formatTime, t as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, i as isEmpty, a as toCssString, o as validateEmail };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.55",
+  "version": "0.0.58",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {

package/src/styles/utilities/layout.d.ts

@@ -1,4 +1,4 @@
-import { Breakpoint, LayoutWidthsType } from '../../utilities/types';
+import { Breakpoint, LayoutWidthsType, SerializedStyles } from '../../utilities/types';
 export declare const widths: Record<LayoutWidthsType, string>;
 export declare const media: {
     readonly mobile: string;
@@ -14,4 +14,4 @@ export declare const media: {
     readonly desktopOnly: string;
 };
 export declare const width: (w: LayoutWidthsType, multiplier?: number, px?: boolean) => string;
-export declare const breakpoint: (bp: Breakpoint, styles: string) => string;
+export declare const breakpoint: (bp: Breakpoint, styles: string | SerializedStyles) => string;

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

@@ -1,47 +1,48 @@
-import { LayoutWidthsSchema as e } from "../../utilities/types.esm.js";
-import { defaultWidths as t } from "./constants.esm.js";
+import { toCssString as e } from "../../utilities/validations.esm.js";
+import { LayoutWidthsSchema as t } from "../../utilities/types.esm.js";
+import { defaultWidths as n } from "./constants.esm.js";
 //#region src/styles/utilities/layout.ts
-var n = Object.fromEntries(e.options.map((e) => [e, `var(--w-${e}, ${t[e]}px)`])), r = {
+var r = Object.fromEntries(t.options.map((e) => [e, `var(--w-${e}, ${n[e]}px)`])), i = {
 	get mobile() {
 		return "(min-width: 0px)";
 	},
 	get mobileMax() {
-		return `(max-width: ${t.mobileMax}px)`;
+		return `(max-width: ${n.mobileMax}px)`;
 	},
 	get tablet() {
-		return `(min-width: ${t.tablet}px)`;
+		return `(min-width: ${n.tablet}px)`;
 	},
 	get tabletMax() {
-		return `(max-width: ${t.tabletMax}px)`;
+		return `(max-width: ${n.tabletMax}px)`;
 	},
 	get desktop() {
-		return `(min-width: ${t.desktop}px)`;
+		return `(min-width: ${n.desktop}px)`;
 	},
 	get desktopMax() {
-		return `(max-width: ${t.desktopMax}px)`;
+		return `(max-width: ${n.desktopMax}px)`;
 	},
 	get extDesktop() {
-		return `(min-width: ${t.extDesktop}px)`;
+		return `(min-width: ${n.extDesktop}px)`;
 	},
 	get mobileOnly() {
-		return `(min-width: 0px) and (max-width: ${t.mobileMax}px)`;
+		return `(min-width: 0px) and (max-width: ${n.mobileMax}px)`;
 	},
 	get tabletOnly() {
-		return `(min-width: ${t.tablet}px) and (max-width: ${t.tabletMax}px)`;
+		return `(min-width: ${n.tablet}px) and (max-width: ${n.tabletMax}px)`;
 	},
 	get mobileTablet() {
-		return `(min-width: 0px) and (max-width: ${t.tabletMax}px)`;
+		return `(min-width: 0px) and (max-width: ${n.tabletMax}px)`;
 	},
 	get desktopOnly() {
-		return `(min-width: ${t.desktop}px) and (max-width: ${t.desktopMax}px)`;
+		return `(min-width: ${n.desktop}px) and (max-width: ${n.desktopMax}px)`;
 	}
-}, i = (e, t = 1, r = !0) => {
-	let i = n[e];
+}, a = (e, t = 1, n = !0) => {
+	let i = r[e];
 	if (e === "column") {
-		let e = t - 1, a = `calc((${i} * ${t}) + (${n.gutter} * ${e}))`;
-		return r ? a : `calc(((${i} / 1px) * ${t}) + ((${n.gutter} / 1px) * ${e}))`;
+		let e = t - 1, a = `calc((${i} * ${t}) + (${r.gutter} * ${e}))`;
+		return n ? a : `calc(((${i} / 1px) * ${t}) + ((${r.gutter} / 1px) * ${e}))`;
 	}
-	return r ? t === 1 ? i : `calc(${i} * ${t})` : t === 1 ? `calc(${i} / 1px)` : `calc((${i} / 1px) * ${t})`;
-}, a = (e, t) => `@media ${r[e]} { ${String(t)} }`;
+	return n ? t === 1 ? i : `calc(${i} * ${t})` : t === 1 ? `calc(${i} / 1px)` : `calc((${i} / 1px) * ${t})`;
+}, o = (t, n) => `@media ${i[t]} { ${e(n)} }`;
 //#endregion
-export { a as breakpoint, r as media, i as width, n as widths };
+export { o as breakpoint, i as media, a as width, r as widths };

package/src/utilities/types.d.ts

@@ -26,7 +26,6 @@ export declare const BreakpointSchema: z.ZodEnum<{
     desktopOnly: "desktopOnly";
 }>;
 export declare const LayoutWidthsSchema: z.ZodEnum<{
-    text: "text";
     gutter: "gutter";
     column: "column";
     tablet: "tablet";
@@ -35,6 +34,7 @@ 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>;
@@ -44,6 +44,11 @@ export type LayoutWidthsType = z.infer<typeof LayoutWidthsSchema>;
 export type Width = Record<LayoutWidthsType, number>;
 export type Colors = Record<string, string>;
 export type ColorType = "rgba" | "hex";
+export type SerializedStyles = {
+    name: string;
+    styles: string;
+    next?: SerializedStyles;
+};
 export declare const zTextInputExclusions: z.ZodEnum<{
     checkbox: "checkbox";
     radio: "radio";
@@ -52,25 +57,25 @@ export type TextInputExclusions = z.infer<typeof zTextInputExclusions>;
 export declare const zTextInputTypes: readonly ["color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week", "radio", "checkbox"];
 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";
-    tel: "tel";
-    url: "url";
-    email: "email";
+    color: "color";
     date: "date";
-    submit: "submit";
-    reset: "reset";
     "datetime-local": "datetime-local";
+    email: "email";
     file: "file";
+    hidden: "hidden";
+    image: "image";
+    month: "month";
     password: "password";
     range: "range";
+    reset: "reset";
+    search: "search";
+    submit: "submit";
+    tel: "tel";
+    time: "time";
+    url: "url";
     week: "week";
 }>;
 export type TextInputType = z.infer<typeof zTextInputType>;
@@ -111,7 +116,6 @@ 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";
@@ -119,21 +123,22 @@ 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<{
-    caption: "caption";
-    heading: "heading";
     display: "display";
+    heading: "heading";
     paragraph: "paragraph";
+    caption: "caption";
     "small-title": "small-title";
 }>;
 export type TextType = z.infer<typeof TextType>;
 export declare const TextSize: z.ZodEnum<{
-    small: "small";
     xlarge: "xlarge";
     large: "large";
     medium: "medium";
+    small: "small";
     xsmall: "xsmall";
 }>;
 export type TextSize = z.infer<typeof TextSize>;
@@ -143,10 +148,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>;

package/src/utilities/validations.d.ts

@@ -1,7 +1,9 @@
 import { DateTimePickerProps } from 'react-datetime-picker';
+import { SerializedStyles } from './types';
 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"], override?: string) => string;
 export declare const is24HourFormat: (locale: Intl.LocalesArgument) => boolean;
 export declare const getAmPmLabels: (locale: Intl.LocalesArgument) => [string, string];
 export declare const formatTime: (value: DateTimePickerProps["value"], locale: Intl.LocalesArgument) => string;
+export declare const toCssString: (styles: string | SerializedStyles) => string;

package/src/utilities/validations.esm.js

@@ -22,6 +22,11 @@ var n = (e, t, n) => n ?? new Intl.NumberFormat(e, {
 	hour: "2-digit",
 	minute: "2-digit",
 	hour12: !1
-}).format(e) : "--:--";
+}).format(e) : "--:--", o = (e) => {
+	if (typeof e == "string") return String(e);
+	let t = "", n = e;
+	for (; n;) t = n.styles + t, n = n.next;
+	return t;
+};
 //#endregion
-export { a as formatTime, i as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, e as isEmpty, t as validateEmail };
+export { a as formatTime, i as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, e as isEmpty, o as toCssString, t as validateEmail };