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

package/dist/src/components/New/Slider/Slider.d.ts

@@ -1,4 +1,4 @@
-import { FC, InputHTMLAttributes } from 'react';
+import { FC, InputHTMLAttributes, ReactNode } from 'react';
 import { LabelProps } from '../Label/Label';
 type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'size'>;
 export interface SliderProps extends NativeInputProps {
@@ -14,6 +14,14 @@ export interface SliderProps extends NativeInputProps {
     formatValue?: (value: number) => string;
     /** Renders the current value at the end of the label row */
     showValue?: boolean;
+    /** Renders the current value in a bubble above the thumb */
+    showTooltip?: boolean;
+    /** Renders a tick mark at every value the thumb can snap to */
+    showTicks?: boolean;
+    /** Content before the track, e.g. an icon */
+    leftContent?: ReactNode;
+    /** Content after the track, e.g. a `NumberInput` or the formatted value */
+    rightContent?: ReactNode;
     caption?: string;
     error?: string;
     onChange?: (value: number) => void;
@@ -39,6 +47,13 @@ export interface SliderProps extends NativeInputProps {
  * />
  * ```
  *
+ * With `showTooltip` the value sits in a bubble above the thumb, and with
+ * `showTicks` the track marks every value the thumb snaps to — the discrete
+ * slider of the design. `leftContent` and `rightContent` are the container's
+ * side slots, centred on the track: an icon on the left, a `NumberInput` or the
+ * formatted value on the right. The kit does not wire a `NumberInput` to the
+ * slider; the caller passes both the same `value` and `onChange`.
+ *
  * Built on a native `<input type="range">`, so the browser owns the drag, the
  * arrow / Home / End steps, touch and the writing direction. Only the thumb is
  * restyled; the track and its fill are separate elements so the fill can be
@@ -58,6 +73,10 @@ export interface SliderProps extends NativeInputProps {
  * @param [labels] - 2 or 3 strings rendered below the track (start, [middle,] end)
  * @param [formatValue] - Custom formatter for the displayed value; also becomes the announced `aria-valuetext`
  * @param [showValue=false] - Renders the current value at the end of the label row
+ * @param [showTooltip=false] - Renders the current value in a bubble above the thumb; hidden while disabled
+ * @param [showTicks=false] - Renders a tick mark at every step on the unfilled track; hidden while disabled
+ * @param [leftContent] - Content before the track, vertically centred on it
+ * @param [rightContent] - Content after the track, vertically centred on it
  * @param [caption] - Helper text rendered below the track, and described by the slider
  * @param [error] - Error message rendered below the track; replaces the caption
  * @param [onChange] - Callback fired with the new value

package/dist/src/components/New/Slider/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Percent positions of every value a slider thumb can snap to, from `min` (0)
+ * up. A step that does not divide the range stops short of `max`, the way the
+ * native range input does.
+ */
+export declare const getTickPercents: (range: number, step: number) => number[];

package/dist/src/components/New/Slider/utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.15.0-dev.46",
+  "version": "0.15.0-dev.48",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",

package/dist/JsonEditor-BDe6elKO.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("./lazy-BEsZqouS.cjs"),c=require("@monaco-editor/react");function g(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const f=g(c),b={[a.EditorThemes.dark]:{base:"vs-dark",inherit:!1,rules:[{token:"string.key.json",foreground:"#37BABC"},{token:"string.value.json",foreground:"#5C8DEA"},{token:"number",foreground:"#D97C27"},{token:"keyword.json",foreground:"#F4CE46"},{token:"delimiter",foreground:"#EEF1F7"},{token:"delimiter.bracket.json",foreground:"#A972FF"},{token:"delimiter.parenthesis",foreground:"#A972FF"}],colors:{"editor.foreground":"#F76464","editor.background":"#161B2D","editorCursor.foreground":"#EEF1F7","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}},[a.EditorThemes.light]:{base:"vs",inherit:!1,rules:[{token:"string.key.json",foreground:"#009D9F"},{token:"string.value.json",foreground:"#2764D9"},{token:"number",foreground:"#B25500"},{token:"keyword.json",foreground:"#3F3D25"},{token:"delimiter",foreground:"#161B2D"},{token:"delimiter.bracket.json",foreground:"#7E39EC"},{token:"delimiter.parenthesis",foreground:"#7E39EC"}],colors:{"editor.foreground":"#AE2F2F","editor.background":"#EEF1F7","editorCursor.foreground":"#161B2D","editor.selectionBackground":"#5C8DEA2B","editorLineNumber.foreground":"#242C42","scrollbarSlider.background":"#242C42","scrollbarSlider.hoverBackground":"#242C42","scrollbarSlider.activeBackground":"#242C42"}}},k=({value:e,onChange:o,onValidateJSON:r,options:t,currentTheme:n,themesConfig:s=b})=>{function d(i){i?.editor?.defineTheme(n,s[n]),i.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}=f;return u.jsx(l,{beforeMount:d,height:"100%",defaultLanguage:"json",value:e,onChange:o,theme:n,onValidate:r,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},...t??{}}})};exports.DialJsonEditor=k;

package/dist/MarkdownEditorContainer-GvlxX6kx.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),m=require("./Switch-DE6MrcqJ.cjs"),E=require("./lazy-BEsZqouS.cjs"),N=require("./MarkdownEditor-FVzYMdkC.cjs"),b=({value:r,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-BDe6elKO.cjs")).then(s=>{p(()=>s.DialJsonEditor)})},[t]);const h=n.useCallback(s=>{l?.(s)},[l]),S=n.useCallback(s=>{x?.(s)},[x]),o=!!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||o)&&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,o&&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)})})]})]}),o&&t?e.jsx("div",{className:"border border-primary rounded",style:{height:`${c}px`},children:f&&e.jsx(f,{value:r,onChange:h,onValidateJSON:S,currentTheme:u})}):e.jsx(N.DialMarkdownEditor,{value:r,onChange:h,height:c,preview:j,theme:u})]})})})};exports.DialMarkdownEditorContainer=b;

package/dist/lazy-BEsZqouS.cjs

@@ -1 +0,0 @@
-"use strict";var o=(r=>(r.dark="dark",r.light="light",r))(o||{});const e=()=>Promise.resolve().then(()=>require("./JsonEditor-BDe6elKO.cjs")),i=()=>Promise.resolve().then(()=>require("./MarkdownEditor-FVzYMdkC.cjs")),a=()=>Promise.resolve().then(()=>require("./MarkdownEditor-C7BONfsl.cjs"));exports.EditorThemes=o;exports.LazyDialJsonEditor=e;exports.LazyDialMarkdownEditor=i;exports.LazyMarkdownEditor=a;