@growth-angels/ds-core 1.18.0 → 1.20.0

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

@@ -1,4 +1,2 @@
-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;
+export declare const Button: <T extends React.ElementType = "button">(props: ButtonProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

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/organisms/Card/Card.d.ts

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

package/dist/organisms/Card/Card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const Card = ({ children, variant = "primary", extraClassNames, type = "image", style, backgroundImage, }) => {
+export const Card = ({ children, variant = "primary", extraClassNames, type = "image", style, backgroundImage }) => {
     const classNames = ["ga-ds-card", `ga-ds-card--${variant}`, `ga-ds-card--${type}`, ...(extraClassNames || [])];
     return (_jsxs("div", { ...(style && { style }), className: classNames.join(" "), children: [backgroundImage && _jsx("img", { src: backgroundImage.sizes?.full?.url, alt: backgroundImage?.alt }), children] }));
 };

package/package.json

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

package/src/atoms/Button/Button.tsx

@@ -1,9 +1,9 @@
-import { 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 => {
+export const Button = <T extends React.ElementType = "button">(props: ButtonProps<T>) => {
+  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/organisms/Card/Card.tsx

@@ -1,14 +1,6 @@
-import { JSX } from "react/jsx-runtime"
 import type { CardProps } from "./Card.types"
 
-export const Card = ({
-  children,
-  variant = "primary",
-  extraClassNames,
-  type = "image",
-  style,
-  backgroundImage,
-}: CardProps): JSX.Element => {
+export const Card = ({ children, variant = "primary", extraClassNames, type = "image", style, backgroundImage }: CardProps) => {
   const classNames = ["ga-ds-card", `ga-ds-card--${variant}`, `ga-ds-card--${type}`, ...(extraClassNames || [])]
   return (
     <div {...(style && { style })} className={classNames.join(" ")}>