@dev-dga/react 0.10.1 → 0.12.0

package/dist/chunk-54KSDBGC.js

@@ -0,0 +1,260 @@
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./chunk-G6LUBXN2.js";
+import {
+  Check,
+  ChevronDown,
+  Copy
+} from "./chunk-FFGALWM2.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/CodeSnippet/CodeSnippet.tsx
+import { useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var COMMENT_SYNTAX = {
+  java: { line: "//", block: ["/*", "*/"] },
+  c: { line: "//", block: ["/*", "*/"] },
+  cpp: { line: "//", block: ["/*", "*/"] },
+  "c++": { line: "//", block: ["/*", "*/"] },
+  php: { line: "//", block: ["/*", "*/"] },
+  js: { line: "//", block: ["/*", "*/"] },
+  javascript: { line: "//", block: ["/*", "*/"] },
+  ts: { line: "//", block: ["/*", "*/"] },
+  typescript: { line: "//", block: ["/*", "*/"] },
+  python: { line: "#" },
+  py: { line: "#" },
+  ruby: { line: "#" },
+  sh: { line: "#" },
+  bash: { line: "#" },
+  shell: { line: "#" },
+  html: { block: ["<!--", "-->"] },
+  xml: { block: ["<!--", "-->"] }
+};
+function renderGreyedLines(code, language) {
+  const syntax = COMMENT_SYNTAX[language.toLowerCase()] ?? {};
+  const lines = code.split("\n");
+  let inBlock = false;
+  return lines.map((line, i) => {
+    const trimmed = line.trimStart();
+    let isComment = false;
+    if (syntax.block) {
+      const [open, close] = syntax.block;
+      if (inBlock) {
+        isComment = true;
+        if (line.includes(close)) inBlock = false;
+      } else if (trimmed.startsWith(open)) {
+        isComment = true;
+        if (line.indexOf(close, line.indexOf(open) + open.length) === -1) inBlock = true;
+      }
+    }
+    if (!isComment && syntax.line && trimmed.startsWith(syntax.line)) isComment = true;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn("ddga-code-snippet__line", isComment && "ddga-code-snippet__line--comment"),
+        children: line
+      },
+      i
+    );
+  });
+}
+function CopyButton({
+  text,
+  size,
+  onCopy,
+  copyLabel = "Copy code",
+  copiedLabel = "Copied"
+}) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  async function handleCopy() {
+    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return;
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return;
+    }
+    onCopy?.(text);
+    setCopied(true);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 1500);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleCopy,
+        "aria-label": copyLabel,
+        "data-slot": "code-snippet-copy",
+        className: cn("ddga-code-snippet__copy-button", `ddga-code-snippet__copy-button--${size}`),
+        children: copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": true })
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "ddga-sr-only", "aria-live": "polite", children: copied ? copiedLabel : "" })
+  ] });
+}
+function CodeSnippetPanel({
+  language,
+  lineNumbers,
+  maxLines,
+  renderCode,
+  onCopy,
+  copyLabel,
+  copiedLabel,
+  expanded,
+  onToggleExpanded
+}) {
+  const lines = language.code.split("\n");
+  const collapsible = maxLines != null && lines.length > maxLines;
+  const collapsed = collapsible && !expanded;
+  return /* @__PURE__ */ jsxs("div", { className: "ddga-code-snippet__panel", "data-slot": "code-snippet-panel", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "ddga-code-snippet__viewport",
+          collapsed && "ddga-code-snippet__viewport--collapsed"
+        ),
+        style: collapsed ? { "--ddga-code-snippet-max-lines": maxLines } : void 0,
+        children: [
+          lineNumbers && /* @__PURE__ */ jsx("div", { className: "ddga-code-snippet__gutter", "aria-hidden": true, children: lines.map((_, i) => /* @__PURE__ */ jsx("span", { className: "ddga-code-snippet__line-number", children: i + 1 }, i)) }),
+          /* @__PURE__ */ jsx("div", { className: "ddga-code-snippet__scroll", children: /* @__PURE__ */ jsx("pre", { className: "ddga-code-snippet__code", children: /* @__PURE__ */ jsx("code", { children: renderCode ? renderCode({ code: language.code, language: language.value }) : renderGreyedLines(language.code, language.value) }) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        text: language.code,
+        size: "md",
+        onCopy,
+        copyLabel,
+        copiedLabel
+      }
+    ),
+    collapsible && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "ddga-code-snippet__show-more",
+        "aria-expanded": expanded,
+        onClick: onToggleExpanded,
+        children: [
+          expanded ? "Show Less" : "Show More",
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              "aria-hidden": true,
+              className: cn(
+                "ddga-code-snippet__show-more-icon",
+                expanded && "ddga-code-snippet__show-more-icon--up"
+              )
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function CodeSnippet({
+  languages,
+  value,
+  defaultValue,
+  onValueChange,
+  lineNumbers = true,
+  maxLines,
+  renderCode,
+  onCopy,
+  copyLabel,
+  copiedLabel,
+  className,
+  ...props
+}) {
+  const [expanded, setExpanded] = useState({});
+  const showTabs = languages.length > 1;
+  const panelFor = (l) => ({
+    language: l,
+    lineNumbers,
+    maxLines,
+    renderCode,
+    onCopy,
+    copyLabel,
+    copiedLabel,
+    expanded: !!expanded[l.value],
+    onToggleExpanded: () => setExpanded((m) => ({ ...m, [l.value]: !m[l.value] }))
+  });
+  return (
+    // Code is always LTR — force it at the root so the whole component ignores page direction.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "code-snippet",
+        className: cn("ddga-code-snippet", className),
+        ...props,
+        dir: "ltr",
+        children: showTabs ? /* @__PURE__ */ jsxs(
+          Tabs,
+          {
+            dir: "ltr",
+            className: "ddga-code-snippet__tabs",
+            value,
+            defaultValue: defaultValue ?? languages[0].value,
+            onValueChange,
+            children: [
+              /* @__PURE__ */ jsx(TabsList, { className: "ddga-code-snippet__tab-list", children: languages.map((l) => /* @__PURE__ */ jsx(TabsTrigger, { value: l.value, children: l.label }, l.value)) }),
+              languages.map((l) => /* @__PURE__ */ jsx(TabsContent, { value: l.value, className: "ddga-code-snippet__tab-content", children: /* @__PURE__ */ jsx(CodeSnippetPanel, { ...panelFor(l) }) }, l.value))
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(CodeSnippetPanel, { ...panelFor(languages[0]) })
+      }
+    )
+  );
+}
+function CodeSnippetInline({
+  prefix,
+  children,
+  onCopy,
+  copyLabel,
+  copiedLabel,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "code-snippet-inline",
+      className: cn("ddga-code-snippet-inline", className),
+      ...props,
+      dir: "ltr",
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "ddga-code-snippet-inline__text", children: [
+          prefix != null && /* @__PURE__ */ jsx("span", { className: "ddga-code-snippet-inline__prefix", "data-slot": "code-snippet-prefix", children: prefix }),
+          /* @__PURE__ */ jsx("span", { className: "ddga-code-snippet-inline__command", "data-slot": "code-snippet-command", children })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CopyButton,
+          {
+            text: children,
+            size: "sm",
+            onCopy,
+            copyLabel,
+            copiedLabel
+          }
+        )
+      ]
+    }
+  );
+}
+
+export {
+  CodeSnippet,
+  CodeSnippetInline
+};
+//# sourceMappingURL=chunk-54KSDBGC.js.map

package/dist/chunk-54KSDBGC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CodeSnippet/CodeSnippet.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef, useState, type ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '../Tabs/Tabs';\nimport { Copy, Check, ChevronDown } from '../../internal/icons';\n\ninterface CodeSnippetLanguage {\n  /** Stable id for the tab + active state. */\n  value: string;\n  /** Tab label (shown only when more than one language). */\n  label: string;\n  /** The code for this language — drives the gutter, copy, and default rendering. */\n  code: string;\n}\n\ninterface CodeSnippetProps extends Omit<React.ComponentProps<'div'>, 'children' | 'onCopy'> {\n  /** One entry per language. A single entry hides the tab bar (SDGA single-tab). */\n  languages: CodeSnippetLanguage[];\n  /** Controlled active language. */\n  value?: string;\n  /** Uncontrolled initial active language (defaults to the first). */\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Render the line-number gutter. @default true */\n  lineNumbers?: boolean;\n  /** Collapse to this many lines with a Show More toggle when exceeded. */\n  maxLines?: number;\n  /** Escape hatch: render highlighted code yourself; the active `code` still drives copy + line count. */\n  renderCode?: (ctx: { code: string; language: string }) => ReactNode;\n  onCopy?: (text: string) => void;\n  /** Accessible name for the copy button. @default 'Copy code' */\n  copyLabel?: string;\n  /** Live-region text announced after a successful copy. @default 'Copied' */\n  copiedLabel?: string;\n}\n\ninterface CodeSnippetInlineProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onCopy' | 'prefix' | 'children'\n> {\n  /** The command text — copied verbatim. */\n  children: string;\n  /** Leading label (e.g. `npm`) — rendered in gold. */\n  prefix?: ReactNode;\n  onCopy?: (text: string) => void;\n  /** Accessible name for the copy button. @default 'Copy code' */\n  copyLabel?: string;\n  /** Live-region text announced after a successful copy. @default 'Copied' */\n  copiedLabel?: string;\n}\n\nconst COMMENT_SYNTAX: Record<string, { line?: string; block?: [string, string] }> = {\n  java: { line: '//', block: ['/*', '*/'] },\n  c: { line: '//', block: ['/*', '*/'] },\n  cpp: { line: '//', block: ['/*', '*/'] },\n  'c++': { line: '//', block: ['/*', '*/'] },\n  php: { line: '//', block: ['/*', '*/'] },\n  js: { line: '//', block: ['/*', '*/'] },\n  javascript: { line: '//', block: ['/*', '*/'] },\n  ts: { line: '//', block: ['/*', '*/'] },\n  typescript: { line: '//', block: ['/*', '*/'] },\n  python: { line: '#' },\n  py: { line: '#' },\n  ruby: { line: '#' },\n  sh: { line: '#' },\n  bash: { line: '#' },\n  shell: { line: '#' },\n  html: { block: ['<!--', '-->'] },\n  xml: { block: ['<!--', '-->'] },\n};\n\nfunction renderGreyedLines(code: string, language: string): ReactNode {\n  const syntax = COMMENT_SYNTAX[language.toLowerCase()] ?? {};\n  const lines = code.split('\\n');\n  let inBlock = false;\n  return lines.map((line, i) => {\n    const trimmed = line.trimStart();\n    let isComment = false;\n    if (syntax.block) {\n      const [open, close] = syntax.block;\n      if (inBlock) {\n        isComment = true;\n        if (line.includes(close)) inBlock = false;\n      } else if (trimmed.startsWith(open)) {\n        isComment = true;\n        if (line.indexOf(close, line.indexOf(open) + open.length) === -1) inBlock = true;\n      }\n    }\n    if (!isComment && syntax.line && trimmed.startsWith(syntax.line)) isComment = true;\n    return (\n      <span\n        key={i}\n        className={cn('ddga-code-snippet__line', isComment && 'ddga-code-snippet__line--comment')}\n      >\n        {line}\n      </span>\n    );\n  });\n}\n\nfunction CopyButton({\n  text,\n  size,\n  onCopy,\n  copyLabel = 'Copy code',\n  copiedLabel = 'Copied',\n}: {\n  text: string;\n  size: 'sm' | 'md';\n  onCopy?: (text: string) => void;\n  copyLabel?: string;\n  copiedLabel?: string;\n}) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  async function handleCopy() {\n    if (typeof navigator === 'undefined' || !navigator.clipboard?.writeText) return;\n    try {\n      await navigator.clipboard.writeText(text);\n    } catch {\n      return;\n    }\n    onCopy?.(text);\n    setCopied(true);\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setCopied(false), 1500);\n  }\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        onClick={handleCopy}\n        aria-label={copyLabel}\n        data-slot=\"code-snippet-copy\"\n        className={cn('ddga-code-snippet__copy-button', `ddga-code-snippet__copy-button--${size}`)}\n      >\n        {copied ? <Check aria-hidden /> : <Copy aria-hidden />}\n      </button>\n      {/* Sibling, not a child — a live region inside the button leaks into its name. */}\n      <span className=\"ddga-sr-only\" aria-live=\"polite\">\n        {copied ? copiedLabel : ''}\n      </span>\n    </>\n  );\n}\n\ninterface PanelProps {\n  language: CodeSnippetLanguage;\n  lineNumbers: boolean;\n  maxLines?: number;\n  renderCode?: CodeSnippetProps['renderCode'];\n  onCopy?: (text: string) => void;\n  copyLabel?: string;\n  copiedLabel?: string;\n  expanded: boolean;\n  onToggleExpanded: () => void;\n}\n\nfunction CodeSnippetPanel({\n  language,\n  lineNumbers,\n  maxLines,\n  renderCode,\n  onCopy,\n  copyLabel,\n  copiedLabel,\n  expanded,\n  onToggleExpanded,\n}: PanelProps) {\n  const lines = language.code.split('\\n');\n  const collapsible = maxLines != null && lines.length > maxLines;\n  const collapsed = collapsible && !expanded;\n\n  return (\n    <div className=\"ddga-code-snippet__panel\" data-slot=\"code-snippet-panel\">\n      <div\n        className={cn(\n          'ddga-code-snippet__viewport',\n          collapsed && 'ddga-code-snippet__viewport--collapsed',\n        )}\n        style={\n          collapsed\n            ? ({ '--ddga-code-snippet-max-lines': maxLines } as React.CSSProperties)\n            : undefined\n        }\n      >\n        {lineNumbers && (\n          <div className=\"ddga-code-snippet__gutter\" aria-hidden>\n            {lines.map((_, i) => (\n              <span key={i} className=\"ddga-code-snippet__line-number\">\n                {i + 1}\n              </span>\n            ))}\n          </div>\n        )}\n        <div className=\"ddga-code-snippet__scroll\">\n          <pre className=\"ddga-code-snippet__code\">\n            <code>\n              {renderCode\n                ? renderCode({ code: language.code, language: language.value })\n                : renderGreyedLines(language.code, language.value)}\n            </code>\n          </pre>\n        </div>\n      </div>\n      <CopyButton\n        text={language.code}\n        size=\"md\"\n        onCopy={onCopy}\n        copyLabel={copyLabel}\n        copiedLabel={copiedLabel}\n      />\n      {collapsible && (\n        <button\n          type=\"button\"\n          className=\"ddga-code-snippet__show-more\"\n          aria-expanded={expanded}\n          onClick={onToggleExpanded}\n        >\n          {expanded ? 'Show Less' : 'Show More'}\n          <ChevronDown\n            aria-hidden\n            className={cn(\n              'ddga-code-snippet__show-more-icon',\n              expanded && 'ddga-code-snippet__show-more-icon--up',\n            )}\n          />\n        </button>\n      )}\n    </div>\n  );\n}\n\nfunction CodeSnippet({\n  languages,\n  value,\n  defaultValue,\n  onValueChange,\n  lineNumbers = true,\n  maxLines,\n  renderCode,\n  onCopy,\n  copyLabel,\n  copiedLabel,\n  className,\n  ...props\n}: CodeSnippetProps) {\n  // expand state lives here (keyed by language) so it survives Radix unmounting inactive tab panels.\n  const [expanded, setExpanded] = useState<Record<string, boolean>>({});\n  const showTabs = languages.length > 1;\n  const panelFor = (l: CodeSnippetLanguage) => ({\n    language: l,\n    lineNumbers,\n    maxLines,\n    renderCode,\n    onCopy,\n    copyLabel,\n    copiedLabel,\n    expanded: !!expanded[l.value],\n    onToggleExpanded: () => setExpanded((m) => ({ ...m, [l.value]: !m[l.value] })),\n  });\n\n  return (\n    // Code is always LTR — force it at the root so the whole component ignores page direction.\n    <div\n      data-slot=\"code-snippet\"\n      className={cn('ddga-code-snippet', className)}\n      {...props}\n      dir=\"ltr\"\n    >\n      {showTabs ? (\n        <Tabs\n          dir=\"ltr\"\n          className=\"ddga-code-snippet__tabs\"\n          value={value}\n          defaultValue={defaultValue ?? languages[0].value}\n          onValueChange={onValueChange}\n        >\n          <TabsList className=\"ddga-code-snippet__tab-list\">\n            {languages.map((l) => (\n              <TabsTrigger key={l.value} value={l.value}>\n                {l.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n          {languages.map((l) => (\n            <TabsContent key={l.value} value={l.value} className=\"ddga-code-snippet__tab-content\">\n              <CodeSnippetPanel {...panelFor(l)} />\n            </TabsContent>\n          ))}\n        </Tabs>\n      ) : (\n        <CodeSnippetPanel {...panelFor(languages[0])} />\n      )}\n    </div>\n  );\n}\n\nfunction CodeSnippetInline({\n  prefix,\n  children,\n  onCopy,\n  copyLabel,\n  copiedLabel,\n  className,\n  ...props\n}: CodeSnippetInlineProps) {\n  return (\n    <div\n      data-slot=\"code-snippet-inline\"\n      className={cn('ddga-code-snippet-inline', className)}\n      {...props}\n      dir=\"ltr\"\n    >\n      <span className=\"ddga-code-snippet-inline__text\">\n        {prefix != null && (\n          <span className=\"ddga-code-snippet-inline__prefix\" data-slot=\"code-snippet-prefix\">\n            {prefix}\n          </span>\n        )}\n        <span className=\"ddga-code-snippet-inline__command\" data-slot=\"code-snippet-command\">\n          {children}\n        </span>\n      </span>\n      <CopyButton\n        text={children}\n        size=\"sm\"\n        onCopy={onCopy}\n        copyLabel={copyLabel}\n        copiedLabel={copiedLabel}\n      />\n    </div>\n  );\n}\n\nexport { CodeSnippet, CodeSnippetInline };\nexport type { CodeSnippetProps, CodeSnippetInlineProps, CodeSnippetLanguage };\n"],"mappings":"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","names":[]}

package/dist/chunk-55RHNN3T.js

@@ -0,0 +1,116 @@
+import {
+  FieldMessage
+} from "./chunk-E5ZIKIGB.js";
+import {
+  useFieldA11y
+} from "./chunk-HN5AFDQA.js";
+import {
+  cn
+} from "./chunk-7NTT2UXP.js";
+
+// src/components/Slider/Slider.tsx
+import { useId } from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var sliderVariants = cva("ddga-slider", {
+  variants: {
+    error: {
+      true: "ddga-slider--error"
+    }
+  }
+});
+var DEFAULT_THUMB_LABELS = ["Minimum", "Maximum"];
+function toArray(value) {
+  if (value === void 0) return void 0;
+  return Array.isArray(value) ? value : [value];
+}
+function Slider({
+  id: externalId,
+  value,
+  defaultValue,
+  onValueChange,
+  onValueCommit,
+  min = 0,
+  max = 100,
+  size,
+  label,
+  helperText,
+  errorMessage,
+  error,
+  showValue = false,
+  formatValue,
+  thumbLabels = DEFAULT_THUMB_LABELS,
+  className,
+  ...props
+}) {
+  const labelId = useId();
+  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } = useFieldA11y({
+    name: "Slider",
+    id: externalId,
+    label,
+    error,
+    errorMessage,
+    helperText,
+    "aria-label": props["aria-label"],
+    "aria-labelledby": props["aria-labelledby"] ?? (label ? labelId : void 0)
+  });
+  const isRange = Array.isArray(value ?? defaultValue);
+  const valueArray = toArray(value);
+  const defaultArray = toArray(defaultValue) ?? [min];
+  const wrap = (next) => isRange ? next : next[0];
+  const currentForRender = valueArray ?? defaultArray;
+  const fmt = (n) => formatValue ? formatValue(n) : String(n);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "slider-field",
+      className: cn("ddga-field ddga-slider-field", `ddga-slider-field--${size ?? "md"}`),
+      children: [
+        label && /* @__PURE__ */ jsx("span", { id: labelId, className: "ddga-slider__label", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: "ddga-slider__control", children: [
+          /* @__PURE__ */ jsxs(
+            SliderPrimitive.Root,
+            {
+              ...props,
+              id: fieldId,
+              min,
+              max,
+              value: valueArray,
+              defaultValue: value === void 0 ? defaultArray : void 0,
+              onValueChange: onValueChange ? (next) => onValueChange(wrap(next)) : void 0,
+              onValueCommit: onValueCommit ? (next) => onValueCommit(wrap(next)) : void 0,
+              "aria-invalid": controlProps["aria-invalid"],
+              "data-slot": "slider",
+              className: cn(sliderVariants({ error: hasError }), className),
+              children: [
+                /* @__PURE__ */ jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "ddga-slider__track", children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "ddga-slider__range" }) }),
+                currentForRender.map((thumbValue, index) => /* @__PURE__ */ jsx(
+                  SliderPrimitive.Thumb,
+                  {
+                    "data-slot": "slider-thumb",
+                    className: "ddga-slider__thumb",
+                    "aria-label": isRange ? thumbLabels[index] : void 0,
+                    "aria-labelledby": !isRange && label ? labelId : void 0,
+                    "aria-valuetext": formatValue ? fmt(thumbValue) : void 0,
+                    "aria-describedby": controlProps["aria-describedby"]
+                  },
+                  index
+                ))
+              ]
+            }
+          ),
+          showValue && /* @__PURE__ */ jsx("span", { className: "ddga-slider__value", "aria-hidden": "true", children: currentForRender.map(fmt).join(" \u2013 ") })
+        ] }),
+        hasErrorMessage && /* @__PURE__ */ jsx(FieldMessage, { id: errorId, variant: "error", children: errorMessage }),
+        hasHelper && /* @__PURE__ */ jsx(FieldMessage, { id: helperId, variant: "helper", children: helperText })
+      ]
+    }
+  );
+}
+
+export {
+  sliderVariants,
+  Slider
+};
+//# sourceMappingURL=chunk-55RHNN3T.js.map

package/dist/chunk-55RHNN3T.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Slider/Slider.tsx"],"sourcesContent":["'use client';\n\nimport { useId, type ReactNode } from 'react';\nimport { Slider as SliderPrimitive } from 'radix-ui';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useFieldA11y, FieldMessage } from '../../field';\n\nconst sliderVariants = cva('ddga-slider', {\n  variants: {\n    error: {\n      true: 'ddga-slider--error',\n    },\n  },\n});\n\ntype SliderValue = number | number[];\n\ninterface SliderProps\n  extends\n    Omit<\n      React.ComponentProps<typeof SliderPrimitive.Root>,\n      'value' | 'defaultValue' | 'onValueChange' | 'onValueCommit' | 'asChild'\n    >,\n    VariantProps<typeof sliderVariants> {\n  /** Controlled value. `number` → single thumb, `number[]` → one thumb each. */\n  value?: SliderValue;\n  /** Uncontrolled initial value. Defaults to a single thumb at `min`. */\n  defaultValue?: SliderValue;\n  /** Fires continuously while dragging. Shape mirrors `value`/`defaultValue`. */\n  onValueChange?: (value: SliderValue) => void;\n  /** Fires once on release (pointer up / keyboard commit). */\n  onValueCommit?: (value: SliderValue) => void;\n\n  /** Visible field label, associated to the thumb(s) via `aria-labelledby`. */\n  label?: ReactNode;\n  /** Hint shown below the field. Hidden while an error message is showing. */\n  helperText?: ReactNode;\n  /** Message shown below the field when `error` is true. */\n  errorMessage?: ReactNode;\n  /** Marks the field invalid: sets `aria-invalid` and error styling. */\n  error?: boolean;\n  /** Control size. Scales rail, thumb, label, and helper text. Defaults to `md`. */\n  size?: 'sm' | 'md';\n\n  /** Render the current value(s) as text beside the label. */\n  showValue?: boolean;\n  /** Formats each value for `showValue` and the thumb's `aria-valuetext`\n   *  (e.g. percentages or currency). */\n  formatValue?: (value: number) => string;\n  /** Accessible names for the two range thumbs. Ignored for single thumbs.\n   *  Defaults to `['Minimum', 'Maximum']`. */\n  thumbLabels?: [string, string];\n}\n\nconst DEFAULT_THUMB_LABELS: [string, string] = ['Minimum', 'Maximum'];\n\nfunction toArray(value: SliderValue | undefined): number[] | undefined {\n  if (value === undefined) return undefined;\n  return Array.isArray(value) ? value : [value];\n}\n\nfunction Slider({\n  id: externalId,\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  size,\n  label,\n  helperText,\n  errorMessage,\n  error,\n  showValue = false,\n  formatValue,\n  thumbLabels = DEFAULT_THUMB_LABELS,\n  className,\n  ...props\n}: SliderProps) {\n  const labelId = useId();\n  const { fieldId, errorId, helperId, hasError, hasErrorMessage, hasHelper, controlProps } =\n    useFieldA11y({\n      name: 'Slider',\n      id: externalId,\n      label,\n      error,\n      errorMessage,\n      helperText,\n      'aria-label': props['aria-label'],\n      'aria-labelledby': props['aria-labelledby'] ?? (label ? labelId : undefined),\n    });\n\n  const isRange = Array.isArray(value ?? defaultValue);\n\n  const valueArray = toArray(value);\n  const defaultArray = toArray(defaultValue) ?? [min];\n  const wrap = (next: number[]): SliderValue => (isRange ? next : next[0]);\n\n  const currentForRender = valueArray ?? defaultArray;\n  const fmt = (n: number) => (formatValue ? formatValue(n) : String(n));\n\n  return (\n    <div\n      data-slot=\"slider-field\"\n      className={cn('ddga-field ddga-slider-field', `ddga-slider-field--${size ?? 'md'}`)}\n    >\n      {label && (\n        <span id={labelId} className=\"ddga-slider__label\">\n          {label}\n        </span>\n      )}\n\n      <div className=\"ddga-slider__control\">\n        <SliderPrimitive.Root\n          // Spread first so the a11y/state wiring below can't be clobbered.\n          {...props}\n          id={fieldId}\n          min={min}\n          max={max}\n          value={valueArray}\n          defaultValue={value === undefined ? defaultArray : undefined}\n          onValueChange={onValueChange ? (next) => onValueChange(wrap(next)) : undefined}\n          onValueCommit={onValueCommit ? (next) => onValueCommit(wrap(next)) : undefined}\n          aria-invalid={controlProps['aria-invalid']}\n          data-slot=\"slider\"\n          className={cn(sliderVariants({ error: hasError }), className)}\n        >\n          <SliderPrimitive.Track data-slot=\"slider-track\" className=\"ddga-slider__track\">\n            <SliderPrimitive.Range data-slot=\"slider-range\" className=\"ddga-slider__range\" />\n          </SliderPrimitive.Track>\n          {currentForRender.map((thumbValue, index) => (\n            <SliderPrimitive.Thumb\n              key={index}\n              data-slot=\"slider-thumb\"\n              className=\"ddga-slider__thumb\"\n              aria-label={isRange ? thumbLabels[index] : undefined}\n              aria-labelledby={!isRange && label ? labelId : undefined}\n              aria-valuetext={formatValue ? fmt(thumbValue) : undefined}\n              aria-describedby={controlProps['aria-describedby']}\n            />\n          ))}\n        </SliderPrimitive.Root>\n        {showValue && (\n          <span className=\"ddga-slider__value\" aria-hidden=\"true\">\n            {currentForRender.map(fmt).join(' – ')}\n          </span>\n        )}\n      </div>\n\n      {hasErrorMessage && (\n        <FieldMessage id={errorId} variant=\"error\">\n          {errorMessage}\n        </FieldMessage>\n      )}\n      {hasHelper && (\n        <FieldMessage id={helperId} variant=\"helper\">\n          {helperText}\n        </FieldMessage>\n      )}\n    </div>\n  );\n}\n\nexport { Slider, sliderVariants };\nexport type { SliderProps, SliderValue };\n"],"mappings":";;;;;;;;;;;AAEA,SAAS,aAA6B;AACtC,SAAS,UAAU,uBAAuB;AAC1C,SAAS,WAA8B;AAyG/B,cAMA,YANA;AArGR,IAAM,iBAAiB,IAAI,eAAe;AAAA,EACxC,UAAU;AAAA,IACR,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAyCD,IAAM,uBAAyC,CAAC,WAAW,SAAS;AAEpE,SAAS,QAAQ,OAAsD;AACrE,MAAI,UAAU,OAAW,QAAO;AAChC,SAAO,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK;AAC9C;AAEA,SAAS,OAAO;AAAA,EACd,IAAI;AAAA,EACJ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAAgB;AACd,QAAM,UAAU,MAAM;AACtB,QAAM,EAAE,SAAS,SAAS,UAAU,UAAU,iBAAiB,WAAW,aAAa,IACrF,aAAa;AAAA,IACX,MAAM;AAAA,IACN,IAAI;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,MAAM,YAAY;AAAA,IAChC,mBAAmB,MAAM,iBAAiB,MAAM,QAAQ,UAAU;AAAA,EACpE,CAAC;AAEH,QAAM,UAAU,MAAM,QAAQ,SAAS,YAAY;AAEnD,QAAM,aAAa,QAAQ,KAAK;AAChC,QAAM,eAAe,QAAQ,YAAY,KAAK,CAAC,GAAG;AAClD,QAAM,OAAO,CAAC,SAAiC,UAAU,OAAO,KAAK,CAAC;AAEtE,QAAM,mBAAmB,cAAc;AACvC,QAAM,MAAM,CAAC,MAAe,cAAc,YAAY,CAAC,IAAI,OAAO,CAAC;AAEnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,gCAAgC,sBAAsB,QAAQ,IAAI,EAAE;AAAA,MAEjF;AAAA,iBACC,oBAAC,UAAK,IAAI,SAAS,WAAU,sBAC1B,iBACH;AAAA,QAGF,qBAAC,SAAI,WAAU,wBACb;AAAA;AAAA,YAAC,gBAAgB;AAAA,YAAhB;AAAA,cAEE,GAAG;AAAA,cACJ,IAAI;AAAA,cACJ;AAAA,cACA;AAAA,cACA,OAAO;AAAA,cACP,cAAc,UAAU,SAAY,eAAe;AAAA,cACnD,eAAe,gBAAgB,CAAC,SAAS,cAAc,KAAK,IAAI,CAAC,IAAI;AAAA,cACrE,eAAe,gBAAgB,CAAC,SAAS,cAAc,KAAK,IAAI,CAAC,IAAI;AAAA,cACrE,gBAAc,aAAa,cAAc;AAAA,cACzC,aAAU;AAAA,cACV,WAAW,GAAG,eAAe,EAAE,OAAO,SAAS,CAAC,GAAG,SAAS;AAAA,cAE5D;AAAA,oCAAC,gBAAgB,OAAhB,EAAsB,aAAU,gBAAe,WAAU,sBACxD,8BAAC,gBAAgB,OAAhB,EAAsB,aAAU,gBAAe,WAAU,sBAAqB,GACjF;AAAA,gBACC,iBAAiB,IAAI,CAAC,YAAY,UACjC;AAAA,kBAAC,gBAAgB;AAAA,kBAAhB;AAAA,oBAEC,aAAU;AAAA,oBACV,WAAU;AAAA,oBACV,cAAY,UAAU,YAAY,KAAK,IAAI;AAAA,oBAC3C,mBAAiB,CAAC,WAAW,QAAQ,UAAU;AAAA,oBAC/C,kBAAgB,cAAc,IAAI,UAAU,IAAI;AAAA,oBAChD,oBAAkB,aAAa,kBAAkB;AAAA;AAAA,kBAN5C;AAAA,gBAOP,CACD;AAAA;AAAA;AAAA,UACH;AAAA,UACC,aACC,oBAAC,UAAK,WAAU,sBAAqB,eAAY,QAC9C,2BAAiB,IAAI,GAAG,EAAE,KAAK,UAAK,GACvC;AAAA,WAEJ;AAAA,QAEC,mBACC,oBAAC,gBAAa,IAAI,SAAS,SAAQ,SAChC,wBACH;AAAA,QAED,aACC,oBAAC,gBAAa,IAAI,UAAU,SAAQ,UACjC,sBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/chunk-5DBKWVTZ.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-5DBKWVTZ.js.map