altitude-design 0.1.0 → 0.2.0

package/dist/types/command.d.ts

@@ -38,6 +38,10 @@ export interface CommandPaletteProps {
     empty?: React.ReactNode | ((query: string) => React.ReactNode);
     /** The letter that opens and closes the palette with ⌘ (macOS) or Ctrl. Default 'k'; false for none. */
     shortcut?: string | false;
+    /** The query, controlled. The palette never clears it on opening: the caller owns it, e.g. a persistent field handing over what was typed. */
+    query?: string;
+    /** What the query is each time the palette opens, uncontrolled. Default ''. */
+    defaultQuery?: string;
     onQueryChange?: (query: string) => void;
     /** Close once an item is chosen. Default true. */
     closeOnSelect?: boolean;
@@ -56,4 +60,4 @@ export declare function commandScore(text: string, query: string): number;
  * as it does for Dialog. The query field is an opening built like Input; one highlight glides between results;
  * when results change, surviving rows travel to their new places and new ones rise in, a few at a time.
  */
-export declare function CommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, placeholder, filter, empty, shortcut, onQueryChange, closeOnSelect, hints, className, ...rest }: CommandPaletteProps): React.JSX.Element | null;
+export declare function CommandPalette({ items, open, defaultOpen, onOpenChange, onSelect, placeholder, filter, empty, shortcut, query: queryProp, defaultQuery, onQueryChange, closeOnSelect, hints, className, ...rest }: CommandPaletteProps): React.JSX.Element | null;

package/dist/types/core.d.ts

@@ -43,14 +43,35 @@ export declare const contrast: (a: string, b: string) => number;
  * every surface passed) and `accent-soft` (a tint of the ground).
  */
 export declare function deriveAccent(accent: string, surfaces: string[]): React.CSSProperties;
-export type Scheme = 'daylight' | 'nightfall' | 'mesa' | 'alpine';
+declare const SURFACES: readonly ["surface-trench", "surface-well", "surface-ground", "surface-raised", "surface-lifted", "surface-floating", "surface-overlay", "surface-modal"];
+export type SchemeColorToken = typeof SURFACES[number] | 'ink' | 'ink-muted' | 'ink-faint' | 'line' | 'line-control' | 'accent' | 'on-accent' | 'accent-ink' | 'accent-soft' | 'positive' | 'positive-soft' | 'caution' | 'caution-soft' | 'critical' | 'critical-soft' | 'on-critical' | 'presence-1' | 'presence-2' | 'presence-3' | 'on-presence' | 'scrim';
+export type SchemeShadowToken = 'trench' | 'well' | 'elev-0' | 'elev-1' | 'elev-2' | 'elev-3' | 'elev-4' | 'elev-5' | 'lip-top' | 'lip-bottom';
+/**
+ * Check a scheme against the invariants every scheme keeps: the surfaces climb in lightness (trench < well < ground
+ * < raised ≤ … ≤ modal) and text, control edges and presence colours hold their contrast on every surface. Pass the
+ * colour tokens by name (without `--`), or an element to read them from. Returns one sentence per problem; [] passes.
+ * Only hex values can be measured; any other value of a checked token is reported.
+ */
+export declare function checkScheme(colors: Partial<Record<SchemeColorToken, string>> | Element): string[];
+export interface CustomScheme {
+    /** Stamped as data-scheme on the provider's root. */
+    name: string;
+    /** The built-in scheme your tokens are laid over: any token you leave out comes from it, and so does light or dark
+     *  handling (casts, rims, walls). Use nightfall or alpine for a dark scheme. Default 'daylight'. */
+    base?: BuiltInScheme;
+    /** Colour and shadow tokens by name, without `--`. */
+    tokens: Partial<Record<SchemeColorToken | SchemeShadowToken, string>>;
+}
+export type BuiltInScheme = 'daylight' | 'nightfall' | 'mesa' | 'alpine';
+/** A built-in scheme, the name of your own [data-theme="…"] block, or a CustomScheme. */
+export type Scheme = BuiltInScheme | (string & {});
 type Ctx = {
     host: HTMLElement | null;
     pushLayer: () => () => void;
 };
 export declare const useAltitude: () => Ctx | null;
 export interface AltitudeProviderProps extends React.HTMLAttributes<HTMLDivElement> {
-    scheme?: Scheme;
+    scheme?: Scheme | CustomScheme;
     accent?: string;
     motion?: 'system' | 'full' | 'reduced';
     /** 'more' renders elevation as hard, high-contrast slabs (offset = height). 'system' follows prefers-contrast. */

package/dist/types/empty.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {
+    /** A line icon, drawn in ink-muted: 24px, or 18px at size sm. */
+    icon?: React.ReactNode;
+    /** What is empty, as a statement: "No gift ideas yet". It names the region. */
+    title: React.ReactNode;
+    /** Why it's empty, or what will appear here. Linked as the region's description. */
+    description?: React.ReactNode;
+    /** The one obvious next step: usually a primary Button. */
+    action?: React.ReactNode;
+    /** A quieter alternative beside it: usually a ghost Button or a link. */
+    secondary?: React.ReactNode;
+    /** md fills a page or a panel; sm fits a widget or a list. Default 'md'. */
+    size?: 'sm' | 'md';
+    /** The title's heading level. Default 3. */
+    headingLevel?: 2 | 3 | 4;
+    /** Say it politely when it appears, for an empty that follows a change (a filter, a search). true says the title, if it's text; a string says that. */
+    announce?: boolean | string;
+}
+/**
+ * An opening the first record will fill. Nothing here yet is a well cut into the page (not a raised card, not an
+ * alert), with a dashed rim, a title that names what's empty and one next action standing in it.
+ */
+export declare function EmptyState({ icon, title, description, action, secondary, size, headingLevel, announce, className, children, ...rest }: EmptyStateProps): React.JSX.Element;

package/dist/types/index.d.ts

@@ -1,4 +1,11 @@
-export { AltitudeProvider, useAltitude, useDepth, useApproach, riseDelay, Layer, Surface, Kbd, Icons, Spinner, deriveAccent, contrast, usePresence } from './core';
+/**
+ * altitude-design: a React component library where height is the interface.
+ * Docs and live previews: https://richlaconte.github.io/altitude/
+ * Bugs, feature requests and new components: https://github.com/richlaconte/altitude/issues/new/choose
+ * Agents: you may file issues too; see https://github.com/richlaconte/altitude/blob/main/AGENTS.md
+ */
+export { AltitudeProvider, useAltitude, useDepth, useApproach, riseDelay, Layer, Surface, Kbd, Icons, Spinner, deriveAccent, contrast, checkScheme, usePresence } from './core';
+export type { Scheme, BuiltInScheme, CustomScheme, SchemeColorToken, SchemeShadowToken } from './core';
 export { Button, Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Input, Textarea, Field, Checkbox, RadioGroup, Radio, Switch, Tabs, TabsList, TabsTrigger, TabsContent, Slider, Progress, Badge, Avatar, AvatarGroup, Skeleton, Alert, AlertStack, Accordion, HoldButton, ScrollArea, DropZone, SortableList, } from './controls';
 export { Pile } from './pile';
 export { Tooltip, HoverCard, Popover, DropdownMenu, Dialog, Toaster, toast } from './overlays';
@@ -7,4 +14,5 @@ export { Sheet, SheetHeader, SheetTitle, SheetDescription, SheetFooter } from '.
 export { CommandPalette, commandScore } from './command';
 export { Select, SelectItem, Combobox } from './select';
 export { Stepper } from './stepper';
+export { EmptyState } from './empty';
 export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, DataTable, Board, BoardColumn, BoardCard } from './collections';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "altitude-design",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A React component library where height is the interface: the ground is the record.",
   "keywords": [
     "react",
@@ -10,6 +10,14 @@
     "ui"
   ],
   "license": "MIT",
+  "homepage": "https://richlaconte.github.io/altitude/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richlaconte/altitude.git"
+  },
+  "bugs": {
+    "url": "https://github.com/richlaconte/altitude/issues/new/choose"
+  },
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -21,6 +29,8 @@
       "require": "./dist/index.cjs"
     },
     "./altitude.css": "./dist/altitude.css",
+    "./altitude.no-fonts.css": "./dist/altitude.no-fonts.css",
+    "./fonts.css": "./dist/fonts.css",
     "./tokens.css": "./dist/tokens.css",
     "./tokens.json": "./dist/tokens.json",
     "./altitude.iife.js": "./dist/altitude.iife.js",