@5voltfx/design-system 0.1.1 → 0.2.0

package/dist/components/FormField/FormField.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Wraps a single form control with a label plus optional help/error text, and
+ * wires up accessibility: it generates an id, links the label via `htmlFor`,
+ * connects help/error text through `aria-describedby`, and sets `aria-invalid`
+ * + the control's `invalid` styling when `error` is present. The control is
+ * passed as the only child (Input, Textarea, Select, etc.).
+ *
+ * @param {object} props
+ * @param {import("react").ReactNode} [props.label]
+ * @param {import("react").ReactNode} [props.help] - Hint text below the control.
+ * @param {import("react").ReactNode} [props.error] - Error text; also marks the control invalid.
+ * @param {boolean} [props.required]
+ * @param {string} [props.htmlFor] - Override the auto-generated control id.
+ * @param {import("react").ReactElement} props.children - The control element.
+ * @param {string} [props.className]
+ * @returns {import("react").ReactElement}
+ */
+export function FormField({ label, help, error, required, htmlFor, children, className, ...rest }: {
+    label?: import("react").ReactNode;
+    help?: import("react").ReactNode;
+    error?: import("react").ReactNode;
+    required?: boolean | undefined;
+    htmlFor?: string | undefined;
+    children: import("react").ReactElement;
+    className?: string | undefined;
+}): import("react").ReactElement;
+//# sourceMappingURL=FormField.d.ts.map

package/dist/components/FormField/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.jsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AACH,mGATG;IAA0C,KAAK,GAAvC,OAAO,OAAO,EAAE,SAAS;IACS,IAAI,GAAtC,OAAO,OAAO,EAAE,SAAS;IACS,KAAK,GAAvC,OAAO,OAAO,EAAE,SAAS;IACT,QAAQ;IACT,OAAO;IACc,QAAQ,EAA5C,OAAO,OAAO,EAAE,YAAY;IACb,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,YAAY,CAsDxC"}

package/dist/components/FormField/index.css

@@ -0,0 +1,31 @@
+/* src/components/Label/Label.css */
+.ds-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-font-0);
+}
+.ds-label__required {
+  color: var(--ds-color-danger);
+}
+
+/* src/components/FormField/FormField.css */
+.ds-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-2);
+}
+.ds-form-field__help {
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  color: var(--ds-color-font-1);
+}
+.ds-form-field__error {
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  color: var(--ds-color-danger);
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/FormField/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Label/Label.css","../../../src/components/FormField/FormField.css"],"sourcesContent":[".ds-label {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ds-space-1);\n  font-family: var(--ds-font-body);\n  font-size: var(--ds-font-size-100);\n  font-weight: var(--ds-font-weight-medium);\n  color: var(--ds-color-font-0);\n}\n\n.ds-label__required {\n  color: var(--ds-color-danger);\n}\n",".ds-form-field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ds-space-2);\n}\n\n.ds-form-field__help {\n  font-family: var(--ds-font-body);\n  font-size: var(--ds-font-size-100);\n  color: var(--ds-color-font-1);\n}\n\n.ds-form-field__error {\n  font-family: var(--ds-font-body);\n  font-size: var(--ds-font-size-100);\n  color: var(--ds-color-danger);\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACb;;;ACZA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK,IAAI;AACX;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACb;AAEA,CAAC;AACC,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACb;","names":[]}

package/dist/components/FormField/index.d.ts

@@ -0,0 +1,2 @@
+export { FormField } from "./FormField.jsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FormField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/index.js"],"names":[],"mappings":""}

package/dist/components/FormField/index.js

@@ -0,0 +1,8 @@
+import {
+  FormField
+} from "../../chunk-LPEUQ2DE.js";
+import "../../chunk-VRGTUKSJ.js";
+export {
+  FormField
+};
+//# sourceMappingURL=index.js.map

package/dist/components/FormField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Generic header shell with brand/nav/actions slots, so each site's
+ * bespoke chrome (song-chart's auth-aware menu + fullscreen toggle,
+ * mattwelker.com's audio-loop toggle + Venmo link, 5voltfx.com's plain
+ * logo-with-text-fallback) stays app-specific and is passed in rather
+ * than encoded into this component.
+ */
+export function Header({ brand, brandHref, links, actions, className, }: {
+    brand: any;
+    brandHref?: string | undefined;
+    links?: never[] | undefined;
+    actions: any;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Header.d.ts.map

package/dist/components/Header/Header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.jsx"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH;;;;;;gCAkBC"}

package/dist/components/Header/index.d.ts

@@ -0,0 +1,2 @@
+export { Header } from "./Header.jsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.js"],"names":[],"mappings":""}

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Text-like input. Controlled or uncontrolled — all native <input> props pass
+ * through via `...rest` (value/defaultValue, onChange, type, placeholder, …).
+ *
+ * @param {object} props
+ * @param {"sm"|"md"|"lg"} [props.size] - Control height/padding. Default "md".
+ * @param {boolean} [props.invalid] - Applies error styling + aria-invalid.
+ * @param {string} [props.className]
+ * @returns {import("react").ReactElement}
+ */
+export function Input({ size, invalid, className, ...rest }: {
+    size?: "md" | "sm" | "lg" | undefined;
+    invalid?: boolean | undefined;
+    className?: string | undefined;
+}): import("react").ReactElement;
+//# sourceMappingURL=Input.d.ts.map

package/dist/components/Input/Input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.jsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,6DALG;IAA+B,IAAI;IACX,OAAO;IACR,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,YAAY,CAexC"}

package/dist/components/Input/index.css

@@ -0,0 +1,45 @@
+/* src/components/Input/Input.css */
+.ds-input {
+  display: block;
+  width: 100%;
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  line-height: var(--ds-line-height-normal);
+  color: var(--ds-color-font-0);
+  background-color: var(--ds-color-field-bg);
+  border: 1px solid var(--ds-color-field-border);
+  border-radius: var(--ds-radius-md);
+  transition: border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard), box-shadow var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-input::placeholder {
+  color: var(--ds-color-font-1);
+  opacity: 1;
+}
+.ds-input--sm {
+  padding: var(--ds-space-2) var(--ds-space-3);
+  font-size: var(--ds-font-size-100);
+}
+.ds-input--md {
+  padding: var(--ds-space-3) var(--ds-space-4);
+}
+.ds-input--lg {
+  padding: var(--ds-space-4) var(--ds-space-5);
+  font-size: var(--ds-font-size-300);
+}
+.ds-input:focus-visible {
+  outline: none;
+  border-color: var(--ds-color-focus-ring);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-focus-ring) 30%, transparent);
+}
+.ds-input--invalid {
+  border-color: var(--ds-color-danger);
+}
+.ds-input--invalid:focus-visible {
+  border-color: var(--ds-color-danger);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-color-danger) 30%, transparent);
+}
+.ds-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/Input/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Input/Input.css"],"sourcesContent":[".ds-input {\n  display: block;\n  width: 100%;\n  font-family: var(--ds-font-body);\n  font-size: var(--ds-font-size-200);\n  line-height: var(--ds-line-height-normal);\n  color: var(--ds-color-font-0);\n  background-color: var(--ds-color-field-bg);\n  border: 1px solid var(--ds-color-field-border);\n  border-radius: var(--ds-radius-md);\n  transition:\n    border-color var(--ds-motion-duration-base) var(--ds-motion-ease-standard),\n    box-shadow var(--ds-motion-duration-base) var(--ds-motion-ease-standard);\n}\n\n.ds-input::placeholder {\n  color: var(--ds-color-font-1);\n  opacity: 1;\n}\n\n.ds-input--sm {\n  padding: var(--ds-space-2) var(--ds-space-3);\n  font-size: var(--ds-font-size-100);\n}\n\n.ds-input--md {\n  padding: var(--ds-space-3) var(--ds-space-4);\n}\n\n.ds-input--lg {\n  padding: var(--ds-space-4) var(--ds-space-5);\n  font-size: var(--ds-font-size-300);\n}\n\n.ds-input:focus-visible {\n  outline: none;\n  border-color: var(--ds-color-focus-ring);\n  box-shadow: 0 0 0 3px\n    color-mix(in srgb, var(--ds-color-focus-ring) 30%, transparent);\n}\n\n.ds-input--invalid {\n  border-color: var(--ds-color-danger);\n}\n\n.ds-input--invalid:focus-visible {\n  border-color: var(--ds-color-danger);\n  box-shadow: 0 0 0 3px\n    color-mix(in srgb, var(--ds-color-danger) 30%, transparent);\n}\n\n.ds-input:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,SAAO;AACP,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,oBAAkB,IAAI;AACtB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cACE,aAAa,IAAI,2BAA2B,IAAI,0BAA0B,EAC1E,WAAW,IAAI,2BAA2B,IAAI;AAClD;AAEA,CAfC,QAeQ;AACP,SAAO,IAAI;AACX,WAAS;AACX;AAEA,CAAC;AACC,WAAS,IAAI,cAAc,IAAI;AAC/B,aAAW,IAAI;AACjB;AAEA,CAAC;AACC,WAAS,IAAI,cAAc,IAAI;AACjC;AAEA,CAAC;AACC,WAAS,IAAI,cAAc,IAAI;AAC/B,aAAW,IAAI;AACjB;AAEA,CAlCC,QAkCQ;AACP,WAAS;AACT,gBAAc,IAAI;AAClB,cAAY,EAAE,EAAE,EAAE,IAChB,UAAU,GAAG,IAAI,EAAE,IAAI,uBAAuB,GAAG,EAAE;AACvD;AAEA,CAAC;AACC,gBAAc,IAAI;AACpB;AAEA,CAJC,iBAIiB;AAChB,gBAAc,IAAI;AAClB,cAAY,EAAE,EAAE,EAAE,IAChB,UAAU,GAAG,IAAI,EAAE,IAAI,mBAAmB,GAAG,EAAE;AACnD;AAEA,CAnDC,QAmDQ;AACP,WAAS;AACT,UAAQ;AACV;","names":[]}

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from "./Input.jsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Input/index.js"],"names":[],"mappings":""}

package/dist/components/Input/index.js

@@ -0,0 +1,7 @@
+import {
+  Input
+} from "../../chunk-R42A3ZCY.js";
+export {
+  Input
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/Label/Label.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Form label primitive. Used standalone or rendered internally by FormField.
+ *
+ * @param {object} props
+ * @param {import("react").ReactNode} [props.children]
+ * @param {boolean} [props.required] - Appends a required marker.
+ * @param {string} [props.className]
+ * @returns {import("react").ReactElement}
+ */
+export function Label({ required, className, children, ...rest }: {
+    children?: import("react").ReactNode;
+    required?: boolean | undefined;
+    className?: string | undefined;
+}): import("react").ReactElement;
+//# sourceMappingURL=Label.d.ts.map

package/dist/components/Label/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../src/components/Label/Label.jsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,kEALG;IAA0C,QAAQ,GAA1C,OAAO,OAAO,EAAE,SAAS;IACT,QAAQ;IACT,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,YAAY,CAgBxC"}

package/dist/components/Label/index.css

@@ -0,0 +1,14 @@
+/* src/components/Label/Label.css */
+.ds-label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-100);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-font-0);
+}
+.ds-label__required {
+  color: var(--ds-color-danger);
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/Label/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Label/Label.css"],"sourcesContent":[".ds-label {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ds-space-1);\n  font-family: var(--ds-font-body);\n  font-size: var(--ds-font-size-100);\n  font-weight: var(--ds-font-weight-medium);\n  color: var(--ds-color-font-0);\n}\n\n.ds-label__required {\n  color: var(--ds-color-danger);\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACb;AAEA,CAAC;AACC,SAAO,IAAI;AACb;","names":[]}

package/dist/components/Label/index.d.ts

@@ -0,0 +1,2 @@
+export { Label } from "./Label.jsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.js"],"names":[],"mappings":""}

package/dist/components/Label/index.js

@@ -0,0 +1,8 @@
+import "../../chunk-CT2TMR44.js";
+import {
+  Label
+} from "../../chunk-VRGTUKSJ.js";
+export {
+  Label
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Label/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/Layout/Container.d.ts

@@ -0,0 +1,6 @@
+export function Container({ as: Component, className, ...rest }: {
+    [x: string]: any;
+    as?: string | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Container.d.ts.map

package/dist/components/Layout/Container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Container.jsx"],"names":[],"mappings":"AAEA;;;;gCAOC"}

package/dist/components/Layout/Grid.d.ts

@@ -0,0 +1,9 @@
+export function Grid({ as: Component, columns, gap, className, style, ...rest }: {
+    [x: string]: any;
+    as?: string | undefined;
+    columns?: number | undefined;
+    gap?: string | undefined;
+    className?: string | undefined;
+    style: any;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Grid.d.ts.map

package/dist/components/Layout/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Grid.jsx"],"names":[],"mappings":"AAEA;;;;;;;gCAmBC"}

package/dist/components/Layout/Stack.d.ts

@@ -0,0 +1,10 @@
+export function Stack({ as: Component, gap, direction, align, className, style, ...rest }: {
+    [x: string]: any;
+    as?: string | undefined;
+    gap?: string | undefined;
+    direction?: string | undefined;
+    align: any;
+    className?: string | undefined;
+    style: any;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/components/Layout/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/Stack.jsx"],"names":[],"mappings":"AAEA;;;;;;;;gCAqBC"}

package/dist/components/Layout/index.d.ts

@@ -0,0 +1,4 @@
+export { Container } from "./Container.jsx";
+export { Stack } from "./Stack.jsx";
+export { Grid } from "./Grid.jsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/index.js"],"names":[],"mappings":""}

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @typedef {object} MenuItem
+ * @property {import("react").ReactNode} label
+ * @property {() => void} [onSelect]
+ * @property {boolean} [disabled]
+ */
+/**
+ * Dropdown menu: a trigger button that toggles a popover list. Closes on
+ * outside click and Escape; Up/Down arrows move a roving focus between items,
+ * Enter/Space activates. Uses role="menu"/"menuitem".
+ *
+ * @param {object} props
+ * @param {import("react").ReactNode} props.trigger - Trigger button content.
+ * @param {MenuItem[]} props.items
+ * @param {"start"|"end"} [props.align] - Which edge the menu aligns to. Default "start".
+ * @param {string} [props.className]
+ * @returns {import("react").ReactElement}
+ */
+export function Menu({ trigger, items, align, className }: {
+    trigger: import("react").ReactNode;
+    items: MenuItem[];
+    align?: "start" | "end" | undefined;
+    className?: string | undefined;
+}): import("react").ReactElement;
+export type MenuItem = {
+    label: import("react").ReactNode;
+    onSelect?: (() => void) | undefined;
+    disabled?: boolean | undefined;
+};
+//# sourceMappingURL=Menu.d.ts.map

package/dist/components/Menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/Menu.jsx"],"names":[],"mappings":"AAGA;;;;;GAKG;AAEH;;;;;;;;;;;GAWG;AACH,2DANG;IAAyC,OAAO,EAAxC,OAAO,OAAO,EAAE,SAAS;IACP,KAAK,EAAvB,QAAQ,EAAE;IACY,KAAK;IACZ,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,YAAY,CAiIxC;;WAhJa,OAAO,OAAO,EAAE,SAAS;sBACnB,IAAI"}

package/dist/components/Menu/index.css

@@ -0,0 +1,77 @@
+/* src/components/Menu/Menu.css */
+.ds-menu {
+  position: relative;
+  display: inline-block;
+}
+.ds-menu__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-2);
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-color-font-0);
+  background-color: var(--ds-color-field-bg);
+  border: 1px solid var(--ds-color-field-border);
+  border-radius: var(--ds-radius-md);
+  cursor: pointer;
+}
+.ds-menu__trigger:focus-visible {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: 2px;
+}
+.ds-menu__list {
+  position: absolute;
+  top: calc(100% + var(--ds-space-2));
+  z-index: var(--ds-z-dropdown);
+  min-width: 12rem;
+  margin: 0;
+  padding: var(--ds-space-2);
+  list-style: none;
+  background-color: var(--ds-color-bg-1);
+  border: 1px solid var(--ds-color-bw-1);
+  border-radius: var(--ds-radius-md);
+  box-shadow: var(--ds-shadow-md);
+  animation: ds-menu-open var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
+}
+.ds-menu__list--start {
+  left: 0;
+}
+.ds-menu__list--end {
+  right: 0;
+}
+.ds-menu__item {
+  display: block;
+  width: 100%;
+  padding: var(--ds-space-2) var(--ds-space-3);
+  text-align: left;
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-font-size-200);
+  color: var(--ds-color-font-0);
+  background: transparent;
+  border: none;
+  border-radius: var(--ds-radius-sm);
+  cursor: pointer;
+}
+.ds-menu__item:hover:not(:disabled),
+.ds-menu__item:focus-visible {
+  background-color: var(--ds-color-bw-1);
+  outline: none;
+}
+.ds-menu__item:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@keyframes ds-menu-open {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-menu__list {
+    animation: none;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/Menu/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Menu/Menu.css"],"sourcesContent":[".ds-menu {\n  position: relative;\n  display: inline-block;\n}\n\n.ds-menu__trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ds-space-2);\n  padding: var(--ds-space-3) var(--ds-space-4);\n  font-family: var(--ds-font-body);\n  font-size: var(--ds-font-size-200);\n  font-weight: var(--ds-font-weight-medium);\n  color: var(--ds-color-font-0);\n  background-color: var(--ds-color-field-bg);\n  border: 1px solid var(--ds-color-field-border);\n  border-radius: var(--ds-radius-md);\n  cursor: pointer;\n}\n\n.ds-menu__trigger:focus-visible {\n  outline: 2px solid var(--ds-color-focus-ring);\n  outline-offset: 2px;\n}\n\n.ds-menu__list {\n  position: absolute;\n  top: calc(100% + var(--ds-space-2));\n  z-index: var(--ds-z-dropdown);\n  min-width: 12rem;\n  margin: 0;\n  padding: var(--ds-space-2);\n  list-style: none;\n  background-color: var(--ds-color-bg-1);\n  border: 1px solid var(--ds-color-bw-1);\n  border-radius: var(--ds-radius-md);\n  box-shadow: var(--ds-shadow-md);\n  animation: ds-menu-open var(--ds-motion-duration-fast)\n    var(--ds-motion-ease-standard);\n}\n\n.ds-menu__list--start {\n  left: 0;\n}\n.ds-menu__list--end {\n  right: 0;\n}\n\n.ds-menu__item {\n  display: block;\n  width: 100%;\n  padding: var(--ds-space-2) var(--ds-space-3);\n  text-align: left;\n  font-family: var(--ds-font-body);\n  font-size: var(--ds-font-size-200);\n  color: var(--ds-color-font-0);\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-radius-sm);\n  cursor: pointer;\n}\n\n.ds-menu__item:hover:not(:disabled),\n.ds-menu__item:focus-visible {\n  background-color: var(--ds-color-bw-1);\n  outline: none;\n}\n\n.ds-menu__item:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n@keyframes ds-menu-open {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-menu__list {\n    animation: none;\n  }\n}\n"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,OAAK,IAAI;AACT,WAAS,IAAI,cAAc,IAAI;AAC/B,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACjB,SAAO,IAAI;AACX,oBAAkB,IAAI;AACtB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,UAAQ;AACV;AAEA,CAfC,gBAegB;AACf,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAEA,CAAC;AACC,YAAU;AACV,OAAK,KAAK,KAAK,EAAE,IAAI;AACrB,WAAS,IAAI;AACb,aAAW;AACX,UAAQ;AACR,WAAS,IAAI;AACb,cAAY;AACZ,oBAAkB,IAAI;AACtB,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cAAY,IAAI;AAChB,aAAW,aAAa,IAAI,2BAC1B,IAAI;AACR;AAEA,CAAC;AACC,QAAM;AACR;AACA,CAAC;AACC,SAAO;AACT;AAEA,CAAC;AACC,WAAS;AACT,SAAO;AACP,WAAS,IAAI,cAAc,IAAI;AAC/B,cAAY;AACZ,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,SAAO,IAAI;AACX,cAAY;AACZ,UAAQ;AACR,iBAAe,IAAI;AACnB,UAAQ;AACV;AAEA,CAdC,aAca,MAAM,KAAK;AACzB,CAfC,aAea;AACZ,oBAAkB,IAAI;AACtB,WAAS;AACX;AAEA,CApBC,aAoBa;AACZ,WAAS;AACT,UAAQ;AACV;AAEA,WApCa;AAqCX;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,QAAO,wBAAyB;AAC9B,GAxDD;AAyDG,eAAW;AACb;AACF;","names":[]}

package/dist/components/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export { Menu } from "./Menu.jsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.js"],"names":[],"mappings":""}

package/dist/components/Menu/index.js

@@ -0,0 +1,7 @@
+import {
+  Menu
+} from "../../chunk-LY5MPGW2.js";
+export {
+  Menu
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Accessible dialog rendered in a portal on document.body. Handles focus trap,
+ * Escape-to-close, backdrop click, body scroll lock, and returns focus to the
+ * element that was focused before it opened. Nothing renders when `open` is
+ * false.
+ *
+ * @param {object} props
+ * @param {boolean} props.open
+ * @param {() => void} props.onClose
+ * @param {import("react").ReactNode} [props.title]
+ * @param {"sm"|"md"|"lg"} [props.size] - Panel max-width. Default "md".
+ * @param {import("react").ReactNode} [props.children]
+ * @param {string} [props.className]
+ * @returns {import("react").ReactPortal | null}
+ */
+export function Modal({ open, onClose, title, size, children, className, }: {
+    open: boolean;
+    onClose: () => void;
+    title?: import("react").ReactNode;
+    size?: "md" | "sm" | "lg" | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+}): import("react").ReactPortal | null;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.jsx"],"names":[],"mappings":"AAOA;;;;;;;;;;;;;;GAcG;AACH,4EARG;IAAuB,IAAI,EAAnB,OAAO;IACW,OAAO,EAAzB,MAAM,IAAI;IACwB,KAAK,GAAvC,OAAO,OAAO,EAAE,SAAS;IACF,IAAI;IACO,QAAQ,GAA1C,OAAO,OAAO,EAAE,SAAS;IACV,SAAS;CAChC,GAAU,OAAO,OAAO,EAAE,WAAW,GAAG,IAAI,CAsG9C"}

package/dist/components/Modal/index.css

@@ -0,0 +1,101 @@
+/* src/components/Modal/Modal.css */
+.ds-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--ds-space-4);
+}
+.ds-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--ds-z-overlay);
+  background-color: color-mix(in srgb, var(--ds-color-bw-0) 60%, transparent);
+  animation: ds-modal-fade var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-modal__panel {
+  position: relative;
+  z-index: var(--ds-z-modal);
+  width: 100%;
+  max-height: calc(100vh - 2 * var(--ds-space-6));
+  overflow-y: auto;
+  background-color: var(--ds-color-bg-1);
+  color: var(--ds-color-font-0);
+  border: 1px solid var(--ds-color-bw-1);
+  border-radius: var(--ds-radius-lg);
+  box-shadow: var(--ds-shadow-lg);
+  animation: ds-modal-rise var(--ds-motion-duration-base) var(--ds-motion-ease-standard);
+}
+.ds-modal__panel--sm {
+  max-width: 24rem;
+}
+.ds-modal__panel--md {
+  max-width: 34rem;
+}
+.ds-modal__panel--lg {
+  max-width: 48rem;
+}
+.ds-modal__panel:focus-visible {
+  outline: none;
+}
+.ds-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ds-space-4);
+  padding: var(--ds-space-5) var(--ds-space-5) 0;
+}
+.ds-modal__title {
+  margin: 0;
+  font-family: var(--ds-font-body);
+  font-weight: var(--ds-font-weight-bold);
+  font-size: var(--ds-font-size-400);
+  line-height: var(--ds-line-height-tight);
+}
+.ds-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+  font-size: var(--ds-font-size-400);
+  line-height: 1;
+  color: var(--ds-color-font-1);
+  background: transparent;
+  border: none;
+  border-radius: var(--ds-radius-pill);
+  cursor: pointer;
+  transition: background-color var(--ds-motion-duration-fast) var(--ds-motion-ease-standard);
+}
+.ds-modal__close:hover {
+  background-color: var(--ds-color-bw-1);
+  color: var(--ds-color-font-0);
+}
+.ds-modal__close:focus-visible {
+  outline: 2px solid var(--ds-color-focus-ring);
+  outline-offset: 2px;
+}
+.ds-modal__body {
+  padding: var(--ds-space-5);
+}
+@keyframes ds-modal-fade {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes ds-modal-rise {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-modal__backdrop,
+  .ds-modal__panel {
+    animation: none;
+  }
+}
+/*# sourceMappingURL=index.css.map */

package/dist/components/Modal/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Modal/Modal.css"],"sourcesContent":[".ds-modal {\n  position: fixed;\n  inset: 0;\n  z-index: var(--ds-z-modal);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--ds-space-4);\n}\n\n.ds-modal__backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: var(--ds-z-overlay);\n  background-color: color-mix(in srgb, var(--ds-color-bw-0) 60%, transparent);\n  animation: ds-modal-fade var(--ds-motion-duration-base)\n    var(--ds-motion-ease-standard);\n}\n\n.ds-modal__panel {\n  position: relative;\n  z-index: var(--ds-z-modal);\n  width: 100%;\n  max-height: calc(100vh - 2 * var(--ds-space-6));\n  overflow-y: auto;\n  background-color: var(--ds-color-bg-1);\n  color: var(--ds-color-font-0);\n  border: 1px solid var(--ds-color-bw-1);\n  border-radius: var(--ds-radius-lg);\n  box-shadow: var(--ds-shadow-lg);\n  animation: ds-modal-rise var(--ds-motion-duration-base)\n    var(--ds-motion-ease-standard);\n}\n\n.ds-modal__panel--sm {\n  max-width: 24rem;\n}\n.ds-modal__panel--md {\n  max-width: 34rem;\n}\n.ds-modal__panel--lg {\n  max-width: 48rem;\n}\n\n.ds-modal__panel:focus-visible {\n  outline: none;\n}\n\n.ds-modal__header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--ds-space-4);\n  padding: var(--ds-space-5) var(--ds-space-5) 0;\n}\n\n.ds-modal__title {\n  margin: 0;\n  font-family: var(--ds-font-body);\n  font-weight: var(--ds-font-weight-bold);\n  font-size: var(--ds-font-size-400);\n  line-height: var(--ds-line-height-tight);\n}\n\n.ds-modal__close {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2rem;\n  height: 2rem;\n  flex-shrink: 0;\n  font-size: var(--ds-font-size-400);\n  line-height: 1;\n  color: var(--ds-color-font-1);\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-radius-pill);\n  cursor: pointer;\n  transition: background-color var(--ds-motion-duration-fast)\n    var(--ds-motion-ease-standard);\n}\n\n.ds-modal__close:hover {\n  background-color: var(--ds-color-bw-1);\n  color: var(--ds-color-font-0);\n}\n\n.ds-modal__close:focus-visible {\n  outline: 2px solid var(--ds-color-focus-ring);\n  outline-offset: 2px;\n}\n\n.ds-modal__body {\n  padding: var(--ds-space-5);\n}\n\n@keyframes ds-modal-fade {\n  from {\n    opacity: 0;\n  }\n}\n\n@keyframes ds-modal-rise {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ds-modal__backdrop,\n  .ds-modal__panel {\n    animation: none;\n  }\n}\n"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS,IAAI;AACb,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,WAAS,IAAI;AACf;AAEA,CAAC;AACC,YAAU;AACV,SAAO;AACP,WAAS,IAAI;AACb,oBAAkB,UAAU,GAAG,IAAI,EAAE,IAAI,iBAAiB,GAAG,EAAE;AAC/D,aAAW,cAAc,IAAI,2BAC3B,IAAI;AACR;AAEA,CAAC;AACC,YAAU;AACV,WAAS,IAAI;AACb,SAAO;AACP,cAAY,KAAK,MAAM,EAAE,EAAE,EAAE,IAAI;AACjC,cAAY;AACZ,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACX,UAAQ,IAAI,MAAM,IAAI;AACtB,iBAAe,IAAI;AACnB,cAAY,IAAI;AAChB,aAAW,cAAc,IAAI,2BAC3B,IAAI;AACR;AAEA,CAAC;AACC,aAAW;AACb;AACA,CAAC;AACC,aAAW;AACb;AACA,CAAC;AACC,aAAW;AACb;AAEA,CAzBC,eAyBe;AACd,WAAS;AACX;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,OAAK,IAAI;AACT,WAAS,IAAI,cAAc,IAAI,cAAc;AAC/C;AAEA,CAAC;AACC,UAAQ;AACR,eAAa,IAAI;AACjB,eAAa,IAAI;AACjB,aAAW,IAAI;AACf,eAAa,IAAI;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,mBAAiB;AACjB,SAAO;AACP,UAAQ;AACR,eAAa;AACb,aAAW,IAAI;AACf,eAAa;AACb,SAAO,IAAI;AACX,cAAY;AACZ,UAAQ;AACR,iBAAe,IAAI;AACnB,UAAQ;AACR,cAAY,iBAAiB,IAAI,2BAC/B,IAAI;AACR;AAEA,CAlBC,eAkBe;AACd,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACb;AAEA,CAvBC,eAuBe;AACd,WAAS,IAAI,MAAM,IAAI;AACvB,kBAAgB;AAClB;AAEA,CAAC;AACC,WAAS,IAAI;AACf;AAEA,WAjFa;AAkFX;AACE,aAAS;AACX;AACF;AAEA,WAxEa;AAyEX;AACE,aAAS;AACT,eAAW,WAAW;AACxB;AACF;AAEA,QAAO,wBAAyB;AAC9B,GApGD;AAAA,EAqGC,CA5FD;AA6FG,eAAW;AACb;AACF;","names":[]}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal.jsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.js"],"names":[],"mappings":""}

package/dist/components/Modal/index.js

@@ -0,0 +1,7 @@
+import {
+  Modal
+} from "../../chunk-HLP2MPQ6.js";
+export {
+  Modal
+};
+//# sourceMappingURL=index.js.map

package/dist/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/Nav/Nav.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Generic nav-links list. Generalizes 5voltfx.com's Navbar.jsx (active
+ * underline via NavLink), song-chart's SiteHeader nav, and mattwelker.com's
+ * PageNav link list into one component driven by a `links` array.
+ */
+export function Nav({ links, className }: {
+    links?: never[] | undefined;
+    className?: string | undefined;
+}): import("react").JSX.Element;
+//# sourceMappingURL=Nav.d.ts.map