@protonradio/proton-ui 0.11.0-beta.19 → 0.11.0-beta.20

package/README.md

@@ -1,4 +1,4 @@
-# ProtonUI
+# Proton UI
 
 ![](./.readme.gif)
 
@@ -6,148 +6,68 @@
 npm run storybook
 ```
 
-## Installation
+### Publishing Updates to NPM
 
-### 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>
-  );
-}
+npm run build
+npm version <new_version>  // increment version in package.json accordingly using semver
+npm publish
 ```
 
-### 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:
+### Themes
 
-- **Primary Scale**
-- **Secondary Scale**
-- **Brand Colors** [Partial ProtonColorScale]
-- **Gray Scale**
-- **Semantic Colors**
-  - Success
-  - Warning
-  - Error
+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.
 
-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.
+#### Adding a Theme
 
-To generate a new palette, use the `usePalette` hook:
+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]`.
 
-```jsx
-import { ThemeProvider, usePalette, THEMES } from "@protonradio/proton-ui";
+#### Styling for a theme
 
-function AppWithCustomPalette(props) {
-  const customPalette = usePalette(
-    `https://example.com/${props.imgUrl}.jpg`,
-    THEMES.DARK
-  );
+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.
 
-  return (
-    <ThemeProvider theme={THEMES.DARK} palette={customPalette}>
-      <YourApp />
-    </ThemeProvider>
-  );
+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;
 }
 ```
 
-## Best Styling Practices
+### Implementing in your application
 
-Components use standardized _control_ variables defined in the theme config stylesheets for consistent styling across the design system:
+#### Prerequisites
 
-```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
-```
+1. Ensure you have access to Proton's `proton-ui` npm package
+2. Login to npm using `npm login`
 
-These control variables unify the styling system while powering theme-specific CSS customization, and follow the pattern `--proton-control__{style}-{property}`:
+#### Install
 
-```css
-.myComponent {
-  background-color: var(--proton-control__background-color);
-}
+```
+npm install @protonradio/proton-ui --save
 ```
 
-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}`:
+#### Import the styles
+Then import the styles into your main.css file.
 
 ```css
-.proton-ui__theme--dark .myComponent[active] {
-  background-color: var(--proton-control__interactive-color);
-}
+@import "@protonradio/proton-ui/styles";
 ```
 
-Palettes can also be accessed in JSX via the `useTheme` hook for more advanced use cases:
-
+#### 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 { useTheme } from "@protonradio/proton-ui";
-
-function MyComponent() {
-  const { palette } = useTheme();
+import { ThemeProvider, THEMES } from "@protonradio/proton-ui";
 
-  // Prefer CSS selectors over programmatic styling
-  return <Icon color={palette.BRAND.PRIMARY} />;
+function MyApp({ Component, pageProps }) {
+  return (
+    <ThemeProvider theme={THEMES.DARK}>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
 }
 ```
 
-## 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
+### 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-DfloGKJz.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\";\r\n\r\nexport * as COLORS from \"./colors\";\r\n\r\nexport * from \"./palettes\";\r\n\r\nexport const THEMES = {\r\n  DARK: \"dark\",\r\n  CUSTOM_DARK: \"custom-dark\",\r\n  LIGHT: \"light\",\r\n} as const;\r\n\r\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\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\r\nexport const BREAKPOINTS = {\r\n  SMALL: 576,\r\n  MEDIUM: 768,\r\n  LARGE: 992,\r\n  X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\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,12 @@
 import { Placement } from 'react-aria';
 
+declare const BRAND: {
+    PRIMARY: string;
+    PRIMARY_LIGHT: string;
+    PRIMARY_SUPER_LIGHT: string;
+    SECONDARY: string;
+};
+
 export declare type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
 
 export declare const BREAKPOINTS: {
@@ -9,18 +16,156 @@ 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;
+        PRIMARY_SUPER_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-D006-kxf.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\";\r\n\r\nexport * as COLORS from \"./colors\";\r\n\r\nexport * from \"./palettes\";\r\n\r\nexport const THEMES = {\r\n  DARK: \"dark\",\r\n  CUSTOM_DARK: \"custom-dark\",\r\n  LIGHT: \"light\",\r\n} as const;\r\n\r\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\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\r\nexport const BREAKPOINTS = {\r\n  SMALL: 576,\r\n  MEDIUM: 768,\r\n  LARGE: 992,\r\n  X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\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":";"}