@stamcat/craftsman 0.0.46 → 0.0.48

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 (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/DateTimePicker/DateTimePicker.css +1 -1
  3. package/src/components/DateTimePicker/DateTimePicker.scss +1 -1
  4. package/src/components/Input/AGENTS.md +1 -0
  5. package/src/components/Input/Input.css +1 -1
  6. package/src/components/Input/Input.esm.js +2 -2
  7. package/src/components/Input/Input.scss +4 -3
  8. package/src/components/InputNumber/InputNumber.esm.js +1 -0
  9. package/src/components/Toggle/Toggle.esm.js +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stamcat/craftsman",
3
- "version": "0.0.46",
3
+ "version": "0.0.48",
4
4
  "type": "module",
5
5
  "description": "A powerful, lightweight framework for design systems",
6
6
  "repository": {
package/src/components/DateTimePicker/DateTimePicker.css CHANGED
@@ -1 +1 @@
1
- @layer cf-base{.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer cf-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}
1
+ @layer cf-base{.react-datetime-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}.react-datetime-picker__wrapper:focus{box-shadow:none;outline:0}.react-datetime-picker__wrapper:hover{border-color:var(--gray500)}[type=number].react-datetime-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-datetime-picker__wrapper{appearance:textfield}.react-datetime-picker__wrapper:disabled,.disabled.react-datetime-picker__wrapper{border-color:var(--gray400);background-color:var(--gray100)}}.react-datetime-picker,.react-datetime-picker *,.react-datetime-picker :before,.react-datetime-picker :after{box-sizing:border-box}@layer cf-component{.react-datetime-picker{display:inline-flex;position:relative}.react-datetime-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-datetime-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-datetime-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-datetime-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-datetime-picker__inputGroup__divider,.react-datetime-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-datetime-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-datetime-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-datetime-picker__inputGroup__input:disabled{background-color:unset}.react-datetime-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-datetime-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-datetime-picker__button{border:0;padding:4px 4px 4px 7px}.react-datetime-picker__button:hover{background:0 0}.react-datetime-picker__calendar--closed,.react-datetime-picker__clock--closed{display:none}.react-datetime-picker__calendar,.react-datetime-picker__clock{z-index:1}.react-datetime-picker__inputGroup__input:invalid{background:#ff00001a}.react-datetime-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-datetime-picker__calendar{width:350px;max-width:100vw}.react-datetime-picker__calendar .react-calendar{border-width:thin}.react-date-picker__inputGroup__input:invalid,.react-datetime-picker__inputGroup__input:invalid{background:unset}.dateTimePicker{display:inline-block}.dateTimePicker__time-display{margin-top:8px;display:flex}.dateTimePicker__wrapper{display:inline-block}}
package/src/components/DateTimePicker/DateTimePicker.scss CHANGED
@@ -73,7 +73,7 @@
73
73
  }
74
74
 
75
75
  .dateTimePicker {
76
-
76
+ display: inline-block;
77
77
  &__time-display {
78
78
  margin-top: 8px;
79
79
  display: flex;
package/src/components/Input/AGENTS.md CHANGED
@@ -20,6 +20,7 @@ Behavior notes:
20
20
 
21
21
  - `id` is preserved; if omitted, a stable React `useId` value is used.
22
22
  - Floating-label behavior is supported when `labelPosition="inside"`.
23
+ - When `labelPosition="inside"`, `placeholder` is still rendered to the DOM (kept for screen readers) but visually hidden via CSS (`opacity: 0`) until the field is focused, since the floating label occupies that space at rest.
23
24
  - `endAdornment` exists as an internal extension point used by `InputPassword`; consumer apps should prefer `InputPassword` rather than wiring password toggles on `Input`.
24
25
  - `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.
25
26
 
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: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]: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;width:100%;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
@@ -8,7 +8,7 @@ import { jsx as i, jsxs as a } from "react/jsx-runtime";
8
8
  var o = (o) => {
9
9
  let { label: s, id: c, labelPosition: l = "top", required: u = !1, type: d = "text", error: f, endAdornment: p, preAdornment: m, style: h, className: g, value: _, defaultValue: v, ...y } = o, b = n(), x = c || b;
10
10
  return /* @__PURE__ */ i(t, {
11
- className: g,
11
+ className: r("input", g),
12
12
  label: s,
13
13
  labelPosition: l,
14
14
  error: f,
@@ -28,7 +28,7 @@ var o = (o) => {
28
28
  /* @__PURE__ */ i("input", {
29
29
  id: x,
30
30
  type: d,
31
- className: r("input", d),
31
+ className: d,
32
32
  value: _,
33
33
  defaultValue: v,
34
34
  ...y
package/src/components/Input/Input.scss CHANGED
@@ -115,7 +115,7 @@
115
115
  border-color: var(--blue500);
116
116
  }
117
117
 
118
- .input::placeholder {
118
+ input::placeholder {
119
119
  opacity: 1;
120
120
  }
121
121
  }
@@ -137,7 +137,7 @@
137
137
  width: 100%;
138
138
  }
139
139
 
140
- .input::placeholder {
140
+ input::placeholder {
141
141
  opacity: 0;
142
142
  transition: opacity 200ms ease;
143
143
  }
@@ -145,7 +145,8 @@
145
145
  }
146
146
  .input-field {
147
147
  position: relative;
148
- display: inline-flex;
148
+ display: flex;
149
+ width: 100%;
149
150
  align-items: center;
150
151
  &[data-has-end-adornment="true"] {
151
152
  > .input {
package/src/components/InputNumber/InputNumber.esm.js CHANGED
@@ -28,6 +28,7 @@ var s = ({ type: s = "number", className: c, iconIncrement: l, iconDecrement: u,
28
28
  },
29
29
  children: u || /* @__PURE__ */ i(a, { size: "26" })
30
30
  }),
31
+ role: "spinbutton",
31
32
  ...p,
32
33
  type: s
33
34
  });
package/src/components/Toggle/Toggle.esm.js CHANGED
@@ -6,6 +6,7 @@ import { jsx as n } from "react/jsx-runtime";
6
6
  //#region src/components/Toggle/Toggle.tsx
7
7
  var r = ({ labelPosition: r = "right", className: i, style: a, width: o = 40, ...s }) => /* @__PURE__ */ n(e, {
8
8
  type: "checkbox",
9
+ role: "switch",
9
10
  labelPosition: r,
10
11
  className: t("toggle", i),
11
12
  endAdornment: /* @__PURE__ */ n("span", { className: "toggle-slider" }),