# @majistudio/ogcr-design-system

> OGCR design system — React 19 components, design tokens, and Tailwind v4 theme bridge. 42 components on Base UI primitives, Tailwind v4 tokens, and CVA variants. Import the stylesheet once with `import '@majistudio/ogcr-design-system/styles.css'`, then import components from the barrel (`import { Button } from '@majistudio/ogcr-design-system'`) or deep-import a single one (`import { Button } from '@majistudio/ogcr-design-system/Button'`). Peer deps: react/react-dom ^19, @base-ui/react ^1, @tanstack/react-table ^8 (only for Table).

## Components

- [Accordion](./dist/components/Accordion/index.d.ts): `import { Accordion } from '@majistudio/ogcr-design-system/Accordion'` — exports Accordion, AccordionItemData, AccordionProps
- [AlertDialog](./dist/components/AlertDialog/index.d.ts): `import { AlertDialog } from '@majistudio/ogcr-design-system/AlertDialog'` — exports AlertDialog, AlertDialogProps, AlertDialogTone
- [Avatar](./dist/components/Avatar/index.d.ts): `import { Avatar } from '@majistudio/ogcr-design-system/Avatar'` — exports Avatar, AvatarProps, AvatarShape, AvatarSize, deriveInitials
- [Breadcrumb](./dist/components/Breadcrumb/index.d.ts): `import { Breadcrumb } from '@majistudio/ogcr-design-system/Breadcrumb'` — exports Breadcrumb, BreadcrumbItem, BreadcrumbProps
- [Button](./dist/components/Button/index.d.ts): `import { Button } from '@majistudio/ogcr-design-system/Button'` — exports Button, ButtonProps, ButtonVariant
- [Calendar](./dist/components/Calendar/index.d.ts): `import { Calendar } from '@majistudio/ogcr-design-system/Calendar'` — exports Calendar, CalendarProps
- [Card](./dist/components/Card/index.d.ts): `import { Card } from '@majistudio/ogcr-design-system/Card'` — exports Card, CardProps
- [Checkbox](./dist/components/Checkbox/index.d.ts): `import { Checkbox } from '@majistudio/ogcr-design-system/Checkbox'` — exports Checkbox, CheckboxLayout, CheckboxProps, CheckboxValue
- [Collapsible](./dist/components/Collapsible/index.d.ts): `import { Collapsible } from '@majistudio/ogcr-design-system/Collapsible'` — exports Collapsible, CollapsibleProps
- [Combobox](./dist/components/Combobox/index.d.ts): `import { Combobox } from '@majistudio/ogcr-design-system/Combobox'` — exports Combobox, ComboboxAlign, ComboboxProps, ComboboxSide
- [ContextMenu](./dist/components/ContextMenu/index.d.ts): `import { ContextMenu } from '@majistudio/ogcr-design-system/ContextMenu'` — exports ContextMenu, ContextMenuItem, ContextMenuProps
- [DatePicker](./dist/components/DatePicker/index.d.ts): `import { DatePicker } from '@majistudio/ogcr-design-system/DatePicker'` — exports DatePicker, DatePickerProps
- [Dialog](./dist/components/Dialog/index.d.ts): `import { Dialog } from '@majistudio/ogcr-design-system/Dialog'` — exports Dialog, DialogAction, dialogBackdropClassName, dialogPopupClassName, DialogProps, DialogSize
- [Form](./dist/components/Form/index.d.ts): `import { Form } from '@majistudio/ogcr-design-system/Form'` — exports Form, FormField, FormFieldProps, FormFieldset, FormFieldsetProps, FormFooter, FormFooterProps, FormProps, FormRow, FormSection, FormSectionProps
- [icons](./dist/components/icons/index.d.ts): `import { ArrowLeftIcon } from '@majistudio/ogcr-design-system/icons'` — exports ArrowLeftIcon, ArrowRightIcon, BellIcon, CalendarIcon, CaretDownIcon, CaretLeftIcon, CaretRightIcon, ChartBarIcon, CheckCircleIcon, CheckIcon, CircleIcon, DotsThreeIcon, FlaskIcon, FolderIcon, GearIcon, InfoIcon, LeafIcon, MailIcon, PanelLeftIcon, SearchIcon, SquaresFourIcon, UserIcon, WarningIcon, WarningOctagonIcon, XIcon
- [Input](./dist/components/Input/index.d.ts): `import { Input } from '@majistudio/ogcr-design-system/Input'` — exports Input, InputProps
- [Kpi](./dist/components/Kpi/index.d.ts): `import { Kpi } from '@majistudio/ogcr-design-system/Kpi'` — exports Kpi, KpiProps, KpiTone
- [Logo](./dist/components/Logo/index.d.ts): `import { Logo } from '@majistudio/ogcr-design-system/Logo'` — exports Logo, LogoMark, LogoMarkProps, LogoProps
- [Menu](./dist/components/Menu/index.d.ts): `import { Menu } from '@majistudio/ogcr-design-system/Menu'` — exports Menu, MenuActionItem, MenuCheckboxItem, MenuGroupItem, MenuItem, MenuLinkItem, MenuProps, MenuRadioGroupItem, MenuSeparatorItem, MenuSubItem
- [Message](./dist/components/Message/index.d.ts): `import { Message } from '@majistudio/ogcr-design-system/Message'` — exports Message, MessageProps, MessageState, MessageType
- [Navigation](./dist/components/Navigation/index.d.ts): `import { Navigation } from '@majistudio/ogcr-design-system/Navigation'` — exports Navigation, NavigationLayout, NavigationProps, NavItem
- [NumberField](./dist/components/NumberField/index.d.ts): `import { NumberField } from '@majistudio/ogcr-design-system/NumberField'` — exports NumberField, NumberFieldProps
- [Pagination](./dist/components/Pagination/index.d.ts): `import { getPaginationRange } from '@majistudio/ogcr-design-system/Pagination'` — exports getPaginationRange, Pagination, PaginationProps
- [Pill](./dist/components/Pill/index.d.ts): `import { Pill } from '@majistudio/ogcr-design-system/Pill'` — exports Pill, PillProps, PillTone
- [Popover](./dist/components/Popover/index.d.ts): `import { Popover } from '@majistudio/ogcr-design-system/Popover'` — exports Popover, PopoverAlign, PopoverArrowSvg, PopoverProps, PopoverSide
- [ProgressBar](./dist/components/ProgressBar/index.d.ts): `import { ProgressBar } from '@majistudio/ogcr-design-system/ProgressBar'` — exports ProgressBar, ProgressBarProps, ProgressBarTone
- [Radio](./dist/components/Radio/index.d.ts): `import { Radio } from '@majistudio/ogcr-design-system/Radio'` — exports Radio, RadioGroup, RadioGroupProps, RadioLayout, RadioProps
- [ScrollArea](./dist/components/ScrollArea/index.d.ts): `import { ScrollArea } from '@majistudio/ogcr-design-system/ScrollArea'` — exports ScrollArea, ScrollAreaProps
- [Select](./dist/components/Select/index.d.ts): `import { Select } from '@majistudio/ogcr-design-system/Select'` — exports Select, SelectAlign, SelectOption, SelectProps, SelectSide
- [Separator](./dist/components/Separator/index.d.ts): `import { Separator } from '@majistudio/ogcr-design-system/Separator'` — exports Separator, SeparatorOrientation, SeparatorProps
- [SideNavigation](./dist/components/SideNavigation/index.d.ts): `import { SideNavigation } from '@majistudio/ogcr-design-system/SideNavigation'` — exports SideNavigation, SideNavigationChild, SideNavigationItem, SideNavigationProps, SideNavigationUser
- [Sidesheet](./dist/components/Sidesheet/index.d.ts): `import { Sidesheet } from '@majistudio/ogcr-design-system/Sidesheet'` — exports Sidesheet, SidesheetAction, SidesheetProps
- [Skeleton](./dist/components/Skeleton/index.d.ts): `import { Skeleton } from '@majistudio/ogcr-design-system/Skeleton'` — exports Skeleton, SkeletonProps, SkeletonVariant
- [Slider](./dist/components/Slider/index.d.ts): `import { Slider } from '@majistudio/ogcr-design-system/Slider'` — exports Slider, SliderProps
- [Switch](./dist/components/Switch/index.d.ts): `import { Switch } from '@majistudio/ogcr-design-system/Switch'` — exports Switch, SwitchProps
- [Table](./dist/components/Table/index.d.ts): `import { DataTable } from '@majistudio/ogcr-design-system/Table'` — exports DataTable, DataTableProps, Table
- [Tabs](./dist/components/Tabs/index.d.ts): `import { TabItem } from '@majistudio/ogcr-design-system/Tabs'` — exports TabItem, Tabs, TabsOrientation, TabsProps
- [Textarea](./dist/components/Textarea/index.d.ts): `import { Textarea } from '@majistudio/ogcr-design-system/Textarea'` — exports Textarea, TextareaProps, TextareaResize
- [Toast](./dist/components/Toast/index.d.ts): `import { ToastProvider } from '@majistudio/ogcr-design-system/Toast'` — exports ToastProvider, ToastProviderProps, ToastTone, useToast
- [Toggle](./dist/components/Toggle/index.d.ts): `import { Toggle } from '@majistudio/ogcr-design-system/Toggle'` — exports Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, ToggleSize
- [Toolbar](./dist/components/Toolbar/index.d.ts): `import { Toolbar } from '@majistudio/ogcr-design-system/Toolbar'` — exports Toolbar, ToolbarButton, ToolbarButtonProps, ToolbarDensity, ToolbarGroup, ToolbarGroupProps, ToolbarInput, ToolbarInputProps, ToolbarLink, ToolbarLinkProps, ToolbarOrientation, ToolbarProps, ToolbarSeparator, ToolbarSeparatorProps
- [Tooltip](./dist/components/Tooltip/index.d.ts): `import { Tooltip } from '@majistudio/ogcr-design-system/Tooltip'` — exports Tooltip, TooltipAlign, TooltipProps, TooltipProvider, TooltipProviderProps, TooltipSide
