base-themes 0.1.2 → 0.1.3

package/src/components/ui/Progress.css

@@ -0,0 +1,33 @@
+.bento-progress {
+  width: 100%;
+}
+
+.bento-progress-track {
+  position: relative;
+  width: 100%;
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--track-bg);
+}
+
+.bento-progress-indicator {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, var(--bt-secondary), var(--bt-primary));
+  transition: width 300ms ease;
+}
+
+.bento-progress-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-progress-value {
+  color: var(--bt-fg);
+}

package/src/components/ui/Progress.tsx

@@ -0,0 +1,28 @@
+import { Progress as BaseProgress } from '@base-ui/react/progress'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './Progress.css'
+
+export type ProgressProps = ComponentPropsWithoutRef<typeof BaseProgress.Root> & {
+  showValue?: boolean
+}
+
+export const Progress = forwardRef<HTMLDivElement, ProgressProps>(
+  ({ value, showValue, className, ...rest }, ref) => (
+    <div className={clsx('bento-progress', className)}>
+      {showValue && (
+        <div className="bento-progress-label">
+          <span>{rest['aria-label'] ?? 'Progress'}</span>
+          <span className="bento-progress-value">{value ?? 0}%</span>
+        </div>
+      )}
+      <BaseProgress.Root ref={ref} value={value} {...rest}>
+        <BaseProgress.Track className="bento-progress-track">
+          <BaseProgress.Indicator className="bento-progress-indicator" />
+        </BaseProgress.Track>
+      </BaseProgress.Root>
+    </div>
+  ),
+)
+
+Progress.displayName = 'Progress'

package/src/components/ui/Radio.tsx

@@ -0,0 +1,22 @@
+import { Radio as BaseRadio } from '@base-ui/react/radio'
+import { type ComponentPropsWithoutRef } from 'react'
+import clsx from 'clsx'
+import './RadioGroup.css'
+
+export type RadioProps = ComponentPropsWithoutRef<typeof BaseRadio.Root> & {
+  label?: string
+}
+
+export function Radio({ label, className, ...rest }: RadioProps) {
+  const radio = (
+    <BaseRadio.Root className={clsx('bento-radio', className)} {...rest}>
+      <BaseRadio.Indicator className="bento-radio-indicator" />
+    </BaseRadio.Root>
+  )
+
+  if (!label) return radio
+
+  return <label className="bento-radio-label">{radio}{label}</label>
+}
+
+export { BaseRadio }

package/src/components/ui/RadioGroup.css

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

package/src/components/ui/RadioGroup.tsx

@@ -0,0 +1,29 @@
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group'
+import { Radio } from '@base-ui/react/radio'
+import { type ComponentPropsWithoutRef } from 'react'
+import clsx from 'clsx'
+import './RadioGroup.css'
+
+type RadioOption = { value: string; label: string }
+
+type RadioGroupProps = Omit<ComponentPropsWithoutRef<typeof BaseRadioGroup>, 'defaultValue'> & {
+  options: RadioOption[]
+  defaultValue?: string
+}
+
+export function RadioGroup({ options, defaultValue, className, ...rest }: RadioGroupProps) {
+  return (
+    <BaseRadioGroup defaultValue={defaultValue} className={clsx('bento-radio-group', className)} {...rest}>
+      {options.map((opt) => (
+        <label className="bento-radio-label" key={opt.value}>
+          <Radio.Root className="bento-radio" value={opt.value}>
+            <Radio.Indicator className="bento-radio-indicator" />
+          </Radio.Root>
+          {opt.label}
+        </label>
+      ))}
+    </BaseRadioGroup>
+  )
+}
+
+export type { RadioGroupProps, RadioOption }

package/src/components/ui/ScrollArea.css

@@ -0,0 +1,42 @@
+.bento-scroll-area {
+  overflow: hidden;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+}
+
+.bento-scroll-area-viewport {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+.bento-scroll-area-viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.bento-scroll-area-scrollbar {
+  display: flex;
+  padding: 2px;
+  background: transparent;
+  touch-action: none;
+}
+
+.bento-scroll-area-scrollbar[data-vertical] {
+  width: 10px;
+}
+
+.bento-scroll-area-thumb {
+  flex: 1;
+  border-radius: 999px;
+  background: var(--bt-border-strong);
+  transition: background 140ms ease;
+}
+
+.bento-scroll-area-thumb:hover {
+  background: var(--scrollbar-thumb-hover);
+}
+
+.bento-scroll-area-corner {
+  background: transparent;
+}

package/src/components/ui/ScrollArea.tsx

@@ -0,0 +1,22 @@
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './ScrollArea.css'
+
+export type ScrollAreaProps = ComponentPropsWithoutRef<typeof BaseScrollArea.Root>
+
+export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
+  ({ className, children, ...rest }, ref) => (
+    <BaseScrollArea.Root ref={ref} className={clsx('bento-scroll-area', className)} {...rest}>
+      <BaseScrollArea.Viewport className="bento-scroll-area-viewport">
+        {children}
+      </BaseScrollArea.Viewport>
+      <BaseScrollArea.Scrollbar className="bento-scroll-area-scrollbar">
+        <BaseScrollArea.Thumb className="bento-scroll-area-thumb" />
+      </BaseScrollArea.Scrollbar>
+      <BaseScrollArea.Corner className="bento-scroll-area-corner" />
+    </BaseScrollArea.Root>
+  ),
+)
+
+ScrollArea.displayName = 'ScrollArea'

package/src/components/ui/Select.css

@@ -0,0 +1,86 @@
+.bento-select-trigger {
+  display: flex;
+  width: min(100%, 330px);
+  min-height: 44px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 12px 0 14px;
+  border: 1px solid var(--bt-border-strong);
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-fg);
+  background: var(--bt-surface);
+  cursor: pointer;
+  font-size: 14px;
+}
+
+[dir='rtl'] .bento-select-trigger,
+.bento-select-trigger:dir(rtl) {
+  flex-direction: row-reverse;
+  padding: 0 14px 0 12px;
+  text-align: right;
+}
+
+.bento-select-trigger:focus-visible {
+  outline: 3px solid var(--bt-ring, rgba(37, 99, 235, 0.32));
+  outline-offset: 2px;
+}
+
+.bento-select-positioner {
+  z-index: 40;
+}
+
+.bento-select-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-select-item {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  align-items: center;
+  min-height: 36px;
+  padding: 0 10px;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-fg);
+  cursor: pointer;
+  font-size: 14px;
+}
+
+[dir='rtl'] .bento-select-item,
+.bento-select-item:dir(rtl) {
+  grid-template-columns: 1fr 22px;
+  text-align: right;
+}
+
+[dir='rtl'] .bento-select-item [data-base-ui-select-item-indicator],
+.bento-select-item:dir(rtl) [data-base-ui-select-item-indicator] {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.bento-select-item[data-highlighted] {
+  background: var(--bt-surface-muted);
+}
+
+.bento-select-item[data-selected] {
+  color: var(--bt-secondary);
+  font-weight: var(--bt-font-weight, 720);
+}
+
+.bento-select-item[data-selected][data-highlighted] {
+  background: color-mix(in srgb, var(--bt-secondary), transparent 86%);
+}
+
+[data-theme='dark'] .bento-select-popup {
+  background: var(--bt-select-popup-bg, var(--bt-surface));
+  box-shadow: var(--bt-shadow);
+}
+
+[data-theme='dark'] .bento-select-item[data-selected][data-highlighted] {
+  background: color-mix(in srgb, var(--bt-secondary), transparent 84%);
+}

package/src/components/ui/Select.tsx

@@ -0,0 +1,39 @@
+import { Select as BaseSelect } from '@base-ui/react/select'
+import { type ComponentPropsWithoutRef } from 'react'
+import clsx from 'clsx'
+import { ChevronDown, Check } from 'lucide-react'
+import './Select.css'
+
+export type SelectProps = Omit<ComponentPropsWithoutRef<typeof BaseSelect.Root>, 'items'> & {
+  items: Record<string, string>
+  label?: string
+  placeholder?: string
+}
+
+export function Select({ items, label, placeholder, defaultValue, ...rest }: SelectProps) {
+  return (
+    <BaseSelect.Root defaultValue={defaultValue} items={items} {...rest}>
+      {label && <label className="field-label" htmlFor={rest.id}>{label}</label>}
+      <BaseSelect.Trigger id={rest.id} className="bento-select-trigger">
+        <BaseSelect.Value placeholder={placeholder} />
+        <BaseSelect.Icon>
+          <ChevronDown size={16} />
+        </BaseSelect.Icon>
+      </BaseSelect.Trigger>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner className="bento-select-positioner" sideOffset={8}>
+          <BaseSelect.Popup className={clsx('bento-select-popup')}>
+            {Object.entries(items).map(([value, label]) => (
+              <BaseSelect.Item className="bento-select-item" key={value} value={value}>
+                <BaseSelect.ItemIndicator>
+                  <Check size={15} />
+                </BaseSelect.ItemIndicator>
+                <BaseSelect.ItemText>{label}</BaseSelect.ItemText>
+              </BaseSelect.Item>
+            ))}
+          </BaseSelect.Popup>
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  )
+}

package/src/components/ui/Separator.css

@@ -0,0 +1,14 @@
+.bento-separator {
+  flex-shrink: 0;
+  background: var(--bt-border);
+}
+
+.bento-separator[data-orientation='horizontal'] {
+  width: 100%;
+  height: 1px;
+}
+
+.bento-separator[data-orientation='vertical'] {
+  width: 1px;
+  height: 28px;
+}

package/src/components/ui/Separator.tsx

@@ -0,0 +1,12 @@
+import { Separator as BaseSeparator } from '@base-ui/react/separator'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './Separator.css'
+
+export type SeparatorProps = ComponentPropsWithoutRef<typeof BaseSeparator>
+
+export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(({ className, ...rest }, ref) => (
+  <BaseSeparator ref={ref} className={clsx('bento-separator', className)} {...rest} />
+))
+
+Separator.displayName = 'Separator'

package/src/components/ui/Slider.css

@@ -0,0 +1,39 @@
+.bento-slider {
+  width: min(100%, 420px);
+  padding: 12px 0;
+}
+
+.bento-slider-control {
+  display: flex;
+  height: 24px;
+  align-items: center;
+}
+
+.bento-slider-track {
+  position: relative;
+  width: 100%;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--track-bg);
+}
+
+.bento-slider-indicator {
+  position: absolute;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--bt-primary);
+}
+
+.bento-slider-thumb {
+  width: 22px;
+  height: 22px;
+  border: 3px solid var(--bt-surface);
+  border-radius: 999px;
+  background: var(--bt-primary-hover);
+  box-shadow: 0 5px 14px color-mix(in srgb, var(--bt-primary), transparent 70%);
+}
+
+.bento-slider-thumb:focus-visible {
+  outline: 3px solid var(--bt-ring, rgba(37, 99, 235, 0.32));
+  outline-offset: 2px;
+}

package/src/components/ui/Slider.tsx

@@ -0,0 +1,21 @@
+import { Slider as BaseSlider } from '@base-ui/react/slider'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './Slider.css'
+
+export type SliderProps = ComponentPropsWithoutRef<typeof BaseSlider.Root>
+
+export const Slider = forwardRef<HTMLDivElement, SliderProps>(
+  ({ className, ...rest }, ref) => (
+    <BaseSlider.Root ref={ref} className={clsx('bento-slider', className)} {...rest}>
+      <BaseSlider.Control className="bento-slider-control">
+        <BaseSlider.Track className="bento-slider-track">
+          <BaseSlider.Indicator className="bento-slider-indicator" />
+          <BaseSlider.Thumb className="bento-slider-thumb" />
+        </BaseSlider.Track>
+      </BaseSlider.Control>
+    </BaseSlider.Root>
+  ),
+)
+
+Slider.displayName = 'Slider'

package/src/components/ui/Switch.css

@@ -0,0 +1,45 @@
+.bento-switch {
+  position: relative;
+  display: inline-flex;
+  width: 44px;
+  height: 26px;
+  align-items: center;
+  padding: 3px;
+  border: 1px solid var(--bt-border-strong);
+  border-radius: 999px;
+  background: var(--track-bg);
+  cursor: pointer;
+  transition: border-color var(--bt-duration, 160ms) ease, background var(--bt-duration, 160ms) ease;
+}
+
+.bento-switch[data-checked] {
+  border-color: var(--bt-surface-strong);
+  background: var(--bt-surface-strong);
+}
+
+.bento-switch:focus-visible {
+  outline: 3px solid var(--bt-ring, rgba(37, 99, 235, 0.32));
+  outline-offset: 2px;
+}
+
+.bento-switch-thumb {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+  transition: transform 180ms ease;
+}
+
+.bento-switch[data-checked] .bento-switch-thumb {
+  transform: translateX(18px);
+}
+
+.bento-switch-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  color: var(--bt-fg);
+  font-weight: 680;
+  cursor: pointer;
+}

package/src/components/ui/Switch.tsx

@@ -0,0 +1,29 @@
+import { Switch as BaseSwitch } from '@base-ui/react/switch'
+import { type ComponentPropsWithoutRef, forwardRef } from 'react'
+import clsx from 'clsx'
+import './Switch.css'
+
+export type SwitchProps = ComponentPropsWithoutRef<typeof BaseSwitch.Root> & {
+  label?: string
+}
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ label, className, id, ...rest }, ref) => {
+    const inner = (
+      <BaseSwitch.Root ref={ref} id={id} className={clsx('bento-switch', className)} {...rest}>
+        <BaseSwitch.Thumb className="bento-switch-thumb" />
+      </BaseSwitch.Root>
+    )
+
+    if (!label) return inner
+
+    return (
+      <label className="bento-switch-label" htmlFor={id}>
+        {inner}
+        {label}
+      </label>
+    )
+  },
+)
+
+Switch.displayName = 'Switch'

package/src/components/ui/Tabs.css

@@ -0,0 +1,72 @@
+.bento-tabs {
+  display: flex;
+  min-height: 100%;
+  flex-direction: column;
+  gap: 18px;
+}
+
+.bento-tabs-list {
+  position: relative;
+  display: grid;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--group-bg);
+}
+
+.bento-tabs-list.cols-2 {
+  grid-template-columns: 1fr 1fr;
+}
+
+.bento-tabs-list.cols-3 {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+.bento-tabs-tab {
+  z-index: 1;
+  min-height: 36px;
+  border: 0;
+  border-radius: var(--bt-radius-sm);
+  color: var(--bt-muted-fg);
+  background: transparent;
+  cursor: pointer;
+  font-weight: var(--bt-font-weight, 760);
+}
+
+.bento-tabs-tab[data-selected],
+.bento-tabs-tab[data-active],
+.bento-tabs-tab[aria-selected='true'] {
+  color: var(--bt-fg);
+}
+
+.bento-tabs-indicator {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  border-radius: var(--bt-radius-sm);
+  background: var(--bt-surface);
+  box-shadow: var(--bt-shadow);
+  transition: left 180ms ease, width 180ms ease;
+}
+
+.bento-tabs-panel {
+  flex: 1;
+  padding: 18px;
+  border: 1px solid var(--bt-border);
+  border-radius: var(--bt-radius);
+  background: var(--group-bg);
+}
+
+.bento-tabs-panel-title {
+  display: block;
+  color: var(--bt-fg);
+  font-size: 20px;
+  font-weight: 750;
+  margin-bottom: 10px;
+}
+
+.bento-tabs-panel p {
+  color: var(--bt-muted-fg);
+  margin: 0;
+}

package/src/components/ui/Tabs.tsx

@@ -0,0 +1,44 @@
+import { Tabs as BaseTabs } from '@base-ui/react/tabs'
+import { type ComponentPropsWithoutRef } from 'react'
+import clsx from 'clsx'
+import './Tabs.css'
+
+type TabPanel = {
+  value: string
+  label: string
+  title?: string
+  content: string
+}
+
+type TabsProps = Omit<ComponentPropsWithoutRef<typeof BaseTabs.Root>, 'defaultValue'> & {
+  panels: TabPanel[]
+  defaultValue?: string
+}
+
+export function Tabs({ panels, defaultValue, className, ...rest }: TabsProps) {
+  return (
+    <BaseTabs.Root
+      defaultValue={defaultValue ?? panels[0]?.value}
+      className={clsx('bento-tabs', className)}
+      {...rest}
+    >
+      <BaseTabs.List className={clsx('bento-tabs-list', `cols-${panels.length}`)}>
+        {panels.map((panel) => (
+          <BaseTabs.Tab className="bento-tabs-tab" key={panel.value} value={panel.value}>
+            {panel.label}
+          </BaseTabs.Tab>
+        ))}
+        <BaseTabs.Indicator className="bento-tabs-indicator" />
+      </BaseTabs.List>
+      {panels.map((panel) => (
+        <BaseTabs.Panel className="bento-tabs-panel" key={panel.value} value={panel.value}>
+          {panel.title && <strong className="bento-tabs-panel-title">{panel.title}</strong>}
+          <p>{panel.content}</p>
+        </BaseTabs.Panel>
+      ))}
+    </BaseTabs.Root>
+  )
+}
+
+export { BaseTabs }
+export type { TabsProps, TabPanel }