npm - @xenide-io/the-old-ui-theme - Versions diffs - 0.4.4 → 0.4.8 - Mend

@xenide-io/the-old-ui-theme 0.4.4 → 0.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (76) hide show

package/dist/{chunk-54ZR4VL5.mjs → chunk-RZXHZWUB.mjs} +44 -17
package/dist/{index-B5NOyoKS.d.mts → index-Od4pIP4F.d.mts} +7 -1
package/dist/{index-B5NOyoKS.d.ts → index-Od4pIP4F.d.ts} +7 -1
package/dist/index.d.mts +2 -2
package/dist/index.d.ts +2 -2
package/dist/index.js +37 -10
package/dist/index.mjs +1 -1
package/dist/suite.d.mts +152 -41
package/dist/suite.d.ts +152 -41
package/dist/suite.js +1366 -671
package/dist/suite.mjs +1304 -610
package/dist/ui.d.mts +1 -1
package/dist/ui.d.ts +1 -1
package/dist/ui.js +37 -10
package/dist/ui.mjs +1 -1
package/package.json +7 -3
package/src/components/ui/Modal.tsx +70 -26
package/src/styles/suite-skin.css +284 -24
package/src/suite/components/ai-panel.test.ts +20 -0
package/src/suite/components/ai-panel.tsx +494 -103
package/src/suite/components/suite-app-layout.tsx +48 -28
package/src/suite/components/suite-layout.tsx +84 -40
package/src/suite/components/suite-mobile-drawer.tsx +35 -22
package/src/suite/components/suite-notification-bell.tsx +9 -3
package/src/suite/components/suite-settings-layout.tsx +82 -0
package/src/suite/components/suite-settings-mobile-nav.tsx +18 -17
package/src/suite/components/suite-skeleton.tsx +3 -3
package/src/suite/components/today-calibrating.tsx +11 -35
package/src/suite/components/today-page-frame.tsx +19 -11
package/src/suite/components/today-ui.tsx +276 -19
package/src/suite/index.ts +41 -25
package/src/suite/lib/apps.ts +32 -2
package/src/suite/lib/use-sidebar-width.ts +114 -0
package/src/components/sections/AccordionShowcase.tsx +0 -45
package/src/components/sections/AlertShowcase.tsx +0 -40
package/src/components/sections/AvatarShowcase.tsx +0 -80
package/src/components/sections/BadgeShowcase.tsx +0 -65
package/src/components/sections/ButtonShowcase.tsx +0 -308
package/src/components/sections/CalendarShowcase.tsx +0 -35
package/src/components/sections/CardShowcase.tsx +0 -159
package/src/components/sections/CodeMockupShowcase.tsx +0 -56
package/src/components/sections/ColorPalette.tsx +0 -117
package/src/components/sections/CommandPaletteShowcase.tsx +0 -48
package/src/components/sections/CountdownShowcase.tsx +0 -43
package/src/components/sections/DiffShowcase.tsx +0 -70
package/src/components/sections/DrawerShowcase.tsx +0 -97
package/src/components/sections/DropdownShowcase.tsx +0 -98
package/src/components/sections/EmptyStateShowcase.tsx +0 -50
package/src/components/sections/FilterChipsShowcase.tsx +0 -98
package/src/components/sections/FormShowcase.tsx +0 -127
package/src/components/sections/HoverCardShowcase.tsx +0 -50
package/src/components/sections/IconShowcase.tsx +0 -121
package/src/components/sections/IndicatorShowcase.tsx +0 -52
package/src/components/sections/KbdShowcase.tsx +0 -57
package/src/components/sections/ModalShowcase.tsx +0 -211
package/src/components/sections/NavigationShowcase.tsx +0 -199
package/src/components/sections/NewComponentsShowcase.tsx +0 -1052
package/src/components/sections/ProductLayoutsShowcase.tsx +0 -78
package/src/components/sections/ProgressShowcase.tsx +0 -82
package/src/components/sections/QuillChartShowcase.tsx +0 -92
package/src/components/sections/QuillDashboardShowcase.tsx +0 -149
package/src/components/sections/SegmentedControlShowcase.tsx +0 -49
package/src/components/sections/SetupThemeShowcase.tsx +0 -262
package/src/components/sections/SidebarShowcase.tsx +0 -152
package/src/components/sections/StackShowcase.tsx +0 -33
package/src/components/sections/StepperShowcase.tsx +0 -37
package/src/components/sections/SuiteShowcase.tsx +0 -669
package/src/components/sections/SwapShowcase.tsx +0 -99
package/src/components/sections/TabShowcase.tsx +0 -84
package/src/components/sections/TableShowcase.tsx +0 -142
package/src/components/sections/TimelineShowcase.tsx +0 -83
package/src/components/sections/ToastShowcase.tsx +0 -108
package/src/components/sections/TooltipShowcase.tsx +0 -38
package/src/components/sections/UtilityShowcase.tsx +0 -81
package/src/styles/excel-themes.css +0 -110
package/src/styles/lemon-primitives.css +0 -550

package/src/components/sections/SetupThemeShowcase.tsx DELETED Viewed

@@ -1,262 +0,0 @@
-"use client";
-import { useEffect, useMemo, useState } from "react";
-import { CodeBlock, H3, P, Panel, ThemeSwitcher } from "@/components/ui";
-import { THEMES } from "@/themes";
-const themePairs = [
-  { name: "HedgeHog", light: "hedgehog-light", dark: "hedgehog-dark" },
-  { name: "Sheets", light: "sheets", dark: "sheets-dark" },
-  { name: "Note", light: "note", dark: "note-dark" },
-  { name: "Presentation", light: "presentation", dark: "presentation-dark" },
-  { name: "Socials", light: "socials", dark: "socials-dark" },
-  { name: "Chats", light: "chats-light", dark: "chats-dark" },
-  { name: "Catppuccin", light: "catppuccin-light", dark: "catppuccin-dark" },
-  { name: "Xenide", light: "xenide-light", dark: "xenide-dark" },
-  { name: "GitHub", light: "github-light", dark: "github-dark" },
-  { name: "Rose Pine", light: "rosepine-light", dark: "rosepine-dark" },
-  { name: "TurtleTime", light: "turtletime", dark: "turtletime-dark" },
-  { name: "Bikini Bottom", light: "bikini-bottom", dark: "bikini-bottom-dark" },
-  { name: "Notion", light: "notion", dark: "notion-dark" },
-] as const;
-const guideTokens = [
-  { label: "canvas", token: "--ph-canvas", text: "text-ph-ink" },
-  { label: "surface", token: "--ph-surface", text: "text-ph-ink" },
-  { label: "muted", token: "--ph-muted", text: "text-ph-ink" },
-  { label: "toolbar", token: "--ph-toolbar", text: "text-ph-ink" },
-  { label: "border", token: "--ph-border", text: "text-ph-ink" },
-  { label: "accent", token: "--ph-accent", text: "text-white" },
-  { label: "blue", token: "--ph-blue", text: "text-white" },
-  { label: "purple", token: "--ph-purple", text: "text-white" },
-  { label: "success", token: "--ph-success", text: "text-white" },
-  { label: "warning", token: "--ph-warning", text: "text-white" },
-  { label: "danger", token: "--ph-danger", text: "text-white" },
-  { label: "info", token: "--ph-info", text: "text-white" },
-] as const;
-const dataTokens = [1, 2, 3, 4, 5, 6, 7].map((item) => ({
-  label: `data ${item}`,
-  token: `--ph-data-${item}`,
-  text: "text-white",
-}));
-const installCode = `bun add the-old-ui
-# or
-npm install the-old-ui`;
-const layoutCode = `// app/layout.tsx
-import "the-old-ui/styles.css";
-import { THEME_INIT_SCRIPT, ThemeManager } from "the-old-ui";
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <html lang="en" data-theme="hedgehog-light" suppressHydrationWarning>
-      <head>
-        <script dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }} />
-      </head>
-      <body>
-        <ThemeManager>{children}</ThemeManager>
-      </body>
-    </html>
-  );
-}`;
-const tailwindCode = `// tailwind.config.ts
-import theOldUiPreset from "the-old-ui/tailwind-preset";
-export default {
-  presets: [theOldUiPreset],
-  content: [
-    "./src/**/*.{ts,tsx}",
-    "./app/**/*.{ts,tsx}",
-    "./node_modules/the-old-ui/dist/**/*.{js,mjs}",
-  ],
-};`;
-const switchCode = `import { ThemeSwitcher, persistTheme } from "the-old-ui";
-<ThemeSwitcher />
-// Or switch manually
-persistTheme("sheets-dark");`;
-const customThemeCode = `/* app/globals.css */
-@import "the-old-ui/styles.css";
-[data-theme="my-theme-light"] {
-  color-scheme: light;
-  --ph-canvas: #f8f5ef;
-  --ph-surface: #ffffff;
-  --ph-muted: #eee8dd;
-  --ph-toolbar: #e5dccd;
-  --ph-border: #d7cbb8;
-  --ph-border-strong: #a99b87;
-  --ph-text-primary: #15110c;
-  --ph-text-secondary: #4d4337;
-  --ph-text-tertiary: #796f63;
-  --ph-accent: #f97316;
-  --ph-accent-hover: #ea580c;
-  --ph-blue: #2563eb;
-  --ph-purple: #7c3aed;
-  --ph-success: #15803d;
-  --ph-warning: #b45309;
-  --ph-danger: #dc2626;
-  --ph-info: #2563eb;
-}
-[data-theme="my-theme-dark"] {
-  color-scheme: dark;
-  --ph-canvas: #11100e;
-  --ph-surface: #191713;
-  --ph-muted: #242018;
-  --ph-toolbar: #2e281f;
-  --ph-border: #443a2b;
-  --ph-border-strong: #7a6a54;
-  --ph-text-primary: #fff7ed;
-  --ph-text-secondary: #d8c8b6;
-  --ph-text-tertiary: #a89985;
-  --ph-accent: #fb923c;
-  --ph-accent-hover: #fdba74;
-  --ph-blue: #60a5fa;
-  --ph-purple: #a78bfa;
-  --ph-success: #4ade80;
-  --ph-warning: #facc15;
-  --ph-danger: #f87171;
-  --ph-info: #60a5fa;
-}`;
-const registryCode = `// Add to src/themes/registry.ts if this repo should show it in ThemeSwitcher
-{
-  id: "my-theme-light",
-  name: "My Theme Light",
-  description: "Custom light palette.",
-  colorScheme: "light",
-  group: "Custom",
-},
-{
-  id: "my-theme-dark",
-  name: "My Theme Dark",
-  description: "Custom dark palette.",
-  colorScheme: "dark",
-  group: "Custom",
-}`;
-export default function SetupThemeShowcase() {
-  const [activeTheme, setActiveTheme] = useState("hedgehog-light");
-  useEffect(() => {
-    const root = document.documentElement;
-    const update = () => setActiveTheme(root.getAttribute("data-theme") || "hedgehog-light");
-    update();
-    const observer = new MutationObserver(update);
-    observer.observe(root, { attributes: true, attributeFilter: ["data-theme"] });
-    return () => observer.disconnect();
-  }, []);
-  const activeThemeCode = useMemo(() => {
-    const theme = THEMES.find((item) => item.id === activeTheme);
-    return `// Current selected theme in this demo\n${JSON.stringify({
-      id: activeTheme,
-      name: theme?.name ?? activeTheme,
-      colorScheme: theme?.colorScheme ?? "light",
-      group: theme?.group ?? "Custom",
-    }, null, 2)}`;
-  }, [activeTheme]);
-  const themeListCode = useMemo(() => {
-    return `export const themePairs = ${JSON.stringify(themePairs, null, 2)} as const;`;
-  }, []);
-  return (
-    <div className="space-y-8">
-      <Panel className="space-y-4">
-        <H3>Setup</H3>
-        <P tone="subtle">
-          This demo is also the docs. A consuming app imports the package CSS once, adds the Tailwind preset, then switches palettes through <code className="ph-kbd">html[data-theme]</code>.
-        </P>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <CodeBlock code={installCode} filename="install.sh" language="bash" />
-          <CodeBlock code={tailwindCode} filename="tailwind.config.ts" />
-        </div>
-        <CodeBlock code={layoutCode} filename="app/layout.tsx" />
-      </Panel>
-      <Panel className="space-y-4">
-        <div className="flex flex-wrap items-center justify-between gap-4">
-          <div>
-            <H3>Theme Switching</H3>
-            <P tone="subtle">Each default palette is a light/dark pair. Pick one below and copy the active theme ID.</P>
-          </div>
-          <ThemeSwitcher />
-        </div>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <CodeBlock code={activeThemeCode} filename="current-theme.ts" />
-          <CodeBlock code={switchCode} filename="ThemeSwitch.tsx" />
-        </div>
-      </Panel>
-      <Panel className="space-y-4">
-        <H3>Default Theme Pairs</H3>
-        <P tone="subtle">Use these IDs with <code className="ph-kbd">data-theme</code> or <code className="ph-kbd">persistTheme()</code>.</P>
-        <CodeBlock code={themeListCode} filename="theme-pairs.ts" />
-      </Panel>
-      <Panel className="space-y-5">
-        <div>
-          <H3>Theme Color Guide</H3>
-          <P tone="subtle">
-            Every built-in theme is rendered below with its own <code className="ph-kbd">data-theme</code> attribute. These swatches are the guide for what each token becomes in that theme.
-          </P>
-        </div>
-        <div className="grid gap-4 lg:grid-cols-2">
-          {THEMES.map((theme) => (
-            <div
-              key={theme.id}
-              data-theme={theme.id}
-              className="rounded-xl border border-ph-border bg-ph-canvas p-4 shadow-ph"
-            >
-              <div className="mb-3 flex items-baseline justify-between gap-3">
-                <div>
-                  <h4 className="font-semibold text-ph-ink">{theme.name}</h4>
-                  <p className="text-xs text-ph-mutedtext">{theme.id}</p>
-                </div>
-                <span className="rounded-full border border-ph-border bg-ph-surface px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-ph-mutedtext">
-                  {theme.colorScheme}
-                </span>
-              </div>
-              <div className="grid grid-cols-3 gap-2 sm:grid-cols-4">
-                {[...guideTokens, ...dataTokens].map((item) => (
-                  <div
-                    key={item.token}
-                    className={`rounded-lg border border-ph-border p-2 ${item.text}`}
-                    style={{ background: `var(${item.token})` }}
-                  >
-                    <div className="text-[10px] font-bold uppercase tracking-wide">{item.label}</div>
-                    <div className="mt-1 truncate font-mono text-[9px] opacity-80">{item.token}</div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          ))}
-        </div>
-      </Panel>
-      <Panel className="space-y-4">
-        <H3>Custom Light & Dark Theme</H3>
-        <P tone="subtle">Custom themes are DaisyUI-style: define one light token block and one dark token block. Components read semantic tokens, not hardcoded colours.</P>
-        <div className="grid gap-4 lg:grid-cols-2">
-          <CodeBlock code={customThemeCode} filename="custom-theme.css" language="css" />
-          <CodeBlock code={registryCode} filename="registry.ts" />
-        </div>
-      </Panel>
-    </div>
-  );
-}

package/src/components/sections/SidebarShowcase.tsx DELETED Viewed

@@ -1,152 +0,0 @@
-"use client";
-import { useState } from "react";
-import { AppLayout, Sidebar, ShowcaseWrapper, Badge, Button } from "@/components/ui";
-import { Home, Bell, TriangleFlag, User, Search, Flash } from "iconoir-react";
-const sampleGroups = [
-  {
-    label: "Main",
-    items: [
-      { label: "Home", icon: <Home className="h-4 w-4" />, active: true },
-      { label: "Activity", icon: <Bell className="h-4 w-4" />, badge: <Badge variant="danger" size="sm">3</Badge> },
-      { label: "Explore", icon: <Search className="h-4 w-4" /> },
-    ],
-  },
-  {
-    label: "Workspace",
-    items: [
-      { label: "Projects", icon: <TriangleFlag className="h-4 w-4" /> },
-      { label: "People", icon: <User className="h-4 w-4" /> },
-      { label: "Automations", icon: <Flash className="h-4 w-4" /> },
-    ],
-  },
-];
-export default function SidebarShowcase() {
-  const [collapsed, setCollapsed] = useState(false);
-  return (
-    <>
-      <ShowcaseWrapper
-        id="sidebar-demo"
-        title="Sidebar + AppLayout"
-        description="Full sidebar and content layout with grouped navigation, icons, badges, and collapse support."
-        code={`import { AppLayout, Sidebar } from "@xenide-io/the-old-ui-theme";
-<AppLayout
-  sidebar={
-    <Sidebar
-      groups={[
-        { label: "Main", items: [
-          { label: "Home", icon: <Home className="h-4 w-4" />, active: true },
-          { label: "Activity", icon: <Bell className="h-4 w-4" />, badge: <Badge>3</Badge> },
-        ]},
-      ]}
-      header={<div className="font-bold">My App</div>}
-      footer={<span className="text-xs text-ph-mutedtext">v1.0</span>}
-    />
-  }
->
-  <div className="p-6">
-    <h1>Main content area</h1>
-  </div>
-</AppLayout>`}
-      >
-        <div className="space-y-4">
-          <Button
-            variant="secondary"
-            size="sm"
-            onClick={() => setCollapsed(!collapsed)}
-          >
-            {collapsed ? "Expand sidebar" : "Collapse sidebar"}
-          </Button>
-          <div className="overflow-hidden rounded-lg border border-ph-border" style={{ height: 360 }}>
-            <AppLayout
-              sidebarWidth={collapsed ? 56 : 220}
-              sidebar={
-                <Sidebar
-                  groups={sampleGroups}
-                  collapsed={collapsed}
-                  header={
-                    <div className="flex items-center gap-2">
-                      <div className="h-6 w-6 rounded bg-ph-brand flex items-center justify-center text-xs font-bold text-[var(--ph-on-accent)]">T</div>
-                      {!collapsed && <span className="text-sm font-bold text-ph-ink">The Old UI</span>}
-                    </div>
-                  }
-                  footer={
-                    !collapsed ? <span className="text-xs text-ph-mutedtext px-2">v0.3.2</span> : null
-                  }
-                />
-              }
-            >
-              <div className="flex h-full items-center justify-center bg-ph-canvas">
-                <p className="text-sm text-ph-mutedtext">Content area — click sidebar items</p>
-              </div>
-            </AppLayout>
-          </div>
-        </div>
-      </ShowcaseWrapper>
-      <ShowcaseWrapper
-        id="sidebar-props"
-        title="Sidebar Props"
-        description="Sidebar component API reference."
-        code={`// SidebarGroup
-interface SidebarGroup {
-  label: string;
-  items: SidebarItemDef[];
-}
-// SidebarItemDef
-interface SidebarItemDef {
-  label: string;
-  icon?: ReactNode;
-  href?: string;
-  badge?: ReactNode;
-  active?: boolean;
-  onClick?: () => void;
-}
-// SidebarProps
-interface SidebarProps {
-  groups: SidebarGroup[];
-  className?: string;
-  header?: ReactNode;
-  footer?: ReactNode;
-  collapsed?: boolean;
-  onCollapse?: (collapsed: boolean) => void;
-}
-// AppLayoutProps
-interface AppLayoutProps {
-  sidebar: ReactNode;
-  children: ReactNode;
-  sidebarWidth?: number;
-  className?: string;
-}`}
-      >
-        <div className="grid gap-4 sm:grid-cols-2">
-          <div className="ph-panel space-y-2">
-            <h3 className="text-sm font-semibold text-ph-ink">AppLayout</h3>
-            <p className="text-xs text-ph-subtle">CSS grid wrapper with fixed sidebar + fluid content.</p>
-            <ul className="space-y-1 text-xs text-ph-subtle">
-              <li><span className="font-medium text-ph-ink">sidebar</span> — ReactNode for left column</li>
-              <li><span className="font-medium text-ph-ink">sidebarWidth</span> — px width (default 240)</li>
-              <li><span className="font-medium text-ph-ink">children</span> — main content area</li>
-            </ul>
-          </div>
-          <div className="ph-panel space-y-2">
-            <h3 className="text-sm font-semibold text-ph-ink">Sidebar</h3>
-            <p className="text-xs text-ph-subtle">Grouped navigation with icons, badges, collapse.</p>
-            <ul className="space-y-1 text-xs text-ph-subtle">
-              <li><span className="font-medium text-ph-ink">groups</span> — labeled sections with items</li>
-              <li><span className="font-medium text-ph-ink">collapsed</span> — icon-only mode</li>
-              <li><span className="font-medium text-ph-ink">header/footer</span> — top/bottom slots</li>
-            </ul>
-          </div>
-        </div>
-      </ShowcaseWrapper>
-    </>
-  );
-}

package/src/components/sections/StackShowcase.tsx DELETED Viewed

@@ -1,33 +0,0 @@
-import { ShowcaseWrapper } from "@/components/ui";
-export default function StackShowcase() {
-  const code = `
-<div className="rounded-xl border border-ph-border bg-ph-muted p-10">
-  <div className="relative mx-auto h-44 w-48">
-    <div className="absolute inset-3 translate-x-4 translate-y-4 rounded-xl border border-ph-border bg-ph-toolbar shadow-ph ring-8 ring-ph-muted" />
-    <div className="absolute inset-y-7 left-8 right-[-1rem] translate-x-1 rounded-xl border border-ph-border bg-ph-blue text-center text-xs font-semibold uppercase leading-[4.75rem] text-white shadow-ph ring-8 ring-ph-muted">
-      Replay
-    </div>
-    <div className="absolute inset-x-5 top-0 flex h-[5.75rem] items-center justify-center rounded-xl border border-ph-border bg-ph-surface shadow-ph-md ring-8 ring-ph-muted">
-      <span className="text-sm font-bold text-ph-brand">Trends insight</span>
-    </div>
-  </div>
-</div>`;
-  return (
-    <ShowcaseWrapper title="Stacked surfaces" code={code} filename="StackExample.tsx">
-      <div className="rounded-xl border border-ph-border bg-ph-muted p-10">
-        <div className="relative mx-auto h-44 w-48">
-          <div className="absolute inset-3 translate-x-4 translate-y-4 rounded-xl border border-ph-border bg-ph-toolbar shadow-ph ring-8 ring-ph-muted" />
-          <div className="absolute inset-y-7 left-8 right-[-1rem] translate-x-1 rounded-xl border border-ph-border bg-ph-blue text-center text-xs font-semibold uppercase leading-[4.75rem] text-white shadow-ph ring-8 ring-ph-muted">
-            Replay
-          </div>
-          <div className="absolute inset-x-5 top-0 flex h-[5.75rem] items-center justify-center rounded-xl border border-ph-border bg-ph-surface shadow-ph-md ring-8 ring-ph-muted">
-            <span className="text-sm font-bold text-ph-brand">Trends insight</span>
-          </div>
-        </div>
-      </div>
-    </ShowcaseWrapper>
-  );
-}

package/src/components/sections/StepperShowcase.tsx DELETED Viewed

@@ -1,37 +0,0 @@
-import { ComponentDocs, ShowcaseWrapper, Stepper } from "@/components/ui";
-export default function StepperShowcase() {
-  const steps = [
-    { id: "1", label: "Account", description: "Login details" },
-    { id: "2", label: "Profile", description: "Personal info" },
-    { id: "3", label: "Settings", description: "Preferences" },
-    { id: "4", label: "Review", description: "Confirm" },
-  ];
-  const code = `import { Stepper } from "the-old-ui";
-<div className="ph-panel">
-  <Stepper steps={steps} currentStep={1} />
-</div>`;
-  return (
-    <ShowcaseWrapper
-      title="Stepper"
-      description="Step progress indicator for setup, onboarding, and multi-stage forms."
-      code={code}
-      filename="StepperExample.tsx"
-      docs={
-        <ComponentDocs
-          rows={[
-            { name: "steps", type: "{ id; label; description? }[]", description: "Steps shown in order." },
-            { name: "currentStep", type: "number", description: "Zero-based active step index." },
-          ]}
-        />
-      }
-    >
-      <div className="ph-panel">
-        <Stepper steps={steps} currentStep={1} />
-      </div>
-    </ShowcaseWrapper>
-  );
-}