@protonradio/proton-ui 0.11.0-beta.18 → 0.11.0-beta.2

package/README.md

@@ -1,153 +1,73 @@
-# ProtonUI
-
-![](./.readme.gif)
-
-```
-npm run storybook
-```
-
-## Installation
-
-### Prerequisites
-
-1. Ensure you have access to `@protonradio/proton-ui` [npm package](https://www.npmjs.com/package/@protonradio/proton-ui)
-2. Login using `npm login`
-
-### Install
-
-```bash
-npm install @protonradio/proton-ui --save
-```
-
-### Import Styles
-
-Import the styles into your main CSS file:
-
-```css
-@import "@protonradio/proton-ui/styles";
-```
-
-### Setup ThemeProvider
-
-Wrap your application with the `ThemeProvider` to enable theming:
-
-```jsx
-import { ThemeProvider, THEMES } from "@protonradio/proton-ui";
-
-function MyApp({ Component, pageProps }) {
-  return (
-    <ThemeProvider theme={THEMES.DARK}>
-      <Component {...pageProps} />
-    </ThemeProvider>
-  );
-}
-```
-
-### Custom Color Palettes
-
-Each theme has a `ProtonPalette` with colors tailored for UI design. Palettes are made up of `ProtonColorScale`s that have shades from super_light to super_dark:
-
-- **Primary Scale**
-- **Secondary Scale**
-- **Brand Colors** [Partial ProtonColorScale]
-- **Gray Scale**
-- **Semantic Colors**
-  - Success
-  - Warning
-  - Error
-
-When you pass a custom palette to the ThemeProvider, these five scales are updated with colors based on the background image you gave it. This is useful for designing UIs around individual releases, labels and artists. All generated scales are designed with accessibility in mind, ensuring proper contrast ratios and visual hierarchy.
-
-To generate a new palette, use the `usePalette` hook:
-
-```jsx
-import { ThemeProvider, usePalette, THEMES } from "@protonradio/proton-ui";
-
-function AppWithCustomPalette(props) {
-  const customPalette = usePalette(
-    `https://example.com/${props.imgUrl}.jpg`,
-    THEMES.DARK
-  );
-
-  return (
-    <ThemeProvider theme={THEMES.DARK} palette={customPalette}>
-      <YourApp />
-    </ThemeProvider>
-  );
-}
-```
-
-## Best Styling Practices
-
-Components use standardized _control_ variables defined in the theme config stylesheets for consistent styling across the design system:
-
-```typescript
-export interface ProtonStyleSheet {
-  "--proton-control__background-color": string;
-  "--proton-control__background-color-light": string;
-  "--proton-control__text-color": string;
-  "--proton-control__title-color": string;
-  "--proton-control__border-color": string;
-  "--proton-control__shadow-color": string;
-  // ... etc
-```
-
-These control variables unify the styling system while powering theme-specific CSS customization, and follow the pattern `--proton-control__{style}-{property}`:
-
-```css
-.myComponent {
-  background-color: var(--proton-control__background-color);
-}
-```
-
-For more advanced theme overrides we utilize the theme class names. The `ThemeProvider` applies the appropriate theme class to its container, making it available to all child components. Theme class names follow the pattern `proton-ui__theme--{themeName}`:
-
-```css
-.proton-ui__theme--dark .myComponent[active] {
-  background-color: var(--proton-control__interactive-color);
-}
-```
-
-Palettes can also be accessed in JSX via the `useTheme` hook for more advanced use cases:
-
-
-```jsx
-import { useTheme } from "@protonradio/proton-ui";
-
-function MyComponent() {
-  const { palette } = useTheme();
-
-  // Prefer CSS selectors over programmatic styling
-  return <Icon color={palette.BRAND.PRIMARY} />;
-}
-```
-
-## Publishing Updates to NPM
-
-We follow semantic versioning and use automated CI/CD for releases:
-
-**For Beta Releases (Testing):**
-
-```bash
-npm run build
-npm run publish-beta  # Automated versioning with beta tag
-```
-
-**For Production Releases:**
-
-```bash
-npm run build
-npm version <patch|minor|major>  # Semantic versioning
-npm publish
-```
-
-**Best Practices:**
-
-- Always publish beta releases first for testing across platforms
-- Test on all supported environments before production release
-- Use semantic versioning (patch for bug fixes, minor for features, major for breaking changes)
-- Our GitHub Actions [NPM Version](https://github.com/protonradio/proton-ui/actions/workflows/npm_release.yml) tool automatically handles versioning and deployment workflows
-
-## Recommended Reading
-
-- https://www.gabe.pizza/notes-on-component-libraries/
+# Proton UI
+
+![](./.readme.gif)
+
+```
+npm run storybook
+```
+
+### Publishing Updates to NPM
+
+```
+npm run build
+npm version <new_version>  // increment version in package.json accordingly using semver
+npm publish
+```
+
+### Themes
+
+This library supports themes for the various applications that use it. Ideally, we would unify our app designs, but until then themes is a way to support different design patterns using the same api.
+
+#### Adding a Theme
+
+The current supported themes can be found in the `src/themes/config.ts`. To add a new theme, create a new attribute on the `THEMES` object following the pattern `[themeName]: [themeClassName]`.
+
+#### Styling for a theme
+
+To apply theme specific styles in a component, we set theme specific css variables in the `src/themes/config.ts` file, in `generateThemeCssVariables` function. If you need more control, you can add either use the `useTheme` hook to manipulate the DOM, or you can use css selectors that reference the wrapping theme class.
+
+For example, to apply a style to the dark theme, you can use the following css.
+```css
+.proton-ui__theme--dark .myComponent {
+  background-color: red;
+}
+```
+
+### Implementing in your application
+
+#### Prerequisites
+
+1. Ensure you have access to Proton's `proton-ui` npm package
+2. Login to npm using `npm login`
+
+#### Install
+
+```
+npm install @protonradio/proton-ui --save
+```
+
+#### Import the styles
+Then import the styles into your main.css file.
+
+```css
+@import "@protonradio/proton-ui/styles";
+```
+
+#### Setup the theme provider
+When applying to a project, you can import available themes using `THEMES` from this library and apply the theme an outer div on the application. See below for an example.
+
+```jsx
+import { ThemeProvider, THEMES } from "@protonradio/proton-ui";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={THEMES.DARK}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}
+```
+
+### Recommended Reading
+
+- https://www.gabe.pizza/notes-on-component-libraries/

package/dist/constants.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./breakpoint-DtqbboOa.js"),t=require("./theme-Dc0Ahjq9.js"),e=["bottom","bottom left","bottom right","bottom start","bottom end","top","top left","top right","top start","top end","left","left top","left bottom","start","start top","start bottom","right","right top","right bottom","end","end top","end bottom"];exports.BREAKPOINTS=o.BREAKPOINTS;exports.THEMES=t.THEMES;exports.THEME_CLASSES=t.THEME_CLASSES;exports.placements=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./palettes-BX86v-qb.js"),o={DARK:"dark",CUSTOM_DARK:"custom-dark",LIGHT:"light"},e=["bottom","bottom left","bottom right","bottom start","bottom end","top","top left","top right","top start","top end","left","left top","left bottom","start","start top","start bottom","right","right top","right bottom","end","end top","end bottom"],r={SMALL:576,MEDIUM:768,LARGE:992,X_LARGE:1200};exports.COLORS=t.colors;exports.DARK_MODE=t.DARK_MODE;exports.DEFAULT_BLACK_BACKGROUND=t.DEFAULT_BLACK_BACKGROUND;exports.DEFAULT_WHITE_BACKGROUND=t.DEFAULT_WHITE_BACKGROUND;exports.LIGHT_MODE=t.LIGHT_MODE;exports.BREAKPOINTS=r;exports.THEMES=o;exports.placements=e;
 //# sourceMappingURL=constants.cjs.js.map

package/dist/constants.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs.js","sources":["../src/constants/placement.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\r\n\r\nexport const placements: Placement[] = [\r\n  \"bottom\",\r\n  \"bottom left\",\r\n  \"bottom right\",\r\n  \"bottom start\",\r\n  \"bottom end\",\r\n  \"top\",\r\n  \"top left\",\r\n  \"top right\",\r\n  \"top start\",\r\n  \"top end\",\r\n  \"left\",\r\n  \"left top\",\r\n  \"left bottom\",\r\n  \"start\",\r\n  \"start top\",\r\n  \"start bottom\",\r\n  \"right\",\r\n  \"right top\",\r\n  \"right bottom\",\r\n  \"end\",\r\n  \"end top\",\r\n  \"end bottom\",\r\n];\r\n"],"names":["placements"],"mappings":"6JAEaA,EAA0B,CACrC,SACA,cACA,eACA,eACA,aACA,MACA,WACA,YACA,YACA,UACA,OACA,WACA,cACA,QACA,YACA,eACA,QACA,YACA,eACA,MACA,UACA,YACF"}
+{"version":3,"file":"constants.cjs.js","sources":["../src/constants/index.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\n\nexport * as COLORS from \"./colors\";\n\nexport * from \"./palettes\";\n\nexport const THEMES = {\n  DARK: \"dark\",\n  CUSTOM_DARK: \"custom-dark\",\n  LIGHT: \"light\",\n} as const;\n\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\n\nexport const placements: Placement[] = [\n  \"bottom\",\n  \"bottom left\",\n  \"bottom right\",\n  \"bottom start\",\n  \"bottom end\",\n  \"top\",\n  \"top left\",\n  \"top right\",\n  \"top start\",\n  \"top end\",\n  \"left\",\n  \"left top\",\n  \"left bottom\",\n  \"start\",\n  \"start top\",\n  \"start bottom\",\n  \"right\",\n  \"right top\",\n  \"right bottom\",\n  \"end\",\n  \"end top\",\n  \"end bottom\",\n];\n\nexport const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["THEMES","placements","BREAKPOINTS"],"mappings":"0HAMaA,EAAS,CACpB,KAAM,OACN,YAAa,cACb,MAAO,OACT,EAIaC,EAA0B,CACrC,SACA,cACA,eACA,eACA,aACA,MACA,WACA,YACA,YACA,UACA,OACA,WACA,cACA,QACA,YACA,eACA,QACA,YACA,eACA,MACA,UACA,YACF,EAEaC,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}

package/dist/constants.d.ts

@@ -1,5 +1,11 @@
 import { Placement } from 'react-aria';
 
+declare const BRAND: {
+    PRIMARY: string;
+    PRIMARY_LIGHT: string;
+    SECONDARY: string;
+};
+
 export declare type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
 
 export declare const BREAKPOINTS: {
@@ -9,18 +15,155 @@ export declare const BREAKPOINTS: {
     X_LARGE: number;
 };
 
+export declare namespace COLORS {
+    export {
+        BRAND,
+        DANGER,
+        WARNING,
+        SUCCESS,
+        GRAYSCALE,
+        SECONDARY,
+        DARK_GRAYSCALE,
+        DARK_SECONDARY
+    }
+}
+
+declare const DANGER: {
+    SUPER_DARK: string;
+    DARK: string;
+    MEDIUM: string;
+    LIGHT: string;
+    SUPER_LIGHT: string;
+};
+
+declare const DARK_GRAYSCALE: {
+    GRAY_SUPER_DARK: string;
+    GRAY_DARK: string;
+    GRAY_MEDIUM: string;
+    GRAY_MEDIUM_LIGHT: string;
+    GRAY_LIGHT: string;
+    GRAY_LIGHTEST: string;
+    GRAY_SUPER_LIGHT: string;
+    WHITE: string;
+    BORDER: string;
+    ELEVATION: string;
+};
+
+export declare const DARK_MODE: Palette;
+
+declare const DARK_SECONDARY: {
+    SECONDARY_SUPER_DARK: string;
+    SECONDARY_DARK: string;
+    SECONDARY_MEDIUM: string;
+    SECONDARY_MEDIUM_LIGHT: string;
+    SECONDARY_LIGHT: string;
+    SECONDARY_LIGHTEST: string;
+    SECONDARY_SUPER_LIGHT: string;
+};
+
+export declare const DEFAULT_BLACK_BACKGROUND = "#121212";
+
+export declare const DEFAULT_WHITE_BACKGROUND = "#ffffff";
+
+declare const GRAYSCALE: {
+    GRAY_SUPER_DARK: string;
+    GRAY_DARK: string;
+    GRAY_MEDIUM: string;
+    GRAY_MEDIUM_LIGHT: string;
+    GRAY_LIGHT: string;
+    GRAY_LIGHTEST: string;
+    GRAY_SUPER_LIGHT: string;
+    WHITE: string;
+    BORDER: string;
+    ELEVATION: string;
+};
+
+export declare const LIGHT_MODE: Palette;
+
+export declare type Palette = {
+    BASE_COLOR: string;
+    BRAND: {
+        PRIMARY: string;
+        PRIMARY_LIGHT: string;
+        SECONDARY: string;
+    };
+    PRIMARY: {
+        PRIMARY_SUPER_DARK: string;
+        PRIMARY_DARK: string;
+        PRIMARY_MEDIUM: string;
+        PRIMARY_MEDIUM_LIGHT: string;
+        PRIMARY_LIGHT: string;
+        PRIMARY_LIGHTEST: string;
+        PRIMARY_SUPER_LIGHT: string;
+    };
+    SECONDARY: {
+        SECONDARY_SUPER_DARK: string;
+        SECONDARY_DARK: string;
+        SECONDARY_MEDIUM: string;
+        SECONDARY_MEDIUM_LIGHT: string;
+        SECONDARY_LIGHT: string;
+        SECONDARY_LIGHTEST: string;
+        SECONDARY_SUPER_LIGHT: string;
+    };
+    SUCCESS: {
+        SUCCESS_DARK: string;
+        SUCCESS_MEDIUM: string;
+        SUCCESS_LIGHT: string;
+        SUCCESS_SUPER_LIGHT: string;
+    };
+    WARNING: {
+        WARNING_DARK: string;
+        WARNING_MEDIUM: string;
+        WARNING_LIGHT: string;
+        WARNING_SUPER_LIGHT: string;
+    };
+    DANGER: {
+        DANGER_SUPER_DARK: string;
+        DANGER_DARK: string;
+        DANGER_MEDIUM: string;
+        DANGER_LIGHT: string;
+        DANGER_SUPER_LIGHT: string;
+    };
+};
+
 export declare const placements: Placement[];
 
-export declare type Theme = (typeof THEMES)[keyof typeof THEMES];
+declare const SECONDARY: {
+    SUPER_DARK: string;
+    DARK: string;
+    MEDIUM: string;
+    MEDIUM_LIGHT: string;
+    LIGHT: string;
+    LIGHTEST: string;
+    SUPER_LIGHT: string;
+    WHITE: string;
+};
 
-export declare const THEME_CLASSES: {
-    dark: string;
-    light: string;
+declare const SUCCESS: {
+    DARK: string;
+    MEDIUM: string;
+    LIGHT: string;
+    SUPER_LIGHT: string;
 };
 
+export declare type Theme = (typeof THEMES)[keyof typeof THEMES];
+
 export declare const THEMES: {
     readonly DARK: "dark";
+    readonly CUSTOM_DARK: "custom-dark";
     readonly LIGHT: "light";
 };
 
+declare const WARNING: {
+    DARK: string;
+    MEDIUM: string;
+    LIGHT: string;
+    SUPER_LIGHT: string;
+};
+
 export { }
+
+
+declare namespace ButtonGroup {
+    var Option: (props: ButtonGroupOptionProps) => import("react/jsx-runtime").JSX.Element;
+}

package/dist/constants.es.js

@@ -1,6 +1,9 @@
-import { B as r } from "./breakpoint-9y1_8U_b.mjs";
-import { T as m, a } from "./theme-DQsfWeLo.mjs";
-const t = [
+import { c as e, b as m, a as p, D as A, L as D } from "./palettes-mcF0lNKY.mjs";
+const t = {
+  DARK: "dark",
+  CUSTOM_DARK: "custom-dark",
+  LIGHT: "light"
+}, o = [
   "bottom",
   "bottom left",
   "bottom right",
@@ -23,11 +26,20 @@ const t = [
   "end",
   "end top",
   "end bottom"
-];
+], r = {
+  SMALL: 576,
+  MEDIUM: 768,
+  LARGE: 992,
+  X_LARGE: 1200
+};
 export {
   r as BREAKPOINTS,
-  m as THEMES,
-  a as THEME_CLASSES,
-  t as placements
+  e as COLORS,
+  m as DARK_MODE,
+  p as DEFAULT_BLACK_BACKGROUND,
+  A as DEFAULT_WHITE_BACKGROUND,
+  D as LIGHT_MODE,
+  t as THEMES,
+  o as placements
 };
 //# sourceMappingURL=constants.es.js.map

package/dist/constants.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.es.js","sources":["../src/constants/placement.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\r\n\r\nexport const placements: Placement[] = [\r\n  \"bottom\",\r\n  \"bottom left\",\r\n  \"bottom right\",\r\n  \"bottom start\",\r\n  \"bottom end\",\r\n  \"top\",\r\n  \"top left\",\r\n  \"top right\",\r\n  \"top start\",\r\n  \"top end\",\r\n  \"left\",\r\n  \"left top\",\r\n  \"left bottom\",\r\n  \"start\",\r\n  \"start top\",\r\n  \"start bottom\",\r\n  \"right\",\r\n  \"right top\",\r\n  \"right bottom\",\r\n  \"end\",\r\n  \"end top\",\r\n  \"end bottom\",\r\n];\r\n"],"names":["placements"],"mappings":";;AAEO,MAAMA,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"constants.es.js","sources":["../src/constants/index.ts"],"sourcesContent":["import { Placement } from \"react-aria\";\n\nexport * as COLORS from \"./colors\";\n\nexport * from \"./palettes\";\n\nexport const THEMES = {\n  DARK: \"dark\",\n  CUSTOM_DARK: \"custom-dark\",\n  LIGHT: \"light\",\n} as const;\n\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\n\nexport const placements: Placement[] = [\n  \"bottom\",\n  \"bottom left\",\n  \"bottom right\",\n  \"bottom start\",\n  \"bottom end\",\n  \"top\",\n  \"top left\",\n  \"top right\",\n  \"top start\",\n  \"top end\",\n  \"left\",\n  \"left top\",\n  \"left bottom\",\n  \"start\",\n  \"start top\",\n  \"start bottom\",\n  \"right\",\n  \"right top\",\n  \"right bottom\",\n  \"end\",\n  \"end top\",\n  \"end bottom\",\n];\n\nexport const BREAKPOINTS = {\n  SMALL: 576,\n  MEDIUM: 768,\n  LARGE: 992,\n  X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["THEMES","placements","BREAKPOINTS"],"mappings":";AAMO,MAAMA,IAAS;AAAA,EACpB,MAAM;AAAA,EACN,aAAa;AAAA,EACb,OAAO;AACT,GAIaC,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}

package/dist/hooks.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./useBreakpoint-DA-JqOu3.js"),t=require("./darkTheme-ann6VTfq.js"),s=require("react"),i=require("./image-BlhKzTx8.js"),T=require("./theme-Dc0Ahjq9.js"),P=(e,a)=>{const[l,o]=s.useState(t.LIGHT_PALETTE),c=s.useCallback(async()=>{if(!e)return t.LIGHT_PALETTE;try{const r=await i.getDominantColor(e);return i.generatePalette(r)}catch(r){return console.error("Failed to generate palette:",r),t.LIGHT_PALETTE}},[e]);return s.useEffect(()=>{(async()=>{if(e){const u=await c();o(u);return}if(a===T.THEMES.DARK){o(t.DARK_PALETTE);return}o(t.LIGHT_PALETTE)})()},[e,a,c]),s.useMemo(()=>l,[l])};exports.useBreakpoint=n.useBreakpoint;exports.useIsClosing=n.useIsClosing;exports.useLockBodyScroll=n.useLockBodyScroll;exports.usePalette=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useBreakpoint-DA-JqOu3.js");exports.useBreakpoint=e.useBreakpoint;exports.useIsClosing=e.useIsClosing;exports.useLockBodyScroll=e.useLockBodyScroll;
 //# sourceMappingURL=hooks.cjs.js.map

package/dist/hooks.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.cjs.js","sources":["../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../constants\";\r\nimport { DARK_PALETTE } from \"../design/darkTheme\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme\";\r\nimport { generatePalette, getDominantColor } from \"../utils\";\r\nimport { ProtonPalette } from \"../design/types\";\r\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n/**\r\n * Generates a palette based on a background image or theme.\r\n * @param backgroundImage - The URL of the background image to generate a palette from.\r\n * @param theme - The theme to generate a palette for.\r\n * @returns A Palette object containing the generated palette.\r\n */\r\nexport const usePalette = (\r\n  backgroundImage: HTMLImageElement | string | null,\r\n  theme: string\r\n): ProtonPalette => {\r\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\r\n\r\n  const getPalette = useCallback(async () => {\r\n    if (!backgroundImage) return LIGHT_PALETTE;\r\n\r\n    try {\r\n      const baseColor = await getDominantColor(\r\n        backgroundImage as HTMLImageElement & string\r\n      );\r\n      const newPalette = generatePalette(baseColor);\r\n\r\n      return newPalette;\r\n    } catch (error) {\r\n      console.error(\"Failed to generate palette:\", error);\r\n      return LIGHT_PALETTE;\r\n    }\r\n  }, [backgroundImage]);\r\n\r\n  useEffect(() => {\r\n    const fetchPalette = async () => {\r\n      if (backgroundImage) {\r\n        const newPalette = await getPalette();\r\n        setPalette(newPalette);\r\n        return;\r\n      }\r\n\r\n      if (theme === THEMES.DARK) {\r\n        setPalette(DARK_PALETTE);\r\n        return;\r\n      }\r\n\r\n      setPalette(LIGHT_PALETTE);\r\n    };\r\n\r\n    fetchPalette();\r\n  }, [backgroundImage, theme, getPalette]);\r\n\r\n  return useMemo(() => palette, [palette]);\r\n};\r\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":"yPAaaA,EAAa,CACxBC,EACAC,IACkB,CAClB,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAwBC,EAAa,aAAA,EAE7DC,EAAaC,EAAAA,YAAY,SAAY,CACrC,GAAA,CAACP,EAAwB,OAAAK,gBAEzB,GAAA,CACF,MAAMG,EAAY,MAAMC,EAAA,iBACtBT,CAAA,EAIK,OAFYU,kBAAgBF,CAAS,QAGrCG,EAAO,CACN,eAAA,MAAM,8BAA+BA,CAAK,EAC3CN,eACT,CAAA,EACC,CAACL,CAAe,CAAC,EAEpBY,OAAAA,EAAAA,UAAU,IAAM,EACO,SAAY,CAC/B,GAAIZ,EAAiB,CACb,MAAAa,EAAa,MAAMP,IACzBH,EAAWU,CAAU,EACrB,MACF,CAEI,GAAAZ,IAAUa,SAAO,KAAM,CACzBX,EAAWY,EAAY,YAAA,EACvB,MACF,CAEAZ,EAAWE,EAAa,aAAA,CAAA,IAIzB,EAAA,CAACL,EAAiBC,EAAOK,CAAU,CAAC,EAEhCU,EAAQ,QAAA,IAAMd,EAAS,CAACA,CAAO,CAAC,CACzC"}
+{"version":3,"file":"hooks.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/hooks.d.ts

@@ -11,32 +11,6 @@ declare const BREAKPOINTS: {
     X_LARGE: number;
 };
 
-declare type ProtonColorScale = {
-    SUPER_DARK: string;
-    DARK: string;
-    MEDIUM: string;
-    MEDIUM_LIGHT: string;
-    LIGHT: string;
-    LIGHTEST: string;
-    SUPER_LIGHT: string;
-    WHITE: string;
-};
-
-declare type ProtonPalette = {
-    BASE_COLOR: string;
-    BRAND: {
-        PRIMARY: string;
-        PRIMARY_LIGHT: string;
-        PRIMARY_SUPER_LIGHT: string;
-        SECONDARY: string;
-        SECONDARY_LIGHT: string;
-        SECONDARY_SUPER_LIGHT: string;
-    };
-    PRIMARY: ProtonColorScale;
-    SECONDARY: ProtonColorScale;
-    GRAYSCALE: ProtonColorScale;
-};
-
 export declare function useBreakpoint(breakpoint: Breakpoint, direction?: BreakpointDirection): boolean;
 
 /**
@@ -71,12 +45,9 @@ declare interface UseIsClosingOptions {
  */
 export declare function useLockBodyScroll(isActive?: boolean): void;
 
-/**
- * Generates a palette based on a background image or theme.
- * @param backgroundImage - The URL of the background image to generate a palette from.
- * @param theme - The theme to generate a palette for.
- * @returns A Palette object containing the generated palette.
- */
-export declare const usePalette: (backgroundImage: HTMLImageElement | string | null, theme: string) => ProtonPalette;
-
 export { }
+
+
+declare namespace ButtonGroup {
+    var Option: (props: ButtonGroupOptionProps) => import("react/jsx-runtime").JSX.Element;
+}

package/dist/hooks.es.js

@@ -1,39 +1,7 @@
-import { b as S, a as h, u as x } from "./useBreakpoint-CjRyGKN-.mjs";
-import { L as r, D as c } from "./darkTheme-DUWn6YJ-.mjs";
-import { useState as i, useCallback as f, useEffect as u, useMemo as P } from "react";
-import { a as p, g as E } from "./image-C8M6y5Op.mjs";
-import { T } from "./theme-DQsfWeLo.mjs";
-const A = (t, s) => {
-  const [a, o] = i(r), n = f(async () => {
-    if (!t) return r;
-    try {
-      const e = await p(
-        t
-      );
-      return E(e);
-    } catch (e) {
-      return console.error("Failed to generate palette:", e), r;
-    }
-  }, [t]);
-  return u(() => {
-    (async () => {
-      if (t) {
-        const l = await n();
-        o(l);
-        return;
-      }
-      if (s === T.DARK) {
-        o(c);
-        return;
-      }
-      o(r);
-    })();
-  }, [t, s, n]), P(() => a, [a]);
-};
+import { b as a, a as e, u as r } from "./useBreakpoint-CjRyGKN-.mjs";
 export {
-  S as useBreakpoint,
-  h as useIsClosing,
-  x as useLockBodyScroll,
-  A as usePalette
+  a as useBreakpoint,
+  e as useIsClosing,
+  r as useLockBodyScroll
 };
 //# sourceMappingURL=hooks.es.js.map

package/dist/hooks.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.es.js","sources":["../src/hooks/usePalette.tsx"],"sourcesContent":["import { THEMES } from \"../constants\";\r\nimport { DARK_PALETTE } from \"../design/darkTheme\";\r\nimport { LIGHT_PALETTE } from \"../design/lightTheme\";\r\nimport { generatePalette, getDominantColor } from \"../utils\";\r\nimport { ProtonPalette } from \"../design/types\";\r\nimport { useEffect, useState, useCallback, useMemo } from \"react\";\r\n\r\n/**\r\n * Generates a palette based on a background image or theme.\r\n * @param backgroundImage - The URL of the background image to generate a palette from.\r\n * @param theme - The theme to generate a palette for.\r\n * @returns A Palette object containing the generated palette.\r\n */\r\nexport const usePalette = (\r\n  backgroundImage: HTMLImageElement | string | null,\r\n  theme: string\r\n): ProtonPalette => {\r\n  const [palette, setPalette] = useState<ProtonPalette>(LIGHT_PALETTE);\r\n\r\n  const getPalette = useCallback(async () => {\r\n    if (!backgroundImage) return LIGHT_PALETTE;\r\n\r\n    try {\r\n      const baseColor = await getDominantColor(\r\n        backgroundImage as HTMLImageElement & string\r\n      );\r\n      const newPalette = generatePalette(baseColor);\r\n\r\n      return newPalette;\r\n    } catch (error) {\r\n      console.error(\"Failed to generate palette:\", error);\r\n      return LIGHT_PALETTE;\r\n    }\r\n  }, [backgroundImage]);\r\n\r\n  useEffect(() => {\r\n    const fetchPalette = async () => {\r\n      if (backgroundImage) {\r\n        const newPalette = await getPalette();\r\n        setPalette(newPalette);\r\n        return;\r\n      }\r\n\r\n      if (theme === THEMES.DARK) {\r\n        setPalette(DARK_PALETTE);\r\n        return;\r\n      }\r\n\r\n      setPalette(LIGHT_PALETTE);\r\n    };\r\n\r\n    fetchPalette();\r\n  }, [backgroundImage, theme, getPalette]);\r\n\r\n  return useMemo(() => palette, [palette]);\r\n};\r\n"],"names":["usePalette","backgroundImage","theme","palette","setPalette","useState","LIGHT_PALETTE","getPalette","useCallback","baseColor","getDominantColor","generatePalette","error","useEffect","newPalette","THEMES","DARK_PALETTE","useMemo"],"mappings":";;;;;AAaa,MAAAA,IAAa,CACxBC,GACAC,MACkB;AAClB,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAwBC,CAAa,GAE7DC,IAAaC,EAAY,YAAY;AACrC,QAAA,CAACP,EAAwB,QAAAK;AAEzB,QAAA;AACF,YAAMG,IAAY,MAAMC;AAAA,QACtBT;AAAA,MAAA;AAIK,aAFYU,EAAgBF,CAAS;AAAA,aAGrCG,GAAO;AACN,qBAAA,MAAM,+BAA+BA,CAAK,GAC3CN;AAAA,IACT;AAAA,EAAA,GACC,CAACL,CAAe,CAAC;AAEpB,SAAAY,EAAU,MAAM;AAgBD,KAfQ,YAAY;AAC/B,UAAIZ,GAAiB;AACb,cAAAa,IAAa,MAAMP;AACzB,QAAAH,EAAWU,CAAU;AACrB;AAAA,MACF;AAEI,UAAAZ,MAAUa,EAAO,MAAM;AACzB,QAAAX,EAAWY,CAAY;AACvB;AAAA,MACF;AAEA,MAAAZ,EAAWE,CAAa;AAAA,IAAA;EAIzB,GAAA,CAACL,GAAiBC,GAAOK,CAAU,CAAC,GAEhCU,EAAQ,MAAMd,GAAS,CAACA,CAAO,CAAC;AACzC;"}
+{"version":3,"file":"hooks.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/icons.svg

@@ -1,11 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-  <defs>
-    <symbol id="external-link" viewBox="0 0 512 512">
-      <path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
-    </symbol>
-
-    <symbol id="caret-down" viewBox="0 0 512 512">
-      <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
-    </symbol>
-  </defs>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <symbol id="external-link" viewBox="0 0 512 512">
+      <path d="M384 224v184a40 40 0 01-40 40H104a40 40 0 01-40-40V168a40 40 0 0140-40h167.48M336 64h112v112M224 288L440 72" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+    </symbol>
+
+    <symbol id="caret-down" viewBox="0 0 512 512">
+      <path fill="currentColor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7L86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/>
+    </symbol>
+  </defs>
 </svg>