@alfakit/react 0.0.0-stage → 0.1.1

package/src/components/fields/toggle-buttons.tsx

@@ -0,0 +1,125 @@
+import type { ToggleButtonsSchema } from '@alfakit/core'
+import {
+  fieldIds,
+  gridColumnsClasses,
+  isOptionGroup,
+  toggleButtonsNext,
+  toggleButtonsSelected,
+} from '@alfakit/core'
+import { solidButtonColorClasses } from '../../lib/colors'
+import { Icon } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { useField } from '../form/form-context'
+import { FieldWrapper } from '../schema/field-wrapper'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip'
+
+/**
+ * Buttons acting as a radio group (or, when `multiple`, a set of toggles). Each button
+ * reports its state with `aria-pressed`; the selected one takes the option's colour.
+ */
+/** `gridDirection('column')`: buttons flow down each column. Spelled out for Tailwind. */
+const COLUMN_FLOW_CLASSES: Record<number, string> = {
+  2: 'md:columns-2',
+  3: 'md:columns-3',
+  4: 'md:columns-4',
+  5: 'md:columns-5',
+  6: 'md:columns-6',
+}
+
+/** `size()`: height, padding and text of the buttons (medium is the default). */
+const SIZE_CLASSES: Record<string, string> = {
+  xs: 'h-7 px-2 text-xs',
+  sm: 'h-8 px-2.5 text-sm',
+  md: 'h-9 px-3 text-sm',
+  lg: 'h-10 px-4 text-base',
+  xl: 'h-11 px-5 text-base',
+}
+
+export function ToggleButtonsField({ component }: { component: ToggleButtonsSchema }) {
+  const { value, setValue, error, id, disabled, readOnly, aria } = useField<unknown>(component)
+  const multiple = Boolean(component.multiple)
+  const selected = toggleButtonsSelected(value, multiple)
+  const locked = disabled || readOnly
+  const options = component.options.flatMap((option) =>
+    isOptionGroup(option) ? option.options : [option],
+  )
+  // `columns()`: a grid of full-width buttons (inline and grouped layouts stay a row).
+  const grid = !component.inline && !component.grouped && (component.gridColumns ?? 0) > 1
+  const columnFlow = grid && component.gridDirection === 'column'
+  const fullWidth = Boolean(component.fullWidth)
+  // Any other `size()` string is a CSS class for the buttons.
+  const sizeClasses = SIZE_CLASSES[component.size ?? 'md'] ?? cn(SIZE_CLASSES.md, component.size)
+
+  return (
+    <FieldWrapper field={component} htmlFor={id} error={error}>
+      <TooltipProvider>
+        <div
+          id={id}
+          role="group"
+          data-slot="toggle-buttons"
+          aria-labelledby={component.label ? fieldIds(id).label : undefined}
+          aria-describedby={aria['aria-describedby']}
+          data-grid-direction={grid ? (component.gridDirection ?? 'row') : undefined}
+          className={cn(
+            grid
+              ? columnFlow
+                ? cn('gap-x-2 *:mb-2 *:w-full', COLUMN_FLOW_CLASSES[component.gridColumns ?? 1])
+                : cn(
+                    'grid gap-2',
+                    gridColumnsClasses({ default: 1, md: component.gridColumns ?? 1 }),
+                  )
+              : 'flex gap-2',
+            !grid &&
+              (component.inline
+                ? 'flex-row flex-wrap'
+                : cn('flex-col', fullWidth ? 'items-stretch' : 'items-start')),
+            component.grouped && cn('gap-0 rounded-md shadow-xs', fullWidth ? 'w-full' : 'w-fit'),
+            fullWidth && 'w-full',
+          )}
+        >
+          {options.map((option) => {
+            const pressed = selected.includes(option.value)
+            const color = option.color ?? 'primary'
+            const tooltip = component.tooltips?.[option.value]
+
+            const button = (
+              <button
+                key={option.value}
+                type="button"
+                aria-pressed={pressed}
+                aria-label={component.iconsOnly ? option.label : undefined}
+                title={component.iconsOnly ? option.label : undefined}
+                disabled={locked || option.disabled}
+                onClick={() => setValue(toggleButtonsNext(value, option.value, multiple))}
+                data-state={pressed ? 'on' : 'off'}
+                className={cn(
+                  'focus-visible:border-ring focus-visible:ring-ring/50 inline-flex items-center justify-center gap-1.5 rounded-md border font-medium whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50',
+                  sizeClasses,
+                  fullWidth && component.inline && 'flex-1',
+                  pressed
+                    ? cn('border-transparent', solidButtonColorClasses[color])
+                    : 'bg-background hover:bg-accent hover:text-accent-foreground',
+                  component.grouped &&
+                    'rounded-none shadow-none not-first:-ms-px first:rounded-s-md last:rounded-e-md focus-visible:z-10',
+                  readOnly && 'disabled:opacity-100',
+                )}
+              >
+                {option.icon && <Icon name={option.icon} className="size-4" />}
+                {!component.iconsOnly && <span>{option.label}</span>}
+              </button>
+            )
+
+            return tooltip ? (
+              <Tooltip key={option.value}>
+                <TooltipTrigger asChild>{button}</TooltipTrigger>
+                <TooltipContent>{tooltip}</TooltipContent>
+              </Tooltip>
+            ) : (
+              button
+            )
+          })}
+        </div>
+      </TooltipProvider>
+    </FieldWrapper>
+  )
+}

package/src/components/fields/toggle.tsx

@@ -0,0 +1,50 @@
+import type { ToggleSchema } from '@alfakit/core'
+import {
+  colorClass,
+  switchOffColorClasses,
+  switchOnColorClasses,
+  textColorClasses,
+} from '../../lib/colors'
+import { Icon } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { useField } from '../form/form-context'
+import { FieldWrapper } from '../schema/field-wrapper'
+import { Switch } from '../ui/switch'
+
+export function ToggleField({ component }: { component: ToggleSchema }) {
+  const { value, setValue, error, id, disabled, readOnly, aria } = useField<boolean | null>(
+    component,
+  )
+  const on = Boolean(value)
+  const icon = on ? component.onIcon : component.offIcon
+
+  return (
+    <FieldWrapper field={component} htmlFor={id} error={error} inline={component.inline}>
+      <div className="flex items-center gap-2">
+        <Switch
+          id={id}
+          name={component.name}
+          checked={on}
+          onCheckedChange={(checked) => setValue(checked)}
+          disabled={disabled || readOnly}
+          aria-readonly={readOnly || undefined}
+          {...aria}
+          className={cn(
+            component.onColor && colorClass(switchOnColorClasses, component.onColor),
+            component.offColor && colorClass(switchOffColorClasses, component.offColor),
+          )}
+        />
+        {icon && (
+          <Icon
+            name={icon}
+            className={colorClass(
+              textColorClasses,
+              on ? component.onColor : component.offColor,
+              'gray',
+            )}
+          />
+        )}
+      </div>
+    </FieldWrapper>
+  )
+}

package/src/components/file-manager/file-manager-lazy.tsx

@@ -0,0 +1,52 @@
+import type { FileManagerSchema } from '@alfakit/core'
+import { useT } from '../../context'
+import { lazyComponent } from '../../lib/lazy'
+import { Card } from '../ui/card'
+import { Skeleton } from '../ui/skeleton'
+import type { FileManagerViewProps } from './file-manager'
+
+/** The server render and the first paint: the file manager's outline. */
+export function FileManagerSkeleton({ grid = true }: { grid?: boolean }) {
+  const t = useT()
+
+  return (
+    <Card className="gap-0 overflow-hidden py-0" aria-busy="true" data-slot="file-manager">
+      <span className="sr-only">{t('file-manager.loading', {}, 'Loading files')}</span>
+      <div className="flex items-center gap-2 border-b p-3" aria-hidden="true">
+        <Skeleton className="h-6 w-40" />
+        <Skeleton className="ms-auto h-9 w-52" />
+        <Skeleton className="h-9 w-24" />
+      </div>
+      <div className="flex min-h-[28rem]" aria-hidden="true">
+        <div className="hidden w-60 flex-col gap-2 border-e p-3 md:flex">
+          {Array.from({ length: 5 }, (_, index) => (
+            <Skeleton key={index} className="h-6" />
+          ))}
+        </div>
+        <div
+          className={
+            grid
+              ? 'grid flex-1 grid-cols-2 content-start gap-3 p-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6'
+              : 'flex flex-1 flex-col gap-2 p-3'
+          }
+        >
+          {Array.from({ length: 12 }, (_, index) => (
+            <Skeleton key={index} className={grid ? 'aspect-[4/3]' : 'h-10'} />
+          ))}
+        </div>
+      </div>
+    </Card>
+  )
+}
+
+/** The file manager; its code loads the first time it is shown. */
+export const FileManager = lazyComponent<{ component?: FileManagerSchema }>(
+  () => import('./file-manager').then((module) => module.FileManager),
+  ({ component }) => <FileManagerSkeleton grid={component?.view !== 'list'} />,
+)
+
+/** The picker's browser (the same view in picker mode). */
+export const FileManagerBrowser = lazyComponent<FileManagerViewProps>(
+  () => import('./file-manager').then((module) => module.FileManagerView),
+  () => <FileManagerSkeleton />,
+)