fix: dialog varianten

docs/30-components/dialog.mdx

@@ -106,37 +106,39 @@ Die Beschriftung wird über `_label` gesetzt. Der Inhalt wird über den Slot ber
 	sourceCodeDetailsCollapsed
 />
 
-#### Varianten
+#### Breite
 
-Der Dialog unterstützt zwei Varianten:
+Die Breite des Dialogs wird über `_width` gesteuert:
 
 <DialogPreview
-	visibleProperties={['_variant']}
+	visibleProperties={['_width']}
 	initialProps={{
-		_label: 'Dialog mit Card-Variante',
-		_variant: 'card',
+		_label: 'Dialog mit Custom-Breite',
+		_width: '500px',
 	}}
 	sourceCodeDetailsCollapsed
 />
 
-**Verfügbare Varianten:**
-- `blank`: Volle Breite, minimales Styling (Standard)
-- `card`: Mit Abstand und Kartendesign
+**Hinweis:** Die maximale Breite ist auf 100% begrenzt.
 
-#### Breite
+#### Varianten
 
-Die Breite des Dialogs wird über `_width` gesteuert:
+Der Dialog unterstützt zwei Varianten:
 
 <DialogPreview
-	visibleProperties={['_width']}
+	visibleProperties={['_variant']}
 	initialProps={{
-		_label: 'Dialog mit Custom-Breite',
-		_width: '500px',
+		_label: 'Dialog mit Card-Variante',
+		_variant: 'card',
 	}}
 	sourceCodeDetailsCollapsed
 />
 
-**Hinweis:** Die maximale Breite ist auf 100% begrenzt.
+**Verfügbare Varianten:**
+- `blank`: Minimales Design - Themeabhängig Hintergrund und Abrundung
+- `card`: Nutzt das Design der Karte
+
+
 
 #### Callback-Handling
 
@@ -152,4 +154,4 @@ Der `onClose`-Callback wird aufgerufen, wenn der Dialog geschlossen wird (durch
 
 ## API
 
-<Readme />
+<Readme />

src/components/previews/components/Dialog.tsx

@@ -4,9 +4,10 @@ import { KolButton, KolInputText, KolDialog } from '@public-ui/react-v19';
 import { translate } from '@docusaurus/Translate';
 import { sanitizeHtml } from '../../../shares/sanitize';
 import type { JSX } from '@public-ui/components';
-import { DialogVariantProperty, MultiLineTextProperty } from '../properties';
+import { MultiLineTextProperty, VariantProperty } from '../properties';
 import type { PreviewDefaults } from '../utils';
 import { getPreviewDefaults } from '../utils';
+import { variantDialogOptions } from '../properties/VariantProperty';
 
 interface DialogPreviewProps extends JSX.KolDialog {
 	_slot?: string;
@@ -31,7 +32,7 @@ const DialogPreview: React.FC<PreviewDefaults<DialogPreviewProps>> = (props) =>
 			propertyComponents={{
 				_label: <KolInputText _label="Label" />,
 				_width: <KolInputText _label="Width" />,
-				_variant: <DialogVariantProperty label="Variant" defaultValue="card" />,
+				_variant: <VariantProperty label="Variant" defaultValue="card" variantOptions={variantDialogOptions} />,
 				_slot: <MultiLineTextProperty label="Content" />,
 			}}
 			componentName="KolDialog"

src/components/previews/components/Modal.tsx

@@ -1,12 +1,13 @@
 import React, { useRef } from 'react';
 import Preview, { PreviewLayout } from '../Preview';
-import { DialogVariantProperty, MultiLineTextProperty } from '../properties';
+import { VariantProperty, MultiLineTextProperty } from '../properties';
 import type { JSX } from '@public-ui/components';
 import { KolButton, KolInputText, KolModal } from '@public-ui/react-v19';
 import { translate } from '@docusaurus/Translate';
 import { sanitizeHtml } from '../../../shares/sanitize';
 import type { PreviewDefaults } from '../utils';
 import { getPreviewDefaults } from '../utils';
+import { variantDialogOptions } from '../properties/VariantProperty';
 
 interface ModalPreviewProps extends JSX.KolModal {
 	_slot?: string;
@@ -30,7 +31,7 @@ const ModalPreview = (props: PreviewDefaults<ModalPreviewProps>) => {
 				_label: <KolInputText _label="Label" />,
 				_width: <KolInputText _label="Width" />,
 				_slot: <MultiLineTextProperty label="Content" />,
-				_variant: <DialogVariantProperty label="Variant" defaultValue="card" />,
+				_variant: <VariantProperty label="Variant" defaultValue="card" variantOptions={variantDialogOptions} />,
 			}}
 			componentName="KolModal"
 			layout={PreviewLayout.CENTERED}

src/components/previews/properties/VariantProperty.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 export const variantButtonOptions = ['normal', 'primary', 'secondary', 'tertiary', 'danger', 'ghost'];
 export const variantLinkOptions = ['normal', 'small'];
+export const variantDialogOptions = ['card', 'blank'];
 
 const VariantProperty = (props: {
 	label: string;

src/components/previews/properties/index.ts

@@ -6,7 +6,6 @@ export { default as BoundedNumberProperty } from './BoundedNumberProperty';
 export { default as VariantProperty } from './VariantProperty';
 export { default as ClampedNumberProperty } from './ClampedNumberProperty';
 export { default as CustomCssProperty } from './CustomCssProperty';
-export { default as DialogVariantProperty } from './DialogVariantProperty';
 export { default as IconsProperty } from './IconsProperty';
 export { default as LevelProperty } from './LevelProperty';
 export { default as LinksProperty } from './LinksProperty';