@ebrains/react 0.0.1-alpha.0 → 0.2.0-alpha.0

package/token-typography.entry.esm.js

@@ -0,0 +1,264 @@
+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: '2078622c91b8906b71ee3aebdadcda0ac2c49512',
+      class: "w-full"
+    }, h("ul", {
+      key: 'fe9212731cddcd43e3d5f5518245911d9d4cd493',
+      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: `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: [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: `--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"
+    }))))))));
+  }
+};
+
+export { TokenTypography as token_typography };

package/twitter-ac21b505.esm.js

@@ -0,0 +1,14 @@
+const twitter = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.03188 17C13.07 17 16.3718 11.999 16.3718 7.66246C16.3718 7.52041 16.3689 7.37901 16.3625 7.23824C17.0035 6.775 17.5606 6.1969 18 5.53882C17.4118 5.80019 16.7789 5.97615 16.1149 6.05549C16.7926 5.64919 17.313 5.00647 17.5584 4.24026C16.9242 4.61617 16.2217 4.88938 15.4739 5.03686C14.8748 4.39894 14.022 4 13.0777 4C11.2649 4 9.7948 5.46972 9.7948 7.28143C9.7948 7.53897 9.8236 7.78947 9.87992 8.02973C7.15157 7.89248 4.73235 6.58656 3.11345 4.60081C2.83153 5.08581 2.66897 5.64919 2.66897 6.25032C2.66897 7.38893 3.2485 8.39412 4.12978 8.98213C3.59122 8.9655 3.08529 8.81769 2.64305 8.57167C2.64257 8.58544 2.64257 8.59887 2.64257 8.61358C2.64257 10.203 3.7741 11.53 5.27619 11.8307C5.00035 11.9059 4.71011 11.9462 4.41059 11.9462C4.19938 11.9462 3.99362 11.9254 3.79362 11.887C4.21154 13.191 5.42339 14.1399 6.86021 14.1665C5.73668 15.0469 4.3213 15.5712 2.78305 15.5712C2.51841 15.5712 2.25696 15.5562 2 15.5258C3.45281 16.4568 5.17795 17 7.03205 17"
+      fill="currentColor"
+    />
+  </svg>`;
+
+export { twitter as t };

package/user-71ebdc15.esm.js

@@ -0,0 +1,16 @@
+const user = `<svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="10" cy="6" r="3" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M17 18V17C17 14.7909 15.2091 13 13 13H7C4.79086 13 3 14.7909 3 17V18"
+      stroke="currentColor"
+      stroke-width="2"
+    />
+  </svg>`;
+
+export { user as u };

package/youtube-efbfbdc4.esm.js

@@ -0,0 +1,14 @@
+const youtube = `  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19.5821 5.18614C19.3521 4.3256 18.6743 3.64795 17.8137 3.41797C16.2542 3 10 3 10 3C10 3 3.74579 3 2.18614 3.41797C1.32557 3.64795 0.647844 4.3256 0.417841 5.18614C-2.98023e-08 6.74579 0 10 0 10C0 10 -2.98023e-08 13.2541 0.417841 14.8139C0.647844 15.6744 1.32557 16.352 2.18614 16.5821C3.74579 17 10 17 10 17C10 17 16.2542 17 17.8137 16.5821C18.6743 16.352 19.3521 15.6744 19.5821 14.8139C20 13.2541 20 10 20 10C20 10 20 6.74579 19.5821 5.18614ZM8 13V7L14 10L8 13Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+export { youtube as y };