@rebasepro/ui 0.17.3 → 0.18.0

package/src/icons/index.ts

@@ -1,179 +0,0 @@
-export * from "./icon_keys";
-export * from "./cool_icon_keys";
-export * from "./Icon";
-export * from "./GitHubIcon";
-export * from "./HandleIcon";
-
-export type { LucideProps, LucideIcon } from "lucide-react";
-export * from "./LucideIconByName";
-
-/**
- * lucide's full `icons` map, keyed by PascalCase name.
- *
- * Read the cost before reaching for it. The map holds a reference to every
- * icon in the library, so importing it pulls all ~1,750 into whatever chunk
- * you import it from — measured at **822 kB uncompressed**. There is no
- * tree-shaking that helps: the object literal names them all.
- *
- * It used to be reached by this package's own navigation chrome, which put
- * that 822 kB in the entry chunk, modulepreloaded on the login screen, for
- * every visitor of every Rebase admin panel. Those call sites now use
- * {@link LucideIconByName}, so the weight is no longer anybody's by default —
- * it is yours only if you import this binding.
- *
- * Prefer, in order:
- *
- * - {@link LucideIconByName} — renders by name, fetches the set on first use;
- * - {@link iconKeys} — a plain string array, if you only need to know whether
- *   a name exists (costs nothing);
- * - {@link loadLucideIcons} — the same map, `await`ed, so it lands in an async
- *   chunk instead of your entry;
- * - this, when you genuinely need the whole map synchronously at module scope.
- *
- * @see LucideIconByName
- * @see loadLucideIcons
- */
-export { icons as lucideIcons } from "lucide-react";
-
-// Re-export individual icon components used across the monorepo.
-// Sub-packages import these from @rebasepro/ui instead of declaring a direct
-// lucide-react dependency.  When a new icon is needed, add it here.
-export {
-    AlertCircleIcon,
-    AlertTriangleIcon,
-    AlignLeftIcon,
-    AppWindow,
-    ArrowDownIcon,
-    ArrowDownToLineIcon,
-    ArrowLeftIcon,
-    ArrowRightFromLineIcon,
-    ArrowRightIcon,
-    ArrowRightLeftIcon,
-    ArrowRightToLineIcon,
-    ArrowUpDownIcon,
-    ArrowUpIcon,
-    ArrowUpToLineIcon,
-    BoldIcon,
-    BookOpenIcon,
-    CalendarIcon,
-    CheckCircle2Icon,
-    CheckCircleIcon,
-    CheckIcon,
-    CheckSquareIcon,
-    ChevronDownIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    ChevronUpIcon,
-    ChevronsLeftIcon,
-    ChevronsRightIcon,
-    ChevronsUpDownIcon,
-    CircleDotIcon,
-    CircleIcon,
-    CircleUserIcon,
-    CodeIcon,
-    ColumnsIcon,
-    CopyIcon,
-    DatabaseIcon,
-    DollarSignIcon,
-    DownloadIcon,
-    ExternalLinkIcon,
-    EyeIcon,
-    EyeOffIcon,
-    FileIcon,
-    FileSearchIcon,
-    FileTextIcon,
-    FilterIcon,
-    FilterXIcon,
-    FlagIcon,
-    FolderIcon,
-    FolderKanbanIcon,
-    FolderPlusIcon,
-    FolderUpIcon,
-    FunctionSquareIcon,
-    GitBranchIcon,
-    GlobeIcon,
-    HashIcon,
-    Heading1Icon,
-    Heading2Icon,
-    Heading3Icon,
-    HelpCircleIcon,
-    HistoryIcon,
-    HomeIcon,
-    ImageIcon,
-    ImageOffIcon,
-    InfoIcon,
-    ItalicIcon,
-    KanbanIcon,
-    KeyIcon,
-    KeyRoundIcon,
-    LanguagesIcon,
-    LayoutGridIcon,
-    LinkIcon,
-    Link2Icon,
-    Unlink2Icon,
-    ListIcon,
-    LockIcon,
-    ListOrderedIcon,
-    ListPlusIcon,
-    ListTodoIcon,
-    LoaderIcon,
-    LogOutIcon,
-    MailIcon,
-    Maximize2Icon,
-    MenuIcon,
-    MessageCircleIcon,
-    MinusCircleIcon,
-    MinusIcon,
-    MoonIcon,
-    MoreVerticalIcon,
-    Music2Icon,
-    PanelLeftCloseIcon,
-    PanelLeftIcon,
-    PanelLeftOpenIcon,
-    PauseIcon,
-    PenLineIcon,
-    PencilIcon,
-    PhoneIcon,
-    PinIcon,
-    PlayIcon,
-    PlusIcon,
-    QuoteIcon,
-    RefreshCcwIcon,
-    RefreshCwIcon,
-    RepeatIcon,
-    Rows3Icon,
-    SaveIcon,
-    SearchIcon,
-    SendIcon,
-    SettingsIcon,
-    ShieldIcon,
-    ShoppingCartIcon,
-    SlidersHorizontalIcon,
-    SquareIcon,
-    StarIcon,
-    StickyNoteIcon,
-    StrikethroughIcon,
-    SunIcon,
-    SunMoonIcon,
-    TableIcon,
-    TagIcon,
-    TerminalIcon,
-    TextIcon,
-    Trash2Icon,
-    TrendingUpIcon,
-    TypeIcon,
-    UnderlineIcon,
-    UndoIcon,
-    UploadCloudIcon,
-    UploadIcon,
-    UserCheckIcon,
-    UserIcon,
-    UserPlus,
-    UsersIcon,
-    VideoIcon,
-    VoteIcon,
-    Wand2Icon,
-    WrenchIcon,
-    XCircleIcon,
-    XIcon
-} from "lucide-react";

package/src/index.css

@@ -1,169 +0,0 @@
-@import "./theme.css";
-
-/* Grayscale antialiasing, not macOS's subpixel default.
-   This is the single largest reason the same typeface can look like a
-   different one between two pages: subpixel-antialiased text renders visibly
-   heavier and slightly fuzzier, and the effect is worst for light text on dark
-   backgrounds — which is most of this product and all of the marketing site.
-   Design comps that set this and shipped pages that do not will never match,
-   no matter how carefully the font, size, weight and tracking are aligned. */
-html {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-/* Native UI (scrollbars, form controls) must follow the active theme,
-   otherwise Chrome renders light scrollbars in dark mode */
-html {
-    color-scheme: light;
-}
-
-html.dark {
-    color-scheme: dark;
-}
-
-/* Chrome, Safari and Opera */
-.no-scrollbar::-webkit-scrollbar {
-    display: none;
-}
-
-.no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-}
-
-/* Optical ladder: weight comes down as size comes down, tracking tightens as
-   size goes up. Seven consecutive levels of semibold was a Rubik-era setting,
-   and holding 600 all the way down to text-sm made every heading shout equally
-   — a heading stops being a headline somewhere, and the scale should say where.
-
-   The ladder spans three weights — 400/500/600 — and 600 is the ceiling. No
-   tier goes to 700: the display end separates itself by SIZE and tracking, not
-   by weight, and a 30px 700 next to a 30px 500 elsewhere on the same product
-   reads as two different type systems rather than one ladder.
-
-   Both faces load as VARIABLE fonts (@fontsource-variable/inter,
-   @fontsource-variable/instrument-sans), so the whole axis ships either way —
-   the 600 ceiling is a design decision, not a payload one.
-
-   With a single face carrying both headings and body, weight and tracking are
-   the only things separating a heading from the copy around it — so the tiers
-   have to actually differ, rather than all sitting at 600.
-
-   REVISED 2026-08-24. The ladder above described weight falling with size, but
-   the code ran 500/500/600/600/500/500 — a hump, where the LARGEST headings
-   were the LIGHTEST and h3 outweighed h1. Two rules were in play and neither
-   won cleanly. It is now monotonic: 600 for headings of consequence (h1-h4),
-   500 for small labels (h5/h6), 400 body. The display end still separates
-   itself by SIZE and tracking, which is what the paragraph above asks of it;
-   what it no longer does is separate itself by being *lighter* than the
-   smaller headings beneath it. 600 remains the ceiling. */
-
-/* 600. This reverses the earlier "500, not 700" setting — not back toward 700,
-   which stays banned, but up to the ceiling the ladder already used for h3/h4.
-   The 500 was only ever visible in production: the dev-only TypeDevPanel has
-   shipped a `wd: 600` default that overrode this with !important, so every
-   local preview of this site has been 600 while rebase.pro rendered 500. The
-   panel's constant is now telling the truth. */
-.typography-h1 {
-    @apply text-4xl font-headers font-semibold tracking-display;
-}
-
-.typography-h2 {
-    @apply text-3xl font-headers font-semibold tracking-display;
-}
-
-.typography-h3 {
-    @apply text-2xl font-headers font-semibold tracking-title;
-}
-
-/* Semibold, not medium: h4 is the section heading inside a page, and at 20px
-   medium sits close enough to body copy that a long page reads as one
-   undifferentiated column. */
-.typography-h4 {
-    @apply text-xl font-headers font-semibold tracking-title;
-}
-
-.typography-h5 {
-    @apply text-lg font-headers font-medium tracking-heading;
-}
-
-.typography-h6 {
-    @apply text-base font-headers font-medium tracking-heading;
-}
-
-.typography-subtitle1 {
-    @apply text-sm font-headers font-medium tracking-heading;
-}
-
-.typography-subtitle2 {
-    @apply text-sm font-headers font-medium;
-}
-
-.typography-body1 {
-    @apply text-sm;
-}
-
-.typography-body2 {
-    @apply text-xs;
-}
-
-.typography-caption {
-    @apply text-[11px] leading-[1.4];
-}
-
-.typography-label {
-    @apply text-xs font-medium tracking-wide;
-}
-
-.typography-inherit {
-    @apply text-inherit;
-}
-
-.typography-button {
-    @apply text-sm font-semibold tracking-wide;
-}
-
-/* ---------------------------------------------------------------------------
- * Three tiers the product kept improvising because the system had no name for
- * them. Each existed as hand-written utilities in several places before it
- * existed here, which is the definition of a missing token.
- * ------------------------------------------------------------------------- */
-
-/* The sentence under a page title. `body2` (12px) was standing in for it, which
-   made the one line explaining what a page is FOR smaller than the page's own
-   table rows. A lead is read once, deliberately, and it gets room to be read. */
-.typography-lead {
-    @apply text-base leading-relaxed;
-}
-
-/* The micro-label above a value: SCANNED, KEPT, TOOK, WHEN. Uppercase and
-   tracked so it reads as a field name rather than as copy, and small enough
-   that it never competes with the value it names.
-
-   This is the one product tier below `text-xs`. It earns the exception by never
-   carrying a sentence — it is always one or two words naming the thing directly
-   underneath it, and at 11px uppercase with this tracking it stays legible
-   where 11px prose would not. */
-.typography-micro {
-    @apply text-2xs font-medium uppercase tracking-[0.08em];
-}
-
-/* A measured value: a count, a duration, a timestamp, an id, a size.
-   `tabular-nums` is the point — proportional digits make a column of numbers
-   ragged and a live-updating counter jitter as its glyphs change width. */
-.typography-mono {
-    @apply font-mono tabular-nums;
-}
-
-/* The headline number on a stat tile. Display tracking and tabular figures so a
-   row of tiles shares a baseline grid. Semibold, not bold: the number is
-   already the largest thing on the tile, and 600 is the system ceiling. */
-.typography-stat {
-    @apply text-3xl font-headers font-semibold tracking-display tabular-nums;
-}
-
-:focus-visible {
-    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:ring-offset-transparent
-}
-

package/src/index.ts

@@ -1,47 +0,0 @@
-// =============================================================================
-// Components
-// =============================================================================
-export * from "./components";
-
-// =============================================================================
-// Views
-// =============================================================================
-export * from "./views";
-
-// =============================================================================
-// Icons
-// =============================================================================
-export * from "./icons";
-
-// =============================================================================
-// Design System Utilities
-// =============================================================================
-export * from "./styles";
-export { cls } from "./util/cls";
-export { lazyChunk, loadChunk, isChunkLoadError } from "./util/lazy_chunk";
-export { CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors";
-export type { ChipHue, ChipTone } from "./util/chip_colors";
-
-// =============================================================================
-// Public Hooks
-// =============================================================================
-export { useOutsideAlerter } from "./hooks/useOutsideAlerter";
-export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
-export { useDebounceCallback } from "./hooks/useDebounceCallback";
-export { useDebounceValue } from "./hooks/useDebounceValue";
-export { useInjectStyles } from "./hooks/useInjectStyles";
-export { PortalContainerProvider, usePortalContainer } from "./hooks/PortalContainerContext";
-export type { PortalContainerContextType, PortalContainerProviderProps } from "./hooks/PortalContainerContext";
-
-// =============================================================================
-// Lower-level utilities (used by framework packages)
-// =============================================================================
-export { debounce } from "./util/debounce";
-export type { Cancelable } from "./util/debounce";
-
-// =============================================================================
-// NOT exported (internal plumbing — import directly if needed):
-//
-//   ./util/hash                   – hashString
-//   ./util/key_to_icon_component  – keyToIconComponent
-// =============================================================================

package/src/scripts/fixIconSizes.cjs

@@ -1,92 +0,0 @@
-#!/usr/bin/env node
-/**
- * Migration script: fix lucide-react icon size props.
- *
- * Replaces string-based size props on lucide icon components
- * with numeric values from the iconSize map:
- *   "smallest" -> 16
- *   "small" -> 20
- *   "medium" -> 24
- *   "large" -> 28
- *
- * Only targets lines that match lucide icon component patterns
- * (PascalCase names ending with "Icon"), NOT IconButton/CircularProgress/etc.
- */
-
-const fs = require("fs");
-const path = require("path");
-
-const SIZE_MAP = {
-    smallest: 16,
-    small: 20,
-    medium: 24,
-    large: 28
-};
-
-const files = process.argv.slice(2);
-
-if (files.length === 0) {
-    console.error("Usage: node fixIconSizes.js <file1> <file2> ...");
-    process.exit(1);
-}
-
-let totalReplacements = 0;
-
-for (const filePath of files) {
-    const content = fs.readFileSync(filePath, "utf8");
-    let modified = content;
-    let fileReplacements = 0;
-
-    // Match patterns like: <SomeIcon size={"small"}/> or <SomeIcon size="small"/>
-    // But NOT <IconButton, <CircularProgress, <CollectionSize, <AIIcon, <FileIcon, <IconForView
-    // We target lines where the JSX tag name is a PascalCase name ending with "Icon"
-    // preceded by < (opening tag)
-    for (const [sizeStr, sizeNum] of Object.entries(SIZE_MAP)) {
-        // Pattern: size={"sizeStr"} on Icon components (not IconButton etc.)
-        // We replace size={"small"} -> size={20} only when it appears on a lucide icon line
-        const patterns = [
-            `size={"${sizeStr}"}`,
-            `size="${sizeStr}"`
-        ];
-
-        for (const pattern of patterns) {
-            const replacement = `size={${sizeNum}}`;
-
-            // Process line by line to check context
-            const lines = modified.split("\n");
-            for (let i = 0; i < lines.length; i++) {
-                const line = lines[i];
-                if (!line.includes(pattern)) continue;
-
-                // Skip if this is IconButton, CircularProgress, or other non-lucide components
-                if (/\<(IconButton|CircularProgress|Icon |AIIcon|FileIcon|IconForView|CollectionSize)/.test(line)) continue;
-
-                // Check if this line contains a lucide-style icon component (PascalCase ending with Icon)
-                if (/\<[A-Z][a-zA-Z0-9]+Icon/.test(line)) {
-                    const newLine = line.replace(pattern, replacement);
-                    if (newLine !== line) {
-                        lines[i] = newLine;
-                        fileReplacements++;
-                    }
-                }
-            }
-            modified = lines.join("\n");
-        }
-    }
-
-    if (fileReplacements > 0) {
-        // Check if file uses iconSize import, add if not
-        if (modified.includes("iconSize") === false && /\bsize=\{(16|20|24|28)\}/.test(modified)) {
-            // Add iconSize import — but actually we're using raw numbers, not iconSize references
-            // So no import needed. The migration from previous session already set up the constants.
-        }
-
-        fs.writeFileSync(filePath, modified, "utf8");
-        console.log(`✅ ${path.relative(process.cwd(), filePath)}: ${fileReplacements} replacement(s)`);
-        totalReplacements += fileReplacements;
-    } else {
-        console.log(`⏭️  ${path.relative(process.cwd(), filePath)}: no changes`);
-    }
-}
-
-console.log(`\nTotal: ${totalReplacements} replacements across ${files.length} files`);

package/src/scripts/fixIconSizesToConst.cjs

@@ -1,106 +0,0 @@
-#!/usr/bin/env node
-/**
- * Replace raw numeric icon sizes with iconSize.xxx constants
- * and add the import if needed.
- *
- *   size={16} -> size={iconSize.smallest}
- *   size={20} -> size={iconSize.small}
- *   size={24} -> size={iconSize.medium}
- *   size={28} -> size={iconSize.large}
- */
-
-const fs = require("fs");
-const path = require("path");
-
-const SIZE_MAP = {
-    16: "iconSize.smallest",
-    20: "iconSize.small",
-    24: "iconSize.medium",
-    28: "iconSize.large"
-};
-
-// Regex to match lucide icon components with raw numeric sizes
-// e.g. <FilterIcon size={20}/> or <ArrowLeftIcon size={16}/>
-const ICON_SIZE_RE = /<([A-Z][a-zA-Z0-9]*Icon)\b[^>]*\bsize=\{(16|20|24|28)\}/;
-
-const files = process.argv.slice(2);
-if (!files.length) {
-    console.error("Usage: node fixIconSizesToConst.cjs <files...>");
-    process.exit(1);
-}
-
-let totalReplacements = 0;
-
-for (const filePath of files) {
-    let content = fs.readFileSync(filePath, "utf8");
-    let fileReplacements = 0;
-
-    // Check if file has any lucide icon with raw numeric size
-    if (!ICON_SIZE_RE.test(content)) {
-        continue;
-    }
-
-    // Replace size={16|20|24|28} on Icon component lines
-    const lines = content.split("\n");
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i];
-        // Skip non-icon components
-        if (/\<(IconButton|CircularProgress|Icon |AIIcon|FileIconComp|IconForView|CollectionSize)/.test(line)) continue;
-
-        // Only target lucide icon components
-        if (/<[A-Z][a-zA-Z0-9]*Icon\b/.test(line)) {
-            let newLine = line;
-            for (const [num, constant] of Object.entries(SIZE_MAP)) {
-                newLine = newLine.replace(
-                    new RegExp(`size=\\{${num}\\}`, "g"),
-                    `size={${constant}}`
-                );
-            }
-            if (newLine !== line) {
-                lines[i] = newLine;
-                fileReplacements += (line.match(/size=\{(16|20|24|28)\}/g) || []).length;
-            }
-        }
-    }
-
-    if (fileReplacements === 0) continue;
-
-    content = lines.join("\n");
-
-    // Add iconSize import if not already present
-    if (!content.includes("iconSize")) {
-        // This shouldn't happen since we just added it, but safety check
-    }
-
-    if (content.includes("iconSize") && !content.match(/import\s.*iconSize/)) {
-        // Try to add to existing @rebasepro/ui import
-        const uiImportRe = /import\s*\{([^}]+)\}\s*from\s*["']@rebasepro\/ui["']/;
-        const match = content.match(uiImportRe);
-        if (match) {
-            const existingImports = match[1];
-            if (!existingImports.includes("iconSize")) {
-                content = content.replace(
-                    uiImportRe,
-                    `import {${existingImports}, iconSize } from "@rebasepro/ui"`
-                );
-            }
-        } else {
-            // Add new import after the last import line
-            const importLines = content.split("\n");
-            let lastImportIdx = -1;
-            for (let i = 0; i < importLines.length; i++) {
-                if (/^import\s/.test(importLines[i])) lastImportIdx = i;
-            }
-            if (lastImportIdx >= 0) {
-                importLines.splice(lastImportIdx + 1, 0, 'import { iconSize } from "@rebasepro/ui";');
-                content = importLines.join("\n");
-            }
-        }
-    }
-
-    fs.writeFileSync(filePath, content, "utf8");
-    console.log(`✅ ${path.relative(process.cwd(), filePath)}: ${fileReplacements} replacement(s)`);
-    totalReplacements += fileReplacements;
-}
-
-console.log(`\nTotal: ${totalReplacements} replacements`);

package/src/scripts/generateIconKeys.ts

@@ -1,41 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { fileURLToPath } from "url";
-import * as LucideIcons from "lucide-react";
-
-export async function generateIconKeys() {
-    const keys = Object.keys(LucideIcons).filter(k =>
-        k !== "createLucideIcon" &&
-        k !== "default" &&
-        k !== "icons" &&
-        k !== "LucideIcon" &&
-        k !== "Icon" &&
-        k !== "LucideProvider" &&
-        k !== "useLucideContext" &&
-        !k.endsWith("Node") &&
-        !k.endsWith("Props") &&
-        !k.endsWith("Icon") &&
-        // Filter out Lucide-prefixed duplicates (e.g. "LucideArrowDown" duplicates "ArrowDown")
-        !k.startsWith("Lucide")
-    );
-
-    // Remove case-insensitive duplicates (e.g. "ArrowDownAZ" vs "ArrowDownAz"),
-    // keeping the first occurrence (typically the canonical PascalCase name)
-    const seen = new Set<string>();
-    const deduped = keys.filter(k => {
-        const lower = k.toLowerCase();
-        if (seen.has(lower)) return false;
-        seen.add(lower);
-        return true;
-    });
-
-    saveIconKeys(deduped);
-    return deduped;
-}
-
-function saveIconKeys(keys: string[]) {
-    const __dirname = path.dirname(fileURLToPath(import.meta.url));
-    fs.writeFileSync(path.join(__dirname, "../icons/icon_keys.ts"), `export const iconKeys = ${JSON.stringify(keys, null, 4)};`);
-}
-
-generateIconKeys();

package/src/scripts/generateIcons.ts

@@ -1,4 +0,0 @@
-import { generateIconKeys } from "./generateIconKeys.ts";
-import { saveIconFiles } from "./saveIconFiles.ts";
-
-generateIconKeys().then(saveIconFiles);