@epam/ai-dial-ui-kit 0.13.0-dev.46 → 0.13.0-dev.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{JsonEditor-Cl5BZ9IK.cjs → JsonEditor-CLsxQdUS.cjs} +1 -1
- package/dist/{JsonEditor-B4BqjBna.js → JsonEditor-q69KAZgG.js} +1 -1
- package/dist/{MarkdownEditor-lv9E8Kpw.js → MarkdownEditor-BN9xSEkJ.js} +1 -1
- package/dist/{MarkdownEditor-DqEBxI4i.cjs → MarkdownEditor-Bwk2g630.cjs} +1 -1
- package/dist/{MarkdownEditor-BAH5On-R.cjs → MarkdownEditor-CA4vVhM9.cjs} +1 -1
- package/dist/{MarkdownEditor-Xk7K6Id1.js → MarkdownEditor-YmOUAznJ.js} +1 -1
- package/dist/components-manifest.json +90 -4
- package/dist/dial-ui-kit.cjs.js +1 -1
- package/dist/dial-ui-kit.es.js +196 -195
- package/dist/{index-CgvmTOs2.cjs → index-4pKKJMY3.cjs} +18 -18
- package/dist/{index-CeLekRpz.js → index-Dz1y2i8X.js} +909 -817
- package/dist/index.css +2 -2
- package/dist/src/components/New/Accordion/Accordion.d.ts +70 -0
- package/dist/src/index.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("./index-4pKKJMY3.cjs"),l=require("@monaco-editor/react"),u={[r.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"}},[r.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"}}},c=({value:n,onChange:t,onValidateJSON:i,options:s,currentTheme:e,themesConfig:d=u})=>{function a(o){o?.editor?.defineTheme(e,d[e]),o.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}}]})}return r.jsxRuntimeExports.jsx(l.Editor,{beforeMount:a,height:"100%",defaultLanguage:"json",value:n,onChange:t,theme:e,onValidate:i,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},...s??{}}})};exports.DialJsonEditor=c;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./index-4pKKJMY3.cjs"),x=require("react"),e=require("@uiw/react-md-editor"),t=require("@tabler/icons-react"),o=s.DIAL_ICON_SIZE.MD,i=(n,r)=>({...n,icon:r}),p=()=>[i(e.bold,s.jsxRuntimeExports.jsx(t.IconBold,{size:o})),i(e.italic,s.jsxRuntimeExports.jsx(t.IconItalic,{size:o})),i(e.strikethrough,s.jsxRuntimeExports.jsx(t.IconStrikethrough,{size:o})),e.divider,e.group([e.heading1,e.heading2,e.heading3],{name:"heading",groupName:"heading",icon:s.jsxRuntimeExports.jsx(t.IconTextSize,{size:o}),buttonProps:{"aria-label":"Text style",title:"Text style"}}),e.divider,i(e.unorderedListCommand,s.jsxRuntimeExports.jsx(t.IconList,{size:o})),i(e.orderedListCommand,s.jsxRuntimeExports.jsx(t.IconListNumbers,{size:o})),e.divider,i(e.quote,s.jsxRuntimeExports.jsx(t.IconQuote,{size:o})),i(e.link,s.jsxRuntimeExports.jsx(t.IconLink,{size:o})),i(e.code,s.jsxRuntimeExports.jsx(t.IconCode,{size:o})),e.divider,i(e.table,s.jsxRuntimeExports.jsx(t.IconColumns2,{size:o}))],I=()=>[i(e.codeEdit,s.jsxRuntimeExports.jsx(t.IconPencil,{size:o})),i(e.codeLive,s.jsxRuntimeExports.jsx(t.IconLayoutColumns,{size:o})),i(e.codePreview,s.jsxRuntimeExports.jsx(t.IconEye,{size:o})),e.divider,i(e.fullscreen,s.jsxRuntimeExports.jsx(t.IconMaximize,{size:o}))],R=({value:n,onChange:r,height:d=300,theme:c=s.EditorThemes.light,className:m,placeholder:a,defaultPreview:u="edit"})=>{const j=x.useMemo(()=>p(),[]),l=x.useMemo(()=>I(),[]);return s.jsxRuntimeExports.jsx("div",{"data-color-mode":c,className:s.mergeClasses("dial-kit-markdown-editor",m),children:s.jsxRuntimeExports.jsx(e,{value:n,onChange:E=>r?.(E||""),height:d,preview:u,commands:j,extraCommands:l,textareaProps:{placeholder:a}})})};exports.MarkdownEditor=R;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-4pKKJMY3.cjs"),c=require("@uiw/react-md-editor"),x=({value:t,onChange:s,height:r=300,preview:i="edit",theme:n=e.EditorThemes.dark,className:a,placeholder:o})=>{const d=o!==void 0&&!t;return e.jsxRuntimeExports.jsxs("div",{"data-color-mode":n,className:e.mergeClasses("relative",a),children:[e.jsxRuntimeExports.jsx(c,{value:t,onChange:l=>s?.(l||""),height:r,preview:i}),d&&e.jsxRuntimeExports.jsx("div",{className:"pointer-events-none absolute left-0 top-8 px-2 dial-small-text text-secondary opacity-40",children:o})]})};exports.DialMarkdownEditor=x;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { j as e, D as u, E as z, m as g } from "./index-
|
|
1
|
+
import { j as e, D as u, E as z, m as g } from "./index-Dz1y2i8X.js";
|
|
2
2
|
import { useMemo as r } from "react";
|
|
3
3
|
import h, { divider as i, group as C, heading1 as p, heading2 as E, heading3 as k, bold as L, italic as M, strikethrough as w, unorderedListCommand as N, orderedListCommand as b, quote as f, link as v, code as D, table as O, codeEdit as T, codeLive as _, codePreview as y, fullscreen as P } from "@uiw/react-md-editor";
|
|
4
4
|
import { IconTextSize as S, IconBold as A, IconItalic as R, IconStrikethrough as B, IconList as Z, IconListNumbers as q, IconQuote as F, IconLink as K, IconCode as Q, IconColumns2 as W, IconPencil as G, IconLayoutColumns as H, IconEye as J, IconMaximize as U } from "@tabler/icons-react";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.0-dev.
|
|
3
|
-
"generatedAt": "2026-08-
|
|
2
|
+
"version": "0.13.0-dev.47",
|
|
3
|
+
"generatedAt": "2026-08-10T12:57:00.404Z",
|
|
4
4
|
"kit": {
|
|
5
5
|
"name": "@epam/ai-dial-ui-kit",
|
|
6
6
|
"description": "A modern UI kit for building AI DIAL interfaces with React",
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
"setupNotes": "## Next.js Integration\n1. Install the package and peer dependencies that are not currently in your project\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom @tabler/icons-react classnames\nnpm install @floating-ui/react monaco-editor @monaco-editor/react\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n return (\n <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n <h1>Test library</h1>\n <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n </div>\n );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
|
|
22
22
|
},
|
|
23
23
|
"styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class | Weight | Size / Line-height |\n| --------------------------------- | -------- | ----------------------- |\n| `.dial-display1-text` | semibold | 32px / 48px |\n| `.dial-display2-text` | semibold | 28px / 40px |\n| `.dial-h1-text` | semibold | 22px / 32px |\n| `.dial-h2-text` | semibold | 20px / 28px |\n| `.dial-h3-text` | semibold | 18px / 26px |\n| `.dial-body-text` | normal | 16px / 24px |\n| `.dial-body-semi-text` | semibold | 16px / 24px |\n| `.dial-body-paragraph-text` | normal | 16px / 26px |\n| `.dial-body-paragraph-semi-text` | semibold | 16px / 26px |\n| `.dial-small-text` | normal | 14px / 20px |\n| `.dial-small-semi-text` | semibold | 14px / 20px |\n| `.dial-small-paragraph-text` | normal | 14px / 24px |\n| `.dial-small-paragraph-semi-text` | semibold | 14px / 24px |\n| `.dial-tiny-text` | normal | 12px / 16px |\n| `.dial-tiny-lead-text` | normal | 12px / 16px (+0.03em) |\n| `.dial-tiny-semi-text` | semibold | 12px / 16px |\n| `.dial-caption-text` | normal | 10px / 12px |\n| `.dial-caption-semi-text` | semibold | 10px / 12px (+0.06em) |\n| `.dial-code-text` | normal | 14px / 20px (monospace) |\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
|
|
24
|
-
"theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" /> // darkest background\n<div className=\"bg-layer-1\" /> // main content area\n<div className=\"bg-layer-2\" /> // elevated panels\n\n// Text\n<span className=\"text-primary\" /> // main text color\n<span className=\"text-secondary\" /> // muted text\n<span className=\"text-error\" /> // error state\n\n// Borders\n<div className=\"border border-primary\" /> // standard border\n<div className=\"border border-error\" /> // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n --bg-layer-0: #000000;\n --bg-layer-1: #0c101d;\n --bg-layer-2: #161b2d;\n --bg-layer-3: #1d2439;\n --text-primary: #eef1f7;\n --text-secondary: #9fa6bd;\n --text-error: #f76464;\n --stroke-primary: #696e7c;\n --controls-bg-accent-primary: #3664e2;\n /* ... see tailwind.config.js for full list */\n}\n```\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n\n### controlsBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent` | `var(--bg-control-accent)` | `#124ACE` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover` | `var(--bg-control-neutral-hover)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F764641A` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable` | `var(--bg-control-disable)` | `#
|
|
24
|
+
"theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" /> // darkest background\n<div className=\"bg-layer-1\" /> // main content area\n<div className=\"bg-layer-2\" /> // elevated panels\n\n// Text\n<span className=\"text-primary\" /> // main text color\n<span className=\"text-secondary\" /> // muted text\n<span className=\"text-error\" /> // error state\n\n// Borders\n<div className=\"border border-primary\" /> // standard border\n<div className=\"border border-error\" /> // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n --bg-layer-0: #000000;\n --bg-layer-1: #0c101d;\n --bg-layer-2: #161b2d;\n --bg-layer-3: #1d2439;\n --text-primary: #eef1f7;\n --text-secondary: #9fa6bd;\n --text-error: #f76464;\n --stroke-primary: #696e7c;\n --controls-bg-accent-primary: #3664e2;\n /* ... see tailwind.config.js for full list */\n}\n```\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-sunken` | `var(--bg-layer-sunken)` | `#EEF1F7` |\n| `layer-base` | `var(--bg-layer-base)` | `#F5F7FA` |\n| `layer-raised` | `var(--bg-layer-raised)` | `#FCFCFC` |\n\n### controlsBgColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `control-accent-alpha` | `var(--bg-control-accent-alpha)` | `#2764D90F` |\n| `control-accent-alpha-hover` | `var(--bg-control-accent-alpha-hover)` | `#2764D924` |\n| `control-accent-alpha-active` | `var(--bg-control-accent-alpha-active)` | `#2764D933` |\n| `control-accent` | `var(--bg-control-accent)` | `#124ACE` |\n| `control-neutral` | `var(--bg-control-neutral)` | `#FCFCFC` |\n| `control-neutral-hover` | `var(--bg-control-neutral-hover)` | `#E0E6F0` |\n| `control-neutral-active` | `var(--bg-control-neutral-active)` | `#D1DBEA` |\n| `control-error` | `var(--bg-control-error)` | `#AE2F2F` |\n| `control-error-hover` | `var(--bg-control-error-hover)` | `#BF3939` |\n| `control-error-active` | `var(--bg-control-error-active)` | `#CC4545` |\n| `control-error-alpha-hover` | `var(--bg-control-error-alpha-hover)` | `#F764641A` |\n| `control-error-alpha-active` | `var(--bg-control-error-alpha-active)` | `#F7646433` |\n| `control-disable` | `var(--bg-control-disable)` | `#DCE0E8` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `hover-alpha` | `var(--stroke-hover-alpha)` | `#2764D933` |\n| `focus-black` | `var(--stroke-focus-black)` | `#161B2D` |\n| `focus-blue` | `var(--stroke-focus-blue)` | `#6785FB` |\n| `accent-alpha` | `var(--stroke-accent-alpha)` | `#2764D933` |\n| `error-alpha` | `var(--stroke-error-alpha)` | `#AE2F2F73` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `warning-icon` | `var(--text-warning-icon)` | `#EEC840` |\n\n### controlsTextColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `control-permanent` | `var(--text-control-permanent)` | `#FCFCFC` |\n| `control-disable-alpha` | `var(--text-control-disable-alpha)` | `#848E9C` |\n| `control-disable-beta` | `var(--text-control-disable-beta)` | `#DCE0E8` |\n| `control-blue-hover` | `var(--text-control-blue-hover)` | `#5976E9` |\n| `control-blue-active` | `var(--text-control-blue-active)` | `#6785FB` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#FCFCFC` |\n| `layer-1` | `var(--bg-layer-1)` | `#E0E6F0` |\n| `layer-2` | `var(--bg-layer-2)` | `#EEF1F7` |\n| `layer-3` | `var(--bg-layer-3)` | `#FCFCFC` |\n| `layer-4` | `var(--bg-layer-4)` | `#D1DBEA` |\n| `accent-primary-alpha` | `var(--bg-accent-primary-alpha)` | `#7DA4FF26` |\n| `accent-secondary-alpha` | `var(--bg-accent-secondary-alpha)` | `#37BABC2E` |\n| `accent-tertiary-alpha` | `var(--bg-accent-tertiary-alpha)` | `#A972FF2E` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5C8DEA` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37BABC` |\n| `red-400` | `var(--bg-red-400)` | `#F76464` |\n| `controls-accent-primary` | `var(--controls-bg-accent-primary)` | `#124ACE` |\n| `controls-accent-primary-hover` | `var(--controls-bg-accent-primary-hover)` | `#2656D9` |\n| `controls-accent-primary-active` | `var(--controls-bg-accent-primary-active)` | `#3664E2` |\n| `controls-accent-primary-alpha-active` | `var(--controls-bg-accent-primary-alpha-active)` | `#7DA4FF5C` |\n| `controls-accent-secondary-alpha-active` | `var(--controls-bg-accent-secondary-alpha-active)` | `#37BABC5C` |\n| `controls-accent-tertiary-alpha-active` | `var(--controls-bg-accent-tertiary-alpha-active)` | `#A972FF5C` |\n| `controls-error` | `var(--controls-bg-error)` | `#AE2F2F` |\n| `controls-error-hover` | `var(--controls-bg-error-hover)` | `#BF3939` |\n| `controls-error-active` | `var(--controls-bg-error-active)` | `#CC4545` |\n| `controls-error-alpha-active` | `var(--controls-bg-error-alpha-active)` | `#F764645C` |\n| `controls-disable-accent` | `var(--controls-bg-disable-accent)` | `#7C8293` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#D1DBEA` |\n| `controls-neutral-hover` | `var(--controls-bg-neutral-hover)` | `#D1DBEA` |\n| `controls-neutral-active` | `var(--controls-bg-neutral-active)` | `#9FA6BD` |\n| `controls-accent-success-alpha-hover` | `var(--controls-bg-accent-success-alpha-hover)` | `#37BABC2E` |\n| `controls-accent-success-alpha-active` | `var(--controls-bg-accent-success-alpha-active)` | `#37BABC5C` |\n| `controls-enable-primary` | `var(--controls-enable-primary)` | `#FCFCFC` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ACE` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5C8DEA` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7DA4FF` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37BABC` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#A972FF` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#FCFCFC` |\n| `controls-accent-disable` | `var(--controls-text-accent-disable)` | `#D1DBEA` |\n| `controls-primary-disable` | `var(--controls-text-primary-disable)` | `#696E7C` |\n| `controls-secondary-disable` | `var(--controls-text-secondary-disable)` | `#9FA6BD` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161B2D` |\n| `controls-accent-primary-hover` | `var(--controls-text-accent-primary-hover)` | `#3664E2` |\n| `controls-accent-primary-active` | `var(--controls-text-accent-primary-active)` | `#7DA4FF` |",
|
|
25
25
|
"components": [
|
|
26
26
|
{
|
|
27
27
|
"name": "Spinner",
|
|
@@ -1892,6 +1892,91 @@
|
|
|
1892
1892
|
"examples": [],
|
|
1893
1893
|
"sourceFile": "components/New/CaptionText/CaptionText.tsx"
|
|
1894
1894
|
},
|
|
1895
|
+
{
|
|
1896
|
+
"name": "Accordion",
|
|
1897
|
+
"category": "Components_2_0",
|
|
1898
|
+
"generation": "2.0",
|
|
1899
|
+
"description": "A collapsible panel that toggles its content when the header is clicked.\naliases: Collapse|Disclosure|ExpandablePanel\n\nWorks as a controlled component when `expanded` is provided, otherwise it manages\nits own state from `defaultExpanded`. The header shows a caret that rotates when\nexpanded, a title, and an optional description stacked beneath it.\n\nThe revealed content is a labelled `region`, so assistive tech announces it by the\nheader it belongs to. `nonCollapsible` renders the header as static text instead of\na permanently disabled button, which keeps a decorative panel out of the tab order.",
|
|
1900
|
+
"props": [
|
|
1901
|
+
{
|
|
1902
|
+
"name": "title",
|
|
1903
|
+
"type": "ReactNode",
|
|
1904
|
+
"required": true,
|
|
1905
|
+
"description": "Title rendered in the header."
|
|
1906
|
+
},
|
|
1907
|
+
{
|
|
1908
|
+
"name": "description",
|
|
1909
|
+
"type": "ReactNode",
|
|
1910
|
+
"required": false,
|
|
1911
|
+
"description": "Optional secondary text rendered under the title."
|
|
1912
|
+
},
|
|
1913
|
+
{
|
|
1914
|
+
"name": "children",
|
|
1915
|
+
"type": "ReactNode",
|
|
1916
|
+
"required": false,
|
|
1917
|
+
"description": "Content revealed when expanded."
|
|
1918
|
+
},
|
|
1919
|
+
{
|
|
1920
|
+
"name": "expanded",
|
|
1921
|
+
"type": "boolean",
|
|
1922
|
+
"required": false,
|
|
1923
|
+
"description": "Controlled expanded state."
|
|
1924
|
+
},
|
|
1925
|
+
{
|
|
1926
|
+
"name": "defaultExpanded",
|
|
1927
|
+
"type": "boolean",
|
|
1928
|
+
"required": false,
|
|
1929
|
+
"defaultValue": "false",
|
|
1930
|
+
"description": "Initial expanded state when uncontrolled."
|
|
1931
|
+
},
|
|
1932
|
+
{
|
|
1933
|
+
"name": "disabled",
|
|
1934
|
+
"type": "boolean",
|
|
1935
|
+
"required": false,
|
|
1936
|
+
"description": "Disables toggling."
|
|
1937
|
+
},
|
|
1938
|
+
{
|
|
1939
|
+
"name": "nonCollapsible",
|
|
1940
|
+
"type": "boolean",
|
|
1941
|
+
"required": false,
|
|
1942
|
+
"description": "Renders the panel permanently expanded, with a static header."
|
|
1943
|
+
},
|
|
1944
|
+
{
|
|
1945
|
+
"name": "ariaLabel",
|
|
1946
|
+
"type": "string",
|
|
1947
|
+
"required": false,
|
|
1948
|
+
"description": "Accessible name for the header; needed when `title` carries no text."
|
|
1949
|
+
},
|
|
1950
|
+
{
|
|
1951
|
+
"name": "onToggle",
|
|
1952
|
+
"type": "(expanded: boolean) => void",
|
|
1953
|
+
"required": false,
|
|
1954
|
+
"description": "Fired when the header is clicked. Receives the next expanded state."
|
|
1955
|
+
},
|
|
1956
|
+
{
|
|
1957
|
+
"name": "className",
|
|
1958
|
+
"type": "string",
|
|
1959
|
+
"required": false,
|
|
1960
|
+
"description": "Additional CSS classes for the outer container."
|
|
1961
|
+
},
|
|
1962
|
+
{
|
|
1963
|
+
"name": "headerClassName",
|
|
1964
|
+
"type": "string",
|
|
1965
|
+
"required": false,
|
|
1966
|
+
"description": "Additional CSS classes for the header."
|
|
1967
|
+
},
|
|
1968
|
+
{
|
|
1969
|
+
"name": "contentClassName",
|
|
1970
|
+
"type": "string",
|
|
1971
|
+
"required": false,
|
|
1972
|
+
"description": "Additional CSS classes for the content region."
|
|
1973
|
+
}
|
|
1974
|
+
],
|
|
1975
|
+
"examples": [
|
|
1976
|
+
"<Accordion title=\"Advanced settings\" description=\"Optional configuration\">\n <p>Panel content</p>\n</Accordion>\n\n<Accordion title=\"Always open\" nonCollapsible>\n <p>Panel content</p>\n</Accordion>"
|
|
1977
|
+
],
|
|
1978
|
+
"sourceFile": "components/New/Accordion/Accordion.tsx"
|
|
1979
|
+
},
|
|
1895
1980
|
{
|
|
1896
1981
|
"name": "DialCaptionText",
|
|
1897
1982
|
"category": "Elements",
|
|
@@ -2416,7 +2501,8 @@
|
|
|
2416
2501
|
"examples": [
|
|
2417
2502
|
"<DialAccordion title=\"Advanced settings\" description=\"Optional configuration\">\n <p>Panel content</p>\n</DialAccordion>"
|
|
2418
2503
|
],
|
|
2419
|
-
"sourceFile": "components/Accordion/Accordion.tsx"
|
|
2504
|
+
"sourceFile": "components/Accordion/Accordion.tsx",
|
|
2505
|
+
"supersededBy": "Accordion"
|
|
2420
2506
|
},
|
|
2421
2507
|
{
|
|
2422
2508
|
"name": "DialIcon",
|
package/dist/dial-ui-kit.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./index-4pKKJMY3.cjs");exports.Accordion=a.Accordion;exports.AnalyticsCardVariant=a.AnalyticsCardVariant;exports.BASE_ICON_PROPS=a.BASE_ICON_PROPS;exports.BASE_ICON_SIZE=a.BASE_ICON_SIZE;exports.Button=a.Button;exports.ButtonAppearance=a.ButtonAppearance;exports.ButtonDropdown=a.ButtonDropdown;exports.ButtonVariant=a.ButtonVariant;exports.Calendar=a.Calendar;exports.CalendarMode=a.CalendarMode;exports.CaptionText=a.CaptionText;exports.CardShell=a.CardShell;exports.CloseButton=a.CloseButton;exports.ConfirmationPopup=a.ConfirmationPopup;exports.ConfirmationPopupVariant=a.ConfirmationPopupVariant;exports.DEFAULT_ANALYTICS_BAR_COLOR_MAP=a.DEFAULT_ANALYTICS_BAR_COLOR_MAP;exports.DEFAULT_GRID_DATE_FORMAT_OPTIONS=a.DEFAULT_DATE_FORMAT_OPTIONS;exports.DEFAULT_GRID_DATE_LOCALE=a.DEFAULT_LOCALE;exports.DIAL_ICON_SIZE=a.DIAL_ICON_SIZE;exports.DangerButton=a.DangerButton;exports.DangerIconButton=a.DangerIconButton;exports.DialAccordion=a.DialAccordion;exports.DialAnalyticsBar=a.DialAnalyticsBar;exports.DialAnalyticsBarGroup=a.DialAnalyticsBarGroup;exports.DialAnalyticsCard=a.DialAnalyticsCard;exports.DialAnalyticsErrorTag=a.DialAnalyticsErrorTag;exports.DialAnalyticsHistogram=a.DialAnalyticsHistogram;exports.DialAutocompleteInputValue=a.DialAutocompleteInputValue;exports.DialBreadcrumb=a.DialBreadcrumb;exports.DialBreadcrumbItem=a.DialBreadcrumbItem;exports.DialButton=a.DialButton;exports.DialButtonDropdown=a.DialButtonDropdown;exports.DialCaptionText=a.DialCaptionText;exports.DialCheckbox=a.DialCheckbox;exports.DialCloseButton=a.DialCloseButton;exports.DialCollapsibleSidebar=a.DialCollapsibleSidebar;exports.DialConditionalResizableContainer=a.DialConditionalResizableContainer;exports.DialConfirmationPopup=a.DialConfirmationPopup;exports.DialDangerButton=a.DialDangerButton;exports.DialDangerIconButton=a.DialDangerIconButton;exports.DialDateCellRenderer=a.DialDateCellRenderer;exports.DialDestinationFolderPopup=a.DialDestinationFolderPopup;exports.DialDraggableItem=a.DialDraggableItem;exports.DialDropdown=a.DialDropdown;exports.DialDropdownIcon=a.DialDropdownIcon;exports.DialEllipsisTooltip=a.DialEllipsisTooltip;exports.DialErrorText=a.DialErrorText;exports.DialFileIcon=a.DialFileIcon;exports.DialFileManager=a.DialFileManager;exports.DialFileManagerActions=a.DialFileManagerActions;exports.DialFileManagerTabs=a.DialFileManagerTabs;exports.DialFileName=a.DialFileName;exports.DialFileNodeType=a.DialFileNodeType;exports.DialFilePermission=a.DialFilePermission;exports.DialFileResourceType=a.DialFileResourceType;exports.DialFolderName=a.DialFolderName;exports.DialFoldersTree=a.DialFoldersTree;exports.DialFormItem=a.DialFormItem;exports.DialFormPopup=a.DialFormPopup;exports.DialGhostButton=a.DialGhostButton;exports.DialGhostIconButton=a.DialGhostIconButton;exports.DialGrid=a.DialGrid;exports.DialIcon=a.DialIcon;exports.DialIconButton=a.DialIconButton;exports.DialInput=a.DialInput;exports.DialInputPopup=a.DialInputPopup;exports.DialItemType=a.DialItemType;exports.DialLabel=a.DialLabel;exports.DialLabelledText=a.DialLabelledText;exports.DialLinkButton=a.DialLinkButton;exports.DialLoadFileArea=a.DialLoadFileArea;exports.DialLoadFileAreaField=a.DialLoadFileAreaField;exports.DialLoader=a.DialLoader;exports.DialNeutralButton=a.DialNeutralButton;exports.DialNeutralIconButton=a.DialNeutralIconButton;exports.DialNoDataContent=a.DialNoDataContent;exports.DialNotification=a.DialNotification;exports.DialNumberInput=a.DialNumberInput;exports.DialPagination=a.DialPagination;exports.DialPasswordInput=a.DialPasswordInput;exports.DialPopup=a.DialPopup;exports.DialPrimaryButton=a.DialPrimaryButton;exports.DialPrimaryIconButton=a.DialPrimaryIconButton;exports.DialProgressBar=a.DialProgressBar;exports.DialProgressBarSize=a.DialProgressBarSize;exports.DialRadioButton=a.DialRadioButton;exports.DialRadioGroup=a.DialRadioGroup;exports.DialRadioGroupPopupField=a.DialRadioGroupPopupField;exports.DialRemoveButton=a.DialRemoveButton;exports.DialResizableContainer=a.DialResizableContainer;exports.DialSchemaRenderer=a.DialSchemaRenderer;exports.DialSearch=a.DialSearch;exports.DialSecondaryIconButton=a.DialSecondaryIconButton;exports.DialSegmentedControl=a.DialSegmentedControl;exports.DialSelect=a.DialSelect;exports.DialSelectField=a.DialSelectField;exports.DialSharedEntityIndicator=a.DialSharedEntityIndicator;exports.DialSlider=a.DialSlider;exports.DialSteps=a.DialSteps;exports.DialSuccessIconButton=a.DialSuccessIconButton;exports.DialSwitch=a.DialSwitch;exports.DialTabs=a.DialTabs;exports.DialTag=a.DialTag;exports.DialTagInput=a.DialTagInput;exports.DialTertiaryIconButton=a.DialTertiaryIconButton;exports.DialTextarea=a.DialTextarea;exports.DialTooltip=a.DialTooltip;exports.DialTooltipContainer=a.DialTooltipContainer;exports.DialTooltipContent=a.DialTooltipContent;exports.DialTooltipTrigger=a.DialTooltipTrigger;exports.Dropdown=a.Dropdown;exports.DropdownItemType=a.DropdownItemType;exports.DropdownTrigger=a.DropdownTrigger;exports.DropdownType=a.DropdownType;exports.EDITABLE_CONTAINER_ATTRIBUTE=a.EDITABLE_CONTAINER_ATTRIBUTE;exports.EditorThemes=a.EditorThemes;exports.ElementSize=a.ElementSize;exports.ErrorMessageNotification=a.ErrorMessageNotification;exports.ErrorText=a.ErrorText;exports.ErrorToastNotification=a.ErrorToastNotification;exports.FabButton=a.FabButton;exports.FileManagerColumnKey=a.FileManagerColumnKey;exports.FileManagerProvider=a.FileManagerProvider;exports.FlexibleActionsDirection=a.FlexibleActionsDirection;exports.FolderPath=a.FolderPath;exports.FormItemOrientation=a.FormItemOrientation;exports.GhostButton=a.GhostButton;exports.GhostIconButton=a.GhostIconButton;exports.GridSelectionMode=a.GridSelectionMode;exports.Highlight=a.Highlight;exports.IconButton=a.IconButton;exports.InfoButton=a.InfoButton;exports.InfoMessageNotification=a.InfoMessageNotification;exports.InfoToastNotification=a.InfoToastNotification;exports.InlineSelect=a.InlineSelect;exports.InlineSelectTrigger=a.InlineSelectTrigger;exports.Input=a.Input;exports.JsonSchemaType=a.JsonSchemaType;exports.Label=a.Label;exports.LazyDialJsonEditor=a.LazyDialJsonEditor;exports.LazyDialMarkdownEditor=a.LazyDialMarkdownEditor;exports.LazyMarkdownEditor=a.LazyMarkdownEditor;exports.LinkButton=a.LinkButton;exports.LoadingMessageNotification=a.LoadingMessageNotification;exports.LoadingToastNotification=a.LoadingToastNotification;exports.MultiSelectTags=a.MultiSelectTags;exports.NAME_COLUMN=a.NAME_COLUMN;exports.NOT_ALLOWED_SPACES=a.NOT_ALLOWED_SPACES;exports.NOT_ALLOWED_SPACES_REGEXP=a.NOT_ALLOWED_SPACES_REGEXP;exports.NOT_ALLOWED_SYMBOLS=a.NOT_ALLOWED_SYMBOLS;exports.NOT_ALLOWED_SYMBOLS_REGEXP=a.NOT_ALLOWED_SYMBOLS_REGEXP;exports.NeutralButton=a.NeutralButton;exports.NeutralIconButton=a.NeutralIconButton;exports.Notification=a.Notification;exports.NotificationType=a.NotificationType;exports.NotificationVariant=a.NotificationVariant;exports.NumberInput=a.NumberInput;exports.OutlinedButton=a.OutlinedButton;exports.PasswordInput=a.PasswordInput;exports.Popup=a.Popup;exports.PopupSize=a.PopupSize;exports.PrimaryButton=a.PrimaryButton;exports.PrimaryIconButton=a.PrimaryIconButton;exports.RadioGroupOrientation=a.RadioGroupOrientation;exports.ResizableContainerSide=a.ResizableContainerSide;exports.SIZE_COLUMN=a.SIZE_COLUMN;exports.SchemaDisplayMode=a.SchemaDisplayMode;exports.SchemaOrientation=a.SchemaOrientation;exports.SchemaRendererVariant=a.SchemaRendererVariant;exports.ScreenResolution=a.ScreenResolution;exports.Select=a.Select;exports.SelectSize=a.SelectSize;exports.SelectVariant=a.SelectVariant;exports.Skeleton=a.Skeleton;exports.SkeletonAvatarShape=a.SkeletonAvatarShape;exports.SkeletonAvatarSize=a.SkeletonAvatarSize;exports.SkeletonVariant=a.SkeletonVariant;exports.Spinner=a.Spinner;exports.StaticIconButton=a.StaticIconButton;exports.StepStatus=a.StepStatus;exports.SuccessMessageNotification=a.SuccessMessageNotification;exports.SuccessToastNotification=a.SuccessToastNotification;exports.TabOrientation=a.TabOrientation;exports.TabView=a.TabView;exports.Textarea=a.Textarea;exports.UPDATED_AT_COLUMN=a.UPDATED_AT_COLUMN;exports.WarningMessageNotification=a.WarningMessageNotification;exports.WarningToastNotification=a.WarningToastNotification;exports.convertGridDateToDate=a.convertToDate;exports.editableContainerProps=a.editableContainerProps;exports.mergeClasses=a.mergeClasses;exports.useDialFileManagerTabs=a.useDialFileManagerTabs;exports.useEditableItem=a.useEditableItem;exports.useFileManagerContext=a.useFileManagerContext;exports.wrapInRootFolder=a.wrapInRootFolder;
|