@stamcat/craftsman 0.0.61 → 0.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Input/Input.css +1 -1
  3. package/src/components/Input/Input.scss +1 -1
  4. package/src/components/Select/Select.esm.js +31 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stamcat/craftsman",
3
- "version": "0.0.61",
3
+ "version": "0.0.62",
4
4
  "type": "module",
5
5
  "description": "A powerful, lightweight framework for design systems",
6
6
  "repository": {
package/src/components/Input/Input.css CHANGED
@@ -1 +1 @@
1
- @layer cf-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) * .5);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]:has(.input-field[data-has-pre-adornment=true]) .input-label{left:calc(var(--w-gutter) * 1.75)}.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,.input-wrapper[data-label-position=inside].select .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}}
1
+ @layer cf-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) * .5);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]:has(.input-field[data-has-pre-adornment=true]) .input-label{left:calc(var(--w-gutter) * 1.75)}.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,.input-wrapper[data-label-position=inside].select .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) * 1.75)}.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.scss CHANGED
@@ -160,7 +160,7 @@
160
160
  }
161
161
  &[data-has-pre-adornment="true"] {
162
162
  > .input {
163
- padding-left: #{u.width("gutter", 2.25)};
163
+ padding-left: #{u.width("gutter", 1.75)};
164
164
  }
165
165
  }
166
166
  }
package/src/components/Select/Select.esm.js CHANGED
@@ -1,28 +1,37 @@
1
1
  "use client";
2
- import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
3
- import { useId as t } from "react";
4
- import n from "clsx";
5
- import { jsx as r } from "react/jsx-runtime";
2
+ import { isEmpty as e } from "../../utilities/validations.esm.js";
3
+ import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
4
+ import { useId as n } from "react";
5
+ import r from "clsx";
6
+ import { jsx as i, jsxs as a } from "react/jsx-runtime";
6
7
  //#region src/components/Select/Select.tsx
7
- var i = ({ label: i, id: a, labelPosition: o = "top", required: s = !1, error: c, options: l = [], className: u, style: d, inputStyle: f, ...p }) => {
8
- let m = t(), h = a || m;
9
- return /* @__PURE__ */ r(e, {
10
- label: i,
11
- labelPosition: o,
12
- error: c,
13
- required: s,
14
- className: n("select", u),
15
- style: d,
16
- children: /* @__PURE__ */ r("select", {
17
- id: h,
18
- style: f,
19
- ...p,
20
- children: l.map((e, t) => /* @__PURE__ */ r("option", {
21
- value: e.value,
22
- children: e.label
23
- }, `${h}-opt-${t}`))
8
+ var o = ({ label: o, id: s, labelPosition: c = "top", required: l = !1, error: u, options: d = [], className: f, style: p, inputStyle: m, preAdornment: h, ...g }) => {
9
+ let _ = n(), v = s || _;
10
+ return /* @__PURE__ */ i(t, {
11
+ label: o,
12
+ labelPosition: c,
13
+ error: u,
14
+ required: l,
15
+ className: r("select", f),
16
+ style: p,
17
+ children: /* @__PURE__ */ a("span", {
18
+ className: "input-field",
19
+ "data-has-pre-adornment": !e(h),
20
+ children: [!e(h) && /* @__PURE__ */ i("span", {
21
+ className: "input-pre-adornment",
22
+ children: h
23
+ }), /* @__PURE__ */ i("select", {
24
+ id: v,
25
+ className: "input",
26
+ style: m,
27
+ ...g,
28
+ children: d.map((e, t) => /* @__PURE__ */ i("option", {
29
+ value: e.value,
30
+ children: e.label
31
+ }, `${v}-opt-${t}`))
32
+ })]
24
33
  })
25
34
  });
26
35
  };
27
36
  //#endregion
28
- export { i as Select };
37
+ export { o as Select };