@codecanon/next-presets 0.0.2 → 0.0.5

package/dist/index.d.ts

@@ -4,23 +4,18 @@ import { PropsWithChildren, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { Dialog } from "radix-ui";
 
-//#region src/presets/index.d.ts
-declare const PRESETS: [["nuteral", "Nuteral"], ["nuteral-accent", "Nuteral (Accent)"], ["new", "Anew"], ["red", "Red"], ["rose", "Rose"], ["orange", "Orange"], ["green", "Green"], ["blue", "Blue"], ["yellow", "Yellow"], ["violet", "Violet"], ["modern-minimal", "Modern Minimal"], ["violet-bloom", "Violet Bloom"], ["t3-chat", "T3 Chat"], ["twitter", "Twitter"], ["mocha-mousse", "Mocha Mousse"], ["bubblegum", "Bubblegum"], ["amethyst-haze", "Amethyst Haze"], ["notebook", "Notebook"], ["doom-64", "Doom 64"], ["catppuccin", "Catppuccin"], ["graphite", "Graphite"], ["perpetuity", "Perpetuity"], ["kodama-grove", "Kodama Grove"], ["cosmic-night", "Cosmic Night"], ["tangerine", "Tangerine"], ["quantum-rose", "Quantum Rose"], ["nature", "Nature"], ["bold-tech", "Bold Tech"], ["elegant-luxury", "Elegant Luxury"], ["amber-minimal", "Amber Minimal"], ["supabase", "Supabase"], ["neo-brutalism", "Neo Brutalism"], ["solar-dusk", "Solar Dusk"], ["claymorphism", "Claymorphism"], ["cyberpunk", "Cyberpunk"], ["pastel-dreams", "Pastel Dreams"], ["clean-slate", "Clean Slate"], ["caffeine", "Caffeine"], ["ocean-breeze", "Ocean Breeze"], ["retro-arcade", "Retro Arcade"], ["midnight-bloom", "Midnight Bloom"], ["candyland", "Candyland"], ["northern-lights", "Northern Lights"], ["vintage-paper", "Vintage Paper"], ["sunset-horizon", "Sunset Horizon"], ["starry-night", "Starry Night"], ["claude", "Claude"], ["vercel", "Vercel"], ["darkmatter", "Darkmatter"], ["mono", "Mono"], ["soft-pop", "Soft Pop"], ["sage-garden", "Sage Garden"]];
-type PresetKeys = (typeof PRESETS)[number][0];
-declare const DEFAULT_PRESET: PresetKeys;
-//#endregion
 //#region src/providers.d.ts
 type ColorScheme = "dark" | "light";
 type Theme = ColorScheme | "system";
 type PresetProviderProps = {
-  children: ReactNode;
-  defaultPreset?: PresetKeys;
+  children: ReactNode; /** Initial preset when no stored value exists. Accepts built-in `PresetKeys` or any custom preset ID. */
+  defaultPreset?: string;
   presetKey?: string;
 };
 type PresetState = {
-  preset?: PresetKeys;
-  resetPreset: () => void;
-  setPreset: (preset: PresetKeys) => void;
+  /** The currently active preset ID. */preset?: string;
+  resetPreset: () => void; /** Switch to any preset by ID — built-in or custom. */
+  setPreset: (preset: string) => void;
 };
 declare function PresetProvider({
   children,
@@ -48,6 +43,13 @@ declare function useTheme(): {
   systemTheme?: ColorScheme | undefined;
 };
 //#endregion
+//#region src/presets/index.d.ts
+declare const PRESETS: [["nuteral", "Nuteral"], ["nuteral-accent", "Nuteral (Accent)"], ["new", "Anew"], ["red", "Red"], ["rose", "Rose"], ["orange", "Orange"], ["green", "Green"], ["blue", "Blue"], ["yellow", "Yellow"], ["violet", "Violet"], ["modern-minimal", "Modern Minimal"], ["violet-bloom", "Violet Bloom"], ["t3-chat", "T3 Chat"], ["twitter", "Twitter"], ["mocha-mousse", "Mocha Mousse"], ["bubblegum", "Bubblegum"], ["amethyst-haze", "Amethyst Haze"], ["notebook", "Notebook"], ["doom-64", "Doom 64"], ["catppuccin", "Catppuccin"], ["graphite", "Graphite"], ["perpetuity", "Perpetuity"], ["kodama-grove", "Kodama Grove"], ["cosmic-night", "Cosmic Night"], ["tangerine", "Tangerine"], ["quantum-rose", "Quantum Rose"], ["nature", "Nature"], ["bold-tech", "Bold Tech"], ["elegant-luxury", "Elegant Luxury"], ["amber-minimal", "Amber Minimal"], ["supabase", "Supabase"], ["neo-brutalism", "Neo Brutalism"], ["solar-dusk", "Solar Dusk"], ["claymorphism", "Claymorphism"], ["cyberpunk", "Cyberpunk"], ["pastel-dreams", "Pastel Dreams"], ["clean-slate", "Clean Slate"], ["caffeine", "Caffeine"], ["ocean-breeze", "Ocean Breeze"], ["retro-arcade", "Retro Arcade"], ["midnight-bloom", "Midnight Bloom"], ["candyland", "Candyland"], ["northern-lights", "Northern Lights"], ["vintage-paper", "Vintage Paper"], ["sunset-horizon", "Sunset Horizon"], ["starry-night", "Starry Night"], ["claude", "Claude"], ["vercel", "Vercel"], ["darkmatter", "Darkmatter"], ["mono", "Mono"], ["soft-pop", "Soft Pop"], ["sage-garden", "Sage Garden"]];
+type PresetKeys = (typeof PRESETS)[number][0];
+/** A tuple of [id, label] describing a single preset — built-in or custom. */
+type PresetTuple = readonly [string, string];
+declare const DEFAULT_PRESET: PresetKeys;
+//#endregion
 //#region src/components/ui/sheet.d.ts
 declare function Sheet({
   ...props
@@ -74,8 +76,8 @@ declare function DefaultAppPreviewCard({
   ...props
 }: {
   showDock?: boolean;
-  label?: string;
-  presetKey?: PresetKeys;
+  label?: string; /** Built-in preset ID or any custom preset ID. */
+  presetKey?: string;
   active?: boolean;
   highlighted?: boolean;
   ref?: React.Ref<HTMLDivElement>;
@@ -98,15 +100,21 @@ declare function PresetPickerThemeToggleGroup({
 declare function PresetPickerContent({
   showDock,
   previewCard: AppPreviewCard,
+  presets,
   className,
   ...props
 }: {
   showDock?: boolean;
   previewCard?: typeof DefaultAppPreviewCard;
+  /**
+   * The list of presets to display. Defaults to the built-in `PRESETS`.
+   * Extend with custom presets by spreading: `[...PRESETS, ["my-brand", "My Brand"]]`
+   */
+  presets?: readonly PresetTuple[];
 } & React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
 declare function PresetPickerSheet({
   children,
   ...props
 }: React.ComponentProps<typeof Sheet>): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { type ColorScheme, DEFAULT_PRESET, DefaultAppPreviewCard, PRESETS, PresetKeys, PresetPicker, PresetPickerContent, PresetPickerSheet, PresetPickerThemeToggleGroup, PresetProvider, type PresetProviderProps, type Theme, ThemeProvider, type ThemeProviderProps, usePreset, usePresetPicker, useTheme };
+export { type ColorScheme, DEFAULT_PRESET, DefaultAppPreviewCard, PRESETS, PresetKeys, PresetPicker, PresetPickerContent, PresetPickerSheet, PresetPickerThemeToggleGroup, PresetProvider, type PresetProviderProps, PresetTuple, type Theme, ThemeProvider, type ThemeProviderProps, usePreset, usePresetPicker, useTheme };

package/dist/index.js

@@ -824,7 +824,7 @@ function PresetPickerThemeToggleGroup({ className, ...props }) {
 		]
 	});
 }
-function PresetPickerContent({ showDock, previewCard: AppPreviewCard = DefaultAppPreviewCard, className, ...props }) {
+function PresetPickerContent({ showDock, previewCard: AppPreviewCard = DefaultAppPreviewCard, presets = PRESETS, className, ...props }) {
 	const { open } = usePresetPicker("PresetPickerContent");
 	const { preset, setPreset } = usePreset();
 	const [mounted, setMounted] = useBoolean(false);
@@ -833,7 +833,7 @@ function PresetPickerContent({ showDock, previewCard: AppPreviewCard = DefaultAp
 	const queryLower = query.trim().toLowerCase();
 	const scrollerRef = useRef(null);
 	const itemRefs = useRef(/* @__PURE__ */ new Map());
-	const filteredPresets = useMemo(() => PRESETS.filter(([, t]) => t?.toLowerCase().includes(queryLower)), [queryLower]);
+	const filteredPresets = useMemo(() => presets.filter(([, t]) => t?.toLowerCase().includes(queryLower)), [queryLower, presets]);
 	useEffect(() => {
 		if (queryLower.trim()) setHighlightedIndex(-1);
 		else setHighlightedIndex(filteredPresets.findIndex(([id]) => id === preset));
@@ -862,7 +862,7 @@ function PresetPickerContent({ showDock, previewCard: AppPreviewCard = DefaultAp
 		} else if (e.key === "Enter") {
 			e.preventDefault();
 			const id = filteredPresets[highlightedIndex]?.[0];
-			setPreset(id);
+			if (id) setPreset(id);
 		}
 	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Input, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@codecanon/next-presets",
   "type": "module",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "description": "Allow your user to choose from a list of shadcn presets",
   "author": "CodeCanon LLC <codecanonllc@gmail.com>",
   "license": "MIT",
@@ -14,8 +14,15 @@
     "url": "https://github.com//CodeCanon-LLC/codecanon-next-presets/issues"
   },
   "exports": {
-    ".": "./dist/index.js",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./styles.css": {
+      "style": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    }
   },
   "types": "./dist/index.d.ts",
   "files": [