The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| 1 | // @colineapp/ui — the tier-2 React component library for Coline Apps |
| 2 | // (plan §7.2.4). The components are the Coline design system, vendored |
| 3 | // from the platform's shadcn set; they consume theme tokens injected by |
| 4 | // the sandbox bridge, so dark mode and brand changes stay host-controlled. |
| 5 | |
| 6 | export { cn } from |
| 7 | export { |
| 8 | ColineAppProvider, |
| 9 | useColine, |
| 10 | useColineContext, |
| 11 | useColineQuery, |
| 12 | useColorScheme, |
| 13 | useToast, |
| 14 | } from "./provider"; |
| 15 | export type { ColineQueryState } from "./provider"; |
| 16 | export { ColineSiteProvider, useSiteColorScheme } from "./site-provider"; |
| 17 | export type { ColineSiteAccent, ColineSiteTheme } from "./site-provider"; |
| 18 | export { transitions, staggerDelay, fadeUp, EASE_OUT } from "./lib/motion"; |
| 19 | // The kit's animation engine, so apps animate with the same one. |
| 20 | export { AnimatePresence, LayoutGroup, motion, useReducedMotion } from "framer-motion"; |
| 21 |
| 22 | // Primitives (vendored from the platform's shadcn set). |
| 23 | export * from "./components/badge"; |
| 24 | export * from "./components/button"; |
| 25 | export * from "./components/card"; |
| 26 | export * from "./components/checkbox"; |
| 27 | export * from "./components/dialog"; |
| 28 | export * from "./components/dropdown-menu"; |
| 29 | export * from "./components/field"; |
| 30 | export * from "./components/input"; |
| 31 | export * from "./components/label"; |
| 32 | export * from "./components/popover"; |
| 33 | export * from "./components/progress"; |
| 34 | export * from "./components/select"; |
| 35 | export * from "./components/separator"; |
| 36 | export * from "./components/skeleton"; |
| 37 | export * from "./components/slider"; |
| 38 | export * from "./components/switch"; |
| 39 | export * from "./components/table"; |
| 40 | export * from "./components/tabs"; |
| 41 | export * from "./components/textarea"; |
| 42 | export * from "./components/toggle"; |
| 43 | export * from "./components/tooltip"; |
| 44 |
| 45 | // Kit components. |
| 46 | export * from "./components/accordion"; |
| 47 | export * from "./components/action-buttons"; |
| 48 | export * from "./components/avatar"; |
| 49 | export * from "./components/banner"; |
| 50 | export * from "./components/calendar"; |
| 51 | export * from "./components/chart"; |
| 52 | export * from "./components/command"; |
| 53 | export * from "./components/data-grid"; |
| 54 | export * from "./components/files"; |
| 55 | export * from "./components/kanban"; |
| 56 | export * from "./components/pagination"; |
| 57 | export * from "./components/property-list"; |
| 58 | export * from "./components/radio-group"; |
| 59 | export * from "./components/search-input"; |
| 60 | export * from "./components/segmented-control"; |
| 61 | export * from "./components/sheet"; |
| 62 | export * from "./components/spinner"; |
| 63 | export * from "./components/stat"; |
| 64 | export * from "./components/steps"; |
| 65 | export * from "./components/timeline"; |
| 66 |
| 67 | // Hooks. |
| 68 | export { useLiveCollection } from "./live-collection"; |
| 69 | export { useColineMutation } from "./hooks/use-coline-mutation"; |
| 70 | export type { ColineMutation } from "./hooks/use-coline-mutation"; |
| 71 | export { useJob } from "./hooks/use-job"; |
| 72 | export { useConnection, useDebouncedValue } from "./hooks/use-connection"; |
| 73 |
| 74 | export * from "./patterns/workspace"; |
| 75 | export { FilterMenu } from "./patterns/filter-menu"; |
| 76 |