@stamcat/craftsman 0.0.27-alpha.9 → 0.0.28

package/src/components/TimePicker/utilities.d.ts

@@ -0,0 +1,15 @@
+import { EmblaCarouselType } from 'embla-carousel';
+export declare const parseTimeString: (val: unknown) => [number, number];
+export declare const padTime: (n: number) => string;
+export declare const toDisplayHour: (hours: number, is12h: boolean) => number;
+export declare const to24Hour: (display: number, isPM: boolean, is12h: boolean) => number;
+export declare const resolveLocale: (locale?: Intl.LocalesArgument) => string;
+export declare const resolveTimeFormat: (format: 24 | 12 | undefined, is24h: boolean) => 24 | 12;
+export declare const isInView: (wheelLocation: number, slidePosition: number) => boolean;
+export declare const setSlideStyles: (emblaApi: EmblaCarouselType, index: number, loop: boolean, slideCount: number, totalRadius: number) => void;
+export declare const setContainerStyles: (emblaApi: EmblaCarouselType, wheelRotation: number) => void;
+export declare const inactivateEmblaTransform: (emblaApi: EmblaCarouselType) => void;
+export declare const snapOnPointerUp: (emblaApi: EmblaCarouselType) => void;
+export declare const resolveHasValue: (value: React.ComponentProps<"input">["value"], internalHours: number | null) => boolean;
+export declare const resolveTime: (value: unknown, h: number | null, m: number | null) => [number, number];
+export declare const toDisplayInputValue: (hasVal: boolean, val: string | number) => string;

package/src/components/TimePicker/utilities.esm.js

@@ -0,0 +1,20 @@
+import { WHEEL_RADIUS as e } from "./constants.esm.js";
+//#region src/components/TimePicker/utilities.ts
+var t = (e) => {
+	if (typeof e != "string" || !e.includes(":")) return [0, 0];
+	let [t, n] = e.split(":").map(Number);
+	return [isNaN(t) ? 0 : t, isNaN(n) ? 0 : n];
+}, n = (e) => String(e).padStart(2, "0"), r = (e, t, n) => n ? e === 12 ? t ? 12 : 0 : t ? e + 12 : e : e, i = (e) => e ? String(Array.isArray(e) ? e[0] : e) : typeof navigator < "u" ? navigator.language : "en-US", a = (e, t) => e ?? (t ? 24 : 12), o = (e, t) => Math.abs(e - t) < 80, s = (t, n, r, i, a) => {
+	let s = t.slideNodes()[n], c = t.scrollProgress() * a, l = t.scrollSnapList()[n] * a, u = l + a, d = l - a, f = !1, p = n * -20;
+	o(c, l) && (f = !0), r && o(c, d) && (f = !0, p = -360 + (i - n) * 20), r && o(c, u) && (f = !0, p = -(a % 360) - n * 20), f ? (s.style.opacity = "1", s.style.transform = `translateY(-${n * 100}%) rotateX(${p}deg) translateZ(${e}px)`) : (s.style.opacity = "0", s.style.transform = "none");
+}, c = (t, n) => {
+	t.containerNode().style.transform = `translateZ(${e}px) rotateX(${n}deg)`;
+}, l = (e) => {
+	let { translate: t } = e.internalEngine();
+	t.clear(), t.toggleActive(!1);
+}, u = (e) => {
+	let { scrollTo: t, target: n, location: r } = e.internalEngine(), i = n.get() - r.get(), a = Math.abs(i) < 32 / 2.5 ? 10 : .1;
+	t.distance(i * a, !0);
+};
+//#endregion
+export { l as inactivateEmblaTransform, o as isInView, n as padTime, t as parseTimeString, i as resolveLocale, a as resolveTimeFormat, c as setContainerStyles, s as setSlideStyles, u as snapOnPointerUp, r as to24Hour };

package/src/components/Toggle/AGENTS.md

@@ -0,0 +1,33 @@
+# Toggle — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Toggle } from "@stamcat/craftsman/Toggle";
+```
+
+Props:
+
+- Extends `Input` props, excluding `type`, `preAdornment`, and `endAdornment` (all internally managed).
+- `width?: number` — pixel width of the switch track (default: `40`). Track height, thumb size, and thumb travel all derive from this via `calc()`.
+- `label?: string | ReactNode`, `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"right"`), `error?`, `required?` — same as `Input`.
+
+Behavior notes:
+
+- `Toggle` is `<Input type="checkbox">` under the hood — it is a real, keyboard-accessible checkbox styled as a switch, not a custom widget.
+- `width` sets a single `--toggle-width` CSS variable inline; the track, thumb, and checked-state translation are all `calc()`-derived from it in `Toggle.scss` (the same sizing pattern used by `Button`'s `--btn-size`, `Checkbox`'s `--checkbox-size`, and `RadioButton`'s `--radio-size`).
+- The underlying checkbox input is stretched invisibly over the full switch (`opacity: 0`) so it stays the real click/keyboard target; the visual slider is rendered via `endAdornment` with `pointer-events: none`.
+- Controlled and uncontrolled patterns are both supported (`checked` + `onChange`, or `defaultChecked`).
+
+Example:
+
+```tsx
+const [enabled, setEnabled] = useState(false);
+
+<Toggle
+  label="Enable notifications"
+  width={48}
+  checked={enabled}
+  onChange={(event) => setEnabled(event.currentTarget.checked)}
+/>
+```

package/src/components/Toggle/Toggle.css

@@ -0,0 +1 @@
+@layer craftsman-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{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.d.ts

@@ -0,0 +1,5 @@
+import { InputProps } from '../Input/Input';
+export type ToggleProps = Omit<InputProps, "type" | "preAdornment" | "endAdornment"> & {
+    width?: number;
+};
+export declare const Toggle: React.FC<ToggleProps>;

package/src/components/Toggle/Toggle.scss

@@ -0,0 +1,64 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .input-wrapper.toggle {
+        > label {
+            display: inline-flex;
+            align-items: center;
+            gap: #{u.width("gutter", 0.5)};
+        }
+
+        .input-field {
+            position: relative;
+            width: var(--toggle-width, 60px);
+            height: calc(var(--toggle-width, 60px) * 0.56);
+        }
+
+        .input.checkbox {
+            position: absolute;
+            inset: 0;
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            opacity: 0;
+            cursor: pointer;
+            z-index: 1;
+        }
+
+        .input-end-adornment {
+            position: absolute;
+            inset: 0;
+            top: 0;
+            transform: none;
+        }
+
+        .toggle-slider {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background-color: var(--gray400);
+            border-radius: calc(var(--toggle-width, 60px) * 0.56);
+            transition: background-color 0.2s ease;
+
+            &::before {
+                position: absolute;
+                content: "";
+                left: calc(var(--toggle-width, 60px) * 0.065);
+                bottom: calc(var(--toggle-width, 60px) * 0.065);
+                height: calc(var(--toggle-width, 60px) * 0.43);
+                width: calc(var(--toggle-width, 60px) * 0.43);
+                border-radius: 50%;
+                background-color: var(--white);
+                transition: transform 0.2s ease;
+            }
+        }
+
+        .input.checkbox:checked + .input-end-adornment .toggle-slider {
+            background-color: var(--blue500);
+
+            &::before {
+                transform: translateX(calc(var(--toggle-width, 60px) * 0.43));
+            }
+        }
+    }
+}

package/src/components/Toggle/Toggle2.esm.js

@@ -0,0 +1,19 @@
+"use client";
+import { Input as e } from "../Input/Input2.esm.js";
+import './Toggle.css';/* empty css           */
+import t from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Toggle/Toggle.tsx
+var r = ({ labelPosition: r = "right", className: i, style: a, width: o = 40, ...s }) => /* @__PURE__ */ n(e, {
+	type: "checkbox",
+	labelPosition: r,
+	className: t("toggle", i),
+	endAdornment: /* @__PURE__ */ n("span", { className: "toggle-slider" }),
+	style: {
+		...a,
+		"--toggle-width": `${o}px`
+	},
+	...s
+});
+//#endregion
+export { r as Toggle };

package/src/components/Tooltip/AGENTS.md

@@ -0,0 +1,41 @@
+# Tooltip — Agent Usage Notes
+
+> Not yet part of the documented public export surface (see `craftsman-component-usage` skill's Known Limitations). Source path only — do not assume `@stamcat/craftsman/Tooltip` is published until confirmed in `exports.ts`.
+
+Import (source-relative, once exported):
+
+```tsx
+import { Tooltip } from "@stamcat/craftsman/Tooltip";
+```
+
+Props:
+
+- `anchor: React.ReactNode` — the element the tooltip is attached to.
+- `content: React.ReactNode` — the floating content shown.
+- `placement?: Placement` (from `@floating-ui/react-dom`, default: `"bottom-start"`)
+- `strategy?: Strategy` (from `@floating-ui/react-dom`, default: `"absolute"`)
+- `showContent?: "hover" | "click"` (default: `"hover"`)
+- `anchorStyles?: React.CSSProperties`
+- `contentStyles?: React.CSSProperties`
+
+Behavior notes:
+
+- Built on `@floating-ui/react-dom`'s `useFloating` with `autoUpdate` and `offset(12)`, `flip()`, `shift()` middleware.
+- `showContent="hover"` toggles visibility on the anchor's `mouseenter`/`mouseleave`.
+- `showContent="click"` toggles visibility on anchor click, and closes on any outside `pointerdown`.
+- Floating content is only rendered in the DOM while visible (not just hidden via CSS).
+- Current `placement` is exposed via `data-placement` on the floating element for style targeting.
+
+Example:
+
+```tsx
+<Tooltip
+  anchor={<Button variant="text">Hover me</Button>}
+  content="Helpful detail"
+  placement="top"
+/>
+```
+
+Implementation caution:
+
+- No dedicated theme entry currently in `theme.components`; style via `anchorStyles`/`contentStyles` or global selectors targeting `.tooltip__anchor` / `.tooltip__floating`.

package/src/components/Tooltip/Tooltip.css

@@ -0,0 +1 @@
+@layer craftsman-component{.tooltip{--tooltip-bg:var(--gray800)}.tooltip__floating{background-color:var(--tooltip-bg);color:var(--white);padding:calc(var(--w-gutter) * .25) calc(var(--w-gutter) * .5);border-radius:6px;position:relative}.tooltip__floating:before{content:"";background-color:var(--tooltip-bg);width:8px;height:8px;position:absolute;transform:rotate(45deg)}.tooltip__floating[data-placement^=bottom]:before{margin-left:-4px;top:-4px;left:50%}.tooltip__floating[data-placement^=top]:before{margin-left:-4px;bottom:-4px;left:50%}.tooltip__floating[data-placement^=left]:before{margin-top:-4px;top:50%;right:-4px}.tooltip__floating[data-placement^=right]:before{margin-top:-4px;top:50%;left:-4px}}

package/src/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,12 @@
+import { Placement, Strategy } from '@floating-ui/react-dom';
+import { default as React } from 'react';
+export type TooltipProps = {
+    anchor: React.ReactNode;
+    content: React.ReactNode;
+    placement?: Placement;
+    strategy?: Strategy;
+    showContent?: "hover" | "click";
+    anchorStyles?: React.CSSProperties;
+    contentStyles?: React.CSSProperties;
+};
+export declare const Tooltip: React.FC<TooltipProps>;

package/src/components/Tooltip/Tooltip.scss

@@ -0,0 +1,29 @@
+@use "../../styles/utilities/_functions" as u;
+
+@layer craftsman-component {
+    .tooltip {
+        --tooltip-bg: #{u.color("gray800")};
+
+        &__floating {
+            position: relative;
+            background-color: var(--tooltip-bg);
+            color: #{u.color("white")};
+            padding: #{u.width("gutter", 0.25)} #{u.width("gutter", 0.5)};
+            border-radius: 6px;
+
+            &::before {
+                content: '';
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                background-color: var(--tooltip-bg);
+                transform: rotate(45deg);
+            }
+
+            &[data-placement^="bottom"]::before { top: -4px; left: 50%; margin-left: -4px; }
+            &[data-placement^="top"]::before    { bottom: -4px; left: 50%; margin-left: -4px; }
+            &[data-placement^="left"]::before   { right: -4px; top: 50%; margin-top: -4px; }
+            &[data-placement^="right"]::before  { left: -4px; top: 50%; margin-top: -4px; }
+        }
+    }
+}

package/src/components/Tooltip/Tooltip2.esm.js

@@ -0,0 +1,65 @@
+"use client";
+import './Tooltip.css';/* empty css            */
+import e from "clsx";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useEffect as r, useState as i } from "react";
+import { autoUpdate as a, flip as o, offset as s, shift as c, useFloating as l } from "@floating-ui/react-dom";
+//#region src/components/Tooltip/Tooltip.tsx
+var u = (u) => {
+	let { showContent: d = "hover" } = u, [f, p] = i(null), [m, h] = i(null), { floatingStyles: g, placement: _ } = l({
+		placement: u.placement ?? "bottom-start",
+		strategy: u.strategy ?? "absolute",
+		whileElementsMounted: a,
+		middleware: [
+			s(12),
+			o(),
+			c()
+		],
+		elements: {
+			reference: f,
+			floating: m
+		}
+	}), [v, y] = i(!1);
+	return r(() => {
+		if (!v || d !== "click") return;
+		let e = (e) => {
+			f?.contains(e.target) || m?.contains(e.target) || y(!1);
+		};
+		return document.addEventListener("pointerdown", e), () => {
+			document.removeEventListener("pointerdown", e);
+		};
+	}, [
+		v,
+		d,
+		f,
+		m
+	]), /* @__PURE__ */ n("div", {
+		className: e("tooltip"),
+		children: [/* @__PURE__ */ t("div", {
+			className: e("tooltip__anchor"),
+			ref: p,
+			onMouseEnter: () => {
+				d === "hover" && y(!0);
+			},
+			onMouseLeave: () => {
+				d === "hover" && y(!1);
+			},
+			onClick: () => {
+				d === "click" && y((e) => !e);
+			},
+			style: u.anchorStyles,
+			children: u.anchor
+		}), v && /* @__PURE__ */ t("div", {
+			className: e("tooltip__floating"),
+			ref: h,
+			"data-placement": _,
+			style: {
+				...g,
+				...u.contentStyles
+			},
+			children: u.content
+		})]
+	});
+};
+//#endregion
+export { u as Tooltip };

package/src/components/index.d.ts

@@ -1,12 +1,23 @@
 export { Button } from './Button/Button';
 export { Input } from './Input/Input';
-export { InputPassword } from './Input/InputPassword';
+export { InputPassword } from './InputPassword/InputPassword';
 export { Loader } from './Loader/Loader';
-export { RadioButton } from './Input/RadioButton';
-export { Checkbox } from './Input/Checkbox';
-export { Textarea } from './Input/Textarea';
+export { RadioButton } from './RadioButton/RadioButton';
+export { Checkbox } from './Checkbox/Checkbox';
+export { Textarea } from './Textarea/Textarea';
 export { Text } from './Text/Text';
 export { Modal } from './Modal/Modal';
 export { Select } from './Select/Select';
-export { DatePicker } from './Input/DatePicker';
-export { InputPhone } from './Input/InputPhone';
+export { DatePicker } from './DatePicker/DatePicker';
+export { DateRangePicker } from './DateRangePicker/DateRangePicker';
+export { InputPhone } from './InputPhone/InputPhone';
+export { InputNumber } from './InputNumber/InputNumber';
+export { Toggle } from './Toggle/Toggle';
+export { Pagination } from './Pagination/Pagination';
+export { Carousel } from './Carousel/Carousel';
+export { TimePicker } from './TimePicker/TimePicker';
+export { DateTimePicker } from './DateTimePicker/DateTimePicker';
+export { Tooltip } from './Tooltip/Tooltip';
+export { Notice } from './Notice/Notice';
+export { SortableList } from './SortableList/SortableList';
+export * from './Icons';

package/src/styles/global/components/_button.scss

@@ -7,18 +7,20 @@
       background: none;
       color: var(--blue500);
 
-      &:not(:disabled):not(.disabled):hover {
+      &:hover {
           color: var(--teal700);
           background-color: transparent;
           text-decoration: underline;
           cursor: pointer;
+          &.disabled, &:disabled {
+            cursor: not-allowed;
+            color: #{u.color("gray400")};
+          }
       }
   }
 
   %button-styles {
-    --btn-pad-y: #{u.width(gutter, 0.5)};
-    --btn-pad-x: #{u.width(gutter, 0.75)};
-    --btn-border-radius: #{u.width(gutter, 0.75)};
+    --btn-size: 1;
     color: var(--blue600);
     border: none;
     cursor: pointer;
@@ -27,15 +29,25 @@
     align-items: center;
     font-weight: 500;
     transition: 0.125s;
-    padding: var(--btn-pad-y) var(--btn-pad-x);
-    border-radius: var(--btn-border-radius);
+    padding: calc(#{u.width(gutter, 0.5)} * var(--btn-size)) calc(#{u.width(gutter, 0.75)} * var(--btn-size));
+    border-radius: calc(#{u.width(gutter, 0.75)} * var(--btn-size));
+    font-size: max(10px, calc(#{u.width(text)} * var(--btn-size)));
     border: 1px solid var(--blue500);
     background-color: var(--white);
 
-    &:not(:disabled):not(.disabled):hover {
+    &:hover {
       background-color: var(--teal200);
     }
 
+    &.primary {
+      color: var(--white);
+      background-color: var(--blue500);
+
+      &:hover {
+        background-color: var(--blue700);
+      }
+    }
+    
     &.text {
       @extend %text-link;
     }
@@ -43,22 +55,13 @@
     &:disabled,
     &.disabled {
       cursor: not-allowed;
-      border-color: var(--gray200);
-      color: var(--gray400);
+      border-color:  #{u.color("gray200")};
+      color:  #{u.color("gray400")};
 
       &.primary {
-        border-color: var(--gray200);
-        background-color: var(--gray400);
-        color: var(--gray200);
-      }
-    }
-
-    &.primary {
-      color: var(--white);
-      background-color: var(--blue500);
-
-      &:not(:disabled):not(.disabled):hover {
-        background-color: var(--blue700);
+        border-color:  #{u.color("gray200")};
+        background-color:  #{u.color("gray400")};
+        color:  #{u.color("gray200")};
       }
     }
   }

package/src/styles/global/components/_checkbox.scss

@@ -10,8 +10,9 @@
         top: 0.08em;
         margin: 0;
         padding: 0;
-        height: #{u.width("gutter")};
-        width: #{u.width("gutter")};
+        --checkbox-size: 1;
+        height: calc(#{u.width("gutter")} * var(--checkbox-size));
+        width: calc(#{u.width("gutter")} * var(--checkbox-size));
         border-radius: 4px;
         border: 1px solid var(--blue500);
         background: #fff;
@@ -29,8 +30,8 @@
             position: absolute;
             left: 50%;
             top: 45%;
-            width: 5px;
-            height: 8px;
+            width: calc(5px * var(--checkbox-size));
+            height: calc(8px * var(--checkbox-size));
             content: "";
             display: block;
             border: solid white;

package/src/styles/global/components/_input.scss

@@ -11,7 +11,7 @@
 
   %input-base {
     color: var(--text);
-    border-radius: 3px;
+    border-radius: 6px;
     border: 1px solid var(--gray400);
     padding: #{u.width("gutter", 0.5)};
     background-color: var(--white);

package/src/styles/global/components/_radioButton.scss

@@ -9,16 +9,17 @@
         display: inline-grid;
         place-content: center;
         padding: 0;
-        width: #{u.width("gutter")};
-        height: #{u.width("gutter")};
+        --radio-size: 1;
+        width: calc(#{u.width("gutter")} * var(--radio-size));
+        height: calc(#{u.width("gutter")} * var(--radio-size));
         border: 1px solid var(--blue600);
         border-radius: 50%;
         box-sizing: border-box;
 
         &::before {
             content: "";
-            width: #{u.width("gutter", 0.5)};
-            height: #{u.width("gutter", 0.5)};
+            width: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
+            height: calc(#{u.width("gutter", 0.5)} * var(--radio-size));
             border-radius: 50%;
             transform: scale(0);
             transition: transform 0.2s ease;

package/src/styles/global/components/_typography.scss

@@ -11,29 +11,34 @@
 @mixin h1 {
     font-size: #{u.width(text, 3.125)};
     line-height: 1.2;
+    margin: 0 0 #{u.width(gutter)} 0;
 }
 @mixin h2 {
     font-size: #{u.width(text, 2.625)};
     font-weight: 625;
     line-height: 1.1;
+    margin: 0 0 #{u.width(gutter)} 0;
 }
 @mixin h3 {
     font-size: #{u.width(text, 1.625)};
     line-height: 1.1;
+    margin: 0 0 #{u.width(gutter, 0.75)} 0;
 }
 @mixin h4 {
     font-size: #{u.width(text, 1.25)};
     line-height: 1.1;
-    margin: #{u.width(gutter, 0.5)} 0;
+    margin: 0 0 #{u.width(gutter, 0.5)} 0;
 }
 @mixin h5 {
     font-size: var(--w-text);
     line-height: 1.2;
+    margin: 0 0 #{u.width(gutter, 0.5)} 0;
 }
 @mixin h6 {
     font-size: #{u.width(text, 0.875)};
     line-height: 1.2;
     font-weight: 600;
+    margin: 0;
 }
 @mixin p {
     font-style: normal;

package/src/styles/global/globalStyles.scss

@@ -6,7 +6,7 @@
 @use "./components/button";
 @use "./components/input";
 @use "./components/select";
-@layer craftsman-base, craftsman-theme;
+@layer craftsman-base, craftsman-component, craftsman-theme;
 
 @layer craftsman-base {
     :root {
@@ -39,7 +39,9 @@
         margin: 0;
         padding: 0;
     }
-
+    ul {
+        list-style: none;
+    }
     body {
         @include t.body-typography;
         background-color: #fff;
@@ -61,9 +63,7 @@
     }
 
     input {
-        &:not([type="radio"]):not([type="checkbox"]) {
-            @extend %input-base;
-        }
+        @extend %input-base;
         &[type="checkbox"] {
             @extend %checkbox;
         }
@@ -72,6 +72,10 @@
             @extend %radio;
         }
     }
+    figure {
+        margin: 0;
+        
+    }
     textarea {
         @extend %input-base;
     }

package/src/styles/theme/components.esm.js

@@ -1,17 +1,16 @@
-import { htmlTagNames as e } from "./constants.esm.js";
-import { components_exports as t } from "../../../Components.esm.js";
+import { components_exports as e } from "../../../Components.esm.js";
+import { htmlTagNames as t } from "./constants.esm.js";
 //#region src/styles/theme/components.ts
 var n = {
-	input: "input:not([type='radio']):not([type='checkbox'])",
 	checkbox: "input[type='checkbox']",
 	radioButton: "input[type='radio']"
 };
 function r(e) {
 	return e.charAt(0).toLowerCase() + e.slice(1);
 }
-function i(t) {
-	return n[t] || (e.has(t) ? `${t}, .${t}` : `.${t}`);
+function i(e) {
+	return n[e] || (t.has(e) ? `${e}, .${e}` : `.${e}`);
 }
-var a = Object.keys(t).map(r), o = Object.fromEntries(a.map((e) => [e, i(e)]));
+var a = Object.keys(e).map(r), o = Object.fromEntries(a.map((e) => [e, i(e)]));
 //#endregion
 export { o as componentSelectors };

package/src/styles/utilities/_functions.scss

@@ -21,7 +21,7 @@ $width-defaults: (
 
 	@return string.unquote("var(--#{$name})");
 }
-
+// internal function
 @function width-var($name) {
 	@if not map.has-key($width-defaults, $name) {
 		@error "Unknown width key `#{$name}`.";
@@ -59,7 +59,7 @@ $width-defaults: (
 
 	@return string.unquote("calc(#{$value} * #{$multiplier})");
 }
-
+// internal function
 @function media($bp) {
 	@if $bp == mobile {
 		@return string.unquote("(min-width: 0px)");

package/src/styles/utilities/_placeholders.scss

@@ -0,0 +1,6 @@
+
+%border-box {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}

package/src/styles/utilities/layout.esm.js

@@ -1,7 +1,7 @@
-import { defaultWidths as e } from "./constants.esm.js";
-import { LayoutWidthsSchema as t } from "../../utilities/types.esm.js";
+import { LayoutWidthsSchema as e } from "../../utilities/types.esm.js";
+import { defaultWidths as t } from "./constants.esm.js";
 //#region src/styles/utilities/layout.ts
-var n = Object.fromEntries(t.options.map((t) => [t, `var(--w-${t}, ${e[t]}px)`])), r = {
+var n = Object.fromEntries(e.options.map((e) => [e, `var(--w-${e}, ${t[e]}px)`])), r = {
 	get mobile() {
 		return "(min-width: 0px)";
 	},