@ebrains/react 0.9.2-beta → 1.0.0

package/token-list_3.entry.esm.js

@@ -0,0 +1,385 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const colors = {
+  tokens: {
+    // grey
+    'grey-100': '#f8f8f8',
+    'grey-200': '#f2f2f2',
+    'grey-300': '#e6e6e6',
+    'grey-400': '#d8d8d8',
+    'grey-500': '#8c8c8c',
+    'grey-600': '#6e6e6e',
+    'grey-700': '#666666',
+    'grey-800': '#4d4d4d',
+    'grey-900': '#242424',
+    // green
+    'green-100': '#eaffee',
+    'green-200': '#d3ffdc',
+    'green-300': '#9dffb4',
+    'green-400': '#63fb92',
+    'green-500': '#00e766',
+    'green-600': '#00c959',
+    'green-700': '#009d45',
+    'green-800': '#007734',
+    'green-900': '#004f23',
+    // yellow
+    'yellow-100': '#fefee5',
+    'yellow-200': '#ffffcb',
+    'yellow-300': '#fdfdaa',
+    'yellow-400': '#ffff8b',
+    'yellow-500': '#ffff51',
+    'yellow-600': '#f3f30a',
+    'yellow-700': '#d7d72b',
+    'yellow-800': '#9a9a1e',
+    'yellow-900': '#636313',
+    // orange
+    'orange-100': '#fff4ee',
+    'orange-200': '#ffeade',
+    'orange-300': '#ffdcc5',
+    'orange-400': '#ffcca9',
+    'orange-500': '#ffb87e',
+    'orange-600': '#ffa543',
+    'orange-700': '#cb7f28',
+    'orange-800': '#995f1e',
+    'orange-900': '#653f14',
+    // red
+    'red-100': '#feefef',
+    'red-200': '#ffe0e1',
+    'red-300': '#ffc7c9',
+    'red-400': '#ff9ea2',
+    'red-500': '#ff7a7f',
+    'red-600': '#ff4d68',
+    'red-700': '#d01111',
+    'red-800': '#a3001a',
+    'red-900': '#6f0011',
+    // purple
+    'purple-100': '#f9f3ff',
+    'purple-200': '#f4e8ff',
+    'purple-300': '#e9ceff',
+    'purple-400': '#ddb1ff',
+    'purple-500': '#d18fff',
+    'purple-600': '#c461ff',
+    'purple-700': '#af56e4',
+    'purple-800': '#8337b1',
+    'purple-900': '#3d1e4f',
+    // blue
+    'blue-100': '#eff0ff',
+    'blue-200': '#dee0ff',
+    'blue-300': '#caceff',
+    'blue-400': '#b2b8ff',
+    'blue-500': '#7a89f5',
+    'blue-600': '#2b69fc',
+    'blue-700': '#0034cb',
+    'blue-800': '#002799',
+    'blue-900': '#001a65',
+    // cyan
+    'cyan-100': '#E0EEFF',
+    'cyan-200': '#D3E6FF',
+    'cyan-300': '#B5D8FF',
+    'cyan-400': '#92C8FF',
+    'cyan-500': '#6CBFFE',
+    'cyan-600': '#3FA9F5',
+    'cyan-700': '#267FBE',
+    'cyan-800': '#1F689B',
+    'cyan-900': '#15496D',
+    // Generics
+    black: '#000000',
+    white: '#ffffff',
+    transparent: 'transparent',
+    current: 'currentColor'
+  },
+  border: {
+    default: 'black',
+    inverse: 'white',
+    'inverse-soft': 'rgba(255, 255, 255, 0.3)',
+    'inverse-softer': 'rgba(255, 255, 255, 0.15)',
+    soft: 'rgba(0, 0, 0, .15 )',
+    softer: 'rgba(0, 0, 0, .1 )',
+    softest: 'rgba(0, 0, 0, .05 )',
+    accent: 'green-500',
+    error: 'red-700',
+    current: 'currentColor',
+    transparent: 'transparent'
+  },
+  text: {
+    inverse: 'white',
+    default: 'black',
+    current: 'currentColor',
+    transparent: 'transparent',
+    light: 'grey-700',
+    lighter: 'grey-600',
+    lightest: 'grey-500',
+    'extra-light': 'grey-300',
+    success: 'green-800',
+    warning: 'yellow-900',
+    error: 'red-700',
+    accent: 'green-500',
+    'on-gradient': 'rgba(0, 0, 0, 0.55)'
+  },
+  background: {
+    default: 'grey-200',
+    inverse: 'white',
+    'inverse-soft': 'rgba(255, 255, 255, .2)',
+    'inverse-softer': 'rgba(255, 255, 255, .15)',
+    dark: 'grey-300',
+    darker: 'grey-400',
+    strong: 'grey-700',
+    'strong-dark': 'grey-800',
+    stronger: 'grey-900',
+    strongest: 'black',
+    'strongest-soft': 'rgba(0, 0, 0, .05)',
+    accent: 'green-500',
+    'accent-dark': 'green-600',
+    'accent-darker': 'green-800',
+    success: 'green-200',
+    warning: 'yellow-200',
+    error: 'red-200',
+    current: 'currentColor',
+    transparent: 'transparent',
+    overlay: 'rgba(0, 0, 0, 0.25)',
+    'on-gradient': 'rgba(0, 0, 0, 0.1)',
+    'on-dark': 'rgba(255, 255, 255, 0.2)'
+  },
+  underline: {
+    accent: 'green-500',
+    light: 'grey-700',
+    lighter: 'grey-600',
+    lightest: 'grey-500',
+    'extra-light': 'grey-300'
+  },
+  outline: {
+    default: 'black',
+    accent: 'green-500'
+  },
+  /**
+   * Gradients token are created manually inside gradients.css utility file.
+   * This mapping is here to generate gradients view inside storybook
+   * @file: ui-components/src/assets/styles/utilities/gradient.css
+   */
+  gradients: {
+    'gradient-01-top': 'gradient-01-top',
+    'gradient-02-top': 'gradient-02-top',
+    'gradient-03-top': 'gradient-03-top',
+    'gradient-04-top': 'gradient-04-top',
+    'gradient-01-bottom': 'gradient-01-bottom',
+    'gradient-02-bottom': 'gradient-02-bottom',
+    'gradient-03-bottom': 'gradient-03-bottom',
+    'gradient-04-bottom': 'gradient-04-bottom'
+  }
+};
+const TokenList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.show = undefined;
+  }
+  getTextColor(value) {
+    if (value.startsWith('rgba') || value.startsWith('rgb')) {
+      const rgba = value.replace(/rgba?\(/, '').replace(')', '').split(',').map(v => parseFloat(v.trim()));
+      const r = rgba[0];
+      const g = rgba[1];
+      const b = rgba[2];
+      const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+      return brightness > 0.5 ? 'text-default' : 'text-inverse';
+    } else if (value.startsWith('#')) {
+      const color = value.replace('#', '');
+      const r = parseInt(color.substring(0, 2), 16);
+      const g = parseInt(color.substring(2, 4), 16);
+      const b = parseInt(color.substring(4, 6), 16);
+      const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+      return brightness > 0.5 ? 'text-default' : 'text-inverse';
+    }
+    return 'text-default';
+  }
+  resolveColor(value) {
+    if (colors.tokens[value]) {
+      return colors.tokens[value];
+    }
+    return value;
+  }
+  renderSection(sectionName, sectionContent) {
+    if (sectionName === 'tokens') {
+      const groupedTokens = this.groupTokensByCategory(sectionContent);
+      return Object.entries(groupedTokens).map(([, tokens]) => h("ul", {
+        class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+      }, tokens.map(token => {
+        const tokenName = Object.keys(token)[0];
+        const tokenValue = this.resolveColor(token[tokenName]);
+        const textColorClass = this.getTextColor(tokenValue);
+        return h("li", {
+          class: "grid-col-span-12 md:grid-col-span-6 flex flex-col"
+        }, h("div", {
+          class: "effect-height items-center justify-between p-16 hidden lg:flex",
+          style: {
+            backgroundColor: tokenValue
+          }
+        }, h("span", {
+          class: `${textColorClass} f-body-02`
+        }, tokenName), h("div", {
+          class: "inline-flex"
+        }, h("eds-code-block", {
+          code: tokenValue,
+          language: "hex",
+          class: "min-w-[210px] mr-4"
+        }), h("eds-code-block", {
+          language: "css",
+          code: `var(--${tokenName})`,
+          class: "min-w-[210px]"
+        }))), h("div", {
+          class: "effect-height items-center justify-between p-16 block lg:hidden",
+          style: {
+            backgroundColor: tokenValue
+          }
+        }, h("span", {
+          class: `${textColorClass} f-body-02`
+        }, tokenName), h("div", {
+          class: "inline block"
+        }, h("eds-code-block", {
+          code: tokenValue,
+          class: "min-w-[210px] mb-4"
+        }), h("eds-code-block", {
+          code: `var(--${tokenName})`,
+          class: "min-w-[210px]"
+        }))));
+      })));
+    }
+    return h("ul", {
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, Object.entries(sectionContent).map(([key, value]) => {
+      const resolvedValue = this.resolveColor(value);
+      const textColorClass = this.getTextColor(resolvedValue);
+      const style = resolvedValue.startsWith('#') || resolvedValue.startsWith('rgb') ? {
+        backgroundColor: resolvedValue
+      } : {
+        border: `2px solid ${resolvedValue}`
+      };
+      return h("li", {
+        class: "grid-col-span-12 md:grid-col-span-4 flex flex-col"
+      }, h("div", {
+        class: "effect-height block lg:flex items-center justify-between p-16",
+        style: style
+      }, h("div", {
+        class: "w-full flex"
+      }, h("span", {
+        class: `${textColorClass} mr-auto font-bold`
+      }, key), h("span", {
+        class: `${textColorClass} ml-auto  mr-4 font-bold`
+      }, value)), h("span", {
+        class: `${textColorClass}`
+      }, sectionName === 'background' ? h("eds-code-block", {
+        code: `bg-${key}`,
+        class: "min-w-[210px] mr-4"
+      }) : h("eds-code-block", {
+        code: `${sectionName}-${key}`,
+        class: sectionName === 'border' ? 'min-w-[250px] mr-4' : 'min-w-[210px] mr-4'
+      }))));
+    }));
+  }
+  groupTokensByCategory(tokens) {
+    const grouped = {};
+    Object.entries(tokens).forEach(([key, value]) => {
+      const category = key.split('-')[0];
+      if (!grouped[category]) {
+        grouped[category] = [];
+      }
+      grouped[category].push({
+        [key]: value
+      });
+    });
+    return grouped;
+  }
+  render() {
+    // Check if `show` prop is provided; if not, display all sections
+    const sectionsToDisplay = this.show ? {
+      [this.show]: colors[this.show]
+    } : colors;
+    return h("section", {
+      key: '1c949c3777a159f1a52baa4f27d1acf07bf86114',
+      class: "w-full mt-28"
+    }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) =>
+    // Only render sections that exist in `colors`
+    sectionContent ? this.renderSection(sectionName, sectionContent) : null));
+  }
+};
+const radii = {
+  xxs: '2px',
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  pill: '100px'
+};
+const TokenRadii = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("section", {
+      key: '07f9d8424b849e486379f81764ad946b0b632fa7',
+      class: "w-full mt-28"
+    }, h("ul", {
+      key: 'ec8cb4aaad010b24dc82b556fbc143c52f9824c2',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, Object.entries(radii).map(([key, value]) => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      class: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}`
+    }, h("eds-code-block", {
+      language: "Utility Class",
+      code: `rounded-${key}`,
+      class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto"
+    }), h("eds-code-block", {
+      code: `border-radius:${value}`,
+      language: "css",
+      class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto"
+    }))))));
+  }
+};
+const shadows = {
+  small: '0px 1.5px 2px rgba(0, 0, 0, 0.1)',
+  hover: '0px 0px 16px rgba(0, 0, 0, 0.2)',
+  accent: '0px 0px 12px rgba(0, 201, 89, 0.6)',
+  podium: '0px 0px 8px 8px rgb(0 0 0 / 25%);',
+  border: '0 10px 10px rgba(0, 0, 0, 0.15);',
+  'border-top': '0 -10px 10px rgba(0, 0, 0, 0.15);'
+};
+const dropShadows = {
+  small: '0px 0px 16px rgba(0, 0, 0, 0.3)'
+};
+const shadowTokens = {
+  shadows,
+  dropShadows
+};
+const TokenShadows = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("section", {
+      key: '50f470109606938085ed98480892d94ebcc2878c',
+      class: "w-full mt-28"
+    }, h("ul", {
+      key: 'e9c982816b9117eacd1a9f721e7428f317087211',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16"
+    }, h("div", {
+      class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft",
+      style: {
+        boxShadow: value
+      }
+    }, h("eds-code-block", {
+      code: `${category}-${key}`,
+      language: "Utility Class",
+      class: "mr-auto sm:mb-4 min-w-[200px]"
+    }), h("eds-code-block", {
+      code: `${value}`,
+      language: "css",
+      class: "ml-auto min-w-[200px]"
+    })))))));
+  }
+};
+
+export { TokenList as token_list, TokenRadii as token_radii, TokenShadows as token_shadows };

package/token-ratios.entry.esm.js

@@ -0,0 +1,49 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const ratios = {
+  '1x1': '1/1',
+  '21x9': '21/9',
+  '16x9': '16/9',
+  '3x2': '3/2',
+  '4x3': '4/3',
+  '4x5': '4/5'
+};
+const TokenRatios = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("section", {
+      key: 'a68e1101a6dfd99b0b48540f96792622b9837efc',
+      class: "w-full"
+    }, h("eds-section-core", {
+      key: '1f32847d415fad34b9add511d7bc49907f351fe9',
+      tag: "div",
+      "section-title": "Aspect Ratios",
+      "heading-level": "h3"
+    }, h("ul", {
+      key: 'e1dc4d7772bc3cd009458e781f5de0c078f686c0',
+      class: "gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, Object.entries(ratios).map(([key, value]) => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      class: "container ratio-box flex items-center justify-center text-center border-2 border-soft",
+      style: {
+        aspectRatio: value.replace('/', ':'),
+        // Cast to string to resolve TypeScript error
+        width: '100%',
+        // Full width to show the aspect ratio correctly
+        maxWidth: '300px'
+      }
+    }, h("span", {
+      class: "text-default font-bold mr-auto"
+    }, "aspect-", key), h("span", {
+      class: "mt-2 text-sm ml-auto"
+    }, value)))))));
+  }
+};
+
+export { TokenRatios as token_ratios };

package/token-typography.entry.esm.js

@@ -0,0 +1,267 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const headings = {
+  'heading-01': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '42px',
+      lineHeight: '100%',
+      letterSpacing: '-0.01em'
+    },
+    md: {
+      fontSize: '48px'
+    },
+    lg: {
+      fontSize: '72px'
+    },
+    xl: {
+      fontSize: '83px'
+    }
+  },
+  'heading-02': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '36px',
+      lineHeight: '100%',
+      letterSpacing: '-0.01em'
+    },
+    lg: {
+      fontSize: '48px'
+    },
+    xl: {
+      fontSize: '60px'
+    }
+  },
+  'heading-03': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '36px',
+      lineHeight: '100%',
+      letterSpacing: '-0.01em'
+    },
+    xl: {
+      fontSize: '42px'
+    }
+  },
+  'heading-04': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '28px',
+      lineHeight: '100%',
+      letterSpacing: '-0.01em'
+    },
+    xl: {
+      fontSize: '36px'
+    }
+  },
+  'heading-05': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '28px',
+      lineHeight: '110%',
+      letterSpacing: '-0.01em'
+    }
+  },
+  'heading-06': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '22px',
+      lineHeight: '120%'
+    }
+  }
+};
+const bodies = {
+  'body-01': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 600,
+      fontSize: '20px',
+      lineHeight: '140%',
+      letterSpacing: '-0.01em'
+    }
+  },
+  'body-02': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 600,
+      fontSize: '17px',
+      lineHeight: '150%'
+    }
+  }
+};
+const uis = {
+  'ui-01': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '18px',
+      lineHeight: '110%',
+      letterSpacing: '-0.01em'
+    }
+  },
+  'ui-02': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '16px',
+      lineHeight: '110%',
+      letterSpacing: '-0.01em'
+    }
+  },
+  'ui-02-light': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 600,
+      fontSize: '16px',
+      lineHeight: '110%',
+      letterSpacing: '-0.01em'
+    }
+  },
+  'ui-03': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '14px',
+      lineHeight: '110%',
+      letterSpacing: '-0.01em'
+    }
+  },
+  'ui-03-light': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 600,
+      fontSize: '14px',
+      lineHeight: '130%',
+      letterSpacing: '-0.01em'
+    }
+  },
+  'ui-04': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '12px',
+      lineHeight: '100%',
+      letterSpacing: '-0.01em'
+    }
+  },
+  'ui-05': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '10px',
+      lineHeight: '110%',
+      letterSpacing: '-0.01em'
+    }
+  },
+  caption: {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '12px',
+      lineHeight: '120%'
+    }
+  }
+};
+const displays = {
+  'display-01': {
+    sm: {
+      fontFamily: 'var(--sans)',
+      fontWeight: 800,
+      fontSize: '120px',
+      lineHeight: '100%',
+      letterSpacing: '-0.01em'
+    },
+    lg: {
+      fontSize: '150px'
+    }
+  }
+};
+const typography = {
+  families: {
+    sans: 'Inter, Helvetica, Arial, sans-serif'
+  },
+  typesets: {
+    ...headings,
+    ...bodies,
+    ...uis,
+    ...displays
+  }
+};
+const TokenTypography = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return h("section", {
+      key: '60710505ef0a06883d83c6838b1eb246485bd548',
+      class: "w-full"
+    }, h("ul", {
+      key: '3cac0e7f35f878e29ee45e21407609753099e077',
+      class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16"
+    }, Object.entries(typography.typesets).filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
+    .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => h("li", {
+      class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16"
+    }, h("div", {
+      class: "w-full p-4 block lg:flex items-center border border-soft rounded"
+    }, h("div", {
+      class: "mr-auto hidden lg:block",
+      style: {
+        fontFamily: typography.families.sans,
+        fontWeight: style.fontWeight,
+        fontSize: style.fontSize,
+        lineHeight: style.lineHeight,
+        letterSpacing: style.letterSpacing
+      }
+    }, h("span", {
+      class: "text-default font-bold"
+    }, `${typeKey} (${size})`)), h("div", {
+      class: "mr-auto block lg:hidden p-4"
+    }, h("span", {
+      class: "text-default f-heading-05"
+    }, `${typeKey} (${size})`)), h("div", {
+      class: "ml-auto"
+    }, h("eds-code-block", {
+      code: [style.fontSize && `font-size: ${style.fontSize};`, style.lineHeight && `line-height: ${style.lineHeight};`, style.letterSpacing && `letter-spacing: ${style.letterSpacing};`, style.fontWeight && `font-weight: ${style.fontWeight};`, style.fontFamily && `font-family: ${style.fontFamily};`].filter(Boolean) // Remove any falsy values (e.g., undefined, null)
+      .join('\n'),
+      language: "css",
+      class: "min-w-[250px] mb-4"
+    }), h("eds-code-block", {
+      code: `f-${typeKey}`,
+      language: "Utility Class",
+      class: "min-w-[250px] mb-4"
+    }), h("eds-code-block", {
+      code: `${size}:f-${typeKey}`,
+      language: "Screen",
+      class: "min-w-[250px] mb-4"
+    }), h("eds-code-block", {
+      code: `--var(--f-${typeKey}-fontFamily)`,
+      class: "min-w-[250px] mb-4"
+    }), h("eds-code-block", {
+      code: `--var(--f-${typeKey}-fontWeight)`,
+      class: "min-w-[250px] mb-4"
+    }), h("eds-code-block", {
+      code: `--var(--f-${typeKey}-fontSize)`,
+      class: "min-w-[250px] mb-4"
+    }), h("eds-code-block", {
+      code: `--var(--f-${typeKey}-lineHeight)`,
+      class: "min-w-[250px] mb-4"
+    }), h("eds-code-block", {
+      code: `--var(--f-${typeKey}-letterSpacing)`,
+      class: "min-w-[250px] mb-4"
+    }), h("eds-code-block", {
+      code: `--sans: Inter, Helvetica, Arial, sans-serif;`,
+      class: "min-w-[250px] mb-4"
+    }))))))));
+  }
+};
+
+export { TokenTypography as token_typography };