@motir/design-system 0.4.2 → 0.4.3
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.
|
@@ -28,7 +28,7 @@ function Switch({
|
|
|
28
28
|
onClick: () => onCheckedChange(!checked),
|
|
29
29
|
className: cn(
|
|
30
30
|
"relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
31
|
-
checked ? "border-(--el-switch-on-border) bg-(--el-switch-on)" : "border-(--el-border
|
|
31
|
+
checked ? "border-(--el-switch-on-border) bg-(--el-switch-on)" : "border-(--el-switch-off-border) bg-(--el-muted)",
|
|
32
32
|
className
|
|
33
33
|
),
|
|
34
34
|
children: /* @__PURE__ */ jsx(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Switch.tsx"],"names":[],"mappings":";;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACgBO,SAAS,MAAA,CAAO;AAAA,EACrB,OAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,iBAAA,EAAmB;AACrB,CAAA,EAAgB;AACd,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,QAAA;AAAA,MACL,EAAA;AAAA,MACA,cAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,cAAA;AAAA,MACjB,QAAA;AAAA,MACA,OAAA,EAAS,MAAM,eAAA,CAAgB,CAAC,OAAO,CAAA;AAAA,MACvC,SAAA,EAAW,EAAA;AAAA,QACT,kOAAA;AAAA,QACA,UACI,oDAAA,GACA,
|
|
1
|
+
{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Switch.tsx"],"names":[],"mappings":";;;;;AAcO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACgBO,SAAS,MAAA,CAAO;AAAA,EACrB,OAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,iBAAA,EAAmB;AACrB,CAAA,EAAgB;AACd,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,IAAA,EAAK,QAAA;AAAA,MACL,EAAA;AAAA,MACA,cAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAY,SAAA;AAAA,MACZ,iBAAA,EAAiB,cAAA;AAAA,MACjB,QAAA;AAAA,MACA,OAAA,EAAS,MAAM,eAAA,CAAgB,CAAC,OAAO,CAAA;AAAA,MACvC,SAAA,EAAW,EAAA;AAAA,QACT,kOAAA;AAAA,QACA,UACI,oDAAA,GACA,iDAAA;AAAA,QACJ;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAW,IAAA;AAAA,UACX,SAAA,EAAW,EAAA;AAAA,YACT,kFAAA;AAAA,YACA,UACI,0CAAA,GACA;AAAA;AACN;AAAA;AACF;AAAA,GACF;AAEJ","file":"Switch.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","import { cn } from '../../utils/cn';\n\n/**\n * Switch — a sliding on/off toggle (`role=\"switch\"`), keyboard-operable.\n *\n * The shared primitive the design system names (notifications preferences\n * matrix, automation rule enable, …). Colour flows through `--el-*`; the knob +\n * track are genuinely-circular (`rounded-full`), the shape-rule carve-out for a\n * pill control. Always pass an `aria-label` (or wire an external `<label>` via\n * `id`) so the toggle is screen-reader-legible — a bare switch announces no\n * purpose.\n *\n * @example\n * <Switch checked={on} onCheckedChange={setOn} aria-label=\"Email for Mentioned\" />\n */\nexport interface SwitchProps {\n checked: boolean;\n onCheckedChange: (next: boolean) => void;\n disabled?: boolean;\n /** Accessible name — required unless an external `<label htmlFor=id>` exists. */\n 'aria-label'?: string;\n /**\n * Accessible name by reference — the id of a visible label element. Use this\n * instead of `aria-label` when the label already renders on screen (so the\n * name stays in sync with the visible text). One of `aria-label` /\n * `aria-labelledby` should be set, else the switch announces no purpose.\n */\n 'aria-labelledby'?: string;\n id?: string;\n className?: string;\n}\n\nexport function Switch({\n checked,\n onCheckedChange,\n disabled,\n id,\n className,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n}: SwitchProps) {\n return (\n <button\n type=\"button\"\n role=\"switch\"\n id={id}\n aria-checked={checked}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n disabled={disabled}\n onClick={() => onCheckedChange(!checked)}\n className={cn(\n 'relative inline-flex h-5 w-9 shrink-0 items-center rounded-full border transition-colors focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n checked\n ? 'border-(--el-switch-on-border) bg-(--el-switch-on)'\n : 'border-(--el-switch-off-border) bg-(--el-muted)',\n className,\n )}\n >\n <span\n aria-hidden\n className={cn(\n 'inline-block size-3.5 rounded-full shadow-(--shadow-subtle) transition-transform',\n checked\n ? 'translate-x-[18px] bg-(--el-switch-knob)'\n : 'translate-x-0.5 bg-(--el-switch-knob-off)',\n )}\n />\n </button>\n );\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@motir/design-system",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "Motir's 3-axis design system (colour · style · type): distributable token CSS, the axis registries, the theme-apply API, and framework-agnostic React primitives. Shared by motir-core and planner-scaffolded products.",
|
|
5
5
|
"license": "GPL-3.0-only",
|
|
6
6
|
"repository": {
|
package/theme.css
CHANGED
|
@@ -3553,6 +3553,14 @@
|
|
|
3553
3553
|
twenty palette x theme pairs. tests/theme/switchStateContrast.test.ts
|
|
3554
3554
|
(MOTIR-5715). */
|
|
3555
3555
|
--el-switch-on-border: var(--color-primary); /* the ON track's edge, on --el-page-bg */
|
|
3556
|
+
/* The OFF track's OUTER EDGE, the same measurement for the other state. It was
|
|
3557
|
+
--el-border-strong, a generic surface border, at 1.52-2.41:1 on
|
|
3558
|
+
--el-page-bg in EVERY palette and theme. That token is also the input and
|
|
3559
|
+
secondary-button border, so it keeps its mapping and the Switch gets its own:
|
|
3560
|
+
the muted-foreground grey, which is the OFF knob's ink, so the outline and
|
|
3561
|
+
the knob read as one control. Lowest 4.54:1 across all twenty palette x
|
|
3562
|
+
theme pairs. tests/theme/switchStateContrast.test.ts (MOTIR-5725). */
|
|
3563
|
+
--el-switch-off-border: var(--color-muted-foreground); /* the OFF track's edge, on --el-page-bg */
|
|
3556
3564
|
/* The two knob inks are a PAIR with the track under them, and are measured as
|
|
3557
3565
|
one (WCAG 1.4.11, 3:1 — the knob's position IS the switch's state). The
|
|
3558
3566
|
OFF knob used to share --el-switch-knob and sat at 1.01:1 on --el-muted in
|