@stamcat/craftsman 0.0.60 → 0.0.62

package/package.json

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

package/src/components/Input/Input.css

@@ -1 +1 @@
-@layer cf-base{.input-pre-adornment,.input-end-adornment{z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .5);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .45);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside][data-has-pre-adornment=true] .input-label{left:calc(var(--w-gutter) * 1.75)}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label,.input-wrapper[data-label-position=inside].select .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] input::placeholder{opacity:0;transition:opacity .2s}.input-field{align-items:center;display:flex;position:relative}.input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * 1.5)}.input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * 2.25)}.input-end-adornment{right:calc(var(--w-gutter) * .5)}.input-pre-adornment{left:calc(var(--w-gutter) * .5)}.input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}}
+@layer cf-base{.input-pre-adornment,.input-end-adornment{z-index:1;align-items:center;margin-top:0;display:inline-flex;position:absolute;top:50%;transform:translateY(-50%)}.input-wrapper label .input-label{margin-bottom:calc(var(--w-gutter) * .25)}.input-wrapper[data-required=true] label .input-label:after{content:"*";color:var(--red700)}.input-wrapper[data-label-position=left] label{align-items:center;display:inline-flex}.input-wrapper[data-label-position=left] label .input-label{width:fit-content;margin-right:calc(var(--w-gutter) * .75)}.input-wrapper[data-label-position=left].textarea label{align-items:flex-start}.input-wrapper[data-label-position=bottom] label{flex-direction:column-reverse;align-items:flex-start;display:inline-flex}.input-wrapper[data-label-position=bottom] label .input-label{margin-bottom:0;margin-top:calc(var(--w-gutter) * .25)}.input-wrapper[data-label-position=right] label{flex-direction:row-reverse;align-items:baseline;display:inline-flex}.input-wrapper[data-label-position=right] label .input-label{margin-left:calc(var(--w-gutter) * .5);margin-bottom:0}.input-wrapper[data-label-position=inside]{--react-international-phone-height:50px;--react-international-phone-border-radius:8px;--react-international-phone-border-color:silver;position:relative}.input-wrapper[data-label-position=inside] .input-label{background-color:var(--white);z-index:1;width:fit-content;top:calc(var(--w-gutter) * .45);left:calc(var(--w-gutter) * .25);pointer-events:none;padding:0 5px;transition:top .15s,left .15s,font-size .15s,color .15s;position:absolute}.input-wrapper[data-label-position=inside]>label>.input-field>.input,.input-wrapper[data-label-position=inside]>.input{transition:border-color .2s}.input-wrapper[data-label-position=inside]:has(.input-field[data-has-pre-adornment=true]) .input-label{left:calc(var(--w-gutter) * 1.75)}.input-wrapper[data-label-position=inside]:focus-within .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75);color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within .input{border-color:var(--blue500)}.input-wrapper[data-label-position=inside]:focus-within input::placeholder{opacity:1}.input-wrapper[data-label-position=inside][data-has-input=true] .input-label,.input-wrapper[data-label-position=inside].select .input-label{top:-.5rem;left:calc(var(--w-gutter) * .125);font-size:calc(var(--w-text) * .75)}.input-wrapper[data-label-position=inside] .input[type=tel]{width:100%}.input-wrapper[data-label-position=inside] input::placeholder{opacity:0;transition:opacity .2s}.input-field{align-items:center;display:inline-flex;position:relative}.input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * 1.5)}.input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * 1.75)}.input-end-adornment{right:calc(var(--w-gutter) * .5)}.input-pre-adornment{left:calc(var(--w-gutter) * .5)}.input-error{margin-top:calc(var(--w-gutter) * .25);font-size:calc(var(--w-text) * .75);color:var(--red600)}.input-view-toggle{align-items:"center";padding:0;line-height:1;display:inline-flex}}

package/src/components/Input/Input.esm.js

@@ -16,7 +16,6 @@ var o = (o) => {
 		style: h,
 		value: _,
 		defaultValue: v,
-		preAdornment: m,
 		children: /* @__PURE__ */ a("span", {
 			className: "input-field",
 			"data-has-end-adornment": !e(p),

package/src/components/Input/Input.scss

@@ -105,7 +105,7 @@
                 transition: border-color 200ms ease;
             }
 
-            &[data-has-pre-adornment="true"] {
+            &:has(.input-field[data-has-pre-adornment="true"]) {
                 .input-label {
                     left: #{u.width("gutter", 1.75)};
                 }
@@ -151,7 +151,7 @@
     }
     .input-field {
         position: relative;
-        display: flex;
+        display: inline-flex;
         align-items: center;
         &[data-has-end-adornment="true"] {
             > .input {
@@ -160,7 +160,7 @@
         }
         &[data-has-pre-adornment="true"] {
             > .input {
-                padding-left: #{u.width("gutter", 2.25)};
+                padding-left: #{u.width("gutter", 1.75)};
             }
         }
     }

package/src/components/Input/InputWrapper.esm.js

@@ -5,23 +5,22 @@ import { useState as t } from "react";
 import n from "clsx";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/Input/InputWrapper.tsx
-var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p, preAdornment: m, onLabelClick: h }) => {
-	let g = f !== void 0, [_, v] = t(!e(p)), y = g ? !e(f) : _, b = (t) => {
-		if (g) return;
+var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p, onLabelClick: m }) => {
+	let h = f !== void 0, [g, _] = t(!e(p)), v = h ? !e(f) : g, y = (t) => {
+		if (h) return;
 		let n = t.target;
-		v(!e(n.value));
+		_(!e(n.value));
 	};
 	return /* @__PURE__ */ i("div", {
 		"data-label-position": o,
 		"data-required": s,
-		"data-has-input": y,
-		"data-has-pre-adornment": !e(m),
+		"data-has-input": v,
 		className: n("input-wrapper", l),
 		style: u,
-		onInput: b,
-		onChange: b,
+		onInput: y,
+		onChange: y,
 		children: [/* @__PURE__ */ i("label", {
-			onClick: h,
+			onClick: m,
 			children: [!e(a) && o !== "hidden" && /* @__PURE__ */ r("div", {
 				className: "input-label",
 				children: a

package/src/components/Select/Select.esm.js

@@ -1,28 +1,37 @@
 "use client";
-import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
-import { useId as t } from "react";
-import n from "clsx";
-import { jsx as r } from "react/jsx-runtime";
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
+import { useId as n } from "react";
+import r from "clsx";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/Select/Select.tsx
-var i = ({ label: i, id: a, labelPosition: o = "top", required: s = !1, error: c, options: l = [], className: u, style: d, inputStyle: f, ...p }) => {
-	let m = t(), h = a || m;
-	return /* @__PURE__ */ r(e, {
-		label: i,
-		labelPosition: o,
-		error: c,
-		required: s,
-		className: n("select", u),
-		style: d,
-		children: /* @__PURE__ */ r("select", {
-			id: h,
-			style: f,
-			...p,
-			children: l.map((e, t) => /* @__PURE__ */ r("option", {
-				value: e.value,
-				children: e.label
-			}, `${h}-opt-${t}`))
+var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, error: u, options: d = [], className: f, style: p, inputStyle: m, preAdornment: h, ...g }) => {
+	let _ = n(), v = s || _;
+	return /* @__PURE__ */ i(t, {
+		label: o,
+		labelPosition: c,
+		error: u,
+		required: l,
+		className: r("select", f),
+		style: p,
+		children: /* @__PURE__ */ a("span", {
+			className: "input-field",
+			"data-has-pre-adornment": !e(h),
+			children: [!e(h) && /* @__PURE__ */ i("span", {
+				className: "input-pre-adornment",
+				children: h
+			}), /* @__PURE__ */ i("select", {
+				id: v,
+				className: "input",
+				style: m,
+				...g,
+				children: d.map((e, t) => /* @__PURE__ */ i("option", {
+					value: e.value,
+					children: e.label
+				}, `${v}-opt-${t}`))
+			})]
 		})
 	});
 };
 //#endregion
-export { i as Select };
+export { o as Select };