@astroapps/aria-base 1.4.0 → 1.5.0

package/src/ListBox.tsx

@@ -0,0 +1,130 @@
+import React from "react";
+import {
+  ListBox as AriaListBox,
+  ListBoxItem as AriaListBoxItem,
+  ListBoxProps as AriaListBoxProps,
+  Collection,
+  Header,
+  ListBoxItemProps,
+  ListBoxSection,
+  SectionProps,
+  composeRenderProps,
+} from "react-aria-components";
+import { tv } from "tailwind-variants";
+import { composeTailwindRenderProps, focusRing } from "./utils";
+
+interface ListBoxProps<T>
+  extends Omit<AriaListBoxProps<T>, "layout" | "orientation"> {}
+
+export function ListBox<T extends object>({
+  children,
+  ...props
+}: ListBoxProps<T>) {
+  return (
+    <AriaListBox
+      {...props}
+      className={composeTailwindRenderProps(
+        props.className,
+        "outline-0 p-1 w-[200px] bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-lg font-sans",
+      )}
+    >
+      {children}
+    </AriaListBox>
+  );
+}
+
+export const itemStyles = tv({
+  extend: focusRing,
+  base: "group relative flex items-center gap-8 cursor-default select-none py-1.5 px-2.5 rounded-md will-change-transform text-sm forced-color-adjust-none",
+  variants: {
+    isSelected: {
+      false:
+        "text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-800 dark:pressed:bg-neutral-800 -outline-offset-2",
+      true: "bg-secondary-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] [&:has(+[data-selected])]:rounded-b-none [&+[data-selected]]:rounded-t-none -outline-offset-4 outline-white dark:outline-white forced-colors:outline-[HighlightText]",
+    },
+    isDisabled: {
+      true: "text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]",
+    },
+  },
+});
+
+export function ListBoxItem(props: ListBoxItemProps) {
+  let textValue =
+    props.textValue ||
+    (typeof props.children === "string" ? props.children : undefined);
+  return (
+    <AriaListBoxItem {...props} textValue={textValue} className={itemStyles}>
+      {composeRenderProps(props.children, (children) => (
+        <>
+          {children}
+          <div className="absolute left-4 right-4 bottom-0 h-px bg-white/20 forced-colors:bg-[HighlightText] hidden [.group[data-selected]:has(+[data-selected])_&]:block" />
+        </>
+      ))}
+    </AriaListBoxItem>
+  );
+}
+
+export const dropdownItemStyles = tv({
+  base: "group flex items-center gap-4 cursor-default select-none py-2 pl-3 pr-3 selected:pr-1 rounded-lg outline outline-0 text-sm forced-color-adjust-none no-underline [&[href]]:cursor-pointer [-webkit-tap-highlight-color:transparent]",
+  variants: {
+    isDisabled: {
+      false: "text-neutral-900 dark:text-neutral-100",
+      true: "text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]",
+    },
+    isPressed: {
+      true: "bg-neutral-100 dark:bg-neutral-800",
+    },
+    isFocused: {
+      true: "bg-secondary-600 dark:bg-secondary-600 text-white forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+    },
+  },
+  compoundVariants: [
+    {
+      isFocused: false,
+      isOpen: true,
+      className: "bg-neutral-100 dark:bg-neutral-700/60",
+    },
+  ],
+});
+
+export function DropdownItem(props: ListBoxItemProps) {
+  let textValue =
+    props.textValue ||
+    (typeof props.children === "string" ? props.children : undefined);
+  return (
+    <AriaListBoxItem
+      {...props}
+      textValue={textValue}
+      className={dropdownItemStyles}
+    >
+      {composeRenderProps(props.children, (children, { isSelected }) => (
+        <>
+          <span className="flex items-center flex-1 gap-2 font-normal truncate group-selected:font-semibold">
+            {children}
+          </span>
+          <span className="flex items-center w-5">
+            {isSelected && <i className="w-4 h-4 fa fa-check" />}
+          </span>
+        </>
+      ))}
+    </AriaListBoxItem>
+  );
+}
+
+export interface DropdownSectionProps<T> extends SectionProps<T> {
+  title?: string;
+  items?: any;
+}
+
+export function DropdownSection<T extends object>(
+  props: DropdownSectionProps<T>,
+) {
+  return (
+    <ListBoxSection className="first:-mt-[5px] after:content-[''] after:block after:h-[5px] last:after:hidden">
+      <Header className="text-sm font-semibold text-neutral-500 dark:text-neutral-300 px-4 py-1 truncate sticky -top-[5px] -mt-px -mx-1 z-10 bg-neutral-100/60 dark:bg-neutral-700/60 backdrop-blur-md supports-[-moz-appearance:none]:bg-neutral-100 border-y border-y-neutral-200 dark:border-y-neutral-700 [&+*]:mt-1">
+        {props.title}
+      </Header>
+      <Collection items={props.items}>{props.children}</Collection>
+    </ListBoxSection>
+  );
+}

package/src/Popover.tsx

@@ -1,65 +1,72 @@
-import type { AriaPopoverProps } from "react-aria";
-import { DismissButton, Overlay, usePopover } from "react-aria";
-import type { OverlayTriggerState } from "react-stately";
-import React, { ReactNode, useRef } from "react";
-import { DOMAttributes } from "@react-types/shared";
+import {
+  OverlayArrow,
+  Popover as AriaPopover,
+  PopoverProps as AriaPopoverProps,
+  composeRenderProps,
+} from "react-aria-components";
+import React from "react";
+import { tv } from "tailwind-variants";
+import { OverlayTriggerState } from "react-stately";
 
-export interface PopoverClasses {
-  underlayClass?: string;
-  popoverClass?: string;
-}
-export interface PopoverProps
-  extends Omit<AriaPopoverProps, "popoverRef">,
-    PopoverClasses {
+export interface PopoverProps extends Omit<AriaPopoverProps, "children"> {
+  showArrow?: boolean;
   children: React.ReactNode;
-  state: OverlayTriggerState;
-  portalContainer?: Element;
-  renderArrow?: (props: DOMAttributes) => ReactNode;
 }
 
-export const DefaultPopoverClasses = {
-  underlayClass: "fixed inset-0",
-  popoverClass: "bg-white",
-};
+const styles = tv({
+  base: "font-sans bg-white dark:bg-neutral-900/70 dark:backdrop-blur-2xl dark:backdrop-saturate-200 forced-colors:bg-[Canvas] shadow-2xl rounded-xl bg-clip-padding border border-black/10 dark:border-white/10 text-neutral-700 dark:text-neutral-300 outline-0",
+  variants: {
+    isEntering: {
+      true: "animate-in fade-in placement-bottom:slide-in-from-top-1 placement-top:slide-in-from-bottom-1 placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 ease-out duration-200",
+    },
+    isExiting: {
+      true: "animate-out fade-out placement-bottom:slide-out-to-top-1 placement-top:slide-out-to-bottom-1 placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 ease-in duration-150",
+    },
+  },
+});
 
 export function Popover({
   children,
-  state,
-  renderArrow,
-  portalContainer,
+  showArrow,
+  className,
   ...props
 }: PopoverProps) {
-  let popoverRef = useRef(null);
-  const { popoverClass, underlayClass } = {
-    ...DefaultPopoverClasses,
-    ...props,
-  };
-  let { popoverProps, underlayProps, arrowProps } = usePopover(
-    {
-      ...props,
-      popoverRef,
-    },
-    state,
-  );
-
+  let offset = showArrow ? 12 : 8;
   return (
-    <Overlay portalContainer={portalContainer}>
-      <div {...underlayProps} className={underlayClass} />
-      <div
-        {...popoverProps}
-        ref={popoverRef}
-        className={popoverClass}
-        style={popoverProps.style}
-      >
-        {renderArrow?.(arrowProps)}
-        <DismissButton onDismiss={state.close} />
-        {children}
-        <DismissButton onDismiss={state.close} />
-      </div>
-    </Overlay>
+    <AriaPopover
+      offset={offset}
+      {...props}
+      className={composeRenderProps(className, (className, renderProps) =>
+        styles({ ...renderProps, className }),
+      )}
+    >
+      {showArrow && (
+        <OverlayArrow className="group">
+          <svg
+            width={12}
+            height={12}
+            viewBox="0 0 12 12"
+            className="block fill-white dark:fill-[#1f1f21] forced-colors:fill-[Canvas] stroke-1 stroke-black/10 dark:stroke-neutral-700 forced-colors:stroke-[ButtonBorder] group-placement-bottom:rotate-180 group-placement-left:-rotate-90 group-placement-right:rotate-90"
+          >
+            <path d="M0 0 L6 6 L12 0" />
+          </svg>
+        </OverlayArrow>
+      )}
+      {children}
+    </AriaPopover>
   );
 }
 
+export interface PopoverClasses {
+  underlayClass?: string;
+  popoverClass?: string;
+}
+
+export const DefaultPopoverClasses = {
+  underlayClass: "fixed inset-0",
+  popoverClass: "bg-white",
+};
+
 export function createOverlayState(ref: {
   value: boolean;
 }): OverlayTriggerState {

package/src/Select.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  Select as AriaSelect,
+  SelectProps as AriaSelectProps,
+  Button,
+  ListBox,
+  ListBoxItemProps,
+  SelectValue,
+  ValidationResult,
+} from "react-aria-components";
+import { tv } from "tailwind-variants";
+import { Description, FieldError, Label } from "./Field";
+import { DropdownItem, DropdownSection, DropdownSectionProps } from "./ListBox";
+import { Popover } from "./Popover";
+import { composeTailwindRenderProps, focusRing } from "./utils";
+
+const styles = tv({
+  extend: focusRing,
+  base: "flex items-center text-start gap-4 w-full font-sans border border-black/10 dark:border-white/10 cursor-default rounded-lg pl-3 pr-2 h-9 min-w-[64px] transition bg-neutral-50 dark:bg-neutral-700 [-webkit-tap-highlight-color:transparent]",
+  variants: {
+    isDisabled: {
+      false:
+        "text-neutral-800 dark:text-neutral-300 hover:bg-neutral-100 pressed:bg-neutral-200 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 group-invalid:outline group-invalid:outline-red-600 forced-colors:group-invalid:outline-[Mark]",
+      true: "border-transparent dark:border-transparent text-neutral-200 dark:text-neutral-600 forced-colors:text-[GrayText] bg-neutral-100 dark:bg-neutral-800",
+    },
+  },
+});
+
+export interface SelectProps<T extends object>
+  extends Omit<AriaSelectProps<T>, "children"> {
+  label?: string;
+  description?: string;
+  errorMessage?: string | ((validation: ValidationResult) => string);
+  items?: Iterable<T>;
+  children: React.ReactNode | ((item: T) => React.ReactNode);
+}
+
+export function Select<T extends object>({
+  label,
+  description,
+  errorMessage,
+  children,
+  items,
+  ...props
+}: SelectProps<T>) {
+  return (
+    <AriaSelect
+      {...props}
+      className={composeTailwindRenderProps(
+        props.className,
+        "group flex flex-col gap-1 relative font-sans",
+      )}
+    >
+      {label && <Label>{label}</Label>}
+      <Button className={styles}>
+        <SelectValue className="flex-1 text-sm">
+          {({ selectedText, defaultChildren }) =>
+            selectedText || defaultChildren
+          }
+        </SelectValue>
+        <i
+          aria-hidden
+          className={
+            "w-4 h-4 fa fa-chevron-down text-neutral-600 dark:text-neutral-400 forced-colors:text-[ButtonText] group-disabled:text-neutral-200 dark:group-disabled:text-neutral-600 forced-colors:group-disabled:text-[GrayText]"
+          }
+        />
+      </Button>
+      {description && <Description>{description}</Description>}
+      <FieldError>{errorMessage}</FieldError>
+      <Popover className="min-w-(--trigger-width)">
+        <ListBox
+          items={items}
+          className="outline-hidden box-border p-1 max-h-[inherit] overflow-auto [clip-path:inset(0_0_0_0_round_.75rem)]"
+        >
+          {children}
+        </ListBox>
+      </Popover>
+    </AriaSelect>
+  );
+}
+
+export function SelectItem(props: ListBoxItemProps) {
+  return <DropdownItem {...props} />;
+}
+
+export function SelectSection<T extends object>(
+  props: DropdownSectionProps<T>,
+) {
+  return <DropdownSection {...props} />;
+}

package/src/index.ts

@@ -2,3 +2,6 @@ export * from "./Button";
 export * from "./Dialog";
 export * from "./Popover";
 export * from "./Modal";
+export * from "./Select";
+export * from "./utils";
+export * from "./Field";

package/src/utils.ts

@@ -0,0 +1,20 @@
+import { composeRenderProps } from "react-aria-components";
+import { twMerge } from "tailwind-merge";
+import { tv } from "tailwind-variants";
+
+export const focusRing = tv({
+  base: "outline outline-secondary-600 dark:outline-secondary-500 forced-colors:outline-[Highlight] outline-offset-2",
+  variants: {
+    isFocusVisible: {
+      false: "outline-0",
+      true: "outline-2",
+    },
+  },
+});
+
+export function composeTailwindRenderProps<T>(
+  className: string | ((v: T) => string) | undefined,
+  tw: string,
+): string | ((v: T) => string) {
+  return composeRenderProps(className, (className) => twMerge(tw, className));
+}