let componentsData;
try {
    componentsData = require('../../../../dist/components_json.json');
}
catch (error) {
    console.warn('components_json.json non trouvé. Utilisation de valeurs par défaut.');
    componentsData = {};
}
import { withComponentControls, toKebabCase } from "../../../utils/utils";
const elementTag = 'spw-separator';
const argTypes = withComponentControls(componentsData, { tag: elementTag });
const meta = {
    title: 'Composants/Séparateur (divider)',
    component: elementTag,
    argTypes,
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: `

Le composant Separator (divider) permet de créer des séparations visuelles entre différentes sections de contenu. Il améliore la lisibilité et structure l'information de manière claire.

## Variantes disponibles

- **horizontal** : Séparation horizontale (par défaut)
- **vertical** : Séparation verticale pour layouts en ligne

## Fonctionnalités

- Direction configurable (horizontal ou vertical)
- Épaisseur personnalisable
- Hauteur ajustable pour séparateurs verticaux

## Cas d'usage

- Séparation de sections dans une page
- Délimitation de zones de contenu
- Division d'éléments dans une toolbar
- Séparation visuelle dans des listes ou cartes

[<spw-link>Consulter la documentation</spw-link>](https://zeroheight.com/2310c7a1e/p/381355-separateur)
        `,
            },
        },
    },
};
export default meta;
function htmlContent(slot) {
    return /* HTML */ `${slot}`;
}
const Template = args => {
    const element = document.createElement(elementTag);
    const hasSlot = false;
    const slottedLabel = 'label';
    Object.entries(args).forEach(([key, val]) => {
        if (key.startsWith('on')) {
            element.addEventListener(key.substring(2).toLowerCase(), val);
        }
        else {
            if (key !== slottedLabel) {
                element.setAttribute(toKebabCase(key), val);
            }
        }
    });
    if (hasSlot) {
        element.innerHTML = htmlContent(args[slottedLabel]);
    }
    return element;
};
export const Horizontal = Template.bind({});
Horizontal.args = {
    direction: 'horizontal',
    thickness: '1',
};
export const Vertical = Template.bind({});
Vertical.args = {
    direction: 'vertical',
    thickness: '1',
    height: '50',
};
Horizontal.parameters = {
    docs: {
        description: {
            story: `Séparateur horizontal pour diviser verticalement le contenu. Cas d'usage : séparation de sections, espacement entre blocs de contenu.`,
        },
    },
};
Vertical.parameters = {
    docs: {
        description: {
            story: `Séparateur vertical pour diviser horizontalement le contenu. Cas d'usage : séparation d'éléments dans une toolbar, division de colonnes, espacement latéral.`,
        },
    },
};
