@epam/ai-dial-ui-kit 0.15.0-dev.46 → 0.15.0-dev.48

package/dist/CHANGELOG.md

@@ -14,8 +14,13 @@ Versions match the git tags on the `development` branch.
 - **Legacy theme variable fallbacks removed** — 0.14.0 renamed several theme variables but kept the old names in the fallback chain, so every token resolved two variables and a theme could set either. The old names are no longer read: `--bg-control-neutral-hover` → `--bg-control-neutral-hover-muted`, `--stroke-focus-black` → `--stroke-focus`, and `--bg-control-accent-gradient-from` / `-to` / `-hover-from` / `-active-to` → `--bg-gradient-1` / `-2` / `-1-hover` / `-2-active`. A theme that still sets an old name falls back to the kit's default colour; rename the variable.
   See [migration guide](migration-guides/0.15.0/legacy-theme-variable-fallbacks-removal.md).
 
+- **`Slider` (2.0) — redrawn thumb and track** — the slider now follows the new 2.0 design: a 12px solid accent thumb (was a 16px white disc with a border) that grows a soft halo on hover, focus and drag, over an accent-tint track (was grey). The props are unchanged, so typecheck cannot flag it, but every `Slider` renders differently and host CSS aimed at the old thumb needs a second look. The 24px pointer row and the `dial-kit-slider` class stay as they were.
+  See [migration guide](migration-guides/0.15.0/slider-redesign.md).
+
 ### Added
 
+- **`Slider` (2.0) — `showTooltip`, `showTicks`, `leftContent`, `rightContent`** — the rest of the new slider design. `showTooltip` shows the formatted value in a bubble above the thumb; `showTicks` marks every step on the unfilled track for a discrete slider. Both are hidden while disabled. The bubble is `aria-hidden`, because the input already announces the value through `aria-valuetext`. `leftContent` and `rightContent` are the slider container's side slots, centred on the track: an icon on the left, a `NumberInput` or the value as text on the right. The kit does not sync a `NumberInput` placed there; the caller passes it the same `value` and setter. All four are opt-in.
+
 - **`SchemaRenderer` (2.0)** — a JSON Schema form built only from 2.0 controls. `DialSchemaRenderer` exists only in 1.0, so a 2.0 screen that renders a schema-driven form had to mix in 1.0 inputs, selects and the 1.0 `Dropdown` surface. The 2.0 renderer keeps the 1.0 props, except `jsonEditorTheme`: the three variants, `oneOf`/`anyOf` with select or radio selectors, arrays with discriminator types, key-value maps, `dial:resource` options, `skipUntouched`, `renderField` and `texts`. Primitives render as `Input`, `NumberInput`, `PasswordInput`, `Select`, `Switch` or `RadioGroup`. Values the schema does not describe are edited as JSON in a monospace `Textarea`, not in Monaco, so the form loads no editor bundle. Section headers are real toggle buttons with `aria-expanded`, and the remove and info buttons sit next to the toggle instead of inside it. Every control has an accessible name, including array items and key-value rows. `renderField` replaces only the control, so the field keeps its label and error. Stamps `DIAL_KIT_CLASS.schemaRenderer` (`dial-kit-schema-renderer`) on the root and `DIAL_KIT_CLASS.schemaRendererSection` (`dial-kit-schema-renderer-section`) on each section card. The schema types, enums and utils are shared with 1.0 from neutral modules; the 1.0 import paths still work. Additive.
 
 - **`AutocompleteTagInput` (2.0)** — a tag field that suggests values while typing and still accepts its own. `TagInput` takes only free text and a multiple `Select` only listed values, so a field such as a list of MIME types — where the common ones should be one keystroke away but any `<type>/<subtype>` is valid — had to be hand-built in each app (the DIAL admin's attachment types, the QuickApps editor's). Typing lists up to `maxSuggestions` (default 5) of the `suggestions` whose label, value or description contains the text and which are not already tags; Enter or comma adds the highlighted one, or the typed text when nothing matches; the arrow keys move the highlight, Escape and leaving the field close the list, Backspace on an empty input removes the last tag. The input follows the ARIA combobox pattern and keeps focus while the list is open, the list floats on the `z-floating` layer and takes the field's width, and the tags share the multiple `Select`'s look. `getRemoveTagLabel` names each tag's remove button, so a localised host is not left with the English `Remove <tag>`. Stamps `DIAL_KIT_CLASS.autocompleteTagInput` (`dial-kit-autocomplete-tag-input`) on the field. Additive; nothing else changes.
@@ -62,6 +67,8 @@ Versions match the git tags on the `development` branch.
 
 ### Changed
 
+- **`StarterButton` (2.0) — a sparkles icon by default** — the design puts a sparkles glyph before every starter label, so each host was passing the same `iconBefore`. `iconBefore` now defaults to a 20px `IconSparkles` at the 1.5 stroke, `aria-hidden`, and stroked with the starter gradient like any other icon. A caller-supplied `iconBefore` replaces it; `iconBefore={null}` keeps a label-only pill. A `StarterButton` that passed no `iconBefore` now draws the icon; no other API changes.
+
 - **`Select` (2.0) — multi-select tags are 24px, and the field wraps them with an 8px gap** — the tags in a multi-select field used the 32px pill of `Tag`, taller than the design's field chip. They are now 24px with a `rounded-md` shape, a `layer-sunken` fill and a `stroke-secondary` rim, and the wrapped field pads 8px vertically with 8px between tags, so one row of tags still fills the 40px field. `Tag` itself is unchanged. Visual only; no API changes.
 
 ### Fixed

package/dist/JsonEditor-CpSpVa0v.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),u=require("./editor-Bc9xzKuR.cjs"),d=require("@monaco-editor/react");function f(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const a=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,a.get?a:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const m=f(d),b=({value:e,onChange:o,onValidateJSON:t,options:a,currentTheme:n,themesConfig:i=u.EDITOR_THEMES_CONFIG})=>{function s(r){r?.editor?.defineTheme(n,i[n]),r.languages.json.jsonDefaults.setDiagnosticsOptions({validate:!0,enableSchemaRequest:!1,schemas:[{uri:"http://custom-schema/object-required.json",fileMatch:["*"],schema:{type:"object",description:"Top-level value must be an object",additionalProperties:!0}}]})}const{Editor:l}=m;return c.jsx(l,{beforeMount:s,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:t,options:{minimap:{enabled:!1},formatOnType:!0,formatOnPaste:!0,selectOnLineNumbers:!1,automaticLayout:!0,scrollBeyondLastLine:!1,wordWrap:"on",smoothScrolling:!0,overviewRulerLanes:0,scrollbar:{horizontal:"hidden",verticalScrollbarSize:4,verticalSliderSize:4},...a??{}}})};exports.DialJsonEditor=b;

package/dist/{MarkdownEditor-FVzYMdkC.cjs → MarkdownEditor-CPzMv3lE.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-BEsZqouS.cjs"),u=require("./merge-classes-BEJXjzkx.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("@uiw/react-md-editor"),m=require("./lazy-Cy9WobJf.cjs"),u=require("./merge-classes-BEJXjzkx.cjs"),x=({value:t,onChange:s,height:o=300,preview:i="edit",theme:a=m.EditorThemes.dark,className:n,placeholder:r})=>{const d=r!==void 0&&!t;return e.jsxs("div",{"data-color-mode":a,className:u.mergeClasses("relative",n),children:[e.jsx(c,{value:t,onChange:l=>s?.(l||""),height:o,preview:i}),d&&e.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:r})]})};exports.DialMarkdownEditor=x;

package/dist/{MarkdownEditor-C7BONfsl.cjs → MarkdownEditor-NYMcKLJy.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-BEsZqouS.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),O=require("@uiw/react-md-editor"),_=require("./lazy-Cy9WobJf.cjs"),k=require("./merge-classes-BEJXjzkx.cjs"),o=require("@tabler/icons-react"),p=require("./icon-DhjrDQ8I.cjs"),f=require("./icon-CrGVkVpG.cjs");function E(n){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(i,r,c.get?c:{enumerable:!0,get:()=>n[r]})}}return i.default=n,Object.freeze(i)}const b=E(O),L=f.DIAL_ICON_SIZE.SM,t={size:L,stroke:p.DIAL_KIT_ICON_STROKE},s=(n,i)=>({...n,icon:i}),M=()=>{const{bold:n,code:i,divider:r,group:c,heading1:a,heading2:d,heading3:u,italic:l,link:m,orderedListCommand:I,quote:x,strikethrough:g,table:h,unorderedListCommand:C}=b;return[s(n,e.jsx(o.IconBold,{...t})),s(l,e.jsx(o.IconItalic,{...t})),s(g,e.jsx(o.IconStrikethrough,{...t})),r,c([a,d,u],{name:"heading",groupName:"heading",icon:e.jsx(o.IconTextSize,{...t}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),r,s(C,e.jsx(o.IconList,{...t})),s(I,e.jsx(o.IconListNumbers,{...t})),r,s(x,e.jsx(o.IconQuote,{...t})),s(m,e.jsx(o.IconLink,{...t})),s(i,e.jsx(o.IconCode,{...t})),r,s(h,e.jsx(o.IconTable,{...t}))]},S=()=>{const{codeEdit:n,codeLive:i,codePreview:r,divider:c,fullscreen:a}=b;return[s(n,e.jsx(o.IconPencil,{...t})),s(i,e.jsx(o.IconLayoutColumns,{...t})),s(r,e.jsx(o.IconEye,{...t})),c,s(a,e.jsx(o.IconMaximize,{...t}))]},T=({value:n,onChange:i,height:r=300,theme:c=_.EditorThemes.light,className:a,placeholder:d,defaultPreview:u="edit",id:l,ariaLabel:m})=>{const I=j.useMemo(()=>M(),[]),x=j.useMemo(()=>S(),[]);return e.jsx("div",{"data-color-mode":c,className:k.mergeClasses("dial-kit-markdown-editor",a),children:e.jsx(O,{value:n,onChange:g=>i?.(g||""),height:r,preview:u,commands:I,extraCommands:x,textareaProps:{placeholder:d,id:l,"aria-label":m}})})};exports.MarkdownEditor=T;

package/dist/MarkdownEditorContainer-DVPRplYf.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react");require("./editor-Bc9xzKuR.cjs");const E=require("./lazy-Cy9WobJf.cjs");require("@monaco-editor/react");const m=require("./Switch-DE6MrcqJ.cjs"),N=require("./MarkdownEditor-CPzMv3lE.cjs"),b=({value:o,onChangeValue:l,label:i,headerContent:a,switcherLabel:d,height:c=300,theme:u=E.EditorThemes.dark,onValidateJSON:x,preview:j="edit"})=>{const w=n.useId(),[t,C]=n.useState(!1),[f,p]=n.useState(null);n.useEffect(()=>{t&&typeof window<"u"&&Promise.resolve().then(()=>require("./JsonEditor-CpSpVa0v.cjs")).then(s=>{p(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),S=n.useCallback(s=>{x?.(s)},[x]),r=!!d;return e.jsx("div",{className:"size-full flex flex-col",children:e.jsx("div",{className:"flex flex-col gap-8",children:e.jsxs("div",{children:[(i||a||r)&&e.jsxs("div",{className:"flex justify-between items-center mb-2",children:[i&&e.jsx(m.DialLabel,{label:i}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 justify-end",children:[a,r&&e.jsx("label",{className:"flex items-center gap-2 cursor-pointer",children:e.jsx(m.DialSwitch,{isOn:t,label:d,switchId:w,onChange:s=>C(s)})})]})]}),r&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:o,onChange:h,onValidateJSON:S,currentTheme:u})}):e.jsx(N.DialMarkdownEditor,{value:o,onChange:h,height:c,preview:j,theme:u})]})})})};exports.DialMarkdownEditorContainer=b;

package/dist/components/MarkdownEditor/MarkdownEditorContainer.js

@@ -1,26 +1,28 @@
 import { jsx as e, jsxs as r } from "react/jsx-runtime";
 import { useId as g, useState as x, useEffect as J, useCallback as u } from "react";
-import { DialSwitch as S } from "../Switch/Switch.js";
-import { EditorThemes as b } from "../../types/editor.js";
+import "../../constants/editor.js";
+import { EditorThemes as S } from "../../types/editor.js";
+import "@monaco-editor/react";
+import { DialSwitch as b } from "../Switch/Switch.js";
 import { DialMarkdownEditor as v } from "./MarkdownEditor.js";
 import { DialLabel as y } from "../Label/Label.js";
-const z = ({
+const $ = ({
   value: s,
   onChangeValue: l,
-  label: i,
+  label: t,
   headerContent: d,
   switcherLabel: a,
   height: c = 300,
-  theme: m = b.dark,
+  theme: m = S.dark,
   onValidateJSON: f,
   preview: C = "edit"
 }) => {
-  const N = g(), [n, w] = x(!1), [p, D] = x(null);
+  const N = g(), [i, w] = x(!1), [p, D] = x(null);
   J(() => {
-    n && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
+    i && typeof window < "u" && import("../JsonEditor/JsonEditor.js").then((o) => {
       D(() => o.DialJsonEditor);
     });
-  }, [n]);
+  }, [i]);
   const h = u(
     (o) => {
       l?.(o);
@@ -31,16 +33,16 @@ const z = ({
       f?.(o);
     },
     [f]
-  ), t = !!a;
+  ), n = !!a;
   return /* @__PURE__ */ e("div", { className: "size-full flex flex-col", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-8", children: /* @__PURE__ */ r("div", { children: [
-    (i || d || t) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
-      i && /* @__PURE__ */ e(y, { label: i }),
+    (t || d || n) && /* @__PURE__ */ r("div", { className: "flex justify-between items-center mb-2", children: [
+      t && /* @__PURE__ */ e(y, { label: t }),
       /* @__PURE__ */ r("div", { className: "flex items-center gap-2 flex-1 justify-end", children: [
         d,
-        t && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
-          S,
+        n && /* @__PURE__ */ e("label", { className: "flex items-center gap-2 cursor-pointer", children: /* @__PURE__ */ e(
+          b,
           {
-            isOn: n,
+            isOn: i,
             label: a,
             switchId: N,
             onChange: (o) => w(o)
@@ -48,7 +50,7 @@ const z = ({
         ) })
       ] })
     ] }),
-    t && n ? /* @__PURE__ */ e(
+    n && i ? /* @__PURE__ */ e(
       "div",
       {
         className: "border border-primary rounded",
@@ -76,5 +78,5 @@ const z = ({
   ] }) }) });
 };
 export {
-  z as DialMarkdownEditorContainer
+  $ as DialMarkdownEditorContainer
 };

package/dist/components/New/Button/ButtonWrappers.js

@@ -1,30 +1,33 @@
-import { jsx as r, jsxs as B, Fragment as f } from "react/jsx-runtime";
-import { useId as h } from "react";
-import { ButtonAppearance as n, ButtonVariant as o } from "../../../types/button.js";
+import { jsx as t, jsxs as B, Fragment as g } from "react/jsx-runtime";
+import { IconSparkles as y } from "@tabler/icons-react";
+import { useId as S } from "react";
+import { DIAL_KIT_ICON_STROKE as h } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as k } from "../../../constants/icon.js";
+import { ButtonAppearance as o, ButtonVariant as n } from "../../../types/button.js";
 import { Button as d } from "./Button.js";
-const l = (a, t) => ({ appearance: s, ...u }) => /* @__PURE__ */ r(
+const p = (a, r) => ({ appearance: s, ...u }) => /* @__PURE__ */ t(
   d,
   {
     ...u,
     variant: a,
-    appearance: s || t
+    appearance: s || r
   }
-), p = (a, t) => ({ variant: s, ...u }) => /* @__PURE__ */ r(
+), c = (a, r) => ({ variant: s, ...u }) => /* @__PURE__ */ t(
   d,
   {
     ...u,
-    variant: s || t,
+    variant: s || r,
     appearance: a
   }
-), N = l(
-  o.Primary,
-  n.Solid
-), C = l(
-  o.Neutral,
-  n.Solid
-), G = l(
-  o.Danger,
-  n.Solid
+), A = p(
+  n.Primary,
+  o.Solid
+), E = p(
+  n.Neutral,
+  o.Solid
+), R = p(
+  n.Danger,
+  o.Solid
 ), e = {
   x1: "-5.06",
   y1: "2.26",
@@ -32,69 +35,76 @@ const l = (a, t) => ({ appearance: s, ...u }) => /* @__PURE__ */ r(
   y2: "22.63",
   from: "var(--stroke-gradient-1, #5976E9)",
   to: "var(--stroke-gradient-2, #885DF2)"
-}, O = ({
-  appearance: a = n.Outlined,
-  iconBefore: t,
+}, x = /* @__PURE__ */ t(
+  y,
+  {
+    size: k.MD,
+    stroke: h,
+    "aria-hidden": !0
+  }
+), G = ({
+  appearance: a = o.Outlined,
+  iconBefore: r = x,
   iconAfter: i,
   style: s,
   ...u
 }) => {
-  const c = `dial-kit-starter-gradient-${h().replace(/[^\w-]/g, "")}`, g = /* @__PURE__ */ r(
+  const l = `dial-kit-starter-gradient-${S().replace(/[^\w-]/g, "")}`, f = /* @__PURE__ */ t(
     "svg",
     {
       className: "pointer-events-none absolute size-0 overflow-hidden",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ B(
+      children: /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ B(
         "linearGradient",
         {
-          id: c,
+          id: l,
           x1: e.x1,
           y1: e.y1,
           x2: e.x2,
           y2: e.y2,
           gradientUnits: "userSpaceOnUse",
           children: [
-            /* @__PURE__ */ r("stop", { stopColor: e.from }),
-            /* @__PURE__ */ r("stop", { offset: "1", stopColor: e.to })
+            /* @__PURE__ */ t("stop", { stopColor: e.from }),
+            /* @__PURE__ */ t("stop", { offset: "1", stopColor: e.to })
           ]
         }
       ) })
     }
-  ), m = (y) => /* @__PURE__ */ B(f, { children: [
-    g,
-    y
+  ), m = (I) => /* @__PURE__ */ B(g, { children: [
+    f,
+    I
   ] });
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(
     d,
     {
       ...u,
-      variant: o.Starter,
+      variant: n.Starter,
       appearance: a,
-      iconBefore: t ? m(t) : void 0,
-      iconAfter: i && !t ? m(i) : i,
+      iconBefore: r ? m(r) : void 0,
+      iconAfter: i && !r ? m(i) : i,
       style: {
-        "--dial-kit-starter-icon-stroke": `url(#${c})`,
+        "--dial-kit-starter-icon-stroke": `url(#${l})`,
         ...s
       }
     }
   );
-}, D = p(
-  n.Link,
-  o.Primary
-), I = p(
-  n.Ghost,
-  o.Primary
-), P = p(
-  n.Outlined,
-  o.Neutral
+}, L = c(
+  o.Link,
+  n.Primary
+), P = c(
+  o.Ghost,
+  n.Primary
+), W = c(
+  o.Outlined,
+  n.Neutral
 );
 export {
-  G as DangerButton,
-  I as GhostButton,
-  D as LinkButton,
-  C as NeutralButton,
-  P as OutlinedButton,
-  N as PrimaryButton,
-  O as StarterButton
+  R as DangerButton,
+  P as GhostButton,
+  L as LinkButton,
+  E as NeutralButton,
+  W as OutlinedButton,
+  A as PrimaryButton,
+  G as StarterButton
 };

package/dist/components/New/Slider/Slider.js

@@ -1,112 +1,173 @@
-import { jsxs as n, jsx as e, Fragment as C } from "react/jsx-runtime";
-import { useId as w, useCallback as A } from "react";
-import { mergeClasses as i } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as B } from "../../../utils/accessible-name.js";
-import { ErrorText as H, CaptionText as L } from "../CaptionText/CaptionText.js";
-import { Label as U } from "../Label/Label.js";
-const Z = 16, _ = (o) => (o.toString().split(".")[1] ?? "").length, O = ({
-  id: o,
+import { jsxs as n, jsx as e, Fragment as k } from "react/jsx-runtime";
+import { useId as Z, useCallback as q } from "react";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as D } from "../../../utils/accessible-name.js";
+import { ErrorText as J, CaptionText as K } from "../CaptionText/CaptionText.js";
+import { Label as O } from "../Label/Label.js";
+import { getTickPercents as Q } from "./utils.js";
+const R = 12, W = (t) => (t.toString().split(".")[1] ?? "").length, F = (t) => `calc(${t}% + ${(0.5 - t / 100) * R}px)`, X = (t, r) => t && r ? "grid-cols-[auto_minmax(0,1fr)_auto]" : t ? "grid-cols-[auto_minmax(0,1fr)]" : r ? "grid-cols-[minmax(0,1fr)_auto]" : "grid-cols-[minmax(0,1fr)]", le = ({
+  id: t,
   value: r,
-  min: d = 0,
-  max: h = 1,
-  step: x = 0.1,
-  disabled: a,
-  labelProps: l,
-  labels: t,
-  formatValue: m,
-  showValue: p = !1,
-  caption: f,
+  min: m = 0,
+  max: g = 1,
+  step: h = 0.1,
+  disabled: i,
+  labelProps: s,
+  labels: l,
+  formatValue: x,
+  showValue: v = !1,
+  showTooltip: S = !1,
+  showTicks: j = !1,
+  leftContent: N,
+  rightContent: y,
+  caption: b,
   error: c,
-  onChange: g,
-  containerClassName: $,
-  trackClassName: F,
-  fillClassName: M,
-  className: S,
-  ...u
+  onChange: w,
+  containerClassName: z,
+  trackClassName: B,
+  fillClassName: E,
+  className: L,
+  ...I
 }) => {
-  const T = w(), s = o ?? T, v = f && !c ? `${s}-caption` : void 0, N = c ? `${s}-error` : void 0, y = h - d, b = y > 0 ? Math.min(100, Math.max(0, (r - d) / y * 100)) : 0, j = `calc(${b}% + ${(0.5 - b / 100) * Z}px)`, I = m ? m(r) : r.toFixed(_(x)), k = A(
-    (E) => {
-      g?.(Number(E.target.value));
+  const A = Z(), o = t ?? A, C = b && !c ? `${o}-caption` : void 0, T = c ? `${o}-error` : void 0, f = g - m, G = f > 0 ? Math.min(100, Math.max(0, (r - m) / f * 100)) : 0, _ = F(G), H = j && !i ? Q(f, h) : [], M = S && !i, u = N != null, $ = y != null, p = x ? x(r) : r.toFixed(W(h)), U = q(
+    (d) => {
+      w?.(Number(d.target.value));
     },
-    [g]
+    [w]
   );
-  return /* @__PURE__ */ n("div", { className: i("flex flex-col gap-2", $), children: [
-    (l || p) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
-      l && /* @__PURE__ */ e(U, { ...l, htmlFor: s }),
-      p && // The input already reports its value to assistive tech, so this is
+  return /* @__PURE__ */ n("div", { className: a("flex flex-col gap-2", z), children: [
+    (s || v) && /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      s && /* @__PURE__ */ e(O, { ...s, htmlFor: o }),
+      v && // The input already reports its value to assistive tech, so this is
       // a visual echo rather than a second announcement.
       /* @__PURE__ */ e(
         "span",
         {
           "aria-hidden": "true",
-          className: i(
+          className: a(
             "dial-small-text ml-auto",
-            a ? "text-control-disable-primary" : "text-primary"
+            i ? "text-control-disable-primary" : "text-primary"
           ),
-          children: I
+          children: p
         }
       )
     ] }),
     /* @__PURE__ */ n("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: i(
-              "pointer-events-none absolute inset-x-0 h-1 rounded-full",
-              a ? "bg-control-disable-primary" : "bg-control-neutral-active",
-              F
-            )
-          }
-        ),
-        /* @__PURE__ */ e(
-          "div",
-          {
-            className: i(
-              "pointer-events-none absolute left-0 h-1 rounded-full",
-              a ? "bg-control-disable-secondary" : "bg-control-accent",
-              M
-            ),
-            style: { width: j }
-          }
-        ),
-        /* @__PURE__ */ e(
-          "input",
-          {
-            ...u,
-            type: "range",
-            id: s,
-            value: r,
-            min: d,
-            max: h,
-            step: x,
-            disabled: a,
-            onChange: k,
-            "aria-label": B(
-              typeof l?.label != "string" ? u["aria-label"] : void 0
-            ),
-            "aria-valuetext": m ? I : void 0,
-            "aria-describedby": N ?? v,
-            className: i(
-              "dial-kit-slider absolute inset-0 h-full w-full",
-              S
+      /* @__PURE__ */ n(
+        "div",
+        {
+          className: a(
+            "grid items-center gap-x-3 gap-y-1",
+            X(u, $),
+            // Room for the value bubble, which hangs above the track row.
+            M && "mt-7"
+          ),
+          children: [
+            u && /* @__PURE__ */ e("div", { className: "flex items-center", children: N }),
+            /* @__PURE__ */ n("div", { className: "relative flex h-6 items-center", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: a(
+                    "pointer-events-none absolute inset-x-0 h-1 rounded-full",
+                    i ? "bg-control-disable-primary" : "bg-control-accent-muted",
+                    B
+                  )
+                }
+              ),
+              H.map((d) => /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute size-0.5 -translate-x-1/2 rounded-full bg-control-neutral-default",
+                  style: { left: F(d) }
+                },
+                d
+              )),
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: a(
+                    "pointer-events-none absolute left-0 h-1 rounded-full",
+                    i ? "bg-control-disable-secondary" : "bg-control-accent",
+                    E
+                  ),
+                  style: { width: _ }
+                }
+              ),
+              M && // A visual echo like `showValue`: the input already announces
+              // its value, so the bubble stays out of the accessibility tree.
+              /* @__PURE__ */ n(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute bottom-full mb-0.5 flex -translate-x-1/2 flex-col items-center",
+                  style: { left: _ },
+                  children: [
+                    /* @__PURE__ */ e("span", { className: "whitespace-nowrap rounded-md bg-control-inverted px-2 py-0.5 dial-small-text text-control-inverted shadow-xs", children: p }),
+                    /* @__PURE__ */ e(
+                      "svg",
+                      {
+                        width: "8",
+                        height: "4",
+                        viewBox: "0 0 8 4",
+                        className: "fill-control-inverted",
+                        children: /* @__PURE__ */ e("path", { d: "M0 0h8L4 4z" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  ...I,
+                  type: "range",
+                  id: o,
+                  value: r,
+                  min: m,
+                  max: g,
+                  step: h,
+                  disabled: i,
+                  onChange: U,
+                  "aria-label": D(
+                    typeof s?.label != "string" ? I["aria-label"] : void 0
+                  ),
+                  "aria-valuetext": x ? p : void 0,
+                  "aria-describedby": T ?? C,
+                  className: a(
+                    "dial-kit-slider absolute inset-0 h-full w-full",
+                    L
+                  )
+                }
+              )
+            ] }),
+            $ && /* @__PURE__ */ e("div", { className: "flex items-center", children: y }),
+            l && /* @__PURE__ */ e(
+              "div",
+              {
+                className: a(
+                  "dial-tiny-text flex text-secondary",
+                  u && "col-start-2"
+                ),
+                children: l.length === 3 ? /* @__PURE__ */ n(k, { children: [
+                  /* @__PURE__ */ e("span", { children: l[0] }),
+                  /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: l[1] }),
+                  /* @__PURE__ */ e("span", { children: l[2] })
+                ] }) : /* @__PURE__ */ n(k, { children: [
+                  /* @__PURE__ */ e("span", { children: l[0] }),
+                  /* @__PURE__ */ e("span", { className: "ml-auto", children: l[1] })
+                ] })
+              }
             )
-          }
-        )
-      ] }),
-      t && /* @__PURE__ */ e("div", { className: "dial-tiny-text flex text-secondary", children: t.length === 3 ? /* @__PURE__ */ n(C, { children: [
-        /* @__PURE__ */ e("span", { children: t[0] }),
-        /* @__PURE__ */ e("span", { className: "flex-1 text-center", children: t[1] }),
-        /* @__PURE__ */ e("span", { children: t[2] })
-      ] }) : /* @__PURE__ */ n(C, { children: [
-        /* @__PURE__ */ e("span", { children: t[0] }),
-        /* @__PURE__ */ e("span", { className: "ml-auto", children: t[1] })
-      ] }) }),
-      /* @__PURE__ */ e(H, { id: N, text: c }),
-      !c && /* @__PURE__ */ e(L, { id: v, text: f })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(J, { id: T, text: c }),
+      !c && /* @__PURE__ */ e(K, { id: C, text: b })
     ] })
   ] });
 };
 export {
-  O as Slider
+  le as Slider
 };

package/dist/components/New/Slider/utils.js

@@ -0,0 +1,12 @@
+const e = (r, t) => {
+  if (r <= 0 || t <= 0)
+    return [];
+  const o = Math.floor(r / t + 1e-9);
+  return Array.from(
+    { length: o + 1 },
+    (n, c) => c * t / r * 100
+  );
+};
+export {
+  e as getTickPercents
+};