@wallarm-org/design-system 0.1.0

package/dist/components/Checkbox/Checkbox.figma.js

@@ -0,0 +1,98 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { Checkbox } from "./Checkbox.js";
+import { CheckboxDescription } from "./CheckboxDescription.js";
+import { CheckboxIndicator } from "./CheckboxIndicator.js";
+import { CheckboxLabel } from "./CheckboxLabel.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=286-1921';
+code_connect.connect(Checkbox, figmaNodeUrl, {
+    props: {
+        checked: code_connect.boolean('Selected'),
+        indeterminate: code_connect.boolean('Indeterminate'),
+        disabled: code_connect.boolean('Disabled'),
+        label: code_connect.textContent('Label'),
+        description: code_connect.boolean("Description"),
+        descriptionText: code_connect.string("Descript")
+    },
+    example: ({ checked, label })=>/*#__PURE__*/ jsxs(Checkbox, {
+            checked: checked,
+            children: [
+                /*#__PURE__*/ jsx(CheckboxIndicator, {}),
+                /*#__PURE__*/ jsx(CheckboxLabel, {
+                    children: label
+                })
+            ]
+        })
+});
+code_connect.connect(Checkbox, figmaNodeUrl, {
+    props: {
+        checked: code_connect.boolean('Selected'),
+        indeterminate: code_connect.boolean('Indeterminate'),
+        disabled: code_connect.boolean('Disabled'),
+        label: code_connect.textContent('Label'),
+        description: code_connect.boolean("Description"),
+        descriptionText: code_connect.string("Descript")
+    },
+    variant: {
+        Indeterminate: true
+    },
+    example: ({ label, disabled })=>/*#__PURE__*/ jsxs(Checkbox, {
+            checked: "indeterminate",
+            disabled: disabled,
+            children: [
+                /*#__PURE__*/ jsx(CheckboxIndicator, {}),
+                /*#__PURE__*/ jsx(CheckboxLabel, {
+                    children: label
+                })
+            ]
+        })
+});
+code_connect.connect(Checkbox, figmaNodeUrl, {
+    props: {
+        checked: code_connect.boolean('Selected'),
+        indeterminate: code_connect.boolean('Indeterminate'),
+        disabled: code_connect.boolean('Disabled'),
+        label: code_connect.textContent('Label'),
+        description: code_connect.boolean("Description"),
+        descriptionText: code_connect.string("Descript")
+    },
+    variant: {
+        Disabled: true
+    },
+    example: ({ label, checked, disabled })=>/*#__PURE__*/ jsxs(Checkbox, {
+            checked: checked,
+            disabled: disabled,
+            children: [
+                /*#__PURE__*/ jsx(CheckboxIndicator, {}),
+                /*#__PURE__*/ jsx(CheckboxLabel, {
+                    children: label
+                })
+            ]
+        })
+});
+code_connect.connect(Checkbox, figmaNodeUrl, {
+    props: {
+        checked: code_connect.boolean('Selected'),
+        indeterminate: code_connect.boolean('Indeterminate'),
+        disabled: code_connect.boolean('Disabled'),
+        label: code_connect.textContent('Label'),
+        description: code_connect.boolean("Description"),
+        descriptionText: code_connect.string("Descript")
+    },
+    variant: {
+        Description: true
+    },
+    example: ({ checked, label, disabled, descriptionText })=>/*#__PURE__*/ jsxs(Checkbox, {
+            checked: checked,
+            disabled: disabled,
+            children: [
+                /*#__PURE__*/ jsx(CheckboxIndicator, {}),
+                /*#__PURE__*/ jsx(CheckboxLabel, {
+                    children: label
+                }),
+                /*#__PURE__*/ jsx(CheckboxDescription, {
+                    children: descriptionText
+                })
+            ]
+        })
+});

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,13 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Checkbox } from "@ark-ui/react/checkbox";
+import { cn } from "../../utils/cn.js";
+const Checkbox_Checkbox = ({ children, ...props })=>/*#__PURE__*/ jsxs(Checkbox.Root, {
+        ...props,
+        className: cn('items-center gap-x-8', "[&:not(:has([data-part=description]))]:flex", "[&:has([data-part=description])]:grid", "[&:has([data-part=description])]:grid-cols-[16px_auto]", "*:data-[part=description]:col-start-2 *:data-[part=description]:col-end-3", '[&:not([data-disabled])]:cursor-pointer', 'data-disabled:pointer-none data-disabled:cursor-not-allowed'),
+        children: [
+            children,
+            /*#__PURE__*/ jsx(Checkbox.HiddenInput, {})
+        ]
+    });
+Checkbox_Checkbox.displayName = 'Checkbox';
+export { Checkbox_Checkbox as Checkbox };

package/dist/components/Checkbox/CheckboxDescription.d.ts

@@ -0,0 +1,3 @@
+import type { FC, HTMLAttributes } from 'react';
+export type CheckboxDescriptionProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'className'>;
+export declare const CheckboxDescription: FC<CheckboxDescriptionProps>;

package/dist/components/Checkbox/CheckboxDescription.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { Text } from "../Text/index.js";
+const CheckboxDescription = (props)=>/*#__PURE__*/ jsx(Text, {
+        ...props,
+        size: "sm",
+        weight: "regular",
+        color: "secondary",
+        "data-scope": "checkbox",
+        "data-part": "description"
+    });
+CheckboxDescription.displayName = "CheckboxDescription";
+export { CheckboxDescription };

package/dist/components/Checkbox/CheckboxGroup.d.ts

@@ -0,0 +1,11 @@
+import type { FC } from 'react';
+import { Checkbox as ArkUiCheckbox } from '@ark-ui/react/checkbox';
+import { type VariantProps } from 'class-variance-authority';
+declare const checkboxGroupVariants: (props?: ({
+    variant?: "default" | "card" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CheckboxGroupVariantsProps = VariantProps<typeof checkboxGroupVariants>;
+type CheckboxGroupNativeProps = Omit<ArkUiCheckbox.GroupProps, 'className'>;
+export type CheckboxGroupProps = CheckboxGroupNativeProps & CheckboxGroupVariantsProps;
+export declare const CheckboxGroup: FC<CheckboxGroupProps>;
+export {};

package/dist/components/Checkbox/CheckboxGroup.figma.d.ts

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

package/dist/components/Checkbox/CheckboxGroup.figma.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { CheckboxGroup } from "./CheckboxGroup.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-components?node-id=290-4065';
+code_connect.connect(CheckboxGroup, figmaNodeUrl, {
+    props: {
+        children: code_connect.children('checkbox-item')
+    },
+    example: ({ children })=>/*#__PURE__*/ jsx(CheckboxGroup, {
+            children: children
+        })
+});

package/dist/components/Checkbox/CheckboxGroup.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@ark-ui/react/checkbox";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const checkboxGroupVariants = cva('flex flex-col gap-8', {
+    variants: {
+        variant: {
+            default: cn('data-disabled:[&_[data-part=root]]:opacity-50'),
+            card: cn('[&_[data-part=root]]:py-12 [&_[data-part=root]]:pl-12 [&_[data-part=root]]:pr-16', '[&_[data-part=root]]:rounded-8 [&_[data-part=root]]:border [&_[data-part=root]]:bg-bg-surface-2', '[&_[data-part=root]]:transition-colors [&_[data-part=root]]:overlay', '[&_[data-part=root][data-state=unchecked]]:border-border-primary', '[&_[data-part=root][data-state=unchecked]:not([data-disabled])]:hover:overlay-states-primary-hover', '[&_[data-part=root][data-state=unchecked]:not([data-disabled])]:active:overlay-states-primary-pressed', '[&_[data-part=root][data-state=checked]]:border-border-brand', '[&_[data-part=root][data-state=checked]:not([data-disabled])]:hover:overlay-states-brand-hover', '[&_[data-part=root][data-state=checked]:not([data-disabled])]:active:overlay-states-brand-pressed', '[&_[data-part=root][data-state=indeterminate]]:border-border-brand', '[&_[data-part=root][data-state=indeterminate]:not([data-disabled])]:hover:overlay-states-brand-hover', '[&_[data-part=root][data-state=indeterminate]:not([data-disabled])]:active:overlay-states-brand-pressed', '[&_[data-part=root][data-disabled]]:[&_[data-part=label]]:opacity-50', "[&_[data-part=root][data-disabled]]:[&_[data-part=description]]:opacity-50", '[&_[data-part=root][data-disabled]]:[&_[data-part=control]]:opacity-50')
+        }
+    }
+});
+const CheckboxGroup = ({ variant = 'default', ...props })=>/*#__PURE__*/ jsx(Checkbox.Group, {
+        ...props,
+        className: cn(checkboxGroupVariants({
+            variant
+        }))
+    });
+CheckboxGroup.displayName = 'CheckboxGroup';
+export { CheckboxGroup };

package/dist/components/Checkbox/CheckboxIndicator.d.ts

@@ -0,0 +1,2 @@
+import type { FC } from 'react';
+export declare const CheckboxIndicator: FC;

package/dist/components/Checkbox/CheckboxIndicator.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { useCheckboxContext } from "@ark-ui/react/checkbox";
+import { Checkmark } from "../Checkmark/index.js";
+const CheckboxIndicator = ()=>{
+    const { getControlProps, checkedState } = useCheckboxContext();
+    const controlProps = getControlProps();
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex items-center justify-center self-start",
+        children: /*#__PURE__*/ jsx(Checkmark, {
+            ...controlProps,
+            checkedState: checkedState
+        })
+    });
+};
+CheckboxIndicator.displayName = 'CheckboxIndicator';
+export { CheckboxIndicator };

package/dist/components/Checkbox/CheckboxLabel.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import { Checkbox as ArkUiCheckbox } from '@ark-ui/react/checkbox';
+export type CheckboxLabelProps = Omit<ArkUiCheckbox.LabelProps, 'className'>;
+export declare const CheckboxLabel: FC<CheckboxLabelProps>;

package/dist/components/Checkbox/CheckboxLabel.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { Checkbox } from "@ark-ui/react/checkbox";
+import { cn } from "../../utils/cn.js";
+const CheckboxLabel = (props)=>/*#__PURE__*/ jsx(Checkbox.Label, {
+        ...props,
+        className: cn('flex gap-4', 'font-sans text-sm font-normal text-text-primary')
+    });
+CheckboxLabel.displayName = 'CheckboxLabel';
+export { CheckboxLabel };

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

@@ -0,0 +1,5 @@
+export { Checkbox, type CheckboxProps } from './Checkbox';
+export { CheckboxDescription, type CheckboxDescriptionProps, } from './CheckboxDescription';
+export { CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup';
+export { CheckboxIndicator } from './CheckboxIndicator';
+export { CheckboxLabel, type CheckboxLabelProps } from './CheckboxLabel';

package/dist/components/Checkbox/index.js

@@ -0,0 +1,6 @@
+import { Checkbox } from "./Checkbox.js";
+import { CheckboxDescription } from "./CheckboxDescription.js";
+import { CheckboxGroup } from "./CheckboxGroup.js";
+import { CheckboxIndicator } from "./CheckboxIndicator.js";
+import { CheckboxLabel } from "./CheckboxLabel.js";
+export { Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel };

package/dist/components/Checkmark/Checkmark.d.ts

@@ -0,0 +1,9 @@
+import type { FC, HTMLAttributes } from 'react';
+import type { CheckboxCheckedState } from '@ark-ui/react/checkbox';
+type CheckmarkNativeProps = HTMLAttributes<HTMLDivElement>;
+interface CheckmarkBaseProps {
+    checkedState?: CheckboxCheckedState;
+}
+type CheckmarkProps = CheckmarkNativeProps & CheckmarkBaseProps;
+export declare const Checkmark: FC<CheckmarkProps>;
+export {};

package/dist/components/Checkmark/Checkmark.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+import { Check, Minus } from "../../icons/index.js";
+import { cn } from "../../utils/cn.js";
+const Checkmark = ({ checkedState = false, ...props })=>/*#__PURE__*/ jsx("div", {
+        className: cn('flex items-center justify-center self-start my-2', 'w-16 h-16', 'rounded-4 shadow-xs overlay transition-all data-focus-visible:ring-3', '[&_svg]:icon-sm [&_svg]:text-icon-primary-alt [&_svg]:shrink-0 [&_svg]:pointer-events-none', 'bg-bg-surface-3 border border-border-primary', '[&[data-hover]:not([data-active]):not([data-state=checked]):not([data-state=indeterminate])]:bg-states-primary-hover', '[&[data-active]:not([data-state=checked]):not([data-state=indeterminate])]:bg-states-primary-pressed', '[&[data-focus-visible]:not([data-state=checked]):not([data-state=indeterminate])]:ring-focus-primary', 'data-[state=checked]:bg-bg-fill-brand', 'data-[state=checked]:border-bg-fill-brand', 'data-[state=checked]:border-none', 'data-[state=indeterminate]:bg-bg-fill-brand', 'data-[state=indeterminate]:border-bg-fill-brand', 'data-[state=indeterminate]:border-none', '[&[data-hover]:not([data-active]):is([data-state=checked])]:overlay-states-on-fill-hover', '[&[data-hover]:not([data-active]):is([data-state=indeterminate])]:overlay-states-on-fill-hover', '[&[data-active][data-state=checked]]:overlay-states-on-fill-pressed', '[&[data-active][data-state=indeterminate]]:overlay-states-on-fill-pressed', '[&[data-focus-visible][data-state=checked]]:ring-focus-brand', '[&[data-focus-visible][data-state=indeterminate]]:ring-focus-brand'),
+        "data-state": 'indeterminate' === checkedState ? 'indeterminate' : checkedState ? 'checked' : 'unchecked',
+        ...props,
+        children: 'indeterminate' === checkedState ? /*#__PURE__*/ jsx(Minus, {}) : checkedState ? /*#__PURE__*/ jsx(Check, {}) : false
+    });
+export { Checkmark };

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

@@ -0,0 +1 @@
+export { Checkmark } from './Checkmark';

package/dist/components/Checkmark/index.js

@@ -0,0 +1,2 @@
+import { Checkmark } from "./Checkmark.js";
+export { Checkmark };

package/dist/components/Code/Code.d.ts

@@ -0,0 +1,19 @@
+import type { FC, HTMLAttributes, PropsWithChildren, Ref } from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const codeVariants: (props?: ({
+    size?: "s" | "m" | "l" | null | undefined;
+    weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
+    color?: "primary" | "destructive" | "secondary" | null | undefined;
+    italic?: boolean | null | undefined;
+    truncate?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CodeNativeProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'className'>;
+type CodeVariantProps = VariantProps<typeof codeVariants>;
+interface CodeBaseProps {
+    asChild?: boolean;
+    lineClamp?: number;
+    ref?: Ref<HTMLParagraphElement>;
+}
+export type CodeProps = CodeNativeProps & CodeVariantProps & CodeBaseProps;
+export declare const Code: FC<PropsWithChildren<CodeProps>>;
+export {};

package/dist/components/Code/Code.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+const codeVariants = cva('font-mono leading-sm', {
+    variants: {
+        size: {
+            s: 'text-xs',
+            m: 'text-sm',
+            l: 'text-base'
+        },
+        weight: {
+            light: 'font-light',
+            regular: 'font-normal',
+            medium: 'font-medium',
+            bold: 'font-bold'
+        },
+        color: {
+            primary: 'text-text-primary',
+            secondary: 'text-text-secondary',
+            destructive: 'text-text-danger'
+        },
+        italic: {
+            true: 'italic',
+            false: 'not-italic'
+        },
+        truncate: {
+            true: 'truncate'
+        }
+    },
+    defaultVariants: {
+        italic: false
+    }
+});
+const Code = ({ size = 'l', weight = 'regular', color = 'primary', italic = false, asChild = false, truncate = false, lineClamp, ...props })=>{
+    const Comp = asChild ? Slot : 'p';
+    return /*#__PURE__*/ jsx(Comp, {
+        ...props,
+        className: cn(codeVariants({
+            size,
+            weight,
+            color,
+            italic,
+            truncate
+        }), lineClamp && `line-clamp-${lineClamp}`)
+    });
+};
+Code.displayName = 'Code';
+export { Code };

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

@@ -0,0 +1 @@
+export { Code, type CodeProps } from './Code';

package/dist/components/Code/index.js

@@ -0,0 +1,2 @@
+import { Code } from "./Code.js";
+export { Code };

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

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

package/dist/components/CodeSnippet/CodeSnippet.figma.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import code_connect from "@figma/code-connect";
+import { CodeSnippetCode } from "./CodeSnippetCode.js";
+import { CodeSnippetContent } from "./CodeSnippetContent.js";
+import { CodeSnippetLineNumbers } from "./CodeSnippetLineNumbers.js";
+import { CodeSnippetRoot } from "./CodeSnippetRoot.js";
+const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/WADS-Components?node-id=3087-29516';
+code_connect.connect(CodeSnippetRoot, figmaNodeUrl, {
+    props: {
+        code: code_connect.string('Code'),
+        size: code_connect["enum"]('Size', {
+            sm: 'sm',
+            md: 'md',
+            lg: 'lg'
+        }),
+        showLineNumbers: code_connect.boolean('Show Line Numbers', {
+            true: true,
+            false: false
+        })
+    },
+    example: ({ code, size, showLineNumbers })=>/*#__PURE__*/ jsx(CodeSnippetRoot, {
+            code: code,
+            language: "text",
+            size: size,
+            children: /*#__PURE__*/ jsxs(CodeSnippetContent, {
+                children: [
+                    showLineNumbers && /*#__PURE__*/ jsx(CodeSnippetLineNumbers, {}),
+                    /*#__PURE__*/ jsx(CodeSnippetCode, {})
+                ]
+            })
+        })
+});

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

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import type { SyntaxAdapter } from './adapters/types';
+type AdapterInput<TLanguage extends string> = SyntaxAdapter<TLanguage> | (() => Promise<SyntaxAdapter<TLanguage>>);
+export type CodeSnippetAdapterProviderProps<TLanguage extends string = string> = {
+    /**
+     * Syntax adapter or a loader function that returns a Promise of the adapter.
+     * Using a loader function enables code splitting - the adapter bundle will
+     * only be loaded when the component mounts.
+     *
+     * @example
+     * // Synchronous adapter (bundled immediately)
+     * <CodeSnippetAdapterProvider adapter={prismAdapter}>
+     *
+     * @example
+     * // Lazy adapter (loaded on mount)
+     * <CodeSnippetAdapterProvider adapter={loadPrismAdapter}>
+     */
+    adapter: AdapterInput<TLanguage>;
+    children: ReactNode;
+};
+export declare function CodeSnippetAdapterProvider<TLanguage extends string>({ adapter, children, }: CodeSnippetAdapterProviderProps<TLanguage>): import("react/jsx-runtime").JSX.Element;
+export declare namespace CodeSnippetAdapterProvider {
+    var displayName: string;
+}
+export {};

package/dist/components/CodeSnippet/CodeSnippetAdapterProvider.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { AdapterContext } from "./CodeSnippetContext.js";
+function CodeSnippetAdapterProvider({ adapter, children }) {
+    const [resolvedAdapter, setResolvedAdapter] = useState('function' == typeof adapter ? null : adapter);
+    useEffect(()=>{
+        if ('function' != typeof adapter) return void setResolvedAdapter(adapter);
+        let cancelled = false;
+        const loadAdapter = async ()=>{
+            const loadedAdapter = await adapter();
+            if (!cancelled) setResolvedAdapter(loadedAdapter);
+        };
+        loadAdapter();
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        adapter
+    ]);
+    const value = resolvedAdapter ? {
+        adapter: resolvedAdapter
+    } : null;
+    return /*#__PURE__*/ jsx(AdapterContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+CodeSnippetAdapterProvider.displayName = 'CodeSnippetAdapterProvider';
+export { CodeSnippetAdapterProvider };

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

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export type CodeSnippetCodeProps = HTMLAttributes<HTMLPreElement> & {
+    ref?: Ref<HTMLPreElement>;
+};
+export declare const CodeSnippetCode: FC<CodeSnippetCodeProps>;

package/dist/components/CodeSnippet/CodeSnippetCode.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useCodeSnippet } from "./hooks/index.js";
+import { CodeContent, CodeLine, TokenizedCodeLine } from "./internal/index.js";
+import { SIZE_LINE_HEIGHT_CLASSES } from "./lib/lineStyles.js";
+const CodeSnippetCode = ({ className, ...props })=>{
+    const { code, tokens, isLoading, wrapLines, startingLineNumber, lines, size, inlineGutter, showLineNumbers } = useCodeSnippet();
+    const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
+    if (isLoading || !tokens) {
+        const codeLines = code.split('\n');
+        return /*#__PURE__*/ jsx(CodeContent, {
+            wrapLines: wrapLines,
+            className: className,
+            ...props,
+            children: codeLines.map((line, index)=>{
+                const lineNumber = startingLineNumber + index;
+                return /*#__PURE__*/ jsx(CodeLine, {
+                    lineConfig: lines.get(lineNumber),
+                    lineHeightClass: lineHeightClass,
+                    showInlineGutter: inlineGutter,
+                    lineNumber: showLineNumbers ? lineNumber : void 0,
+                    children: line
+                }, lineNumber);
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(CodeContent, {
+        wrapLines: wrapLines,
+        className: className,
+        ...props,
+        children: tokens.map((lineTokens, index)=>{
+            const lineNumber = startingLineNumber + index;
+            return /*#__PURE__*/ jsx(TokenizedCodeLine, {
+                tokens: lineTokens,
+                lineConfig: lines.get(lineNumber),
+                lineHeightClass: lineHeightClass,
+                showInlineGutter: inlineGutter,
+                lineNumber: showLineNumbers ? lineNumber : void 0
+            }, lineNumber);
+        })
+    });
+};
+CodeSnippetCode.displayName = 'CodeSnippetCode';
+export { CodeSnippetCode };

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

@@ -0,0 +1,11 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+export type CodeSnippetContentProps = HTMLAttributes<HTMLDivElement> & {
+    ref?: Ref<HTMLDivElement>;
+    /**
+     * Use native browser scroll instead of ScrollArea.
+     * @temporary This is a temporary prop while ScrollArea is unstable.
+     * @default false
+     */
+    nativeScroll?: boolean;
+};
+export declare const CodeSnippetContent: FC<CodeSnippetContentProps>;

package/dist/components/CodeSnippet/CodeSnippetContent.js

@@ -0,0 +1,94 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, isValidElement, useMemo } from "react";
+import { cn } from "../../utils/cn.js";
+import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "../ScrollArea/index.js";
+import { CodeSnippetContext } from "./CodeSnippetContext.js";
+import { useCodeSnippet } from "./hooks/index.js";
+import { CodeSnippetHighlights } from "./internal/CodeSnippetHighlights.js";
+import { ColorStickColumn } from "./internal/ColorStickColumn.js";
+import { PrefixColumn } from "./internal/PrefixColumn.js";
+import { SIZE_LINE_HEIGHT_CLASSES } from "./lib/lineStyles.js";
+const CodeSnippetContent = ({ className, children, nativeScroll = false, ...props })=>{
+    const context = useCodeSnippet();
+    const { wrapLines, lines, tokens, code, startingLineNumber, size } = context;
+    const hasHighlights = Array.from(lines.values()).some((config)=>null != config.color);
+    const hasAnyPrefix = Array.from(lines.values()).some((config)=>null != config.prefix);
+    const lineCount = tokens?.length ?? code.split('\n').length;
+    const lineHeightClass = SIZE_LINE_HEIGHT_CLASSES[size];
+    const childrenArray = Children.toArray(children);
+    const lineNumbersElement = childrenArray.find((child)=>/*#__PURE__*/ isValidElement(child) && child.type?.displayName === 'CodeSnippetLineNumbers');
+    const otherChildren = childrenArray.filter((child)=>!/*#__PURE__*/ isValidElement(child) || child.type?.displayName !== 'CodeSnippetLineNumbers');
+    const hasLineNumbers = Boolean(lineNumbersElement);
+    const useInlineGutter = wrapLines;
+    const hasGutter = !wrapLines && (hasHighlights || hasLineNumbers || hasAnyPrefix);
+    const overriddenContext = useMemo(()=>({
+            ...context,
+            inlineGutter: useInlineGutter,
+            showLineNumbers: hasLineNumbers
+        }), [
+        context,
+        useInlineGutter,
+        hasLineNumbers
+    ]);
+    const innerContent = /*#__PURE__*/ jsxs("div", {
+        className: "relative inline-flex min-w-full py-8",
+        children: [
+            !wrapLines && hasHighlights && /*#__PURE__*/ jsx(CodeSnippetHighlights, {}),
+            hasGutter && /*#__PURE__*/ jsxs("div", {
+                "data-slot": "code-snippet-gutter",
+                className: "sticky left-0 z-20 flex shrink-0 py-8 -my-8 mr-8 bg-bg-primary",
+                children: [
+                    hasHighlights && /*#__PURE__*/ jsx(ColorStickColumn, {
+                        lineCount: lineCount,
+                        startingLineNumber: startingLineNumber,
+                        lines: lines,
+                        lineHeightClass: lineHeightClass
+                    }),
+                    lineNumbersElement,
+                    hasAnyPrefix && /*#__PURE__*/ jsx(PrefixColumn, {
+                        lineCount: lineCount,
+                        startingLineNumber: startingLineNumber,
+                        lines: lines,
+                        lineHeightClass: lineHeightClass
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: cn('relative z-10 flex flex-1 min-w-0 pr-12', !hasGutter && !useInlineGutter && 'pl-12'),
+                children: /*#__PURE__*/ jsx(CodeSnippetContext.Provider, {
+                    value: overriddenContext,
+                    children: otherChildren
+                })
+            })
+        ]
+    });
+    if (nativeScroll) return /*#__PURE__*/ jsx("div", {
+        "data-slot": "code-snippet-content",
+        className: cn('min-h-0', wrapLines ? 'overflow-y-auto overflow-x-hidden' : 'overflow-auto', className),
+        ...props,
+        children: innerContent
+    });
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "code-snippet-content",
+        className: cn('min-h-0', className),
+        ...props,
+        children: /*#__PURE__*/ jsxs(ScrollArea, {
+            children: [
+                /*#__PURE__*/ jsx(ScrollAreaViewport, {
+                    children: /*#__PURE__*/ jsx(ScrollAreaContent, {
+                        children: innerContent
+                    })
+                }),
+                /*#__PURE__*/ jsx(ScrollAreaScrollbar, {
+                    orientation: "horizontal"
+                }),
+                /*#__PURE__*/ jsx(ScrollAreaScrollbar, {
+                    orientation: "vertical"
+                }),
+                /*#__PURE__*/ jsx(ScrollAreaCorner, {})
+            ]
+        })
+    });
+};
+CodeSnippetContent.displayName = 'CodeSnippetContent';
+export { CodeSnippetContent };

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

@@ -0,0 +1,42 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { SyntaxAdapter, Token } from './adapters/types';
+export type CodeSnippetSize = 'sm' | 'md' | 'lg';
+export type LineColor = 'danger' | 'warning' | 'info' | 'success' | 'brand' | 'ai' | 'neutral';
+export type LineTextStyle = 'regular' | 'medium' | 'italic';
+export type LineConfig = {
+    /** Color for the line indicator, background, and text */
+    color?: LineColor;
+    /** Prefix content (text, icon, etc.) displayed before the line content */
+    prefix?: ReactNode;
+    /** Text style variant for the line */
+    textStyle?: LineTextStyle;
+    /** Additional CSS class name for the line text */
+    className?: string;
+    /** Inline styles for the line text */
+    style?: CSSProperties;
+};
+export type CodeSnippetContextValue<TLanguage extends string = string> = {
+    code: string;
+    language: TLanguage;
+    tokens: Token[][] | null;
+    isLoading: boolean;
+    size: CodeSnippetSize;
+    wrapLines: boolean;
+    startingLineNumber: number;
+    /** When true, gutter elements (color stick, line numbers, prefix) should be rendered inline with code (used when wrapLines is true) */
+    inlineGutter: boolean;
+    /** When true, show line numbers (either in gutter or inline depending on inlineGutter) */
+    showLineNumbers: boolean;
+    lines: Map<number, LineConfig>;
+    isExpanded: boolean;
+    maxLines: number;
+    copyToClipboard: () => Promise<void>;
+    setWrapLines: (wrap: boolean) => void;
+    setIsExpanded: (expanded: boolean) => void;
+    adapter: SyntaxAdapter<TLanguage> | null;
+};
+export declare const CodeSnippetContext: import("react").Context<CodeSnippetContextValue<string> | null>;
+export type AdapterContextValue<TLanguage extends string = string> = {
+    adapter: SyntaxAdapter<TLanguage>;
+};
+export declare const AdapterContext: import("react").Context<AdapterContextValue<string> | null>;

package/dist/components/CodeSnippet/CodeSnippetContext.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+const CodeSnippetContext = createContext(null);
+const AdapterContext = createContext(null);
+export { AdapterContext, CodeSnippetContext };