@ekkolyth/ui 0.1.17 → 0.1.19

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ekkolyth
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,128 +1,41 @@
-# Ekko UI
+# @ekkolyth/ui
 
 Shared UI component library.
 
 ## Installation
 
-```bash
-npm install @ekkolyth/ui
-```
-
-## Peer Dependencies
-
-- `react` ^19.2.3
-- `react-dom` ^19.2.3
-- `next-themes` ^0.4.6 (optional, for Next.js theme support)
-- `@tanstack/react-router` ^1.150.0 (optional, for TanStack Router theme support)
-
-## Exports
-
-### Main Export (`@ekkolyth/ui`)
-
-All UI components, hooks, and utilities.
-
-```tsx
-import { Button, Card, Dialog, useIsMobile, cn } from '@ekkolyth/ui'
-```
-
-**Components:**
-Built on top of shadcn@latest.
-
-### Next.js Theme Provider (`@ekkolyth/ui/next`)
-
-Theme provider for Next.js applications using `next-themes`.
-
-```tsx
-import { ThemeProvider, useTheme, Toaster } from '@ekkolyth/ui/next'
-import type { ThemeProviderProps, SystemTheme, ThemeName } from '@ekkolyth/ui/next'
-```
-
-**ThemeProvider Props:**
-- `defaultTheme?: SystemTheme` - Default system theme (`"light" | "dark" | "system" | "normal"`)
-- `lightTheme?: ThemeName | ThemeName[]` - Light theme(s) to make available.
-- `darkTheme?: ThemeName | ThemeName[]` - Dark theme(s) to make available.
-- `storageKey?: string` - localStorage key prefix (default: `"ekko-ui"`) - most people won't need this, but if you're running something like "Micro-Frontends", it might be useful to customize per-frontend, despite running on the same domain. 
-
-**useTheme Hook:**
-Returns:
-- `systemTheme: SystemTheme` - Current system theme mode
-- `resolvedTheme: ThemeName` - Currently applied theme name
-- `availableThemes: { light: ThemeName[], dark: ThemeName[] }` - Available themes
-- `setSystemTheme: (theme: SystemTheme) => void` - Set system theme mode
-- `setSpecificTheme: (mode: "light" | "dark", theme: ThemeName) => void` - Set specific theme
-
-**ThemeName Types:**
-- `"mocha" | "frappe" | "macchiato" | "latte"` - Catppuccin themes
-- `"tokyo-night"` - Tokyo Night theme
-- `"ekkoos-light" | "ekkoos-dark"` - Ekko OS themes
-- `"ekkolyth-light" | "ekkolyth-dark"` - Ekkolyth themes
-- `"ekko-playlist-light" | "ekko-playlist-dark"` - Ekko Playlist themes
-
-### TanStack Router Theme Provider (`@ekkolyth/ui/tanstack`)
-
-Theme provider for TanStack Router applications.
+```sh
+# inside this monorepo
+"@ekkolyth/ui": "workspace:@ekkolyth/ui@*"
 
-```tsx
-import { ThemeProvider, useTheme, Toaster } from '@ekkolyth/ui/tanstack'
-import type { SystemTheme, ThemeName } from '@ekkolyth/ui/tanstack'
+# anywhere else
+bun add @ekkolyth/ui
 ```
 
-API matches Next.js provider 1:1
-
-**Note:** The `Toaster` component is exported from the theme provider entries (`/next` and `/tanstack`) and is automatically theme-aware. If you import `Toaster` from the main entry point (`@ekkolyth/ui`), it will be theme-agnostic and you'll need to pass a `theme` prop manually.
-
-### Theme Components
-
-**Theme Toggle** (`@ekkolyth/ui/themes/theme-toggle`)
-
-```tsx
-import { ThemeToggle } from '@ekkolyth/ui/themes/theme-toggle'
-import type { ThemeToggleProps } from '@ekkolyth/ui/themes/theme-toggle'
-```
-
-**Theme Select** (`@ekkolyth/ui/themes/theme-select`)
-
-```tsx
-import { ThemeSelect } from '@ekkolyth/ui/themes/theme-select'
-import type { ThemeSelectProps } from '@ekkolyth/ui/themes/theme-select'
-```
-
-### Theme Styles
-
-Import theme CSS files:
-
-```tsx
-// All themes
-import '@ekkolyth/ui/themes'
-
-// Catppuccin themes
-import '@ekkolyth/ui/catpuccin/latte'
-import '@ekkolyth/ui/catpuccin/frappe'
-import '@ekkolyth/ui/catpuccin/macchiato'
-import '@ekkolyth/ui/catpuccin/mocha'
-
-// Other themes
-import '@ekkolyth/ui/tokyo-night'
-import '@ekkolyth/ui/ekko-os'
-import '@ekkolyth/ui/ekkolyth'
-import '@ekkolyth/ui/ekko-playlist'
-```
-
-## Usage Example
+App code MUST always import through its local package alias (`@ekkolyth/ui`),
+never via `@ekkolyth/ui/*`. The canonical name exists only so the consuming
+bundler can resolve package-internal references when transpiling source.
 
 ### Next.js Setup
 
 ```tsx
 // app/layout.tsx
-import { ThemeProvider, Toaster } from '@ekkolyth/ui/next'
-import '@ekkolyth/ui/themes'
+import {
+  ThemeProvider,
+  ThemeScript,
+  Toaster,
+} from "@ekkolyth/ui/themes/provider";
+import "@ekkolyth/ui/themes";
 
 export default function RootLayout({ children }) {
   return (
     <html>
+      <head>
+        <ThemeScript defaultAppearance="system" />
+      </head>
       <body>
         <ThemeProvider
-          defaultTheme="system"
+          defaultAppearance="system"
           lightTheme={["latte", "ekkolyth-light"]}
           darkTheme={["mocha", "ekkolyth-dark"]}
         >
@@ -131,46 +44,78 @@ export default function RootLayout({ children }) {
         </ThemeProvider>
       </body>
     </html>
-  )
+  );
 }
 
 // app/page.tsx
-'use client'
-import { Button } from '@ekkolyth/ui'
-import { ThemeToggle } from '@ekkolyth/ui/themes/theme-toggle'
-import { useTheme } from '@ekkolyth/ui/next'
+("use client");
+import { Button } from "@ekkolyth/ui";
+import { ThemeToggle, useTheme } from "@ekkolyth/ui/themes/provider";
 
 export default function Page() {
-  const { systemTheme, setSystemTheme } = useTheme()
-  
+  const { appearance, setAppearance } = useTheme();
+
   return (
     <div>
       <ThemeToggle />
-      <Button onClick={() => setSystemTheme('dark')}>
-        Set Dark Mode
-      </Button>
+      <Button onClick={() => setAppearance("dark")}>Set Dark Mode</Button>
     </div>
-  )
+  );
 }
 ```
 
-### TanStack Router Setup
+### TanStack Start Setup
 
-```tsx
-// __root.tsx
-import { ThemeProvider, Toaster } from '@ekkolyth/ui/tanstack'
-import '@ekkolyth/ui/themes'
+```css
+/* src/styles.css */
+@import "tailwindcss";
+@import "@ekkolyth/ui/base.css";
+@import "@ekkolyth/ui/themes";
+```
 
-function App() {
+```tsx
+// src/routes/__root.tsx
+import {
+  createRootRoute,
+  HeadContent,
+  Outlet,
+  Scripts,
+} from "@tanstack/react-router";
+import {
+  ThemeProvider,
+  ThemeScript,
+  Toaster,
+} from "@ekkolyth/ui/themes/provider";
+import appCss from "../styles.css?url";
+
+export const Route = createRootRoute({
+  head: () => ({ links: [{ rel: "stylesheet", href: appCss }] }),
+  component: RootLayout,
+});
+
+function RootLayout() {
   return (
-    <ThemeProvider
-      defaultTheme="system"
-      lightTheme={["latte"]}
-      darkTheme={["mocha"]}
-    >
-        <Outlet />
-      <Toaster />
-    </ThemeProvider>
-  )
+    <html suppressHydrationWarning>
+      <head>
+        <HeadContent />
+        <ThemeScript defaultAppearance="system" />
+      </head>
+      <body>
+        <ThemeProvider
+          defaultAppearance="system"
+          lightTheme={["latte", "ekkolyth-light"]}
+          darkTheme={["mocha", "ekkolyth-dark"]}
+        >
+          <Outlet />
+          <Toaster />
+        </ThemeProvider>
+        <Scripts />
+      </body>
+    </html>
+  );
 }
 ```
+
+`ThemeScript` goes in `<head>` with the same props as the `ThemeProvider` it
+pairs with — it applies the stored palette before first paint, so skipping it
+just costs one frame of the wrong theme.

package/dist/base.css

@@ -0,0 +1,263 @@
+/* Base theme layer for every app consuming this package.
+ *
+ * Deliberately colourless: an app that forgets to override a token renders
+ * unthemed rather than plausibly designed. An undefined CSS variable resolves
+ * to nothing silently, which is the failure this file exists to remove.
+ *
+ * Does not import tailwindcss — the consuming app owns that import and must
+ * place it before this one, so the @apply rules below resolve. */
+
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+    --radius: 0.625rem;
+
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.45 0 0);
+    --destructive-foreground: oklch(0.985 0 0);
+    --success: oklch(0.55 0 0);
+    --warning: oklch(0.65 0 0);
+    --info: oklch(0.6 0 0);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.35 0 0);
+    --chart-2: oklch(0.45 0 0);
+    --chart-3: oklch(0.55 0 0);
+    --chart-4: oklch(0.65 0 0);
+    --chart-5: oklch(0.75 0 0);
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.6 0 0);
+    --destructive-foreground: oklch(0.985 0 0);
+    --success: oklch(0.65 0 0);
+    --warning: oklch(0.75 0 0);
+    --info: oklch(0.7 0 0);
+    --border: oklch(0.269 0 0);
+    --input: oklch(0.269 0 0);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.45 0 0);
+    --chart-2: oklch(0.55 0 0);
+    --chart-3: oklch(0.65 0 0);
+    --chart-4: oklch(0.75 0 0);
+    --chart-5: oklch(0.85 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.922 0 0);
+    --sidebar-primary-foreground: oklch(0.205 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(0.269 0 0);
+    --sidebar-ring: oklch(0.556 0 0);
+    color-scheme: dark;
+}
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-success: var(--success);
+    --color-warning: var(--warning);
+    --color-info: var(--info);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+    --radius-2xl: calc(var(--radius) + 8px);
+    --radius-3xl: calc(var(--radius) + 12px);
+    --radius-4xl: calc(var(--radius) + 16px);
+}
+
+/* Plain @theme, not @theme inline: `inline` bakes the value straight into
+ * .font-sans, which makes a per-palette override impossible. Emitting the
+ * variable to :root is what lets html[data-theme='…'] swap the face.
+ *
+ * Atkinson Hyperlegible Next and its Mono sibling are the package's default
+ * pair — designed together, and picked for legibility. The chain degrades to
+ * a real system font for a consumer who hasn't loaded the webfont. */
+@theme {
+    --font-sans:
+        'Atkinson Hyperlegible Next Variable', ui-sans-serif, system-ui,
+        sans-serif;
+    --font-mono:
+        'Atkinson Hyperlegible Mono Variable', ui-monospace, SFMono-Regular,
+        Menlo, monospace;
+}
+
+/* The sidebar is a dark panel inside a light theme, so a child reading the
+ * page-level tokens disappears: --muted-foreground is a mid grey tuned for
+ * white, --border a pale hairline that reads as a white outline. Rebinding
+ * them here means an ordinary component — and text-muted-foreground in
+ * particular — works in a sidebar without knowing it is in one. */
+[data-slot='sidebar'][data-slot],
+[data-slot='sidebar-container'][data-slot] {
+    --foreground: var(--sidebar-foreground);
+    --muted-foreground: color-mix(
+        in oklab,
+        var(--sidebar-foreground) 65%,
+        var(--sidebar)
+    );
+    --border: var(--sidebar-border);
+    --accent: var(--sidebar-accent);
+    --accent-foreground: var(--sidebar-accent-foreground);
+    --ring: var(--sidebar-ring);
+}
+
+@layer base {
+    * {
+        @apply border-border outline-ring/50;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+.prose h1,
+.prose h2,
+.prose h3 {
+    margin-top: 2.5rem;
+    margin-bottom: 0.5rem;
+}
+.prose h1 {
+    font-size: 1.5em;
+    font-weight: 600;
+}
+.prose h2 {
+    font-size: 1.25em;
+    font-weight: 600;
+}
+.prose h3 {
+    font-size: 1.125em;
+    font-weight: 600;
+}
+.prose h1:first-child,
+.prose h2:first-child,
+.prose h3:first-child {
+    margin-top: 0;
+}
+.prose h1 + * {
+    margin-top: 1.5rem;
+}
+.prose h2 + * {
+    margin-top: 1rem;
+}
+.prose h3 + * {
+    margin-top: 0.75rem;
+}
+/* @tailwindcss/typography wraps inline <code> in literal backticks via
+ * ::before/::after pseudo-content and leaves it otherwise unstyled. Strip
+ * the backticks and render inline code as a rounded muted pill. */
+.prose :not(pre) > code::before,
+.prose :not(pre) > code::after {
+    content: none;
+}
+.prose :not(pre) > code {
+    padding: 0.125rem 0.375rem;
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    font-weight: 500;
+    color: var(--foreground);
+    background-color: var(--muted);
+    border: 1px solid var(--border);
+    border-radius: 0.25rem;
+}
+.prose thead th,
+.prose tbody td,
+.prose tfoot td {
+    padding-top: 0.375rem !important;
+    padding-bottom: 0.375rem !important;
+    border-right: 1px solid color-mix(in oklab, var(--border) 40%, transparent);
+}
+.prose thead th:last-child,
+.prose tbody td:last-child,
+.prose tfoot td:last-child {
+    border-right: 0;
+}
+
+/* Shiki renders with `defaultColor: false`, so every token carries its colours
+   as --shiki-light / --shiki-dark variables and nothing else. These rules pick
+   the pair for the active theme. Without them the block has no colour at all,
+   and with shiki's default the light theme wins in dark mode — the variables
+   would be inert either way, because inline styles can only be beaten by
+   !important, which the biome config rejects. */
+.shiki {
+    background-color: var(--shiki-light-bg);
+}
+.shiki,
+.shiki span {
+    color: var(--shiki-light);
+}
+.dark .shiki {
+    background-color: var(--shiki-dark-bg);
+}
+.dark .shiki,
+.dark .shiki span {
+    color: var(--shiki-dark);
+}

package/dist/blocks.d.ts

@@ -0,0 +1,4 @@
+import { i as ColorPicker, n as Field, r as validate, t as IconPicker } from "./index-DHF8OR1R.js";
+import { n as LoadingScreenProps, t as LoadingScreen } from "./index-DsLGf2HX.js";
+import { n as WidgetLinkProps, r as WidgetProps, t as Widget } from "./index-qji4ohJZ.js";
+export { ColorPicker, Field, IconPicker, LoadingScreen, type LoadingScreenProps, Widget, type WidgetLinkProps, type WidgetProps, validate };

package/dist/blocks.js

@@ -0,0 +1,4 @@
+import { R as validate, d as Field, t as IconPicker, z as ColorPicker } from "./icon-picker-ByfHyJ7i.js";
+import { t as LoadingScreen } from "./loading-screen-DB3youyT.js";
+import { t as Widget } from "./widget-C2vjxQms.js";
+export { ColorPicker, Field, IconPicker, LoadingScreen, Widget, validate };

package/dist/container-BBg21poC.js

@@ -0,0 +1,10 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/layout/container/index.tsx
+function Container({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: ["mx-auto flex w-full max-w-7xl flex-1 flex-col p-3 md:p-6", className].filter(Boolean).join(" "),
+		...props
+	});
+}
+//#endregion
+export { Container as t };

package/dist/convex.d.ts

@@ -0,0 +1,2 @@
+import { n as LoadingScreenProps, t as LoadingScreen } from "./index-DsLGf2HX.js";
+export { LoadingScreen, type LoadingScreenProps };

package/dist/convex.js

@@ -0,0 +1,2 @@
+import { t as LoadingScreen } from "./loading-screen-DB3youyT.js";
+export { LoadingScreen };

package/dist/hooks.d.ts

@@ -0,0 +1,2 @@
+import { t as useIsMobile } from "./use-mobile-BVGje-2e.js";
+export { useIsMobile };

package/dist/hooks.js

@@ -0,0 +1,2 @@
+import { t as useIsMobile } from "./use-mobile-CqHXB_Nc.js";
+export { useIsMobile };