@marioschmidt/design-system-tokens 1.0.63 → 1.0.65

package/dist/js/primitives/index.js

@@ -0,0 +1,442 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.0
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ */
+
+export const primitives = {
+  "colors": {
+    "colorBildRed50": "#DD0000",
+    "colorBildRed35": "#AF0002",
+    "colorBildRed53": "#F52D2D",
+    "bILDRed": "BILDRed",
+    "bILD100": "BILD100",
+    "bILD096": "BILD096",
+    "bILD085": "BILD085",
+    "bILD060": "BILD060",
+    "bILD035": "BILD035",
+    "bILD025": "BILD025",
+    "bILD015": "BILD015",
+    "bILDOrange": "BILDOrange",
+    "bILDRed053": "BILDRed053",
+    "bILDRed035": "BILDRed035",
+    "bILDGreen093": "BILDGreen093",
+    "bILDGreen070": "BILDGreen070",
+    "bILDGreen063": "BILDGreen063",
+    "bILD093": "BILD093",
+    "bILDYellow": "BILDYellow",
+    "bILD073": "BILD073",
+    "bILD045": "BILD045",
+    "colorBildPurple20": "#551937",
+    "alphaRed50a80": "rgba(221, 0, 0, 0.8)",
+    "colorNeutral15": "#232629",
+    "colorNeutral100": "#FFFFFF",
+    "colorNeutral85": "#CED4DA",
+    "colorNeutral35": "#4B525A",
+    "colorNeutral25": "#343C41",
+    "colorNeutral60": "#8C9196",
+    "colorNeutral96": "#F2F4F5",
+    "colorNeutral93": "#E9ECEF",
+    "colorNeutral73": "#AEB4B9",
+    "colorNeutral45": "#666B70",
+    "colorNeutral10": "#1C1C1C",
+    "colorNeutral20": "#2C3138",
+    "colorNeutral0": "#000000",
+    "colorOrange67": "#FD8227",
+    "colorGreen70": "#00C373",
+    "colorGreen63": "#00AF67",
+    "colorGreen93": "#CEF4E4",
+    "colorGreen40": "#006E3E",
+    "colorGreen56": "#18995C",
+    "colorYellow80": "#FFBF00",
+    "alphaNeutral85a50": "rgba(206, 212, 218, 0.5)",
+    "alphaGreen93a50": "rgba(206, 244, 228, 0.5)",
+    "colorGreen56a50": "rgba(0, 155, 90, 0.5)",
+    "alphaBlack20": "rgba(0, 0, 0, 0.2)",
+    "alphaBlack10": "rgba(0, 0, 0, 0.1)",
+    "alphaBlack60": "rgba(0, 0, 0, 0.6)",
+    "alphaBlack30": "rgba(0, 0, 0, 0.3)",
+    "alphaBlack70": "rgba(0, 0, 0, 0.7)",
+    "alphaWhite10": "rgba(255, 255, 255, 0.1)",
+    "alphaWhite20": "rgba(255, 255, 255, 0.2)",
+    "alphaWhite30": "rgba(255, 255, 255, 0.3)",
+    "alphaWhite60": "rgba(255, 255, 255, 0.6)",
+    "alphaWhite70": "rgba(255, 255, 255, 0.7)",
+    "alphaWhite35": "rgba(255, 255, 255, 0.35)",
+    "alphaBlack80": "rgba(0, 0, 0, 0.8)",
+    "alphaWhite80": "rgba(255, 255, 255, 0.8)",
+    "alphaBlack35": "rgba(0, 0, 0, 0.35)",
+    "alphaBlack0": "rgba(0, 0, 0, 0)",
+    "alphaBlack50": "rgba(0, 0, 0, 0.5)",
+    "alphaBlack5": "rgba(0, 0, 0, 0.05)",
+    "alphaWhite0": "rgba(255, 255, 255, 0)",
+    "colorPartnerFitbook": "#FF97B7",
+    "colorPartnerPetbook": "#B9DB91",
+    "colorPartnerMyhome": "#66CCCC",
+    "colorPartnerTravelbook": "#8EF0ED",
+    "colorPartnerTechbook": "#93E4FF",
+    "colorPartnerKaufberater": "#55476E",
+    "colorBzRed50": "#E3001B",
+    "colorAubiRed50": "#F00000",
+    "colorCobiRed50": "#DC231C",
+    "colorSpobiBlue98": "#F7F9FD",
+    "colorSpobiBlue81": "#BDCADB",
+    "colorSpobiBlue29": "#174482",
+    "colorSpobiBlue16": "#0A2750",
+    "colorSpobiBlue10": "#081828",
+    "colorSpobiBlue38": "#315998",
+    "colorSpobiRed50": "#E52528",
+    "colorSpobiBlue16a0": "rgba(10, 39, 80, 0)",
+    "colorSpobiBlue16a70": "rgba(10, 39, 80, 0.7)",
+    "opacity05": 5,
+    "opacity10": 10,
+    "opacity20": 20,
+    "opacity40": 40,
+    "opacity60": 60,
+    "opacity80": 80,
+    "opacity100": 100,
+    "opacity90": 90,
+    "opacity30": 30,
+    "opacity50": 50,
+    "opacity00": 0,
+    "opacity70": 70
+  },
+  "spacing": {
+    "space1x": "8px",
+    "space0p5x": "4px",
+    "space0p25x": "2px",
+    "space2x": "16px",
+    "space1p5x": "12px",
+    "space4x": "32px",
+    "space3x": "24px",
+    "space6x": "48px",
+    "space8x": "64px",
+    "space9x": "72px",
+    "space5x": "40px",
+    "space0x": "0px",
+    "space10x": "80px",
+    "space20x": "160px",
+    "space2p5x": "20px",
+    "spaceNeg0p25x": "-2px",
+    "space0p75x": "6px",
+    "space1p25x": "10px",
+    "space2p75x": "22px",
+    "space4p5x": "36px",
+    "space7p5x": "60px",
+    "space12x": "96px",
+    "space1p75x": "14px",
+    "space8p5x": "68px",
+    "space3p5x": "28px"
+  },
+  "sizing": {
+    "size6x": "48px",
+    "size3x": "24px",
+    "size1x": "8px",
+    "size0p25x": "2px",
+    "size0p5x": "4px",
+    "size2x": "16px",
+    "size4p5x": "36px",
+    "size5x": "40px",
+    "size3p5x": "28px",
+    "size2p5x": "20px",
+    "size12p5x": "100px",
+    "size2p75x": "22px",
+    "size3p25x": "26px",
+    "size4x": "32px",
+    "size3p75x": "30px",
+    "size2p25x": "18px",
+    "size7x": "56px",
+    "size1p5x": "12px",
+    "size0p75x": "6px",
+    "size22p5x": "180px",
+    "size40x": "320px",
+    "size8x": "64px",
+    "size11p5x": "92px",
+    "size1p75x": "14px",
+    "size5p25x": "42px",
+    "size1p25x": "10px",
+    "size80x": "640px",
+    "size17p5x": "140px",
+    "size20x": "160px",
+    "size128x": "1024px",
+    "size124x": "992px",
+    "size12x": "96px",
+    "size35x": "280px",
+    "size15x": "120px",
+    "size16p25": "130px",
+    "size87p5x": "700px",
+    "size10x": "80px",
+    "size30x": "240px",
+    "size25x": "200px",
+    "size168x": "1344px",
+    "size60x": "480px",
+    "size9x": "72px",
+    "size27p5x": "220px",
+    "size50x": "400px",
+    "size116p25x": "930px",
+    "size18p5x": "148px",
+    "size100x": "800px",
+    "size0x": "0px",
+    "size0p125x": "1px"
+  },
+  "fonts": {
+    "fontFamilyGothamXNarrow": "Gotham XNarrow",
+    "fontFamilyGothamCond": "Gotham Condensed",
+    "fontFamilyGotham": "Gotham",
+    "fontFamilyLucidaGrande": "Lucida Grande",
+    "fontFamilyAntennaExtraCond": "AntennaExtraCond",
+    "fontFamilyAntennaCond": "AntennaCond",
+    "fontFamilyInter": "Inter",
+    "fontWeightBold": 700,
+    "fontWeightExtraBlack": 900,
+    "fontWeightBook": 400,
+    "fontWeightUltra": 1000,
+    "fontWeightBlack": 800,
+    "fontWeightBook350": 350,
+    "fontWeightSemiBold": 600,
+    "fontWeightThin": 100,
+    "fontWeightLight": 300,
+    "fontWeightExtraLight": 200,
+    "fontWeightMedium": 500,
+    "letterSpaceNeg0p25": "-0.25px",
+    "letterSpace0": "0px",
+    "letterSpace1": "1px",
+    "letterSpace0p5": "0.5px",
+    "letterSpace0p25": "0.25px",
+    "letterSpaceNeg0p5": "-0.5px",
+    "letterSpace2": "2px",
+    "letterSpaceNeg1": "-1px",
+    "letterSpaceNeg2": "-2px",
+    "letterSpace3": "3px",
+    "letterSpaceNeg3": "-3px",
+    "stFontWeightUltra": 1000,
+    "stFontWeightExtraBlack": 900,
+    "stFontWeightBlack": 800,
+    "stFontWeightBold": 700,
+    "stFontWeightSemiBold": 600,
+    "stFontWeightMedium": 500,
+    "stFontWeightStBook": 400,
+    "stFontWeightBook350": 350,
+    "stFontWeightExtraLight": 200,
+    "stFontWeightThin": 100,
+    "stFontWeightBoldItalic": 700,
+    "stFontWeightBlackItalic": 900
+  }
+};
+
+export const { colors, spacing, sizing, fonts } = primitives;
+
+// Flat exports for tree-shaking
+export const colorBildRed50 = "#DD0000";
+export const colorBildRed35 = "#AF0002";
+export const colorBildRed53 = "#F52D2D";
+export const bILDRed = "BILDRed";
+export const bILD100 = "BILD100";
+export const bILD096 = "BILD096";
+export const bILD085 = "BILD085";
+export const bILD060 = "BILD060";
+export const bILD035 = "BILD035";
+export const bILD025 = "BILD025";
+export const bILD015 = "BILD015";
+export const bILDOrange = "BILDOrange";
+export const bILDRed053 = "BILDRed053";
+export const bILDRed035 = "BILDRed035";
+export const bILDGreen093 = "BILDGreen093";
+export const bILDGreen070 = "BILDGreen070";
+export const bILDGreen063 = "BILDGreen063";
+export const bILD093 = "BILD093";
+export const bILDYellow = "BILDYellow";
+export const bILD073 = "BILD073";
+export const bILD045 = "BILD045";
+export const colorBildPurple20 = "#551937";
+export const alphaRed50a80 = "rgba(221, 0, 0, 0.8)";
+export const colorNeutral15 = "#232629";
+export const colorNeutral100 = "#FFFFFF";
+export const colorNeutral85 = "#CED4DA";
+export const colorNeutral35 = "#4B525A";
+export const colorNeutral25 = "#343C41";
+export const colorNeutral60 = "#8C9196";
+export const colorNeutral96 = "#F2F4F5";
+export const colorNeutral93 = "#E9ECEF";
+export const colorNeutral73 = "#AEB4B9";
+export const colorNeutral45 = "#666B70";
+export const colorNeutral10 = "#1C1C1C";
+export const colorNeutral20 = "#2C3138";
+export const colorNeutral0 = "#000000";
+export const colorOrange67 = "#FD8227";
+export const colorGreen70 = "#00C373";
+export const colorGreen63 = "#00AF67";
+export const colorGreen93 = "#CEF4E4";
+export const colorGreen40 = "#006E3E";
+export const colorGreen56 = "#18995C";
+export const colorYellow80 = "#FFBF00";
+export const alphaNeutral85a50 = "rgba(206, 212, 218, 0.5)";
+export const alphaGreen93a50 = "rgba(206, 244, 228, 0.5)";
+export const colorGreen56a50 = "rgba(0, 155, 90, 0.5)";
+export const alphaBlack20 = "rgba(0, 0, 0, 0.2)";
+export const alphaBlack10 = "rgba(0, 0, 0, 0.1)";
+export const alphaBlack60 = "rgba(0, 0, 0, 0.6)";
+export const alphaBlack30 = "rgba(0, 0, 0, 0.3)";
+export const alphaBlack70 = "rgba(0, 0, 0, 0.7)";
+export const alphaWhite10 = "rgba(255, 255, 255, 0.1)";
+export const alphaWhite20 = "rgba(255, 255, 255, 0.2)";
+export const alphaWhite30 = "rgba(255, 255, 255, 0.3)";
+export const alphaWhite60 = "rgba(255, 255, 255, 0.6)";
+export const alphaWhite70 = "rgba(255, 255, 255, 0.7)";
+export const alphaWhite35 = "rgba(255, 255, 255, 0.35)";
+export const alphaBlack80 = "rgba(0, 0, 0, 0.8)";
+export const alphaWhite80 = "rgba(255, 255, 255, 0.8)";
+export const alphaBlack35 = "rgba(0, 0, 0, 0.35)";
+export const alphaBlack0 = "rgba(0, 0, 0, 0)";
+export const alphaBlack50 = "rgba(0, 0, 0, 0.5)";
+export const alphaBlack5 = "rgba(0, 0, 0, 0.05)";
+export const alphaWhite0 = "rgba(255, 255, 255, 0)";
+export const colorPartnerFitbook = "#FF97B7";
+export const colorPartnerPetbook = "#B9DB91";
+export const colorPartnerMyhome = "#66CCCC";
+export const colorPartnerTravelbook = "#8EF0ED";
+export const colorPartnerTechbook = "#93E4FF";
+export const colorPartnerKaufberater = "#55476E";
+export const colorBzRed50 = "#E3001B";
+export const colorAubiRed50 = "#F00000";
+export const colorCobiRed50 = "#DC231C";
+export const colorSpobiBlue98 = "#F7F9FD";
+export const colorSpobiBlue81 = "#BDCADB";
+export const colorSpobiBlue29 = "#174482";
+export const colorSpobiBlue16 = "#0A2750";
+export const colorSpobiBlue10 = "#081828";
+export const colorSpobiBlue38 = "#315998";
+export const colorSpobiRed50 = "#E52528";
+export const colorSpobiBlue16a0 = "rgba(10, 39, 80, 0)";
+export const colorSpobiBlue16a70 = "rgba(10, 39, 80, 0.7)";
+export const opacity05 = 5;
+export const opacity10 = 10;
+export const opacity20 = 20;
+export const opacity40 = 40;
+export const opacity60 = 60;
+export const opacity80 = 80;
+export const opacity100 = 100;
+export const opacity90 = 90;
+export const opacity30 = 30;
+export const opacity50 = 50;
+export const opacity00 = 0;
+export const opacity70 = 70;
+export const space1x = "8px";
+export const space0p5x = "4px";
+export const space0p25x = "2px";
+export const space2x = "16px";
+export const space1p5x = "12px";
+export const space4x = "32px";
+export const space3x = "24px";
+export const space6x = "48px";
+export const space8x = "64px";
+export const space9x = "72px";
+export const space5x = "40px";
+export const space0x = "0px";
+export const space10x = "80px";
+export const space20x = "160px";
+export const space2p5x = "20px";
+export const spaceNeg0p25x = "-2px";
+export const space0p75x = "6px";
+export const space1p25x = "10px";
+export const space2p75x = "22px";
+export const space4p5x = "36px";
+export const space7p5x = "60px";
+export const space12x = "96px";
+export const space1p75x = "14px";
+export const space8p5x = "68px";
+export const space3p5x = "28px";
+export const size6x = "48px";
+export const size3x = "24px";
+export const size1x = "8px";
+export const size0p25x = "2px";
+export const size0p5x = "4px";
+export const size2x = "16px";
+export const size4p5x = "36px";
+export const size5x = "40px";
+export const size3p5x = "28px";
+export const size2p5x = "20px";
+export const size12p5x = "100px";
+export const size2p75x = "22px";
+export const size3p25x = "26px";
+export const size4x = "32px";
+export const size3p75x = "30px";
+export const size2p25x = "18px";
+export const size7x = "56px";
+export const size1p5x = "12px";
+export const size0p75x = "6px";
+export const size22p5x = "180px";
+export const size40x = "320px";
+export const size8x = "64px";
+export const size11p5x = "92px";
+export const size1p75x = "14px";
+export const size5p25x = "42px";
+export const size1p25x = "10px";
+export const size80x = "640px";
+export const size17p5x = "140px";
+export const size20x = "160px";
+export const size128x = "1024px";
+export const size124x = "992px";
+export const size12x = "96px";
+export const size35x = "280px";
+export const size15x = "120px";
+export const size16p25 = "130px";
+export const size87p5x = "700px";
+export const size10x = "80px";
+export const size30x = "240px";
+export const size25x = "200px";
+export const size168x = "1344px";
+export const size60x = "480px";
+export const size9x = "72px";
+export const size27p5x = "220px";
+export const size50x = "400px";
+export const size116p25x = "930px";
+export const size18p5x = "148px";
+export const size100x = "800px";
+export const size0x = "0px";
+export const size0p125x = "1px";
+export const fontFamilyGothamXNarrow = "Gotham XNarrow";
+export const fontFamilyGothamCond = "Gotham Condensed";
+export const fontFamilyGotham = "Gotham";
+export const fontFamilyLucidaGrande = "Lucida Grande";
+export const fontFamilyAntennaExtraCond = "AntennaExtraCond";
+export const fontFamilyAntennaCond = "AntennaCond";
+export const fontFamilyInter = "Inter";
+export const fontWeightBold = 700;
+export const fontWeightExtraBlack = 900;
+export const fontWeightBook = 400;
+export const fontWeightUltra = 1000;
+export const fontWeightBlack = 800;
+export const fontWeightBook350 = 350;
+export const fontWeightSemiBold = 600;
+export const fontWeightThin = 100;
+export const fontWeightLight = 300;
+export const fontWeightExtraLight = 200;
+export const fontWeightMedium = 500;
+export const letterSpaceNeg0p25 = "-0.25px";
+export const letterSpace0 = "0px";
+export const letterSpace1 = "1px";
+export const letterSpace0p5 = "0.5px";
+export const letterSpace0p25 = "0.25px";
+export const letterSpaceNeg0p5 = "-0.5px";
+export const letterSpace2 = "2px";
+export const letterSpaceNeg1 = "-1px";
+export const letterSpaceNeg2 = "-2px";
+export const letterSpace3 = "3px";
+export const letterSpaceNeg3 = "-3px";
+export const stFontWeightUltra = 1000;
+export const stFontWeightExtraBlack = 900;
+export const stFontWeightBlack = 800;
+export const stFontWeightBold = 700;
+export const stFontWeightSemiBold = 600;
+export const stFontWeightMedium = 500;
+export const stFontWeightStBook = 400;
+export const stFontWeightBook350 = 350;
+export const stFontWeightExtraLight = 200;
+export const stFontWeightThin = 100;
+export const stFontWeightBoldItalic = 700;
+export const stFontWeightBlackItalic = 900;

package/dist/js/react/ThemeContext.js

@@ -0,0 +1,17 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.0
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ */
+
+// React Context for BILD Design System Theme
+
+import { createContext } from 'react';
+
+export const ThemeContext = createContext(null);
+
+export default ThemeContext;

package/dist/js/react/ThemeProvider.js

@@ -0,0 +1,92 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.0
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ */
+
+// ThemeProvider component for BILD Design System
+
+import { createElement, useState, useMemo, useEffect } from 'react';
+import { ThemeContext } from './ThemeContext.js';
+import { createTheme } from '../themes/createTheme.js';
+
+const BREAKPOINT_VALUES = {
+  xs: 320,
+  sm: 390,
+  md: 600,
+  lg: 1024
+};
+
+function detectBreakpoint() {
+  if (typeof window === 'undefined') return null;
+  const width = window.innerWidth;
+  if (width >= BREAKPOINT_VALUES.lg) return 'lg';
+  if (width >= BREAKPOINT_VALUES.md) return 'md';
+  if (width >= BREAKPOINT_VALUES.sm) return 'sm';
+  return 'xs';
+}
+
+export function ThemeProvider({
+  brand = 'bild',
+  colorBrand,
+  colorMode = 'light',
+  breakpoint = 'md',
+  density = 'default',
+  autoBreakpoint = false,
+  children
+}) {
+  // Breakpoint state for auto-detection
+  const [detectedBreakpoint, setDetectedBreakpoint] = useState(
+    () => (autoBreakpoint ? detectBreakpoint() : null) || breakpoint
+  );
+
+  // Window resize listener (only when autoBreakpoint=true)
+  useEffect(() => {
+    if (!autoBreakpoint) return;
+    if (typeof window === 'undefined') return;
+
+    const handleResize = () => {
+      const detected = detectBreakpoint();
+      if (detected) setDetectedBreakpoint(detected);
+    };
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [autoBreakpoint]);
+
+  // Effective breakpoint (prop or auto-detected)
+  const effectiveBreakpoint = autoBreakpoint ? detectedBreakpoint : breakpoint;
+
+  // Create theme object via createTheme()
+  const theme = useMemo(() => {
+    return createTheme({
+      brand,
+      colorBrand,
+      colorMode,
+      breakpoint: effectiveBreakpoint,
+      density
+    });
+  }, [brand, colorBrand, colorMode, effectiveBreakpoint, density]);
+
+  // Context value with additional metadata
+  const contextValue = useMemo(() => ({
+    ...theme,
+    // Expose current configuration
+    brand,
+    colorBrand: theme.__meta?.colorBrand || colorBrand || (brand === 'advertorial' ? 'bild' : brand),
+    colorMode,
+    breakpoint: effectiveBreakpoint,
+    density,
+    autoBreakpoint
+  }), [theme, brand, colorBrand, colorMode, effectiveBreakpoint, density, autoBreakpoint]);
+
+  // Render provider using createElement (no JSX transpilation needed)
+  return createElement(ThemeContext.Provider, { value: contextValue }, children);
+}
+
+export default ThemeProvider;

package/dist/js/react/index.d.ts

@@ -0,0 +1,78 @@
+/**
+ * TypeScript definitions for BILD Design System React bindings
+ * Auto-generated - Do not edit directly
+ */
+
+import { Context, ReactNode } from 'react';
+
+// Brand and mode types
+export type Brand = 'bild' | 'sportbild' | 'advertorial';
+export type ColorBrand = 'bild' | 'sportbild';
+export type ColorMode = 'light' | 'dark';
+export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg';
+export type Density = 'default' | 'dense' | 'spacious';
+
+// Theme context value
+export interface ThemeContextValue {
+  brand: Brand;
+  colorBrand: ColorBrand;
+  colorMode: ColorMode;
+  breakpoint: Breakpoint;
+  density: Density;
+  autoBreakpoint: boolean;
+  colors: Record<string, string | number>;
+  spacing: Record<string, string | number>;
+  typography: Record<string, {
+    fontFamily: string;
+    fontWeight: number;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing?: string;
+  }>;
+  effects: Record<string, Array<{
+    offsetX: number;
+    offsetY: number;
+    radius: number;
+    spread: number;
+    color: string;
+  }>>;
+  __meta?: {
+    brand: Brand;
+    colorBrand: ColorBrand;
+    colorMode: ColorMode;
+    breakpoint: Breakpoint;
+    density: Density;
+  };
+}
+
+// ThemeProvider props
+export interface ThemeProviderProps {
+  brand?: Brand;
+  colorBrand?: ColorBrand;
+  colorMode?: ColorMode;
+  breakpoint?: Breakpoint;
+  density?: Density;
+  autoBreakpoint?: boolean;
+  children: ReactNode;
+}
+
+// Breakpoints constant
+export declare const BREAKPOINTS: {
+  xs: 320;
+  sm: 390;
+  md: 600;
+  lg: 1024;
+};
+
+// Context
+export declare const ThemeContext: Context<ThemeContextValue | null>;
+
+// Components
+export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+
+// Hooks
+export declare function useTheme(): ThemeContextValue;
+export declare function useBreakpoint(defaultBreakpoint?: Breakpoint): Breakpoint;
+export declare function useIsBreakpoint(target: Breakpoint): boolean;
+export declare function useIsBreakpointUp(target: Breakpoint): boolean;
+export declare function useIsBreakpointDown(target: Breakpoint): boolean;

package/dist/js/react/index.js

@@ -0,0 +1,22 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ *
+ * BILD Design System Tokens v1.0.0
+ * Generated by Style Dictionary v4.0.0
+ *
+ * Copyright (c) 2024 Axel Springer Deutschland GmbH
+ * Proprietary and confidential. All rights reserved.
+ */
+
+// React bindings for BILD Design System
+
+export { ThemeContext } from './ThemeContext.js';
+export { ThemeProvider } from './ThemeProvider.js';
+export { useTheme } from './useTheme.js';
+export {
+  useBreakpoint,
+  useIsBreakpoint,
+  useIsBreakpointUp,
+  useIsBreakpointDown,
+  BREAKPOINTS
+} from './useBreakpoint.js';