@stamcat/craftsman 0.0.58 → 0.0.60

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/Input/Input.css +1 -1
  3. package/src/components/Input/Input.esm.js +1 -0
  4. package/src/components/Input/Input.scss +6 -0
  5. package/src/components/Input/InputWrapper.esm.js +9 -8
  6. package/src/components/Text/Text.d.ts +1 -2
  7. package/src/components/Text/Text.esm.js +8 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stamcat/craftsman",
3
- "version": "0.0.58",
3
+ "version": "0.0.60",
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]: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: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][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: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.esm.js CHANGED
@@ -16,6 +16,7 @@ var o = (o) => {
16
16
  style: h,
17
17
  value: _,
18
18
  defaultValue: v,
19
+ preAdornment: m,
19
20
  children: /* @__PURE__ */ a("span", {
20
21
  className: "input-field",
21
22
  "data-has-end-adornment": !e(p),
package/src/components/Input/Input.scss CHANGED
@@ -105,6 +105,12 @@
105
105
  transition: border-color 200ms ease;
106
106
  }
107
107
 
108
+ &[data-has-pre-adornment="true"] {
109
+ .input-label {
110
+ left: #{u.width("gutter", 1.75)};
111
+ }
112
+ }
113
+
108
114
  &:focus-within {
109
115
  .input-label {
110
116
  @include inside-input-label-floating;
package/src/components/Input/InputWrapper.esm.js CHANGED
@@ -5,22 +5,23 @@ import { useState as t } from "react";
5
5
  import n from "clsx";
6
6
  import { jsx as r, jsxs as i } from "react/jsx-runtime";
7
7
  //#region src/components/Input/InputWrapper.tsx
8
- var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p, onLabelClick: m }) => {
9
- let h = f !== void 0, [g, _] = t(!e(p)), v = h ? !e(f) : g, y = (t) => {
10
- if (h) return;
8
+ var a = ({ label: a, labelPosition: o = "top", required: s = !1, error: c, className: l, style: u, children: d, value: f, defaultValue: p, preAdornment: m, onLabelClick: h }) => {
9
+ let g = f !== void 0, [_, v] = t(!e(p)), y = g ? !e(f) : _, b = (t) => {
10
+ if (g) return;
11
11
  let n = t.target;
12
- _(!e(n.value));
12
+ v(!e(n.value));
13
13
  };
14
14
  return /* @__PURE__ */ i("div", {
15
15
  "data-label-position": o,
16
16
  "data-required": s,
17
- "data-has-input": v,
17
+ "data-has-input": y,
18
+ "data-has-pre-adornment": !e(m),
18
19
  className: n("input-wrapper", l),
19
20
  style: u,
20
- onInput: y,
21
- onChange: y,
21
+ onInput: b,
22
+ onChange: b,
22
23
  children: [/* @__PURE__ */ i("label", {
23
- onClick: m,
24
+ onClick: h,
24
25
  children: [!e(a) && o !== "hidden" && /* @__PURE__ */ r("div", {
25
26
  className: "input-label",
26
27
  children: a
package/src/components/Text/Text.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import { TextSize } from 'storybook/theming';
2
- import { TextTags, TextType } from '../../utilities/types';
1
+ import { TextSize, TextTags, TextType } from '../../utilities/types';
3
2
  export type TextProps = React.HTMLAttributes<HTMLElement> & {
4
3
  as?: TextTags;
5
4
  richText?: boolean;
package/src/components/Text/Text.esm.js CHANGED
@@ -6,11 +6,17 @@ import n from "dompurify";
6
6
  var r = ({ as: r = "div", children: i, type: a, size: o, className: s, alignment: c, richText: l, ...u }) => {
7
7
  let d = e(a && a, o && o, c && c, "text", s);
8
8
  if (l) {
9
- let e = typeof i == "string" ? n.sanitize(i, { ADD_ATTR: ["target"] }) : i;
9
+ let e = { ADD_ATTR: ["target"] };
10
+ if (typeof i != "string") return /* @__PURE__ */ t("div", {
11
+ ...u,
12
+ className: d,
13
+ children: i
14
+ });
15
+ let r = n.sanitize(i, e);
10
16
  return /* @__PURE__ */ t("div", {
11
17
  ...u,
12
18
  className: d,
13
- dangerouslySetInnerHTML: { __html: e || "" }
19
+ dangerouslySetInnerHTML: { __html: r || "" }
14
20
  });
15
21
  }
16
22
  return /* @__PURE__ */ t(r, {