@a-little-world/little-world-design-system 2.10.0

package/dist/esm/storybook/RadiusDocumentation.js

@@ -0,0 +1,112 @@
+// @ts-nocheck
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+import Text from '../components/Text/Text';
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.large};
+  max-width: 800px;
+`;
+const RadiusItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.medium};
+  padding: ${({ theme }) => theme.spacing.small};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+`;
+const RadiusVisual = styled.div `
+  width: 120px;
+  height: 80px;
+  background: ${({ theme }) => theme.color.surface.bold};
+  border-radius: ${({ $radius }) => $radius};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid ${({ theme }) => theme.color.border.contrast};
+`;
+const RadiusInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  flex: 1;
+`;
+const RadiusLabel = styled.div `
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.heading};
+`;
+const RadiusValue = styled.div `
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-family: monospace;
+`;
+const RadiusSection = () => {
+    const theme = useTheme();
+    const radiusTokens = [
+        {
+            key: 'xxxsmall',
+            value: theme.radius.xxxsmall,
+            description: '4px - Subtle rounding',
+        },
+        {
+            key: 'xxsmall',
+            value: theme.radius.xxsmall,
+            description: '8px - Standard rounding',
+        },
+        {
+            key: 'xsmall',
+            value: theme.radius.xsmall,
+            description: '12px - Comfortable rounding',
+        },
+        {
+            key: 'small',
+            value: theme.radius.small,
+            description: '16px - Noticeable rounding',
+        },
+        {
+            key: 'medium',
+            value: theme.radius.medium,
+            description: '20px - Prominent rounding',
+        },
+        {
+            key: 'large',
+            value: theme.radius.large,
+            description: '24px - Generous rounding',
+        },
+        {
+            key: 'xlarge',
+            value: theme.radius.xlarge,
+            description: '32px - Substantial rounding',
+        },
+        {
+            key: 'xxlarge',
+            value: theme.radius.xxlarge,
+            description: '40px - Maximum rounding',
+        },
+        {
+            key: 'massive',
+            value: theme.radius.massive,
+            description: '100px - Dramatic rounding',
+        },
+        {
+            key: 'half',
+            value: theme.radius.half,
+            description: '50% - Circular elements',
+        },
+        {
+            key: 'full',
+            value: theme.radius.full,
+            description: '100% - Fully rounded',
+        },
+    ];
+    return (React.createElement(Container, null, radiusTokens.map(({ key, value, description }) => (React.createElement(RadiusItem, { key: key },
+        React.createElement(RadiusVisual, { "$radius": value },
+            React.createElement(Text, { type: "Body4" }, value)),
+        React.createElement(RadiusInfo, null,
+            React.createElement(RadiusLabel, null,
+                React.createElement(Text, { type: "Body4" }, key)),
+            React.createElement(RadiusValue, null,
+                React.createElement(Text, { type: "Body6" }, description))))))));
+};
+export default RadiusSection;

package/dist/esm/storybook/SpacingDocumentation.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SpacingSection: () => React.JSX.Element;
+export default SpacingSection;

package/dist/esm/storybook/SpacingDocumentation.js

@@ -0,0 +1,108 @@
+// @ts-nocheck
+import React from 'react';
+import styled, { useTheme } from 'styled-components';
+import Text from '../components/Text/Text';
+const Container = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.large};
+  max-width: 800px;
+`;
+const SpacingItem = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.medium};
+  padding: ${({ theme }) => theme.spacing.small};
+  border: 1px solid ${({ theme }) => theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.small};
+  background: ${({ theme }) => theme.color.surface.primary};
+`;
+const SpacingVisual = styled.div `
+  width: 200px;
+  height: 24px;
+  background: ${({ theme }) => theme.color.surface.bold};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 60px;
+  padding: ${({ $size }) => $size};
+`;
+const SpacingInfo = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxxsmall};
+  flex: 1;
+`;
+const SpacingLabel = styled.div `
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.text.heading};
+`;
+const SpacingValue = styled.div `
+  color: ${({ theme }) => theme.color.text.secondary};
+  font-family: monospace;
+`;
+const SpacingSection = () => {
+    const theme = useTheme();
+    const spacingTokens = [
+        {
+            key: 'xxxxsmall',
+            value: theme.spacing.xxxxsmall,
+            description: '2px - Minimal spacing',
+        },
+        {
+            key: 'xxxsmall',
+            value: theme.spacing.xxxsmall,
+            description: '4px - Tight spacing',
+        },
+        {
+            key: 'xxsmall',
+            value: theme.spacing.xxsmall,
+            description: '8px - Standard spacing',
+        },
+        {
+            key: 'xsmall',
+            value: theme.spacing.xsmall,
+            description: '12px - Comfortable spacing',
+        },
+        {
+            key: 'small',
+            value: theme.spacing.small,
+            description: '16px - Standard section spacing',
+        },
+        {
+            key: 'medium',
+            value: theme.spacing.medium,
+            description: '24px - Breathing room',
+        },
+        {
+            key: 'large',
+            value: theme.spacing.large,
+            description: '32px - Generous spacing',
+        },
+        {
+            key: 'xlarge',
+            value: theme.spacing.xlarge,
+            description: '40px - Substantial spacing',
+        },
+        {
+            key: 'xxlarge',
+            value: theme.spacing.xxlarge,
+            description: '64px - Maximum spacing',
+        },
+        {
+            key: 'massive',
+            value: theme.spacing.massive,
+            description: '120px - Dramatic spacing',
+        },
+    ];
+    return (React.createElement(Container, null, spacingTokens.map(({ key, value, description }) => (React.createElement(SpacingItem, { key: key },
+        React.createElement(SpacingVisual, { "$size": value },
+            React.createElement(Text, { type: "Body4", style: { color: 'white' } }, value)),
+        React.createElement(SpacingInfo, null,
+            React.createElement(SpacingLabel, null,
+                React.createElement(Text, { type: "Body4" }, key)),
+            React.createElement(SpacingValue, null,
+                React.createElement(Text, { type: "Body6" }, description))))))));
+};
+export default SpacingSection;

package/dist/esm/theme/index.d.ts

@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react';
+import { DefaultTheme } from 'styled-components';
+import { ThemeVariants, ThemeContextType } from '@a-little-world/little-world-design-system-core';
+export declare const lightTheme: DefaultTheme;
+export declare const darkTheme: DefaultTheme;
+export declare const defaultTheme: DefaultTheme;
+export declare const themes: {
+    readonly light: DefaultTheme;
+    readonly dark: DefaultTheme;
+};
+export interface ThemeProviderProps {
+    children: ReactNode;
+    defaultMode?: ThemeVariants;
+    enableDarkMode?: boolean;
+}
+export declare const themeContext: React.Context<ThemeContextType>;
+export declare const CustomThemeProvider: ({ children, defaultMode, enableDarkMode, }: ThemeProviderProps) => React.JSX.Element;

package/dist/esm/theme/index.js

@@ -0,0 +1,53 @@
+import React, { createContext, useCallback, useEffect, useMemo, useState, } from 'react';
+import { ThemeProvider } from 'styled-components';
+import { ThemeVariants, defaultThemeVariant, tokensPixelated, } from '@a-little-world/little-world-design-system-core';
+export const lightTheme = {
+    ...tokensPixelated,
+    color: tokensPixelated.color.theme.light,
+};
+export const darkTheme = {
+    ...tokensPixelated,
+    color: tokensPixelated.color.theme.dark,
+};
+export const defaultTheme = lightTheme;
+export const themes = {
+    light: lightTheme,
+    dark: darkTheme,
+};
+export const themeContext = createContext({
+    toggleMode: () => { },
+    setMode: (_mode) => { },
+    currentMode: defaultThemeVariant,
+});
+const { Provider } = themeContext;
+export const CustomThemeProvider = ({ children, defaultMode = defaultThemeVariant, enableDarkMode = false, }) => {
+    const [currentMode, setCurrentMode] = useState(defaultMode);
+    useEffect(() => {
+        if (enableDarkMode && typeof window !== 'undefined') {
+            const savedTheme = localStorage.getItem('theme');
+            const prefersDark = window.matchMedia &&
+                window.matchMedia('(prefers-color-scheme: dark)').matches;
+            if (savedTheme && ['dark', 'light'].includes(savedTheme)) {
+                setCurrentMode(savedTheme);
+            }
+            else if (prefersDark) {
+                setCurrentMode(ThemeVariants.dark);
+            }
+        }
+    }, [enableDarkMode]);
+    const toggleMode = useCallback(() => {
+        setCurrentMode((currentMode) => currentMode === ThemeVariants.light
+            ? ThemeVariants.dark
+            : ThemeVariants.light);
+    }, []);
+    const setMode = useCallback((mode) => {
+        setCurrentMode(mode);
+    }, []);
+    const contextValue = useMemo(() => ({
+        currentMode,
+        toggleMode,
+        setMode,
+    }), [currentMode, toggleMode, setMode]);
+    return (React.createElement(Provider, { value: contextValue },
+        React.createElement(ThemeProvider, { theme: themes[currentMode] || defaultTheme }, children)));
+};

package/dist/esm/utils/animations.d.ts

@@ -0,0 +1,12 @@
+export declare const enterFromRight: import("styled-components/dist/models/Keyframes").default;
+export declare const enterFromLeft: import("styled-components/dist/models/Keyframes").default;
+export declare const exitToRight: import("styled-components/dist/models/Keyframes").default;
+export declare const exitToLeft: import("styled-components/dist/models/Keyframes").default;
+export declare const slideUpAndFade: import("styled-components/dist/models/Keyframes").default;
+export declare const slideRightAndFade: import("styled-components/dist/models/Keyframes").default;
+export declare const slideDownAndFade: import("styled-components/dist/models/Keyframes").default;
+export declare const slideLeftAndFade: import("styled-components/dist/models/Keyframes").default;
+export declare const scaleIn: import("styled-components/dist/models/Keyframes").default;
+export declare const scaleOut: import("styled-components/dist/models/Keyframes").default;
+export declare const fadeIn: import("styled-components/dist/models/Keyframes").default;
+export declare const fadeOut: import("styled-components/dist/models/Keyframes").default;

package/dist/esm/utils/animations.js

@@ -0,0 +1,117 @@
+import { keyframes } from 'styled-components';
+export const enterFromRight = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  `;
+export const enterFromLeft = keyframes `
+    from {
+        opacity: 0;
+        transform: translateX(-200px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+  `;
+export const exitToRight = keyframes `
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+  `;
+export const exitToLeft = keyframes `
+from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(-200px);
+  }
+`;
+export const slideUpAndFade = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+export const slideRightAndFade = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+export const slideDownAndFade = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+export const slideLeftAndFade = keyframes `
+  from {
+    opacity: 0;
+    transform: translateX(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+export const scaleIn = keyframes `
+ from {
+    opacity: 0;
+    transform: rotateX(-30deg) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+  }
+ `;
+export const scaleOut = keyframes `
+from {
+    opacity: 1;
+    transform: rotateX(0deg) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: rotateX(-10deg) scale(0.95);
+  }
+`;
+export const fadeIn = keyframes `
+from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+export const fadeOut = keyframes `
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+`;

package/dist/esm/utils/createReactSvg.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SvgTransformOptions, ParsedSvg } from '@a-little-world/little-world-design-system-core';
+export declare const createReactSvg: (svgData: ParsedSvg, options: SvgTransformOptions) => React.JSX.Element;

package/dist/esm/utils/createReactSvg.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import IconGradient from '../components/Icon/IconGradient';
+// Helper function to generate unique keys
+const generateUniqueKey = (element, index) => {
+    return `${element.type}-${index}-${Math.random()
+        .toString(36)
+        .substring(2, 11)}`;
+};
+// Helper function to safely render children, filtering out null values
+const renderChildren = (children, options, parentIndex) => {
+    return children
+        .map((child, i) => renderSvgElement(child, options, `${parentIndex}-${i}`))
+        .filter(Boolean); // Filter out null elements
+};
+// Renders SVG elements recursively
+const renderSvgElement = (element, options, index) => {
+    const { gradient, gradientId, color } = options;
+    // Get all attributes and override fill for path elements if needed
+    const attrs = { ...element.attributes };
+    // Handle color attributes for SVG elements based on the colorAttribute property
+    // If element has color set that isn't #000 - do not override
+    if (element.colorAttribute && element.colorAttribute !== 'none') {
+        if (attrs[element.colorAttribute] === '#000') {
+            attrs[element.colorAttribute] = gradient
+                ? `url(#${gradientId})`
+                : color || 'currentColor';
+        }
+        else {
+            attrs[element.colorAttribute] =
+                attrs[element.colorAttribute] || color || 'currentColor';
+        }
+    }
+    // Add unique key attribute
+    const elementKey = generateUniqueKey(element, index);
+    switch (element.type) {
+        case 'path':
+            return React.createElement("path", { key: elementKey, ...attrs });
+        case 'g':
+            return (React.createElement("g", { key: elementKey, ...attrs }, renderChildren(element.children, options, index)));
+        case 'defs':
+            return (React.createElement("defs", { key: elementKey, ...attrs }, renderChildren(element.children, options, index)));
+        case 'linearGradient':
+            return (React.createElement("linearGradient", { key: elementKey, ...attrs }, renderChildren(element.children, options, index)));
+        case 'clipPath':
+            return (React.createElement("clipPath", { key: elementKey, ...attrs }, renderChildren(element.children, options, index)));
+        case 'stop':
+            return React.createElement("stop", { key: elementKey, ...attrs });
+        case 'circle':
+            return React.createElement("circle", { key: elementKey, ...attrs });
+        case 'rect':
+            return React.createElement("rect", { key: elementKey, ...attrs });
+        case 'line':
+            return React.createElement("line", { key: elementKey, ...attrs });
+        case 'polygon':
+            return React.createElement("polygon", { key: elementKey, ...attrs });
+        case 'polyline':
+            return React.createElement("polyline", { key: elementKey, ...attrs });
+        case 'ellipse':
+            return React.createElement("ellipse", { key: elementKey, ...attrs });
+        default:
+            console.warn(`Unsupported SVG element type: ${element.type}`);
+            return null;
+    }
+};
+export const createReactSvg = (svgData, options) => {
+    const { className, width, height, gradient, gradientId, gradientType, label, } = options;
+    return (React.createElement("svg", { "aria-labelledby": label, fill: "none", focusable: false, width: width, height: height, className: className, xmlns: "http://www.w3.org/2000/svg", viewBox: svgData.viewBox },
+        svgData.elements.map((element, index) => renderSvgElement(element, options, index)),
+        gradient && (React.createElement(IconGradient, { variation: gradient, type: gradientType, id: gradientId }))));
+};

package/dist/esm/utils/parser.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface ParserOptions {
+    customElements?: {
+        Component: React.ElementType;
+        props?: Record<string, any>;
+        tag: string;
+    }[];
+    onlyLinks?: boolean;
+    nonInteractive?: boolean;
+}
+declare const textParser: (text: string, options?: ParserOptions) => string | React.JSX.Element;
+export default textParser;