@tinyrack/themes 0.0.0

package/dist/showcase/mantine-showcase.js

@@ -0,0 +1,670 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Mantine from '@mantine/core';
+export const mantineShowcaseEntries = [
+    {
+        id: 'mantine-accordion',
+        name: 'Accordion',
+        category: 'Mantine Core',
+        description: '@mantine/core Accordion themed preview',
+        render: () => (_jsx(Mantine.Accordion, { defaultValue: "item", children: _jsxs(Mantine.Accordion.Item, { value: "item", children: [_jsx(Mantine.Accordion.Control, { children: "Section" }), _jsx(Mantine.Accordion.Panel, { children: "Accordion panel" })] }) })),
+    },
+    {
+        id: 'mantine-actionicon',
+        name: 'ActionIcon',
+        category: 'Mantine Core',
+        description: '@mantine/core ActionIcon themed preview',
+        render: () => _jsx(Mantine.ActionIcon, { "aria-label": "Settings", children: "\u2605" }),
+    },
+    {
+        id: 'mantine-affix',
+        name: 'Affix',
+        category: 'Mantine Core',
+        description: '@mantine/core Affix themed preview',
+        render: () => (_jsx(Mantine.Box, { pos: "relative", h: 80, children: _jsx(Mantine.Affix, { position: { bottom: 8, right: 8 }, withinPortal: false, children: _jsx(Mantine.Button, { size: "xs", children: "Affix" }) }) })),
+    },
+    {
+        id: 'mantine-alert',
+        name: 'Alert',
+        category: 'Mantine Core',
+        description: '@mantine/core Alert themed preview',
+        render: () => (_jsx(Mantine.Alert, { title: "Alert", color: "tinyrack", children: "Important themed message" })),
+    },
+    {
+        id: 'mantine-anchor',
+        name: 'Anchor',
+        category: 'Mantine Core',
+        description: '@mantine/core Anchor themed preview',
+        render: () => _jsx(Mantine.Anchor, { href: "#mantine-anchor", children: "Anchor link" }),
+    },
+    {
+        id: 'mantine-appshell',
+        name: 'AppShell',
+        category: 'Mantine Core',
+        description: '@mantine/core AppShell themed preview',
+        render: () => (_jsx(Mantine.Box, { className: "tinyrack-demo-appshell", children: _jsxs(Mantine.AppShell, { header: { height: 40 }, mode: "static", navbar: { width: 128, breakpoint: 'sm' }, padding: "sm", children: [_jsx(Mantine.AppShell.Header, { px: "sm", children: "Header" }), _jsx(Mantine.AppShell.Navbar, { p: "sm", children: "Nav" }), _jsx(Mantine.AppShell.Main, { children: "Main content" })] }) })),
+    },
+    {
+        id: 'mantine-aspectratio',
+        name: 'AspectRatio',
+        category: 'Mantine Core',
+        description: '@mantine/core AspectRatio themed preview',
+        render: () => (_jsx(Mantine.AspectRatio, { ratio: 16 / 9, maw: 220, children: _jsx(Mantine.Center, { bg: "tinyrack.1", children: "16:9" }) })),
+    },
+    {
+        id: 'mantine-autocomplete',
+        name: 'Autocomplete',
+        category: 'Mantine Core',
+        description: '@mantine/core Autocomplete themed preview',
+        render: () => (_jsx(Mantine.Autocomplete, { label: "Autocomplete", data: ['Mantine', 'daisyUI', 'Starlight'], defaultValue: "Mantine" })),
+    },
+    {
+        id: 'mantine-avatar',
+        name: 'Avatar',
+        category: 'Mantine Core',
+        description: '@mantine/core Avatar themed preview',
+        render: () => (_jsx(Mantine.Avatar, { color: "tinyrack", radius: "xl", children: "TR" })),
+    },
+    {
+        id: 'mantine-backgroundimage',
+        name: 'BackgroundImage',
+        category: 'Mantine Core',
+        description: '@mantine/core BackgroundImage themed preview',
+        render: () => (_jsx(Mantine.BackgroundImage, { src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80'%3E%3Crect width='160' height='80' fill='%23d9edff'/%3E%3Ccircle cx='40' cy='40' r='24' fill='%233297f0'/%3E%3C/svg%3E", radius: "md", children: _jsx(Mantine.Center, { h: 80, children: "Background" }) })),
+    },
+    {
+        id: 'mantine-badge',
+        name: 'Badge',
+        category: 'Mantine Core',
+        description: '@mantine/core Badge themed preview',
+        render: () => _jsx(Mantine.Badge, { children: "Tinyrack" }),
+    },
+    {
+        id: 'mantine-blockquote',
+        name: 'Blockquote',
+        category: 'Mantine Core',
+        description: '@mantine/core Blockquote themed preview',
+        render: () => (_jsx(Mantine.Blockquote, { cite: "Tinyrack", children: "Theme-first design system" })),
+    },
+    {
+        id: 'mantine-box',
+        name: 'Box',
+        category: 'Mantine Core',
+        description: '@mantine/core Box themed preview',
+        render: () => (_jsx(Mantine.Box, { p: "md", bg: "tinyrack.0", children: "Box" })),
+    },
+    {
+        id: 'mantine-breadcrumbs',
+        name: 'Breadcrumbs',
+        category: 'Mantine Core',
+        description: '@mantine/core Breadcrumbs themed preview',
+        render: () => (_jsxs(Mantine.Breadcrumbs, { children: [_jsx(Mantine.Anchor, { href: "#", children: "Home" }), _jsx(Mantine.Anchor, { href: "#", children: "Themes" })] })),
+    },
+    {
+        id: 'mantine-burger',
+        name: 'Burger',
+        category: 'Mantine Core',
+        description: '@mantine/core Burger themed preview',
+        render: () => _jsx(Mantine.Burger, { opened: false, "aria-label": "Toggle navigation" }),
+    },
+    {
+        id: 'mantine-button',
+        name: 'Button',
+        category: 'Mantine Core',
+        description: '@mantine/core Button themed preview',
+        render: () => _jsx(Mantine.Button, { children: "Button" }),
+    },
+    {
+        id: 'mantine-card',
+        name: 'Card',
+        category: 'Mantine Core',
+        description: '@mantine/core Card themed preview',
+        render: () => (_jsxs(Mantine.Card, { shadow: "sm", padding: "md", radius: "md", withBorder: true, children: [_jsx(Mantine.Text, { fw: 600, children: "Card" }), _jsx(Mantine.Text, { size: "sm", children: "Card content" })] })),
+    },
+    {
+        id: 'mantine-center',
+        name: 'Center',
+        category: 'Mantine Core',
+        description: '@mantine/core Center themed preview',
+        render: () => (_jsx(Mantine.Center, { h: 64, bg: "tinyrack.0", children: "Centered" })),
+    },
+    {
+        id: 'mantine-checkbox',
+        name: 'Checkbox',
+        category: 'Mantine Core',
+        description: '@mantine/core Checkbox themed preview',
+        render: () => _jsx(Mantine.Checkbox, { label: "Checkbox", defaultChecked: true }),
+    },
+    {
+        id: 'mantine-chip',
+        name: 'Chip',
+        category: 'Mantine Core',
+        description: '@mantine/core Chip themed preview',
+        render: () => _jsx(Mantine.Chip, { defaultChecked: true, children: "Chip" }),
+    },
+    {
+        id: 'mantine-code',
+        name: 'Code',
+        category: 'Mantine Core',
+        description: '@mantine/core Code themed preview',
+        render: () => _jsx(Mantine.Code, { children: "@tinyrack/themes" }),
+    },
+    {
+        id: 'mantine-collapse',
+        name: 'Collapse',
+        category: 'Mantine Core',
+        description: '@mantine/core Collapse themed preview',
+        render: () => _jsx(Mantine.Collapse, { expanded: true, children: "Collapse content" }),
+    },
+    {
+        id: 'mantine-colorinput',
+        name: 'ColorInput',
+        category: 'Mantine Core',
+        description: '@mantine/core ColorInput themed preview',
+        render: () => _jsx(Mantine.ColorInput, { label: "Color input", defaultValue: "#1762ae" }),
+    },
+    {
+        id: 'mantine-colorpicker',
+        name: 'ColorPicker',
+        category: 'Mantine Core',
+        description: '@mantine/core ColorPicker themed preview',
+        render: () => _jsx(Mantine.ColorPicker, { defaultValue: "#1762ae", format: "hex" }),
+    },
+    {
+        id: 'mantine-colorswatch',
+        name: 'ColorSwatch',
+        category: 'Mantine Core',
+        description: '@mantine/core ColorSwatch themed preview',
+        render: () => _jsx(Mantine.ColorSwatch, { color: "#1762ae" }),
+    },
+    {
+        id: 'mantine-combobox',
+        name: 'Combobox',
+        category: 'Mantine Core',
+        description: '@mantine/core Combobox themed preview',
+        render: () => (_jsx(Mantine.Combobox, { store: Mantine.useCombobox(), children: _jsx(Mantine.Combobox.Target, { children: _jsx(Mantine.Input, { component: "button", type: "button", children: "Combobox target" }) }) })),
+    },
+    {
+        id: 'mantine-container',
+        name: 'Container',
+        category: 'Mantine Core',
+        description: '@mantine/core Container themed preview',
+        render: () => (_jsx(Mantine.Container, { size: "xs", bg: "tinyrack.0", p: "sm", children: "Container" })),
+    },
+    {
+        id: 'mantine-copybutton',
+        name: 'CopyButton',
+        category: 'Mantine Core',
+        description: '@mantine/core CopyButton themed preview',
+        render: () => (_jsx(Mantine.CopyButton, { value: "@tinyrack/themes", children: ({ copied, copy }) => (_jsx(Mantine.Button, { onClick: copy, children: copied ? 'Copied' : 'Copy' })) })),
+    },
+    {
+        id: 'mantine-datalist',
+        name: 'DataList',
+        category: 'Mantine Core',
+        description: '@mantine/core DataList themed preview',
+        render: () => (_jsx(Mantine.DataList, { children: _jsxs(Mantine.DataList.Item, { children: [_jsx(Mantine.DataList.ItemLabel, { children: "Package" }), _jsx(Mantine.DataList.ItemValue, { children: "@tinyrack/themes" })] }) })),
+    },
+    {
+        id: 'mantine-dialog',
+        name: 'Dialog',
+        category: 'Mantine Core',
+        description: '@mantine/core Dialog themed preview',
+        render: () => (_jsx(Mantine.Box, { pos: "relative", h: 84, children: _jsx(Mantine.Dialog, { opened: true, withCloseButton: false, withinPortal: false, position: { bottom: 8, right: 8 }, size: "sm", children: "Dialog" }) })),
+    },
+    {
+        id: 'mantine-divider',
+        name: 'Divider',
+        category: 'Mantine Core',
+        description: '@mantine/core Divider themed preview',
+        render: () => _jsx(Mantine.Divider, { label: "Divider", labelPosition: "center" }),
+    },
+    {
+        id: 'mantine-drawer',
+        name: 'Drawer',
+        category: 'Mantine Core',
+        description: '@mantine/core Drawer themed preview',
+        render: () => (_jsxs(Mantine.Box, { children: [_jsx(Mantine.Drawer, { opened: false, onClose: () => undefined, title: "Drawer", withinPortal: false, children: "Drawer content" }), _jsx(Mantine.Button, { variant: "light", children: "Drawer trigger" })] })),
+    },
+    {
+        id: 'mantine-emptystate',
+        name: 'EmptyState',
+        category: 'Mantine Core',
+        description: '@mantine/core EmptyState themed preview',
+        render: () => (_jsxs(Mantine.EmptyState, { children: [_jsx(Mantine.EmptyState.Indicator, { children: "\u25C7" }), _jsx(Mantine.EmptyState.Title, { children: "Empty state" }), _jsx(Mantine.EmptyState.Description, { children: "No items yet" })] })),
+    },
+    {
+        id: 'mantine-fieldset',
+        name: 'Fieldset',
+        category: 'Mantine Core',
+        description: '@mantine/core Fieldset themed preview',
+        render: () => (_jsx(Mantine.Fieldset, { legend: "Fieldset", children: _jsx(Mantine.TextInput, { label: "Name" }) })),
+    },
+    {
+        id: 'mantine-fileinput',
+        name: 'FileInput',
+        category: 'Mantine Core',
+        description: '@mantine/core FileInput themed preview',
+        render: () => _jsx(Mantine.FileInput, { label: "File input", placeholder: "Select file" }),
+    },
+    {
+        id: 'mantine-flex',
+        name: 'Flex',
+        category: 'Mantine Core',
+        description: '@mantine/core Flex themed preview',
+        render: () => (_jsxs(Mantine.Flex, { gap: "sm", children: [_jsx(Mantine.Badge, { children: "One" }), _jsx(Mantine.Badge, { children: "Two" })] })),
+    },
+    {
+        id: 'mantine-grid',
+        name: 'Grid',
+        category: 'Mantine Core',
+        description: '@mantine/core Grid themed preview',
+        render: () => (_jsxs(Mantine.Grid, { children: [_jsx(Mantine.Grid.Col, { span: 6, children: _jsx(Mantine.Paper, { p: "xs", children: "A" }) }), _jsx(Mantine.Grid.Col, { span: 6, children: _jsx(Mantine.Paper, { p: "xs", children: "B" }) })] })),
+    },
+    {
+        id: 'mantine-group',
+        name: 'Group',
+        category: 'Mantine Core',
+        description: '@mantine/core Group themed preview',
+        render: () => (_jsxs(Mantine.Group, { children: [_jsx(Mantine.Button, { size: "xs", children: "A" }), _jsx(Mantine.Button, { size: "xs", variant: "light", children: "B" })] })),
+    },
+    {
+        id: 'mantine-highlight',
+        name: 'Highlight',
+        category: 'Mantine Core',
+        description: '@mantine/core Highlight themed preview',
+        render: () => (_jsx(Mantine.Highlight, { highlight: "theme", children: "Tinyrack theme system" })),
+    },
+    {
+        id: 'mantine-hovercard',
+        name: 'HoverCard',
+        category: 'Mantine Core',
+        description: '@mantine/core HoverCard themed preview',
+        render: () => (_jsxs(Mantine.HoverCard, { defaultOpened: true, withinPortal: false, children: [_jsx(Mantine.HoverCard.Target, { children: _jsx(Mantine.Button, { size: "xs", children: "Hover" }) }), _jsx(Mantine.HoverCard.Dropdown, { children: "Hover content" })] })),
+    },
+    {
+        id: 'mantine-image',
+        name: 'Image',
+        category: 'Mantine Core',
+        description: '@mantine/core Image themed preview',
+        render: () => (_jsx(Mantine.Image, { src: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Crect width='160' height='90' fill='%23d9edff'/%3E%3Ctext x='80' y='50' text-anchor='middle' font-size='16'%3EImage%3C/text%3E%3C/svg%3E", alt: "Theme placeholder", radius: "md" })),
+    },
+    {
+        id: 'mantine-indicator',
+        name: 'Indicator',
+        category: 'Mantine Core',
+        description: '@mantine/core Indicator themed preview',
+        render: () => (_jsx(Mantine.Indicator, { label: "new", children: _jsx(Mantine.Avatar, { radius: "sm", children: "TR" }) })),
+    },
+    {
+        id: 'mantine-input',
+        name: 'Input',
+        category: 'Mantine Core',
+        description: '@mantine/core Input themed preview',
+        render: () => _jsx(Mantine.Input, { placeholder: "Input" }),
+    },
+    {
+        id: 'mantine-jsoninput',
+        name: 'JsonInput',
+        category: 'Mantine Core',
+        description: '@mantine/core JsonInput themed preview',
+        render: () => (_jsx(Mantine.JsonInput, { label: "JSON", defaultValue: '{\n  "theme": "tinyrack"\n}', autosize: true })),
+    },
+    {
+        id: 'mantine-kbd',
+        name: 'Kbd',
+        category: 'Mantine Core',
+        description: '@mantine/core Kbd themed preview',
+        render: () => _jsx(Mantine.Kbd, { children: "\u2318 K" }),
+    },
+    {
+        id: 'mantine-list',
+        name: 'List',
+        category: 'Mantine Core',
+        description: '@mantine/core List themed preview',
+        render: () => (_jsxs(Mantine.List, { children: [_jsx(Mantine.List.Item, { children: "Tokens" }), _jsx(Mantine.List.Item, { children: "Adapters" })] })),
+    },
+    {
+        id: 'mantine-loader',
+        name: 'Loader',
+        category: 'Mantine Core',
+        description: '@mantine/core Loader themed preview',
+        render: () => _jsx(Mantine.Loader, {}),
+    },
+    {
+        id: 'mantine-loadingoverlay',
+        name: 'LoadingOverlay',
+        category: 'Mantine Core',
+        description: '@mantine/core LoadingOverlay themed preview',
+        render: () => (_jsxs(Mantine.Box, { pos: "relative", h: 72, children: [_jsx(Mantine.LoadingOverlay, { visible: true, zIndex: 1 }), _jsx(Mantine.Text, { children: "Loading area" })] })),
+    },
+    {
+        id: 'mantine-mark',
+        name: 'Mark',
+        category: 'Mantine Core',
+        description: '@mantine/core Mark themed preview',
+        render: () => _jsx(Mantine.Mark, { children: "Marked text" }),
+    },
+    {
+        id: 'mantine-marquee',
+        name: 'Marquee',
+        category: 'Mantine Core',
+        description: '@mantine/core Marquee themed preview',
+        render: () => (_jsx(Mantine.Marquee, { children: "Theme tokens \u00B7 Mantine \u00B7 daisyUI \u00B7 Starlight" })),
+    },
+    {
+        id: 'mantine-menu',
+        name: 'Menu',
+        category: 'Mantine Core',
+        description: '@mantine/core Menu themed preview',
+        render: () => (_jsxs(Mantine.Menu, { opened: true, withinPortal: false, children: [_jsx(Mantine.Menu.Target, { children: _jsx(Mantine.Button, { size: "xs", children: "Menu" }) }), _jsx(Mantine.Menu.Dropdown, { children: _jsx(Mantine.Menu.Item, { children: "Item" }) })] })),
+    },
+    {
+        id: 'mantine-modal',
+        name: 'Modal',
+        category: 'Mantine Core',
+        description: '@mantine/core Modal themed preview',
+        render: () => (_jsxs(Mantine.Box, { children: [_jsx(Mantine.Modal, { opened: false, onClose: () => undefined, title: "Modal", withinPortal: false, children: "Modal content" }), _jsx(Mantine.Button, { variant: "light", children: "Modal trigger" })] })),
+    },
+    {
+        id: 'mantine-multiselect',
+        name: 'MultiSelect',
+        category: 'Mantine Core',
+        description: '@mantine/core MultiSelect themed preview',
+        render: () => (_jsx(Mantine.MultiSelect, { label: "Multi select", data: ['Mantine', 'daisyUI'], defaultValue: ['Mantine'] })),
+    },
+    {
+        id: 'mantine-nativeselect',
+        name: 'NativeSelect',
+        category: 'Mantine Core',
+        description: '@mantine/core NativeSelect themed preview',
+        render: () => (_jsx(Mantine.NativeSelect, { label: "Native select", data: ['Mantine', 'daisyUI'] })),
+    },
+    {
+        id: 'mantine-navlink',
+        name: 'NavLink',
+        category: 'Mantine Core',
+        description: '@mantine/core NavLink themed preview',
+        render: () => _jsx(Mantine.NavLink, { label: "Navigation link", active: true }),
+    },
+    {
+        id: 'mantine-notification',
+        name: 'Notification',
+        category: 'Mantine Core',
+        description: '@mantine/core Notification themed preview',
+        render: () => (_jsx(Mantine.Notification, { title: "Notification", withCloseButton: false, children: "Saved" })),
+    },
+    {
+        id: 'mantine-numberformatter',
+        name: 'NumberFormatter',
+        category: 'Mantine Core',
+        description: '@mantine/core NumberFormatter themed preview',
+        render: () => (_jsx(Mantine.NumberFormatter, { value: 12345.67, thousandSeparator: true, prefix: "$" })),
+    },
+    {
+        id: 'mantine-numberinput',
+        name: 'NumberInput',
+        category: 'Mantine Core',
+        description: '@mantine/core NumberInput themed preview',
+        render: () => _jsx(Mantine.NumberInput, { label: "Number", defaultValue: 42 }),
+    },
+    {
+        id: 'mantine-overlay',
+        name: 'Overlay',
+        category: 'Mantine Core',
+        description: '@mantine/core Overlay themed preview',
+        render: () => (_jsxs(Mantine.Box, { pos: "relative", h: 72, bg: "gray.2", children: [_jsx(Mantine.Overlay, { color: "#000", backgroundOpacity: 0.25 }), _jsx(Mantine.Text, { c: "white", pos: "relative", p: "sm", children: "Overlay" })] })),
+    },
+    {
+        id: 'mantine-pagination',
+        name: 'Pagination',
+        category: 'Mantine Core',
+        description: '@mantine/core Pagination themed preview',
+        render: () => _jsx(Mantine.Pagination, { total: 6, value: 2 }),
+    },
+    {
+        id: 'mantine-paper',
+        name: 'Paper',
+        category: 'Mantine Core',
+        description: '@mantine/core Paper themed preview',
+        render: () => (_jsx(Mantine.Paper, { p: "md", shadow: "sm", withBorder: true, children: "Paper" })),
+    },
+    {
+        id: 'mantine-passwordinput',
+        name: 'PasswordInput',
+        category: 'Mantine Core',
+        description: '@mantine/core PasswordInput themed preview',
+        render: () => _jsx(Mantine.PasswordInput, { label: "Password", defaultValue: "secret" }),
+    },
+    {
+        id: 'mantine-pill',
+        name: 'Pill',
+        category: 'Mantine Core',
+        description: '@mantine/core Pill themed preview',
+        render: () => _jsx(Mantine.Pill, { children: "Theme" }),
+    },
+    {
+        id: 'mantine-pillsinput',
+        name: 'PillsInput',
+        category: 'Mantine Core',
+        description: '@mantine/core PillsInput themed preview',
+        render: () => (_jsx(Mantine.PillsInput, { label: "Pills input", children: _jsxs(Mantine.Pill.Group, { children: [_jsx(Mantine.Pill, { children: "React" }), _jsx(Mantine.PillsInput.Field, { placeholder: "Add" })] }) })),
+    },
+    {
+        id: 'mantine-pininput',
+        name: 'PinInput',
+        category: 'Mantine Core',
+        description: '@mantine/core PinInput themed preview',
+        render: () => _jsx(Mantine.PinInput, { defaultValue: "1234" }),
+    },
+    {
+        id: 'mantine-popover',
+        name: 'Popover',
+        category: 'Mantine Core',
+        description: '@mantine/core Popover themed preview',
+        render: () => (_jsxs(Mantine.Popover, { opened: true, withinPortal: false, children: [_jsx(Mantine.Popover.Target, { children: _jsx(Mantine.Button, { size: "xs", children: "Popover" }) }), _jsx(Mantine.Popover.Dropdown, { children: "Popover content" })] })),
+    },
+    {
+        id: 'mantine-progress',
+        name: 'Progress',
+        category: 'Mantine Core',
+        description: '@mantine/core Progress themed preview',
+        render: () => _jsx(Mantine.Progress, { value: 68 }),
+    },
+    {
+        id: 'mantine-radio',
+        name: 'Radio',
+        category: 'Mantine Core',
+        description: '@mantine/core Radio themed preview',
+        render: () => _jsx(Mantine.Radio, { label: "Radio", defaultChecked: true }),
+    },
+    {
+        id: 'mantine-rangeslider',
+        name: 'RangeSlider',
+        category: 'Mantine Core',
+        description: '@mantine/core RangeSlider themed preview',
+        render: () => (_jsx(Mantine.RangeSlider, { className: "tinyrack-demo-wide-control", defaultValue: [20, 80] })),
+    },
+    {
+        id: 'mantine-rating',
+        name: 'Rating',
+        category: 'Mantine Core',
+        description: '@mantine/core Rating themed preview',
+        render: () => _jsx(Mantine.Rating, { defaultValue: 4 }),
+    },
+    {
+        id: 'mantine-ringprogress',
+        name: 'RingProgress',
+        category: 'Mantine Core',
+        description: '@mantine/core RingProgress themed preview',
+        render: () => (_jsx(Mantine.RingProgress, { sections: [{ value: 70, color: 'tinyrack' }], label: _jsx(Mantine.Text, { ta: "center", children: "70%" }) })),
+    },
+    {
+        id: 'mantine-scrollarea',
+        name: 'ScrollArea',
+        category: 'Mantine Core',
+        description: '@mantine/core ScrollArea themed preview',
+        render: () => (_jsx(Mantine.ScrollArea, { h: 80, children: _jsxs(Mantine.Text, { children: ["Scrollable content", _jsx("br", {}), "Line 2", _jsx("br", {}), "Line 3", _jsx("br", {}), "Line 4", _jsx("br", {}), "Line 5"] }) })),
+    },
+    {
+        id: 'mantine-segmentedcontrol',
+        name: 'SegmentedControl',
+        category: 'Mantine Core',
+        description: '@mantine/core SegmentedControl themed preview',
+        render: () => _jsx(Mantine.SegmentedControl, { data: ['React', 'Astro'] }),
+    },
+    {
+        id: 'mantine-select',
+        name: 'Select',
+        category: 'Mantine Core',
+        description: '@mantine/core Select themed preview',
+        render: () => (_jsx(Mantine.Select, { label: "Select", data: ['Mantine', 'daisyUI'], defaultValue: "Mantine" })),
+    },
+    {
+        id: 'mantine-semicircleprogress',
+        name: 'SemiCircleProgress',
+        category: 'Mantine Core',
+        description: '@mantine/core SemiCircleProgress themed preview',
+        render: () => _jsx(Mantine.SemiCircleProgress, { value: 72, label: "72%" }),
+    },
+    {
+        id: 'mantine-simplegrid',
+        name: 'SimpleGrid',
+        category: 'Mantine Core',
+        description: '@mantine/core SimpleGrid themed preview',
+        render: () => (_jsxs(Mantine.SimpleGrid, { cols: 2, children: [_jsx(Mantine.Paper, { p: "xs", children: "A" }), _jsx(Mantine.Paper, { p: "xs", children: "B" })] })),
+    },
+    {
+        id: 'mantine-skeleton',
+        name: 'Skeleton',
+        category: 'Mantine Core',
+        description: '@mantine/core Skeleton themed preview',
+        render: () => _jsx(Mantine.Skeleton, { height: 40, radius: "md" }),
+    },
+    {
+        id: 'mantine-slider',
+        name: 'Slider',
+        category: 'Mantine Core',
+        description: '@mantine/core Slider themed preview',
+        render: () => (_jsx(Mantine.Slider, { className: "tinyrack-demo-wide-control", defaultValue: 60 })),
+    },
+    {
+        id: 'mantine-space',
+        name: 'Space',
+        category: 'Mantine Core',
+        description: '@mantine/core Space themed preview',
+        render: () => (_jsxs(Mantine.Box, { children: [_jsx(Mantine.Text, { children: "Before" }), _jsx(Mantine.Space, { h: "sm" }), _jsx(Mantine.Text, { children: "After" })] })),
+    },
+    {
+        id: 'mantine-spoiler',
+        name: 'Spoiler',
+        category: 'Mantine Core',
+        description: '@mantine/core Spoiler themed preview',
+        render: () => (_jsx(Mantine.Spoiler, { maxHeight: 36, showLabel: "Show", hideLabel: "Hide", children: "Spoiler content with more text for previewing typography and spacing." })),
+    },
+    {
+        id: 'mantine-stack',
+        name: 'Stack',
+        category: 'Mantine Core',
+        description: '@mantine/core Stack themed preview',
+        render: () => (_jsxs(Mantine.Stack, { gap: "xs", children: [_jsx(Mantine.Badge, { children: "Stack" }), _jsx(Mantine.Button, { size: "xs", children: "Button" })] })),
+    },
+    {
+        id: 'mantine-stepper',
+        name: 'Stepper',
+        category: 'Mantine Core',
+        description: '@mantine/core Stepper themed preview',
+        render: () => (_jsxs(Mantine.Stepper, { active: 1, className: "tinyrack-demo-stepper", children: [_jsx(Mantine.Stepper.Step, { label: "Profile", description: "Create account" }), _jsx(Mantine.Stepper.Step, { label: "Workspace", description: "Configure rack" }), _jsx(Mantine.Stepper.Step, { label: "Deploy", description: "Launch service" })] })),
+    },
+    {
+        id: 'mantine-switch',
+        name: 'Switch',
+        category: 'Mantine Core',
+        description: '@mantine/core Switch themed preview',
+        render: () => _jsx(Mantine.Switch, { label: "Switch", defaultChecked: true }),
+    },
+    {
+        id: 'mantine-table',
+        name: 'Table',
+        category: 'Mantine Core',
+        description: '@mantine/core Table themed preview',
+        render: () => (_jsxs(Mantine.Table, { children: [_jsx(Mantine.Table.Thead, { children: _jsx(Mantine.Table.Tr, { children: _jsx(Mantine.Table.Th, { children: "Name" }) }) }), _jsx(Mantine.Table.Tbody, { children: _jsx(Mantine.Table.Tr, { children: _jsx(Mantine.Table.Td, { children: "Theme" }) }) })] })),
+    },
+    {
+        id: 'mantine-tabs',
+        name: 'Tabs',
+        category: 'Mantine Core',
+        description: '@mantine/core Tabs themed preview',
+        render: () => (_jsxs(Mantine.Tabs, { className: "tinyrack-demo-tabs", defaultValue: "one", children: [_jsxs(Mantine.Tabs.List, { children: [_jsx(Mantine.Tabs.Tab, { value: "one", children: "One" }), _jsx(Mantine.Tabs.Tab, { value: "two", children: "Two" })] }), _jsx(Mantine.Tabs.Panel, { value: "one", children: "Tab panel" })] })),
+    },
+    {
+        id: 'mantine-tagsinput',
+        name: 'TagsInput',
+        category: 'Mantine Core',
+        description: '@mantine/core TagsInput themed preview',
+        render: () => (_jsx(Mantine.TagsInput, { label: "Tags", data: ['theme', 'token'], defaultValue: ['theme'] })),
+    },
+    {
+        id: 'mantine-text',
+        name: 'Text',
+        category: 'Mantine Core',
+        description: '@mantine/core Text themed preview',
+        render: () => _jsx(Mantine.Text, { children: "Text component" }),
+    },
+    {
+        id: 'mantine-textinput',
+        name: 'TextInput',
+        category: 'Mantine Core',
+        description: '@mantine/core TextInput themed preview',
+        render: () => _jsx(Mantine.TextInput, { label: "Text input", placeholder: "Tinyrack" }),
+    },
+    {
+        id: 'mantine-textarea',
+        name: 'Textarea',
+        category: 'Mantine Core',
+        description: '@mantine/core Textarea themed preview',
+        render: () => _jsx(Mantine.Textarea, { label: "Textarea", defaultValue: "Theme notes" }),
+    },
+    {
+        id: 'mantine-themeicon',
+        name: 'ThemeIcon',
+        category: 'Mantine Core',
+        description: '@mantine/core ThemeIcon themed preview',
+        render: () => _jsx(Mantine.ThemeIcon, { children: "\u2605" }),
+    },
+    {
+        id: 'mantine-timeline',
+        name: 'Timeline',
+        category: 'Mantine Core',
+        description: '@mantine/core Timeline themed preview',
+        render: () => (_jsxs(Mantine.Timeline, { active: 1, children: [_jsx(Mantine.Timeline.Item, { title: "Tokens", children: "Shared tokens" }), _jsx(Mantine.Timeline.Item, { title: "Adapters", children: "Library themes" })] })),
+    },
+    {
+        id: 'mantine-title',
+        name: 'Title',
+        category: 'Mantine Core',
+        description: '@mantine/core Title themed preview',
+        render: () => _jsx(Mantine.Title, { order: 3, children: "Title" }),
+    },
+    {
+        id: 'mantine-tooltip',
+        name: 'Tooltip',
+        category: 'Mantine Core',
+        description: '@mantine/core Tooltip themed preview',
+        render: () => (_jsx(Mantine.Tooltip, { label: "Tooltip", opened: true, withinPortal: false, children: _jsx(Mantine.Button, { size: "xs", children: "Target" }) })),
+    },
+    {
+        id: 'mantine-typography',
+        name: 'Typography',
+        category: 'Mantine Core',
+        description: '@mantine/core Typography themed preview',
+        render: () => (_jsxs(Mantine.Typography, { children: [_jsx("h3", { children: "Typography" }), _jsx("p", { children: "Document content preview." })] })),
+    },
+    {
+        id: 'mantine-unstyledbutton',
+        name: 'UnstyledButton',
+        category: 'Mantine Core',
+        description: '@mantine/core UnstyledButton themed preview',
+        render: () => (_jsx(Mantine.UnstyledButton, { p: "xs", children: "Unstyled button" })),
+    },
+];
+//# sourceMappingURL=mantine-showcase.js.map