@raystack/apsara 0.0.0

package/dist/themprovider/themeprovider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeprovider.js","sources":["../../../themprovider/themeprovider.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\n\nimport {\n  getMediaTheme,\n  listenForOSPreferenceChanges,\n  MediaTheme,\n} from \"./OSPreference\";\n\nimport {\n  getSavedThemePreference,\n  isValidThemePreference,\n  saveThemePreference,\n  ThemePreference,\n} from \"./storage\";\n\nconst { createContext, useState, useEffect } = React;\n\nconst defaultThemeName = \"dark\";\ntype Theme = \"dark\" | \"light\";\n\nfunction isValidTheme(theme: string): theme is Theme {\n  return theme == \"dark\" || theme == \"light\";\n}\n\ntype ThemeProviderType = {\n  themeName: Theme;\n  themePreference: ThemePreference;\n  setTheme(newTheme: string): void;\n};\n\nconst initialValues: ThemeProviderType = {\n  themeName: defaultThemeName,\n  themePreference: defaultThemeName,\n  setTheme: () => {},\n};\n\nconst ApsaraThemeContext = createContext<ThemeProviderType>(initialValues);\nApsaraThemeContext.displayName = \"ApsaraThemeContext \";\n\nconst useTheme = (): ThemeProviderType => {\n  const [themePreference, setThemePreference] =\n    useState<ThemePreference>(defaultThemeName);\n  const [themeName, setThemeName] = useState<Theme>(defaultThemeName);\n  const [osTheme, setOsTheme] = useState<MediaTheme | null>(getMediaTheme());\n\n  // in the future this should prefer auto if no saved\n  useEffect(() => {\n    const initialTheme = getSavedThemePreference();\n    if (isValidThemePreference(initialTheme)) {\n      setThemePreference(initialTheme);\n    } else {\n      setThemePreference(defaultThemeName);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (themePreference == \"auto\") {\n      setThemeName(osTheme ?? defaultThemeName);\n    } else {\n      setThemeName(themePreference);\n    }\n  }, [themePreference]);\n\n  useEffect(() => {\n    // if os theme changes and we are in auto mode, change up\n    if (themePreference == \"auto\") {\n      setThemeName(osTheme ?? defaultThemeName);\n    }\n  }, [osTheme]);\n\n  useEffect(() => {\n    const html = document.documentElement;\n    for (const k of [\"dark\", \"light\"]) {\n      html.classList.remove(k);\n    }\n    html.classList.add(themeName);\n  }, [themeName]);\n\n  listenForOSPreferenceChanges((osPref) => {\n    if (osPref === osTheme) return;\n    setOsTheme(osPref);\n  });\n\n  return {\n    themeName,\n    themePreference: themePreference,\n    setTheme: (newTheme: ThemePreference) => {\n      setThemePreference(newTheme);\n      saveThemePreference(newTheme);\n    },\n  };\n};\n\nconst ApsaraThemeProvider = ({ children }: { children: React.ReactNode }) => {\n  const { themePreference, setTheme, themeName } = useTheme();\n  return (\n    <ApsaraThemeContext.Provider\n      value={{\n        themeName,\n        themePreference,\n        setTheme,\n      }}\n    >\n      {children}\n    </ApsaraThemeContext.Provider>\n  );\n};\n\nexport function useApsaraTheme() {\n  const context = useContext(ApsaraThemeContext);\n\n  if (!context) {\n    throw new Error(\n      \"[Apsara UI 2.0]: useApsaraTheme must be used within a ApsaraThemeProvider\"\n    );\n  }\n\n  const { themePreference, setTheme, themeName } = context;\n  return { themePreference, setTheme, themeName };\n}\n\nexport { ApsaraThemeContext, ApsaraThemeProvider };\n"],"names":["React","_jsx"],"mappings":"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"}

package/dist/themprovider/useTheme.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+var Theme;
+(function (Theme) {
+    Theme["LIGHT"] = "light";
+    Theme["DARK"] = "dark";
+})(Theme || (Theme = {}));
+const KEY = "mode";
+const defaultContextData = {
+    dark: false,
+    toggleDark: () => { },
+};
+const ThemeContext = React.createContext(defaultContextData);
+const useTheme = () => React.useContext(ThemeContext);
+const storage = {
+    get: (init) => window.localStorage.getItem(KEY) || init,
+    set: (value) => window.localStorage.setItem(KEY, value),
+};
+const supportsDarkMode = () => window.matchMedia("(prefers-color-scheme: dark)").matches === true;
+const useDarkMode = () => {
+    const [themeState, setThemeState] = React.useState(Theme.LIGHT);
+    const setThemeStateEnhanced = (themeValue) => {
+        setThemeState((prevState) => {
+            const nextState = themeValue
+                ? themeValue
+                : prevState === Theme.LIGHT
+                    ? Theme.DARK
+                    : Theme.LIGHT;
+            document.body.classList.remove("apsara-" + prevState);
+            document.body.classList.add("apsara-" + nextState);
+            document.documentElement.style.setProperty("color-scheme", nextState);
+            storage.set(nextState);
+            return nextState;
+        });
+    };
+    React.useEffect(() => {
+        const storedMode = storage.get();
+        if (!storedMode && supportsDarkMode()) {
+            return setThemeStateEnhanced(Theme.DARK);
+        }
+        if (!storedMode || storedMode === themeState) {
+            return;
+        }
+        setThemeStateEnhanced();
+    }, [themeState]);
+    return [themeState, setThemeStateEnhanced];
+};
+const ThemeProvider = (props) => {
+    const { children } = props;
+    const [themeState, setThemeStateEnhanced] = useDarkMode();
+    const toggleDark = React.useCallback(() => {
+        console.log("sds");
+        setThemeStateEnhanced();
+    }, [setThemeStateEnhanced]);
+    React.useEffect(() => {
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", (e) => {
+            setThemeStateEnhanced(e.matches ? Theme.DARK : Theme.LIGHT);
+        });
+    }, [setThemeStateEnhanced, toggleDark]);
+    return (jsxRuntime.jsx(ThemeContext.Provider, { value: {
+            dark: themeState === Theme.DARK,
+            toggleDark,
+        }, children: children }));
+};
+
+exports.ThemeContext = ThemeContext;
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+//# sourceMappingURL=useTheme.cjs.map

package/dist/themprovider/useTheme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.cjs","sources":["../../../themprovider/useTheme.tsx"],"sourcesContent":["import React from \"react\";\n\nenum Theme {\n  LIGHT = \"light\",\n  DARK = \"dark\",\n}\n\nconst KEY = \"mode\";\n\nconst defaultContextData = {\n  dark: false,\n  toggleDark: () => {},\n};\n\nexport const ThemeContext = React.createContext(defaultContextData);\n\nconst useTheme = () => React.useContext(ThemeContext);\n\nconst storage = {\n  get: (init?: Theme) => window.localStorage.getItem(KEY) || init,\n  set: (value: Theme) => window.localStorage.setItem(KEY, value),\n};\n\nconst supportsDarkMode = () =>\n  window.matchMedia(\"(prefers-color-scheme: dark)\").matches === true;\n\nconst useDarkMode = (): [Theme, (theme?: Theme) => void] => {\n  const [themeState, setThemeState] = React.useState(Theme.LIGHT);\n\n  const setThemeStateEnhanced = (themeValue?: Theme) => {\n    setThemeState((prevState) => {\n      const nextState = themeValue\n        ? themeValue\n        : prevState === Theme.LIGHT\n        ? Theme.DARK\n        : Theme.LIGHT;\n\n      document.body.classList.remove(\"apsara-\" + prevState);\n      document.body.classList.add(\"apsara-\" + nextState);\n      document.documentElement.style.setProperty(\"color-scheme\", nextState);\n      storage.set(nextState);\n\n      return nextState;\n    });\n  };\n\n  React.useEffect(() => {\n    const storedMode = storage.get();\n    if (!storedMode && supportsDarkMode()) {\n      return setThemeStateEnhanced(Theme.DARK);\n    }\n\n    if (!storedMode || storedMode === themeState) {\n      return;\n    }\n\n    setThemeStateEnhanced();\n  }, [themeState]);\n\n  return [themeState, setThemeStateEnhanced];\n};\n\nconst ThemeProvider = (props: { children: React.ReactNode }) => {\n  const { children } = props;\n  const [themeState, setThemeStateEnhanced] = useDarkMode();\n  const toggleDark = React.useCallback(() => {\n    console.log(\"sds\");\n    setThemeStateEnhanced();\n  }, [setThemeStateEnhanced]);\n\n  React.useEffect(() => {\n    window\n      .matchMedia(\"(prefers-color-scheme: dark)\")\n      .addEventListener(\"change\", (e) => {\n        setThemeStateEnhanced(e.matches ? Theme.DARK : Theme.LIGHT);\n      });\n  }, [setThemeStateEnhanced, toggleDark]);\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        dark: themeState === Theme.DARK,\n        toggleDark,\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n\nexport { ThemeProvider, useTheme };\n"],"names":["_jsx"],"mappings":"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"}

package/dist/themprovider/useTheme.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export declare const ThemeContext: React.Context<{
+    dark: boolean;
+    toggleDark: () => void;
+}>;
+declare const useTheme: () => {
+    dark: boolean;
+    toggleDark: () => void;
+};
+declare const ThemeProvider: (props: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export { ThemeProvider, useTheme };
+//# sourceMappingURL=useTheme.d.ts.map

package/dist/themprovider/useTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../themprovider/useTheme.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,eAAO,MAAM,YAAY;;;EAA0C,CAAC;AAEpE,QAAA,MAAM,QAAQ;;;CAAuC,CAAC;AA8CtD,QAAA,MAAM,aAAa,UAAW;IAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;CAAE,4CA0B1D,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC"}

package/dist/themprovider/useTheme.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+
+var Theme;
+(function (Theme) {
+    Theme["LIGHT"] = "light";
+    Theme["DARK"] = "dark";
+})(Theme || (Theme = {}));
+const KEY = "mode";
+const defaultContextData = {
+    dark: false,
+    toggleDark: () => { },
+};
+const ThemeContext = React__default.createContext(defaultContextData);
+const useTheme = () => React__default.useContext(ThemeContext);
+const storage = {
+    get: (init) => window.localStorage.getItem(KEY) || init,
+    set: (value) => window.localStorage.setItem(KEY, value),
+};
+const supportsDarkMode = () => window.matchMedia("(prefers-color-scheme: dark)").matches === true;
+const useDarkMode = () => {
+    const [themeState, setThemeState] = React__default.useState(Theme.LIGHT);
+    const setThemeStateEnhanced = (themeValue) => {
+        setThemeState((prevState) => {
+            const nextState = themeValue
+                ? themeValue
+                : prevState === Theme.LIGHT
+                    ? Theme.DARK
+                    : Theme.LIGHT;
+            document.body.classList.remove("apsara-" + prevState);
+            document.body.classList.add("apsara-" + nextState);
+            document.documentElement.style.setProperty("color-scheme", nextState);
+            storage.set(nextState);
+            return nextState;
+        });
+    };
+    React__default.useEffect(() => {
+        const storedMode = storage.get();
+        if (!storedMode && supportsDarkMode()) {
+            return setThemeStateEnhanced(Theme.DARK);
+        }
+        if (!storedMode || storedMode === themeState) {
+            return;
+        }
+        setThemeStateEnhanced();
+    }, [themeState]);
+    return [themeState, setThemeStateEnhanced];
+};
+const ThemeProvider = (props) => {
+    const { children } = props;
+    const [themeState, setThemeStateEnhanced] = useDarkMode();
+    const toggleDark = React__default.useCallback(() => {
+        console.log("sds");
+        setThemeStateEnhanced();
+    }, [setThemeStateEnhanced]);
+    React__default.useEffect(() => {
+        window
+            .matchMedia("(prefers-color-scheme: dark)")
+            .addEventListener("change", (e) => {
+            setThemeStateEnhanced(e.matches ? Theme.DARK : Theme.LIGHT);
+        });
+    }, [setThemeStateEnhanced, toggleDark]);
+    return (jsx(ThemeContext.Provider, { value: {
+            dark: themeState === Theme.DARK,
+            toggleDark,
+        }, children: children }));
+};
+
+export { ThemeContext, ThemeProvider, useTheme };
+//# sourceMappingURL=useTheme.js.map

package/dist/themprovider/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sources":["../../../themprovider/useTheme.tsx"],"sourcesContent":["import React from \"react\";\n\nenum Theme {\n  LIGHT = \"light\",\n  DARK = \"dark\",\n}\n\nconst KEY = \"mode\";\n\nconst defaultContextData = {\n  dark: false,\n  toggleDark: () => {},\n};\n\nexport const ThemeContext = React.createContext(defaultContextData);\n\nconst useTheme = () => React.useContext(ThemeContext);\n\nconst storage = {\n  get: (init?: Theme) => window.localStorage.getItem(KEY) || init,\n  set: (value: Theme) => window.localStorage.setItem(KEY, value),\n};\n\nconst supportsDarkMode = () =>\n  window.matchMedia(\"(prefers-color-scheme: dark)\").matches === true;\n\nconst useDarkMode = (): [Theme, (theme?: Theme) => void] => {\n  const [themeState, setThemeState] = React.useState(Theme.LIGHT);\n\n  const setThemeStateEnhanced = (themeValue?: Theme) => {\n    setThemeState((prevState) => {\n      const nextState = themeValue\n        ? themeValue\n        : prevState === Theme.LIGHT\n        ? Theme.DARK\n        : Theme.LIGHT;\n\n      document.body.classList.remove(\"apsara-\" + prevState);\n      document.body.classList.add(\"apsara-\" + nextState);\n      document.documentElement.style.setProperty(\"color-scheme\", nextState);\n      storage.set(nextState);\n\n      return nextState;\n    });\n  };\n\n  React.useEffect(() => {\n    const storedMode = storage.get();\n    if (!storedMode && supportsDarkMode()) {\n      return setThemeStateEnhanced(Theme.DARK);\n    }\n\n    if (!storedMode || storedMode === themeState) {\n      return;\n    }\n\n    setThemeStateEnhanced();\n  }, [themeState]);\n\n  return [themeState, setThemeStateEnhanced];\n};\n\nconst ThemeProvider = (props: { children: React.ReactNode }) => {\n  const { children } = props;\n  const [themeState, setThemeStateEnhanced] = useDarkMode();\n  const toggleDark = React.useCallback(() => {\n    console.log(\"sds\");\n    setThemeStateEnhanced();\n  }, [setThemeStateEnhanced]);\n\n  React.useEffect(() => {\n    window\n      .matchMedia(\"(prefers-color-scheme: dark)\")\n      .addEventListener(\"change\", (e) => {\n        setThemeStateEnhanced(e.matches ? Theme.DARK : Theme.LIGHT);\n      });\n  }, [setThemeStateEnhanced, toggleDark]);\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        dark: themeState === Theme.DARK,\n        toggleDark,\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n\nexport { ThemeProvider, useTheme };\n"],"names":["React","_jsx"],"mappings":"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"}

package/dist/title/index.d.ts

@@ -0,0 +1,2 @@
+export { Title } from "./title";
+//# sourceMappingURL=index.d.ts.map

package/dist/title/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../title/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/title/title.cjs

@@ -0,0 +1,24 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var title_module = require('./title.module.css.cjs');
+
+const title = classVarianceAuthority.cva(title_module.title, {
+    variants: {
+        size: {
+            small: title_module["title-small"],
+            medium: title_module["title-medium"],
+            large: title_module["title-large"],
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
+function Title({ children, className, size, ...props }) {
+    return (jsxRuntime.jsx("span", { className: title({ size, className }), ...props, children: children }));
+}
+
+exports.Title = Title;
+//# sourceMappingURL=title.cjs.map

package/dist/title/title.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.cjs","sources":["../../../title/title.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { HTMLAttributes, PropsWithChildren } from \"react\";\nimport styles from \"./title.module.css\";\n\nconst title = cva(styles.title, {\n  variants: {\n    size: {\n      small: styles[\"title-small\"],\n      medium: styles[\"title-medium\"],\n      large: styles[\"title-large\"],\n    },\n  },\n  defaultVariants: {\n    size: \"small\",\n  },\n});\n\ntype TitleProps = PropsWithChildren<VariantProps<typeof title>> &\n  HTMLAttributes<HTMLSpanElement>;\n\nexport function Title({ children, className, size, ...props }: TitleProps) {\n  return (\n    <span className={title({ size, className })} {...props}>\n      {children}\n    </span>\n  );\n}\n"],"names":["cva","styles","_jsx"],"mappings":";;;;;;AAIA,MAAM,KAAK,GAAGA,0BAAG,CAACC,YAAM,CAAC,KAAK,EAAE;AAC9B,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,YAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,MAAM,EAAEA,YAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,KAAK,EAAEA,YAAM,CAAC,aAAa,CAAC;AAC7B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAKa,SAAA,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAc,EAAA;AACvE,IAAA,QACEC,cAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAM,GAAA,KAAK,YACnD,QAAQ,EAAA,CACJ,EACP;AACJ;;;;"}

package/dist/title/title.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from "class-variance-authority";
+import { HTMLAttributes, PropsWithChildren } from "react";
+declare const title: (props?: ({
+    size?: "small" | "medium" | "large" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare type TitleProps = PropsWithChildren<VariantProps<typeof title>> & HTMLAttributes<HTMLSpanElement>;
+export declare function Title({ children, className, size, ...props }: TitleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=title.d.ts.map

package/dist/title/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","sourceRoot":"","sources":["../../title/title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1D,QAAA,MAAM,KAAK;;mFAWT,CAAC;AAEH,aAAK,UAAU,GAAG,iBAAiB,CAAC,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC,GAC7D,cAAc,CAAC,eAAe,CAAC,CAAC;AAElC,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAMxE"}

package/dist/title/title.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import styles from './title.module.css.js';
+
+const title = cva(styles.title, {
+    variants: {
+        size: {
+            small: styles["title-small"],
+            medium: styles["title-medium"],
+            large: styles["title-large"],
+        },
+    },
+    defaultVariants: {
+        size: "small",
+    },
+});
+function Title({ children, className, size, ...props }) {
+    return (jsx("span", { className: title({ size, className }), ...props, children: children }));
+}
+
+export { Title };
+//# sourceMappingURL=title.js.map

package/dist/title/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","sources":["../../../title/title.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { HTMLAttributes, PropsWithChildren } from \"react\";\nimport styles from \"./title.module.css\";\n\nconst title = cva(styles.title, {\n  variants: {\n    size: {\n      small: styles[\"title-small\"],\n      medium: styles[\"title-medium\"],\n      large: styles[\"title-large\"],\n    },\n  },\n  defaultVariants: {\n    size: \"small\",\n  },\n});\n\ntype TitleProps = PropsWithChildren<VariantProps<typeof title>> &\n  HTMLAttributes<HTMLSpanElement>;\n\nexport function Title({ children, className, size, ...props }: TitleProps) {\n  return (\n    <span className={title({ size, className })} {...props}>\n      {children}\n    </span>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;AAIA,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE;AAC9B,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC;AAC5B,YAAA,MAAM,EAAE,MAAM,CAAC,cAAc,CAAC;AAC9B,YAAA,KAAK,EAAE,MAAM,CAAC,aAAa,CAAC;AAC7B,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,OAAO;AACd,KAAA;AACF,CAAA,CAAC,CAAC;AAKa,SAAA,KAAK,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,EAAc,EAAA;AACvE,IAAA,QACEA,GAAM,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,KAAK,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,EAAM,GAAA,KAAK,YACnD,QAAQ,EAAA,CACJ,EACP;AACJ;;;;"}

package/dist/title/title.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {"title":"title-module_title__r78X4","title-small":"title-module_title-small__aS4B3","title-medium":"title-module_title-medium__e8yQc","title-large":"title-module_title-large__TVRRL"};
+
+module.exports = styles;
+//# sourceMappingURL=title.module.css.cjs.map

package/dist/title/title.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/title/title.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"title":"title-module_title__r78X4","title-small":"title-module_title-small__aS4B3","title-medium":"title-module_title-medium__e8yQc","title-large":"title-module_title-large__TVRRL"};
+
+export { styles as default };
+//# sourceMappingURL=title.module.css.js.map

package/dist/title/title.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@raystack/apsara",
+  "version": "0.0.0",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "engines": {
+    "node": "14.21.3"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "rollup --config",
+    "dev": "rollup --config --watch",
+    "lint": "eslint \"**/*.ts*\"",
+    "publish": "npm run build && np",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@radix-ui/react-avatar": "^1.0.3",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.3",
+    "@radix-ui/react-select": "^1.2.2",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.1",
+    "@tanstack/match-sorter-utils": "^8.8.4",
+    "@tanstack/react-table": "^8.9.2",
+    "@tanstack/table-core": "^8.9.2",
+    "@types/react": "^18.2.12",
+    "class-variance-authority": "^0.6.0",
+    "cmdk": "^0.2.0",
+    "eslint-config-custom": "workspace:*",
+    "np": "^8.0.4",
+    "npm": "^9.7.1",
+    "parcel": "^2.9.2",
+    "postcss": "^8.4.24",
+    "postcss-modules": "^6.0.0",
+    "react": "^18.2.0",
+    "rollup": "^3.25.1",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tsconfig": "workspace:*",
+    "typescript": "4.7",
+    "usehooks-ts": "^2.9.1"
+  }
+}