base-themes 0.1.2 → 0.1.3

package/src/components/ui/Menu.css

@@ -0,0 +1,59 @@
+.bento-menu-positioner {
+  z-index: 45;
+}
+
+.bento-menu-popup {
+  min-width: 180px;
+  padding: 6px;
+  border: 1px solid var(--bt-border-strong);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+}
+
+.bento-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-fg);
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: var(--bt-font-weight, 680);
+  width: 100%;
+}
+
+[dir='rtl'] .bento-menu-popup,
+.bento-menu-popup:dir(rtl) {
+  text-align: right;
+}
+
+[dir='rtl'] .bento-menu-item,
+.bento-menu-item:dir(rtl) {
+  flex-direction: row-reverse;
+}
+
+.bento-menu-item[data-highlighted] {
+  background: var(--bt-surface-muted);
+}
+
+.bento-menu-item[data-disabled] {
+  color: var(--bt-muted-fg);
+  opacity: 0.5;
+  cursor: default;
+}
+
+.bento-menu-separator {
+  height: 1px;
+  margin: 4px 8px;
+  background: var(--bt-border);
+}
+
+[data-theme='dark'] .bento-menu-popup {
+  background: var(--bt-select-popup-bg, var(--bt-surface));
+  box-shadow: var(--bt-shadow);
+}

package/src/components/ui/Menu.tsx

@@ -0,0 +1,50 @@
+import { Menu as BaseMenu } from '@base-ui/react/menu'
+import { type ReactElement, type ReactNode } from 'react'
+import clsx from 'clsx'
+import './Menu.css'
+
+type MenuItemData = {
+  label: string
+  icon?: ReactNode
+  disabled?: boolean
+  onClick?: () => void
+}
+
+type MenuProps = {
+  trigger: ReactElement
+  items: (MenuItemData | 'separator')[]
+  className?: string
+}
+
+export function Menu({ trigger, items, className }: MenuProps) {
+  return (
+    <BaseMenu.Root>
+      <BaseMenu.Trigger render={trigger} />
+      <BaseMenu.Portal>
+        <BaseMenu.Positioner className="bento-menu-positioner" sideOffset={8}>
+          <BaseMenu.Popup className={clsx('bento-menu-popup', className)}>
+            {items.map((item, i) => {
+              if (item === 'separator') {
+                return <BaseMenu.Separator key={i} className="bento-menu-separator" />
+              }
+              return (
+                <BaseMenu.Item
+                  key={i}
+                  className="bento-menu-item"
+                  disabled={item.disabled}
+                  onClick={item.onClick}
+                >
+                  {item.icon}
+                  {item.label}
+                </BaseMenu.Item>
+              )
+            })}
+          </BaseMenu.Popup>
+        </BaseMenu.Positioner>
+      </BaseMenu.Portal>
+    </BaseMenu.Root>
+  )
+}
+
+export { BaseMenu }
+export type { MenuProps, MenuItemData }

package/src/components/ui/Menubar.css

@@ -0,0 +1,26 @@
+.bento-menubar {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+}
+
+.bento-menubar-trigger {
+  height: 32px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-text);
+  background: transparent;
+  cursor: pointer;
+  font-weight: 650;
+}
+
+.bento-menubar-trigger:hover,
+.bento-menubar-trigger[data-open] {
+  color: var(--bt-fg);
+  background: var(--bt-surface-muted);
+}

package/src/components/ui/Menubar.tsx

@@ -0,0 +1,42 @@
+import { Menubar as BaseMenubar } from '@base-ui/react/menubar'
+import { Menu as BaseMenu } from '@base-ui/react/menu'
+import { type ReactNode } from 'react'
+import clsx from 'clsx'
+import './Menu.css'
+import './Menubar.css'
+
+export type MenubarMenu = {
+  label: string
+  items: { label: string; icon?: ReactNode; disabled?: boolean }[]
+}
+
+export type MenubarProps = {
+  menus: MenubarMenu[]
+  className?: string
+}
+
+export function Menubar({ menus, className }: MenubarProps) {
+  return (
+    <BaseMenubar className={clsx('bento-menubar', className)}>
+      {menus.map((menu) => (
+        <BaseMenu.Root key={menu.label}>
+          <BaseMenu.Trigger className="bento-menubar-trigger">{menu.label}</BaseMenu.Trigger>
+          <BaseMenu.Portal>
+            <BaseMenu.Positioner className="bento-menu-positioner" sideOffset={8}>
+              <BaseMenu.Popup className="bento-menu-popup">
+                {menu.items.map((item) => (
+                  <BaseMenu.Item key={item.label} className="bento-menu-item" disabled={item.disabled}>
+                    {item.icon}
+                    {item.label}
+                  </BaseMenu.Item>
+                ))}
+              </BaseMenu.Popup>
+            </BaseMenu.Positioner>
+          </BaseMenu.Portal>
+        </BaseMenu.Root>
+      ))}
+    </BaseMenubar>
+  )
+}
+
+export { BaseMenubar }

package/src/components/ui/Meter.css

@@ -0,0 +1,45 @@
+.bento-meter {
+  width: 100%;
+}
+
+.bento-meter-track {
+  position: relative;
+  width: 100%;
+  height: 12px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--track-bg);
+}
+
+.bento-meter-indicator {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--bt-primary);
+  transition: width 300ms ease;
+}
+
+.bento-meter-high {
+  background: var(--bt-success);
+}
+
+.bento-meter-mid {
+  background: var(--bt-primary);
+}
+
+.bento-meter-low {
+  background: var(--bt-danger);
+}
+
+.bento-meter-label {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  color: var(--bt-muted-fg);
+  font-size: 13px;
+  font-weight: 680;
+}
+
+.bento-meter-value {
+  color: var(--bt-fg);
+}

package/src/components/ui/Meter.tsx

@@ -0,0 +1,37 @@
+import { Meter as BaseMeter } from '@base-ui/react/meter'
+import { type ComponentPropsWithoutRef, forwardRef, useMemo } from 'react'
+import clsx from 'clsx'
+import './Meter.css'
+
+export type MeterProps = ComponentPropsWithoutRef<typeof BaseMeter.Root> & {
+  showValue?: boolean
+}
+
+export const Meter = forwardRef<HTMLDivElement, MeterProps>(
+  ({ value = 0, min = 0, max = 100, showValue, className, ...rest }, ref) => {
+    const pct = ((value - min) / (max - min)) * 100
+    const colorClass = useMemo(() => {
+      if (pct >= 80) return 'bento-meter-high'
+      if (pct < 30) return 'bento-meter-low'
+      return 'bento-meter-mid'
+    }, [pct])
+
+    return (
+      <div className={clsx('bento-meter', className)}>
+        {showValue && (
+          <div className="bento-meter-label">
+            <span>{rest['aria-label'] ?? 'Meter'}</span>
+            <span className="bento-meter-value">{Math.round(pct)}%</span>
+          </div>
+        )}
+        <BaseMeter.Root ref={ref} value={value} min={min} max={max} {...rest}>
+          <BaseMeter.Track className="bento-meter-track">
+            <BaseMeter.Indicator className={clsx('bento-meter-indicator', colorClass)} />
+          </BaseMeter.Track>
+        </BaseMeter.Root>
+      </div>
+    )
+  },
+)
+
+Meter.displayName = 'Meter'

package/src/components/ui/NavigationMenu.css

@@ -0,0 +1,103 @@
+.bento-nav-menu {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.bento-nav-menu-list {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.bento-nav-menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 0 12px;
+  border: 0;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-fg);
+  background: transparent;
+  cursor: pointer;
+  font-weight: 680;
+  font-size: 14px;
+}
+
+.bento-nav-menu-trigger:hover {
+  background: var(--bt-surface-muted);
+}
+
+[dir='rtl'] .bento-nav-menu-list,
+.bento-nav-menu-list:dir(rtl) {
+  flex-direction: row-reverse;
+}
+
+[dir='rtl'] .bento-nav-menu-trigger,
+.bento-nav-menu-trigger:dir(rtl) {
+  flex-direction: row-reverse;
+}
+
+.bento-nav-menu-trigger svg {
+  transition: transform 140ms ease;
+}
+
+.bento-nav-menu-trigger[data-expanded] svg {
+  transform: rotate(180deg);
+}
+
+.bento-nav-menu-popup {
+  min-width: 200px;
+  padding: 6px;
+  border: 1px solid var(--bt-border-strong);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+}
+
+.bento-nav-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-fg);
+  background: transparent;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 680;
+  width: 100%;
+}
+
+[dir='rtl'] .bento-nav-menu-popup,
+.bento-nav-menu-popup:dir(rtl) {
+  text-align: right;
+}
+
+[dir='rtl'] .bento-nav-menu-item,
+.bento-nav-menu-item:dir(rtl) {
+  flex-direction: row-reverse;
+}
+
+.bento-nav-menu-item[data-highlighted] {
+  background: var(--bt-surface-muted);
+}
+
+.bento-nav-menu-viewport {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  overflow: hidden;
+}
+
+[data-theme='dark'] .bento-nav-menu-popup {
+  background: var(--bt-select-popup-bg, var(--bt-surface));
+  box-shadow: var(--bt-shadow);
+}

package/src/components/ui/NavigationMenu.tsx

@@ -0,0 +1,64 @@
+import { NavigationMenu as BaseNavMenu } from '@base-ui/react/navigation-menu'
+import clsx from 'clsx'
+import { ChevronDown } from 'lucide-react'
+import './NavigationMenu.css'
+
+type NavMenuItem = {
+  label: string
+  href?: string
+  children?: { label: string; href: string; description?: string }[]
+}
+
+type NavigationMenuProps = {
+  items: NavMenuItem[]
+  className?: string
+}
+
+export function NavigationMenu({ items, className }: NavigationMenuProps) {
+  return (
+    <BaseNavMenu.Root className={clsx('bento-nav-menu', className)}>
+      <BaseNavMenu.List className="bento-nav-menu-list">
+        {items.map((item, i) => {
+          if (item.children) {
+            return (
+              <BaseNavMenu.Item key={i}>
+                <BaseNavMenu.Trigger className="bento-nav-menu-trigger">
+                  {item.label}
+                  <ChevronDown size={14} />
+                </BaseNavMenu.Trigger>
+                <BaseNavMenu.Portal>
+                  <BaseNavMenu.Positioner sideOffset={8}>
+                    <BaseNavMenu.Popup className="bento-nav-menu-popup">
+                      {item.children.map((child, j) => (
+                        <BaseNavMenu.Item
+                          key={j}
+                          className="bento-nav-menu-item"
+                          render={<a href={child.href} />}
+                        >
+                          {child.label}
+                        </BaseNavMenu.Item>
+                      ))}
+                    </BaseNavMenu.Popup>
+                  </BaseNavMenu.Positioner>
+                </BaseNavMenu.Portal>
+              </BaseNavMenu.Item>
+            )
+          }
+          return (
+            <BaseNavMenu.Item key={i}>
+              <BaseNavMenu.Link
+                className="bento-nav-menu-trigger"
+                href={item.href}
+                render={<a href={item.href} />}
+              >
+                {item.label}
+              </BaseNavMenu.Link>
+            </BaseNavMenu.Item>
+          )
+        })}
+      </BaseNavMenu.List>
+    </BaseNavMenu.Root>
+  )
+}
+
+export type { NavigationMenuProps, NavMenuItem }

package/src/components/ui/NumberField.css

@@ -0,0 +1,38 @@
+.bento-number-field {
+  display: grid;
+  gap: 8px;
+  width: 220px;
+}
+
+.bento-number-field-group {
+  display: grid;
+  grid-template-columns: 36px 1fr 36px;
+  height: 40px;
+  overflow: hidden;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius-sm);
+  background: var(--bt-surface);
+}
+
+.bento-number-field-button,
+.bento-number-field-input {
+  border: 0;
+  color: var(--bt-fg);
+  background: transparent;
+}
+
+.bento-number-field-button {
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+
+.bento-number-field-button:hover {
+  background: var(--bt-surface-muted);
+}
+
+.bento-number-field-input {
+  min-width: 0;
+  text-align: center;
+  outline: 0;
+}

package/src/components/ui/NumberField.tsx

@@ -0,0 +1,28 @@
+import { NumberField as BaseNumberField } from '@base-ui/react/number-field'
+import { type ComponentPropsWithoutRef } from 'react'
+import { Minus, Plus } from 'lucide-react'
+import clsx from 'clsx'
+import './NumberField.css'
+
+export type NumberFieldProps = ComponentPropsWithoutRef<typeof BaseNumberField.Root> & {
+  label?: string
+}
+
+export function NumberField({ label, className, ...rest }: NumberFieldProps) {
+  return (
+    <BaseNumberField.Root className={clsx('bento-number-field', className)} {...rest}>
+      {label && <label className="field-label">{label}</label>}
+      <BaseNumberField.Group className="bento-number-field-group">
+        <BaseNumberField.Decrement className="bento-number-field-button" aria-label="Decrease">
+          <Minus size={14} />
+        </BaseNumberField.Decrement>
+        <BaseNumberField.Input className="bento-number-field-input" />
+        <BaseNumberField.Increment className="bento-number-field-button" aria-label="Increase">
+          <Plus size={14} />
+        </BaseNumberField.Increment>
+      </BaseNumberField.Group>
+    </BaseNumberField.Root>
+  )
+}
+
+export { BaseNumberField }

package/src/components/ui/OtpField.css

@@ -0,0 +1,28 @@
+.bento-otp-field {
+  display: grid;
+  gap: 8px;
+}
+
+.bento-otp-inputs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.bento-otp-input {
+  width: 40px;
+  height: 44px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-fg);
+  background: var(--bt-surface);
+  text-align: center;
+  font-size: 18px;
+  font-weight: 760;
+  outline: 0;
+}
+
+.bento-otp-input:focus-visible {
+  border-color: var(--bt-info);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bt-primary), transparent 82%);
+}

package/src/components/ui/OtpField.tsx

@@ -0,0 +1,24 @@
+import { OTPFieldPreview as BaseOtpField } from '@base-ui/react/otp-field'
+import { type ComponentPropsWithoutRef } from 'react'
+import clsx from 'clsx'
+import './OtpField.css'
+
+export type OtpFieldProps = ComponentPropsWithoutRef<typeof BaseOtpField.Root> & {
+  length?: number
+  label?: string
+}
+
+export function OtpField({ length = 6, label, className, ...rest }: OtpFieldProps) {
+  return (
+    <BaseOtpField.Root className={clsx('bento-otp-field', className)} length={length} {...rest}>
+      {label && <label className="field-label">{label}</label>}
+      <div className="bento-otp-inputs">
+        {Array.from({ length }, (_, index) => (
+          <BaseOtpField.Input key={index} className="bento-otp-input" />
+        ))}
+      </div>
+    </BaseOtpField.Root>
+  )
+}
+
+export { BaseOtpField }

package/src/components/ui/Popover.css

@@ -0,0 +1,25 @@
+.bento-popover-popup {
+  width: 250px;
+  padding: 16px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+}
+
+.bento-popover-arrow {
+  fill: var(--bt-select-popup-bg, var(--bt-surface));
+}
+
+.bento-popover-title {
+  color: var(--bt-fg);
+  font-size: 20px;
+  font-weight: 780;
+  margin: 0;
+}
+
+.bento-popover-description {
+  margin: 10px 0 0;
+  color: var(--bt-muted-fg);
+  line-height: 1.6;
+}

package/src/components/ui/Popover.tsx

@@ -0,0 +1,37 @@
+import { Popover as BasePopover } from '@base-ui/react/popover'
+import { type ReactElement, type ReactNode } from 'react'
+import clsx from 'clsx'
+import './Popover.css'
+
+type PopoverProps = {
+  trigger: ReactElement
+  title?: string
+  description?: string
+  children?: ReactNode
+  className?: string
+}
+
+export function Popover({ trigger, title, description, children, className }: PopoverProps) {
+  return (
+    <BasePopover.Root>
+      <BasePopover.Trigger render={trigger} />
+      <BasePopover.Portal>
+        <BasePopover.Positioner sideOffset={10}>
+          <BasePopover.Popup className={clsx('bento-popover-popup', className)}>
+            <BasePopover.Arrow className="bento-popover-arrow" />
+            {title && <BasePopover.Title className="bento-popover-title">{title}</BasePopover.Title>}
+            {description && (
+              <BasePopover.Description className="bento-popover-description">
+                {description}
+              </BasePopover.Description>
+            )}
+            {children}
+          </BasePopover.Popup>
+        </BasePopover.Positioner>
+      </BasePopover.Portal>
+    </BasePopover.Root>
+  )
+}
+
+export { BasePopover }
+export type { PopoverProps }

package/src/components/ui/PreviewCard.css

@@ -0,0 +1,33 @@
+.bento-preview-card {
+  width: 280px;
+  padding: 16px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+}
+
+.bento-preview-card img {
+  width: 100%;
+  height: 140px;
+  object-fit: cover;
+  border-radius: var(--bt-radius-sm);
+  margin-bottom: 12px;
+}
+
+.bento-preview-card-title {
+  color: var(--bt-fg);
+  font-size: 16px;
+  font-weight: 760;
+  margin: 0;
+}
+
+.bento-preview-card-description {
+  margin-top: 6px;
+  color: var(--bt-muted-fg);
+  font-size: 14px;
+}
+
+.bento-preview-card-arrow {
+  fill: var(--bt-select-popup-bg, var(--bt-surface));
+}

package/src/components/ui/PreviewCard.tsx

@@ -0,0 +1,43 @@
+import { PreviewCard as BasePreviewCard } from '@base-ui/react/preview-card'
+import { type ReactElement } from 'react'
+import clsx from 'clsx'
+import './PreviewCard.css'
+
+type PreviewCardProps = {
+  trigger: ReactElement
+  title: string
+  description?: string
+  imageUrl?: string
+  imageAlt?: string
+  className?: string
+}
+
+export function PreviewCard({
+  trigger,
+  title,
+  description,
+  imageUrl,
+  imageAlt,
+  className,
+}: PreviewCardProps) {
+  return (
+    <BasePreviewCard.Root>
+      <BasePreviewCard.Trigger render={trigger} />
+      <BasePreviewCard.Portal>
+        <BasePreviewCard.Positioner sideOffset={10}>
+          <BasePreviewCard.Popup className={clsx('bento-preview-card', className)}>
+            <BasePreviewCard.Arrow className="bento-preview-card-arrow" />
+            {imageUrl && <img src={imageUrl} alt={imageAlt ?? ''} />}
+            <h3 className="bento-preview-card-title">{title}</h3>
+            {description && (
+              <p className="bento-preview-card-description">{description}</p>
+            )}
+          </BasePreviewCard.Popup>
+        </BasePreviewCard.Positioner>
+      </BasePreviewCard.Portal>
+    </BasePreviewCard.Root>
+  )
+}
+
+export { BasePreviewCard }
+export type { PreviewCardProps }