@stamcat/craftsman 0.0.27-alpha.2 → 0.0.27-alpha.21

package/src/components/Icons/index.d.ts

@@ -0,0 +1,15 @@
+export { IconAmazonPay } from './IconAmazonPay';
+export { IconAmex } from './IconAmex';
+export { IconApplePay } from './IconApplePay';
+export { IconDiscover } from './IconDiscover';
+export { IconGooglePay } from './IconGooglePay';
+export { IconMaestro } from './IconMaestro';
+export { IconMastercard } from './IconMastercard';
+export { IconPayPal } from './IconPayPal';
+export { IconSepa } from './IconSepa';
+export { IconShopPay } from './IconShopPay';
+export { IconSquare } from './IconSquare';
+export { IconStripe } from './IconStripe';
+export { IconUnionPay } from './IconUnionPay';
+export { IconVenmo } from './IconVenmo';
+export { IconVisa } from './IconVisa';

package/src/components/Icons/index.esm.js

@@ -0,0 +1,16 @@
+import { IconAmazonPay as e } from "./IconAmazonPay.esm.js";
+import { IconAmex as t } from "./IconAmex.esm.js";
+import { IconApplePay as n } from "./IconApplePay.esm.js";
+import { IconDiscover as r } from "./IconDiscover.esm.js";
+import { IconGooglePay as i } from "./IconGooglePay.esm.js";
+import { IconMaestro as a } from "./IconMaestro.esm.js";
+import { IconMastercard as o } from "./IconMastercard.esm.js";
+import { IconPayPal as s } from "./IconPayPal.esm.js";
+import { IconSepa as c } from "./IconSepa.esm.js";
+import { IconShopPay as l } from "./IconShopPay.esm.js";
+import { IconSquare as u } from "./IconSquare.esm.js";
+import { IconStripe as d } from "./IconStripe.esm.js";
+import { IconUnionPay as f } from "./IconUnionPay.esm.js";
+import { IconVenmo as p } from "./IconVenmo.esm.js";
+import { IconVisa as m } from "./IconVisa.esm.js";
+export { e as IconAmazonPay, t as IconAmex, n as IconApplePay, r as IconDiscover, i as IconGooglePay, a as IconMaestro, o as IconMastercard, s as IconPayPal, c as IconSepa, l as IconShopPay, u as IconSquare, d as IconStripe, f as IconUnionPay, p as IconVenmo, m as IconVisa };

package/src/components/Icons/types.d.ts

@@ -0,0 +1,4 @@
+import { SVGProps } from 'react';
+export type SVGIconProps = Omit<SVGProps<SVGSVGElement>, 'width'> & {
+    width?: number;
+};

package/src/components/Input/AGENTS.md

@@ -0,0 +1,30 @@
+# Input — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Input } from "@stamcat/craftsman/Input";
+```
+
+Props:
+
+- Inherits native `<input>` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `styles?: React.CSSProperties` (wrapper override)
+- `type?: TextInputType` (checkbox/radio excluded)
+
+Behavior notes:
+
+- `id` is preserved; if omitted, a stable React `useId` value is used.
+- Floating-label behavior is supported when `labelPosition="inside"`.
+- `endAdornment` exists as an internal extension point used by `InputPassword`; consumer apps should prefer `InputPassword` rather than wiring password toggles on `Input`.
+- `preAdornment` is an internal extension point used by `InputNumber` for its decrement button; consumer apps should prefer `InputNumber` rather than wiring stepper buttons on `Input` directly.
+
+Example:
+
+```tsx
+<Input type="email" placeholder="you@company.com" required />
+```

package/src/components/Input/Input.css

@@ -0,0 +1 @@
+@layer craftsman-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) * .25);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]: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{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) * 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}}

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

@@ -0,0 +1,6 @@
+import { LabeledInput } from './InputWrapper';
+import { TextInputType } from '../../utilities/types';
+export type InputProps = React.ComponentProps<"input"> & LabeledInput & {
+    type?: TextInputType;
+};
+export declare const Input: React.FC<InputProps>;

package/src/components/Input/Input.scss

@@ -0,0 +1,176 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+
+@mixin inside-input-label-floating {
+    top: -0.5rem;
+    left: #{u.width("gutter", 0.125)};
+    font-size: #{u.width("text", 0.75)};
+}
+// This is in base layer because many components implement it.
+@layer craftsman-base {
+    %input-adornment {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-top: 0;
+        z-index: 1;
+        display: inline-flex;
+        align-items: center;
+    }
+    .input-wrapper {
+        label {
+            .input-label {
+                margin-bottom: #{u.width("gutter", 0.25)};
+            }
+        }
+
+        &[data-required="true"] {
+            label {
+                .input-label {
+                    &::after {
+                        content: "*";
+                        color: var(--red700);
+                    }
+                }
+            }
+        }
+
+        &[data-label-position="left"] {
+            label {
+                display: inline-flex;
+                align-items: center;
+
+                .input-label {
+                    width: fit-content;
+                    margin-right: #{u.width("gutter", 0.75)};
+                }
+            }
+            &.textarea {
+                label {
+                    align-items: flex-start;
+                }
+            }
+        }
+
+        &[data-label-position="bottom"] {
+            label {
+                display: inline-flex;
+                flex-direction: column-reverse;
+                align-items: flex-start;
+
+                .input-label {
+                    margin-bottom: 0;
+                    margin-top: #{u.width("gutter", 0.25)};
+                }
+            }
+        }
+
+        &[data-label-position="right"] {
+            label {
+                display: inline-flex;
+                flex-direction: row-reverse;
+                align-items: baseline;
+
+                .input-label {
+                    margin-left: #{u.width("gutter", 0.25)};
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        &[data-label-position="inside"] {
+            --react-international-phone-height: 50px;
+            --react-international-phone-border-radius: 8px;
+            --react-international-phone-border-color: #c0c0c0ff;
+            position: relative;
+
+            .input-label {
+                position: absolute;
+                background-color: var(--white);
+                z-index: 1;
+                width: fit-content;
+                padding: 0 5px;
+                top: #{u.width(gutter, 0.45)};
+                left: #{u.width(gutter, 0.25)};
+                pointer-events: none;
+                transition:
+                    top 150ms ease,
+                    left 150ms ease,
+                    font-size 150ms ease,
+                    color 150ms ease;
+            }
+
+            > label > .input-field > .input,
+            > .input {
+                transition: border-color 200ms ease;
+            }
+
+            &:focus-within {
+                .input-label {
+                    @include inside-input-label-floating;
+                    color: var(--blue500);
+                }
+
+                .input {
+                    border-color: var(--blue500);
+                }
+
+                .input::placeholder {
+                    opacity: 1;
+                }
+            }
+
+            &[data-has-input="true"] {
+                .input-label {
+                    @include inside-input-label-floating;
+                }
+            }
+
+            .input[type="tel"] {
+                width: 100%;
+            }
+
+            .input::placeholder {
+                opacity: 0;
+                transition: opacity 200ms ease;
+            }
+        }
+    }
+    .input-field {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        &[data-has-end-adornment="true"] {
+            > .input {
+                padding-right: #{u.width("gutter", 1.5)};
+            }
+        }
+        &[data-has-pre-adornment="true"] {
+            > .input {
+                padding-left: #{u.width("gutter", 2.25)};
+            }
+        }
+    }
+
+
+    .input-end-adornment {
+        @extend %input-adornment;
+        right: #{u.width("gutter", 0.5)};
+    }
+    .input-pre-adornment {
+        @extend %input-adornment;
+        left: #{u.width("gutter", 0.5)};
+    }
+
+    .input-error {
+        margin-top: #{u.width("gutter", 0.25)};
+        font-size: #{u.width("text", 0.75)};
+        color: var(--red600);
+    }
+    .input-view-toggle {
+        padding: 0;
+        display: inline-flex;
+        align-items: "center";
+        line-height: 1;
+    }
+}

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

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

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

@@ -0,0 +1,11 @@
+import { LabelPosition } from '../../utilities/types';
+export type LabeledInput = {
+    label?: string | React.ReactNode;
+    labelPosition?: LabelPosition;
+    error?: string | boolean | React.ReactNode;
+    required?: boolean;
+    endAdornment?: React.ReactNode;
+    preAdornment?: React.ReactNode;
+};
+export type InputWrapperProps = React.ComponentProps<"input" | "textarea" | "select"> & LabeledInput;
+export declare const InputWrapper: React.FC<InputWrapperProps>;

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

@@ -0,0 +1,22 @@
+"use client";
+import { isEmpty as e } from "../../utilities/validations.esm.js";
+import './Input.css';/* empty css          */
+import t from "clsx";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Input/InputWrapper.tsx
+var i = ({ label: i, labelPosition: a = "top", required: o = !1, error: s, className: c, style: l, children: u, value: d, defaultValue: f }) => /* @__PURE__ */ r("div", {
+	"data-label-position": a,
+	"data-required": o,
+	"data-has-input": !e(d) || !e(f),
+	className: t("input-wrapper", c),
+	style: l,
+	children: [e(i) ? u : /* @__PURE__ */ r("label", { children: [a !== "hidden" && /* @__PURE__ */ n("div", {
+		className: "input-label",
+		children: i
+	}), u] }), !e(s) && /* @__PURE__ */ n("div", {
+		className: "input-error",
+		children: s
+	})]
+});
+//#endregion
+export { i as InputWrapper };

package/src/components/InputNumber/AGENTS.md

@@ -0,0 +1,37 @@
+# InputNumber — Agent Usage Notes
+
+Import:
+
+```tsx
+import { InputNumber } from "@stamcat/craftsman/InputNumber";
+```
+
+Props:
+
+- Extends `Input` props (`Omit<InputProps, "type" | "endAdornment">`).
+- `type?: "number"` (fixed, default: `"number"`)
+- `onDecrement?: (e: React.MouseEvent<HTMLButtonElement>) => void`
+- `onIncrement?: (e: React.MouseEvent<HTMLButtonElement>) => void`
+- `iconIncrement?: React.ReactNode` — overrides the icon rendered in the increment button.
+- `iconDecrement?: React.ReactNode` — overrides the icon rendered in the decrement button.
+
+Behavior notes:
+
+- Renders an `Input` with a decrement button as `preAdornment` and an increment button as `endAdornment`.
+- Clicking a button calls the native `stepDown()` / `stepUp()` on the underlying `<input type="number">` (honoring `min`, `max`, and `step`), then dispatches a native `input` event so a controlled `onChange` fires exactly like a real number input's spinner.
+- `onDecrement` / `onIncrement` are optional callbacks invoked after the native step — they do not replace `value`/`onChange` control.
+- Use standard controlled `<input type="number">` patterns (`value` + `onChange`) to own the number's state.
+
+Example:
+
+```tsx
+const [count, setCount] = useState(0);
+
+<InputNumber
+  label="Quantity"
+  value={count}
+  min={0}
+  max={10}
+  onChange={(e) => setCount(Number(e.currentTarget.value))}
+/>
+```

package/src/components/InputNumber/InputNumber.css

@@ -0,0 +1 @@
+@layer craftsman-base;@layer craftsman-component{.inputNumber.input-wrapper[data-label-position=inside] .input-label{left:40px}.inputNumber .input-field{gap:calc(var(--w-gutter) * .5)}.inputNumber .input-field[data-has-end-adornment=true]>.input{padding-right:calc(var(--w-gutter) * .75)}.inputNumber .input-field[data-has-pre-adornment=true]>.input{padding-left:calc(var(--w-gutter) * .75)}.inputNumber .input-end-adornment,.inputNumber .input-pre-adornment{position:unset;transform:unset;top:unset}}

package/src/components/InputNumber/InputNumber.d.ts

@@ -0,0 +1,10 @@
+import { TextInputType } from '../../utilities/types';
+import { InputProps } from '../Input/Input';
+export type InputNumberProps = React.ComponentProps<"input"> & {} & Omit<InputProps, "type" | "endAdornment"> & {
+    type?: Extract<TextInputType, "number">;
+    onDecrement?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onIncrement?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconIncrement?: React.ReactNode;
+    iconDecrement?: React.ReactNode;
+};
+export declare const InputNumber: React.FC<InputNumberProps>;

package/src/components/InputNumber/InputNumber.scss

@@ -0,0 +1,29 @@
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/utilities/_placeholders";
+
+@layer craftsman-component {
+    .inputNumber {
+        &.input-wrapper[data-label-position=inside] .input-label {
+            left: 40px;
+        }
+        .input-field {
+            gap: #{u.width("gutter", 0.5)};
+        }
+        .input-field[data-has-end-adornment=true] {
+            & > .input {
+                padding-right: #{u.width("gutter", 0.75)};
+            }
+        }
+        .input-field[data-has-pre-adornment=true] {
+            & > .input {
+                padding-left: #{u.width("gutter", 0.75)};
+            }
+        }
+        .input-end-adornment, .input-pre-adornment {
+            position: unset;
+            transform: unset;
+            top: unset;
+        }
+    }
+}

package/src/components/InputNumber/InputNumber2.esm.js

@@ -0,0 +1,36 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { Input as t } from "../Input/Input2.esm.js";
+import './InputNumber.css';/* empty css                */
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as i } from "react";
+import { IoAddCircleOutline as a, IoRemoveCircleOutline as o } from "react-icons/io5";
+//#region src/components/InputNumber/InputNumber.tsx
+var s = ({ type: s = "number", className: c, iconIncrement: l, iconDecrement: u, onDecrement: d, onIncrement: f, ...p }) => {
+	let m = i(null);
+	return /* @__PURE__ */ r(t, {
+		ref: m,
+		className: n("inputNumber", c),
+		preAdornment: /* @__PURE__ */ r(e, {
+			variant: "text",
+			onClick: (e) => {
+				let t = m.current;
+				t && (t.stepDown(), t.dispatchEvent(new Event("input", { bubbles: !0 }))), d?.(e);
+			},
+			children: l || /* @__PURE__ */ r(o, { size: "26" })
+		}),
+		endAdornment: /* @__PURE__ */ r(e, {
+			variant: "text",
+			onClick: (e) => {
+				let t = m.current;
+				t && (t.stepUp(), t.dispatchEvent(new Event("input", { bubbles: !0 }))), f?.(e);
+			},
+			children: u || /* @__PURE__ */ r(a, { size: "26" })
+		}),
+		...p,
+		type: s
+	});
+};
+//#endregion
+export { s as InputNumber };

package/src/components/InputPassword/AGENTS.md

@@ -0,0 +1,29 @@
+# InputPassword — Agent Usage Notes
+
+Import:
+
+```tsx
+import { InputPassword } from "@stamcat/craftsman/InputPassword";
+```
+
+Props:
+
+- Extends `Input` props, with `type` constrained to password mode.
+- Includes all label, error, required, and wrapper style props from `Input`.
+
+Behavior notes:
+
+- Built on top of `Input` and adds an internal password visibility state.
+- Renders an in-field show/hide toggle button.
+- Toggle is accessible: real button element, keyboard operable, and updates `aria-label` + `aria-pressed`.
+- Use this component for password fields instead of `Input type="password"`.
+
+Example:
+
+```tsx
+<InputPassword
+  label="Password"
+  placeholder="Enter your password"
+  autoComplete="current-password"
+/>
+```

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

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

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

@@ -0,0 +1,30 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { Input as t } from "../Input/Input2.esm.js";
+import n from "clsx";
+import { jsx as r } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { ImEye as a, ImEyeBlocked as o } from "react-icons/im";
+//#region src/components/InputPassword/InputPassword.tsx
+var s = ({ visible: t, onToggle: n }) => /* @__PURE__ */ r(e, {
+	type: "button",
+	variant: "text",
+	onClick: n,
+	"aria-label": t ? "Hide password" : "Show password",
+	"aria-pressed": t,
+	className: "input-view-toggle",
+	children: r(t ? a : o, { size: 16 })
+}), c = ({ type: e = "password", className: a, ...o }) => {
+	let [c, l] = i(!1), u = c ? "text" : e;
+	return /* @__PURE__ */ r(t, {
+		className: n("inputPassword", a),
+		...o,
+		type: u,
+		endAdornment: /* @__PURE__ */ r(s, {
+			visible: c,
+			onToggle: () => l((e) => !e)
+		})
+	});
+};
+//#endregion
+export { c as InputPassword };

package/src/components/InputPhone/AGENTS.md

@@ -0,0 +1,35 @@
+# InputPhone — Agent Usage Notes
+
+Import:
+
+```tsx
+import { InputPhone } from "@stamcat/craftsman/InputPhone";
+```
+
+Props:
+
+- Extends `PhoneInputProps` from `react-international-phone`.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `defaultCountry?: string` (default: `"us"`)
+- `preferredCountries?: string[]`
+- `endAdornment?: ReactNode`
+
+Behavior notes:
+
+- Powered by `react-international-phone` for i18n-aware phone number formatting.
+- Country selector dropdown opens below the field; ensure the container has at least 350px of vertical space.
+- Use `preferredCountries` to surface commonly used countries at the top of the dropdown.
+
+Example:
+
+```tsx
+<InputPhone
+  label="Phone Number"
+  defaultCountry="us"
+  preferredCountries={["us", "gb", "ca"]}
+  required
+/>
+```

package/src/components/InputPhone/InputPhone.css

@@ -0,0 +1 @@
+@layer craftsman-base;@layer craftsman-component{.inputPhone[data-label-position=inside] .input-label{top:15px;left:50px}.inputPhone .react-international-phone-country-selector{position:relative}.inputPhone .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}.inputPhone .react-international-phone-country-selector-button{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-country-selector-border-color,var(--react-international-phone-border-color,gainsboro));appearance:button;background-color:var(--react-international-phone-country-selector-background-color,var(--react-international-phone-background-color,white));cursor:pointer;text-transform:none;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;margin:0;padding:0;display:flex}.inputPhone .react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover,whitesmoke)}.inputPhone .react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.inputPhone .react-international-phone-country-selector-button--hide-dropdown:hover{background-color:#0000}.inputPhone .react-international-phone-country-selector-button--disabled{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke));cursor:auto}.inputPhone .react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color,var(--react-international-phone-disabled-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-button__button-content{justify-content:center;align-items:center;display:flex}.inputPhone .react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.inputPhone .react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.inputPhone .react-international-phone-country-selector-button__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 .1s ease-out}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.inputPhone .react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color,#999)}.inputPhone .react-international-phone-country-selector-dropdown{z-index:1000;top:var(--react-international-phone-dropdown-top,44px);left:var(--react-international-phone-dropdown-left,0);background-color:var(--react-international-phone-dropdown-item-background-color,var(--react-international-phone-background-color,white));width:300px;max-height:200px;box-shadow:var(--react-international-phone-dropdown-shadow,2px 2px 16px #00000040);color:var(--react-international-phone-dropdown-item-text-color,var(--react-international-phone-text-color,#222));flex-direction:column;margin:0;padding:4px 0;list-style:none;display:flex;position:absolute;overflow-y:scroll}.inputPhone .react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;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));border:none}.inputPhone .react-international-phone-country-selector-dropdown__list-item{min-height:var(--react-international-phone-dropdown-item-height,28px);box-sizing:border-box;align-items:center;padding:2px 8px;display:flex}.inputPhone .react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke));cursor:pointer}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected,.inputPhone .react-international-phone-country-selector-dropdown__list-item--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))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused .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))}.inputPhone .react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color,var(--react-international-phone-selected-dropdown-item-background-color,whitesmoke))}.inputPhone .react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.inputPhone .react-international-phone-country-selector-dropdown__list-item-country-name{font-size:var(--react-international-phone-dropdown-item-font-size,14px);text-overflow:ellipsis;white-space:nowrap;margin-right:8px;overflow:hidden}.inputPhone .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color,gray);font-size:var(--react-international-phone-dropdown-item-font-size,14px)}.inputPhone .react-international-phone-dial-code-preview{border:1px solid var(--react-international-phone-dial-code-preview-border-color,var(--react-international-phone-border-color,gainsboro));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));justify-content:center;align-items:center;margin-right:-1px;padding:0 8px;display:flex}.inputPhone .react-international-phone-dial-code-preview--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))}.inputPhone .react-international-phone-input-container{display:flex}.inputPhone .react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius,4px);border-top-right-radius:0;border-bottom-right-radius:0;margin-right:-1px}.inputPhone .react-international-phone-input-container .react-international-phone-input{height:var(--react-international-phone-height,36px);box-sizing:border-box;border:1px solid var(--react-international-phone-border-color,gainsboro);border-radius:var(--react-international-phone-border-radius,4px);background-color:var(--react-international-phone-background-color,white);color:var(--react-international-phone-text-color,#222);font-family:inherit;font-size:var(--react-international-phone-font-size,13px);border-top-left-radius:0;border-bottom-left-radius:0;margin:0;padding:0 8px;overflow:visible}.inputPhone .react-international-phone-input-container .react-international-phone-input:focus{outline:none}.inputPhone .react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color,whitesmoke);color:var(--react-international-phone-disabled-text-color,#666)}}

package/src/components/InputPhone/InputPhone.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { LabeledInput } from '../Input/InputWrapper';
+import { PhoneInputProps } from 'react-international-phone';
+export type InputProps = PhoneInputProps & LabeledInput & {
+    id?: string;
+};
+export declare const InputPhone: React.FC<InputProps>;