@wallarm-org/design-system 0.1.0

package/dist/components/CodeSnippet/adapters/shiki.js

@@ -0,0 +1,88 @@
+let highlighterPromise = null;
+const SUPPORTED_LANGUAGES = [
+    "javascript",
+    "typescript",
+    'jsx',
+    'tsx',
+    'bash',
+    'shell',
+    'json',
+    'html',
+    'xml',
+    'css',
+    'python',
+    'go',
+    'sql',
+    'yaml',
+    'markdown',
+    'rust',
+    'java',
+    'c',
+    'cpp'
+];
+function mapScopeToTokenType(scopes) {
+    if (!scopes || 0 === scopes.length) return 'plain';
+    const scope = scopes.join(' ').toLowerCase();
+    if (scope.includes('keyword') || scope.includes('storage')) return 'keyword';
+    if (scope.includes('string')) return 'string';
+    if (scope.includes('comment')) return 'comment';
+    if (scope.includes('function') || scope.includes('method')) return 'function';
+    if (scope.includes('number') || scope.includes('numeric')) return 'number';
+    if (scope.includes('operator')) return 'operator';
+    if (scope.includes('punctuation') || scope.includes('bracket') || scope.includes('brace')) return 'punctuation';
+    if (scope.includes('class') || scope.includes('type')) return 'class-name';
+    if (scope.includes('property') || scope.includes('attribute.name')) return 'property';
+    if (scope.includes('tag')) return 'tag';
+    if (scope.includes('attribute')) return 'attr-name';
+    if (scope.includes('boolean') || scope.includes('constant.language')) return 'boolean';
+    if (scope.includes('support') || scope.includes('builtin')) return 'builtin';
+    if (scope.includes('constant')) return 'constant';
+    if (scope.includes('regex') || scope.includes('regexp')) return 'regex';
+    if (scope.includes('variable')) return 'variable';
+    return 'plain';
+}
+async function getHighlighter() {
+    if (!highlighterPromise) highlighterPromise = import("shiki").then(async ({ createHighlighter })=>createHighlighter({
+            themes: [
+                'github-light'
+            ],
+            langs: [
+                ...SUPPORTED_LANGUAGES
+            ]
+        }));
+    return highlighterPromise;
+}
+const shikiAdapter = {
+    name: 'shiki',
+    async highlight (code, language) {
+        try {
+            const highlighter = await getHighlighter();
+            const themedTokens = highlighter.codeToTokensBase(code, {
+                lang: language,
+                theme: 'github-light',
+                includeExplanation: true
+            });
+            const tokens = themedTokens.map((line)=>line.map((token)=>({
+                        content: token.content,
+                        type: mapScopeToTokenType(token.explanation?.[0]?.scopes.map((s)=>s.scopeName))
+                    })));
+            return {
+                tokens
+            };
+        } catch  {
+            const tokens = code.split('\n').map((line)=>[
+                    {
+                        content: line,
+                        type: 'plain'
+                    }
+                ]);
+            return {
+                tokens
+            };
+        }
+    },
+    getSupportedLanguages () {
+        return SUPPORTED_LANGUAGES;
+    }
+};
+export { shikiAdapter };

package/dist/components/CodeSnippet/adapters/types.d.ts

@@ -0,0 +1,22 @@
+/** Supported language union types per adapter */
+export type PrismLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'bash' | 'shell' | 'json' | 'html' | 'xml' | 'css' | 'python' | 'go' | 'sql' | 'yaml' | 'markdown';
+export type ShikiLanguage = 'javascript' | 'typescript' | 'jsx' | 'tsx' | 'bash' | 'shell' | 'json' | 'html' | 'xml' | 'css' | 'python' | 'go' | 'sql' | 'yaml' | 'markdown' | 'rust' | 'java' | 'c' | 'cpp';
+export type HighlightJsLanguage = 'javascript' | 'typescript' | 'bash' | 'json' | 'html' | 'xml' | 'css' | 'python' | 'go' | 'sql';
+export type PlainLanguage = 'text' | 'plain';
+/** Strict token types for syntax highlighting */
+export type TokenType = 'plain' | 'keyword' | 'string' | 'comment' | 'function' | 'number' | 'operator' | 'punctuation' | 'class-name' | 'property' | 'tag' | 'attr-name' | 'attr-value' | 'boolean' | 'builtin' | 'constant' | 'regex' | 'variable';
+export type Token = {
+    content: string;
+    type: TokenType;
+    className?: string;
+};
+export type HighlightResult = {
+    tokens: Token[][];
+    html?: string;
+};
+/** Generic adapter interface with language constraint */
+export type SyntaxAdapter<TLanguage extends string = string> = {
+    name: string;
+    highlight: (code: string, language: TLanguage) => Promise<HighlightResult>;
+    getSupportedLanguages: () => readonly TLanguage[];
+};

package/dist/components/CodeSnippet/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useAdapter } from './useAdapter';
+export { useCodeSnippet } from './useCodeSnippet';

package/dist/components/CodeSnippet/hooks/index.js

@@ -0,0 +1,3 @@
+import { useAdapter } from "./useAdapter.js";
+import { useCodeSnippet } from "./useCodeSnippet.js";
+export { useAdapter, useCodeSnippet };

package/dist/components/CodeSnippet/hooks/useAdapter.d.ts

@@ -0,0 +1,2 @@
+import { type AdapterContextValue } from '../CodeSnippetContext';
+export declare const useAdapter: <TLanguage extends string = string>() => AdapterContextValue<TLanguage> | null;

package/dist/components/CodeSnippet/hooks/useAdapter.js

@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { AdapterContext } from "../CodeSnippetContext.js";
+const useAdapter = ()=>useContext(AdapterContext);
+export { useAdapter };

package/dist/components/CodeSnippet/hooks/useCodeSnippet.d.ts

@@ -0,0 +1,2 @@
+import { type CodeSnippetContextValue } from '../CodeSnippetContext';
+export declare const useCodeSnippet: <TLanguage extends string = string>() => CodeSnippetContextValue<TLanguage>;

package/dist/components/CodeSnippet/hooks/useCodeSnippet.js

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { CodeSnippetContext } from "../CodeSnippetContext.js";
+const useCodeSnippet = ()=>{
+    const context = useContext(CodeSnippetContext);
+    if (!context) throw new Error('useCodeSnippet must be used within CodeSnippetRoot');
+    return context;
+};
+export { useCodeSnippet };

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

@@ -0,0 +1,10 @@
+export type { HighlightJsLanguage, HighlightResult, PlainLanguage, PrismLanguage, ShikiLanguage, SyntaxAdapter, Token, TokenType, } from './adapters';
+export { loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter, plainAdapter, } from './adapters';
+export { CodeSnippetAdapterProvider, type CodeSnippetAdapterProviderProps, } from './CodeSnippetAdapterProvider';
+export { CodeSnippetCode, type CodeSnippetCodeProps } from './CodeSnippetCode';
+export { CodeSnippetContent, type CodeSnippetContentProps } from './CodeSnippetContent';
+export { type CodeSnippetContextValue, type CodeSnippetSize, type LineColor, type LineConfig, type LineTextStyle, } from './CodeSnippetContext';
+export { CodeSnippetLineNumbers, type CodeSnippetLineNumbersProps } from './CodeSnippetLineNumbers';
+export { CodeSnippetRoot, type CodeSnippetRootProps } from './CodeSnippetRoot';
+export { useAdapter, useCodeSnippet } from './hooks';
+export { InlineCodeSnippet, type InlineCodeSnippetProps } from './InlineCodeSnippet';

package/dist/components/CodeSnippet/index.js

@@ -0,0 +1,9 @@
+import { loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter, plainAdapter } from "./adapters/index.js";
+import { CodeSnippetAdapterProvider } from "./CodeSnippetAdapterProvider.js";
+import { CodeSnippetCode } from "./CodeSnippetCode.js";
+import { CodeSnippetContent } from "./CodeSnippetContent.js";
+import { CodeSnippetLineNumbers } from "./CodeSnippetLineNumbers.js";
+import { CodeSnippetRoot } from "./CodeSnippetRoot.js";
+import { useAdapter, useCodeSnippet } from "./hooks/index.js";
+import { InlineCodeSnippet } from "./InlineCodeSnippet.js";
+export { CodeSnippetAdapterProvider, CodeSnippetCode, CodeSnippetContent, CodeSnippetLineNumbers, CodeSnippetRoot, InlineCodeSnippet, loadHighlightJsAdapter, loadPrismAdapter, loadShikiAdapter, plainAdapter, useAdapter, useCodeSnippet };

package/dist/components/CodeSnippet/internal/CodeContent.d.ts

@@ -0,0 +1,7 @@
+import type { FC, HTMLAttributes, ReactNode } from 'react';
+export type CodeContentProps = HTMLAttributes<HTMLPreElement> & {
+    wrapLines: boolean;
+    children: ReactNode;
+};
+/** Renders the code container */
+export declare const CodeContent: FC<CodeContentProps>;

package/dist/components/CodeSnippet/internal/CodeContent.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+const CodeContent = ({ wrapLines, className, children, ...props })=>/*#__PURE__*/ jsx("pre", {
+        "data-slot": "code-snippet-code",
+        className: cn('flex-1 min-w-0', wrapLines && 'whitespace-pre-wrap break-all', className),
+        ...props,
+        children: /*#__PURE__*/ jsx("code", {
+            children: children
+        })
+    });
+export { CodeContent };

package/dist/components/CodeSnippet/internal/CodeLine.d.ts

@@ -0,0 +1,13 @@
+import type { FC, ReactNode } from 'react';
+import type { LineConfig } from '../CodeSnippetContext';
+export type CodeLineProps = {
+    lineConfig: LineConfig | undefined;
+    lineHeightClass: string;
+    /** Show inline gutter elements (color stick, line number, prefix) - used when wrapLines is true */
+    showInlineGutter?: boolean;
+    /** Line number to display (only shown when showInlineGutter is true) */
+    lineNumber?: number;
+    children: ReactNode;
+};
+/** Renders a single line of code with styling */
+export declare const CodeLine: FC<CodeLineProps>;

package/dist/components/CodeSnippet/internal/CodeLine.js

@@ -0,0 +1,35 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { LINE_COLOR_STYLES } from "../lib/lineStyles.js";
+import { getLineTextStyles } from "../lib/lineUtils.js";
+const CodeLine = ({ lineConfig, lineHeightClass, showInlineGutter = false, lineNumber, children })=>{
+    const { colorClass, textStyleClass, className: lineClassName, style } = getLineTextStyles(lineConfig);
+    const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn(lineHeightClass, showInlineGutter && 'flex', showInlineGutter && colorStyles?.bg),
+        style: style,
+        children: [
+            showInlineGutter && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: cn('shrink-0 self-stretch border-l-2 pl-12', colorStyles?.border ?? 'border-transparent')
+                    }),
+                    void 0 !== lineNumber && /*#__PURE__*/ jsx("span", {
+                        className: cn('shrink-0 select-none text-right text-text-secondary px-8', colorStyles?.text),
+                        children: lineNumber
+                    }),
+                    lineConfig?.prefix !== void 0 && /*#__PURE__*/ jsx("span", {
+                        className: cn('shrink-0 select-none px-8 text-center', colorStyles?.text),
+                        children: lineConfig.prefix
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("span", {
+                className: cn('flex-1', colorClass, textStyleClass, lineClassName),
+                children: children
+            })
+        ]
+    });
+};
+CodeLine.displayName = 'CodeLine';
+export { CodeLine };

package/dist/components/CodeSnippet/internal/CodeSnippetHighlights.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+/** Internal component for rendering highlight backgrounds */
+export declare const CodeSnippetHighlights: FC;

package/dist/components/CodeSnippet/internal/CodeSnippetHighlights.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useCodeSnippet } from "../hooks/index.js";
+import { LINE_COLOR_STYLES, SIZE_LINE_HEIGHT_CLASSES } from "../lib/lineStyles.js";
+const CodeSnippetHighlights = ()=>{
+    const { tokens, code, startingLineNumber, lines, size } = useCodeSnippet();
+    const lineCount = tokens?.length ?? code.split('\n').length;
+    const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "code-snippet-highlights",
+        className: "absolute inset-0 z-0 flex flex-col py-8 pointer-events-none",
+        "aria-hidden": "true",
+        children: Array.from({
+            length: lineCount
+        }, (_, index)=>{
+            const lineNumber = startingLineNumber + index;
+            const lineConfig = lines.get(lineNumber);
+            const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : null;
+            return /*#__PURE__*/ jsx("div", {
+                className: cn(lineHeightClass, colorStyles?.bg)
+            }, lineNumber);
+        })
+    });
+};
+CodeSnippetHighlights.displayName = 'CodeSnippetHighlights';
+export { CodeSnippetHighlights };

package/dist/components/CodeSnippet/internal/CodeToken.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from 'react';
+import type { Token } from '../adapters/types';
+export type CodeTokenProps = {
+    token: Token;
+    colorClass?: string;
+};
+/** Renders a single syntax-highlighted token */
+export declare const CodeToken: FC<CodeTokenProps>;

package/dist/components/CodeSnippet/internal/CodeToken.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+const TOKEN_CLASSES = {
+    plain: 'text-text-primary',
+    keyword: 'text-purple-600',
+    string: 'text-green-600',
+    comment: 'text-text-secondary italic',
+    function: 'text-blue-600',
+    number: 'text-amber-600',
+    operator: 'text-text-primary',
+    punctuation: 'text-text-secondary',
+    'class-name': 'text-cyan-600',
+    property: 'text-blue-500',
+    tag: 'text-red-600',
+    'attr-name': 'text-amber-600',
+    'attr-value': 'text-green-600',
+    boolean: 'text-purple-600',
+    builtin: 'text-cyan-600',
+    constant: 'text-amber-600',
+    regex: 'text-red-500',
+    variable: 'text-text-primary'
+};
+const CodeToken = ({ token, colorClass })=>/*#__PURE__*/ jsx("span", {
+        className: colorClass ?? token.className ?? TOKEN_CLASSES[token.type],
+        children: token.content
+    });
+export { CodeToken };

package/dist/components/CodeSnippet/internal/ColorStickColumn.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { LineConfig } from '../CodeSnippetContext';
+/** Color stick column component - renders color indicators for each line */
+export declare const ColorStickColumn: FC<{
+    lineCount: number;
+    startingLineNumber: number;
+    lines: Map<number, LineConfig>;
+    lineHeightClass: string;
+}>;

package/dist/components/CodeSnippet/internal/ColorStickColumn.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { LINE_COLOR_STYLES } from "../lib/lineStyles.js";
+const ColorStickColumn = ({ lineCount, startingLineNumber, lines, lineHeightClass })=>/*#__PURE__*/ jsx("div", {
+        className: "flex flex-col",
+        "data-slot": "code-snippet-color-stick",
+        children: Array.from({
+            length: lineCount
+        }, (_, index)=>{
+            const lineNumber = startingLineNumber + index;
+            const lineConfig = lines.get(lineNumber);
+            const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
+            return /*#__PURE__*/ jsx("span", {
+                className: cn(lineHeightClass, 'border-l-2 pl-12', 'bg-bg-primary', colorStyles?.border ?? 'border-transparent', colorStyles?.bg)
+            }, lineNumber);
+        })
+    });
+export { ColorStickColumn };

package/dist/components/CodeSnippet/internal/PrefixColumn.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import type { LineConfig } from '../CodeSnippetContext';
+/** Prefix column component - renders all line prefixes in a separate column */
+export declare const PrefixColumn: FC<{
+    lineCount: number;
+    startingLineNumber: number;
+    lines: Map<number, LineConfig>;
+    lineHeightClass: string;
+}>;

package/dist/components/CodeSnippet/internal/PrefixColumn.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { LINE_COLOR_STYLES } from "../lib/lineStyles.js";
+const PrefixColumn = ({ lineCount, startingLineNumber, lines, lineHeightClass })=>/*#__PURE__*/ jsx("div", {
+        className: "flex flex-col select-none",
+        "data-slot": "code-snippet-prefix",
+        children: Array.from({
+            length: lineCount
+        }, (_, index)=>{
+            const lineNumber = startingLineNumber + index;
+            const lineConfig = lines.get(lineNumber);
+            const colorStyles = lineConfig?.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
+            return /*#__PURE__*/ jsx("span", {
+                className: cn(lineHeightClass, 'px-8 text-center bg-bg-primary', colorStyles?.text, colorStyles?.bg),
+                children: lineConfig?.prefix
+            }, lineNumber);
+        })
+    });
+export { PrefixColumn };

package/dist/components/CodeSnippet/internal/TokenizedCodeLine.d.ts

@@ -0,0 +1,14 @@
+import type { FC } from 'react';
+import type { Token } from '../adapters/types';
+import type { LineConfig } from '../CodeSnippetContext';
+export type TokenizedCodeLineProps = {
+    tokens: Token[];
+    lineConfig: LineConfig | undefined;
+    lineHeightClass: string;
+    /** Show inline gutter elements (color stick, line number, prefix) - used when wrapLines is true */
+    showInlineGutter?: boolean;
+    /** Line number to display (only shown when showInlineGutter is true) */
+    lineNumber?: number;
+};
+/** Renders a line of tokenized code with syntax highlighting */
+export declare const TokenizedCodeLine: FC<TokenizedCodeLineProps>;

package/dist/components/CodeSnippet/internal/TokenizedCodeLine.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { getLineTextStyles } from "../lib/lineUtils.js";
+import { CodeLine } from "./CodeLine.js";
+import { CodeToken } from "./CodeToken.js";
+const TokenizedCodeLine = ({ tokens, lineConfig, lineHeightClass, showInlineGutter, lineNumber })=>{
+    const { colorClass } = getLineTextStyles(lineConfig);
+    return /*#__PURE__*/ jsx(CodeLine, {
+        lineConfig: lineConfig,
+        lineHeightClass: lineHeightClass,
+        showInlineGutter: showInlineGutter,
+        lineNumber: lineNumber,
+        children: tokens.map((token, i)=>/*#__PURE__*/ jsx(CodeToken, {
+                token: token,
+                colorClass: colorClass
+            }, i))
+    });
+};
+TokenizedCodeLine.displayName = 'TokenizedCodeLine';
+export { TokenizedCodeLine };

package/dist/components/CodeSnippet/internal/index.d.ts

@@ -0,0 +1,6 @@
+export { CodeContent, type CodeContentProps } from './CodeContent';
+export { CodeLine, type CodeLineProps } from './CodeLine';
+export { CodeToken, type CodeTokenProps } from './CodeToken';
+export { ColorStickColumn } from './ColorStickColumn';
+export { PrefixColumn } from './PrefixColumn';
+export { TokenizedCodeLine, type TokenizedCodeLineProps } from './TokenizedCodeLine';

package/dist/components/CodeSnippet/internal/index.js

@@ -0,0 +1,7 @@
+import { CodeContent } from "./CodeContent.js";
+import { CodeLine } from "./CodeLine.js";
+import { CodeToken } from "./CodeToken.js";
+import { ColorStickColumn } from "./ColorStickColumn.js";
+import { PrefixColumn } from "./PrefixColumn.js";
+import { TokenizedCodeLine } from "./TokenizedCodeLine.js";
+export { CodeContent, CodeLine, CodeToken, ColorStickColumn, PrefixColumn, TokenizedCodeLine };

package/dist/components/CodeSnippet/lib/lineStyles.d.ts

@@ -0,0 +1,19 @@
+import type { CodeSnippetSize, LineColor, LineTextStyle } from '../CodeSnippetContext';
+/**
+ * Shared line color styles for CodeSnippet components.
+ * Colors match Figma design with 6% opacity backgrounds.
+ */
+export declare const LINE_COLOR_STYLES: Record<LineColor, {
+    border: string;
+    bg: string;
+    text: string;
+}>;
+/**
+ * Text style classes for line content.
+ */
+export declare const LINE_TEXT_STYLE_CLASSES: Record<LineTextStyle, string>;
+/**
+ * Line height classes per size variant.
+ * Matches Figma design typography specifications.
+ */
+export declare const SIZE_LINE_HEIGHT_CLASSES: Record<CodeSnippetSize, string>;

package/dist/components/CodeSnippet/lib/lineStyles.js

@@ -0,0 +1,48 @@
+const LINE_COLOR_STYLES = {
+    danger: {
+        border: 'border-border-danger',
+        bg: 'bg-bg-danger',
+        text: 'text-text-danger font-medium'
+    },
+    warning: {
+        border: 'border-border-warning',
+        bg: 'bg-bg-warning',
+        text: 'text-text-warning font-medium'
+    },
+    info: {
+        border: 'border-border-info',
+        bg: 'bg-bg-info',
+        text: 'text-text-info font-medium'
+    },
+    success: {
+        border: 'border-border-success',
+        bg: 'bg-bg-success',
+        text: 'text-text-success font-medium'
+    },
+    brand: {
+        border: 'border-border-brand',
+        bg: 'bg-bg-brand',
+        text: 'text-text-brand font-medium'
+    },
+    ai: {
+        border: 'border-border-ai',
+        bg: 'bg-bg-ai',
+        text: 'text-text-ai font-medium'
+    },
+    neutral: {
+        border: 'border-border-primary',
+        bg: 'bg-states-primary-hover',
+        text: 'text-text-secondary font-medium'
+    }
+};
+const LINE_TEXT_STYLE_CLASSES = {
+    regular: 'font-normal',
+    medium: 'font-medium',
+    italic: 'italic'
+};
+const SIZE_LINE_HEIGHT_CLASSES = {
+    sm: 'leading-sm min-h-lh',
+    md: 'leading-sm min-h-lh',
+    lg: 'leading-sm min-h-lh'
+};
+export { LINE_COLOR_STYLES, LINE_TEXT_STYLE_CLASSES, SIZE_LINE_HEIGHT_CLASSES };

package/dist/components/CodeSnippet/lib/lineUtils.d.ts

@@ -0,0 +1,12 @@
+import type { CSSProperties } from 'react';
+import type { LineConfig } from '../CodeSnippetContext';
+export type LineTextStyles = {
+    colorClass?: string;
+    textStyleClass?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+/**
+ * Build text styles for a line based on its configuration.
+ */
+export declare const getLineTextStyles: (lineConfig: LineConfig | undefined) => LineTextStyles;

package/dist/components/CodeSnippet/lib/lineUtils.js

@@ -0,0 +1,13 @@
+import { LINE_COLOR_STYLES, LINE_TEXT_STYLE_CLASSES } from "./lineStyles.js";
+const getLineTextStyles = (lineConfig)=>{
+    if (!lineConfig) return {};
+    const colorStyles = lineConfig.color ? LINE_COLOR_STYLES[lineConfig.color] : void 0;
+    const textStyleClass = lineConfig?.textStyle ? LINE_TEXT_STYLE_CLASSES[lineConfig.textStyle] : void 0;
+    return {
+        colorClass: colorStyles?.text,
+        textStyleClass,
+        className: lineConfig.className,
+        style: lineConfig.style
+    };
+};
+export { getLineTextStyles };

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { type DrawerProps } from '../Drawer';
+export type DialogProps = DrawerProps;
+export declare const Dialog: FC<DialogProps>;

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Drawer } from "../Drawer/index.js";
+import { DIALOG_SIZES, DIALOG_WIDTH_CONSTRAINTS } from "./constants.js";
+const Dialog = ({ width = DIALOG_SIZES.medium, minWidth = DIALOG_WIDTH_CONSTRAINTS.min, maxWidth = DIALOG_WIDTH_CONSTRAINTS.max, ...props })=>/*#__PURE__*/ jsx(Drawer, {
+        ...props,
+        width: width,
+        minWidth: minWidth,
+        maxWidth: maxWidth
+    });
+Dialog.displayName = 'Dialog';
+export { Dialog };

package/dist/components/Dialog/DialogBody.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { type DrawerBodyProps } from '../Drawer';
+export type DialogBodyProps = DrawerBodyProps;
+export declare const DialogBody: FC<DialogBodyProps>;

package/dist/components/Dialog/DialogBody.js

@@ -0,0 +1,4 @@
+import { DrawerBody } from "../Drawer/index.js";
+const DialogBody = DrawerBody;
+DialogBody.displayName = 'DialogBody';
+export { DialogBody };

package/dist/components/Dialog/DialogClose.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type DrawerCloseProps } from '../Drawer';
+type DialogCloseProps = DrawerCloseProps;
+export declare const DialogClose: FC<DialogCloseProps>;
+export {};

package/dist/components/Dialog/DialogClose.js

@@ -0,0 +1,4 @@
+import { DrawerClose } from "../Drawer/index.js";
+const DialogClose = DrawerClose;
+DialogClose.displayName = 'DialogClose';
+export { DialogClose };

package/dist/components/Dialog/DialogContent.d.ts

@@ -0,0 +1,7 @@
+import type { FC, Ref } from 'react';
+import { type DrawerContentProps } from '../Drawer';
+type DialogContentProps = DrawerContentProps & {
+    ref?: Ref<HTMLDivElement>;
+};
+export declare const DialogContent: FC<DialogContentProps>;
+export {};

package/dist/components/Dialog/DialogContent.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@ark-ui/react/dialog";
+import { cn } from "../../utils/cn.js";
+import { DrawerOverlay, DrawerPortal, drawerContentVariants, useDrawerContext } from "../Drawer/index.js";
+import { DialogPositioner } from "./DialogPositioner.js";
+const DialogContent = ({ children, ref })=>{
+    const { width, overlay } = useDrawerContext();
+    return /*#__PURE__*/ jsxs(DrawerPortal, {
+        children: [
+            overlay && /*#__PURE__*/ jsx(DrawerOverlay, {}),
+            /*#__PURE__*/ jsx(DialogPositioner, {
+                children: /*#__PURE__*/ jsx(Dialog.Content, {
+                    ref: ref,
+                    className: cn(drawerContentVariants({
+                        isResizing: false
+                    }), 'flex flex-col min-h-0', 'slide-in-from-bottom-[25%] slide-out-to-bottom-[25%]', 'origin-top', 'data-[has-nested=dialog]:scale-[calc(var(--dialog-pushed-back-scale)-(var(--nested-layer-count)*var(--dialog-pushed-back-ratio)))]', 'data-[has-nested=dialog]:-translate-y-[calc((var(--dialog-pushed-back-offset)/(var(--dialog-pushed-back-scale)-(var(--nested-layer-count)*var(--dialog-pushed-back-ratio))))*var(--nested-layer-count))]', '[&_[data-slot=drawer-header]]:pt-20 [&_[data-slot=drawer-header]]:pb-16 [&_[data-slot=drawer-header]]:px-24'),
+                    style: {
+                        width
+                    },
+                    children: children
+                })
+            })
+        ]
+    });
+};
+DialogContent.displayName = 'DialogContent';
+export { DialogContent };

package/dist/components/Dialog/DialogFooter.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from 'react';
+import { type DrawerFooterProps } from '../Drawer';
+type DialogFooterProps = DrawerFooterProps;
+export declare const DialogFooter: FC<DialogFooterProps>;
+export {};

package/dist/components/Dialog/DialogFooter.js

@@ -0,0 +1,4 @@
+import { DrawerFooter } from "../Drawer/index.js";
+const DialogFooter = DrawerFooter;
+DialogFooter.displayName = 'DialogFooter';
+export { DialogFooter };

package/dist/components/Dialog/DialogFooterControls.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { type DrawerFooterControlsProps } from '../Drawer';
+export type DialogFooterControlsProps = DrawerFooterControlsProps;
+export declare const DialogFooterControls: FC<DialogFooterControlsProps>;

package/dist/components/Dialog/DialogFooterControls.js

@@ -0,0 +1,4 @@
+import { DrawerFooterControls } from "../Drawer/index.js";
+const DialogFooterControls = DrawerFooterControls;
+DialogFooterControls.displayName = 'DialogFooterControls';
+export { DialogFooterControls };