@stamcat/craftsman 0.0.27-alpha.2 → 0.0.27-alpha.21

package/src/styles/index.d.ts

@@ -1,6 +1,6 @@
 export * from './utilities/color';
 export * from './utilities/constants';
 export * from './utilities/layout';
-export * from './utilities/types';
+export * from '../utilities/types';
 export * from './theme/theme';
 export { ThemeProvider } from './components/ThemeProvider';

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

@@ -1,12 +1,16 @@
-import { htmlTagNames as e } from "./constants.esm.js";
-import { components_exports as t } from "../../../Components.esm.js";
+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) {
+var n = {
+	checkbox: "input[type='checkbox']",
+	radioButton: "input[type='radio']"
+};
+function r(e) {
 	return e.charAt(0).toLowerCase() + e.slice(1);
 }
-function r(t) {
-	return e.has(t) ? `${t}, .${t}` : `.${t}`;
+function i(e) {
+	return n[e] || (t.has(e) ? `${e}, .${e}` : `.${e}`);
 }
-var i = Object.keys(t).map(n), a = Object.fromEntries(i.map((e) => [e, r(e)]));
+var a = Object.keys(e).map(r), o = Object.fromEntries(a.map((e) => [e, i(e)]));
 //#endregion
-export { a as componentSelectors };
+export { o as componentSelectors };

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

@@ -2,54 +2,44 @@ import { componentSelectors as e } from "./components.esm.js";
 import { cssObjectToCssText as t, toCSSObject as n } from "./utilities.esm.js";
 import { colors as r, widths as i } from "../global/variables.esm.js";
 //#region src/styles/theme/theme.ts
-var a = /* @__PURE__ */ new Map();
-function o(e) {
-	if (typeof document > "u") return;
-	let t = `.${e}`, n = {}, r = !1, i = (e) => {
-		for (let a of Array.from(e)) {
-			if (a instanceof CSSStyleRule) {
-				if (!a.selectorText.split(",").map((e) => e.trim()).includes(t)) continue;
-				r = !0;
-				for (let e of Array.from(a.style)) n[e] = a.style.getPropertyValue(e);
-				continue;
-			}
-			a instanceof CSSGroupingRule && i(a.cssRules);
+function a(e) {
+	if (e) {
+		if (typeof e == "string") {
+			let t = e.trim();
+			return t.includes("{") ? t : `:root { ${t} }`;
 		}
-	};
-	for (let e of Array.from(document.styleSheets)) try {
-		e.cssRules && i(e.cssRules);
-	} catch {}
-	return r ? n : void 0;
+		return t(":root", n(e));
+	}
 }
-function s(e) {
-	if (a.has(e)) return a.get(e) ?? void 0;
-	let t = o(e);
-	return a.set(e, t ?? null), t;
+function o(e, r) {
+	if (typeof r == "string") {
+		let t = r.trim();
+		return t.includes("{") ? t : `${e} { ${t} }`;
+	}
+	return t(e, n(r));
 }
-function c(r) {
-	let i = [];
-	return Object.keys(e).forEach((a) => {
-		let o = r?.[a];
-		if (o) {
-			if (typeof o == "string") {
-				let n = s(o);
-				if (!n) return;
-				i.push(t(e[a], n));
-				return;
-			}
-			i.push(t(e[a], n(o)));
-		}
-	}), i;
+function s(t) {
+	return Object.keys(e).map((n) => {
+		let r = t?.[n];
+		return r ? o(e[n], r) : void 0;
+	}).filter((e) => !!e);
+}
+function c(e) {
+	if (!(!e || Object.keys(e).length === 0)) return `:root { ${Object.entries(e).map(([e, t]) => `--w-${e}: ${t}px;`).join(" ")} }`;
 }
 function l(e) {
-	let a = t(":root", {
-		...e.colors || {},
-		...e.root ? n(e.root) : {}
-	});
+	let n = [
+		t(":root", { ...e.colors || {} }),
+		c(e.widths),
+		a(e.root),
+		...s(e.components)
+	].filter(Boolean).join("\n");
 	return [
 		`:root { ${i} ${r} }`,
-		a,
-		...c(e.components)
+		"@layer craftsman-base, craftsman-theme;",
+		"@layer craftsman-theme {",
+		n,
+		"}"
 	].filter(Boolean).join("\n");
 }
 //#endregion

package/src/styles/theme/types.d.ts

@@ -1,5 +1,6 @@
 import { ColorKey } from '../utilities/color';
 import { componentSelectors } from './components';
+import { LayoutWidthsType } from '../../utilities/types';
 export type ColorVariableName = `--${ColorKey}`;
 export type CSSObject = {
     [key: string]: string | number | CSSObject | undefined;
@@ -14,9 +15,11 @@ export type ComponentThemeOverrides = {
     [K in RegisteredComponent]?: CSSObject | LegacySerializedStyles | string;
 };
 export type Colors = Partial<Record<ColorVariableName, string>>;
+export type WidthOverrides = Partial<Record<LayoutWidthsType, number>>;
 export type Theme = {
     colors?: Colors;
-    root?: CSSObject | LegacySerializedStyles;
+    widths?: WidthOverrides;
+    root?: CSSObject | LegacySerializedStyles | string;
     components?: ComponentThemeOverrides;
 };
 export type ThemeProviderProps = {

package/src/styles/utilities/_functions.scss

@@ -0,0 +1,117 @@
+@use "sass:map";
+@use "sass:string";
+@use "../config" as cfg;
+
+$width-defaults: (
+	text: cfg.$w-text,
+	gutter: cfg.$w-gutter,
+	column: cfg.$w-column,
+	mobileMax: cfg.$bp-mobileMax,
+	tablet: cfg.$bp-tablet,
+	tabletMax: cfg.$bp-tabletMax,
+	desktop: cfg.$bp-desktop,
+	desktopMax: cfg.$bp-desktopMax,
+	extDesktop: cfg.$bp-extDesktop,
+);
+
+@function color($name, $type: hex, $alpha: 1) {
+	@if $type == rgba {
+		@return string.unquote("rgb(from var(--#{$name}) r g b / #{$alpha})");
+	}
+
+	@return string.unquote("var(--#{$name})");
+}
+// internal function
+@function width-var($name) {
+	@if not map.has-key($width-defaults, $name) {
+		@error "Unknown width key `#{$name}`.";
+	}
+	@return string.unquote("var(--w-#{$name})");
+    // $fallback: map.get($width-defaults, $name);
+	// @return string.unquote("var(--w-#{$name}, #{$fallback}px)");
+}
+
+@function width($name, $multiplier: 1, $px: true) {
+	$value: width-var($name);
+
+	@if $name == column {
+		$gutter-steps: $multiplier - 1;
+		$gutter: width-var(gutter);
+
+		@if $px {
+			@return string.unquote("calc((#{$value} * #{$multiplier}) + (#{$gutter} * #{$gutter-steps}))");
+		}
+
+		@return string.unquote("calc((#{$value} * #{$multiplier}) + (#{$gutter} * #{$gutter-steps}))");
+	}
+
+	@if $px {
+		@if $multiplier == 1 {
+			@return $value;
+		}
+
+		@return string.unquote("calc(#{$value} * #{$multiplier})");
+	}
+
+	@if $multiplier == 1 {
+		@return string.unquote("#{$value}");
+	}
+
+	@return string.unquote("calc(#{$value} * #{$multiplier})");
+}
+// internal function
+@function media($bp) {
+	@if $bp == mobile {
+		@return string.unquote("(min-width: 0px)");
+	}
+
+	@if $bp == mobileMax {
+		@return string.unquote("(max-width: #{cfg.$bp-mobileMax}px)");
+	}
+
+	@if $bp == tablet {
+		@return string.unquote("(min-width: #{cfg.$bp-tablet}px)");
+	}
+
+	@if $bp == tabletMax {
+		@return string.unquote("(max-width: #{cfg.$bp-tabletMax}px)");
+	}
+
+	@if $bp == desktop {
+		@return string.unquote("(min-width: #{cfg.$bp-desktop}px)");
+	}
+
+	@if $bp == desktopMax {
+		@return string.unquote("(max-width: #{cfg.$bp-desktopMax}px)");
+	}
+
+	@if $bp == extDesktop {
+		@return string.unquote("(min-width: #{cfg.$bp-extDesktop}px)");
+	}
+
+	@if $bp == mobileOnly {
+		@return string.unquote("(min-width: 0px) and (max-width: #{cfg.$bp-mobileMax}px)");
+	}
+
+	@if $bp == tabletOnly {
+		@return string.unquote("(min-width: #{cfg.$bp-tablet}px) and (max-width: #{cfg.$bp-tabletMax}px)");
+	}
+
+	@if $bp == mobileTablet {
+		@return string.unquote("(min-width: 0px) and (max-width: #{cfg.$bp-tabletMax}px)");
+	}
+
+	@if $bp == desktopOnly {
+		@return string.unquote("(min-width: #{cfg.$bp-desktop}px) and (max-width: #{cfg.$bp-desktopMax}px)");
+	}
+
+	@error "Unknown breakpoint `#{$bp}`.";
+}
+
+@mixin breakpoint($bp) {
+	@media #{media($bp)} {
+		@content;
+	}
+}
+
+

package/src/styles/utilities/_placeholders.scss

@@ -0,0 +1,6 @@
+
+%border-box {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}

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

@@ -1,4 +1,4 @@
-import { ColorType } from './types';
+import { ColorType } from '../../utilities/types';
 export declare const colors: {
     red990: string;
     red950: string;

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

@@ -1,4 +1,4 @@
-import { LayoutWidthsType } from './types';
+import { LayoutWidthsType } from '../../utilities/types';
 export declare const defaultColors: {
     red990: string;
     red950: string;

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

@@ -1,4 +1,4 @@
-import { Breakpoint, LayoutWidthsType } from './types';
+import { Breakpoint, LayoutWidthsType } from '../../utilities/types';
 export declare const widths: Record<LayoutWidthsType, string>;
 export declare const media: {
     readonly mobile: string;

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

@@ -1,7 +1,7 @@
-import { defaultWidths as e } from "./constants.esm.js";
-import { LayoutWidthsSchema as t } from "./types.esm.js";
+import { LayoutWidthsSchema as e } from "../../utilities/types.esm.js";
+import { defaultWidths as t } from "./constants.esm.js";
 //#region src/styles/utilities/layout.ts
-var n = Object.fromEntries(t.options.map((t) => [t, `var(--w-${t}, ${e[t]}px)`])), r = {
+var n = Object.fromEntries(e.options.map((e) => [e, `var(--w-${e}, ${t[e]}px)`])), r = {
 	get mobile() {
 		return "(min-width: 0px)";
 	},

package/src/{styles/utilities → 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>;
@@ -52,6 +52,8 @@ 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";
     text: "text";
     checkbox: "checkbox";
     radio: "radio";
@@ -62,11 +64,9 @@ export declare const zTextInputType: z.ZodEnum<{
     file: "file";
     hidden: "hidden";
     image: "image";
-    month: "month";
     password: "password";
     range: "range";
     reset: "reset";
-    search: "search";
     submit: "submit";
     tel: "tel";
     time: "time";
@@ -83,3 +83,61 @@ export declare const zLabelPosition: z.ZodEnum<{
     inside: "inside";
 }>;
 export type LabelPosition = z.infer<typeof zLabelPosition>;
+export declare const zCheckboxLabelPosition: z.ZodEnum<{
+    top: "top";
+    left: "left";
+    bottom: "bottom";
+    right: "right";
+}>;
+export type CheckboxLabelPosition = z.infer<typeof zCheckboxLabelPosition>;
+export declare const zRadioLabelPosition: z.ZodEnum<{
+    left: "left";
+    right: "right";
+}>;
+export type RadioLabelPosition = z.infer<typeof zRadioLabelPosition>;
+export declare const ButtonType: z.ZodEnum<{
+    text: "text";
+    primary: "primary";
+    default: "default";
+}>;
+export type ButtonType = z.infer<typeof ButtonType>;
+export declare const TextTags: z.ZodEnum<{
+    h1: "h1";
+    h2: "h2";
+    h3: "h3";
+    h4: "h4";
+    h5: "h5";
+    p: "p";
+    span: "span";
+    div: "div";
+}>;
+export type TextTags = z.infer<typeof TextTags>;
+export declare const TextType: z.ZodEnum<{
+    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";
+    xsmall: "xsmall";
+}>;
+export type TextSize = z.infer<typeof TextSize>;
+export declare const CarouselPageType: z.ZodEnum<{
+    dots: "dots";
+    numbers: "numbers";
+}>;
+export type CarouselPageType = z.infer<typeof CarouselPageType>;
+export declare const NoticeType: z.ZodEnum<{
+    help: "help";
+    info: "info";
+    success: "success";
+    error: "error";
+    none: "none";
+}>;
+export type NoticeType = z.infer<typeof NoticeType>;

package/src/utilities/types.esm.js

@@ -0,0 +1,85 @@
+import e from "zod";
+//#region src/utilities/types.ts
+var t = e.enum(["gutter", "column"]), n = e.enum([
+	"tablet",
+	"desktop",
+	"extDesktop"
+]), r = e.enum([
+	"mobileMax",
+	"tabletMax",
+	"desktopMax"
+]), i = e.enum([
+	...n.options,
+	...r.options,
+	"mobileOnly",
+	"tabletOnly",
+	"mobileTablet",
+	"desktopOnly"
+]), a = e.enum([
+	...t.options,
+	...n.options,
+	...r.options,
+	"text"
+]), o = e.enum(["checkbox", "radio"]), s = [
+	"color",
+	"date",
+	"datetime-local",
+	"email",
+	"file",
+	"hidden",
+	"image",
+	"month",
+	"number",
+	"password",
+	"range",
+	"reset",
+	"search",
+	"submit",
+	"tel",
+	"text",
+	"time",
+	"url",
+	"week",
+	"radio",
+	"checkbox"
+], c = e.enum(s), l = e.enum([
+	"top",
+	"left",
+	"bottom",
+	"right",
+	"inside",
+	"hidden"
+]), u = l.exclude(["inside", "hidden"]), d = l.extract(["left", "right"]), f = e.enum([
+	"primary",
+	"default",
+	"text"
+]), p = e.enum([
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"p",
+	"span",
+	"div"
+]), m = e.enum([
+	"display",
+	"heading",
+	"paragraph",
+	"caption",
+	"small-title"
+]), h = e.enum([
+	"xlarge",
+	"large",
+	"medium",
+	"small",
+	"xsmall"
+]), g = e.enum(["dots", "numbers"]), _ = e.enum([
+	"help",
+	"info",
+	"success",
+	"error",
+	"none"
+]);
+//#endregion
+export { t as BaseWidthSchema, i as BreakpointSchema, f as ButtonType, g as CarouselPageType, a as LayoutWidthsSchema, r as MaxScreenWidthSchema, _ as NoticeType, n as ScreenWidthSchema, h as TextSize, p as TextTags, m as TextType, u as zCheckboxLabelPosition, l as zLabelPosition, d as zRadioLabelPosition, o as zTextInputExclusions, c as zTextInputType, s as zTextInputTypes };

package/src/utilities/validations.d.ts

@@ -1,2 +1,7 @@
+import { DateTimePickerProps } from 'react-datetime-picker';
 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;

package/src/utilities/validations.esm.js

@@ -5,5 +5,23 @@ function e(e) {
 function t(e) {
 	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e);
 }
+var n = (e, t, n) => n ?? new Intl.NumberFormat(e, {
+	style: "unit",
+	unit: t,
+	unitDisplay: "long"
+}).formatToParts(1).find((e) => e.type === "unit")?.value ?? String(t), r = (e) => {
+	let t = new Intl.DateTimeFormat(e, { hour: "numeric" }).resolvedOptions();
+	return t.hourCycle === "h23" || t.hourCycle === "h24";
+}, i = (e) => {
+	let t = new Intl.DateTimeFormat(e, {
+		hour: "numeric",
+		hour12: !0
+	});
+	return [t.formatToParts(new Date(2e3, 0, 1, 9)).find((e) => e.type === "dayPeriod")?.value ?? "AM", t.formatToParts(new Date(2e3, 0, 1, 21)).find((e) => e.type === "dayPeriod")?.value ?? "PM"];
+}, a = (e, t) => e instanceof Date ? new Intl.DateTimeFormat(t, {
+	hour: "2-digit",
+	minute: "2-digit",
+	hour12: !1
+}).format(e) : "--:--";
 //#endregion
-export { e as isEmpty, t as validateEmail };
+export { a as formatTime, i as getAmPmLabels, n as getUnitLabel, r as is24HourFormat, e as isEmpty, t as validateEmail };

package/src/components/Button.esm.js

@@ -1,28 +0,0 @@
-"use client";
-import { isEmpty as e } from "../utilities/validations.esm.js";
-import { width as t } from "../styles/utilities/layout.esm.js";
-import "../../Styles.esm.js";
-import n from "./Button.module.esm.js";
-import r from "clsx";
-import { Fragment as i, jsx as a } from "react/jsx-runtime";
-//#region src/components/Button.tsx
-var o = (o) => {
-	let { type: s = "button", variant: c = "default", size: l, styles: u, className: d, style: f, ...p } = o, m = typeof l == "number" ? Math.min(10, Math.max(.1, l)) : void 0, h = e(u) ? void 0 : u, g = m ? {
-		borderRadius: `calc(var(--btn-border-radius) * ${m})`,
-		padding: `calc(var(--btn-pad-y) * ${m}) calc(var(--btn-pad-x) * ${m})`,
-		fontSize: `max(10px, calc(${t("text")} * ${m}))`
-	} : {};
-	return e(o.children) ? /* @__PURE__ */ a(i, {}) : /* @__PURE__ */ a("button", {
-		type: s,
-		"data-variant": c,
-		className: r(n.button, "button", d),
-		style: {
-			...g,
-			...h,
-			...f
-		},
-		...p
-	});
-};
-//#endregion
-export { o as Button };

package/src/components/Button.module.css

@@ -1 +0,0 @@
-._text_1l9fp_1._button_1l9fp_1,[data-variant=text]._button_1l9fp_1{color:var(--blue500);background:0 0;border:none;padding:0}._text_1l9fp_1._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover,[data-variant=text]._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover{color:var(--teal700);cursor:pointer;background-color:#0000;text-decoration:underline}._button_1l9fp_1{--btn-pad-y:calc(var(--w-gutter,16px) * .5);--btn-pad-x:calc(var(--w-gutter,16px) * .75);--btn-border-radius:calc(var(--w-gutter,16px) * .75);color:var(--blue600);cursor:pointer;padding:var(--btn-pad-y) var(--btn-pad-x);border-radius:var(--btn-border-radius);border:none;border:1px solid var(--blue500);background-color:var(--white);flex-flow:wrap;align-items:center;font-weight:500;transition:all .125s;display:inline-flex}._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover{background-color:var(--teal200)}._button_1l9fp_1:disabled,._disabled_1l9fp_7._button_1l9fp_1{cursor:not-allowed;border-color:var(--gray200);color:var(--gray400)}._button_1l9fp_1:disabled._primary_1l9fp_39,._button_1l9fp_1:disabled[data-variant=primary],._disabled_1l9fp_7._primary_1l9fp_39._button_1l9fp_1,._disabled_1l9fp_7[data-variant=primary]._button_1l9fp_1{border-color:var(--gray200);background-color:var(--gray400);color:var(--gray200)}._primary_1l9fp_39._button_1l9fp_1,[data-variant=primary]._button_1l9fp_1{color:var(--white);background-color:var(--blue500)}._primary_1l9fp_39._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover,[data-variant=primary]._button_1l9fp_1:not(:disabled):not(._disabled_1l9fp_7):hover{background-color:var(--blue700)}

package/src/components/Button.module.esm.js

@@ -1,9 +0,0 @@
-import './Button.module.css';//#region src/components/Button.module.scss
-var e = "_text_1l9fp_1", t = "_button_1l9fp_1", n = "_disabled_1l9fp_7", r = "_primary_1l9fp_39", i = {
-	text: e,
-	button: t,
-	disabled: n,
-	primary: r
-};
-//#endregion
-export { t as button, i as default, n as disabled, r as primary, e as text };

package/src/components/Button.module.scss

@@ -1,5 +0,0 @@
-@use "../styles/global/components/button";
-
-.button {
-  @extend %button-styles;
-}

package/src/components/Checkbox.d.ts

@@ -1,7 +0,0 @@
-import { InputProps } from './Input';
-type CheckboxProps = InputProps & {
-    type?: "checkbox";
-    labelPosition?: "left" | "right" | "top" | "bottom";
-};
-export declare const Checkbox: React.FC<CheckboxProps>;
-export {};

package/src/components/Checkbox.esm.js

@@ -1,11 +0,0 @@
-"use client";
-import { Input as e } from "./Input.esm.js";
-import { jsx as t } from "react/jsx-runtime";
-//#region src/components/Checkbox.tsx
-var n = ({ type: n = "checkbox", labelPosition: r = "right", ...i }) => /* @__PURE__ */ t(e, {
-	type: n,
-	labelPosition: r,
-	...i
-});
-//#endregion
-export { n as Checkbox };

package/src/components/Input.d.ts

@@ -1,11 +0,0 @@
-import { LabelPosition, TextInputType } from '../styles/utilities/types';
-export type InputProps = React.ComponentProps<"input"> & {
-    label?: string | React.ReactNode;
-    labelPosition?: LabelPosition;
-    error?: string | boolean | React.ReactNode;
-    required?: boolean;
-    styles?: React.CSSProperties;
-    endAdornment?: React.ReactNode;
-    type?: TextInputType;
-};
-export declare const Input: React.FC<InputProps>;

package/src/components/Input.esm.js

@@ -1,41 +0,0 @@
-"use client";
-import { isEmpty as e } from "../utilities/validations.esm.js";
-import t from "./Input.module.esm.js";
-import n from "clsx";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { useId as a } from "react";
-//#region src/components/Input.tsx
-var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, type: u = "text", error: d, styles: f, className: p, style: m, endAdornment: h, ...g }) => {
-	let _ = a(), v = s || _, y = !e(g.value) || !e(g.defaultValue), b = e(f) ? void 0 : f, x = /* @__PURE__ */ i("span", {
-		className: t.inputField,
-		"data-has-end-adornment": !e(h),
-		children: [/* @__PURE__ */ r("input", {
-			id: v,
-			type: u,
-			className: t.input,
-			...g
-		}), !e(h) && /* @__PURE__ */ r("span", {
-			className: t.inputAdornment,
-			children: h
-		})]
-	});
-	return /* @__PURE__ */ i("div", {
-		"data-label-position": c,
-		"data-required": l,
-		"data-has-input": y,
-		className: n(t.wrapper, p),
-		style: {
-			...b,
-			...m
-		},
-		children: [e(o) ? x : /* @__PURE__ */ i("label", { children: [c !== "hidden" && /* @__PURE__ */ r("div", {
-			className: t.inputLabel,
-			children: o
-		}), x] }), !e(d) && /* @__PURE__ */ r("div", {
-			className: t.error,
-			children: d
-		})]
-	});
-};
-//#endregion
-export { o as Input };

package/src/components/Input.module.css

@@ -1 +0,0 @@
-._wrapper_h3ihm_1[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._inputLabel_h3ihm_8,._wrapper_h3ihm_1[data-label-position=inside][data-has-input=true] ._inputLabel_h3ihm_8{top:-.5rem;left:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75)}._wrapper_h3ihm_1[data-label-position=inside]:has(._input_h3ihm_8:not(:placeholder-shown)) ._inputLabel_h3ihm_8{top:-.5rem;left:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75)}._wrapper_h3ihm_1[data-label-position=inside]:has(._input_h3ihm_8:-webkit-autofill) ._inputLabel_h3ihm_8{top:-.5rem;left:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75)}._wrapper_h3ihm_1 label ._inputLabel_h3ihm_8{margin-bottom:calc(var(--w-gutter,16px) * .25)}._wrapper_h3ihm_1[data-required=true] label ._inputLabel_h3ihm_8:after{content:"*";color:var(--red700)}._wrapper_h3ihm_1[data-label-position=left] label{align-items:center;display:inline-flex}._wrapper_h3ihm_1[data-label-position=left] label ._inputLabel_h3ihm_8{width:fit-content;margin-right:calc(var(--w-gutter,16px) * .75)}._wrapper_h3ihm_1[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}._wrapper_h3ihm_1[data-label-position=bottom] label ._inputLabel_h3ihm_8{margin-bottom:0;margin-top:calc(var(--w-gutter,16px) * .25)}._wrapper_h3ihm_1[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}._wrapper_h3ihm_1[data-label-position=right] label ._inputLabel_h3ihm_8{margin-left:calc(var(--w-gutter,16px) * .25);margin-bottom:0}._wrapper_h3ihm_1[data-label-position=inside] ._inputLabel_h3ihm_8{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter,16px) * .25);left:calc(var(--w-gutter,16px) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}._wrapper_h3ihm_1[data-label-position=inside]>label>._inputField_h3ihm_58>._input_h3ihm_8,._wrapper_h3ihm_1[data-label-position=inside]>._input_h3ihm_8{transition:border-color .2s}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._inputLabel_h3ihm_8{color:var(--blue500)}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._input_h3ihm_8{border-color:var(--blue500)}._wrapper_h3ihm_1[data-label-position=inside]:focus-within ._input_h3ihm_8::placeholder{opacity:1}._wrapper_h3ihm_1[data-label-position=inside] ._input_h3ihm_8[type=tel]{width:100%}._wrapper_h3ihm_1[data-label-position=inside] ._input_h3ihm_8::placeholder{opacity:0;transition:opacity .2s}._inputField_h3ihm_58{align-items:center;display:inline-flex;position:relative}._inputField_h3ihm_58[data-has-end-adornment=true]>._input_h3ihm_8{width:100%;padding-right:calc(var(--w-gutter,16px) * .5 + 24px + var(--w-gutter,16px) * .5)}._inputAdornment_h3ihm_89{right:calc(var(--w-gutter,16px) * .5);z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}._error_h3ihm_100{margin-top:calc(var(--w-gutter,16px) * .25);font-size:calc(var(--w-text,14px) * .75);color:var(--red600)}