@growth-angels/ds-core 1.17.1 → 1.19.0

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

@@ -1,4 +1,3 @@
-import { JSX } from "react/jsx-runtime";
+import type { 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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { useReactAdapter } from "../../hooks/useReactAdaptater";
 import { Icon } from "../Icon/Icon";
 export const Button = (props) => {
+    const React = useReactAdapter();
     const { as, children, variant, preventDefault, icon, extraClassNames, ...restProps } = props;
     let customVariant = variant;
     if (icon) {

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

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

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

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

package/dist/atoms/Text/Text.js

@@ -1,5 +1,6 @@
-import React from "react";
+import { useReactAdapter } from "../../hooks/useReactAdaptater";
 export const Text = (props) => {
+    const React = useReactAdapter();
     const { as, children, classNames, type = "paragraph", size, style } = props;
     const className = typeof classNames === "string" ? classNames : classNames?.join(" ") || "";
     return React.createElement(as, {

package/dist/hooks/useReactAdaptater.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 type ReactType = typeof import('react');
 type ExtendedReactType = ReactType & {
     createRoot: (container: Element | DocumentFragment) => {

package/dist/hooks/useReactAdaptater.js

@@ -1,10 +1,9 @@
-import React from 'react';
 export const useReactAdapter = () => {
-    // Check if WordPress element is available (WordPress context)
-    if (typeof window !== 'undefined' && window.wp?.element) {
-        return window.wp.element;
+    if (typeof window === 'undefined') {
+        throw new Error('useReactAdapter requires a browser environment with window.wp.element');
     }
-    // Fallback for non-WordPress environments (Storybook, tests, SSR)
-    // This will bundle React only in non-WordPress builds
-    return React;
+    if (!window.wp?.element) {
+        throw new Error('window.wp.element is not available. Make sure wp-element is loaded.');
+    }
+    return window.wp.element;
 };

package/dist/layout/Container/Container.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Container = (props) => {
-    const { size, children, style, padding, margin, stretch, id } = props;
+    const { size, children, style, padding, margin, stretch, id, paddingPosition, marginPosition } = props;
+    console.log("Container props", props);
     const classes = [
         "ga-ds-container",
         `ga-ds-container--${size}`,
-        ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-        ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+        ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+        ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
         ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
         ...(props.extraClassNames || []),
     ];

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

@@ -6,4 +6,6 @@ export interface ContainerProps extends WordpressDefault, React.HTMLAttributes<H
     stretch?: ContainerStretch;
     children: React.ReactNode | React.ReactNode[];
     style?: React.CSSProperties;
+    paddingPosition?: "top" | "bottom";
+    marginPosition?: "top" | "bottom";
 }

package/dist/layout/Grid/Grid.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 export const Grid = (props) => {
-    const { children, alignItems, justifyContent, extraClassNames, padding, margin } = props;
+    const { children, alignItems, justifyContent, extraClassNames, padding, margin, paddingPosition, marginPosition } = props;
     const classNames = [
         "ga-ds-grid",
-        ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-        ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+        ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+        ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
         ...(extraClassNames || []),
     ];
     return (_jsx("div", { className: classNames.join(" "), style: { ...(alignItems !== "none" && { alignItems }), ...(justifyContent !== "none" && { justifyContent }) }, children: children }));

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

@@ -2,6 +2,8 @@ import { WordpressDefault } from "../../global.types";
 export interface GridAttributes {
     alignItems: 'flex-start' | 'center' | 'flex-end' | 'none';
     justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'none';
+    paddingPosition?: 'top' | 'bottom';
+    marginPosition?: 'top' | 'bottom';
 }
 export interface GridProps extends WordpressDefault, GridAttributes {
     children: React.ReactNode | React.ReactNode[];

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growth-angels/ds-core",
-  "version": "1.17.1",
+  "version": "1.19.0",
   "description": "Design system by Growth Angels",
   "license": "MIT",
   "private": false,

package/src/atoms/Button/Button.tsx

@@ -1,9 +1,10 @@
-import { JSX } from "react/jsx-runtime"
+import type { JSX } from "react/jsx-runtime"
 import type { ButtonProps } from "./Button.types"
-import React from "react"
+import { useReactAdapter } from "../../hooks/useReactAdaptater"
 import { Icon } from "../Icon/Icon"
 
 export const Button = <T extends React.ElementType = "button">(props: ButtonProps<T>): JSX.Element => {
+  const React = useReactAdapter()
   const { as, children, variant, preventDefault, icon, extraClassNames, ...restProps } = props
   let customVariant = variant
   if (icon) {

package/src/atoms/Button/Button.types.ts

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

package/src/atoms/Text/Text.tsx

@@ -1,7 +1,8 @@
-import React from "react"
+import { useReactAdapter } from "../../hooks/useReactAdaptater"
 import { TextProps } from "./Text.types"
 
 export const Text = (props: TextProps) => {
+  const React = useReactAdapter()
   const { as, children, classNames, type = "paragraph", size, style } = props
 
   const className = typeof classNames === "string" ? classNames : classNames?.join(" ") || ""

package/src/hooks/useReactAdaptater.ts

@@ -1,4 +1,3 @@
-import React from 'react'
 // @ts-ignore - React types from window.wp.element
 type ReactType = typeof import('react')
 
@@ -21,13 +20,14 @@ declare global {
 }
 
 export const useReactAdapter = (): ExtendedReactType => {
-  // Check if WordPress element is available (WordPress context)
-  if (typeof window !== 'undefined' && window.wp?.element) {
-    return window.wp.element
+  if (typeof window === 'undefined') {
+    throw new Error('useReactAdapter requires a browser environment with window.wp.element')
   }
   
-  // Fallback for non-WordPress environments (Storybook, tests, SSR)
-  // This will bundle React only in non-WordPress builds
-  return React as ExtendedReactType
+  if (!window.wp?.element) {
+    throw new Error('window.wp.element is not available. Make sure wp-element is loaded.')
+  }
+  
+  return window.wp.element
 }
 

package/src/layout/Container/Container.tsx

@@ -1,12 +1,13 @@
 import type { ContainerProps } from "./Container.types"
 
 export const Container = (props: ContainerProps) => {
-  const { size, children, style, padding, margin, stretch, id } = props
+  const { size, children, style, padding, margin, stretch, id, paddingPosition, marginPosition } = props
+  console.log("Container props", props)
   const classes = [
     "ga-ds-container",
     `ga-ds-container--${size}`,
-    ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-    ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+    ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+    ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
     ...(stretch ? [`ga-ds-container-stretch--${stretch}`] : []),
     ...(props.extraClassNames || []),
   ]

package/src/layout/Container/Container.types.ts

@@ -8,4 +8,6 @@ export interface ContainerProps extends WordpressDefault, React.HTMLAttributes<H
   stretch?:ContainerStretch
   children: React.ReactNode | React.ReactNode[];
   style?: React.CSSProperties;
+  paddingPosition?: "top" | "bottom";
+  marginPosition?: "top" | "bottom";
 }

package/src/layout/Grid/Grid.tsx

@@ -1,10 +1,10 @@
 import { GridProps } from "./Grid.types"
 export const Grid = (props: GridProps): JSX.Element => {
-  const { children, alignItems, justifyContent, extraClassNames, padding, margin } = props
+  const { children, alignItems, justifyContent, extraClassNames, padding, margin, paddingPosition, marginPosition } = props
   const classNames = [
     "ga-ds-grid",
-    ...(padding ? [`ga-ds-util-padding--${padding}`] : []),
-    ...(margin ? [`ga-ds-util-margin--${margin}`] : []),
+    ...(padding ? [`ga-ds-util-padding${paddingPosition ? `-${paddingPosition}` : ""}--${padding}`] : []),
+    ...(margin ? [`ga-ds-util-margin${marginPosition ? `-${marginPosition}` : ""}--${margin}`] : []),
     ...(extraClassNames || []),
   ]
 

package/src/layout/Grid/Grid.types.ts

@@ -3,6 +3,8 @@ import { WordpressDefault } from "../../global.types";
 export interface GridAttributes {
   alignItems: 'flex-start' | 'center' | 'flex-end' | 'none'
   justifyContent: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'none'
+  paddingPosition?: 'top' | 'bottom'
+  marginPosition?: 'top' | 'bottom'
 }
 
 export interface GridProps extends WordpressDefault, GridAttributes {

package/src/organisms/Card/Card.tsx

@@ -1,4 +1,4 @@
-import { JSX } from "react/jsx-runtime"
+import type { JSX } from "react/jsx-runtime"
 import type { CardProps } from "./Card.types"
 
 export const Card = ({

package/src/organisms/Carousel/Carousel.scss

@@ -11,7 +11,7 @@
   &__track {
     --ga-ds-slides-per-view: 1;
     display: grid;
-    grid-auto-flow: column; // place les slides horizontalement
+    grid-auto-flow: column;
     grid-auto-columns: calc(
       (100% - (var(--ga-ds-space-between, 1rem) * (var(--ga-ds-slides-per-view, 3) - 1))) / var(--ga-ds-slides-per-view, 3)
     );
@@ -72,13 +72,14 @@
   }
 
   &__dots {
+    --dot-size: 1rem;
     display: flex;
     gap: var(--ga-ds-gap, 1rem);
 
     .ga-ds-carousel__dot {
       display: block;
-      width: 1rem;
-      height: 1rem;
+      width: var(--dot-size);
+      height: var(--dot-size);
       border-radius: 50%;
       background-color: #e2e2e2;
 

package/src/utils/_spacings.scss

@@ -5,6 +5,14 @@ $spacingsMap: ("xsmall", "small", "medium", "large", "xlarge");
     padding-top: var(--ga-spacings-padding-#{$value});
     padding-bottom: var(--ga-spacings-padding-#{$value});
   }
+
+  .ga-ds-util-padding-top--#{$value} {
+    padding-top: var(--ga-spacings-padding-#{$value});
+  }
+
+  .ga-ds-util-padding-bottom--#{$value} {
+    padding-bottom: var(--ga-spacings-padding-#{$value});
+  }
 }
 
 $marginsMap: ("small", "medium", "large");
@@ -14,4 +22,10 @@ $marginsMap: ("small", "medium", "large");
     margin-top: var(--ga-spacings-margin-#{$value});
     margin-bottom: var(--ga-spacings-margin-#{$value});
   }
+  .ga-ds-util-margin-top--#{$value} {
+    margin-top: var(--ga-spacings-margin-#{$value});
+  }
+  .ga-ds-util-margin-bottom--#{$value} {
+    margin-bottom: var(--ga-spacings-margin-#{$value});
+  }
 }