@stamcat/craftsman 0.0.27-alpha.7 → 0.0.27-alpha.8

package/Components.esm.js

@@ -1,5 +1,5 @@
 import { __exportAll as e } from "./_virtual/_rolldown/runtime.esm.js";
-import { Button as t } from "./src/components/Button.esm.js";
+import { Button as t } from "./src/components/Button/Button.esm.js";
 import { Input as n } from "./src/components/Input/Input.esm.js";
 import { InputPassword as r } from "./src/components/Input/InputPassword.esm.js";
 import { Loader as i } from "./src/components/Loader/Loader.esm.js";
@@ -8,8 +8,9 @@ import { Checkbox as o } from "./src/components/Input/Checkbox.esm.js";
 import { Textarea as s } from "./src/components/Input/Textarea.esm.js";
 import { Text as c } from "./src/components/Text/Text2.esm.js";
 import { Modal as l } from "./src/components/Modal/Modal.esm.js";
+import { Select as u } from "./src/components/Select/Select.esm.js";
 //#region src/components/index.ts
-var u = /* @__PURE__ */ e({
+var d = /* @__PURE__ */ e({
 	Button: () => t,
 	Checkbox: () => o,
 	Input: () => n,
@@ -17,8 +18,9 @@ var u = /* @__PURE__ */ e({
 	Loader: () => i,
 	Modal: () => l,
 	RadioButton: () => a,
+	Select: () => u,
 	Text: () => c,
 	Textarea: () => s
 });
 //#endregion
-export { t as Button, o as Checkbox, n as Input, r as InputPassword, i as Loader, l as Modal, a as RadioButton, c as Text, s as Textarea, u as components_exports };
+export { t as Button, o as Checkbox, n as Input, r as InputPassword, i as Loader, l as Modal, a as RadioButton, u as Select, c as Text, s as Textarea, d as components_exports };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stamcat/craftsman",
-  "version": "0.0.27-alpha.7",
+  "version": "0.0.27-alpha.8",
   "type": "module",
   "description": "A powerful, lightweight framework for design systems",
   "repository": {
@@ -95,6 +95,10 @@
     "./Modal": {
       "types": "./src/components/Modal.d.ts",
       "default": "./src/components/Modal.esm.js"
+    },
+    "./Select": {
+      "types": "./src/components/Select.d.ts",
+      "default": "./src/components/Select.esm.js"
     }
   }
 }

package/src/components/{Button.d.ts → Button/Button.d.ts}

@@ -1,4 +1,4 @@
-import { ButtonType } from '../styles';
+import { ButtonType } from '../../styles';
 export type ButtonProps = React.ComponentProps<"button"> & {
     variant?: ButtonType;
     size?: number;

package/src/components/{Button.esm.js → Button/Button.esm.js}

@@ -1,10 +1,10 @@
 "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 { 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 "clsx";
 import { Fragment as r, jsx as i } from "react/jsx-runtime";
-//#region src/components/Button.tsx
+//#region src/components/Button/Button.tsx
 var a = (a) => {
 	let { type: o = "button", variant: s = "default", size: c, styles: l, className: u, style: d, ...f } = a, p = typeof c == "number" ? Math.min(10, Math.max(.1, c)) : void 0, m = e(l) ? void 0 : l, h = p ? {
 		borderRadius: `calc(var(--btn-border-radius) * ${p})`,

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

@@ -6,25 +6,26 @@ import r from "clsx";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { useId as o } from "react";
 //#region src/components/Input/Input.tsx
-var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, type: d = "text", error: f, styles: p, endAdornment: m, ...h }) => {
-	let g = o(), _ = c || g;
+var s = ({ label: s, id: c, labelPosition: l = "top", required: u = !1, type: d = "text", error: f, endAdornment: p, style: m, className: h, ...g }) => {
+	let _ = o(), v = c || _;
 	return /* @__PURE__ */ i(n, {
+		className: h,
 		label: s,
 		labelPosition: l,
 		error: f,
 		required: u,
-		styles: p,
+		style: m,
 		children: /* @__PURE__ */ a("span", {
 			className: t.inputField,
-			"data-has-end-adornment": !e(m),
+			"data-has-end-adornment": !e(p),
 			children: [/* @__PURE__ */ i("input", {
-				id: _,
+				id: v,
 				type: d,
 				className: r(t.input, d),
-				...h
-			}), !e(m) && /* @__PURE__ */ i("span", {
+				...g
+			}), !e(p) && /* @__PURE__ */ i("span", {
 				className: t.inputAdornment,
-				children: m
+				children: p
 			})]
 		})
 	});

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

@@ -1,5 +1,5 @@
 "use client";
-import { Button as e } from "../Button.esm.js";
+import { Button as e } from "../Button/Button.esm.js";
 import t from "./Input.module.esm.js";
 import { Input as n } from "./Input.esm.js";
 import { jsx as r } from "react/jsx-runtime";

package/src/components/Input/InputWrapper.d.ts

@@ -4,8 +4,7 @@ export type LabeledInput = {
     labelPosition?: LabelPosition;
     error?: string | boolean | React.ReactNode;
     required?: boolean;
-    styles?: React.CSSProperties;
     endAdornment?: React.ReactNode;
 };
-export type InputWrapperProps = React.ComponentProps<"input" | "textarea"> & LabeledInput;
+export type InputWrapperProps = React.ComponentProps<"input" | "textarea" | "select"> & LabeledInput;
 export declare const InputWrapper: React.FC<InputWrapperProps>;

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

@@ -4,25 +4,19 @@ import t from "./Input.module.esm.js";
 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, styles: l, className: u, style: d, children: f, value: p, defaultValue: m }) => {
-	let h = !e(p) || !e(m), g = e(l) ? void 0 : l;
-	return /* @__PURE__ */ i("div", {
-		"data-label-position": o,
-		"data-required": s,
-		"data-has-input": h,
-		className: n(t.wrapper, u),
-		style: {
-			...g,
-			...d
-		},
-		children: [e(a) ? f : /* @__PURE__ */ i("label", { children: [o !== "hidden" && /* @__PURE__ */ r("div", {
-			className: t.inputLabel,
-			children: a
-		}), f] }), !e(c) && /* @__PURE__ */ r("div", {
-			className: t.error,
-			children: c
-		})]
-	});
-};
+var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p }) => /* @__PURE__ */ i("div", {
+	"data-label-position": o,
+	"data-required": s,
+	"data-has-input": !e(f) || !e(p),
+	className: n(t.wrapper, l),
+	style: u,
+	children: [e(a) ? d : /* @__PURE__ */ i("label", { children: [o !== "hidden" && /* @__PURE__ */ r("div", {
+		className: t.inputLabel,
+		children: a
+	}), d] }), !e(c) && /* @__PURE__ */ r("div", {
+		className: t.error,
+		children: c
+	})]
+});
 //#endregion
 export { a as InputWrapper };

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

@@ -5,7 +5,7 @@ import n from "clsx";
 import { jsx as r } from "react/jsx-runtime";
 import { useId as i } from "react";
 //#region src/components/Input/Textarea.tsx
-var a = ({ labelPosition: a = "top", id: o, label: s, error: c, required: l, className: u, styles: d, ...f }) => {
+var a = ({ labelPosition: a = "top", id: o, label: s, error: c, required: l, className: u, style: d, ...f }) => {
 	let p = i(), m = o || p;
 	return /* @__PURE__ */ r(t, {
 		label: s,
@@ -13,7 +13,7 @@ var a = ({ labelPosition: a = "top", id: o, label: s, error: c, required: l, cla
 		labelPosition: a,
 		error: c,
 		required: l,
-		styles: d,
+		style: d,
 		children: /* @__PURE__ */ r("textarea", {
 			id: m,
 			className: n(e.input),

package/src/components/Loader/Loader.d.ts

@@ -3,6 +3,5 @@ export type LoaderProps = React.ComponentProps<"div"> & {
     type: LoaderStyle;
     color?: string;
     width?: number;
-    styles?: React.CSSProperties;
 };
 export declare const Loader: React.FC<LoaderProps>;

package/src/components/Loader/Loader.esm.js

@@ -1,21 +1,19 @@
 "use client";
-import { isEmpty as e } from "../../utilities/validations.esm.js";
-import { loaders as t } from "./types.esm.js";
-import n from "./loaders.module.esm.js";
-import r from "clsx";
-import { jsx as i } from "react/jsx-runtime";
+import { loaders as e } from "./types.esm.js";
+import t from "./loaders.module.esm.js";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
 //#region src/components/Loader/Loader.tsx
-var a = (a) => {
-	let { type: o, color: s = "black", width: c, styles: l, className: u, style: d, ...f } = a, p = e(l) ? void 0 : l, m = t[o](s, c);
-	return /* @__PURE__ */ i("div", {
-		className: r(n[o], u),
+var i = (i) => {
+	let { type: a, color: o = "black", width: s, className: c, style: l, ...u } = i, d = e[a](o, s);
+	return /* @__PURE__ */ r("div", {
+		className: n(t[a], c),
 		style: {
-			...m,
-			...p,
-			...d
+			...d,
+			...l
 		},
-		...f
+		...u
 	});
 };
 //#endregion
-export { a as Loader };
+export { i as Loader };

package/src/components/Modal/Modal.d.ts

@@ -8,7 +8,6 @@ export interface ModalProps extends React.ComponentPropsWithoutRef<"div"> {
     backgroundDismiss?: boolean;
     hideDismissIcon?: boolean;
     footer?: React.ReactNode;
-    styles?: React.CSSProperties;
 }
 type ModalState = {
     isClosing: boolean;

package/src/components/Modal/Modal.esm.js

@@ -1,14 +1,13 @@
 "use client";
-import { isEmpty as e } from "../../utilities/validations.esm.js";
-import { color as t } from "../../styles/utilities/color.esm.js";
-import { Button as n } from "../Button.esm.js";
-import r from "./Modal.module.esm.js";
-import i from "clsx";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
-import c from "react";
-import { LuX as l } from "react-icons/lu";
+import { color as e } from "../../styles/utilities/color.esm.js";
+import { Button as t } from "../Button/Button.esm.js";
+import n from "./Modal.module.esm.js";
+import r from "clsx";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "react";
+import { LuX as c } from "react-icons/lu";
 //#region src/components/Modal/Modal.tsx
-var u = class extends c.PureComponent {
+var l = class extends s.PureComponent {
 	state = { isClosing: !1 };
 	onDismiss = () => {
 		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
@@ -19,36 +18,36 @@ var u = class extends c.PureComponent {
 		(this.props.backgroundDismiss ?? !0) === !0 && this.onDismiss();
 	};
 	render() {
-		let c = e(this.props.styles) ? void 0 : this.props.styles, u = this.props.type || "dialog";
-		return this.props.visible ? /* @__PURE__ */ s("div", {
-			className: r.wrapper,
-			style: c,
-			children: [/* @__PURE__ */ s("div", {
-				className: i(r.content, r[u]),
+		let s = this.props.type || "dialog";
+		return this.props.visible ? /* @__PURE__ */ o("div", {
+			className: r([n.wrapper, this.props.className]),
+			style: this.props.style,
+			children: [/* @__PURE__ */ o("div", {
+				className: r(n.content, n[s]),
 				"data-is-closing": this.state.isClosing,
 				children: [
-					/* @__PURE__ */ s("header", { children: [this.props.header && /* @__PURE__ */ o(a, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ o(n, {
+					/* @__PURE__ */ o("header", { children: [this.props.header && /* @__PURE__ */ a(i, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ a(t, {
 						variant: "primary",
-						className: r.closeModal,
+						className: n.closeModal,
 						onClick: this.onDismiss,
-						children: /* @__PURE__ */ o(l, {
-							fill: t("white"),
+						children: /* @__PURE__ */ a(c, {
+							fill: e("white"),
 							size: 18
 						})
 					})] }),
-					/* @__PURE__ */ o("section", { children: this.props.children }),
-					this.props.footer && /* @__PURE__ */ o("footer", {
-						className: r.actionContainer,
+					/* @__PURE__ */ a("section", { children: this.props.children }),
+					this.props.footer && /* @__PURE__ */ a("footer", {
+						className: n.actionContainer,
 						children: this.props.footer
 					})
 				]
-			}), /* @__PURE__ */ o("div", {
-				className: r.background,
+			}), /* @__PURE__ */ a("div", {
+				className: n.background,
 				"data-is-closing": this.state.isClosing,
 				onClick: this.onClickBackground
 			})]
-		}) : /* @__PURE__ */ o(a, {});
+		}) : /* @__PURE__ */ a(i, {});
 	}
 };
 //#endregion
-export { u as Modal };
+export { l as Modal };

package/src/components/Select/Select.d.ts

@@ -0,0 +1,14 @@
+import { LabeledInput } from '../Input/InputWrapper';
+export type SelectOption = {
+    value: string;
+    selected?: boolean;
+    disabled?: boolean;
+    label: string;
+};
+export type SelectProps = React.ComponentProps<"select"> & LabeledInput & {
+    options?: {
+        label: string;
+        value: string;
+    }[];
+};
+export declare const Select: React.FC<SelectProps>;

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

@@ -0,0 +1,26 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useId as n } from "react";
+//#region src/components/Select/Select.tsx
+var r = ({ label: r, id: i, labelPosition: a = "top", required: o = !1, error: s, options: c = [], className: l, style: u, ...d }) => {
+	let f = n(), p = i || f;
+	return /* @__PURE__ */ t(e, {
+		label: r,
+		labelPosition: a,
+		error: s,
+		required: o,
+		className: l,
+		style: u,
+		children: /* @__PURE__ */ t("select", {
+			id: p,
+			...d,
+			children: c.map((e, n) => /* @__PURE__ */ t("option", {
+				value: e.value,
+				children: e.label
+			}, `${p}-opt-${n}`))
+		})
+	});
+};
+//#endregion
+export { r as Select };

package/src/components/index.d.ts

@@ -1,4 +1,4 @@
-export { Button } from './Button';
+export { Button } from './Button/Button';
 export { Input } from './Input/Input';
 export { InputPassword } from './Input/InputPassword';
 export { Loader } from './Loader/Loader';
@@ -7,3 +7,4 @@ export { Checkbox } from './Input/Checkbox';
 export { Textarea } from './Input/Textarea';
 export { Text } from './Text/Text';
 export { Modal } from './Modal/Modal';
+export { Select } from './Select/Select';

package/src/styles/global/components/_select.scss

@@ -0,0 +1,56 @@
+@use "../../utilities/functions" as u;
+@layer craftsman-base {
+    select,
+    ::picker(select) {
+        appearance: base-select;
+        background: #{u.color("white")};
+        color: #{u.color("text")};
+        border: 1px solid #{u.color("gray200")};
+        border-radius: 6px;
+    }
+    select {
+        padding: 10px 40px 10px 14px;
+        position: relative;
+        &:hover,
+        &:focus {
+            outline: none;
+            border-color: #{u.color("gray200")};
+        }
+        &:focus-visible {
+            outline: none;
+        }
+        &:-moz-focusring {
+            color: transparent;
+            text-shadow: 0 0 0 #{u.color("text")};
+        }
+        &::picker-icon {
+            color: #999999;
+            transition: 0.2s rotate;
+            content: "";
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-style: solid;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg);
+            margin: 0px 2px 0 12px;
+            position: absolute;
+            right: 16px;
+            top: 12px;
+        }
+        &:open::picker-icon {
+            margin-top: 6px;
+            rotate: 180deg;
+        }
+        option {
+            padding: #{u.width("gutter", 0.5)};
+            &:hover,
+            &:focus {
+                background: #{u.color("gray100")};
+            }
+            &::checkmark {
+                content: "";
+            }
+        }
+    }
+}

package/src/styles/global/globalStyles.scss

@@ -5,7 +5,7 @@
 @use "./components/radioButton";
 @use "./components/button";
 @use "./components/input";
-
+@use "./components/select";
 @layer craftsman-base, craftsman-theme;
 
 @layer craftsman-base {
@@ -79,4 +79,5 @@
     a {
         @extend %text-link;
     }
+    
 }

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

@@ -2,7 +2,6 @@ import { htmlTagNames as e } from "./constants.esm.js";
 import { components_exports as t } from "../../../Components.esm.js";
 //#region src/styles/theme/components.ts
 var n = {
-	button: "button",
 	input: "input:not([type='radio']):not([type='checkbox'])",
 	checkbox: "input[type='checkbox']",
 	radioButton: "input[type='radio']"