@stamcat/craftsman 0.0.23-alpha.9 → 0.0.24

package/src/components/Input.module.scss

@@ -0,0 +1,141 @@
+@use "../styles/global/components/input";
+
+.wrapper {
+  label {
+    .inputLabel {
+      margin-bottom: calc(var(--w-gutter, 16px) * 0.25);
+    }
+  }
+
+  &[data-required="true"] {
+    label {
+      .inputLabel {
+        &::after {
+          content: "*";
+          color: var(--red700);
+        }
+      }
+    }
+  }
+
+  &[data-label-position="left"] {
+    label {
+      display: inline-flex;
+      align-items: center;
+
+      .inputLabel {
+        width: fit-content;
+        margin-right: calc(var(--w-gutter, 16px) * 0.75);
+      }
+    }
+  }
+
+  &[data-label-position="bottom"] {
+    label {
+      display: inline-flex;
+      flex-direction: column-reverse;
+      align-items: flex-start;
+
+      .inputLabel {
+        margin-bottom: 0;
+        margin-top: calc(var(--w-gutter, 16px) * 0.25);
+      }
+    }
+  }
+
+  &[data-label-position="right"] {
+    label {
+      display: inline-flex;
+      flex-direction: row-reverse;
+      align-items: baseline;
+
+      .inputLabel {
+        margin-left: calc(var(--w-gutter, 16px) * 0.25);
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &[data-label-position="inside"] {
+    @extend %inside-input-label-base;
+
+    .inputLabel {
+      position: absolute;
+      background-color: var(--white);
+      z-index: 1;
+      width: fit-content;
+      padding: 0 5px;
+      top: calc(var(--w-gutter, 16px) * 0.25);
+      left: calc(var(--w-gutter, 16px) * 0.25);
+      pointer-events: none;
+      transition: top 150ms ease, left 150ms ease, font-size 150ms ease, color 150ms ease;
+    }
+
+    > label > .inputField > .input,
+    > .input {
+      transition: border-color 200ms ease;
+    }
+
+    &:focus-within {
+      .inputLabel {
+        @extend %inside-input-label-floating;
+        color: var(--blue500);
+      }
+
+      .input {
+        border-color: var(--blue500);
+      }
+
+      .input::placeholder {
+        opacity: 1;
+      }
+    }
+
+    &:has(.input:not(:placeholder-shown)),
+    &:has(.input:-webkit-autofill),
+    &[data-has-input="true"] {
+      .inputLabel {
+        @extend %inside-input-label-floating;
+      }
+    }
+
+    .input[type="tel"] {
+      width: 100%;
+    }
+
+    .input::placeholder {
+      opacity: 0;
+      transition: opacity 200ms ease;
+    }
+  }
+}
+
+.inputField {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  &[data-has-end-adornment="true"] {
+    > .input {
+      width: 100%;
+      padding-right: calc(calc(var(--w-gutter, 16px) * 0.5) + 24px + calc(var(--w-gutter, 16px) * 0.5));
+    }
+  }
+}
+
+.inputAdornment {
+  position: absolute;
+  right: calc(var(--w-gutter, 16px) * 0.5);
+  top: 50%;
+  transform: translateY(-50%);
+  margin-top: 0;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+}
+
+.error {
+  margin-top: calc(var(--w-gutter, 16px) * 0.25);
+  font-size: calc(var(--w-text, 14px) * 0.75);
+  color: var(--red600);
+}

package/src/components/InputPassword.d.ts

@@ -0,0 +1,6 @@
+import { TextInputType } from '../styles/utilities/types';
+import { InputProps } from './Input';
+export type InputPasswordProps = React.ComponentProps<"input"> & {} & Omit<InputProps, "type" | "endAdornment"> & {
+    type?: Extract<TextInputType, "password">;
+};
+export declare const InputPassword: React.FC<InputPasswordProps>;

package/src/components/InputPassword.esm.js

@@ -0,0 +1,32 @@
+import { Button as e } from "./Button.esm.js";
+import { Input as t } from "./Input.esm.js";
+import { jsx as n } from "react/jsx-runtime";
+import { useState as r } from "react";
+import { ImEye as i, ImEyeBlocked as a } from "react-icons/im";
+//#region src/components/InputPassword.tsx
+var o = {
+	padding: 0,
+	display: "inline-flex",
+	alignItems: "center",
+	lineHeight: 1
+}, s = ({ visible: t, onToggle: r }) => /* @__PURE__ */ n(e, {
+	type: "button",
+	variant: "text",
+	onClick: r,
+	"aria-label": t ? "Hide password" : "Show password",
+	"aria-pressed": t,
+	styles: o,
+	children: n(t ? i : a, { size: 16 })
+}), c = ({ type: e = "password", ...i }) => {
+	let [a, o] = r(!1), c = a ? "text" : e;
+	return /* @__PURE__ */ n(t, {
+		...i,
+		type: c,
+		endAdornment: /* @__PURE__ */ n(s, {
+			visible: a,
+			onToggle: () => o((e) => !e)
+		})
+	});
+};
+//#endregion
+export { c as InputPassword };

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

@@ -1,9 +1,8 @@
 import { LoaderStyle } from '../styles/global/components/loaders';
-import { SerializedStyles } from '@emotion/react';
 export type LoaderProps = React.ComponentProps<"div"> & {
     type: LoaderStyle;
     color?: string;
     width?: number;
-    styles?: SerializedStyles;
+    styles?: React.CSSProperties;
 };
 export declare const Loader: React.FC<LoaderProps>;

package/src/components/Loader.esm.js

@@ -1,18 +1,19 @@
-import { loaders as e } from "../styles/global/components/loaders.esm.js";
-import t from "../styles/global/components/loaders.module.esm.js";
-import n from "@emotion/styled";
-import { jsx as r } from "react/jsx-runtime";
+import { isEmpty as e } from "../utilities/validations.esm.js";
+import { loaders as t } from "../styles/global/components/loaders.esm.js";
+import n from "../styles/global/components/loaders.module.esm.js";
+import r from "clsx";
+import { jsx as i } from "react/jsx-runtime";
 //#region src/components/Loader.tsx
-var i = n.div`
-    ${(t) => e[t.type](t.color, t.width)}
-    ${(e) => e.styles}
-`, a = (e) => {
-	let { type: n, color: a = "black", ...o } = e;
-	return /* @__PURE__ */ r(i, {
-		className: t[n],
-		type: n,
-		color: a || "black",
-		...o
+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),
+		style: {
+			...m,
+			...p,
+			...d
+		},
+		...f
 	});
 };
 //#endregion

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

@@ -1,5 +1,4 @@
 import { default as React } from 'react';
-import { SerializedStyles } from '@emotion/react';
 export type ModalType = "dialog" | "panel";
 export interface ModalProps extends React.ComponentPropsWithoutRef<"div"> {
     visible?: boolean;
@@ -9,7 +8,7 @@ export interface ModalProps extends React.ComponentPropsWithoutRef<"div"> {
     backgroundDismiss?: boolean;
     hideDismissIcon?: boolean;
     footer?: React.ReactNode;
-    styles?: SerializedStyles;
+    styles?: React.CSSProperties;
 }
 type ModalState = {
     isClosing: boolean;
@@ -18,6 +17,6 @@ export declare class Modal extends React.PureComponent<ModalProps, ModalState> {
     readonly state: ModalState;
     onDismiss: () => void;
     onClickBackground: () => void;
-    render(): React.JSX.Element | null;
+    render(): React.JSX.Element;
 }
 export {};

package/src/components/Modal.esm.js

@@ -1,120 +1,20 @@
-import { Button as e } from "./Button.esm.js";
-import { breakpoint as t } from "../styles/utilities/layout.esm.js";
-import { LuX as n } from "../../node_modules/react-icons/lu/index.esm.js";
-import { color as r } from "../styles/utilities/color.esm.js";
-import { css as i, keyframes as a } from "@emotion/react";
-import o from "@emotion/styled";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import u from "react";
+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 { 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.tsx
-var d = a`
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-`, f = a`
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-`, p = a`
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-`, m = a`
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-`, h = o.div`
-    position: fixed;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1000;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    ${(e) => e.styles}
-`, g = o.div`
-    background-color: rgba(0, 0, 0, 0.5);
-    animation: ${(e) => e.isClosing ? f : d} 0.3s ease-in-out;
-    animation-fill-mode: forwards;
-     position: fixed;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 1001;
-`, _ = i`
-    width: 100%;
-    height: 100%;
-`, v = i`
-    width: calc(var(--w-column) * 4);
-`, y = i`
-    width: calc(var(--w-column) * 4);
-    ${t("tablet", i`
-        width: calc(var(--w-column) * 6);
-    `)}
-    ${t("desktop", i`
-        width: calc(var(--w-column) * 8);
-    `)}
-`, b = i`
-    position: fixed;
-    top: 0;
-    right: 0;
-    height: 100%;
-    ${t("mobileOnly", _)}
-    ${t("tablet", v)}
-`, x = i`
-    border-radius: 8px;
-    ${t("mobileOnly", _)}
-    ${t("tablet", y)}
-`, S = o.div`
-    padding: calc(var(--w-gutter));
-    z-index: 1002;
-    background-color: var(--white);
-    max-height: 80vh;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-    touch-action: pan-y;
-    animation: ${(e) => e.isClosing ? m : p} 0.3s ease-in-out;
-    animation-fill-mode: forwards;
-    ${(e) => e.type === "panel" && b}
-    ${(e) => e.type === "dialog" && x}
-    header {
-        display: inline-flex;
-        width: 100%;
-        justify-content: space-between;
-        margin-bottom: calc(var(--w-gutter) * 0.5);
-    }
-`, C = i`
-    text-decoration: none;
-    // padding: 0 calc(var(--w-gutter) * 0.25) 0 var(--w-gutter);
-    height: 36px;
-    width: 36px;
-    border-radius: 50%;
-`, w = o.footer`
-    margin-top: calc(var(--w-gutter) * 2);
-    background-color:var(--white);
-    height: fit-content;
-    display: flex;
-    gap: var(--w-gutter);
-`, T = class extends u.PureComponent {
+var l = {
+	textDecoration: "none",
+	height: 30,
+	width: 30,
+	borderRadius: "50%",
+	padding: 0,
+	display: "inline-flex",
+	justifyContent: "center"
+}, u = class extends s.PureComponent {
 	state = { isClosing: !1 };
 	onDismiss = () => {
 		this.props.onDismiss && (this.setState({ isClosing: !0 }), setTimeout(() => {
@@ -122,35 +22,40 @@ var d = a`
 		}, 280));
 	};
 	onClickBackground = () => {
-		let e = this.props.backgroundDismiss;
-		(e === !0 || e === void 0) && this.onDismiss();
+		(this.props.backgroundDismiss || !0) === !0 && this.onDismiss();
 	};
 	render() {
-		return this.props.visible ? /* @__PURE__ */ l(h, {
-			styles: this.props.styles,
-			children: [/* @__PURE__ */ l(S, {
-				type: this.props.type || "dialog",
-				isClosing: this.state.isClosing,
+		let s = e(this.props.styles) ? void 0 : this.props.styles;
+		return this.props.visible ? /* @__PURE__ */ o("div", {
+			className: r.wrapper,
+			style: s,
+			children: [/* @__PURE__ */ o("div", {
+				className: r.content,
+				"data-type": this.props.type || "dialog",
+				"data-is-closing": this.state.isClosing,
 				children: [
-					/* @__PURE__ */ l("header", { children: [this.props.header && /* @__PURE__ */ c(s, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ c(e, {
+					/* @__PURE__ */ o("header", { children: [this.props.header && /* @__PURE__ */ a(i, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ a(n, {
 						variant: "primary",
-						styles: C,
+						styles: l,
 						onClick: this.onDismiss,
-						children: /* @__PURE__ */ c(n, {
-							fill: r("white"),
-							viewBox: "6 8 14 14",
-							size: 24
+						children: /* @__PURE__ */ a(c, {
+							fill: t("white"),
+							size: 18
 						})
 					})] }),
-					/* @__PURE__ */ c("section", { children: this.props.children }),
-					this.props.footer && /* @__PURE__ */ c(w, { children: this.props.footer })
+					/* @__PURE__ */ a("section", { children: this.props.children }),
+					this.props.footer && /* @__PURE__ */ a("footer", {
+						className: r.actionContainer,
+						children: this.props.footer
+					})
 				]
-			}), /* @__PURE__ */ c(g, {
-				isClosing: this.state.isClosing,
+			}), /* @__PURE__ */ a("div", {
+				className: r.background,
+				"data-is-closing": this.state.isClosing,
 				onClick: this.onClickBackground
 			})]
-		}) : null;
+		}) : /* @__PURE__ */ a(i, {});
 	}
 };
 //#endregion
-export { T as Modal };
+export { u as Modal };

package/src/components/Modal.module.css

@@ -0,0 +1 @@
+._wrapper_16mh3_1,._background_16mh3_1{width:100%;height:100%;position:fixed;inset:0}@keyframes _fadeIn_16mh3_1{0%{opacity:0}to{opacity:1}}@keyframes _fadeOut_16mh3_1{0%{opacity:1}to{opacity:0}}@keyframes _slideIn_16mh3_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes _slideOut_16mh3_1{0%{transform:translateY(0)}to{transform:translateY(100%)}}._wrapper_16mh3_1{z-index:1000;justify-content:center;align-items:center;display:flex}._background_16mh3_1{z-index:1001;background-color:#00000080;animation-fill-mode:forwards}._background_16mh3_1[data-is-closing=true]{animation:.3s ease-in-out _fadeOut_16mh3_1}._background_16mh3_1[data-is-closing=false]{animation:.3s ease-in-out _fadeIn_16mh3_1}._content_16mh3_62{padding:var(--w-gutter,16px);z-index:1002;background-color:var(--white);-webkit-overflow-scrolling:touch;touch-action:pan-y;max-height:80vh;animation-fill-mode:forwards;overflow-y:auto}._content_16mh3_62[data-is-closing=true]{animation:.3s ease-in-out _slideOut_16mh3_1}._content_16mh3_62[data-is-closing=false]{animation:.3s ease-in-out _slideIn_16mh3_1}._content_16mh3_62[data-type=panel]{height:100%;position:fixed;top:0;right:0}._content_16mh3_62[data-type=dialog]{border-radius:8px}._content_16mh3_62>header{width:100%;margin-bottom:calc(var(--w-gutter,16px) * .5);justify-content:space-between;display:inline-flex}._actionContainer_16mh3_94{margin-top:calc(var(--w-gutter,16px) * 2);background-color:var(--white);gap:var(--w-gutter,16px);height:fit-content;display:flex}@media (width>=0) and (width<=660px){._content_16mh3_62[data-type=panel],._content_16mh3_62[data-type=dialog]{width:100%;height:100%}}@media (width>=660px){._content_16mh3_62[data-type=panel]{width:calc(var(--w-column,60px) * 4 + var(--w-gutter,16px) * 3)}._content_16mh3_62[data-type=dialog]{width:calc(var(--w-column,60px) * 6 + var(--w-gutter,16px) * 5)}}@media (width>=1040px){._content_16mh3_62[data-type=dialog]{width:calc(var(--w-column,60px) * 8 + var(--w-gutter,16px) * 7)}}

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

@@ -0,0 +1,13 @@
+import './Modal.module.css';//#region src/components/Modal.module.scss
+var e = "_wrapper_16mh3_1", t = "_background_16mh3_1", n = "_fadeOut_16mh3_1", r = "_fadeIn_16mh3_1", i = "_content_16mh3_62", a = "_slideOut_16mh3_1", o = "_slideIn_16mh3_1", s = "_actionContainer_16mh3_94", c = {
+	wrapper: e,
+	background: t,
+	fadeOut: n,
+	fadeIn: r,
+	content: i,
+	slideOut: a,
+	slideIn: o,
+	actionContainer: s
+};
+//#endregion
+export { s as actionContainer, t as background, i as content, c as default, r as fadeIn, n as fadeOut, o as slideIn, a as slideOut, e as wrapper };

package/src/components/Modal.module.scss

@@ -0,0 +1,133 @@
+@use "../styles/global/components/modal";
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideOut {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(100%);
+  }
+}
+
+.wrapper {
+  @extend %modal-overlay;
+  z-index: 1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.background {
+  @extend %modal-overlay;
+  z-index: 1001;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation-fill-mode: forwards;
+
+  &[data-is-closing="true"] {
+    animation: fadeOut 0.3s ease-in-out;
+  }
+
+  &[data-is-closing="false"] {
+    animation: fadeIn 0.3s ease-in-out;
+  }
+}
+
+.content {
+  padding: var(--w-gutter, 16px);
+  z-index: 1002;
+  background-color: var(--white);
+  max-height: 80vh;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y;
+  animation-fill-mode: forwards;
+
+  &[data-is-closing="true"] {
+    animation: slideOut 0.3s ease-in-out;
+  }
+
+  &[data-is-closing="false"] {
+    animation: slideIn 0.3s ease-in-out;
+  }
+
+  &[data-type="panel"] {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100%;
+  }
+
+  &[data-type="dialog"] {
+    border-radius: 8px;
+  }
+
+  > header {
+    display: inline-flex;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: calc(var(--w-gutter, 16px) * 0.5);
+  }
+}
+
+.actionContainer {
+  margin-top: calc(var(--w-gutter, 16px) * 2);
+  background-color: var(--white);
+  height: fit-content;
+  display: flex;
+  gap: var(--w-gutter, 16px);
+}
+
+@media (min-width: 0px) and (max-width: 659.99999px) {
+  .content[data-type="panel"],
+  .content[data-type="dialog"] {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+@media (min-width: 660px) {
+  .content[data-type="panel"] {
+    width: calc((var(--w-column, 60px) * 4) + (var(--w-gutter, 16px) * 3));
+  }
+
+  .content[data-type="dialog"] {
+    width: calc((var(--w-column, 60px) * 6) + (var(--w-gutter, 16px) * 5));
+  }
+}
+
+@media (min-width: 1040px) {
+  .content[data-type="dialog"] {
+    width: calc((var(--w-column, 60px) * 8) + (var(--w-gutter, 16px) * 7));
+  }
+}

package/src/components/RadioButton.d.ts

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

package/src/components/RadioButton.esm.js

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

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

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

package/src/styles/components/ThemeProvider.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '../theme/types';
+type ThemeProviderProps = {
+    theme?: Theme;
+    children?: React.ReactNode;
+};
+export declare function ThemeProvider({ theme, children }: ThemeProviderProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,8 @@
+import { themeBuilder as e } from "../theme/theme.esm.js";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/styles/components/ThemeProvider.tsx
+function i({ theme: i, children: a }) {
+	return /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("style", { dangerouslySetInnerHTML: { __html: e(i || {}) } }), a] });
+}
+//#endregion
+export { i as ThemeProvider };