@ekkolyth/ui 0.1.17 → 0.1.19

package/dist/themes/theme-select.js

@@ -1,357 +0,0 @@
-import { Select as Select$1 } from 'radix-ui';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import 'next-themes';
-import { createContext, use } from 'react';
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-function Select(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx(Select$1.Root, __spreadValues({ "data-slot": "select" }, props));
-}
-function SelectGroup(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx(Select$1.Group, __spreadValues({ "data-slot": "select-group" }, props));
-}
-function SelectValue(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx(Select$1.Value, __spreadValues({ "data-slot": "select-value" }, props));
-}
-function SelectTrigger(_a) {
-  var _b = _a, {
-    className,
-    size = "default",
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "size",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsxs(
-    Select$1.Trigger,
-    __spreadProps(__spreadValues({
-      "data-slot": "select-trigger",
-      "data-size": size,
-      className: cn(
-        "cursor-pointer border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )
-    }, props), {
-      children: [
-        children,
-        /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
-      ]
-    })
-  );
-}
-function SelectContent(_a) {
-  var _b = _a, {
-    className,
-    children,
-    position = "item-aligned",
-    align = "center"
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children",
-    "position",
-    "align"
-  ]);
-  return /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsxs(
-    Select$1.Content,
-    __spreadProps(__spreadValues({
-      "data-slot": "select-content",
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className
-      ),
-      position,
-      align
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx(
-          Select$1.Viewport,
-          {
-            className: cn(
-              "p-1",
-              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-            ),
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-      ]
-    })
-  ) });
-}
-function SelectLabel(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx(
-    Select$1.Label,
-    __spreadValues({
-      "data-slot": "select-label",
-      className: cn("text-muted-foreground px-2 py-1.5 text-xs", className)
-    }, props)
-  );
-}
-function SelectItem(_a) {
-  var _b = _a, {
-    className,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsxs(
-    Select$1.Item,
-    __spreadProps(__spreadValues({
-      "data-slot": "select-item",
-      className: cn(
-        "cursor-pointer focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            "data-slot": "select-item-indicator",
-            className: "absolute right-2 flex size-3.5 items-center justify-center",
-            children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
-          }
-        ),
-        /* @__PURE__ */ jsx(Select$1.ItemText, { children })
-      ]
-    })
-  );
-}
-function SelectScrollUpButton(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx(
-    Select$1.ScrollUpButton,
-    __spreadProps(__spreadValues({
-      "data-slot": "select-scroll-up-button",
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )
-    }, props), {
-      children: /* @__PURE__ */ jsx(
-        ChevronUpIcon,
-        {}
-      )
-    })
-  );
-}
-function SelectScrollDownButton(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx(
-    Select$1.ScrollDownButton,
-    __spreadProps(__spreadValues({
-      "data-slot": "select-scroll-down-button",
-      className: cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )
-    }, props), {
-      children: /* @__PURE__ */ jsx(
-        ChevronDownIcon,
-        {}
-      )
-    })
-  );
-}
-var initialState = {
-  systemTheme: "system",
-  resolvedTheme: "ekkolyth-light",
-  availableThemes: {
-    light: ["ekkolyth-light"],
-    dark: ["ekkolyth-dark"]
-  },
-  setSystemTheme: () => null,
-  setSpecificTheme: () => null
-};
-var NextThemeProviderContext = createContext(initialState);
-function useNextTheme() {
-  const context = use(NextThemeProviderContext);
-  if (context === void 0) {
-    throw new Error("useNextTheme must be used within a NextThemeProvider");
-  }
-  return context;
-}
-var initialState2 = {
-  systemTheme: "system",
-  resolvedTheme: "ekkolyth-light",
-  availableThemes: {
-    light: ["ekkolyth-light"],
-    dark: ["ekkolyth-dark"]
-  },
-  setSystemTheme: () => null,
-  setSpecificTheme: () => null
-};
-var TanstackThemeProviderContext = createContext(initialState2);
-function useTanstackTheme() {
-  const context = use(TanstackThemeProviderContext);
-  if (context === void 0) {
-    throw new Error(
-      "useTanstackTheme must be used within a TanstackThemeProvider"
-    );
-  }
-  return context;
-}
-
-// src/lib/types.ts
-var LIGHT_THEMES = [
-  "latte",
-  "ekkoos-light",
-  "ekkolyth-light",
-  "ekko-playlist-light"
-];
-var DARK_THEMES = [
-  "mocha",
-  "frappe",
-  "macchiato",
-  "tokyo-night",
-  "ekkoos-dark",
-  "ekkolyth-dark",
-  "ekko-playlist-dark"
-];
-
-// src/lib/theme.ts
-function isLightTheme(theme) {
-  return LIGHT_THEMES.includes(theme);
-}
-function isDarkTheme(theme) {
-  return DARK_THEMES.includes(theme);
-}
-function useTheme() {
-  try {
-    return useNextTheme();
-  } catch (e) {
-    try {
-      return useTanstackTheme();
-    } catch (e2) {
-      throw new Error(
-        "useTheme must be used within a ThemeProvider (NextThemeProvider or TanstackThemeProvider)"
-      );
-    }
-  }
-}
-function ThemeSelect(_a) {
-  var _b = _a, {
-    size = "default",
-    className
-  } = _b, props = __objRest(_b, [
-    "size",
-    "className"
-  ]);
-  const { resolvedTheme, availableThemes, setSpecificTheme, setSystemTheme } = useTheme();
-  const handleThemeChange = (value) => {
-    const theme = value;
-    if (isLightTheme(theme)) {
-      setSpecificTheme("light", theme);
-      setSystemTheme("light");
-    } else if (isDarkTheme(theme)) {
-      setSpecificTheme("dark", theme);
-      setSystemTheme("dark");
-    }
-  };
-  const formatThemeName = (theme) => {
-    if (theme === "ekkoos-light") return "EkkoOS Light";
-    if (theme === "ekkoos-dark") return "EkkoOS Dark";
-    if (theme === "tokyo-night") return "Tokyo Night";
-    return theme.charAt(0).toUpperCase() + theme.slice(1);
-  };
-  return /* @__PURE__ */ jsxs(
-    Select,
-    __spreadProps(__spreadValues({
-      value: resolvedTheme,
-      onValueChange: handleThemeChange
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx(
-          SelectTrigger,
-          {
-            size,
-            className: cn(className),
-            children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select theme" })
-          }
-        ),
-        /* @__PURE__ */ jsxs(SelectContent, { children: [
-          availableThemes.light.length > 0 && /* @__PURE__ */ jsxs(SelectGroup, { children: [
-            /* @__PURE__ */ jsx(SelectLabel, { children: "Light Themes" }),
-            availableThemes.light.map((theme) => /* @__PURE__ */ jsx(
-              SelectItem,
-              {
-                value: theme,
-                children: formatThemeName(theme)
-              },
-              theme
-            ))
-          ] }),
-          availableThemes.dark.length > 0 && /* @__PURE__ */ jsxs(SelectGroup, { children: [
-            /* @__PURE__ */ jsx(SelectLabel, { children: "Dark Themes" }),
-            availableThemes.dark.map((theme) => /* @__PURE__ */ jsx(
-              SelectItem,
-              {
-                value: theme,
-                children: formatThemeName(theme)
-              },
-              theme
-            ))
-          ] })
-        ] })
-      ]
-    })
-  );
-}
-
-export { ThemeSelect };

package/dist/themes/theme-toggle.d.ts

@@ -1,15 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
-import { T as Toggle } from '../index-C7t_lwpi.js';
-import 'class-variance-authority/types';
-import 'class-variance-authority';
-import 'radix-ui';
-
-interface ThemeToggleProps extends React.ComponentProps<typeof Toggle> {
-    variant?: 'default' | 'outline';
-    size?: 'default' | 'sm' | 'lg';
-    className?: string;
-}
-declare function ThemeToggle({ variant, size, className, ...props }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
-
-export { ThemeToggle, type ThemeToggleProps };

package/dist/themes/theme-toggle.js

@@ -1,179 +0,0 @@
-import { Monitor, Moon, Sun } from 'lucide-react';
-import { cva } from 'class-variance-authority';
-import { Toggle as Toggle$1 } from 'radix-ui';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx } from 'react/jsx-runtime';
-import 'next-themes';
-import { createContext, use } from 'react';
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Toggle(_a) {
-  var _b = _a, {
-    className,
-    variant = "default",
-    size = "default"
-  } = _b, props = __objRest(_b, [
-    "className",
-    "variant",
-    "size"
-  ]);
-  return /* @__PURE__ */ jsx(
-    Toggle$1.Root,
-    __spreadValues({
-      "data-slot": "toggle",
-      className: cn(toggleVariants({ variant, size, className }))
-    }, props)
-  );
-}
-var initialState = {
-  systemTheme: "system",
-  resolvedTheme: "ekkolyth-light",
-  availableThemes: {
-    light: ["ekkolyth-light"],
-    dark: ["ekkolyth-dark"]
-  },
-  setSystemTheme: () => null,
-  setSpecificTheme: () => null
-};
-var NextThemeProviderContext = createContext(initialState);
-function useNextTheme() {
-  const context = use(NextThemeProviderContext);
-  if (context === void 0) {
-    throw new Error("useNextTheme must be used within a NextThemeProvider");
-  }
-  return context;
-}
-var initialState2 = {
-  systemTheme: "system",
-  resolvedTheme: "ekkolyth-light",
-  availableThemes: {
-    light: ["ekkolyth-light"],
-    dark: ["ekkolyth-dark"]
-  },
-  setSystemTheme: () => null,
-  setSpecificTheme: () => null
-};
-var TanstackThemeProviderContext = createContext(initialState2);
-function useTanstackTheme() {
-  const context = use(TanstackThemeProviderContext);
-  if (context === void 0) {
-    throw new Error(
-      "useTanstackTheme must be used within a TanstackThemeProvider"
-    );
-  }
-  return context;
-}
-function useTheme() {
-  try {
-    return useNextTheme();
-  } catch (e) {
-    try {
-      return useTanstackTheme();
-    } catch (e2) {
-      throw new Error(
-        "useTheme must be used within a ThemeProvider (NextThemeProvider or TanstackThemeProvider)"
-      );
-    }
-  }
-}
-function ThemeToggle(_a) {
-  var _b = _a, {
-    variant = "default",
-    size = "default",
-    className
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "size",
-    "className"
-  ]);
-  const { systemTheme, setSystemTheme } = useTheme();
-  const cycleTheme = () => {
-    const cycle = ["light", "dark", "system"];
-    const currentIndex = cycle.indexOf(
-      systemTheme === "normal" ? "light" : systemTheme
-    );
-    const nextIndex = (currentIndex + 1) % cycle.length;
-    setSystemTheme(cycle[nextIndex]);
-  };
-  const getIcon = () => {
-    const normalizedTheme = systemTheme === "normal" ? "light" : systemTheme;
-    switch (normalizedTheme) {
-      case "light":
-        return /* @__PURE__ */ jsx(Sun, { className: "size-4" });
-      case "dark":
-        return /* @__PURE__ */ jsx(Moon, { className: "size-4" });
-      case "system":
-        return /* @__PURE__ */ jsx(Monitor, { className: "size-4" });
-      default:
-        return /* @__PURE__ */ jsx(Monitor, { className: "size-4" });
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    Toggle,
-    __spreadProps(__spreadValues({
-      variant,
-      size,
-      className: cn(className),
-      onClick: cycleTheme,
-      "aria-label": `Switch theme. Current: ${systemTheme}`
-    }, props), {
-      children: getIcon()
-    })
-  );
-}
-
-export { ThemeToggle };

package/dist/tokyo-night.css

@@ -1,35 +0,0 @@
-/* Tokyo Night Theme - Dark Mode */
-html[data-theme="tokyo-night"] {
-  --radius: 0.625rem;
-  --background: hsl(233 16.00% 13.33%); /* #1a1b26 - dark blue-gray */
-  --foreground: hsl(228 23.53% 87.06%); /* #c0caf5 - light blue-gray */
-  --card: hsl(233 16.00% 13.33%); /* #1a1b26 */
-  --card-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --popover: hsl(233 16.00% 13.33%); /* #1a1b26 */
-  --popover-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --primary: hsl(217 91.67% 79.80%); /* #7aa2f7 - Tokyo Night blue */
-  --primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
-  --secondary: hsl(233 18.18% 15.29%); /* #24283b - darker blue-gray */
-  --secondary-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --muted: hsl(233 18.18% 15.29%); /* #24283b */
-  --muted-foreground: hsl(230 13.33% 66.67%); /* #565f89 - muted text */
-  --accent: hsl(233 18.18% 15.29%); /* #24283b */
-  --accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --destructive: hsl(354 65.22% 78.24%); /* #f7768e - Tokyo Night red */
-  --border: hsl(233 18.18% 20.00%); /* #2f3549 - border color */
-  --input: hsl(233 18.18% 20.00%); /* #2f3549 */
-  --ring: hsl(217 91.67% 79.80%); /* #7aa2f7 - primary blue */
-  --chart-1: hsl(354 65.22% 78.24%); /* #f7768e - red */
-  --chart-2: hsl(158 64.00% 71.37%); /* #9ece6a - green */
-  --chart-3: hsl(217 91.67% 79.80%); /* #7aa2f7 - blue */
-  --chart-4: hsl(38 92.00% 72.16%); /* #e0af68 - yellow */
-  --chart-5: hsl(266 85.00% 78.24%); /* #bb9af7 - purple */
-  --sidebar: hsl(233 18.18% 12.94%); /* #16161e - darker background */
-  --sidebar-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --sidebar-primary: hsl(217 91.67% 79.80%); /* #7aa2f7 */
-  --sidebar-primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
-  --sidebar-accent: hsl(233 18.18% 15.29%); /* #24283b */
-  --sidebar-accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
-  --sidebar-border: hsl(233 18.18% 20.00%); /* #2f3549 */
-  --sidebar-ring: hsl(233 18.18% 20.00%); /* #2f3549 */
-}

package/dist/types-fUfvw1Mz.d.ts

@@ -1,8 +0,0 @@
-type SystemTheme = 'light' | 'dark' | 'system' | 'normal';
-declare const LIGHT_THEMES: readonly ["latte", "ekkoos-light", "ekkolyth-light", "ekko-playlist-light"];
-declare const DARK_THEMES: readonly ["mocha", "frappe", "macchiato", "tokyo-night", "ekkoos-dark", "ekkolyth-dark", "ekko-playlist-dark"];
-type LightThemes = (typeof LIGHT_THEMES)[number];
-type DarkThemes = (typeof DARK_THEMES)[number];
-type ThemeName = LightThemes | DarkThemes;
-
-export type { DarkThemes as D, LightThemes as L, SystemTheme as S, ThemeName as T };