@stamcat/craftsman 0.0.23-alpha.8 → 0.0.23

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

@@ -0,0 +1,11 @@
+import './Input.module.css';//#region src/components/Input.module.scss
+var e = "_wrapper_h3ihm_1", t = "_inputLabel_h3ihm_8", n = "_input_h3ihm_8", r = "_inputField_h3ihm_58", i = "_inputAdornment_h3ihm_89", a = "_error_h3ihm_100", o = {
+	wrapper: e,
+	inputLabel: t,
+	input: n,
+	inputField: r,
+	inputAdornment: i,
+	error: a
+};
+//#endregion
+export { o as default, a as error, n as input, i as inputAdornment, r as inputField, t as inputLabel, e as wrapper };

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/src/components/Loader.d.ts

@@ -0,0 +1,8 @@
+import { LoaderStyle } from '../styles/global/components/loaders';
+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.esm.js

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

package/src/components/Modal.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export type ModalType = "dialog" | "panel";
+export interface ModalProps extends React.ComponentPropsWithoutRef<"div"> {
+    visible?: boolean;
+    onDismiss?: () => void;
+    type?: ModalType;
+    header?: string | React.ReactNode;
+    backgroundDismiss?: boolean;
+    hideDismissIcon?: boolean;
+    footer?: React.ReactNode;
+    styles?: React.CSSProperties;
+}
+type ModalState = {
+    isClosing: boolean;
+};
+export declare class Modal extends React.PureComponent<ModalProps, ModalState> {
+    readonly state: ModalState;
+    onDismiss: () => void;
+    onClickBackground: () => void;
+    render(): React.JSX.Element;
+}
+export {};

package/src/components/Modal.esm.js

@@ -0,0 +1,61 @@
+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 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(() => {
+			this.props.onDismiss && this.props.onDismiss(), this.setState({ isClosing: !1 });
+		}, 280));
+	};
+	onClickBackground = () => {
+		(this.props.backgroundDismiss || !0) === !0 && this.onDismiss();
+	};
+	render() {
+		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__ */ o("header", { children: [this.props.header && /* @__PURE__ */ a(i, { children: this.props.header }), !this.props.hideDismissIcon && /* @__PURE__ */ a(n, {
+						variant: "primary",
+						styles: l,
+						onClick: this.onDismiss,
+						children: /* @__PURE__ */ a(c, {
+							fill: t("white"),
+							size: 18
+						})
+					})] }),
+					/* @__PURE__ */ a("section", { children: this.props.children }),
+					this.props.footer && /* @__PURE__ */ a("footer", {
+						className: r.actionContainer,
+						children: this.props.footer
+					})
+				]
+			}), /* @__PURE__ */ a("div", {
+				className: r.background,
+				"data-is-closing": this.state.isClosing,
+				onClick: this.onClickBackground
+			})]
+		}) : /* @__PURE__ */ a(i, {});
+	}
+};
+//#endregion
+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/src/components/index.d.ts

@@ -0,0 +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/main.d.ts

@@ -0,0 +1 @@
+export {};

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 };

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

@@ -0,0 +1,64 @@
+%text-link {
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--blue500);
+
+    &:not(:disabled):not(.disabled):hover {
+        color: var(--teal700);
+        background-color: transparent;
+        text-decoration: underline;
+        cursor: pointer;
+    }
+}
+
+%button-styles {
+  --btn-pad-y: calc(var(--w-gutter, 16px) * 0.5);
+  --btn-pad-x: calc(var(--w-gutter, 16px) * 0.75);
+  --btn-border-radius: calc(var(--w-gutter, 16px) * 0.75);
+  color: var(--blue600);
+  border: none;
+  cursor: pointer;
+  display: inline-flex;
+  flex-flow: row wrap;
+  align-items: center;
+  font-weight: 500;
+  transition: 0.125s;
+  padding: var(--btn-pad-y) var(--btn-pad-x);
+  border-radius: var(--btn-border-radius);
+  border: 1px solid var(--blue500);
+  background-color: var(--white);
+
+  &:not(:disabled):not(.disabled):hover {
+    background-color: var(--teal200);
+  }
+
+  &.text,
+  &[data-variant="text"] {
+    @extend %text-link;
+  }
+
+  &:disabled,
+  &.disabled {
+    cursor: not-allowed;
+    border-color: var(--gray200);
+    color: var(--gray400);
+
+    &.primary,
+    &[data-variant="primary"] {
+      border-color: var(--gray200);
+      background-color: var(--gray400);
+      color: var(--gray200);
+    }
+  }
+
+  &.primary,
+  &[data-variant="primary"] {
+    color: var(--white);
+    background-color: var(--blue500);
+
+    &:not(:disabled):not(.disabled):hover {
+      background-color: var(--blue700);
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+%checkbox {
+    appearance: none;
+    box-sizing: border-box;
+    position: relative;
+    display: inline-block;
+    vertical-align: baseline;
+    top: 0.08em;
+    margin: 0;
+    padding: 0;
+    height: 16px;
+    width: 16px;
+    border-radius: 4px;
+    border: 1px solid var(--blue500);
+    background: #fff;
+
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: 4px;
+        background: transparent;
+        transition: background-color 0.15s ease;
+    }
+
+    &::after {
+        position: absolute;
+        left: 50%;
+        top: 45%;
+        width: 5px;
+        height: 8px;
+        content: "";
+        display: block;
+        border: solid white;
+        border-width: 0 2px 2px 0;
+        transform: translate(-50%, -58%) rotate(45deg) scale(0);
+        transform-origin: center;
+        transition: transform 0.15s ease;
+    }
+
+    &:checked {
+        border-color: var(--blue500);
+
+        &::before {
+        background-color: var(--blue500);
+        border-radius: unset;
+        }
+
+        &::after {
+        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+        }
+    }
+
+    &:disabled {
+        border-color: var(--gray500);
+
+        &::before {
+        background-color: var(--gray200);
+        }
+
+        &::after {
+        border-color: var(--gray200);
+        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+        }
+    }
+
+    &:checked:disabled {
+        border-color: var(--gray400);
+
+        &::before {
+        background: var(--gray400);
+        }
+
+        &::after {
+        border-color: var(--white);
+        transform: translate(-50%, -58%) rotate(45deg) scale(1);
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+%code {
+    background-color: var(--gray200);
+    color: var(--gray800);
+    padding: calc(var(--w-gutter, 16px) * 0.125) calc(var(--w-gutter, 16px) * 0.25);
+    margin: calc(var(--w-gutter, 16px) * 0.125);
+    display: inline-block;
+    font-size: var(--w-text, 14px);
+
+    &:has(pre) {
+    padding: var(--w-gutter, 16px);
+    border-radius: calc(var(--w-gutter, 16px) * 0.5);
+    background-color: var(--gray800);
+    color: var(--gray200);
+    }
+
+    &:has(pre) pre {
+    margin: 0;
+    }
+}