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

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

@@ -0,0 +1,265 @@
+@use "./input";
+@use "../../utilities/functions" as u;
+
+.input-phone {
+    &[data-label-position="inside"] {
+        .input-label {
+            top: 15px;
+            left: 50px;
+        }
+    }
+
+    .react-international-phone-country-selector {
+        position: relative;
+    }
+
+    .react-international-phone-flag-emoji {
+        width: var(--react-international-phone-flag-width, 24px);
+        height: var(--react-international-phone-flag-height, 24px);
+        box-sizing: border-box;
+    }
+
+    .react-international-phone-country-selector-button {
+        display: flex;
+        height: var(--react-international-phone-height, 36px);
+        box-sizing: border-box;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        border: 1px solid
+            var(
+                --react-international-phone-country-selector-border-color,
+                var(--react-international-phone-border-color, gainsboro)
+            );
+        margin: 0;
+        appearance: button;
+        -webkit-appearance: button;
+        background-color: var(
+            --react-international-phone-country-selector-background-color,
+            var(--react-international-phone-background-color, white)
+        );
+        cursor: pointer;
+        text-transform: none;
+        user-select: none;
+
+        &:hover {
+            background-color: var(--react-international-phone-country-selector-background-color-hover, whitesmoke);
+        }
+
+        &--hide-dropdown {
+            cursor: auto;
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        &--disabled {
+            background-color: var(
+                --react-international-phone-disabled-country-selector-background-color,
+                var(--react-international-phone-disabled-background-color, whitesmoke)
+            );
+            cursor: auto;
+
+            &:hover {
+                background-color: var(
+                    --react-international-phone-disabled-country-selector-background-color,
+                    var(--react-international-phone-disabled-background-color, whitesmoke)
+                );
+            }
+        }
+
+        &__button-content {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        &__flag-emoji {
+            margin: 0 4px;
+
+            &--disabled {
+                opacity: 0.75;
+            }
+        }
+
+        &__dropdown-arrow {
+            border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid
+                var(--react-international-phone-country-selector-arrow-color, #777);
+            border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
+            border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;
+            margin-right: 4px;
+            transition: all 0.1s ease-out;
+
+            &--active {
+                transform: rotateX(180deg);
+            }
+
+            &--disabled {
+                border-top-color: var(--react-international-phone-disabled-country-selector-arrow-color, #999);
+            }
+        }
+    }
+
+    .react-international-phone-country-selector-dropdown {
+        position: absolute;
+        z-index: 1000;
+        top: var(--react-international-phone-dropdown-top, 44px);
+        left: var(--react-international-phone-dropdown-left, 0);
+        display: flex;
+        width: 300px;
+        max-height: 200px;
+        flex-direction: column;
+        padding: 4px 0;
+        margin: 0;
+        background-color: var(
+            --react-international-phone-dropdown-item-background-color,
+            var(--react-international-phone-background-color, white)
+        );
+        box-shadow: var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, 0.25));
+        color: var(
+            --react-international-phone-dropdown-item-text-color,
+            var(--react-international-phone-text-color, #222)
+        );
+        list-style: none;
+        overflow-y: scroll;
+
+        &__preferred-list-divider {
+            height: 1px;
+            border: none;
+            margin: var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);
+            background: var(
+                --react-international-phone-dropdown-preferred-list-divider-color,
+                var(--react-international-phone-border-color, gainsboro)
+            );
+        }
+
+        &__list-item {
+            display: flex;
+            min-height: var(--react-international-phone-dropdown-item-height, 28px);
+            box-sizing: border-box;
+            align-items: center;
+            padding: 2px 8px;
+
+            &:hover {
+                background-color: var(
+                    --react-international-phone-selected-dropdown-item-background-color,
+                    var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
+                );
+                cursor: pointer;
+            }
+
+            &--selected,
+            &--focused {
+                background-color: var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);
+                color: var(
+                    --react-international-phone-selected-dropdown-item-text-color,
+                    var(--react-international-phone-text-color, #222)
+                );
+
+                .react-international-phone-country-selector-dropdown__list-item-dial-code {
+                    color: var(
+                        --react-international-phone-selected-dropdown-item-dial-code-color,
+                        var(--react-international-phone-dropdown-item-dial-code-color, gray)
+                    );
+                }
+            }
+
+            &--focused {
+                background-color: var(
+                    --react-international-phone-selected-dropdown-item-background-color,
+                    var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke)
+                );
+            }
+
+            &-flag-emoji {
+                margin-right: 8px;
+            }
+
+            &-country-name {
+                overflow: hidden;
+                margin-right: 8px;
+                font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+
+            &-dial-code {
+                color: var(--react-international-phone-dropdown-item-dial-code-color, gray);
+                font-size: var(--react-international-phone-dropdown-item-font-size, 14px);
+            }
+        }
+    }
+
+    .react-international-phone-dial-code-preview {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 8px;
+        border: 1px solid
+            var(
+                --react-international-phone-dial-code-preview-border-color,
+                var(--react-international-phone-border-color, gainsboro)
+            );
+        margin-right: -1px;
+        background-color: var(
+            --react-international-phone-dial-code-preview-background-color,
+            var(--react-international-phone-background-color, white)
+        );
+        color: var(
+            --react-international-phone-dial-code-preview-text-color,
+            var(--react-international-phone-text-color, #222)
+        );
+        font-size: var(
+            --react-international-phone-dial-code-preview-font-size,
+            var(--react-international-phone-font-size, 13px)
+        );
+
+        &--disabled {
+            background-color: var(
+                --react-international-phone-dial-code-preview-disabled-background-color,
+                var(--react-international-phone-disabled-background-color, whitesmoke)
+            );
+            color: var(
+                --react-international-phone-dial-code-preview-disabled-text-color,
+                var(--react-international-phone-disabled-text-color, #666)
+            );
+        }
+    }
+
+    .react-international-phone-input-container {
+        display: flex;
+
+        .react-international-phone-country-selector-button {
+            border-radius: var(--react-international-phone-border-radius, 4px);
+            margin-right: -1px;
+            border-bottom-right-radius: 0;
+            border-top-right-radius: 0;
+        }
+
+        .react-international-phone-input {
+            overflow: visible;
+            height: var(--react-international-phone-height, 36px);
+            box-sizing: border-box;
+            padding: 0 8px;
+            border: 1px solid var(--react-international-phone-border-color, gainsboro);
+            border-radius: var(--react-international-phone-border-radius, 4px);
+            margin: 0;
+            background-color: var(--react-international-phone-background-color, white);
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 0;
+            color: var(--react-international-phone-text-color, #222);
+            font-family: inherit;
+            font-size: var(--react-international-phone-font-size, 13px);
+
+            &:focus {
+                outline: none;
+            }
+
+            &--disabled {
+                background-color: var(--react-international-phone-disabled-background-color, whitesmoke);
+                color: var(--react-international-phone-disabled-text-color, #666);
+            }
+        }
+    }
+}

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']"

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

@@ -1,33 +0,0 @@
-"use client";
-import { isEmpty as e } from "../../utilities/validations.esm.js";
-import t from "./Input.module.esm.js";
-import { InputWrapper as n } from "./InputWrapper.esm.js";
-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;
-	return /* @__PURE__ */ i(n, {
-		label: s,
-		labelPosition: l,
-		error: f,
-		required: u,
-		styles: p,
-		children: /* @__PURE__ */ a("span", {
-			className: t.inputField,
-			"data-has-end-adornment": !e(m),
-			children: [/* @__PURE__ */ i("input", {
-				id: _,
-				type: d,
-				className: r(t.input, d),
-				...h
-			}), !e(m) && /* @__PURE__ */ i("span", {
-				className: t.inputAdornment,
-				children: m
-			})]
-		})
-	});
-};
-//#endregion
-export { s as Input };

package/src/components/Input/Input.module.css

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

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

@@ -1,13 +0,0 @@
-import './Input.module.css';//#region src/components/Input/Input.module.scss
-var e = "_wrapper_1xyh8_2", t = "_inputLabel_1xyh8_9", n = "_textarea_1xyh8_24", r = "_inputField_1xyh8_56", i = "_input_1xyh8_9", a = "_inputAdornment_1xyh8_95", o = "_error_1xyh8_106", s = "_inputViewToggle_1xyh8_112", c = {
-	wrapper: e,
-	inputLabel: t,
-	textarea: n,
-	inputField: r,
-	input: i,
-	inputAdornment: a,
-	error: o,
-	inputViewToggle: s
-};
-//#endregion
-export { c as default, o as error, i as input, a as inputAdornment, r as inputField, t as inputLabel, s as inputViewToggle, n as textarea, e as wrapper };