base-themes 0.1.2 → 0.1.3

package/src/blocks/TeamActivityFeed.tsx

@@ -0,0 +1,38 @@
+import { Avatar, AvatarGroup } from '../components/ui/Avatar'
+import { Button } from '../components/ui/Button'
+import './Blocks.css'
+
+const activity = [
+  { title: 'Published enterprise theme', meta: 'Mina, 12m ago' },
+  { title: 'Reviewed registry copy plan', meta: 'Ava, 34m ago' },
+  { title: 'Updated dashboard block', meta: 'Noah, 1h ago' },
+]
+
+export function TeamActivityFeed() {
+  return (
+    <section className="base-block" aria-label="Team activity feed block">
+      <div className="base-block-header">
+        <div>
+          <h2 className="base-block-title">Team Activity</h2>
+          <p className="base-block-copy">A feed block for recent workspace changes and collaboration status.</p>
+        </div>
+        <AvatarGroup>
+          <Avatar fallback="AV" size="sm" />
+          <Avatar fallback="MN" size="sm" />
+          <Avatar fallback="NH" size="sm" />
+        </AvatarGroup>
+      </div>
+      <div className="base-block-list">
+        {activity.map((item) => (
+          <div className="base-block-list-item" key={item.title}>
+            <div className="base-block-list-main">
+              <strong>{item.title}</strong>
+              <span>{item.meta}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+      <Button type="button" variant="outline">Open activity</Button>
+    </section>
+  )
+}

package/src/blocks/ThemeShowcaseCard.tsx

@@ -0,0 +1,32 @@
+import { Button } from '../components/ui/Button'
+import { Tabs } from '../components/ui/Tabs'
+import './Blocks.css'
+
+const panels = [
+  { value: 'tokens', label: 'Tokens', title: 'CSS variable contract', content: 'Theme styles use shared semantic tokens for surfaces, text, focus, and controls.' },
+  { value: 'registry', label: 'Registry', title: 'Copy-ready metadata', content: 'Components and blocks can be resolved from registry metadata for agent workflows.' },
+]
+
+export function ThemeShowcaseCard() {
+  return (
+    <section className="base-block" aria-label="Theme showcase block">
+      <div className="base-block-header">
+        <div>
+          <h2 className="base-block-title">Theme Showcase</h2>
+          <p className="base-block-copy">A compact block for explaining theme value on landing or docs pages.</p>
+        </div>
+        <span className="base-block-pill">20 styles</span>
+      </div>
+      <div className="base-block-grid" aria-label="Theme swatches">
+        {['--bt-bg', '--bt-surface', '--bt-primary', '--bt-secondary'].map((token) => (
+          <div className="base-block-stat" key={token}>
+            <span className="base-block-muted">{token}</span>
+            <span style={{ display: 'block', height: 24, marginTop: 8, border: '1px solid var(--bt-border)', borderRadius: 'var(--bt-radius-sm)', background: `var(${token})` }} />
+          </div>
+        ))}
+      </div>
+      <Tabs panels={panels} defaultValue="tokens" />
+      <Button type="button">Open themes</Button>
+    </section>
+  )
+}

package/src/blocks/index.ts

@@ -0,0 +1,8 @@
+export { AuthCard } from './AuthCard'
+export { CommandPaletteBlock } from './CommandPaletteBlock'
+export { DashboardShell } from './DashboardShell'
+export { DataTableBlock } from './DataTableBlock'
+export { PricingPanel } from './PricingPanel'
+export { SettingsForm } from './SettingsForm'
+export { TeamActivityFeed } from './TeamActivityFeed'
+export { ThemeShowcaseCard } from './ThemeShowcaseCard'

package/src/components/ui/Accordion.css

@@ -0,0 +1,42 @@
+.bento-accordion {
+  display: grid;
+  gap: 8px;
+}
+
+.bento-accordion-item {
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--group-bg);
+}
+
+.bento-accordion-header {
+  margin: 0;
+}
+
+.bento-accordion-trigger {
+  display: flex;
+  width: 100%;
+  min-height: 46px;
+  align-items: center;
+  justify-content: space-between;
+  border: 0;
+  padding: 0 14px;
+  color: var(--bt-fg);
+  background: transparent;
+  cursor: pointer;
+  font-weight: 760;
+}
+
+.bento-accordion-trigger svg {
+  transition: transform 160ms ease;
+}
+
+.bento-accordion-item[data-open] .bento-accordion-trigger svg {
+  transform: rotate(180deg);
+}
+
+.bento-accordion-panel {
+  padding: 0 14px 14px;
+  color: var(--bt-muted-fg);
+  line-height: 1.6;
+}

package/src/components/ui/Accordion.tsx

@@ -0,0 +1,41 @@
+import { Accordion as BaseAccordion } from '@base-ui/react/accordion'
+import { type ComponentPropsWithoutRef } from 'react'
+import clsx from 'clsx'
+import { ChevronDown } from 'lucide-react'
+import './Accordion.css'
+
+type AccordionItem = {
+  value: string
+  label: string
+  content: string
+}
+
+type AccordionProps = Omit<ComponentPropsWithoutRef<typeof BaseAccordion.Root>, 'defaultValue'> & {
+  items: AccordionItem[]
+  defaultValue?: string | string[]
+}
+
+export function Accordion({ items, defaultValue, className, ...rest }: AccordionProps) {
+  return (
+    <BaseAccordion.Root
+      defaultValue={(defaultValue as never) ?? (items.slice(0, 1).map((i) => i.value) as never)}
+      className={clsx('bento-accordion', className)}
+      {...rest}
+    >
+      {items.map((item) => (
+        <BaseAccordion.Item className="bento-accordion-item" key={item.value} value={item.value}>
+          <BaseAccordion.Header className="bento-accordion-header">
+            <BaseAccordion.Trigger className="bento-accordion-trigger">
+              {item.label}
+              <ChevronDown size={15} />
+            </BaseAccordion.Trigger>
+          </BaseAccordion.Header>
+          <BaseAccordion.Panel className="bento-accordion-panel">{item.content}</BaseAccordion.Panel>
+        </BaseAccordion.Item>
+      ))}
+    </BaseAccordion.Root>
+  )
+}
+
+export { BaseAccordion }
+export type { AccordionProps, AccordionItem }

package/src/components/ui/AlertDialog.css

@@ -0,0 +1,40 @@
+.bento-alert-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  background: var(--backdrop);
+  backdrop-filter: blur(6px);
+}
+
+.bento-alert-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 61;
+  width: min(400px, calc(100vw - 32px));
+  padding: 24px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+  transform: translate(-50%, -50%);
+}
+
+.bento-alert-title {
+  color: var(--bt-fg);
+  font-size: 20px;
+  font-weight: 780;
+  margin: 0;
+}
+
+.bento-alert-description {
+  margin: 14px 0 22px;
+  color: var(--bt-muted-fg);
+  line-height: 1.6;
+}
+
+.bento-alert-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}

package/src/components/ui/AlertDialog.tsx

@@ -0,0 +1,52 @@
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog'
+import { type ReactElement } from 'react'
+import clsx from 'clsx'
+import './AlertDialog.css'
+import './Button.css'
+
+type AlertDialogProps = {
+  trigger: ReactElement
+  title: string
+  description: string
+  confirmLabel?: string
+  cancelLabel?: string
+  onConfirm?: () => void
+  className?: string
+}
+
+export function AlertDialog({
+  trigger,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  onConfirm,
+  className,
+}: AlertDialogProps) {
+  return (
+    <BaseAlertDialog.Root>
+      <BaseAlertDialog.Trigger render={trigger} />
+      <BaseAlertDialog.Portal>
+        <BaseAlertDialog.Backdrop className="bento-alert-backdrop" />
+        <BaseAlertDialog.Popup className={clsx('bento-alert-popup', className)}>
+          <BaseAlertDialog.Title className="bento-alert-title">{title}</BaseAlertDialog.Title>
+          <BaseAlertDialog.Description className="bento-alert-description">
+            {description}
+          </BaseAlertDialog.Description>
+          <div className="bento-alert-actions">
+            <BaseAlertDialog.Close className="bento-button outline"> {cancelLabel}</BaseAlertDialog.Close>
+            <BaseAlertDialog.Close
+              className="bento-button accent"
+              onClick={onConfirm}
+            >
+              {confirmLabel}
+            </BaseAlertDialog.Close>
+          </div>
+        </BaseAlertDialog.Popup>
+      </BaseAlertDialog.Portal>
+    </BaseAlertDialog.Root>
+  )
+}
+
+export { BaseAlertDialog }
+export type { AlertDialogProps }

package/src/components/ui/Autocomplete.css

@@ -0,0 +1,3 @@
+.bento-autocomplete {
+  width: min(100%, 320px);
+}

package/src/components/ui/Autocomplete.tsx

@@ -0,0 +1,50 @@
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete'
+import { Check, Search } from 'lucide-react'
+import clsx from 'clsx'
+import './Combobox.css'
+import './Autocomplete.css'
+
+export type AutocompleteOption = { value: string; label: string }
+
+export type AutocompleteProps = {
+  options: AutocompleteOption[]
+  label?: string
+  placeholder?: string
+  className?: string
+  defaultValue?: string
+  value?: string
+  onValueChange?: (value: string) => void
+  openOnInputClick?: boolean
+  disabled?: boolean
+}
+
+export function Autocomplete({ options, label, placeholder = 'Search...', className, ...rest }: AutocompleteProps) {
+  return (
+    <div className={clsx('bento-combobox bento-autocomplete', className)}>
+    <BaseAutocomplete.Root<AutocompleteOption> items={options} {...rest}>
+      {label && <label className="field-label">{label}</label>}
+      <BaseAutocomplete.InputGroup className="bento-combobox-input-wrap">
+        <Search size={15} />
+        <BaseAutocomplete.Input className="bento-combobox-input" placeholder={placeholder} />
+      </BaseAutocomplete.InputGroup>
+      <BaseAutocomplete.Portal>
+        <BaseAutocomplete.Positioner className="bento-combobox-positioner" sideOffset={8}>
+          <BaseAutocomplete.Popup className="bento-combobox-popup">
+            <BaseAutocomplete.Empty className="bento-combobox-empty">No results</BaseAutocomplete.Empty>
+            <BaseAutocomplete.List>
+              {(item: AutocompleteOption) => (
+                <BaseAutocomplete.Item className="bento-combobox-item" key={item.value} value={item.value}>
+                  <BaseAutocomplete.Value>{item.label}</BaseAutocomplete.Value>
+                  <Check size={14} />
+                </BaseAutocomplete.Item>
+              )}
+            </BaseAutocomplete.List>
+          </BaseAutocomplete.Popup>
+        </BaseAutocomplete.Positioner>
+      </BaseAutocomplete.Portal>
+    </BaseAutocomplete.Root>
+    </div>
+  )
+}
+
+export { BaseAutocomplete }

package/src/components/ui/Avatar.css

@@ -0,0 +1,45 @@
+.bento-avatar {
+  display: inline-flex;
+  width: 40px;
+  height: 40px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--bt-surface-muted);
+  color: var(--bt-fg);
+  font-size: 16px;
+  font-weight: 760;
+  overflow: hidden;
+  user-select: none;
+}
+
+.bento-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bento-avatar.sm {
+  width: 32px;
+  height: 32px;
+  font-size: 13px;
+}
+
+.bento-avatar.lg {
+  width: 56px;
+  height: 56px;
+  font-size: 22px;
+}
+
+.bento-avatar-group {
+  display: flex;
+}
+
+.bento-avatar-group .bento-avatar {
+  border: 2px solid var(--bt-surface);
+  margin-left: -10px;
+}
+
+.bento-avatar-group .bento-avatar:first-child {
+  margin-left: 0;
+}

package/src/components/ui/Avatar.tsx

@@ -0,0 +1,36 @@
+import { Avatar as BaseAvatar } from '@base-ui/react/avatar'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './Avatar.css'
+
+export type AvatarProps = ComponentPropsWithoutRef<typeof BaseAvatar.Root> & {
+  src?: string
+  alt?: string
+  fallback?: string
+  size?: 'sm' | 'md' | 'lg'
+}
+
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
+  ({ src, alt, fallback, size, className, ...rest }, ref) => (
+    <BaseAvatar.Root
+      ref={ref}
+      className={clsx('bento-avatar', size && size !== 'md' && size, className)}
+      {...rest}
+    >
+      {src && <BaseAvatar.Image src={src} alt={alt} />}
+      <BaseAvatar.Fallback>{fallback}</BaseAvatar.Fallback>
+    </BaseAvatar.Root>
+  ),
+)
+
+Avatar.displayName = 'Avatar'
+
+type AvatarGroupProps = ComponentPropsWithoutRef<'div'>
+
+export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
+  ({ className, ...rest }, ref) => (
+    <div ref={ref} className={clsx('bento-avatar-group', className)} {...rest} />
+  ),
+)
+
+AvatarGroup.displayName = 'AvatarGroup'

package/src/components/ui/Button.css

@@ -0,0 +1,79 @@
+.bento-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 16px;
+  border: var(--bt-border-width, 1px) solid transparent;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-bg);
+  background: var(--bt-surface-strong);
+  cursor: pointer;
+  font-weight: var(--bt-font-weight, 720);
+  text-decoration: none;
+  transition: background var(--bt-duration, 160ms) ease, box-shadow var(--bt-duration, 160ms) ease;
+}
+
+.bento-button:hover {
+  color: var(--bt-bg);
+  background: var(--bt-fg);
+}
+
+.bento-button:focus-visible {
+  outline: 3px solid var(--bt-ring, rgba(37, 99, 235, 0.32));
+  outline-offset: 2px;
+}
+
+.bento-button.outline {
+  color: var(--bt-fg);
+  border-color: var(--bt-border);
+  background: var(--bt-surface);
+}
+
+.bento-button.outline:hover {
+  border-color: var(--bt-border-strong);
+  box-shadow: var(--bt-shadow);
+}
+
+.bento-button.ghost {
+  color: var(--bt-fg);
+  background: transparent;
+}
+
+.bento-button.ghost:hover {
+  background: var(--bt-surface-muted);
+}
+
+.bento-button.icon {
+  width: 40px;
+  padding: 0;
+  color: var(--bt-fg);
+  border-color: var(--bt-border);
+  background: var(--bt-surface);
+}
+
+.bento-button.icon:hover {
+  border-color: var(--bt-border-strong);
+  box-shadow: var(--bt-shadow);
+}
+
+.bento-button.accent {
+  color: var(--bt-primary-fg);
+  background: var(--bt-primary);
+}
+
+.bento-button.accent:hover {
+  color: var(--bt-primary-fg);
+  background: var(--bt-primary-hover);
+}
+
+.bento-button.teal {
+  color: var(--bt-secondary-fg);
+  background: var(--bt-secondary);
+}
+
+.bento-button.teal:hover {
+  color: var(--bt-secondary-fg);
+  background: color-mix(in srgb, var(--bt-secondary), var(--bt-fg) 16%);
+}

package/src/components/ui/Button.tsx

@@ -0,0 +1,20 @@
+import { Button as BaseButton } from '@base-ui/react/button'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './Button.css'
+
+export type ButtonProps = ComponentPropsWithoutRef<typeof BaseButton> & {
+  variant?: 'primary' | 'outline' | 'ghost' | 'icon' | 'accent' | 'teal'
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = 'primary', className, ...rest }, ref) => (
+    <BaseButton
+      ref={ref}
+      className={clsx('bento-button', variant !== 'primary' && variant, className)}
+      {...rest}
+    />
+  ),
+)
+
+Button.displayName = 'Button'

package/src/components/ui/Checkbox.css

@@ -0,0 +1,37 @@
+.bento-checkbox {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border: 1px solid var(--bt-border-strong);
+  border-radius: 5px;
+  color: var(--bt-primary-fg);
+  background: var(--bt-surface);
+  cursor: pointer;
+  transition: border-color 140ms ease, background 140ms ease;
+}
+
+.bento-checkbox[data-checked] {
+  border-color: var(--bt-secondary);
+  background: var(--bt-secondary);
+}
+
+.bento-checkbox:focus-visible {
+  outline: 3px solid var(--bt-ring, rgba(37, 99, 235, 0.32));
+  outline-offset: 2px;
+}
+
+.bento-checkbox-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  color: var(--bt-fg);
+  font-weight: 680;
+  cursor: pointer;
+}
+
+.bento-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 16px;
+}

package/src/components/ui/Checkbox.tsx

@@ -0,0 +1,32 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import { Check } from 'lucide-react'
+import './Checkbox.css'
+
+export type CheckboxProps = ComponentPropsWithoutRef<typeof BaseCheckbox.Root> & {
+  label?: string
+}
+
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  ({ label, className, id, ...rest }, ref) => {
+    const inner = (
+      <BaseCheckbox.Root ref={ref} id={id} className={clsx('bento-checkbox', className)} {...rest}>
+        <BaseCheckbox.Indicator>
+          <Check size={14} />
+        </BaseCheckbox.Indicator>
+      </BaseCheckbox.Root>
+    )
+
+    if (!label) return inner
+
+    return (
+      <label className="bento-checkbox-label" htmlFor={id}>
+        {inner}
+        {label}
+      </label>
+    )
+  },
+)
+
+Checkbox.displayName = 'Checkbox'

package/src/components/ui/CheckboxGroup.tsx

@@ -0,0 +1,21 @@
+import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group'
+import { type ComponentPropsWithoutRef } from 'react'
+import clsx from 'clsx'
+import { Checkbox } from './Checkbox'
+import './Checkbox.css'
+
+export type CheckboxGroupOption = { value: string; label: string }
+
+export type CheckboxGroupProps = Omit<ComponentPropsWithoutRef<typeof BaseCheckboxGroup>, 'children'> & {
+  options: CheckboxGroupOption[]
+}
+
+export function CheckboxGroup({ options, className, defaultValue, ...rest }: CheckboxGroupProps) {
+  return (
+    <BaseCheckboxGroup className={clsx('bento-checkbox-group', className)} defaultValue={defaultValue} {...rest}>
+      {options.map((option) => (
+        <Checkbox key={option.value} name={option.value} value={option.value} label={option.label} />
+      ))}
+    </BaseCheckboxGroup>
+  )
+}

package/src/components/ui/Collapsible.css

@@ -0,0 +1,34 @@
+.bento-collapsible {
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--group-bg);
+  overflow: hidden;
+}
+
+.bento-collapsible-trigger {
+  display: flex;
+  width: 100%;
+  min-height: 46px;
+  align-items: center;
+  justify-content: space-between;
+  border: 0;
+  padding: 0 14px;
+  color: var(--bt-fg);
+  background: transparent;
+  cursor: pointer;
+  font-weight: 760;
+}
+
+.bento-collapsible-trigger svg {
+  transition: transform 160ms ease;
+}
+
+.bento-collapsible[data-open] .bento-collapsible-trigger svg {
+  transform: rotate(180deg);
+}
+
+.bento-collapsible-panel {
+  padding: 0 14px 14px;
+  color: var(--bt-muted-fg);
+  line-height: 1.6;
+}

package/src/components/ui/Collapsible.tsx

@@ -0,0 +1,29 @@
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible'
+import { type ReactNode } from 'react'
+import clsx from 'clsx'
+import { ChevronDown } from 'lucide-react'
+import './Collapsible.css'
+
+type CollapsibleProps = {
+  label: string
+  children: ReactNode
+  defaultOpen?: boolean
+  className?: string
+}
+
+export function Collapsible({ label, children, defaultOpen, className }: CollapsibleProps) {
+  return (
+    <BaseCollapsible.Root defaultOpen={defaultOpen} className={clsx('bento-collapsible', className)}>
+      <BaseCollapsible.Trigger className="bento-collapsible-trigger">
+        {label}
+        <ChevronDown size={15} />
+      </BaseCollapsible.Trigger>
+      <BaseCollapsible.Panel className="bento-collapsible-panel">
+        {children}
+      </BaseCollapsible.Panel>
+    </BaseCollapsible.Root>
+  )
+}
+
+export { BaseCollapsible }
+export type { CollapsibleProps }