base-themes 0.1.2 → 0.1.3

package/src/components/ui/Toast.css

@@ -0,0 +1,75 @@
+.bento-toast-provider {
+  position: fixed;
+  right: 24px;
+  bottom: 24px;
+  z-index: 100;
+  display: grid;
+  gap: 12px;
+  width: min(420px, calc(100vw - 32px));
+}
+
+.bento-toast {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: flex-start;
+  gap: 14px;
+  padding: 16px 44px 16px 16px;
+  border: 1px solid var(--bt-border-strong);
+  border-radius: var(--bt-radius);
+  color: var(--bt-fg);
+  background: color-mix(in srgb, var(--bt-surface), var(--bt-bg) 4%);
+  box-shadow: var(--bt-shadow);
+  isolation: isolate;
+}
+
+.bento-toast-title {
+  color: var(--bt-fg);
+  font-size: 14px;
+  font-weight: 780;
+  line-height: 1.35;
+}
+
+.bento-toast-description {
+  margin-top: 6px;
+  color: var(--bt-muted-fg);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.bento-toast-close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  flex-shrink: 0;
+  display: grid;
+  width: 26px;
+  height: 26px;
+  place-items: center;
+  border: 0;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-muted-fg);
+  background: transparent;
+  cursor: pointer;
+  opacity: 0.72;
+  transition: color 140ms ease, background 140ms ease, opacity 140ms ease;
+}
+
+.bento-toast-close:hover {
+  color: var(--bt-fg);
+  background: var(--bt-surface-muted);
+  opacity: 1;
+}
+
+[data-theme='dark'] .bento-toast {
+  border-color: var(--bt-border-strong);
+  background: var(--bt-select-popup-bg, var(--bt-surface));
+  box-shadow: var(--bt-shadow);
+}
+
+@media (max-width: 640px) {
+  .bento-toast-provider {
+    right: 16px;
+    bottom: 16px;
+  }
+}

package/src/components/ui/Toast.tsx

@@ -0,0 +1,48 @@
+import { Toast } from '@base-ui/react/toast'
+import { type ReactNode } from 'react'
+import { X } from 'lucide-react'
+import './Toast.css'
+
+type ToastProviderProps = {
+  children: ReactNode
+}
+
+function ToastList() {
+  const { toasts } = Toast.useToastManager()
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="bento-toast-provider">
+      {toasts.map((toast) => (
+        <Toast.Root className="bento-toast" key={toast.id} toast={toast}>
+          <div>
+            <Toast.Title className="bento-toast-title">{toast.title}</Toast.Title>
+            {toast.description && (
+              <Toast.Description className="bento-toast-description">
+                {toast.description}
+              </Toast.Description>
+            )}
+          </div>
+          <Toast.Close
+            className="bento-toast-close"
+            aria-label="Dismiss"
+            render={<button type="button" />}
+          >
+            <X size={15} />
+          </Toast.Close>
+        </Toast.Root>
+      ))}
+    </div>
+  )
+}
+
+export function ToastProvider({ children }: ToastProviderProps) {
+  return (
+    <Toast.Provider>
+      {children}
+      <ToastList />
+    </Toast.Provider>
+  )
+}
+
+export type { ToastProviderProps }

package/src/components/ui/Toggle.tsx

@@ -0,0 +1,12 @@
+import { Toggle as BaseToggle } from '@base-ui/react/toggle'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './ToggleGroup.css'
+
+export type ToggleProps = ComponentPropsWithoutRef<typeof BaseToggle>
+
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(({ className, ...rest }, ref) => (
+  <BaseToggle ref={ref} className={clsx('bento-toggle', className)} {...rest} />
+))
+
+Toggle.displayName = 'Toggle'

package/src/components/ui/ToggleGroup.css

@@ -0,0 +1,35 @@
+.bento-toggle-group {
+  display: inline-flex;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--group-bg);
+}
+
+.bento-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-muted-fg);
+  background: transparent;
+  cursor: pointer;
+  font-weight: var(--bt-font-weight, 680);
+  font-size: 14px;
+  transition: color var(--bt-duration, 140ms) ease, background var(--bt-duration, 140ms) ease;
+}
+
+.bento-toggle[data-pressed] {
+  color: var(--bt-fg);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+}
+
+.bento-toggle:focus-visible {
+  outline: 3px solid var(--bt-ring, rgba(37, 99, 235, 0.32));
+  outline-offset: 2px;
+}

package/src/components/ui/ToggleGroup.tsx

@@ -0,0 +1,30 @@
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group'
+import { Toggle } from '@base-ui/react/toggle'
+import { type ComponentPropsWithoutRef } from 'react'
+import clsx from 'clsx'
+import './ToggleGroup.css'
+
+type ToggleOption = { value: string; label: string }
+
+type ToggleGroupProps = Omit<ComponentPropsWithoutRef<typeof BaseToggleGroup>, 'defaultValue'> & {
+  options: ToggleOption[]
+  defaultValue?: string[]
+}
+
+export function ToggleGroup({ options, defaultValue, className, ...rest }: ToggleGroupProps) {
+  return (
+    <BaseToggleGroup
+      defaultValue={defaultValue}
+      className={clsx('bento-toggle-group', className)}
+      {...rest}
+    >
+      {options.map((opt) => (
+        <Toggle className="bento-toggle" key={opt.value} value={opt.value}>
+          {opt.label}
+        </Toggle>
+      ))}
+    </BaseToggleGroup>
+  )
+}
+
+export type { ToggleGroupProps, ToggleOption }

package/src/components/ui/Toolbar.css

@@ -0,0 +1,60 @@
+.bento-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  padding: 8px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+}
+
+.bento-toolbar-group {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.bento-toolbar-button {
+  display: inline-grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 0;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-text);
+  background: transparent;
+  cursor: pointer;
+}
+
+.bento-toolbar-button:hover,
+.bento-toolbar-button[data-pressed] {
+  color: var(--bt-fg);
+  background: var(--bt-surface-muted);
+}
+
+.bento-toolbar-separator {
+  width: 1px;
+  height: 22px;
+  margin: 0 4px;
+  background: var(--bt-border);
+}
+
+.bento-toolbar-search {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  height: 32px;
+  padding: 0 9px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-muted-fg);
+}
+
+.bento-toolbar-input {
+  width: 150px;
+  border: 0;
+  color: var(--bt-fg);
+  background: transparent;
+  outline: 0;
+}

package/src/components/ui/Toolbar.tsx

@@ -0,0 +1,36 @@
+import { Toolbar as BaseToolbar } from '@base-ui/react/toolbar'
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react'
+import { Bold, Italic, Link, Search } from 'lucide-react'
+import clsx from 'clsx'
+import './Toolbar.css'
+
+export type ToolbarProps = ComponentPropsWithoutRef<typeof BaseToolbar.Root> & {
+  showSearch?: boolean
+}
+
+export function Toolbar({ className, showSearch = true, ...rest }: ToolbarProps) {
+  return (
+    <BaseToolbar.Root className={clsx('bento-toolbar', className)} {...rest}>
+      <BaseToolbar.Group className="bento-toolbar-group">
+        <ToolbarButton aria-label="Bold"><Bold size={15} /></ToolbarButton>
+        <ToolbarButton aria-label="Italic"><Italic size={15} /></ToolbarButton>
+        <BaseToolbar.Separator className="bento-toolbar-separator" />
+        <BaseToolbar.Link className="bento-toolbar-button" href="https://base-ui.com" target="_blank" rel="noreferrer" aria-label="Base UI docs">
+          <Link size={15} />
+        </BaseToolbar.Link>
+      </BaseToolbar.Group>
+      {showSearch && (
+        <div className="bento-toolbar-search">
+          <Search size={14} />
+          <BaseToolbar.Input className="bento-toolbar-input" placeholder="Search docs" />
+        </div>
+      )}
+    </BaseToolbar.Root>
+  )
+}
+
+function ToolbarButton({ children, ...rest }: ComponentPropsWithoutRef<typeof BaseToolbar.Button> & { children: ReactNode }) {
+  return <BaseToolbar.Button className="bento-toolbar-button" {...rest}>{children}</BaseToolbar.Button>
+}
+
+export { BaseToolbar }

package/src/components/ui/Tooltip.css

@@ -0,0 +1,14 @@
+.bento-tooltip-popup {
+  padding: 8px 10px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+  color: var(--bt-fg);
+  font-size: 13px;
+  font-weight: 720;
+}
+
+.bento-tooltip-arrow {
+  fill: var(--bt-select-popup-bg, var(--bt-surface));
+}

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1,31 @@
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip'
+import { type ReactElement, type ReactNode } from 'react'
+import clsx from 'clsx'
+import './Tooltip.css'
+
+type TooltipProps = {
+  content: ReactNode
+  children: ReactElement
+  className?: string
+}
+
+export function Tooltip({ content, children, className }: TooltipProps) {
+  return (
+    <BaseTooltip.Root>
+      <BaseTooltip.Trigger render={children} />
+      <BaseTooltip.Portal>
+        <BaseTooltip.Positioner sideOffset={8}>
+          <BaseTooltip.Popup className={clsx('bento-tooltip-popup', className)}>
+            {content}
+            <BaseTooltip.Arrow className="bento-tooltip-arrow" />
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    </BaseTooltip.Root>
+  )
+}
+
+Tooltip.Provider = BaseTooltip.Provider
+
+export { BaseTooltip }
+export type { TooltipProps }

package/src/components/ui/index.ts

@@ -0,0 +1,83 @@
+export { Accordion } from './Accordion'
+export { AlertDialog } from './AlertDialog'
+export { Autocomplete } from './Autocomplete'
+export { Avatar, AvatarGroup } from './Avatar'
+export { Button } from './Button'
+export { Checkbox } from './Checkbox'
+export { CheckboxGroup } from './CheckboxGroup'
+export { Collapsible } from './Collapsible'
+export { Combobox } from './Combobox'
+export { ContextMenu } from './ContextMenu'
+export { CspProvider } from './CspProvider'
+export { Dialog } from './Dialog'
+export { DirectionProvider } from './DirectionProvider'
+export { useDirection } from './useDirection'
+export { Drawer } from './Drawer'
+export { Field } from './Field'
+export { Fieldset } from './Fieldset'
+export { Form } from './Form'
+export { Input, Textarea } from './Input'
+export { Menu } from './Menu'
+export { Menubar } from './Menubar'
+export { Meter } from './Meter'
+export { NavigationMenu } from './NavigationMenu'
+export { NumberField } from './NumberField'
+export { OtpField } from './OtpField'
+export { Popover } from './Popover'
+export { PreviewCard } from './PreviewCard'
+export { Progress } from './Progress'
+export { Radio } from './Radio'
+export { RadioGroup } from './RadioGroup'
+export { ScrollArea } from './ScrollArea'
+export { Select } from './Select'
+export { Separator } from './Separator'
+export { Slider } from './Slider'
+export { Switch } from './Switch'
+export { Tabs } from './Tabs'
+export { Toggle } from './Toggle'
+export { ToastProvider } from './Toast'
+export { useToastManager } from './useToastManager'
+export { ToggleGroup } from './ToggleGroup'
+export { Toolbar } from './Toolbar'
+export { Tooltip } from './Tooltip'
+
+export type { AccordionItem, AccordionProps } from './Accordion'
+export type { AlertDialogProps } from './AlertDialog'
+export type { AutocompleteOption, AutocompleteProps } from './Autocomplete'
+export type { AvatarProps } from './Avatar'
+export type { ButtonProps } from './Button'
+export type { CheckboxProps } from './Checkbox'
+export type { CheckboxGroupOption, CheckboxGroupProps } from './CheckboxGroup'
+export type { CollapsibleProps } from './Collapsible'
+export type { ComboboxOption, ComboboxProps } from './Combobox'
+export type { ContextMenuItemData, ContextMenuProps } from './ContextMenu'
+export type { CspProviderProps } from './CspProvider'
+export type { DialogProps } from './Dialog'
+export type { DirectionProviderProps, TextDirection } from './DirectionProvider'
+export type { DrawerProps } from './Drawer'
+export type { FieldProps } from './Field'
+export type { FieldsetProps } from './Fieldset'
+export type { FormProps } from './Form'
+export type { InputProps, TextareaProps } from './Input'
+export type { MenuItemData, MenuProps } from './Menu'
+export type { MenubarMenu, MenubarProps } from './Menubar'
+export type { MeterProps } from './Meter'
+export type { NavMenuItem, NavigationMenuProps } from './NavigationMenu'
+export type { NumberFieldProps } from './NumberField'
+export type { OtpFieldProps } from './OtpField'
+export type { PopoverProps } from './Popover'
+export type { PreviewCardProps } from './PreviewCard'
+export type { ProgressProps } from './Progress'
+export type { RadioProps } from './Radio'
+export type { RadioGroupProps, RadioOption } from './RadioGroup'
+export type { ScrollAreaProps } from './ScrollArea'
+export type { SelectProps } from './Select'
+export type { SeparatorProps } from './Separator'
+export type { SliderProps } from './Slider'
+export type { SwitchProps } from './Switch'
+export type { TabPanel, TabsProps } from './Tabs'
+export type { ToggleProps } from './Toggle'
+export type { ToastProviderProps } from './Toast'
+export type { ToggleGroupProps, ToggleOption } from './ToggleGroup'
+export type { ToolbarProps } from './Toolbar'
+export type { TooltipProps } from './Tooltip'

package/src/components/ui/useDirection.ts

@@ -0,0 +1 @@
+export { useDirection } from '@base-ui/react/direction-provider'

package/src/components/ui/useToastManager.ts

@@ -0,0 +1,11 @@
+import { Toast } from '@base-ui/react/toast'
+
+export function useToastManager() {
+  const manager = Toast.useToastManager()
+  return {
+    add: (title: string, description?: string) => {
+      return manager.add({ title, description } as never)
+    },
+    close: (id?: string) => manager.close(id),
+  }
+}

package/src/docs/blockMeta.json

@@ -0,0 +1,66 @@
+[
+  {
+    "id": "dashboard-shell",
+    "registryName": "dashboard-shell",
+    "title": "Dashboard Shell",
+    "category": "Application UI",
+    "description": "Operational dashboard header with metrics, progress, and health status.",
+    "exportName": "DashboardShell"
+  },
+  {
+    "id": "settings-form",
+    "registryName": "settings-form",
+    "title": "Settings Form",
+    "category": "Forms",
+    "description": "Workspace settings form with fields, density selection, and switches.",
+    "exportName": "SettingsForm"
+  },
+  {
+    "id": "auth-card",
+    "registryName": "auth-card",
+    "title": "Auth Card",
+    "category": "Authentication",
+    "description": "Focused sign-in card with email, password, remembered device, and SSO action.",
+    "exportName": "AuthCard"
+  },
+  {
+    "id": "pricing-panel",
+    "registryName": "pricing-panel",
+    "title": "Pricing Panel",
+    "category": "Billing",
+    "description": "Compact pricing and upgrade panel for billing or plan-selection screens.",
+    "exportName": "PricingPanel"
+  },
+  {
+    "id": "data-table",
+    "registryName": "data-table",
+    "title": "Data Table",
+    "category": "Data Display",
+    "description": "Small operational table with status filtering and row badges.",
+    "exportName": "DataTableBlock"
+  },
+  {
+    "id": "command-palette",
+    "registryName": "command-palette",
+    "title": "Command Palette",
+    "category": "Command",
+    "description": "Quick-action search panel for navigation, product commands, and agent workflows.",
+    "exportName": "CommandPaletteBlock"
+  },
+  {
+    "id": "team-activity-feed",
+    "registryName": "team-activity-feed",
+    "title": "Team Activity Feed",
+    "category": "Collaboration",
+    "description": "Recent workspace activity feed with team avatars and collaboration status.",
+    "exportName": "TeamActivityFeed"
+  },
+  {
+    "id": "theme-showcase-card",
+    "registryName": "theme-showcase-card",
+    "title": "Theme Showcase Card",
+    "category": "Marketing",
+    "description": "Theme value card with token swatches, tabs, and a theme CTA.",
+    "exportName": "ThemeShowcaseCard"
+  }
+]