@foi/design-system 0.0.8 → 0.0.10

package/dist/ThemeProvider-DtW2BY15.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider-DtW2BY15.js","names":[],"sources":["../src/hocs/ThemeProvider/fonts/loadFonts.ts","../src/hocs/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["const mulishRegular = new URL('../../../assets/fonts/Mulish/Mulish-Regular.ttf', import.meta.url).href;\nconst mulishMedium = new URL('../../../assets/fonts/Mulish/Mulish-Medium.ttf', import.meta.url).href;\nconst mulishSemiBold = new URL('../../../assets/fonts/Mulish/Mulish-SemiBold.ttf', import.meta.url).href;\nconst mulishBold = new URL('../../../assets/fonts/Mulish/Mulish-Bold.ttf', import.meta.url).href;\n\nconst leagueSpartanRegular = new URL('../../../assets/fonts/LeagueSpartan/LeagueSpartan-Regular.ttf', import.meta.url)\n  .href;\nconst leagueSpartanBold = new URL('../../../assets/fonts/LeagueSpartan/LeagueSpartan-Bold.ttf', import.meta.url).href;\n\nconst googleSansCodeLight = new URL('../../../assets/fonts/GoogleSansCode/Light.ttf', import.meta.url).href;\nconst googleSansCodeLightItalic = new URL('../../../assets/fonts/GoogleSansCode/LightItalic.ttf', import.meta.url).href;\nconst googleSansCodeRegular = new URL('../../../assets/fonts/GoogleSansCode/Regular.ttf', import.meta.url).href;\nconst googleSansCodeItalic = new URL('../../../assets/fonts/GoogleSansCode/Italic.ttf', import.meta.url).href;\nconst googleSansCodeMedium = new URL('../../../assets/fonts/GoogleSansCode/Medium.ttf', import.meta.url).href;\nconst googleSansCodeMediumItalic = new URL('../../../assets/fonts/GoogleSansCode/MediumItalic.ttf', import.meta.url)\n  .href;\nconst googleSansCodeSemiBold = new URL('../../../assets/fonts/GoogleSansCode/SemiBold.ttf', import.meta.url).href;\nconst googleSansCodeSemiBoldItalic = new URL('../../../assets/fonts/GoogleSansCode/SemiBoldItalic.ttf', import.meta.url)\n  .href;\nconst googleSansCodeBold = new URL('../../../assets/fonts/GoogleSansCode/Bold.ttf', import.meta.url).href;\nconst googleSansCodeBoldItalic = new URL('../../../assets/fonts/GoogleSansCode/BoldItalic.ttf', import.meta.url).href;\n\nconst materialSymbolsRounded = new URL(\n  '../../../assets/fonts/MaterialSymbolsRounded/MaterialSymbolsRounded.woff2',\n  import.meta.url,\n).href;\n\nconst fontFaceCSS = `\n@font-face { font-family: 'Mulish'; src: url('${mulishRegular}') format('truetype'); }\n@font-face { font-family: 'Mulish'; src: url('${mulishMedium}') format('truetype'); font-weight: 500; }\n@font-face { font-family: 'Mulish'; src: url('${mulishSemiBold}') format('truetype'); font-weight: 600; }\n@font-face { font-family: 'Mulish'; src: url('${mulishBold}') format('truetype'); font-weight: 700; }\n\n@font-face { font-family: 'League Spartan'; src: url('${leagueSpartanRegular}') format('truetype'); }\n@font-face { font-family: 'League Spartan'; src: url('${leagueSpartanBold}') format('truetype'); font-weight: bold; }\n\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeLight}') format('truetype'); font-weight: 300; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeLightItalic}') format('truetype'); font-weight: 300; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeRegular}') format('truetype'); font-weight: 400; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeItalic}') format('truetype'); font-weight: 400; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeMedium}') format('truetype'); font-weight: 500; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeMediumItalic}') format('truetype'); font-weight: 500; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeSemiBold}') format('truetype'); font-weight: 600; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeSemiBoldItalic}') format('truetype'); font-weight: 600; font-style: italic; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeBold}') format('truetype'); font-weight: 700; }\n@font-face { font-family: 'Google Sans Code'; src: url('${googleSansCodeBoldItalic}') format('truetype'); font-weight: 700; font-style: italic; }\n\n@font-face { font-family: 'Material Symbols Rounded'; src: url('${materialSymbolsRounded}') format('woff2'); font-weight: 100 900; font-style: normal; font-display: block; }\n`;\n\nlet injected = false;\n\nexport const loadFonts = () => {\n  console.log('loadFonts called, injected:', injected);\n  if (typeof document === 'undefined' || injected) return;\n  injected = true;\n  const style = document.createElement('style');\n  style.textContent = fontFaceCSS;\n  document.head.appendChild(style);\n  console.log('font style injected');\n};\n","import { useLayoutEffect } from 'react';\nimport { ThemeProviderComponent } from './ThemeProvider.interface';\nimport type { Theme } from './ThemeProvider.interface';\nimport { useCreateThemeStyles } from './useThemeProvider.hook';\nimport { loadFonts } from './fonts/loadFonts';\n\nconst ThemeProvider = <T extends readonly Theme[]>(props: ThemeProviderComponent<T>) => {\n  const { themes, theme: selectedTheme, children } = props;\n  useCreateThemeStyles(themes, selectedTheme);\n  useLayoutEffect(() => {\n    loadFonts();\n  }, []);\n\n  return <>{children}</>;\n};\n\nexport default ThemeProvider;\n"],"mappings":";;;AA2BA,IAAM,IAAc;gDA3BE,IAAA,IAAA,iv1IAAA,KAAA,OAAA,KAAA,IAA2E,CAAC,KA4BpC;gDA3BzC,IAAA,IAAA,qy1IAAA,KAAA,OAAA,KAAA,IAA0E,CAAC,KA4BnC;gDA3BtC,IAAA,IAAA,qt1IAAA,KAAA,OAAA,KAAA,IAA4E,CAAC,KA4BrC;gDA3B5C,IAAA,IAAA,iz1IAAA,KAAA,OAAA,KAAA,IAAwE,CAAC,KA4BjC;;wDA1B9B,IAAA,IAAA,im0EAAA,KAAA,OAAA,KAAA,IAAyF,CACnH,KA2B0E;wDA1BnD,IAAA,IAAA,yv0EAAA,KAAA,OAAA,KAAA,IAAsF,CAAC,KA2BvC;;0DAzB9C,IAAA,IAAA,qgvEAAA,KAAA,OAAA,KAAA,IAA0E,CAAC,KA2BzB;0DA1B5C,IAAA,IAAA,q30EAAA,KAAA,OAAA,KAAA,IAAgF,CAAC,KA2B/B;0DA1BtD,IAAA,IAAA,yqvEAAA,KAAA,OAAA,KAAA,IAA4E,CAAC,KA2B3B;0DA1BnD,IAAA,IAAA,y80EAAA,KAAA,OAAA,KAAA,IAA2E,CAAC,KA2B1B;0DA1BlD,IAAA,IAAA,ykvEAAA,KAAA,OAAA,KAAA,IAA2E,CAAC,KA2B1B;0DA1B5C,IAAA,IAAA,qj1EAAA,KAAA,OAAA,KAAA,IAAiF,CACjH,KA0BkF;0DAzBtD,IAAA,IAAA,ihwEAAA,KAAA,OAAA,KAAA,IAA6E,CAAC,KA0B5B;0DAzB5C,IAAA,IAAA,y/1EAAA,KAAA,OAAA,KAAA,IAAmF,CACrH,KAyBoF;0DAxB5D,IAAA,IAAA,qxwEAAA,KAAA,OAAA,KAAA,IAAyE,CAAC,KAyBxB;0DAxB5C,IAAA,IAAA,qo2EAAA,KAAA,OAAA,KAAA,IAA+E,CAAC,KAyB9B;;kEAvBpD,IAAA,IAAA,m7pxNAAA,KAAA,OAAA,KAAA,IAG9B,CAAC,KAsBuF;GAGrF,IAAW,IAEF,UAAkB;CAE7B,IADA,QAAQ,IAAI,+BAA+B,EAAS,EAChD,OAAO,WAAa,OAAe,GAAU;CACjD,IAAW;CACX,IAAM,IAAQ,SAAS,cAAc,QAAQ;CAG7C,AAFA,EAAM,cAAc,GACpB,SAAS,KAAK,YAAY,EAAM,EAChC,QAAQ,IAAI,sBAAsB;GCrD9B,KAA6C,MAAqC;CACtF,IAAM,EAAE,WAAQ,OAAO,GAAe,gBAAa;CAMnD,OALA,EAAqB,GAAQ,EAAc,EAC3C,QAAsB;EACpB,GAAW;IACV,EAAE,CAAC,EAEC,kBAAA,GAAA,EAAG,aAAY,CAAA"}

package/dist/atoms.d.ts

@@ -1,4 +1,5 @@
 export { default as Button } from './components/atoms/Button';
+export { default as Icon } from './components/atoms/Icon';
 export { default as Checkbox } from './components/atoms/Checkbox';
 export { default as DatePicker } from './components/atoms/DatePicker';
 export { default as IconButton } from './components/atoms/IconButton';

package/dist/atoms.mjs

@@ -1,3 +1,3 @@
-import { n as e } from "./RadioGroup.context-zJGC5Sjc.js";
-import { a as t, c as n, i as r, n as i, o as a, r as o, s, t as c } from "./Switch-DIid_9X3.js";
-export { n as Button, e as Checkbox, a as DatePicker, s as IconButton, t as Input, r as Radio, o as Select, i as Slider, c as Switch };
+import { a as e, n as t } from "./RadioGroup.context-DJLdImVO.js";
+import { a as n, c as r, i, n as a, o, r as s, s as c, t as l } from "./Switch-BBGFtWQt.js";
+export { r as Button, t as Checkbox, o as DatePicker, e as Icon, c as IconButton, n as Input, i as Radio, s as Select, a as Slider, l as Switch };

package/dist/components/atoms/Icon/Icon.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+import type { IconProps } from './Icon.interface';
+/**
+ * Renders a single Material Symbols Rounded icon using font ligatures.
+ *
+ * Pass the ligature name as `name` (e.g. `'home'`, `'search'`, `'close'`).
+ * The icon font is loaded once by `ThemeProvider` — no extra requests per icon.
+ */
+declare const Icon: FC<IconProps>;
+export default Icon;

package/dist/components/atoms/Icon/Icon.emotion.d.ts

@@ -0,0 +1,2 @@
+declare const Style: () => import("@emotion/utils").SerializedStyles;
+export default Style;

package/dist/components/atoms/Icon/Icon.interface.d.ts

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+export interface IconProps {
+    /** Material Symbols ligature name, e.g. `'home'`, `'search'`, `'close'`. */
+    name: string;
+    /** When `true`, renders the filled variant of the icon.
+     * @default false
+     */
+    fill?: boolean;
+    /** Icon size. `'md'` corresponds to 20 px (default).
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** Additional CSS class applied to the root element. */
+    className?: string;
+    /** Inline styles applied to the root element. */
+    style?: CSSProperties;
+}

package/dist/components/atoms/Icon/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Icon';