base-themes 0.1.2 → 0.1.3

package/src/components/ui/Combobox.css

@@ -0,0 +1,75 @@
+.bento-combobox {
+  width: min(100%, 330px);
+}
+
+.bento-combobox-input {
+  display: flex;
+  width: 100%;
+  min-height: 44px;
+  align-items: center;
+  padding: 0 12px;
+  border: 1px solid var(--bt-border-strong);
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-fg);
+  background: var(--bt-surface);
+  font-size: 14px;
+  outline: none;
+  transition: border-color 140ms ease;
+}
+
+.bento-combobox-input:focus {
+  border-color: var(--bt-secondary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bt-secondary), transparent 84%);
+}
+
+[dir='rtl'] .bento-combobox-input,
+.bento-combobox-input:dir(rtl) {
+  text-align: right;
+}
+
+.bento-combobox-popup {
+  min-width: 220px;
+  padding: 6px;
+  border: 1px solid var(--bt-border-strong);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+}
+
+.bento-combobox-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 36px;
+  padding: 0 10px;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-fg);
+  cursor: pointer;
+  font-size: 14px;
+}
+
+[dir='rtl'] .bento-combobox-popup,
+.bento-combobox-popup:dir(rtl) {
+  text-align: right;
+}
+
+[dir='rtl'] .bento-combobox-item,
+.bento-combobox-item:dir(rtl) {
+  flex-direction: row-reverse;
+}
+
+.bento-combobox-item[data-highlighted] {
+  background: var(--bt-surface-muted);
+}
+
+.bento-combobox-no-results {
+  padding: 12px;
+  color: var(--bt-muted-fg);
+  text-align: center;
+  font-size: 14px;
+}
+
+[data-theme='dark'] .bento-combobox-popup {
+  background: var(--bt-select-popup-bg, var(--bt-surface));
+  box-shadow: var(--bt-shadow);
+}

package/src/components/ui/Combobox.tsx

@@ -0,0 +1,53 @@
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox'
+import { useState } from 'react'
+import clsx from 'clsx'
+import './Combobox.css'
+
+type ComboboxOption = { value: string; label: string }
+
+type ComboboxProps = {
+  options: ComboboxOption[]
+  placeholder?: string
+  label?: string
+  className?: string
+}
+
+export function Combobox({ options, placeholder = 'Search...', label, className }: ComboboxProps) {
+  const [query, setQuery] = useState('')
+
+  const filtered = options.filter((opt) =>
+    opt.label.toLowerCase().includes(query.toLowerCase()),
+  )
+
+  return (
+    <div className={clsx('bento-combobox', className)}>
+      {label && <label className="field-label">{label}</label>}
+      <BaseCombobox.Root
+        inputValue={query}
+        onInputValueChange={setQuery}
+      >
+        <BaseCombobox.Input
+          className="bento-combobox-input"
+          placeholder={placeholder}
+        />
+        <BaseCombobox.Portal>
+          <BaseCombobox.Positioner sideOffset={8}>
+            <BaseCombobox.Popup className="bento-combobox-popup">
+              {filtered.length === 0 ? (
+                <div className="bento-combobox-no-results">No results</div>
+              ) : (
+                filtered.map((opt) => (
+                  <BaseCombobox.Item className="bento-combobox-item" key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </BaseCombobox.Item>
+                ))
+              )}
+            </BaseCombobox.Popup>
+          </BaseCombobox.Positioner>
+        </BaseCombobox.Portal>
+      </BaseCombobox.Root>
+    </div>
+  )
+}
+
+export type { ComboboxProps, ComboboxOption }

package/src/components/ui/ContextMenu.css

@@ -0,0 +1,9 @@
+.bento-context-menu-trigger {
+  min-width: 240px;
+  padding: 22px;
+  border: 1px dashed var(--bt-border-strong);
+  border-radius: var(--bt-radius);
+  color: var(--bt-muted-fg);
+  background: var(--bt-surface);
+  text-align: center;
+}

package/src/components/ui/ContextMenu.tsx

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

package/src/components/ui/CspProvider.tsx

@@ -0,0 +1,10 @@
+import { CSPProvider as BaseCSPProvider } from '@base-ui/react/csp-provider'
+import { type ComponentProps } from 'react'
+
+export type CspProviderProps = ComponentProps<typeof BaseCSPProvider>
+
+export function CspProvider(props: CspProviderProps) {
+  return <BaseCSPProvider {...props} />
+}
+
+export { BaseCSPProvider }

package/src/components/ui/Dialog.css

@@ -0,0 +1,41 @@
+.bento-dialog-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: var(--backdrop);
+  backdrop-filter: blur(6px);
+}
+
+.bento-dialog-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 51;
+  width: min(420px, calc(100vw - 32px));
+  padding: 22px;
+  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-dialog-topline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.bento-dialog-title {
+  color: var(--bt-fg);
+  font-size: 20px;
+  font-weight: var(--bt-font-weight, 780);
+  margin: 0;
+}
+
+.bento-dialog-description {
+  margin: 14px 0 18px;
+  color: var(--bt-muted-fg);
+  line-height: 1.6;
+}

package/src/components/ui/Dialog.tsx

@@ -0,0 +1,45 @@
+import { Dialog as BaseDialog } from '@base-ui/react/dialog'
+import { type ReactElement, type ReactNode } from 'react'
+import clsx from 'clsx'
+import { X } from 'lucide-react'
+import './Dialog.css'
+
+type DialogProps = {
+  trigger: ReactElement
+  title: string
+  description?: string
+  children?: ReactNode
+  className?: string
+}
+
+export function Dialog({ trigger, title, description, children, className }: DialogProps) {
+  return (
+    <BaseDialog.Root>
+      <BaseDialog.Trigger render={trigger} />
+      <BaseDialog.Portal>
+        <BaseDialog.Backdrop className="bento-dialog-backdrop" />
+        <BaseDialog.Popup className={clsx('bento-dialog-popup', className)}>
+          <div className="bento-dialog-topline">
+            <BaseDialog.Title className="bento-dialog-title">{title}</BaseDialog.Title>
+            <BaseDialog.Close
+              className="bento-button icon"
+              aria-label="Close dialog"
+              render={<button type="button" />}
+            >
+              <X size={18} />
+            </BaseDialog.Close>
+          </div>
+          {description && (
+            <BaseDialog.Description className="bento-dialog-description">
+              {description}
+            </BaseDialog.Description>
+          )}
+          {children}
+        </BaseDialog.Popup>
+      </BaseDialog.Portal>
+    </BaseDialog.Root>
+  )
+}
+
+export { BaseDialog }
+export type { DialogProps }

package/src/components/ui/DirectionProvider.tsx

@@ -0,0 +1,17 @@
+import { DirectionProvider as BaseDirectionProvider, type TextDirection } from '@base-ui/react/direction-provider'
+import { type ComponentProps } from 'react'
+
+export type DirectionProviderProps = ComponentProps<typeof BaseDirectionProvider>
+
+export function DirectionProvider({ children, direction = 'ltr' }: DirectionProviderProps) {
+  return (
+    <BaseDirectionProvider direction={direction}>
+      <span dir={direction} style={{ display: 'contents' }}>
+        {children}
+      </span>
+    </BaseDirectionProvider>
+  )
+}
+
+export { BaseDirectionProvider }
+export type { TextDirection }

package/src/components/ui/Drawer.css

@@ -0,0 +1,77 @@
+.bento-drawer-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background: var(--backdrop);
+  backdrop-filter: blur(6px);
+}
+
+.bento-drawer-popup {
+  position: fixed;
+  z-index: 51;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border: 1px solid var(--bt-border);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+}
+
+.bento-drawer-popup[data-side='left'] {
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: min(360px, 90vw);
+  border-left: 0;
+}
+
+.bento-drawer-popup[data-side='right'] {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(360px, 90vw);
+  border-right: 0;
+}
+
+.bento-drawer-popup[data-side='top'] {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: min(300px, 50vh);
+  border-top: 0;
+}
+
+.bento-drawer-popup[data-side='bottom'] {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: min(300px, 50vh);
+  border-bottom: 0;
+}
+
+.bento-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--bt-border);
+}
+
+.bento-drawer-title {
+  color: var(--bt-fg);
+  font-size: 18px;
+  font-weight: 780;
+  margin: 0;
+}
+
+.bento-drawer-description {
+  padding: 14px 20px;
+  color: var(--bt-muted-fg);
+  line-height: 1.6;
+}
+
+.bento-drawer-body {
+  flex: 1;
+  padding: 0 20px 20px;
+  overflow: auto;
+}

package/src/components/ui/Drawer.tsx

@@ -0,0 +1,56 @@
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer'
+import { type ReactElement, type ReactNode } from 'react'
+import clsx from 'clsx'
+import { X } from 'lucide-react'
+import './Drawer.css'
+
+type DrawerProps = {
+  trigger: ReactElement
+  title: string
+  description?: string
+  children?: ReactNode
+  side?: 'left' | 'right' | 'top' | 'bottom'
+  className?: string
+}
+
+export function Drawer({
+  trigger,
+  title,
+  description,
+  children,
+  side = 'right',
+  className,
+}: DrawerProps) {
+  return (
+    <BaseDrawer.Root>
+      <BaseDrawer.Trigger render={trigger} />
+      <BaseDrawer.Portal>
+        <BaseDrawer.Backdrop className="bento-drawer-backdrop" />
+        <BaseDrawer.Popup
+          className={clsx('bento-drawer-popup', className)}
+          {...({ 'data-side': side } as Record<string, unknown>)}
+        >
+          <div className="bento-drawer-header">
+            <BaseDrawer.Title className="bento-drawer-title">{title}</BaseDrawer.Title>
+            <BaseDrawer.Close
+              className="bento-button icon"
+              aria-label="Close drawer"
+              render={<button type="button" />}
+            >
+              <X size={18} />
+            </BaseDrawer.Close>
+          </div>
+          {description && (
+            <BaseDrawer.Description className="bento-drawer-description">
+              {description}
+            </BaseDrawer.Description>
+          )}
+          <div className="bento-drawer-body">{children}</div>
+        </BaseDrawer.Popup>
+      </BaseDrawer.Portal>
+    </BaseDrawer.Root>
+  )
+}
+
+export { BaseDrawer }
+export type { DrawerProps }

package/src/components/ui/Field.css

@@ -0,0 +1,19 @@
+.bento-field {
+  display: grid;
+  gap: 8px;
+  width: min(100%, 360px);
+}
+
+.bento-field-description,
+.bento-field-error {
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.bento-field-description {
+  color: var(--bt-muted-fg);
+}
+
+.bento-field-error {
+  color: var(--bt-primary-hover);
+}

package/src/components/ui/Field.tsx

@@ -0,0 +1,24 @@
+import { Field as BaseField } from '@base-ui/react/field'
+import { type ComponentPropsWithoutRef, type ReactElement } from 'react'
+import clsx from 'clsx'
+import './Field.css'
+
+export type FieldProps = ComponentPropsWithoutRef<typeof BaseField.Root> & {
+  label: string
+  description?: string
+  error?: string
+  children: ReactElement
+}
+
+export function Field({ label, description, error, children, className, ...rest }: FieldProps) {
+  return (
+    <BaseField.Root className={clsx('bento-field', className)} invalid={Boolean(error)} {...rest}>
+      <BaseField.Label className="field-label">{label}</BaseField.Label>
+      <BaseField.Control render={children} />
+      {description && <BaseField.Description className="bento-field-description">{description}</BaseField.Description>}
+      {error && <BaseField.Error className="bento-field-error">{error}</BaseField.Error>}
+    </BaseField.Root>
+  )
+}
+
+export { BaseField }

package/src/components/ui/Fieldset.css

@@ -0,0 +1,16 @@
+.bento-fieldset {
+  display: grid;
+  gap: 14px;
+  min-width: 0;
+  padding: 16px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--bt-surface);
+}
+
+.bento-fieldset-legend {
+  padding: 0 4px;
+  color: var(--bt-fg);
+  font-size: 14px;
+  font-weight: 760;
+}

package/src/components/ui/Fieldset.tsx

@@ -0,0 +1,19 @@
+import { Fieldset as BaseFieldset } from '@base-ui/react/fieldset'
+import { type ComponentPropsWithoutRef } from 'react'
+import clsx from 'clsx'
+import './Fieldset.css'
+
+export type FieldsetProps = ComponentPropsWithoutRef<typeof BaseFieldset.Root> & {
+  legend: string
+}
+
+export function Fieldset({ legend, children, className, ...rest }: FieldsetProps) {
+  return (
+    <BaseFieldset.Root className={clsx('bento-fieldset', className)} {...rest}>
+      <BaseFieldset.Legend className="bento-fieldset-legend">{legend}</BaseFieldset.Legend>
+      {children}
+    </BaseFieldset.Root>
+  )
+}
+
+export { BaseFieldset }

package/src/components/ui/Form.css

@@ -0,0 +1,5 @@
+.bento-form {
+  display: grid;
+  gap: 16px;
+  width: min(100%, 420px);
+}

package/src/components/ui/Form.tsx

@@ -0,0 +1,12 @@
+import { Form as BaseForm } from '@base-ui/react/form'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './Form.css'
+
+export type FormProps = ComponentPropsWithoutRef<typeof BaseForm>
+
+export const Form = forwardRef<HTMLFormElement, FormProps>(({ className, ...rest }, ref) => (
+  <BaseForm ref={ref} className={clsx('bento-form', className)} {...rest} />
+))
+
+Form.displayName = 'Form'

package/src/components/ui/Input.css

@@ -0,0 +1,50 @@
+.bento-input,
+.bento-textarea {
+  width: 100%;
+  min-height: 42px;
+  padding: 0 12px;
+  border: 1px solid var(--bt-border-strong);
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-fg);
+  background: var(--bt-surface);
+  font-size: 14px;
+  transition: border-color var(--bt-duration, 140ms) ease, box-shadow var(--bt-duration, 140ms) ease;
+}
+
+.bento-input:focus,
+.bento-textarea:focus {
+  border-color: var(--bt-secondary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bt-primary), transparent 82%);
+  outline: none;
+}
+
+.bento-textarea {
+  min-height: 80px;
+  padding: 10px 12px;
+  resize: vertical;
+}
+
+.bento-field {
+  display: grid;
+  gap: 8px;
+}
+
+.bento-field-label {
+  color: var(--bt-muted-fg);
+  font-size: 13px;
+  font-weight: 760;
+  text-transform: uppercase;
+}
+
+.bento-field-error {
+  color: var(--bt-danger);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.field-label {
+  color: var(--bt-muted-fg);
+  font-size: 13px;
+  font-weight: 760;
+  text-transform: uppercase;
+}

package/src/components/ui/Input.tsx

@@ -0,0 +1,62 @@
+import { Input as BaseInput } from '@base-ui/react/input'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './Input.css'
+
+export type InputProps = ComponentPropsWithoutRef<typeof BaseInput> & {
+  label?: string
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, className, id, ...rest }, ref) => {
+    const inner = (
+      <BaseInput
+        ref={ref}
+        id={id}
+        className={clsx('bento-input', className)}
+        {...rest}
+      />
+    )
+
+    if (!label) return inner
+
+    return (
+      <div className="bento-field">
+        <label className="bento-field-label" htmlFor={id}>{label}</label>
+        {inner}
+      </div>
+    )
+  },
+)
+
+Input.displayName = 'Input'
+
+export type TextareaProps = ComponentPropsWithoutRef<'textarea'> & {
+  label?: string
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ label, className, id, ...rest }, ref) => {
+    const inner = (
+      <textarea
+        ref={ref}
+        id={id}
+        className={clsx('bento-textarea', className)}
+        {...rest}
+      />
+    )
+
+    if (!label) return inner
+
+    return (
+      <div className="bento-field">
+        <label className="bento-field-label" htmlFor={id}>{label}</label>
+        {inner}
+      </div>
+    )
+  },
+)
+
+Textarea.displayName = 'Textarea'
+
+export { BaseInput }