@vuer-ai/vuer-uikit 0.0.101 → 0.0.103

package/src/ui/inputs/presets-rad-input.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, useState } from "react";
+
+import { Button } from "../button";
+import { RadInput, RadInputProps } from "./number-inputs/RadInput";
+import { cn } from "../../hooks";
+
+interface PresetsRadInputProps extends Omit<RadInputProps, "value" | "onChange"> {
+  presets: [number, number, number];
+  value?: number;
+  onChange?: (value: number) => void;
+  display?: "deg" | "pi" | "rad";
+  className?: string;
+}
+
+export const PresetsRadInput = forwardRef<HTMLDivElement, PresetsRadInputProps>(
+  function PresetsRadInput({ presets, value = 0, onChange, display = "rad", size, className, ...props }, ref) {
+    const [preset, setPreset] = useState(value);
+
+    const handleValueChange = (newValue: number) => {
+      setPreset(newValue);
+      onChange?.(newValue);
+    };
+
+    const handlePresetClick = (presetValue: number) => {
+      setPreset(presetValue);
+      onChange?.(presetValue);
+    };
+
+    const getDisplayValue = (radValue: number) => {
+      if (display === "deg") {
+        return (radValue * 180) / Math.PI;
+      } else if (display === "pi") {
+        return radValue / Math.PI;
+      }
+      return radValue;
+    };
+
+    const formatDisplayValue = (radValue: number) => {
+      const displayValue = getDisplayValue(radValue);
+      if (display === "pi") {
+        return `${displayValue.toFixed(2)}π`;
+      } else if (display === "deg") {
+        return `${displayValue.toFixed(0)}°`;
+      }
+      return displayValue.toFixed(2);
+    };
+
+    return (
+      <div className={cn("gap-xs grid grid-cols-5", className)}>
+        <div className="col-span-full">
+          <RadInput
+            {...props}
+            ref={ref}
+            size={size}
+            value={preset}
+            onChange={handleValueChange}
+            display={display}
+          />
+        </div>
+
+        {presets.map((p: number, i: number) => {
+          return (
+            <Button
+              key={i}
+              size={size}
+              variant="secondary"
+              className="h-6"
+              onClick={() => handlePresetClick(p)}
+            >
+              {formatDisplayValue(p)}
+            </Button>
+          );
+        })}
+      </div>
+    );
+  },
+);

package/src/ui/layouts/dock-layout/DockLayoutView.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode } from "react";
 
 import {
   DockLayout,
@@ -36,93 +36,17 @@ export const DockLayoutView = ({
   bottomClassName,
   contentClassName,
 }: DockLayoutViewProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const leftRef = useRef<HTMLDivElement>(null);
-  const rightRef = useRef<HTMLDivElement>(null);
-  const bottomRef = useRef<HTMLDivElement>(null);
-  const measureRef = useRef<HTMLDivElement>(null);
-  const [isBottomFullWidth, setIsBottomFullWidth] = useState(false);
-
-  useEffect(() => {
-    const checkBottomWidth = () => {
-      if (!containerRef.current || !bottom || !measureRef.current) return;
-
-      const containerWidth = containerRef.current.offsetWidth;
-      const leftWidth = leftRef.current?.offsetWidth || 0;
-      const rightWidth = rightRef.current?.offsetWidth || 0;
-      const availableWidth = containerWidth - leftWidth - rightWidth;
-
-      const bottomActualWidth = measureRef.current.scrollWidth;
-
-      setIsBottomFullWidth(bottomActualWidth > 0 && availableWidth < bottomActualWidth);
-    };
-
-    const resizeObserver = new ResizeObserver(checkBottomWidth);
-
-    if (containerRef.current) {
-      resizeObserver.observe(containerRef.current);
-    }
-    if (leftRef.current) {
-      resizeObserver.observe(leftRef.current);
-    }
-    if (rightRef.current) {
-      resizeObserver.observe(rightRef.current);
-    }
-    if (measureRef.current) {
-      resizeObserver.observe(measureRef.current);
-      checkBottomWidth();
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [bottom, left, right]);
-
   return (
-    <DockLayout ref={containerRef} className={className}>
-      {bottom && (
-        <div
-          ref={measureRef}
-          className="pointer-events-none absolute -top-[9999px] left-0 opacity-0"
-          style={{ width: "max-content" }}
-        >
-          <DockLayoutBottom className={bottomClassName}>{bottom}</DockLayoutBottom>
-        </div>
-      )}
-
+    <DockLayout className={className}>
       {top && <DockLayoutTop className={topClassName}>{top}</DockLayoutTop>}
 
       <div className="flex flex-1 overflow-hidden">
-        {left && (
-          <div ref={leftRef}>
-            <DockLayoutLeft className={leftClassName}>{left}</DockLayoutLeft>
-          </div>
-        )}
-
-        <div className="flex flex-1 flex-col overflow-hidden">
-          <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
-
-          {bottom && !isBottomFullWidth && (
-            <div className="flex justify-center">
-              <DockLayoutBottom ref={bottomRef} className={bottomClassName}>
-                {bottom}
-              </DockLayoutBottom>
-            </div>
-          )}
-        </div>
-
-        {right && (
-          <div ref={rightRef}>
-            <DockLayoutRight className={rightClassName}>{right}</DockLayoutRight>
-          </div>
-        )}
+        {left && <DockLayoutLeft className={leftClassName}>{left}</DockLayoutLeft>}
+        <DockLayoutContent className={contentClassName}>{children}</DockLayoutContent>
+        {right && <DockLayoutRight className={rightClassName}>{right}</DockLayoutRight>}
       </div>
 
-      {bottom && isBottomFullWidth && (
-        <DockLayoutBottom ref={bottomRef} className={bottomClassName}>
-          {bottom}
-        </DockLayoutBottom>
-      )}
+      {bottom && <DockLayoutBottom className={bottomClassName}>{bottom}</DockLayoutBottom>}
     </DockLayout>
   );
 };

package/src/ui/layouts/liquid-layout/LayoutSlots.tsx

@@ -28,7 +28,7 @@ export function LiquidLayoutLeft({ className, ...props }: Readonly<ComponentProp
     <div
       {...props}
       className={cn(
-        "order-2 col-start-1 flex flex-col items-start gap-4 [&>*]:pointer-events-auto",
+        "order-2 col-start-1 flex flex-col items-start gap-4 overflow-y-auto [&>*]:pointer-events-auto",
         className,
       )}
     />
@@ -57,7 +57,7 @@ export function LiquidLayoutRight({
     <Comp
       {...props}
       className={cn(
-        "order-4 col-start-3 flex flex-col items-end gap-4 [&>*]:pointer-events-auto",
+        "order-4 col-start-3 flex flex-col items-end gap-4 overflow-y-auto [&>*]:pointer-events-auto",
         className,
       )}
     />

package/src/ui/modal.tsx

@@ -77,7 +77,8 @@ const modalContentVariants = cva([
   "data-[state=open]:fade-in-0",
   "data-[state=closed]:zoom-out-95",
   "data-[state=open]:zoom-in-95",
-  "liquid:liquid-bg",
+  "liquid-dark:liquid-dark-bg",
+  "liquid-light:liquid-light-bg",
 ]);
 
 interface ModalContentProps extends ComponentProps<typeof DialogPrimitive.Content> {

package/src/ui/panel.tsx

@@ -13,7 +13,8 @@ const panelVariants = cva(
     "rounded-uk-lg",
     "bg-bg-primary",
     "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-    "liquid:liquid-bg",
+    "liquid-dark:liquid-dark-bg",
+    "liquid-light:liquid-light-bg",
   ],
   {
     variants: {

package/src/ui/popover.tsx

@@ -74,7 +74,8 @@ function PopoverContentRoot({
           "origin-(--radix-popover-content-transform-origin)",
           "border-none",
           "outline-hidden",
-          "liquid:liquid-bg",
+          "liquid-dark:liquid-dark-bg",
+          "liquid-light:liquid-light-bg",
           className,
         )}
         {...props}
@@ -95,7 +96,8 @@ function PopoverContentFallback({ className, ...props }: ComponentProps<"div">)
         "z-20",
         "border-none",
         "outline-hidden",
-        "liquid:liquid-bg",
+        "liquid-dark:liquid-dark-bg",
+        "liquid-light:liquid-light-bg",
         className,
       )}
       {...props}

package/src/ui/select.tsx

@@ -175,7 +175,8 @@ export function SelectContent({
             "overflow-y-auto",
             "rounded-uk-md",
             "shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
-            "liquid:liquid-bg",
+            "liquid-dark:liquid-dark-bg",
+            "liquid-light:liquid-light-bg",
             font === "standard" ? "font-sans" : "font-number-input",
           ],
           {

package/src/ui/sheet.tsx

@@ -111,7 +111,7 @@ function SheetContentRoot({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "liquid:liquid-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)] transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary data-[state=open]:animate-in data-[state=closed]:animate-out p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)] transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
             "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-[340px]",
           side === "left" &&
@@ -146,7 +146,7 @@ function SheetContentFallback({
     <div
       data-slot="sheet-content"
       className={cn(
-        "liquid:liquid-bg bg-bg-primary p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
+        "liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg bg-bg-primary p-xl fixed z-50 flex flex-col gap-4 shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
         side === "right" && "inset-y-0 right-0 h-full w-[340px]",
         side === "left" && "inset-y-0 left-0 h-full w-[340px]",
         side === "top" && "inset-x-0 top-0 h-auto",

package/src/ui/sidebar.tsx

@@ -222,7 +222,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-bg-primary liquid:liquid-bg group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-uk-lg flex h-full w-full flex-col font-normal group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="bg-bg-primary liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:rounded-uk-lg flex h-full w-full flex-col font-normal group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
         >
           {children}
         </div>
@@ -316,7 +316,7 @@ function SidebarHeader({ className, ...props }: ComponentProps<"div">) {
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("text-uk-lg leading-uk-lg px-md flex flex-col", className)}
+      className={cn("text-uk-lg leading-uk-lg px-md py-lg flex flex-col", className)}
       {...props}
     />
   );
@@ -327,7 +327,7 @@ function SidebarFooter({ className, ...props }: ComponentProps<"div">) {
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn("px-lg flex flex-col", className)}
+      className={cn("px-md py-lg flex flex-col", className)}
       {...props}
     />
   );
@@ -338,10 +338,7 @@ function SidebarSeparator({ className, ...props }: ComponentProps<typeof Separat
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-line-primary -ml-lg", className)}
-      style={{
-        width: "calc(100% + var(--spacing-lg) * 2)",
-      }}
+      className={cn("bg-line-primary", className)}
       {...props}
     />
   );
@@ -431,7 +428,7 @@ function SidebarMenu({ className, ...props }: ComponentProps<"ul">) {
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn("gap-lg flex w-full min-w-0 flex-col", className)}
+      className={cn("py-md gap-sm flex w-full min-w-0 flex-col", className)}
       style={{
         paddingLeft: "0px",
         marginBottom: "0px",
@@ -656,10 +653,12 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-text-primary ring-sidebar-ring hover:bg-bg-secondary hover:text-text-primary active:bg-bg-tertiary active:text-text-highlight [&>svg]:text-icon-primary gap-md rounded-uk-md px-lg flex h-[32px] min-w-0 -translate-x-px items-center overflow-hidden outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
+        "text-text-primary ring-sidebar-ring hover:bg-bg-secondary hover:text-text-primary active:bg-bg-tertiary active:text-text-highlight [&>svg]:text-icon-primary gap-md rounded-uk-md px-lg flex h-[32px] min-w-0 -translate-x-px cursor-pointer items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
         size === "sm" && "text-uk-sm leading-uk-sm",
         size === "md" && "text-uk-md leading-uk-md",
         "group-data-[collapsible=icon]:hidden",
+        isActive &&
+          "bg-bg-tertiary text-text-highlight [&>svg]:text-icon-highlight hover:bg-bg-tertiary hover:text-text-highlight",
         className,
       )}
       {...props}

package/src/ui/theme/ThemeProvider.tsx

@@ -9,7 +9,13 @@ import {
 } from "react";
 
 import { ThemeScript } from "./themeScript";
-import type { Attribute, ThemeProviderProps, UseThemeProps, BaseTheme, ComputedTheme } from "./types";
+import type {
+  Attribute,
+  BaseTheme,
+  ComputedTheme,
+  ThemeProviderProps,
+  UseThemeProps,
+} from "./types";
 
 export const colorSchemes = ["light", "dark"] as const;
 export const MEDIA = "(prefers-color-scheme: dark)";
@@ -37,47 +43,47 @@ export const getFromLS = (key: string, fallback: string): string => {
 /**
  * Calculate the actual theme name
  */
-export const computeTheme = (baseTheme: BaseTheme, isLiquid: boolean, systemIsDark: boolean): ComputedTheme => {
+export const computeTheme = (
+  baseTheme: BaseTheme,
+  isLiquid: boolean,
+  systemIsDark: boolean,
+): ComputedTheme => {
   let resolvedBase: "light" | "dark";
-  
+
   if (baseTheme === "system") {
     resolvedBase = systemIsDark ? "dark" : "light";
   } else {
     resolvedBase = baseTheme;
   }
-  
-  return isLiquid ? `liquid-${resolvedBase}` as ComputedTheme : resolvedBase;
-};
 
-/**
- * Parse old theme string to new state structure
- */
-export const parseOldTheme = (oldTheme: string): { baseTheme: BaseTheme; isLiquid: boolean } => {
-  if (oldTheme === "system") {
-    return { baseTheme: "system", isLiquid: false };
-  }
-  
-  if (oldTheme.startsWith("liquid-")) {
-    const base = oldTheme.replace("liquid-", "") as "light" | "dark";
-    return { baseTheme: base, isLiquid: true };
-  }
-  
-  return { baseTheme: oldTheme as BaseTheme, isLiquid: false };
+  return isLiquid ? (`liquid-${resolvedBase}` as ComputedTheme) : resolvedBase;
 };
 
-
-
 /**
- * Hook to read and update theme state from `ThemeProvider`.
+ * Hook to read and update the theme state from `ThemeProvider`.
  * Throws if used outside a provider.
  */
-export const useTheme = () => {
+export function useTheme<T = UseThemeProps>(
+  selector?: (v: UseThemeProps) => T,
+): T extends void ? UseThemeProps : T {
   const context = useContext(ThemeContext);
 
   if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
 
-  return context;
-};
+  return useMemo(
+    () => {
+      if (!selector) {
+        return context as any;
+      } else if (typeof selector === "function") {
+        return selector(context);
+      } else {
+        return context[selector] as any;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [context],
+  ) as T extends void ? UseThemeProps : T;
+}
 
 /**
  * Provides theme context and DOM attribute synchronization for theming.
@@ -112,7 +118,7 @@ export const Theme = ({
   scriptProps,
 }: PropsWithChildren<ThemeProviderProps>) => {
   const themes = defaultThemes;
-  
+
   const initialState = useMemo(() => {
     return { baseTheme: defaultBaseTheme!, isLiquid: defaultIsLiquid! };
   }, [defaultBaseTheme, defaultIsLiquid]);
@@ -122,9 +128,11 @@ export const Theme = ({
     if (!stored) {
       return initialState.baseTheme;
     }
-    return (["light", "dark", "system"].includes(stored) ? stored : initialState.baseTheme) as BaseTheme;
+    return (
+      ["light", "dark", "system"].includes(stored) ? stored : initialState.baseTheme
+    ) as BaseTheme;
   });
-  
+
   const [isLiquid, setIsLiquidState] = useState<boolean>(() => {
     const stored = getFromLS(`${storageKey}-liquid`, "");
     if (!stored) {
@@ -142,15 +150,14 @@ export const Theme = ({
 
   const attrs = !value ? themes : Object.values(value);
 
-  const computedTheme = useMemo(() => 
-    computeTheme(baseTheme, isLiquid, systemIsDark), 
-    [baseTheme, isLiquid, systemIsDark]
+  const computedTheme = useMemo(
+    () => computeTheme(baseTheme, isLiquid, systemIsDark),
+    [baseTheme, isLiquid, systemIsDark],
   );
 
   const resolvedTheme = useMemo((): ComputedTheme => {
     if (forcedTheme) {
-      const parsed = parseOldTheme(forcedTheme);
-      return computeTheme(parsed.baseTheme, parsed.isLiquid, systemIsDark);
+      return forcedTheme as ComputedTheme;
     }
     return computedTheme;
   }, [forcedTheme, computedTheme, systemIsDark]);
@@ -190,26 +197,26 @@ export const Theme = ({
     [attribute, attrs, disableTransitionOnChange, enableColorScheme, nonce, value],
   );
 
-  const setBaseTheme = useCallback((newBaseTheme: BaseTheme) => {
-    setBaseThemeState(newBaseTheme);
-    saveToLS(`${storageKey}-base`, newBaseTheme);
-  }, [storageKey]);
+  const setBaseTheme = useCallback(
+    (newBaseTheme: BaseTheme) => {
+      setBaseThemeState(newBaseTheme);
+      saveToLS(`${storageKey}-base`, newBaseTheme);
+    },
+    [storageKey],
+  );
 
   const toggleLiquid = useCallback(() => {
-    setIsLiquidState(prev => {
+    setIsLiquidState((prev) => {
       const newValue = !prev;
       saveToLS(`${storageKey}-liquid`, String(newValue));
       return newValue;
     });
   }, [storageKey]);
 
-  const handleMediaQuery = useCallback(
-    (e: MediaQueryListEvent | MediaQueryList) => {
-      const isDark = e.matches;
-      setSystemIsDark(isDark);
-    },
-    [],
-  );
+  const handleMediaQuery = useCallback((e: MediaQueryListEvent | MediaQueryList) => {
+    const isDark = e.matches;
+    setSystemIsDark(isDark);
+  }, []);
 
   // Always listen to System preference
   useEffect(() => {
@@ -249,13 +256,24 @@ export const Theme = ({
       toggleLiquid,
       computedTheme,
       resolvedTheme,
-      systemTheme: (enableSystem ? (systemIsDark ? "dark" : "light") : undefined) as "light" | "dark" | undefined,
+      systemTheme: (enableSystem ? (systemIsDark ? "dark" : "light") : undefined) as
+        | "light"
+        | "dark"
+        | undefined,
       forcedTheme,
       storageKey,
     }),
     [
-      baseTheme, setBaseTheme, isLiquid, toggleLiquid, computedTheme, resolvedTheme,
-      systemIsDark, enableSystem, forcedTheme, storageKey
+      baseTheme,
+      setBaseTheme,
+      isLiquid,
+      toggleLiquid,
+      computedTheme,
+      resolvedTheme,
+      systemIsDark,
+      enableSystem,
+      forcedTheme,
+      storageKey,
     ],
   );
 
@@ -268,9 +286,8 @@ export const Theme = ({
           attribute,
           enableSystem,
           enableColorScheme,
-          defaultTheme: initialState.baseTheme === "system" 
-            ? "system" 
-            : (initialState.isLiquid ? `liquid-${initialState.baseTheme}` : initialState.baseTheme),
+          defaultBaseTheme: initialState.baseTheme,
+          defaultIsLiquid: initialState.isLiquid,
           value,
           themes,
           nonce,

package/src/ui/theme/ThemeToggles.tsx

@@ -1,11 +1,11 @@
 // Liquid toggle component
-import { Droplet, Moon, Sun, SunMoon } from "lucide-react";
+import { LayoutTemplate, Moon, PanelsTopLeft, Sun, SunMoon } from "lucide-react";
 import React, { type ComponentProps } from "react";
 
 import { Button } from "../button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
 import { useTheme } from "./ThemeProvider";
-import { cn, createClientOnlyComponent, useDocument } from "../../hooks";
+import { cn } from "../../hooks";
 
 type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
 
@@ -18,16 +18,16 @@ export const LiquidToggle: React.FC<LiquidToggleProps> = ({ className, ...props
         <Button
           icon
           variant="ghost"
-          value={isLiquid}
+          // value={isLiquid}
           aria-label={`Toggle liquid theme: ${isLiquid ? "on" : "off"}`}
           {...props}
           onClick={toggleLiquid}
           className={className}
         >
-          <Droplet size={20} />
+          {isLiquid ? <PanelsTopLeft size={20} /> : <LayoutTemplate size={20} />}
         </Button>
       </TooltipTrigger>
-      <TooltipContent>Toggle liquid theme</TooltipContent>
+      <TooltipContent>{isLiquid ? "Dock Menu Panels" : "Floating Menu Panels"}</TooltipContent>
     </Tooltip>
   );
 };
@@ -48,7 +48,7 @@ export const ThemeColorToggle: React.FC<ThemeColorToggleProps> = (props) => {
     }
   };
 
-  const isDark = resolvedTheme.includes("dark");
+  const isDark = resolvedTheme?.includes("dark");
   const isSystem = baseTheme === "system";
 
   return (
@@ -70,15 +70,15 @@ type ThemeTogglesProps = {
   colorToggleProps?: Omit<ThemeColorToggleProps, "className">;
 };
 
-export const ThemeToggles: React.FC<ThemeTogglesProps> = ({ 
-  className, 
-  liquidToggleProps = {}, 
-  colorToggleProps = {} 
+export const ThemeToggles: React.FC<ThemeTogglesProps> = ({
+  className,
+  liquidToggleProps = {},
+  colorToggleProps = {},
 }) => {
   return (
-    <div className={cn("flex gap-1", className)}>
+    <div className={cn("flex", className)}>
       <LiquidToggle {...liquidToggleProps} />
       <ThemeColorToggle {...colorToggleProps} />
     </div>
   );
-};
+};

package/src/ui/theme/index.ts

@@ -1,21 +1,11 @@
-export { 
-  useTheme, 
-  ThemeProvider, 
-  defaultThemes,
-  computeTheme,
-  parseOldTheme
-} from "./ThemeProvider";
-export { 
-  LiquidToggle, 
-  ThemeColorToggle,
-  ThemeToggles,
-} from "./ThemeToggles";
+export { useTheme, ThemeProvider, defaultThemes, computeTheme } from "./ThemeProvider";
+export { LiquidToggle, ThemeColorToggle, ThemeToggles } from "./ThemeToggles";
 export { ThemeScript } from "./themeScript";
 
-export type { 
-  Attribute, 
-  ThemeProviderProps, 
+export type {
+  Attribute,
+  ThemeProviderProps,
   UseThemeProps,
   BaseTheme,
-  ComputedTheme 
+  ComputedTheme,
 } from "./types";