@colineapp/ui 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Coline
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,66 @@
+# @colineapp/ui
+
+The Coline design system for tier-2 (React) Coline Apps — the same components
+the Coline platform itself uses, themed live by the host workspace. Your app
+automatically matches the user's theme, including dark mode and brand
+accents, with no theme code of your own.
+
+```tsx
+import {
+  Button,
+  Card,
+  ColineAppProvider,
+  Input,
+  useColine,
+  useColineQuery,
+} from "@colineapp/ui";
+import "@colineapp/ui/styles.css";
+
+function NotesList() {
+  const coline = useColine();
+  const notes = useColineQuery(
+    (c) => c.files.list({ typeKey: "notes.note" }),
+    [],
+  );
+
+  return (
+    <Card>
+      {notes.data?.files.map((file) => (
+        <Button key={file.fileId} variant="ghost">
+          {file.name}
+        </Button>
+      ))}
+    </Card>
+  );
+}
+
+export default function App() {
+  return (
+    <ColineAppProvider>
+      <NotesList />
+    </ColineAppProvider>
+  );
+}
+```
+
+## What's inside
+
+- 21 components: Button, Card, Dialog, Input, Select, Checkbox, Switch,
+  Tabs, Table, Badge, Tooltip, DropdownMenu, and more — Radix-based,
+  accessible, keyboard-friendly.
+- `ColineAppProvider` — connects the sandbox bridge and provides context.
+- Hooks: `useColine` (the capability API), `useColineContext` (workspace /
+  surface / file context), `useColineQuery` (data fetching with
+  loading/error state), `useColorScheme`.
+- `styles.css` — the compiled stylesheet; theme tokens are overridden at
+  runtime by the host, so one CSS file serves every workspace theme.
+
+Used inside a Coline App's react-tier surface (`{ tier: "react", entry:
+"main.tsx" }` in the manifest). Scaffold a working app with
+`npx create-coline-app my-app`.
+
+## Docs
+
+Full guides at [coline.app/developers/docs](https://coline.app/developers/docs).
+
+MIT © Coline

package/dist/index.d.ts

@@ -0,0 +1,203 @@
+import { ClassValue } from 'clsx';
+import * as React$1 from 'react';
+import { SandboxContext } from '@colineapp/app-runtime';
+import { ColineCapabilities } from '@colineapp/sdk/v2';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Checkbox as Checkbox$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Label as Label$1, Popover as Popover$1, Progress as Progress$1, Select as Select$1, Separator as Separator$1, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, Tooltip as Tooltip$1 } from 'radix-ui';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare function ColineAppProvider({ children }: {
+    children: React$1.ReactNode;
+}): React$1.JSX.Element | null;
+declare function useColine(): ColineCapabilities;
+declare function useColineContext(): SandboxContext;
+declare function useColorScheme(): "light" | "dark";
+interface ColineQueryState<T> {
+    data: T | null;
+    error: string | null;
+    isLoading: boolean;
+    refetch: () => void;
+}
+/**
+ * Minimal async-state hook over a capability call (plan §7.2.6). Not a
+ * cache — apps needing one can bring their own; this covers the common
+ * load-render-refresh loop without dependencies.
+ */
+declare function useColineQuery<T>(loader: (coline: ColineCapabilities) => Promise<T>, deps?: React$1.DependencyList): ColineQueryState<T>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "link" | "secondary" | "ghost" | "outline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): React$1.JSX.Element;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "link" | "secondary" | "ghost" | "outline" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const Button: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | "link" | "secondary" | "ghost" | "outline" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    asChild?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare function Card({ className, size, ...props }: React$1.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): React$1.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+
+declare function Checkbox({ className, ...props }: React$1.ComponentProps<typeof Checkbox$1.Root>): React$1.JSX.Element;
+
+declare function Dialog({ ...props }: React$1.ComponentProps<typeof Dialog$1.Root>): React$1.JSX.Element;
+declare function DialogTrigger({ ...props }: React$1.ComponentProps<typeof Dialog$1.Trigger>): React$1.JSX.Element;
+declare function DialogPortal({ ...props }: React$1.ComponentProps<typeof Dialog$1.Portal>): React$1.JSX.Element;
+declare function DialogClose({ ...props }: React$1.ComponentProps<typeof Dialog$1.Close>): React$1.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Overlay>): React$1.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React$1.ComponentProps<typeof Dialog$1.Content> & {
+    showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function DialogFooter({ className, showCloseButton, children, ...props }: React$1.ComponentProps<"div"> & {
+    showCloseButton?: boolean;
+}): React$1.JSX.Element;
+declare function DialogTitle({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Title>): React$1.JSX.Element;
+declare function DialogDescription({ className, ...props }: React$1.ComponentProps<typeof Dialog$1.Description>): React$1.JSX.Element;
+
+declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Root>): React$1.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Portal>): React$1.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Trigger>): React$1.JSX.Element;
+declare function DropdownMenuContent({ className, align, sideOffset, children, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Content>): React$1.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Group>): React$1.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, onPointerEnter, onFocus, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Item> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, onPointerEnter, onFocus, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.CheckboxItem> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioGroup>): React$1.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, onPointerEnter, onFocus, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.RadioItem> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Label> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Separator>): React$1.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Sub>): React$1.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, onPointerEnter, onFocus, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
+    inset?: boolean;
+}): React$1.JSX.Element;
+declare function DropdownMenuSubContent({ className, children, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.SubContent>): React$1.JSX.Element;
+
+declare function Label({ className, ...props }: React$1.ComponentProps<typeof Label$1.Root>): React$1.JSX.Element;
+
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): React$1.JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): React$1.JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "vertical" | "horizontal" | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React$1.JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React$1.JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): React$1.JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): React$1.JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): React$1.JSX.Element | null;
+
+declare function Input({ className, type, ...props }: React$1.ComponentProps<"input">): React$1.JSX.Element;
+
+declare function Popover({ ...props }: React$1.ComponentProps<typeof Popover$1.Root>): React$1.JSX.Element;
+declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof Popover$1.Trigger>): React$1.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof Popover$1.Content>): React$1.JSX.Element;
+declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof Popover$1.Anchor>): React$1.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function PopoverTitle({ className, ...props }: React$1.ComponentProps<"h2">): React$1.JSX.Element;
+declare function PopoverDescription({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element;
+
+declare function Progress({ className, value, ...props }: React$1.ComponentProps<typeof Progress$1.Root>): React$1.JSX.Element;
+
+declare function Select({ ...props }: React$1.ComponentProps<typeof Select$1.Root>): React$1.JSX.Element;
+declare function SelectGroup({ className, ...props }: React$1.ComponentProps<typeof Select$1.Group>): React$1.JSX.Element;
+declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$1.Value>): React$1.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
+    size?: "sm" | "default";
+}): React$1.JSX.Element;
+declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof Select$1.Content>): React$1.JSX.Element;
+declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): React$1.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof Select$1.Item>): React$1.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof Select$1.Separator>): React$1.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollUpButton>): React$1.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollDownButton>): React$1.JSX.Element;
+
+declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): React$1.JSX.Element;
+
+declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+
+declare function Slider({ className, defaultValue, value, min, max, ...props }: React$1.ComponentProps<typeof Slider$1.Root>): React$1.JSX.Element;
+
+declare function Switch({ className, size, ...props }: React$1.ComponentProps<typeof Switch$1.Root> & {
+    size?: "sm" | "default";
+}): React$1.JSX.Element;
+
+declare function Table({ className, ...props }: React$1.ComponentProps<"table">): React$1.JSX.Element;
+declare function TableHeader({ className, ...props }: React$1.ComponentProps<"thead">): React$1.JSX.Element;
+declare function TableBody({ className, ...props }: React$1.ComponentProps<"tbody">): React$1.JSX.Element;
+declare function TableFooter({ className, ...props }: React$1.ComponentProps<"tfoot">): React$1.JSX.Element;
+declare function TableRow({ className, ...props }: React$1.ComponentProps<"tr">): React$1.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<"th">): React$1.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<"td">): React$1.JSX.Element;
+declare function TableCaption({ className, ...props }: React$1.ComponentProps<"caption">): React$1.JSX.Element;
+
+/** Shared spring for tab pill + trigger layout — keep in sync wherever `layout` runs alongside `TabsIndicator`. */
+declare const TABS_LAYOUT_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof Tabs$1.Root>): React$1.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: React$1.ComponentProps<typeof Tabs$1.List> & VariantProps<typeof tabsListVariants>): React$1.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Trigger>): React$1.JSX.Element;
+/** Animated sliding pill indicator for TabsList (Apple-style). */
+declare function TabsIndicator({ className, layoutId, }: {
+    className?: string;
+    layoutId?: string;
+}): React$1.JSX.Element;
+declare function TabsContent({ className, ...props }: React$1.ComponentProps<typeof Tabs$1.Content>): React$1.JSX.Element;
+
+declare function Textarea({ className, ...props }: React$1.ComponentProps<"textarea">): React$1.JSX.Element;
+
+declare const toggleVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, ...props }: React$1.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): React$1.JSX.Element;
+
+declare function TooltipProvider({ delayDuration, ...props }: React$1.ComponentProps<typeof Tooltip$1.Provider>): React$1.JSX.Element;
+declare function Tooltip({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Root>): React$1.JSX.Element;
+declare function TooltipTrigger({ ...props }: React$1.ComponentProps<typeof Tooltip$1.Trigger>): React$1.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React$1.ComponentProps<typeof Tooltip$1.Content>): React$1.JSX.Element;
+
+export { Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColineAppProvider, type ColineQueryState, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Input, Label, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Slider, Switch, TABS_LAYOUT_SPRING, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsIndicator, TabsList, TabsTrigger, Textarea, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, tabsListVariants, toggleVariants, useColine, useColineContext, useColineQuery, useColorScheme };