@docubook/flame 1.0.0-beta.70 → 1.0.0

package/.docu/components/base/theme-controller.tsx

@@ -1,358 +0,0 @@
-"use client";
-
-import { useEffect, useRef, useState, type ReactNode } from "react";
-import { cn } from "../../node/utils";
-
-export type ThemeName =
-  | "light"
-  | "dark"
-  | "cupcake"
-  | "bumblebee"
-  | "emerald"
-  | "corporate"
-  | "synthwave"
-  | "retro"
-  | "cyberpunk"
-  | "valentine"
-  | "halloween"
-  | "garden"
-  | "forest"
-  | "aqua"
-  | "lofi"
-  | "pastel"
-  | "fantasy"
-  | "wireframe"
-  | "black"
-  | "luxury"
-  | "dracula"
-  | "cmyk"
-  | "autumn"
-  | "business"
-  | "acid"
-  | "lemonade"
-  | "night"
-  | "coffee"
-  | "winter"
-  | "dim"
-  | "nord"
-  | "sunset"
-  | "razzle"
-  | "sizzle";
-
-export interface ThemeOption {
-  value: ThemeName;
-  label: string;
-}
-
-export const DEFAULT_THEMES: ThemeOption[] = [
-  { value: "light", label: "Light" },
-  { value: "dark", label: "Dark" },
-];
-
-/** Hook to get/set current theme */
-export function useTheme() {
-  const [theme, setThemeState] = useState<ThemeName>(() => {
-    if (typeof window === "undefined") return "light";
-    return (localStorage.getItem("theme") as ThemeName) || "light";
-  });
-
-  useApplyThemeOnMount(theme);
-
-  const setTheme = (newTheme: ThemeName) => {
-    setThemeState(newTheme);
-    applyTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-  };
-
-  return { theme, setTheme };
-}
-
-function applyTheme(theme: ThemeName) {
-  if (typeof document !== "undefined") {
-    document.documentElement.classList.toggle("dark", theme === "dark");
-  }
-}
-
-function useApplyThemeOnMount(theme: ThemeName) {
-  const applied = useRef(false);
-  useEffect(() => {
-    if (!applied.current) {
-      applyTheme(theme);
-      applied.current = true;
-    }
-  }, [theme]);
-}
-
-interface ThemeControllerToggleProps {
-  defaultTheme?: ThemeName;
-  lightTheme?: ThemeName;
-  darkTheme?: ThemeName;
-  onThemeChange?: (theme: ThemeName) => void;
-  className?: string;
-  label?: ReactNode;
-  size?: "xs" | "sm" | "md" | "lg";
-  children?: (state: {
-    isDark: boolean;
-    checked: boolean;
-    toggle: (checked: boolean) => void;
-  }) => ReactNode;
-}
-
-function ThemeControllerToggle({
-  defaultTheme = "light",
-  lightTheme = "light",
-  darkTheme = "dark",
-  onThemeChange,
-  className,
-  label,
-  size = "md",
-  children,
-}: ThemeControllerToggleProps) {
-  const [checked, setChecked] = useState(() => {
-    if (typeof window === "undefined") return false;
-    const stored = localStorage.getItem("theme") as ThemeName | null;
-    return (stored || defaultTheme) === darkTheme;
-  });
-
-  useApplyThemeOnMount(checked ? darkTheme : lightTheme);
-
-  const handleChange = (newChecked: boolean) => {
-    const newTheme = newChecked ? darkTheme : lightTheme;
-    setChecked(newChecked);
-    applyTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    onThemeChange?.(newTheme);
-  };
-
-  const isDark = checked;
-
-  if (children) {
-    return <div className={className}>{children({ isDark, checked, toggle: handleChange })}</div>;
-  }
-
-  const toggleElement = (
-    <input
-      type="checkbox"
-      className={cn("toggle theme-controller", `toggle-${size}`)}
-      checked={checked}
-      value={darkTheme}
-      onChange={(e) => handleChange(e.target.checked)}
-    />
-  );
-
-  if (!label) return <div className={className}>{toggleElement}</div>;
-
-  return (
-    <label className={cn("flex cursor-pointer items-center gap-3", className)}>
-      {toggleElement}
-      <span className="text-base-content">{label}</span>
-    </label>
-  );
-}
-
-interface ThemeControllerSelectProps {
-  themes?: ThemeOption[];
-  value?: ThemeName;
-  defaultValue?: ThemeName;
-  controlled?: boolean;
-  onThemeChange?: (theme: ThemeName) => void;
-  className?: string;
-  size?: "xs" | "sm" | "md" | "lg";
-  placeholder?: string;
-}
-
-function ThemeControllerSelect({
-  themes = DEFAULT_THEMES,
-  value,
-  defaultValue = "light",
-  controlled = false,
-  onThemeChange,
-  className,
-  size = "md",
-  placeholder = "Choose theme",
-}: ThemeControllerSelectProps) {
-  const [internalValue, setInternalValue] = useState<ThemeName>(defaultValue as ThemeName);
-  const currentValue = controlled ? (value ?? internalValue) : internalValue;
-  useApplyThemeOnMount(currentValue as ThemeName);
-
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newTheme = e.target.value as ThemeName;
-    if (!controlled) {
-      setInternalValue(newTheme);
-    }
-    applyTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    onThemeChange?.(newTheme);
-  };
-
-  return (
-    <select
-      className={cn("select theme-controller", `select-${size}`, className)}
-      value={currentValue}
-      onChange={handleChange}
-      data-choose-theme
-    >
-      <option value="" disabled>
-        {placeholder}
-      </option>
-      {themes.map((theme) => (
-        <option key={theme.value} value={theme.value}>
-          {theme.label}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-interface ThemeControllerRadioProps {
-  themes?: ThemeOption[];
-  value?: ThemeName;
-  defaultValue?: ThemeName;
-  controlled?: boolean;
-  onThemeChange?: (theme: ThemeName) => void;
-  className?: string;
-  variant?: "btn" | "tile" | "ghost";
-  size?: "xs" | "sm" | "md" | "lg";
-}
-
-function ThemeControllerRadio({
-  themes = DEFAULT_THEMES,
-  value,
-  defaultValue = "light",
-  controlled = false,
-  onThemeChange,
-  className,
-  variant = "btn",
-  size = "md",
-}: ThemeControllerRadioProps) {
-  const [internalValue, setInternalValue] = useState<ThemeName>(defaultValue as ThemeName);
-  const currentValue = controlled ? (value ?? internalValue) : internalValue;
-  useApplyThemeOnMount(currentValue as ThemeName);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newTheme = e.target.value as ThemeName;
-    if (!controlled) {
-      setInternalValue(newTheme);
-    }
-    applyTheme(newTheme);
-    localStorage.setItem("theme", newTheme);
-    onThemeChange?.(newTheme);
-  };
-
-  const variantClass =
-    variant === "btn" ? "btn" : variant === "tile" ? "btn btn-tile" : "btn btn-ghost";
-
-  return (
-    <div className={cn("flex flex-wrap gap-2", className)} role="radiogroup">
-      {themes.map((theme) => (
-        <label
-          key={theme.value}
-          className={cn(variantClass, `btn-${size}`, currentValue === theme.value && "btn-active")}
-        >
-          <input
-            type="radio"
-            name="theme"
-            className="theme-controller hidden"
-            value={theme.value}
-            checked={currentValue === theme.value}
-            onChange={handleChange}
-            aria-label={theme.label}
-          />
-          {theme.label}
-        </label>
-      ))}
-    </div>
-  );
-}
-
-interface ThemeControllerProps {
-  mode?: "toggle" | "select" | "radio";
-  themes?: ThemeOption[];
-  value?: ThemeName;
-  defaultValue?: ThemeName;
-  controlled?: boolean;
-  onThemeChange?: (theme: ThemeName) => void;
-  className?: string;
-  lightTheme?: ThemeName;
-  darkTheme?: ThemeName;
-  toggleLabel?: ReactNode;
-  toggleSize?: "xs" | "sm" | "md" | "lg";
-  selectSize?: "xs" | "sm" | "md" | "lg";
-  placeholder?: string;
-  radioVariant?: "btn" | "tile" | "ghost";
-  radioSize?: "xs" | "sm" | "md" | "lg";
-}
-
-export function ThemeController({
-  mode = "toggle",
-  themes = DEFAULT_THEMES,
-  value,
-  defaultValue = "light",
-  controlled = false,
-  onThemeChange,
-  className,
-  lightTheme = "light",
-  darkTheme = "dark",
-  toggleLabel,
-  toggleSize = "md",
-  selectSize = "md",
-  placeholder = "Choose theme",
-  radioVariant = "btn",
-  radioSize = "md",
-}: ThemeControllerProps) {
-  const [internalValue, setInternalValue] = useState<ThemeName>(defaultValue as ThemeName);
-  const currentValue = controlled ? (value ?? internalValue) : internalValue;
-  useApplyThemeOnMount(currentValue as ThemeName);
-
-  const handleChange = (newTheme: ThemeName) => {
-    if (!controlled) {
-      setInternalValue(newTheme);
-    }
-    onThemeChange?.(newTheme);
-  };
-
-  switch (mode) {
-    case "select":
-      return (
-        <ThemeControllerSelect
-          themes={themes}
-          value={value}
-          defaultValue={defaultValue}
-          controlled={controlled}
-          onThemeChange={handleChange}
-          className={className}
-          size={selectSize}
-          placeholder={placeholder}
-        />
-      );
-    case "radio":
-      return (
-        <ThemeControllerRadio
-          themes={themes}
-          value={value}
-          defaultValue={defaultValue}
-          controlled={controlled}
-          onThemeChange={handleChange}
-          className={className}
-          variant={radioVariant}
-          size={radioSize}
-        />
-      );
-    case "toggle":
-    default:
-      return (
-        <ThemeControllerToggle
-          defaultTheme={defaultValue}
-          lightTheme={lightTheme}
-          darkTheme={darkTheme}
-          onThemeChange={handleChange}
-          className={className}
-          label={toggleLabel}
-          size={toggleSize}
-        />
-      );
-  }
-}
-
-export { ThemeControllerToggle, ThemeControllerSelect, ThemeControllerRadio };
-export type { ThemeControllerToggleProps, ThemeControllerSelectProps, ThemeControllerRadioProps };

package/.docu/components/base/toggle.tsx

@@ -1,172 +0,0 @@
-"use client";
-
-import { cn } from "../../node/utils";
-import type { InputHTMLAttributes, ReactNode } from "react";
-import { forwardRef, useState, useEffect } from "react";
-
-type ToggleColor =
-  | "primary"
-  | "secondary"
-  | "accent"
-  | "neutral"
-  | "success"
-  | "warning"
-  | "info"
-  | "error";
-type ToggleSize = "xs" | "sm" | "md" | "lg";
-
-interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size"> {
-  color?: ToggleColor;
-  size?: ToggleSize;
-  label?: ReactNode;
-  description?: ReactNode;
-  indeterminate?: boolean;
-  containerClassName?: string;
-  labelClassName?: string;
-  descriptionClassName?: string;
-}
-
-const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
-  {
-    color = "primary",
-    size = "md",
-    label,
-    description,
-    indeterminate = false,
-    containerClassName,
-    labelClassName,
-    descriptionClassName,
-    className,
-    disabled,
-    checked,
-    defaultChecked,
-    onChange,
-    ...props
-  },
-  ref
-) {
-  const colorClass = `toggle-${color}`;
-  const sizeClass = `toggle-${size}`;
-
-  useEffect(() => {
-    if (indeterminate && ref) {
-      const input = (ref as React.RefObject<HTMLInputElement>).current;
-      if (input) {
-        input.indeterminate = true;
-      }
-    }
-  }, [ref, indeterminate]);
-
-  const toggleElement = (
-    <input
-      ref={ref}
-      type="checkbox"
-      className={cn(colorClass, sizeClass, className)}
-      disabled={disabled}
-      checked={checked}
-      defaultChecked={defaultChecked}
-      onChange={onChange}
-      data-indeterminate={indeterminate}
-      {...props}
-    />
-  );
-
-  if (!label) {
-    return toggleElement;
-  }
-
-  return (
-    <label
-      className={cn(
-        "flex items-start gap-3",
-        disabled && "cursor-not-allowed opacity-50",
-        containerClassName
-      )}
-    >
-      <div className="flex items-center pt-0.5">{toggleElement}</div>
-      {(label || description) && (
-        <div className="flex flex-col gap-0.5">
-          {label && (
-            <span className={cn("text-base-content cursor-pointer", labelClassName)}>{label}</span>
-          )}
-          {description && (
-            <span className={cn("text-base-content/60 text-sm", descriptionClassName)}>
-              {description}
-            </span>
-          )}
-        </div>
-      )}
-    </label>
-  );
-});
-
-interface ToggleGroupItem {
-  value: string;
-  label: ReactNode;
-  disabled?: boolean;
-}
-
-interface ToggleGroupProps {
-  items: ToggleGroupItem[];
-  value?: string[];
-  defaultValue?: string[];
-  onChange?: (value: string[]) => void;
-  color?: ToggleColor;
-  size?: ToggleSize;
-  controlled?: boolean;
-  className?: string;
-}
-
-export function ToggleGroup({
-  items,
-  value,
-  defaultValue = [],
-  onChange,
-  color = "primary",
-  size = "md",
-  controlled = false,
-  className,
-}: ToggleGroupProps) {
-  const [internalValue, setInternalValue] = useState<string[]>(defaultValue);
-  const selectedValues = controlled ? (value ?? internalValue) : internalValue;
-
-  const toggle = (itemValue: string) => {
-    const next = selectedValues.includes(itemValue)
-      ? selectedValues.filter((v) => v !== itemValue)
-      : [...selectedValues, itemValue];
-
-    if (!controlled) {
-      setInternalValue(next);
-    }
-    onChange?.(next);
-  };
-
-  return (
-    <div className={cn("flex flex-col gap-3", className)}>
-      {items.map((item) => {
-        const isSelected = selectedValues.includes(item.value);
-        return (
-          <label
-            key={item.value}
-            className={cn(
-              "flex items-center gap-3",
-              item.disabled && "cursor-not-allowed opacity-50"
-            )}
-          >
-            <input
-              type="checkbox"
-              className={cn(`toggle-${color}`, `toggle-${size}`)}
-              checked={isSelected}
-              disabled={item.disabled}
-              onChange={() => !item.disabled && toggle(item.value)}
-            />
-            <span className="text-base-content cursor-pointer">{item.label}</span>
-          </label>
-        );
-      })}
-    </div>
-  );
-}
-
-export { Toggle };
-export type { ToggleProps, ToggleGroupProps, ToggleGroupItem, ToggleColor, ToggleSize };