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

package/dist/foundations/Theme.js

@@ -0,0 +1,54 @@
+import { useSyncExternalStore } from "react";
+// src/foundations/Theme.ts
+function isThemePreference(value) {
+	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"
+};
+/**
+* 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.
+*/
+function createThemeController(storageKey) {
+	const changeEvent = `${storageKey}-change`;
+	function read() {
+		const stored = window.localStorage.getItem(storageKey);
+		return stored && isThemePreference(stored) ? stored : "system";
+	}
+	function set(preference) {
+		window.localStorage.setItem(storageKey, preference);
+		applyThemePreference(preference);
+		window.dispatchEvent(new Event(changeEvent));
+	}
+	function subscribe(onChange) {
+		function handleStorageChange(event) {
+			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: () => [useSyncExternalStore(subscribe, read, () => "system"), set]
+	};
+}
+function applyThemePreference(preference) {
+	document.documentElement.classList.remove("light", "dark");
+	if (preference !== "system") document.documentElement.classList.add(preference);
+	for (const meta of document.querySelectorAll("meta[name=\"theme-color\"]")) {
+		const scheme = meta.getAttribute("media")?.includes("dark") ? "dark" : "light";
+		meta.content = themeColors[preference === "system" ? scheme : preference];
+	}
+}
+export { createThemeController, isThemePreference };
+
+//# sourceMappingURL=Theme.js.map

package/dist/foundations/Theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.js","names":[],"sources":["../../src/foundations/Theme.ts"],"sourcesContent":["import { useSyncExternalStore } from 'react';\n\nexport type ThemePreference = 'system' | 'light' | 'dark';\n\nexport interface ThemeController {\n    /** Applies the stored preference before the first render, so the page never flashes the other theme. */\n    initialize: () => void;\n    /** The current preference and a setter that stores and applies it, kept in step across tabs. */\n    useTheme: () => readonly [ThemePreference, (value: ThemePreference) => void];\n}\n\nexport function isThemePreference(value: string): value is ThemePreference {\n    return value === 'system' || value === 'light' || value === 'dark';\n}\n\n/** The page backgrounds, which Safari and installed web apps extend into their own chrome. */\nconst themeColors = { light: '#fcfcfc', dark: '#0a0a0a' } as const;\n\n/**\n * The light/dark preference of one app, stored under `storageKey` in localStorage. The preference sets `.light` or\n * `.dark` on <html> (nothing follows the system) and points the page's `theme-color` metas at the matching background.\n */\nexport function createThemeController(storageKey: string): ThemeController {\n    const changeEvent = `${storageKey}-change`;\n\n    function read(): ThemePreference {\n        const stored = window.localStorage.getItem(storageKey);\n\n        return stored && isThemePreference(stored) ? stored : 'system';\n    }\n\n    function set(preference: ThemePreference): void {\n        window.localStorage.setItem(storageKey, preference);\n        applyThemePreference(preference);\n        window.dispatchEvent(new Event(changeEvent));\n    }\n\n    function subscribe(onChange: () => void): () => void {\n        function handleStorageChange(event: StorageEvent): void {\n            if (event.key !== storageKey) return;\n\n            applyThemePreference(read());\n            onChange();\n        }\n\n        window.addEventListener(changeEvent, onChange);\n        window.addEventListener('storage', handleStorageChange);\n\n        return () => {\n            window.removeEventListener(changeEvent, onChange);\n            window.removeEventListener('storage', handleStorageChange);\n        };\n    }\n\n    return {\n        initialize: () => applyThemePreference(read()),\n        useTheme: () => [useSyncExternalStore(subscribe, read, () => 'system' as const), set] as const,\n    };\n}\n\nfunction applyThemePreference(preference: ThemePreference): void {\n    document.documentElement.classList.remove('light', 'dark');\n\n    if (preference !== 'system') document.documentElement.classList.add(preference);\n\n    for (const meta of document.querySelectorAll<HTMLMetaElement>('meta[name=\"theme-color\"]')) {\n        const scheme = meta.getAttribute('media')?.includes('dark') ? 'dark' : 'light';\n\n        meta.content = themeColors[preference === 'system' ? scheme : preference];\n    }\n}\n"],"mappings":";;AAWA,SAAgB,kBAAkB,OAAyC;CACvE,OAAO,UAAU,YAAY,UAAU,WAAW,UAAU;AAChE;;AAGA,MAAM,cAAc;CAAE,OAAO;CAAW,MAAM;AAAU;;;;;AAMxD,SAAgB,sBAAsB,YAAqC;CACvE,MAAM,cAAc,GAAG,WAAW;CAElC,SAAS,OAAwB;EAC7B,MAAM,SAAS,OAAO,aAAa,QAAQ,UAAU;EAErD,OAAO,UAAU,kBAAkB,MAAM,IAAI,SAAS;CAC1D;CAEA,SAAS,IAAI,YAAmC;EAC5C,OAAO,aAAa,QAAQ,YAAY,UAAU;EAClD,qBAAqB,UAAU;EAC/B,OAAO,cAAc,IAAI,MAAM,WAAW,CAAC;CAC/C;CAEA,SAAS,UAAU,UAAkC;EACjD,SAAS,oBAAoB,OAA2B;GACpD,IAAI,MAAM,QAAQ,YAAY;GAE9B,qBAAqB,KAAK,CAAC;GAC3B,SAAS;EACb;EAEA,OAAO,iBAAiB,aAAa,QAAQ;EAC7C,OAAO,iBAAiB,WAAW,mBAAmB;EAEtD,aAAa;GACT,OAAO,oBAAoB,aAAa,QAAQ;GAChD,OAAO,oBAAoB,WAAW,mBAAmB;EAC7D;CACJ;CAEA,OAAO;EACH,kBAAkB,qBAAqB,KAAK,CAAC;EAC7C,gBAAgB,CAAC,qBAAqB,WAAW,YAAY,QAAiB,GAAG,GAAG;CACxF;AACJ;AAEA,SAAS,qBAAqB,YAAmC;CAC7D,SAAS,gBAAgB,UAAU,OAAO,SAAS,MAAM;CAEzD,IAAI,eAAe,UAAU,SAAS,gBAAgB,UAAU,IAAI,UAAU;CAE9E,KAAK,MAAM,QAAQ,SAAS,iBAAkC,4BAA0B,GAAG;EACvF,MAAM,SAAS,KAAK,aAAa,OAAO,CAAC,EAAE,SAAS,MAAM,IAAI,SAAS;EAEvE,KAAK,UAAU,YAAY,eAAe,WAAW,SAAS;CAClE;AACJ"}

package/dist/foundations/index.d.ts

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

package/dist/icons/BrandIcons.d.ts

@@ -0,0 +1,3 @@
+/** Brand marks, which lucide does not draw. */
+export declare function GitHubIcon(): import("react").JSX.Element;
+//# sourceMappingURL=BrandIcons.d.ts.map

package/dist/icons/BrandIcons.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+// src/icons/BrandIcons.tsx
+/** Brand marks, which lucide does not draw. */
+function GitHubIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("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" })
+	});
+}
+export { GitHubIcon };
+
+//# sourceMappingURL=BrandIcons.js.map

package/dist/icons/BrandIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandIcons.js","names":[],"sources":["../../src/icons/BrandIcons.tsx"],"sourcesContent":["/** Brand marks, which lucide does not draw. */\nexport function GitHubIcon() {\n    return (\n        <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\">\n            <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\" />\n        </svg>\n    );\n}\n"],"mappings":";;;AACA,SAAgB,aAAa;CACzB,OACI,oBAAC,OAAD;EAAK,SAAQ;EAAY,MAAK;EAAe,eAAY;EACrD,UAAA,oBAAC,QAAD,EAAM,GAAE,6jBAA8jB,CAAA;CACrkB,CAAA;AAEb"}

package/dist/icons/index.d.ts

@@ -0,0 +1,3 @@
+import { GitHubIcon } from "./BrandIcons.js";
+export * from "lucide-react";
+export { GitHubIcon };

package/dist/icons/index.js

@@ -0,0 +1,2 @@
+export { GitHubIcon } from "./BrandIcons.js";
+export * from "lucide-react";

package/dist/icons.d.ts

@@ -0,0 +1,4 @@
+import { GitHubIcon } from "./icons/BrandIcons.js";
+import "./icons/index.js";
+export * from "lucide-react";
+export { GitHubIcon };

package/dist/icons.js

@@ -0,0 +1,2 @@
+export { GitHubIcon } from "./icons/BrandIcons.js";
+export * from "lucide-react";

package/dist/index.d.ts

@@ -0,0 +1,133 @@
+import { Button, ButtonProps } from "./actions/Button.js";
+import { StatusIndicator, StatusTone } from "./feedback/StatusIndicator.js";
+import { IconButton, IconButtonProps } from "./actions/IconButton.js";
+import { ButtonLink, ButtonLinkProps } from "./actions/ButtonLink.js";
+import { ThemeController, ThemePreference, createThemeController, isThemePreference } from "./foundations/Theme.js";
+import { ThemeSwitch } from "./actions/ThemeSwitch.js";
+import "./actions/index.js";
+import { CollectionSectionHeader } from "./collections/CollectionSectionHeader.js";
+import { CollectionState } from "./collections/CollectionState.js";
+import { DataRow } from "./collections/DataRow.js";
+import { ResultEmpty, ResultList, ResultRow, ResultRowProps } from "./collections/ResultList.js";
+import { ScrollRow, ScrollRowArrows, ScrollRowItem } from "./collections/ScrollRow.js";
+import { useCollectionMotion } from "./collections/useCollectionMotion.js";
+import { revealInRow, useScrollRow } from "./collections/useScrollRow.js";
+import { VirtualGrid } from "./collections/VirtualGrid.js";
+import { ListColumn, VirtualList, VirtualListProps } from "./collections/VirtualList.js";
+import "./collections/index.js";
+import { ActivityCard, ActivityCardSkeleton } from "./display/ActivityCard.js";
+import { ItemAction } from "./display/ItemAction.js";
+import { Artwork } from "./display/Artwork.js";
+import { Avatar } from "./display/Avatar.js";
+import { Badge, BadgeProps } from "./display/Badge.js";
+import { BadgeList, BadgeListItem } from "./display/BadgeList.js";
+import { BrandLink, BrandMark } from "./display/BrandMark.js";
+import { ChangeList, ChangeListItem } from "./display/ChangeList.js";
+import { CheckList, CheckListItem } from "./display/CheckList.js";
+import { CodeBlock } from "./display/CodeBlock.js";
+import { CopyButton } from "./display/CopyButton.js";
+import { DataTable, DataTableCell, DataTableRow } from "./display/DataTable.js";
+import { DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags } from "./display/DetailHero.js";
+import { DetailList } from "./display/DetailList.js";
+import { DeviceCard } from "./display/DeviceCard.js";
+import { Identity } from "./display/Identity.js";
+import { ImageCard } from "./display/ImageCard.js";
+import { ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload } from "./display/ImagePicker.js";
+import { InfoBox } from "./display/InfoBox.js";
+import { InsetPanel } from "./display/InsetPanel.js";
+import { Kbd } from "./display/Kbd.js";
+import { KindIcon } from "./display/KindIcon.js";
+import { NoticeCard } from "./display/NoticeCard.js";
+import { PairingList, PairingListItem } from "./display/PairingList.js";
+import { PathList } from "./display/PathList.js";
+import { PeoplePreview } from "./display/PeoplePreview.js";
+import { PropertySheet, PropertySheetRow, PropertySheetTag } from "./display/PropertySheet.js";
+import { QrCode } from "./display/QrCode.js";
+import { RadioChoice } from "./display/RadioChoice.js";
+import { RatingLink } from "./display/RatingLink.js";
+import { ResourceCard, ResourceCardSkeleton } from "./display/ResourceCard.js";
+import { RowList, RowListItem } from "./display/RowList.js";
+import { MeterLegend, MeterSegment, MeterTone, StackedMeter } from "./display/StackedMeter.js";
+import { StatTile } from "./display/StatTile.js";
+import { StepList } from "./display/StepList.js";
+import { TextPreview } from "./display/TextPreview.js";
+import { TimeSeriesChart, TimeSeriesChartSkeleton, TimeSeriesPoint } from "./display/TimeSeriesChart.js";
+import "./display/index.js";
+import { Alert } from "./feedback/Alert.js";
+import { AsyncState } from "./feedback/AsyncState.js";
+import { ErrorNotification, dismissAllNotifications, showErrorNotification, showSuccessNotification } from "./feedback/ErrorNotification.js";
+import { Notifications } from "./feedback/Notifications.js";
+import { ProgressStatusRow } from "./feedback/ProgressStatusRow.js";
+import { SkeletonLoader } from "./feedback/SkeletonLoader.js";
+import { StatusPopoverContent } from "./feedback/StatusPopoverContent.js";
+import { StatusRow } from "./feedback/StatusRow.js";
+import { Loading } from "./feedback/index.js";
+import { Checkbox, CheckboxProps } from "./forms/Checkbox.js";
+import { Field, FieldProps } from "./forms/Field.js";
+import { Disclosure, FormAction, FormContent, FormField, FormRow, FormSection, FormStack } from "./forms/FormSection.js";
+import { InlineFields } from "./forms/InlineFields.js";
+import { Input, InputProps } from "./forms/Input.js";
+import { OptionSelect } from "./forms/OptionSelect.js";
+import { RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps } from "./forms/RadioGroup.js";
+import { Select, SelectItem, SelectProps } from "./forms/Select.js";
+import { Switch } from "./forms/Switch.js";
+import { TagInput } from "./forms/TagInput.js";
+import { Textarea } from "./forms/Textarea.js";
+import "./forms/index.js";
+import { DesignSystemLabelOverrides, DesignSystemLabels, DesignSystemProvider, defaultDesignSystemLabels, useDesignSystemLabels } from "./foundations/DesignSystemProvider.js";
+import { tabbable } from "./foundations/KeyboardFocus.js";
+import { applePlatform, isShortcut } from "./foundations/KeyboardShortcut.js";
+import "./foundations/index.js";
+import { AppShell } from "./layout/AppShell.js";
+import { AuthLayout } from "./layout/AuthLayout.js";
+import { FlowSpace, Grid, Inline, Stack, StackProps } from "./layout/Flow.js";
+import { PageLayout } from "./layout/PageLayout.js";
+import { ScrollArea, ScrollAreaProps } from "./layout/ScrollArea.js";
+import { Section } from "./layout/Section.js";
+import { SidebarNavigationItem } from "./layout/sidebar/SidebarNavigationItem.js";
+import { SidebarNavigationGroup, SidebarPane } from "./layout/sidebar/SidebarPane.js";
+import { TitleBar, TitleBarTrail, TitleBarTrailItem } from "./layout/TitleBar.js";
+import { CommandPaletteTrigger } from "./layout/toolbar/CommandPaletteTrigger.js";
+import { ToolbarStatusGroup } from "./layout/toolbar/ToolbarStatusGroup.js";
+import { ToolbarStatusItem } from "./layout/toolbar/ToolbarStatusItem.js";
+import { WorkspaceActionsHeader } from "./layout/WorkspaceActionsHeader.js";
+import { ContentContainer } from "./layout/ContentContainer.js";
+import { Eyebrow, PageSection, SectionHeading } from "./layout/PageSection.js";
+import { SiteFooter, SiteHeader, SiteLink, SiteShell } from "./layout/Site.js";
+import { Box, Divider } from "./layout/index.js";
+import { ArtworkTabs, ArtworkTabsItem } from "./navigation/ArtworkTabs.js";
+import { Breadcrumbs } from "./navigation/Breadcrumbs.js";
+import { CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger } from "./navigation/CollectionBrowseSelector.js";
+import { CollectionView, CollectionViewToggle } from "./navigation/CollectionViewToggle.js";
+import { DrilldownBrowseGroup, DrilldownBrowseItem, DrilldownBrowseSelector } from "./navigation/DrilldownBrowseSelector.js";
+import { FolderSelector, FolderSelectorOption, FolderSelectorProps } from "./navigation/FolderSelector.js";
+import { ViewTabs, ViewTabsItem } from "./navigation/ViewTabs.js";
+import "./navigation/index.js";
+import { ActionModal } from "./overlays/ActionModal.js";
+import { CommandPalette, CommandPaletteGroup, useCommandPaletteOption } from "./overlays/CommandPalette.js";
+import { Drawer } from "./overlays/Drawer.js";
+import { DropdownMenu } from "./overlays/DropdownMenu.js";
+import { ImageViewer } from "./overlays/ImageViewer.js";
+import { Modal } from "./overlays/Modal.js";
+import { Popover } from "./overlays/Popover.js";
+import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "./overlays/Tooltip.js";
+import "./overlays/index.js";
+import { CallToAction } from "./showcase/CallToAction.js";
+import { FeatureGrid, FeatureTile, ProductCard, ProductGrid } from "./showcase/Cards.js";
+import { AppWindow, BrowserFrame, Callout, CalloutPair, CalloutStack, GuidedMedia, LaptopFrame, PhoneFrame, Screenshot, ScreenshotProps, TabletFrame, TvFrame } from "./showcase/Devices.js";
+import { FeatureRow, FeatureRows, PointList } from "./showcase/FeatureRow.js";
+import { Hero } from "./showcase/Hero.js";
+import { ConceptPhoto, PhotoSearchConcept } from "./showcase/PhotoSearchConcept.js";
+import { Announcement, AppIcon, Readiness, StatusLight, StatusPill } from "./showcase/Status.js";
+import { Platform, PlatformGrid } from "./showcase/Platforms.js";
+import { ProductBand, ProductBands, ProductEntry, ProductIndex } from "./showcase/ProductBand.js";
+import { Roadmap, RoadmapItem } from "./showcase/Roadmap.js";
+import { RouteDiagram, RouteNode } from "./showcase/RouteDiagram.js";
+import { MediaApp, ReadinessItem, ReadinessLegend, ReadinessPanel, ServerBay, ServerUnit } from "./showcase/ServerUnit.js";
+import { AngledDevice, Backdrop, DeviceStage, ResponsiveMedia, Reveal } from "./showcase/Stage.js";
+import { Step, StepFlow } from "./showcase/StepFlow.js";
+import "./showcase/index.js";
+import { InlineLink, Link, LinkBox, LinkOverlay, LinkOverlayProps, LinkProps } from "./typography/Link.js";
+import { Heading, HeadingProps, Text, TextProps } from "./typography/Typography.js";
+import { Code } from "./typography/index.js";
+export { ActionModal, ActivityCard, ActivityCardSkeleton, Alert, AngledDevice, Announcement, AppIcon, AppShell, AppWindow, Artwork, ArtworkTabs, type ArtworkTabsItem, AsyncState, AuthLayout, Avatar, Backdrop, Badge, BadgeList, type BadgeListItem, type BadgeProps, Box, BrandLink, BrandMark, Breadcrumbs, BrowserFrame, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, CallToAction, Callout, CalloutPair, CalloutStack, ChangeList, type ChangeListItem, CheckList, type CheckListItem, Checkbox, type CheckboxProps, Code, CodeBlock, CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger, CollectionSectionHeader, CollectionState, type CollectionView, CollectionViewToggle, CommandPalette, CommandPaletteGroup, CommandPaletteTrigger, type ConceptPhoto, ContentContainer, CopyButton, DataRow, DataTable, type DataTableCell, type DataTableRow, type DesignSystemLabelOverrides, type DesignSystemLabels, DesignSystemProvider, DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags, DetailList, DeviceCard, DeviceStage, Disclosure, Divider, Drawer, type DrilldownBrowseGroup, type DrilldownBrowseItem, DrilldownBrowseSelector, DropdownMenu, type ErrorNotification, Eyebrow, FeatureGrid, FeatureRow, FeatureRows, FeatureTile, Field, type FieldProps, type FlowSpace, FolderSelector, type FolderSelectorOption, type FolderSelectorProps, FormAction, FormContent, FormField, FormRow, FormSection, FormStack, Grid, GuidedMedia, Heading, type HeadingProps, Hero, IconButton, type IconButtonProps, Identity, ImageCard, ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload, ImageViewer, InfoBox, Inline, InlineFields, InlineLink, Input, type InputProps, InsetPanel, ItemAction, Kbd, KindIcon, LaptopFrame, Link, LinkBox, LinkOverlay, type LinkOverlayProps, type LinkProps, type ListColumn, Loading, type MediaApp, MeterLegend, type MeterSegment, type MeterTone, Modal, NoticeCard, Notifications, OptionSelect, PageLayout, PageSection, PairingList, type PairingListItem, PathList, PeoplePreview, PhoneFrame, PhotoSearchConcept, type Platform, PlatformGrid, PointList, Popover, ProductBand, ProductBands, ProductCard, type ProductEntry, ProductGrid, ProductIndex, ProgressStatusRow, PropertySheet, type PropertySheetRow, type PropertySheetTag, QrCode, RadioChoice, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, RatingLink, type Readiness, type ReadinessItem, ReadinessLegend, ReadinessPanel, ResourceCard, ResourceCardSkeleton, ResponsiveMedia, ResultEmpty, ResultList, ResultRow, type ResultRowProps, Reveal, Roadmap, type RoadmapItem, RouteDiagram, type RouteNode, RowList, RowListItem, Screenshot, type ScreenshotProps, ScrollArea, type ScrollAreaProps, ScrollRow, ScrollRowArrows, ScrollRowItem, Section, SectionHeading, Select, SelectItem, type SelectProps, type ServerBay, ServerUnit, SidebarNavigationGroup, SidebarNavigationItem, SidebarPane, SiteFooter, SiteHeader, type SiteLink, SiteShell, SkeletonLoader, Stack, type StackProps, StackedMeter, StatTile, StatusIndicator, StatusLight, StatusPill, StatusPopoverContent, StatusRow, type StatusTone, type Step, StepFlow, StepList, Switch, TabletFrame, TagInput, Text, TextPreview, type TextProps, Textarea, type ThemeController, type ThemePreference, ThemeSwitch, TimeSeriesChart, TimeSeriesChartSkeleton, type TimeSeriesPoint, TitleBar, TitleBarTrail, type TitleBarTrailItem, ToolbarStatusGroup, ToolbarStatusItem, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, TvFrame, ViewTabs, type ViewTabsItem, VirtualGrid, VirtualList, type VirtualListProps, WorkspaceActionsHeader, applePlatform, createThemeController, defaultDesignSystemLabels, dismissAllNotifications, isShortcut, isThemePreference, revealInRow, showErrorNotification, showSuccessNotification, tabbable, useCollectionMotion, useCommandPaletteOption, useDesignSystemLabels, useScrollRow };

package/dist/index.js

@@ -0,0 +1,125 @@
+import { tabbable } from "./foundations/KeyboardFocus.js";
+import { Button } from "./actions/Button.js";
+import { StatusIndicator } from "./feedback/StatusIndicator.js";
+import { IconButton } from "./actions/IconButton.js";
+import { ButtonLink } from "./actions/ButtonLink.js";
+import { DesignSystemProvider, defaultDesignSystemLabels, useDesignSystemLabels } from "./foundations/DesignSystemProvider.js";
+import { ThemeSwitch } from "./actions/ThemeSwitch.js";
+import { SkeletonLoader } from "./feedback/SkeletonLoader.js";
+import { Heading, Text } from "./typography/Typography.js";
+import { CollectionSectionHeader } from "./collections/CollectionSectionHeader.js";
+import { Grid, Inline, Stack } from "./layout/Flow.js";
+import { CollectionState } from "./collections/CollectionState.js";
+import { InlineLink, Link, LinkBox, LinkOverlay } from "./typography/Link.js";
+import { DataRow } from "./collections/DataRow.js";
+import { ResultEmpty, ResultList, ResultRow } from "./collections/ResultList.js";
+import { ScrollRow, ScrollRowArrows, ScrollRowItem } from "./collections/ScrollRow.js";
+import { useCollectionMotion } from "./collections/useCollectionMotion.js";
+import { revealInRow, useScrollRow } from "./collections/useScrollRow.js";
+import { VirtualGrid } from "./collections/VirtualGrid.js";
+import { VirtualList } from "./collections/VirtualList.js";
+import { ActivityCard, ActivityCardSkeleton } from "./display/ActivityCard.js";
+import { ItemAction } from "./display/ItemAction.js";
+import { Artwork } from "./display/Artwork.js";
+import { Avatar } from "./display/Avatar.js";
+import { Badge } from "./display/Badge.js";
+import { BadgeList } from "./display/BadgeList.js";
+import { BrandLink, BrandMark } from "./display/BrandMark.js";
+import { ChangeList } from "./display/ChangeList.js";
+import { CheckList } from "./display/CheckList.js";
+import { CodeBlock } from "./display/CodeBlock.js";
+import { CopyButton } from "./display/CopyButton.js";
+import { DataTable } from "./display/DataTable.js";
+import { Popover } from "./overlays/Popover.js";
+import { Modal } from "./overlays/Modal.js";
+import { TextPreview } from "./display/TextPreview.js";
+import { DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags } from "./display/DetailHero.js";
+import { DetailList } from "./display/DetailList.js";
+import { DeviceCard } from "./display/DeviceCard.js";
+import { Identity } from "./display/Identity.js";
+import { ImageCard } from "./display/ImageCard.js";
+import { ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload } from "./display/ImagePicker.js";
+import { InfoBox } from "./display/InfoBox.js";
+import { InsetPanel } from "./display/InsetPanel.js";
+import { Kbd } from "./display/Kbd.js";
+import { KindIcon } from "./display/KindIcon.js";
+import { NoticeCard } from "./display/NoticeCard.js";
+import { PairingList } from "./display/PairingList.js";
+import { PathList } from "./display/PathList.js";
+import { PeoplePreview } from "./display/PeoplePreview.js";
+import { PropertySheet } from "./display/PropertySheet.js";
+import { QrCode } from "./display/QrCode.js";
+import { RadioChoice } from "./display/RadioChoice.js";
+import { RatingLink } from "./display/RatingLink.js";
+import { ResourceCard, ResourceCardSkeleton } from "./display/ResourceCard.js";
+import { RowList, RowListItem } from "./display/RowList.js";
+import { MeterLegend, StackedMeter } from "./display/StackedMeter.js";
+import { StatTile } from "./display/StatTile.js";
+import { StepList } from "./display/StepList.js";
+import { TimeSeriesChart, TimeSeriesChartSkeleton } from "./display/TimeSeriesChart.js";
+import { Alert } from "./feedback/Alert.js";
+import { AsyncState } from "./feedback/AsyncState.js";
+import { dismissAllNotifications, showErrorNotification, showSuccessNotification } from "./feedback/ErrorNotification.js";
+import { Notifications } from "./feedback/Notifications.js";
+import { ProgressStatusRow } from "./feedback/ProgressStatusRow.js";
+import { StatusPopoverContent } from "./feedback/StatusPopoverContent.js";
+import { StatusRow } from "./feedback/StatusRow.js";
+import { Loading } from "./feedback/index.js";
+import { Checkbox } from "./forms/Checkbox.js";
+import { Field } from "./forms/Field.js";
+import { Disclosure, FormAction, FormContent, FormField, FormRow, FormSection, FormStack } from "./forms/FormSection.js";
+import { InlineFields } from "./forms/InlineFields.js";
+import { Input } from "./forms/Input.js";
+import { Select, SelectItem } from "./forms/Select.js";
+import { OptionSelect } from "./forms/OptionSelect.js";
+import { RadioGroup, RadioGroupItem } from "./forms/RadioGroup.js";
+import { Switch } from "./forms/Switch.js";
+import { TagInput } from "./forms/TagInput.js";
+import { Textarea } from "./forms/Textarea.js";
+import { applePlatform, isShortcut } from "./foundations/KeyboardShortcut.js";
+import { createThemeController, isThemePreference } from "./foundations/Theme.js";
+import { AppShell } from "./layout/AppShell.js";
+import { AuthLayout } from "./layout/AuthLayout.js";
+import { ContentContainer } from "./layout/ContentContainer.js";
+import { PageLayout } from "./layout/PageLayout.js";
+import { ScrollArea } from "./layout/ScrollArea.js";
+import { Section } from "./layout/Section.js";
+import { SidebarNavigationItem } from "./layout/sidebar/SidebarNavigationItem.js";
+import { SidebarNavigationGroup, SidebarPane } from "./layout/sidebar/SidebarPane.js";
+import { TitleBar, TitleBarTrail } from "./layout/TitleBar.js";
+import { CommandPaletteTrigger } from "./layout/toolbar/CommandPaletteTrigger.js";
+import { ToolbarStatusGroup } from "./layout/toolbar/ToolbarStatusGroup.js";
+import { ToolbarStatusItem } from "./layout/toolbar/ToolbarStatusItem.js";
+import { WorkspaceActionsHeader } from "./layout/WorkspaceActionsHeader.js";
+import { Eyebrow, PageSection, SectionHeading } from "./layout/PageSection.js";
+import { SiteFooter, SiteHeader, SiteShell } from "./layout/Site.js";
+import { Box, Divider } from "./layout/index.js";
+import { ArtworkTabs } from "./navigation/ArtworkTabs.js";
+import { Breadcrumbs } from "./navigation/Breadcrumbs.js";
+import { DropdownMenu } from "./overlays/DropdownMenu.js";
+import { CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger } from "./navigation/CollectionBrowseSelector.js";
+import { CollectionViewToggle } from "./navigation/CollectionViewToggle.js";
+import { DrilldownBrowseSelector } from "./navigation/DrilldownBrowseSelector.js";
+import { FolderSelector } from "./navigation/FolderSelector.js";
+import { ViewTabs } from "./navigation/ViewTabs.js";
+import { ActionModal } from "./overlays/ActionModal.js";
+import { CommandPalette, CommandPaletteGroup, useCommandPaletteOption } from "./overlays/CommandPalette.js";
+import { Drawer } from "./overlays/Drawer.js";
+import { ImageViewer } from "./overlays/ImageViewer.js";
+import { Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger } from "./overlays/Tooltip.js";
+import { CallToAction } from "./showcase/CallToAction.js";
+import { FeatureGrid, FeatureTile, ProductCard, ProductGrid } from "./showcase/Cards.js";
+import { AppWindow, BrowserFrame, Callout, CalloutPair, CalloutStack, GuidedMedia, LaptopFrame, PhoneFrame, Screenshot, TabletFrame, TvFrame } from "./showcase/Devices.js";
+import { FeatureRow, FeatureRows, PointList } from "./showcase/FeatureRow.js";
+import { AngledDevice, Backdrop, DeviceStage, ResponsiveMedia, Reveal } from "./showcase/Stage.js";
+import { Hero } from "./showcase/Hero.js";
+import { PhotoSearchConcept } from "./showcase/PhotoSearchConcept.js";
+import { Announcement, AppIcon, StatusLight, StatusPill } from "./showcase/Status.js";
+import { PlatformGrid } from "./showcase/Platforms.js";
+import { ProductBand, ProductBands, ProductIndex } from "./showcase/ProductBand.js";
+import { Roadmap } from "./showcase/Roadmap.js";
+import { RouteDiagram } from "./showcase/RouteDiagram.js";
+import { ReadinessLegend, ReadinessPanel, ServerUnit } from "./showcase/ServerUnit.js";
+import { StepFlow } from "./showcase/StepFlow.js";
+import { Code } from "./typography/index.js";
+export { ActionModal, ActivityCard, ActivityCardSkeleton, Alert, AngledDevice, Announcement, AppIcon, AppShell, AppWindow, Artwork, ArtworkTabs, AsyncState, AuthLayout, Avatar, Backdrop, Badge, BadgeList, Box, BrandLink, BrandMark, Breadcrumbs, BrowserFrame, Button, ButtonLink, CallToAction, Callout, CalloutPair, CalloutStack, ChangeList, CheckList, Checkbox, Code, CodeBlock, CollectionBrowseControls, CollectionBrowseSelector, CollectionBrowseTrigger, CollectionSectionHeader, CollectionState, CollectionViewToggle, CommandPalette, CommandPaletteGroup, CommandPaletteTrigger, ContentContainer, CopyButton, DataRow, DataTable, DesignSystemProvider, DetailHero, DetailHeroDetail, DetailHeroDetails, DetailHeroTags, DetailList, DeviceCard, DeviceStage, Disclosure, Divider, Drawer, DrilldownBrowseSelector, DropdownMenu, Eyebrow, FeatureGrid, FeatureRow, FeatureRows, FeatureTile, Field, FolderSelector, FormAction, FormContent, FormField, FormRow, FormSection, FormStack, Grid, GuidedMedia, Heading, Hero, IconButton, Identity, ImageCard, ImagePicker, ImagePickerGrid, ImagePickerOption, ImageUpload, ImageViewer, InfoBox, Inline, InlineFields, InlineLink, Input, InsetPanel, ItemAction, Kbd, KindIcon, LaptopFrame, Link, LinkBox, LinkOverlay, Loading, MeterLegend, Modal, NoticeCard, Notifications, OptionSelect, PageLayout, PageSection, PairingList, PathList, PeoplePreview, PhoneFrame, PhotoSearchConcept, PlatformGrid, PointList, Popover, ProductBand, ProductBands, ProductCard, ProductGrid, ProductIndex, ProgressStatusRow, PropertySheet, QrCode, RadioChoice, RadioGroup, RadioGroupItem, RatingLink, ReadinessLegend, ReadinessPanel, ResourceCard, ResourceCardSkeleton, ResponsiveMedia, ResultEmpty, ResultList, ResultRow, Reveal, Roadmap, RouteDiagram, RowList, RowListItem, Screenshot, ScrollArea, ScrollRow, ScrollRowArrows, ScrollRowItem, Section, SectionHeading, Select, SelectItem, ServerUnit, SidebarNavigationGroup, SidebarNavigationItem, SidebarPane, SiteFooter, SiteHeader, SiteShell, SkeletonLoader, Stack, StackedMeter, StatTile, StatusIndicator, StatusLight, StatusPill, StatusPopoverContent, StatusRow, StepFlow, StepList, Switch, TabletFrame, TagInput, Text, TextPreview, Textarea, ThemeSwitch, TimeSeriesChart, TimeSeriesChartSkeleton, TitleBar, TitleBarTrail, ToolbarStatusGroup, ToolbarStatusItem, Tooltip, TooltipPopup, TooltipProvider, TooltipTrigger, TvFrame, ViewTabs, VirtualGrid, VirtualList, WorkspaceActionsHeader, applePlatform, createThemeController, defaultDesignSystemLabels, dismissAllNotifications, isShortcut, isThemePreference, revealInRow, showErrorNotification, showSuccessNotification, tabbable, useCollectionMotion, useCommandPaletteOption, useDesignSystemLabels, useScrollRow };

package/dist/layout/AppShell.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+interface AppShellProps {
+  children: ReactNode;
+  header: ReactNode;
+}
+/** The page frame: a column whose header sticks to the top as glass. The document itself
+ *  scrolls, so content passes under the header and Safari tints its toolbar to match. The header's hairline
+ *  appears once the page has scrolled, as on t3.codes. */
+export declare function AppShell({ children, header }: AppShellProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AppShell.d.ts.map

package/dist/layout/AppShell.js

@@ -0,0 +1,46 @@
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/layout/AppShell.tsx
+/** The page frame: a column whose header sticks to the top as glass. The document itself
+*  scrolls, so content passes under the header and Safari tints its toolbar to match. The header's hairline
+*  appears once the page has scrolled, as on t3.codes. */
+function AppShell({ children, header }) {
+	const shell = useRef(null);
+	const headerContainer = useRef(null);
+	const scrolled = useDocumentScrolled();
+	useLayoutEffect(() => {
+		const container = headerContainer.current;
+		const root = shell.current;
+		if (!container || !root) return;
+		const measure = () => {
+			root.style.setProperty("--lar-header-height", `${container.getBoundingClientRect().height}px`);
+		};
+		const observer = new ResizeObserver(measure);
+		observer.observe(container);
+		measure();
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: shell,
+		className: "flex min-h-dvh min-w-0 flex-col pr-[env(safe-area-inset-right)] pl-[env(safe-area-inset-left)]",
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: headerContainer,
+			"data-scrolled": scrolled || void 0,
+			className: "glass-bar data-scrolled:border-base-300 sticky top-0 z-50 shrink-0 border-b border-transparent pt-[env(safe-area-inset-top)] transition-[border-color] duration-300",
+			children: header
+		}), children]
+	});
+}
+function useDocumentScrolled() {
+	const [scrolled, setScrolled] = useState(false);
+	useEffect(() => {
+		const update = () => setScrolled(window.scrollY > 2);
+		update();
+		window.addEventListener("scroll", update, { passive: true });
+		return () => window.removeEventListener("scroll", update);
+	}, []);
+	return scrolled;
+}
+export { AppShell };
+
+//# sourceMappingURL=AppShell.js.map

package/dist/layout/AppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.js","names":[],"sources":["../../src/layout/AppShell.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useLayoutEffect, useRef, useState } from 'react';\n\ninterface AppShellProps {\n    children: ReactNode;\n    header: ReactNode;\n}\n\n/** The page frame: a column whose header sticks to the top as glass. The document itself\n *  scrolls, so content passes under the header and Safari tints its toolbar to match. The header's hairline\n *  appears once the page has scrolled, as on t3.codes. */\nexport function AppShell({ children, header }: AppShellProps) {\n    const shell = useRef<HTMLDivElement>(null);\n    const headerContainer = useRef<HTMLDivElement>(null);\n    const scrolled = useDocumentScrolled();\n\n    useLayoutEffect(() => {\n        const container = headerContainer.current;\n        const root = shell.current;\n\n        if (!container || !root) return;\n\n        const measure = () => {\n            root.style.setProperty('--lar-header-height', `${container.getBoundingClientRect().height}px`);\n        };\n        const observer = new ResizeObserver(measure);\n\n        observer.observe(container);\n        measure();\n\n        return () => observer.disconnect();\n    }, []);\n\n    return (\n        <div\n            ref={shell}\n            className=\"flex min-h-dvh min-w-0 flex-col pr-[env(safe-area-inset-right)] pl-[env(safe-area-inset-left)]\"\n        >\n            <div\n                ref={headerContainer}\n                data-scrolled={scrolled || undefined}\n                className=\"glass-bar data-scrolled:border-base-300 sticky top-0 z-50 shrink-0 border-b border-transparent pt-[env(safe-area-inset-top)] transition-[border-color] duration-300\"\n            >\n                {header}\n            </div>\n            {children}\n        </div>\n    );\n}\n\nfunction useDocumentScrolled() {\n    const [scrolled, setScrolled] = useState(false);\n\n    useEffect(() => {\n        const update = () => setScrolled(window.scrollY > 2);\n\n        update();\n        window.addEventListener('scroll', update, { passive: true });\n\n        return () => window.removeEventListener('scroll', update);\n    }, []);\n\n    return scrolled;\n}\n"],"mappings":";;;;;;AAUA,SAAgB,SAAS,EAAE,UAAU,UAAyB;CAC1D,MAAM,QAAQ,OAAuB,IAAI;CACzC,MAAM,kBAAkB,OAAuB,IAAI;CACnD,MAAM,WAAW,oBAAoB;CAErC,sBAAsB;EAClB,MAAM,YAAY,gBAAgB;EAClC,MAAM,OAAO,MAAM;EAEnB,IAAI,CAAC,aAAa,CAAC,MAAM;EAEzB,MAAM,gBAAgB;GAClB,KAAK,MAAM,YAAY,uBAAuB,GAAG,UAAU,sBAAsB,CAAC,CAAC,OAAO,GAAG;EACjG;EACA,MAAM,WAAW,IAAI,eAAe,OAAO;EAE3C,SAAS,QAAQ,SAAS;EAC1B,QAAQ;EAER,aAAa,SAAS,WAAW;CACrC,GAAG,CAAC,CAAC;CAEL,OACI,qBAAC,OAAD;EACI,KAAK;EACL,WAAU;EAFd,UAAA,CAII,oBAAC,OAAD;GACI,KAAK;GACL,iBAAe,YAAY,KAAA;GAC3B,WAAU;GAET,UAAA;EACA,CAAA,GACJ,QACA;;AAEb;AAEA,SAAS,sBAAsB;CAC3B,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAE9C,gBAAgB;EACZ,MAAM,eAAe,YAAY,OAAO,UAAU,CAAC;EAEnD,OAAO;EACP,OAAO,iBAAiB,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC;EAE3D,aAAa,OAAO,oBAAoB,UAAU,MAAM;CAC5D,GAAG,CAAC,CAAC;CAEL,OAAO;AACX"}

package/dist/layout/AuthLayout.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+interface AuthLayoutProps {
+  brandLabel: string;
+  children: ReactNode;
+  description?: string;
+  title: string;
+}
+/** A page-centered card for signing in or first-run setup, shown before the app shell exists. */
+export declare function AuthLayout({ brandLabel, children, description, title }: AuthLayoutProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AuthLayout.d.ts.map

package/dist/layout/AuthLayout.js

@@ -0,0 +1,48 @@
+import { BrandMark } from "../display/BrandMark.js";
+import { Heading, Text } from "../typography/Typography.js";
+import { Inline, Stack } from "./Flow.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/layout/AuthLayout.tsx
+/** A page-centered card for signing in or first-run setup, shown before the app shell exists. */
+function AuthLayout({ brandLabel, children, description, title }) {
+	const titleId = useId();
+	return /* @__PURE__ */ jsx("main", {
+		className: "flex min-h-dvh items-center justify-center px-4 py-10",
+		children: /* @__PURE__ */ jsx("section", {
+			"aria-labelledby": titleId,
+			className: "border-base-300 bg-base-100 w-full max-w-sm rounded-2xl border p-6 shadow-[0_24px_64px_-32px_rgb(0_0_0/35%)] sm:p-8",
+			children: /* @__PURE__ */ jsxs(Stack, {
+				space: "page",
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					space: "related",
+					className: "items-center text-center",
+					children: [
+						/* @__PURE__ */ jsxs(Inline, {
+							align: "baseline",
+							space: "tight",
+							className: "text-xl leading-none",
+							children: [/* @__PURE__ */ jsx(BrandMark, { label: brandLabel }), /* @__PURE__ */ jsx("span", {
+								className: "font-medium",
+								children: "Server"
+							})]
+						}),
+						/* @__PURE__ */ jsx(Heading, {
+							id: titleId,
+							as: "h1",
+							variant: "section",
+							children: title
+						}),
+						description ? /* @__PURE__ */ jsx(Text, {
+							tone: "muted",
+							children: description
+						}) : null
+					]
+				}), children]
+			})
+		})
+	});
+}
+export { AuthLayout };
+
+//# sourceMappingURL=AuthLayout.js.map

package/dist/layout/AuthLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthLayout.js","names":[],"sources":["../../src/layout/AuthLayout.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { BrandMark } from '../display/BrandMark';\nimport { Heading, Text } from '../typography/Typography';\nimport { Inline, Stack } from './Flow';\n\ninterface AuthLayoutProps {\n    brandLabel: string;\n    children: ReactNode;\n    description?: string;\n    title: string;\n}\n\n/** A page-centered card for signing in or first-run setup, shown before the app shell exists. */\nexport function AuthLayout({ brandLabel, children, description, title }: AuthLayoutProps) {\n    const titleId = useId();\n\n    return (\n        <main className=\"flex min-h-dvh items-center justify-center px-4 py-10\">\n            <section\n                aria-labelledby={titleId}\n                className=\"border-base-300 bg-base-100 w-full max-w-sm rounded-2xl border p-6 shadow-[0_24px_64px_-32px_rgb(0_0_0/35%)] sm:p-8\"\n            >\n                <Stack space=\"page\">\n                    <Stack space=\"related\" className=\"items-center text-center\">\n                        <Inline align=\"baseline\" space=\"tight\" className=\"text-xl leading-none\">\n                            <BrandMark label={brandLabel} />\n                            <span className=\"font-medium\">Server</span>\n                        </Inline>\n                        <Heading id={titleId} as=\"h1\" variant=\"section\">\n                            {title}\n                        </Heading>\n                        {description ? <Text tone=\"muted\">{description}</Text> : null}\n                    </Stack>\n                    {children}\n                </Stack>\n            </section>\n        </main>\n    );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,WAAW,EAAE,YAAY,UAAU,aAAa,SAA0B;CACtF,MAAM,UAAU,MAAM;CAEtB,OACI,oBAAC,QAAD;EAAM,WAAU;EACZ,UAAA,oBAAC,WAAD;GACI,mBAAiB;GACjB,WAAU;GAEV,UAAA,qBAAC,OAAD;IAAO,OAAM;IAAb,UAAA,CACI,qBAAC,OAAD;KAAO,OAAM;KAAU,WAAU;KAAjC,UAAA;MACI,qBAAC,QAAD;OAAQ,OAAM;OAAW,OAAM;OAAQ,WAAU;OAAjD,UAAA,CACI,oBAAC,WAAD,EAAW,OAAO,WAAa,CAAA,GAC/B,oBAAC,QAAD;QAAM,WAAU;QAAc,UAAA;OAAY,CAAA,CACtC;;MACR,oBAAC,SAAD;OAAS,IAAI;OAAS,IAAG;OAAK,SAAQ;OACjC,UAAA;MACI,CAAA;MACR,cAAc,oBAAC,MAAD;OAAM,MAAK;OAAS,UAAA;MAAkB,CAAA,IAAI;KACtD;IACN,CAAA,GAAA,QACE;;EACF,CAAA;CACP,CAAA;AAEd"}

package/dist/layout/ContentContainer.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+interface ContentContainerProps {
+  as?: 'div' | 'main';
+  children: ReactNode;
+  className?: string;
+}
+export declare function ContentContainer({ as, children, className }: ContentContainerProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ContentContainer.d.ts.map

package/dist/layout/ContentContainer.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { Container } from "@ninna-ui/layout";
+// src/layout/ContentContainer.tsx
+function ContentContainer({ as = "div", children, className }) {
+	return /* @__PURE__ */ jsx(Container, {
+		as,
+		maxWidth: "full",
+		padding: false,
+		className: className ? `px-4 ${className}` : "px-4",
+		children
+	});
+}
+export { ContentContainer };
+
+//# sourceMappingURL=ContentContainer.js.map

package/dist/layout/ContentContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentContainer.js","names":[],"sources":["../../src/layout/ContentContainer.tsx"],"sourcesContent":["import { Container } from '@ninna-ui/layout';\nimport type { ReactNode } from 'react';\n\ninterface ContentContainerProps {\n    as?: 'div' | 'main';\n    children: ReactNode;\n    className?: string;\n}\n\nexport function ContentContainer({ as = 'div', children, className }: ContentContainerProps) {\n    return (\n        <Container as={as} maxWidth=\"full\" padding={false} className={className ? `px-4 ${className}` : 'px-4'}>\n            {children}\n        </Container>\n    );\n}\n"],"mappings":";;;AASA,SAAgB,iBAAiB,EAAE,KAAK,OAAO,UAAU,aAAoC;CACzF,OACI,oBAAC,WAAD;EAAe;EAAI,UAAS;EAAO,SAAS;EAAO,WAAW,YAAY,QAAQ,cAAc;EAC3F;CACM,CAAA;AAEnB"}

package/dist/layout/Flow.d.ts

@@ -0,0 +1,26 @@
+import { ComponentProps, ElementType } from "react";
+import { FlexProps, SimpleGrid, StackProps } from "@ninna-ui/layout";
+declare const spacing: {
+  readonly none: '0';
+  readonly tight: '1';
+  readonly related: '2';
+  readonly group: '3';
+  readonly section: '4';
+  readonly page: '6';
+};
+export type FlowSpace = keyof typeof spacing;
+type StackProps$1<C extends ElementType = 'div'> = Omit<StackProps<C>, 'gap' | 'direction'> & {
+  space?: FlowSpace;
+};
+declare function Stack$1<C extends ElementType = 'div'>({ space, ...props }: StackProps$1<C>): import("react").JSX.Element;
+type InlineProps<C extends ElementType> = Omit<FlexProps<C>, 'gap' | 'direction' | 'wrap'> & {
+  space?: FlowSpace;
+  wrap?: boolean;
+};
+export declare function Inline<C extends ElementType = 'div'>({ space, wrap, ...props }: InlineProps<C>): import("react").JSX.Element;
+type GridProps = Omit<ComponentProps<typeof SimpleGrid>, 'gap' | 'minChildWidth' | 'columns'> & {
+  variant?: 'metrics' | 'content' | 'overview' | 'details' | 'pairs' | 'posters';
+};
+declare function Grid$1({ variant, ...props }: GridProps): import("react").JSX.Element;
+export { Grid$1 as Grid, Stack$1 as Stack, StackProps$1 as StackProps };
+//# sourceMappingURL=Flow.d.ts.map