@lar-works/design-system 0.0.0-stage → 0.1.0

package/src/foundations/DesignSystemProvider.tsx

@@ -0,0 +1,79 @@
+/* oxlint-disable react/only-export-components -- Provider and consumer share the same UI label contract. */
+import { LucideProvider } from 'lucide-react';
+import { createContext, type ReactNode, useContext, useMemo } from 'react';
+
+/** The design system's own words, in English. Apps pass their translations through DesignSystemProvider. */
+export const defaultDesignSystemLabels = {
+    close: 'Close',
+    cancel: 'Cancel',
+    retry: 'Try again',
+    toolbar: 'Toolbar',
+    imageSize: (width: number, height: number) => `${width} × ${height}`,
+    folders: {
+        path: 'Folder path',
+        selectedPath: (path: string) => `Selected folder: ${path}`,
+        open: (name: string) => `Open ${name}`,
+        chooseFolder: 'Choose folder',
+        title: 'Select a folder',
+        root: 'Root',
+        upOneLevel: 'Up one level',
+        loading: 'Loading folders',
+        loadFailed: 'Could not load folders',
+        empty: 'No folders',
+        loadMore: 'Load more',
+        chooseThis: 'Choose this folder',
+    },
+    theme: {
+        label: 'Appearance',
+        system: 'Match system',
+        light: 'Light',
+        dark: 'Dark',
+    },
+};
+
+export type DesignSystemLabels = typeof defaultDesignSystemLabels;
+
+/** The labels an app translates: any group or label left out keeps its English default. */
+export type DesignSystemLabelOverrides = {
+    [Key in keyof DesignSystemLabels]?: DesignSystemLabels[Key] extends (...args: never[]) => unknown
+        ? DesignSystemLabels[Key]
+        : DesignSystemLabels[Key] extends object
+          ? Partial<DesignSystemLabels[Key]>
+          : DesignSystemLabels[Key];
+};
+
+const LabelContext = createContext(defaultDesignSystemLabels);
+
+/** Lucide draws on a 24px grid at a 2px stroke; 1.75 matches the weight of Lar's type at the sizes icons use. */
+const iconStrokeWidth = 1.75;
+
+export function DesignSystemProvider({
+    children,
+    labels,
+}: {
+    children: ReactNode;
+    labels?: DesignSystemLabelOverrides;
+}) {
+    const value = useMemo(() => mergeLabels(labels), [labels]);
+
+    return (
+        <LabelContext.Provider value={value}>
+            <LucideProvider strokeWidth={iconStrokeWidth}>{children}</LucideProvider>
+        </LabelContext.Provider>
+    );
+}
+
+function mergeLabels(labels: DesignSystemLabelOverrides | undefined): DesignSystemLabels {
+    if (!labels) return defaultDesignSystemLabels;
+
+    return {
+        ...defaultDesignSystemLabels,
+        ...labels,
+        folders: { ...defaultDesignSystemLabels.folders, ...labels.folders },
+        theme: { ...defaultDesignSystemLabels.theme, ...labels.theme },
+    };
+}
+
+export function useDesignSystemLabels() {
+    return useContext(LabelContext);
+}

package/src/foundations/KeyboardFocus.ts

@@ -0,0 +1,6 @@
+/**
+ * Safari, and Firefox while macOS keyboard navigation is off, move Tab only between text fields unless an
+ * element sets its tab index explicitly. Controls spread this before their own props, so Tab reaches every
+ * button, switch, select, radio and link in every browser and callers can still opt out with `tabIndex={-1}`.
+ */
+export const tabbable = { tabIndex: 0 } as const;

package/src/foundations/KeyboardShortcut.ts

@@ -0,0 +1,12 @@
+/** Apple devices write the app's shortcuts with ⌘; everything else uses Ctrl. */
+export const applePlatform = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent);
+
+/** Whether a key press is the shortcut ⌘<key> (Ctrl+<key> off Apple devices), with no other modifier. */
+export function isShortcut(event: KeyboardEvent, key: string): boolean {
+    return (
+        event.key.toLowerCase() === key.toLowerCase() &&
+        (applePlatform ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey) &&
+        !event.altKey &&
+        !event.shiftKey
+    );
+}

package/src/foundations/Theme.ts

@@ -0,0 +1,75 @@
+import { useSyncExternalStore } from 'react';
+
+export type ThemePreference = 'system' | 'light' | 'dark';
+
+export interface ThemeController {
+    /** Applies the stored preference before the first render, so the page never flashes the other theme. */
+    initialize(): void;
+    /** The current preference and a setter that stores and applies it, kept in step across tabs. */
+    useTheme(): readonly [ThemePreference, (value: ThemePreference) => void];
+}
+
+export function isThemePreference(value: string): value is ThemePreference {
+    return value === 'system' || value === 'light' || value === 'dark';
+}
+
+/** The page backgrounds, which Safari and installed web apps extend into their own chrome. */
+const themeColors = { light: '#fcfcfc', dark: '#0a0a0a' } as const;
+
+/**
+ * The light/dark preference of one app, stored under `storageKey` in localStorage. The preference sets `.light` or
+ * `.dark` on <html> (nothing follows the system) and points the page's `theme-color` metas at the matching background.
+ */
+export function createThemeController(storageKey: string): ThemeController {
+    const changeEvent = `${storageKey}-change`;
+
+    function read(): ThemePreference {
+        const stored = window.localStorage.getItem(storageKey);
+
+        return stored && isThemePreference(stored) ? stored : 'system';
+    }
+
+    function set(preference: ThemePreference): void {
+        window.localStorage.setItem(storageKey, preference);
+        applyThemePreference(preference);
+        window.dispatchEvent(new Event(changeEvent));
+    }
+
+    function subscribe(onChange: () => void): () => void {
+        function handleStorageChange(event: StorageEvent): void {
+            if (event.key !== storageKey) return;
+
+            applyThemePreference(read());
+            onChange();
+        }
+
+        window.addEventListener(changeEvent, onChange);
+        window.addEventListener('storage', handleStorageChange);
+
+        return () => {
+            window.removeEventListener(changeEvent, onChange);
+            window.removeEventListener('storage', handleStorageChange);
+        };
+    }
+
+    return {
+        initialize: () => applyThemePreference(read()),
+        useTheme() {
+            const preference = useSyncExternalStore(subscribe, read, () => 'system' as const);
+
+            return [preference, set] as const;
+        },
+    };
+}
+
+function applyThemePreference(preference: ThemePreference): void {
+    document.documentElement.classList.remove('light', 'dark');
+
+    if (preference !== 'system') document.documentElement.classList.add(preference);
+
+    for (const meta of document.querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]')) {
+        const scheme = meta.getAttribute('media')?.includes('dark') ? 'dark' : 'light';
+
+        meta.content = themeColors[preference === 'system' ? scheme : preference];
+    }
+}

package/src/foundations/index.ts

@@ -0,0 +1,10 @@
+export {
+    defaultDesignSystemLabels,
+    type DesignSystemLabelOverrides,
+    type DesignSystemLabels,
+    DesignSystemProvider,
+    useDesignSystemLabels,
+} from './DesignSystemProvider';
+export { tabbable } from './KeyboardFocus';
+export { applePlatform, isShortcut } from './KeyboardShortcut';
+export { createThemeController, isThemePreference, type ThemeController, type ThemePreference } from './Theme';

package/src/foundations/theme.css

@@ -0,0 +1,425 @@
+@import 'tailwindcss';
+@import '@ninna-ui/core/theme/presets/minimal.css';
+@import '../showcase/devices.css';
+@import '../showcase/stage.css';
+@import '../showcase/server-unit.css';
+
+/* Dark follows an explicit .dark class, or the system while neither .light nor .dark is set, so dark:
+   utilities match the palette in both cases. */
+@custom-variant dark {
+    &:where(.dark, .dark *) {
+        @slot;
+    }
+    @media (prefers-color-scheme: dark) {
+        &:where(:root:not(.light), :root:not(.light) *) {
+            @slot;
+        }
+    }
+}
+
+/* T3 Code's type and radius scale: the platform UI font at 14px with a dense 11px step below text-xs, and
+   6, 8, 10, 14 and 18px corners. */
+@theme {
+    --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
+    --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
+    --text-2xs: 0.6875rem;
+    --text-2xs--line-height: calc(1 / 0.6875);
+    --radius-sm: 0.375rem;
+    --radius-md: 0.5rem;
+    --radius-lg: 0.625rem;
+    --radius-xl: 0.875rem;
+    --radius-2xl: 1.125rem;
+}
+
+/* T3 Code's palette (pingdotgg/t3code apps/web/src/index.css) on ninna-ui's scale:
+   base-50 page · base-100 card and popover · base-200 accent fill · base-300 border · base-400 input
+   base-500…900 the muted ramp, base-700 being T3's muted foreground · base-content foreground.
+   Primary is lar's mark navy (#355292, oklch 0.45 0.11 264); dark mode lifts it to keep white text readable. */
+@utility lar-light-palette {
+    color-scheme: light;
+    --color-primary: oklch(0.45 0.11 264);
+    --color-primary-content: #ffffff;
+    --color-base-50: oklch(0.992 0 0);
+    --color-base-100: #ffffff;
+    --color-base-200: #f4f4f5;
+    --color-base-300: #e4e4e7;
+    --color-base-400: #d4d4d8;
+    --color-base-500: #a1a1aa;
+    --color-base-600: #8b8b94;
+    --color-base-700: #71717a;
+    --color-base-800: #3f3f46;
+    --color-base-900: #27272a;
+    --color-base-content: #27272a;
+    --color-border: #e4e4e7;
+    --color-border-hover: #d4d4d8;
+    --color-border-active: oklch(0.45 0.11 264);
+    --color-border-disabled: #f4f4f5;
+    --color-success: #10b981;
+    --color-success-content: #ffffff;
+    --color-danger: #ef4444;
+    --color-danger-content: #ffffff;
+    --color-warning: #f59e0b;
+    --color-warning-content: #1c1917;
+    --color-info: #3b82f6;
+    --color-info-content: #ffffff;
+    --color-header-icon: #27272a;
+    --color-brand-ink: #0b0b0c;
+    --lar-success-text: #047857;
+    --lar-danger-text: #b91c1c;
+    --lar-warning-text: #b45309;
+    --lar-info-text: #1d4ed8;
+    --lar-glass-blur: 18px;
+    --lar-glass-opacity: 75%;
+    --lar-glass-saturation: 1.14;
+    --lar-shadow-popup: 0 16px 40px -18px rgb(0 0 0 / 55%);
+    --lar-shadow-dialog: 0 24px 64px -24px rgb(0 0 0 / 65%);
+    --lar-scrollbar-thumb: rgb(217 217 217);
+    --lar-scrollbar-thumb-hover: rgb(191 191 191);
+    --lar-laptop-base: linear-gradient(180deg, #e8e9eb 0%, #c9cbcf 30%, #9fa2a8 72%, #75787e 100%);
+    --lar-laptop-base-highlight: rgb(255 255 255 / 70%);
+    --lar-laptop-groove: linear-gradient(180deg, #a8abb1, #c4c6ca);
+    --lar-device-shadow: rgb(15 23 42 / 22%);
+    --lar-glow: oklch(0.62 0.13 264 / 0.2);
+    --lar-glow-soft: oklch(0.7 0.1 264 / 0.12);
+    --lar-grid-line: rgb(0 0 0 / 4.5%);
+}
+
+@utility lar-dark-palette {
+    color-scheme: dark;
+    --color-primary: oklch(0.56 0.12 264);
+    --color-primary-content: #ffffff;
+    --color-base-50: #0a0a0a;
+    --color-base-100: #111111;
+    --color-base-200: #161616;
+    --color-base-300: #1f1f1f;
+    --color-base-400: #282828;
+    --color-base-500: #404040;
+    --color-base-600: #5e5e5e;
+    --color-base-700: #818181;
+    --color-base-800: #c7c7c7;
+    --color-base-900: #e5e5e5;
+    --color-base-content: #f5f5f5;
+    --color-border: #1f1f1f;
+    --color-border-hover: #282828;
+    --color-border-active: oklch(0.56 0.12 264);
+    --color-border-disabled: #161616;
+    --color-success: #10b981;
+    --color-danger: color-mix(in srgb, #ef4444 90%, #ffffff);
+    --color-warning: #f59e0b;
+    --color-info: #3b82f6;
+    --color-header-icon: #f5f5f5;
+    --color-brand-ink: #f4f4f5;
+    --lar-success-text: #34d399;
+    --lar-danger-text: #f87171;
+    --lar-warning-text: #fbbf24;
+    --lar-info-text: #60a5fa;
+    --lar-glass-saturation: 1.08;
+    --lar-shadow-popup: 0 18px 44px -18px rgb(0 0 0 / 80%);
+    --lar-shadow-dialog: inset 0 1px rgb(255 255 255 / 4%), 0 24px 72px -20px rgb(0 0 0 / 90%);
+    --lar-scrollbar-thumb: rgb(255 255 255 / 8%);
+    --lar-scrollbar-thumb-hover: rgb(255 255 255 / 12%);
+    --lar-laptop-base: linear-gradient(180deg, #4a4b50 0%, #2f3034 34%, #1f2023 76%, #141517 100%);
+    --lar-laptop-base-highlight: rgb(255 255 255 / 18%);
+    --lar-laptop-groove: linear-gradient(180deg, #1b1c1f, #2c2d31);
+    --lar-device-shadow: rgb(0 0 0 / 70%);
+    --lar-glow: oklch(0.5 0.14 264 / 0.38);
+    --lar-glow-soft: oklch(0.55 0.12 264 / 0.16);
+    --lar-grid-line: rgb(255 255 255 / 4%);
+}
+
+html[data-theme='minimal'] {
+    @apply lar-light-palette;
+}
+
+html[data-theme='minimal'].dark {
+    @apply lar-dark-palette;
+}
+
+@media (prefers-color-scheme: dark) {
+    html[data-theme='minimal']:not(.light):not(.dark) {
+        @apply lar-dark-palette;
+    }
+}
+
+html {
+    background: var(--color-base-50);
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    line-height: 1.43;
+    margin: 0;
+    min-width: 320px;
+    min-height: 100dvh;
+    background: var(--color-base-50);
+    color: var(--color-base-content);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+::selection {
+    background: color-mix(in srgb, var(--color-primary) 24%, transparent);
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--lar-scrollbar-thumb) transparent;
+}
+
+*:hover {
+    scrollbar-color: var(--lar-scrollbar-thumb-hover) transparent;
+}
+
+.lar-brand-mark {
+    color: var(--color-brand-ink);
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+/* t3.codes' navigation glass: the page colour at 75% under an 18px blur. The document is what scrolls,
+   so content runs under the bar and Safari's own toolbar picks up the same surface. */
+@utility glass-bar {
+    background: color-mix(in srgb, var(--color-base-50) var(--lar-glass-opacity), transparent);
+    -webkit-backdrop-filter: blur(var(--lar-glass-blur)) saturate(var(--lar-glass-saturation));
+    backdrop-filter: blur(var(--lar-glass-blur)) saturate(var(--lar-glass-saturation));
+
+    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+        background: var(--color-base-50);
+    }
+}
+
+/* T3's dropdown-glass, for menus, popovers, selects, tooltips and toasts. */
+@utility glass-menu {
+    background: color-mix(
+        in srgb,
+        var(--color-base-100) 18%,
+        color-mix(in srgb, var(--color-base-100) var(--lar-glass-opacity), transparent)
+    );
+    -webkit-backdrop-filter: blur(12px) saturate(var(--lar-glass-saturation));
+    backdrop-filter: blur(12px) saturate(var(--lar-glass-saturation));
+    border: 1px solid color-mix(in srgb, var(--color-base-content) 10%, transparent);
+    box-shadow: var(--lar-shadow-popup);
+
+    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+        background: var(--color-base-100);
+    }
+}
+
+/* T3's dialog-glass and dialog-backdrop. */
+@utility glass-dialog {
+    background: color-mix(in srgb, var(--color-base-50) 88%, transparent);
+    -webkit-backdrop-filter: blur(16px) saturate(var(--lar-glass-saturation));
+    backdrop-filter: blur(16px) saturate(var(--lar-glass-saturation));
+    border: 1px solid color-mix(in srgb, var(--color-base-content) 10%, transparent);
+    box-shadow: var(--lar-shadow-dialog);
+
+    @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+        background: var(--color-base-100);
+    }
+}
+
+@utility dialog-backdrop {
+    background: color-mix(in srgb, var(--color-base-50) 60%, transparent);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+}
+
+/* An icon in a muted, low-chroma version of a lar-brand app hue (--lar-kind-hue). */
+@utility kind-icon {
+    color: oklch(0.58 0.06 var(--lar-kind-hue));
+
+    @variant dark {
+        color: oklch(0.74 0.05 var(--lar-kind-hue));
+    }
+}
+
+/* A badge in a lar-brand app hue (--lar-kind-hue): a soft tint under text in the hue. Apply as kind-badge! to
+   win over the tone ninna-ui gives the badge. */
+@utility kind-badge {
+    background-color: oklch(0.62 0.12 var(--lar-kind-hue) / 0.14);
+    color: oklch(0.45 0.11 var(--lar-kind-hue));
+
+    @variant dark {
+        background-color: oklch(0.62 0.12 var(--lar-kind-hue) / 0.2);
+        color: oklch(0.82 0.08 var(--lar-kind-hue));
+    }
+}
+
+/* ninna-ui's overlays in T3's dress. Unlayered, so these win over the utility classes ninna-ui
+   renders; the design-system wrappers own every other override. */
+[data-slot='dropdown-content'],
+[data-slot='dropdown-sub-content'],
+[data-slot='popover-content'],
+[data-slot='content'][role='listbox'],
+[data-slot='toast'] {
+    @apply glass-menu;
+    border-radius: 0.625rem;
+    color: var(--color-base-content);
+}
+
+[data-slot='dropdown-content'],
+[data-slot='dropdown-sub-content'] {
+    padding: 0.25rem;
+    max-width: min(var(--radix-dropdown-menu-content-available-width), calc(100dvw - 2rem));
+    max-height: min(var(--radix-dropdown-menu-content-available-height), calc(100dvh - 1rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+[data-slot='popover-content'] {
+    max-width: min(var(--radix-popover-content-available-width), calc(100dvw - 2rem));
+    max-height: min(var(--radix-popover-content-available-height), calc(100dvh - 1rem));
+    overflow-y: auto;
+    overscroll-behavior: contain;
+}
+
+[data-slot='popover-content'][data-layout='fill'] {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+[data-slot='content'][role='listbox'] {
+    width: var(--radix-select-trigger-width);
+    max-width: var(--radix-select-content-available-width);
+    max-height: min(24rem, var(--radix-select-content-available-height));
+}
+
+[data-radix-select-viewport] {
+    overscroll-behavior: contain;
+}
+
+/* Menu rows: T3's 28px rows with a 6px radius and an accent highlight. */
+[data-slot='dropdown-item'],
+[data-slot='dropdown-radio-item'],
+[data-slot='dropdown-checkbox-item'],
+[data-slot='dropdown-sub-trigger'],
+[data-slot='content'][role='listbox'] [role='option'] {
+    min-height: 1.75rem;
+    border-radius: 0.375rem;
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    font-size: var(--text-sm);
+}
+
+[data-slot='dropdown-item'] > svg,
+[data-slot='dropdown-radio-item'] > svg,
+[data-slot='dropdown-sub-trigger'] > svg {
+    color: var(--color-base-700);
+}
+
+/* T3 marks the chosen option with a faint fill rather than a radio dot. */
+[data-slot='dropdown-radio-item'][data-presentation='default'] {
+    padding-left: 0.5rem;
+}
+
+[data-slot='dropdown-radio-item'][data-presentation='default'] > span:first-child:not(:only-child) {
+    display: none;
+}
+
+[data-slot='dropdown-radio-item'][data-presentation='default'][data-state='checked'] {
+    background: color-mix(in srgb, var(--color-base-content) 7%, transparent);
+    font-weight: 500;
+}
+
+[data-slot='dropdown-label'] {
+    padding: 0.375rem 0.5rem;
+    font-size: var(--text-xs);
+    font-weight: 500;
+    letter-spacing: 0;
+    text-transform: none;
+    color: var(--color-base-700);
+}
+
+[data-slot='dropdown-separator'] {
+    margin: 0.25rem 0.5rem;
+    background: var(--color-base-300);
+}
+
+[data-slot='tooltip-content'] {
+    @apply glass-menu;
+    max-width: min(var(--radix-tooltip-content-available-width), var(--container-xs));
+    overflow-wrap: anywhere;
+    border-radius: 0.375rem;
+    color: var(--color-base-content);
+    font-size: var(--text-xs);
+    padding: 0.25rem 0.5rem;
+}
+
+[data-slot='modal-overlay'],
+[data-slot='drawer-overlay'] {
+    @apply dialog-backdrop;
+}
+
+[data-slot='modal-content'] {
+    @apply glass-dialog;
+    border-radius: 1.125rem;
+}
+
+[data-slot='drawer-content'] {
+    @apply glass-dialog;
+}
+
+[data-slot='code'] {
+    border-radius: 0.375rem;
+    background: var(--color-base-200);
+    font-family: var(--font-mono);
+}
+
+.lar-skeleton {
+    position: relative;
+    overflow: hidden;
+    background: var(--color-base-200);
+}
+
+.lar-skeleton::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+        90deg,
+        transparent,
+        color-mix(in srgb, var(--color-base-50) 65%, transparent),
+        transparent
+    );
+    animation: lar-skeleton-shine 1.6s ease-in-out infinite;
+}
+
+@keyframes lar-skeleton-shine {
+    from {
+        transform: translateX(-100%);
+    }
+    to {
+        transform: translateX(100%);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .lar-skeleton::before {
+        animation: none;
+    }
+}
+
+.lar-progress-indeterminate {
+    width: 35%;
+    animation: lar-progress-travel 1.8s ease-in-out infinite alternate;
+}
+
+@keyframes lar-progress-travel {
+    from {
+        transform: translateX(0);
+    }
+    to {
+        transform: translateX(185%);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .lar-progress-indeterminate {
+        animation: none;
+        width: 100%;
+        opacity: 0.6;
+        background-image: repeating-linear-gradient(90deg, transparent 0 6px, var(--color-base-300) 6px 10px);
+    }
+}

package/src/icons/BrandIcons.tsx

@@ -0,0 +1,8 @@
+/** Brand marks, which lucide does not draw. */
+export function GitHubIcon() {
+    return (
+        <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8Z" />
+        </svg>
+    );
+}

package/src/icons/index.ts

@@ -0,0 +1,4 @@
+// Every icon comes from lucide (https://lucide.dev/icons), under lucide's `…Icon` names, plus the brand marks
+// lucide does not draw. Apps import icons from `@lar-works/design-system/icons`, never from lucide-react.
+export { GitHubIcon } from './BrandIcons';
+export * from 'lucide-react';

package/src/icons.ts

@@ -0,0 +1 @@
+export * from './icons/index';

package/src/index.ts

@@ -0,0 +1,13 @@
+// The design system's public API. Icons have their own entry (`@lar-works/design-system/icons`), and styles are
+// imported once by each app (`@import '@lar-works/design-system/styles.css'`).
+export * from './actions';
+export * from './collections';
+export * from './display';
+export * from './feedback';
+export * from './forms';
+export * from './foundations';
+export * from './layout';
+export * from './navigation';
+export * from './overlays';
+export * from './showcase';
+export * from './typography';