@stamcat/craftsman 0.0.54 → 0.0.56

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 (6) hide show
  1. package/package.json +1 -1
  2. package/src/components/Toggle/Toggle.css +1 -1
  3. package/src/components/Toggle/Toggle.scss +2 -1
  4. package/src/styles/utilities/layout.d.ts +2 -2
  5. package/src/styles/utilities/layout.esm.js +4 -1
  6. package/src/utilities/types.d.ts +5 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stamcat/craftsman",
3
- "version": "0.0.54",
3
+ "version": "0.0.56",
4
4
  "type": "module",
5
5
  "description": "A powerful, lightweight framework for design systems",
6
6
  "repository": {
package/src/components/Toggle/Toggle.css CHANGED
@@ -1 +1 @@
1
- @layer cf-component{.input-wrapper.toggle>label{align-items:center;gap:calc(var(--w-gutter) * .5);display:inline-flex}.input-wrapper.toggle .input-field{width:var(--toggle-width,60px);height:calc(var(--toggle-width,60px) * .56);position:relative}.input-wrapper.toggle .input.checkbox{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.input-wrapper.toggle .input-end-adornment{pointer-events:none;position:absolute;inset:0;transform:none}.input-wrapper.toggle .toggle-slider{pointer-events:none;background-color:var(--gray400);border-radius:calc(var(--toggle-width,60px) * .56);transition:background-color .2s;position:absolute;inset:0}.input-wrapper.toggle .toggle-slider:before{content:"";left:calc(var(--toggle-width,60px) * .065);bottom:calc(var(--toggle-width,60px) * .065);height:calc(var(--toggle-width,60px) * .43);width:calc(var(--toggle-width,60px) * .43);background-color:var(--white);border-radius:50%;transition:transform .2s;position:absolute}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider{background-color:var(--blue500)}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider:before{transform:translateX(calc(var(--toggle-width,60px) * .43))}}
1
+ @layer cf-base{.input-wrapper.toggle>label{align-items:center;gap:calc(var(--w-gutter) * .5);display:inline-flex}.input-wrapper.toggle .input-field{width:var(--toggle-width,60px);height:calc(var(--toggle-width,60px) * .56);position:relative}.input-wrapper.toggle .input.checkbox{opacity:0;cursor:pointer;z-index:1;width:100%;height:100%;margin:0;position:absolute;inset:0}.input-wrapper.toggle .input-end-adornment{pointer-events:none;position:absolute;inset:0;transform:none}.input-wrapper.toggle .toggle-slider{pointer-events:none;background-color:var(--gray400);border-radius:calc(var(--toggle-width,60px) * .56);transition:background-color .2s;position:absolute;inset:0}.input-wrapper.toggle .toggle-slider:before{content:"";left:calc(var(--toggle-width,60px) * .065);bottom:calc(var(--toggle-width,60px) * .065);height:calc(var(--toggle-width,60px) * .43);width:calc(var(--toggle-width,60px) * .43);background-color:var(--white);border-radius:50%;transition:transform .2s;position:absolute}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider{background-color:var(--blue500)}.input-wrapper.toggle .input.checkbox:checked+.input-end-adornment .toggle-slider:before{transform:translateX(calc(var(--toggle-width,60px) * .43))}}
package/src/components/Toggle/Toggle.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "../../styles/utilities/_functions" as u;
2
2
 
3
- @layer cf-component {
3
+ // using cf-base since there is no base layer for this to override
4
+ @layer cf-base {
4
5
  .input-wrapper.toggle {
5
6
  > label {
6
7
  display: inline-flex;
package/src/styles/utilities/layout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Breakpoint, LayoutWidthsType } from '../../utilities/types';
1
+ import { Breakpoint, LayoutWidthsType, SerializedStyles } from '../../utilities/types';
2
2
  export declare const widths: Record<LayoutWidthsType, string>;
3
3
  export declare const media: {
4
4
  readonly mobile: string;
@@ -14,4 +14,4 @@ export declare const media: {
14
14
  readonly desktopOnly: string;
15
15
  };
16
16
  export declare const width: (w: LayoutWidthsType, multiplier?: number, px?: boolean) => string;
17
- export declare const breakpoint: (bp: Breakpoint, styles: string) => string;
17
+ export declare const breakpoint: (bp: Breakpoint, styles: string | SerializedStyles) => string;
package/src/styles/utilities/layout.esm.js CHANGED
@@ -42,6 +42,9 @@ var n = Object.fromEntries(e.options.map((e) => [e, `var(--w-${e}, ${t[e]}px)`])
42
42
  return r ? a : `calc(((${i} / 1px) * ${t}) + ((${n.gutter} / 1px) * ${e}))`;
43
43
  }
44
44
  return r ? t === 1 ? i : `calc(${i} * ${t})` : t === 1 ? `calc(${i} / 1px)` : `calc((${i} / 1px) * ${t})`;
45
- }, a = (e, t) => `@media ${r[e]} { ${String(t)} }`;
45
+ }, a = (e, t) => {
46
+ let n = String(t);
47
+ return `@media ${r[e]} { ${typeof t == "string" ? n : t} }`;
48
+ };
46
49
  //#endregion
47
50
  export { a as breakpoint, r as media, i as width, n as widths };
package/src/utilities/types.d.ts CHANGED
@@ -44,6 +44,11 @@ export type LayoutWidthsType = z.infer<typeof LayoutWidthsSchema>;
44
44
  export type Width = Record<LayoutWidthsType, number>;
45
45
  export type Colors = Record<string, string>;
46
46
  export type ColorType = "rgba" | "hex";
47
+ export type SerializedStyles = {
48
+ name: string;
49
+ styles: string;
50
+ next?: SerializedStyles;
51
+ };
47
52
  export declare const zTextInputExclusions: z.ZodEnum<{
48
53
  checkbox: "checkbox";
49
54
  radio: "radio";