@growth-angels/ds-core 0.0.1

package/LICENSE

@@ -0,0 +1,14 @@
+MIT License
+
+Copyright (c) 2025 Mathieu ALBORÉ (Growth Angels)
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, subject to the condition that the above copyright notice and
+this permission notice shall be included in all copies or substantial portions
+of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED.

package/dist/atoms/Button/Button.d.ts

@@ -0,0 +1,4 @@
+import { JSX } from 'react/jsx-runtime';
+import type { ButtonProps } from './Button.types';
+import React from 'react';
+export declare const Button: <T extends React.ElementType = "button">(props: ButtonProps<T>) => JSX.Element;

package/dist/atoms/Button/Button.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Icon } from '../Icon/Icon';
+export const Button = (props) => {
+    const { as, children, variant, preventDefault, icon, extraClassNames, ...restProps } = props;
+    let customVariant = variant;
+    if (icon) {
+        customVariant = 'icon';
+    }
+    const classNames = ['ga-ds-btn', `ga-ds-btn--${customVariant}`, ...(extraClassNames || [])];
+    const handleClick = (e) => {
+        if (preventDefault)
+            e.preventDefault();
+        props?.onClick?.(e);
+    };
+    return React.createElement(as || 'button', {
+        ...restProps,
+        className: classNames.join(' '),
+        onClick: handleClick
+    }, _jsxs(_Fragment, { children: [icon && _jsx(Icon, { name: icon, size: 'sm' }), children && children] }));
+};

package/dist/atoms/Button/Button.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './Button';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Link: Story;

package/dist/atoms/Button/Button.stories.js

@@ -0,0 +1,31 @@
+import { Button } from './Button';
+const meta = {
+    title: 'Atoms/Button',
+    component: Button,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Primary = {
+    args: {
+        variant: 'primary',
+        children: 'Button',
+        as: 'a',
+        href: '#',
+    },
+};
+export const Secondary = {
+    args: {
+        variant: 'secondary',
+        children: 'Button',
+        as: 'a',
+        href: '#',
+    },
+};
+export const Link = {
+    args: {
+        variant: 'link',
+        children: 'Button',
+        as: 'a',
+        href: '#',
+    },
+};

package/dist/atoms/Button/Button.types.d.ts

@@ -0,0 +1,13 @@
+import { WordpressDefault } from "../../global.types.js";
+import React, { ElementType, ComponentPropsWithoutRef } from "react";
+export type Variant = "primary" | "secondary" | "tertiary" | "link" | "icon";
+export type ButtonProps<T extends ElementType = "button"> = {
+    as?: T;
+    variant?: Variant;
+    hasIcon?: "left" | "right";
+    icon?: "chevron-left" | "chevron-right";
+    preventDefault?: boolean;
+    children?: React.ReactNode;
+} & WordpressDefault & Omit<ComponentPropsWithoutRef<T>, "as" | "className" | "onClick"> & {
+    onClick?: React.MouseEventHandler<React.ElementRef<T>>;
+};

package/dist/atoms/Button/Button.types.js

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

package/dist/atoms/Icon/Icon.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from "./Icon.types";
+export declare const Icon: ({ name, size }: IconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/atoms/Icon/Icon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useThemeAssets } from "../../hooks/useThemeAssets";
+export const Icon = ({ name, size }) => {
+    const { iconsSprite } = useThemeAssets();
+    const classeNames = ['ga-ds-icon', ...(size ? [`ga-ds-icon--${size}`] : [])];
+    return _jsx("svg", { className: classeNames.join(' '), xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: _jsx("use", { xlinkHref: `${iconsSprite}#${name}` }) });
+};

package/dist/atoms/Icon/Icon.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Icon } from './Icon';
+declare const meta: Meta<typeof Icon>;
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const Primary: Story;

package/dist/atoms/Icon/Icon.stories.js

@@ -0,0 +1,22 @@
+import { Icon } from './Icon';
+const meta = {
+    title: 'Atoms/Icon',
+    component: Icon,
+    tags: ['autodocs'],
+    argTypes: {
+        name: {
+            control: 'select',
+            options: ['chevron-left', 'chevron-right'],
+        },
+        size: {
+            control: 'radio',
+            options: [undefined, 'sm', 'md', 'lg'],
+        },
+    }
+};
+export default meta;
+export const Primary = {
+    args: {
+        name: 'chevron-left'
+    }
+};

package/dist/atoms/Icon/Icon.types.d.ts

@@ -0,0 +1,5 @@
+export interface IconProps {
+    name: string;
+    size?: 'sm' | 'md' | 'lg';
+    spriteFile?: string;
+}

package/dist/atoms/Icon/Icon.types.js

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

package/dist/atoms/Text/Text.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { TextProps } from "./Text.types";
+export declare const Text: (props: TextProps) => React.DetailedReactHTMLElement<{
+    className: string;
+}, HTMLElement>;

package/dist/atoms/Text/Text.js

@@ -0,0 +1,8 @@
+import React from "react";
+export const Text = (props) => {
+    const { as, children, classNames, type = "paragraph" } = props;
+    const className = typeof classNames === 'string' ? classNames : classNames?.join(' ') || '';
+    return React.createElement(as, {
+        className: `ga-ds-${type} ${className}`,
+    }, children);
+};

package/dist/atoms/Text/Text.types.d.ts

@@ -0,0 +1,6 @@
+export interface TextProps {
+    as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
+    classNames?: string[] | string;
+    type?: 'heading' | 'paragraph';
+    children: string;
+}

package/dist/atoms/Text/Text.types.js

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

package/dist/atoms/atoms.d.ts

@@ -0,0 +1 @@
+export * from './Button/Button';

package/dist/atoms/atoms.js

@@ -0,0 +1 @@
+export * from './Button/Button';

package/dist/global.types.d.ts

@@ -0,0 +1,3 @@
+export interface WordpressDefault {
+    extraClassNames?: string[];
+}

package/dist/global.types.js

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

package/dist/hooks/useBreakPointObserver.d.ts

@@ -0,0 +1,5 @@
+export declare function useBreakpointObserver(breakpoints?: {
+    sm: number;
+    md: number;
+    lg: number;
+}): "sm" | "md" | "lg";

package/dist/hooks/useBreakPointObserver.js

@@ -0,0 +1,21 @@
+import { useReactAdapter } from './useReactAdaptater';
+export function useBreakpointObserver(breakpoints = { sm: 640, md: 1024, lg: 1280 }) {
+    const { useEffect, useState } = useReactAdapter();
+    const [current, setCurrent] = useState('sm');
+    useEffect(() => {
+        let frameId;
+        const check = () => {
+            const width = window.innerWidth;
+            let bp = 'sm';
+            if (width >= breakpoints.md)
+                bp = 'lg';
+            else if (width >= breakpoints.sm)
+                bp = 'md';
+            setCurrent((prev) => (prev !== bp ? bp : prev));
+            frameId = requestAnimationFrame(check);
+        };
+        frameId = requestAnimationFrame(check);
+        return () => cancelAnimationFrame(frameId);
+    }, [breakpoints]);
+    return current;
+}

package/dist/hooks/useReactAdaptater.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useReactAdapter: () => typeof React;

package/dist/hooks/useReactAdaptater.js

@@ -0,0 +1,7 @@
+import React from 'react';
+export const useReactAdapter = () => {
+    if (typeof window === 'undefined' || !window.wp || !window.wp.element) {
+        return React;
+    }
+    return window.wp.element;
+};

package/dist/hooks/useThemeAssets.d.ts

@@ -0,0 +1,8 @@
+declare let defaultThemeAssets: {
+    iconsSprite: string;
+};
+export declare const setThemeAssets: (assets: typeof defaultThemeAssets) => void;
+export declare const useThemeAssets: () => {
+    iconsSprite: string;
+};
+export {};

package/dist/hooks/useThemeAssets.js

@@ -0,0 +1,12 @@
+let defaultThemeAssets = {
+    iconsSprite: '/assets/svg/sprites/icons.svg'
+};
+export const setThemeAssets = (assets) => {
+    defaultThemeAssets = {
+        ...defaultThemeAssets,
+        ...assets,
+    };
+};
+export const useThemeAssets = () => {
+    return defaultThemeAssets;
+};

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './atoms/atoms';
+export * from './organisms/organisms';
+export * from './layout/layout';
+export { setThemeAssets } from './hooks/useThemeAssets';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './atoms/atoms';
+export * from './organisms/organisms';
+export * from './layout/layout';
+export { setThemeAssets } from './hooks/useThemeAssets';

package/dist/layout/Container/Container.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react/jsx-runtime';
+import type { ContainerProps } from './Container.types';
+export declare const Container: (props: ContainerProps) => JSX.Element;

package/dist/layout/Container/Container.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Container = (props) => {
+    const { size, children } = props;
+    const classes = ['ga-ds-container', `ga-ds-container--${size}`, ...(props.extraClassNames || [])];
+    return _jsx("div", { className: classes.join(' '), children: children });
+};

package/dist/layout/Container/Container.types.d.ts

@@ -0,0 +1,6 @@
+import { WordpressDefault } from "../../global.types";
+export type ContainerSize = 'large' | 'medium' | 'small';
+export interface ContainerProps extends WordpressDefault {
+    size: ContainerSize;
+    children: React.ReactNode | React.ReactNode[];
+}

package/dist/layout/Container/Container.types.js

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

package/dist/layout/Grid/Grid.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react/jsx-runtime';
+import { GridProps } from './Grid.types';
+export declare const Grid: (props: GridProps) => JSX.Element;

package/dist/layout/Grid/Grid.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Grid = (props) => {
+    const { children, alignItems, justifyContent, extraClassNames } = props;
+    const classNames = ['ga-ds-grid', ...(extraClassNames || [])];
+    return _jsx("div", { className: classNames.join(' '), style: { alignItems, justifyContent }, children: children });
+};

package/dist/layout/Grid/Grid.types.d.ts

@@ -0,0 +1,8 @@
+import { WordpressDefault } from "../../global.types";
+export interface Attributes {
+    alignItems: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+    justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+}
+export interface GridProps extends WordpressDefault, Attributes {
+    children: React.ReactNode | React.ReactNode[];
+}

package/dist/layout/Grid/Grid.types.js

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

package/dist/layout/Grid/GridItem/GridItem.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react/jsx-runtime';
+import { GridItemProps } from './GridItem.types';
+export declare const GridItem: (props: GridItemProps) => JSX.Element;

package/dist/layout/Grid/GridItem/GridItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GridItem = (props) => {
+    const { children, sizes = {
+        xs: 12,
+        sm: 12,
+        md: 12,
+        lg: 12,
+    } } = props;
+    const style = Object.fromEntries(Object.entries(sizes).map(([key, value]) => [`--ga-ds-grid-item-size-${key}`, `${value}`]));
+    return _jsx("div", { className: "ga-ds-grid-item", style: style, children: children });
+};

package/dist/layout/Grid/GridItem/GridItem.types.d.ts

@@ -0,0 +1,13 @@
+import { WordpressDefault } from "../../../global.types";
+export type ColumnSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+export interface Attributes {
+    sizes: {
+        xs: ColumnSize;
+        sm: ColumnSize;
+        md: ColumnSize;
+        lg: ColumnSize;
+    };
+}
+export interface GridItemProps extends WordpressDefault, Attributes {
+    children: React.ReactNode | React.ReactNode[];
+}

package/dist/layout/Grid/GridItem/GridItem.types.js

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

package/dist/layout/layout.d.ts

@@ -0,0 +1,3 @@
+export * from './Container/Container';
+export * from './Grid/Grid';
+export * from './Grid/GridItem/GridItem';

package/dist/layout/layout.js

@@ -0,0 +1,3 @@
+export * from './Container/Container';
+export * from './Grid/Grid';
+export * from './Grid/GridItem/GridItem';

package/dist/organisms/Card/Card.d.ts

@@ -0,0 +1,3 @@
+import { JSX } from 'react/jsx-runtime';
+import type { CardProps } from './Card.types';
+export declare const Card: ({ children, variant, extraClassNames, type }: CardProps) => JSX.Element;

package/dist/organisms/Card/Card.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Card = ({ children, variant = 'primary', extraClassNames, type = 'default' }) => {
+    const classNames = ['ga-ds-card', `ga-ds-card--${variant}`, `ga-ds-card--${type}`, ...(extraClassNames || [])];
+    return _jsx("div", { className: classNames.join(' '), children: children });
+};

package/dist/organisms/Card/Card.types.d.ts

@@ -0,0 +1,8 @@
+export type Variant = 'primary' | 'secondary';
+export type CardType = 'default' | 'editorial' | 'image' | 'icon';
+export interface CardProps {
+    children: React.ReactNode | React.ReactNode[] | JSX.Element;
+    variant: Variant;
+    type?: CardType;
+    extraClassNames?: string[];
+}

package/dist/organisms/Card/Card.types.js

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

package/dist/organisms/Card/CardDefault.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Primary: Story;
+export declare const Secondary: Story;

package/dist/organisms/Card/CardDefault.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from './Card';
+import { Button } from '../../atoms/atoms';
+import CardDefaultHeader600x400 from '../../../assets/600x400.svg';
+import CardDefaultHeader50x50 from '../../../assets/50x50.svg';
+const meta = {
+    title: 'Organisms/Card/Default',
+    component: Card,
+    tags: ['autodocs'],
+};
+export default meta;
+const CardChildren = ({ image }) => {
+    const images = {
+        '400x600': CardDefaultHeader600x400,
+        '50x50': CardDefaultHeader50x50
+    };
+    return _jsxs(_Fragment, { children: [_jsx("div", { className: "ga-ds-card__header", children: _jsx("img", { src: images[image], alt: "Card header" }) }), _jsx("div", { className: "ga-ds-card__title", children: _jsx("h2", { children: "Card title" }) }), _jsx("div", { className: 'ga-ds-card__content', children: _jsx("p", { children: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro temporibus quam ex consequatur est laboriosam nam quisquam doloremque perferendis quo ut, tempora error neque modi delectus assumenda! A, doloremque nulla." }) }), _jsx("div", { className: "ga-ds-card__footer", children: _jsx(Button, { as: "a", variant: 'primary', children: "Read more" }) })] });
+};
+export const Primary = {
+    args: {
+        variant: 'primary',
+        type: 'default',
+        children: _jsx(CardChildren, { image: '400x600' })
+    }
+};
+export const Secondary = {
+    args: {
+        variant: 'secondary',
+        type: 'default',
+        children: _jsx(CardChildren, { image: '400x600' })
+    }
+};

package/dist/organisms/Card/CardEditorial.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Card } from './Card';
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const Primary: Story;
+export declare const Secondary: Story;

package/dist/organisms/Card/CardEditorial.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from './Card';
+import { Button } from '../../atoms/atoms';
+import CardDefaultHeader600x400 from '../../../assets/600x400.svg';
+import CardDefaultHeader50x50 from '../../../assets/50x50.svg';
+const meta = {
+    title: 'Organisms/Card/Editorial',
+    component: Card,
+    tags: ['autodocs'],
+};
+export default meta;
+const CardChildren = ({ image }) => {
+    const images = {
+        '400x600': CardDefaultHeader600x400,
+        '50x50': CardDefaultHeader50x50
+    };
+    return _jsxs(_Fragment, { children: [_jsx("div", { className: "ga-ds-card__header", children: _jsx("img", { src: images[image], alt: "Card header" }) }), _jsx("div", { className: "ga-ds-card__title", children: _jsx("h2", { children: "Card title" }) }), _jsx("div", { className: 'ga-ds-card__content', children: _jsx("p", { children: "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro temporibus quam ex consequatur est laboriosam nam quisquam doloremque perferendis quo ut, tempora error neque modi delectus assumenda! A, doloremque nulla." }) }), _jsx("div", { className: "ga-ds-card__footer", children: _jsx(Button, { as: "a", variant: 'primary', children: "Read more" }) })] });
+};
+export const Primary = {
+    args: {
+        variant: 'primary',
+        type: 'editorial',
+        children: _jsx(CardChildren, { image: '50x50' })
+    }
+};
+export const Secondary = {
+    args: {
+        variant: 'secondary',
+        type: 'editorial',
+        children: _jsx(CardChildren, { image: '50x50' })
+    }
+};

package/dist/organisms/Carousel/Carousel.d.ts

@@ -0,0 +1,2 @@
+import { CarouselProps } from "./Carousel.types";
+export declare const Carousel: (props: CarouselProps) => import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Carousel/Carousel.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "../../atoms/atoms";
+import { useBreakpointObserver } from "../../hooks/useBreakPointObserver";
+import { useReactAdapter } from "../../hooks/useReactAdaptater";
+export const Carousel = (props) => {
+    const { children, slidesPerView = { sm: 1, md: 2, lg: 3 }, spaceBetween = 20, navigation, pagination, context, hasPagination, hasNavigation, } = props;
+    const { useEffect, useState, useRef, Children } = useReactAdapter();
+    const trackRef = useRef(null);
+    const slides = Children.toArray(children);
+    const calculatePages = (totalSlides = 0, slidesPerView = 0, step = 1) => {
+        return Math.max(1, Math.ceil((totalSlides - slidesPerView) / step) + 1);
+    };
+    const [activeSlideIndex, setActiveSlideIndex] = useState(0);
+    const [isAtEnd, setIsAtEnd] = useState(false);
+    const [isAtStart, setIsAtStart] = useState(true);
+    const [totalPages, setTotalPages] = useState(0);
+    useEffect(() => {
+        setIsAtStart(activeSlideIndex === 0);
+        setIsAtEnd(activeSlideIndex === totalPages - 1);
+    }, [activeSlideIndex, totalPages]);
+    const breakpoint = useBreakpointObserver({ sm: 768, md: 992, lg: 1200 });
+    useEffect(() => {
+        setTotalPages(calculatePages(slides.length, slidesPerView[breakpoint], 1));
+    }, [breakpoint, slidesPerView]);
+    const style = Object.fromEntries(Object.entries(slidesPerView).map(([key, value]) => [`--ga-ds-slides-per-view-${key}`, `${value}`]));
+    const goPrev = () => {
+        if (!trackRef.current)
+            return;
+        const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
+        if (activeSlideIndex === 0)
+            return;
+        const nextIndex = activeSlideIndex - 1;
+        slides[nextIndex]?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+        setActiveSlideIndex(nextIndex);
+    };
+    const goNext = () => {
+        if (!trackRef.current)
+            return;
+        const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
+        const totalSlides = slides.length;
+        if (activeSlideIndex >= totalSlides - 1)
+            return;
+        if (isAtEnd)
+            return;
+        const nextIndex = activeSlideIndex + 1;
+        slides[nextIndex]?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+        setActiveSlideIndex(nextIndex);
+    };
+    const goTo = (nextIndex) => {
+        if (!trackRef.current)
+            return;
+        const slides = trackRef.current.querySelectorAll(".ga-ds-carousel__slide");
+        slides[nextIndex]?.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+        setActiveSlideIndex(nextIndex);
+    };
+    return (_jsxs("div", { className: "ga-ds-carousel", style: style, children: [navigation?.positionY === "top" && hasNavigation && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd })), _jsx("div", { className: "ga-ds-carousel__track", ref: trackRef, style: {
+                    "--ga-ds-space-between": `${spaceBetween / 10}rem`,
+                }, children: context === "wp-editor"
+                    ? children
+                    : slides.map((child, index) => (_jsx("div", { className: `ga-ds-carousel__slide ${index === activeSlideIndex ? "ga-ds-carousel__slide--active" : ""}`, children: child }, index))) }), _jsxs("div", { className: "ga-ds-carousel__navigation", children: [pagination && hasPagination && (_jsx(CarouselPagination, { totalPages: totalPages, activeSlideIndex: activeSlideIndex, goTo: goTo, clickable: pagination.clickable })), hasNavigation && navigation?.positionY === "bottom" && (_jsx(CarouselNavigation, { goPrev: goPrev, goNext: goNext, isAtStart: isAtStart, isAtEnd: isAtEnd }))] })] }));
+};
+const CarouselNavigation = ({ goPrev, goNext, isAtStart, isAtEnd, }) => {
+    return (_jsxs("div", { className: `ga-ds-carousel__arrows`, children: [_jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--prev"], icon: "chevron-left", onClick: goPrev, disabled: isAtStart }), _jsx(Button, { extraClassNames: ["ga-ds-carousel__button", "ga-ds-carousel__button--next"], icon: "chevron-right", onClick: goNext, disabled: isAtEnd })] }));
+};
+const CarouselPagination = ({ totalPages, activeSlideIndex, goTo, clickable, }) => {
+    return (_jsx("div", { className: "ga-ds-carousel__dots", children: Array.from({ length: totalPages }, (_, index) => index).map((_, index) => (_jsx("span", { className: `ga-ds-carousel__dot ${index === activeSlideIndex ? "ga-ds-carousel__dot--active" : ""}`, onClick: () => clickable && goTo(index), style: {
+                cursor: clickable ? "pointer" : "default",
+            } }, index))) }));
+};

package/dist/organisms/Carousel/Carousel.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Carousel } from "./Carousel";
+declare const meta: Meta<typeof Carousel>;
+export default meta;
+type Story = StoryObj<typeof Carousel>;
+export declare const Primary: Story;

package/dist/organisms/Carousel/Carousel.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Carousel } from "./Carousel";
+const meta = {
+    title: "Organisms/Carousel",
+    component: Carousel,
+    tags: ["autodocs"],
+};
+export default meta;
+export const Primary = {
+    args: {
+        children: [
+            _jsx("div", { children: "Slide 1" }),
+            _jsx("div", { children: "Slide 2" }),
+            _jsx("div", { children: "Slide 3" }),
+            _jsx("div", { children: "Slide 4" }),
+            _jsx("div", { children: "Slide 5" }),
+            _jsx("div", { children: "Slide 6" }),
+            _jsx("div", { children: "Slide 7" }),
+        ],
+        slidesPerView: { sm: 1, md: 2, lg: 3 },
+        spaceBetween: 16,
+        pagination: {
+            clickable: true,
+        },
+        navigation: {
+            positionY: "bottom",
+        },
+        hasNavigation: true,
+        hasPagination: true,
+    },
+};

package/dist/organisms/Carousel/Carousel.types.d.ts

@@ -0,0 +1,20 @@
+export type Attributes = {
+    context?: 'wp-editor';
+    slidesPerView?: {
+        sm: number;
+        md: number;
+        lg: number;
+    };
+    spaceBetween?: number;
+    hasPagination?: boolean;
+    hasNavigation?: boolean;
+    pagination?: {
+        clickable: boolean;
+    };
+    navigation?: {
+        positionY: 'bottom' | 'top';
+    };
+};
+export interface CarouselProps extends Attributes {
+    children: React.ReactNode | React.ReactNode[];
+}

package/dist/organisms/Carousel/Carousel.types.js

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

package/dist/organisms/organisms.d.ts

@@ -0,0 +1,2 @@
+export * from './Card/Card';
+export * from './Carousel/Carousel';

package/dist/organisms/organisms.js

@@ -0,0 +1,2 @@
+export * from './Card/Card';
+export * from './Carousel/Carousel';

package/dist/utils.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@growth-angels/ds-core",
+  "version": "0.0.1",
+  "description": "Design system by Growth Angels",
+  "license": "MIT",
+  "private": false,
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "style": "src/index.scss",
+  "sideEffects": [
+    "src/index.scss"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./src/index.scss"
+  },
+  "files": [
+    "dist",
+    "src/index.scss"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "dev": "concurrently \"tsc --watch --preserveWatchOutput\" \"storybook dev -p 6006\"",
+    "build": "tsc",
+    "prepublishOnly": "pnpm build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@ga/foundation": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-a11y": "^9.1.13",
+    "@storybook/addon-docs": "^9.1.13",
+    "@storybook/addon-vitest": "^9.1.13",
+    "@storybook/react-vite": "^9.1.13",
+    "@types/react": "^18.0.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "concurrently": "^9.2.1",
+    "playwright": "^1.56.1",
+    "sass": "^1.93.2",
+    "storybook": "^9.1.13",
+    "typescript": "^5.4.0",
+    "vitest": "^3.2.4"
+  }
+}

package/src/index.scss

@@ -0,0 +1,3 @@
+@use "./atoms/atoms";
+@use "./organisms/organisms";
+@use "./layout/layout";