@boyernick/standard-ui-react 0.1.1-canary.14 → 0.1.1-canary.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.1.1-canary.14",
+  "version": "0.1.1-canary.16",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",
@@ -21,12 +21,14 @@
     "test": "node --test --experimental-strip-types \"src/**/*.test.ts\""
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "@base-ui/react": "^1.7.0",
+    "@central-icons-react/round-filled-radius-2-stroke-2": "^1.1.315",
     "@central-icons-react/round-outlined-radius-2-stroke-2": "^1.1.312",
+    "@shadcn/react": "^0.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",

package/src/command.tsx

@@ -15,6 +15,7 @@ import {
   type ReactNode,
 } from "react"
 import { IconCrossSmall, IconMagnifyingGlass } from "./icons"
+import { filterGroupVariants, filterItemVariants } from "./filter-group"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
 
@@ -51,7 +52,9 @@ export type CommandClearProps = ButtonHTMLAttributes<HTMLButtonElement>
 export type CommandCloseProps = ComponentProps<typeof BaseDialog.Close>
 export type CommandDividerProps = HTMLAttributes<HTMLDivElement>
 export type CommandContentProps = HTMLAttributes<HTMLDivElement>
+/** @deprecated Use FilterGroup for new filter controls. */
 export type CommandFiltersProps = HTMLAttributes<HTMLUListElement>
+/** @deprecated Use FilterItem for new filter controls. */
 export type CommandFilterProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   selected?: boolean
 }
@@ -238,7 +241,8 @@ export const CommandFilters = ({
   <ul
     role="list"
     className={cn(
-      "flex shrink-0 flex-wrap justify-start gap-1.5 py-1.5",
+      filterGroupVariants({ variant: "pill" }),
+      "w-full shrink-0 justify-start py-1.5",
       className,
     )}
     {...props}
@@ -256,11 +260,10 @@ export const CommandFilter = ({
       type="button"
       aria-pressed={selected}
       data-selected={selected || undefined}
+      data-pressed={selected || undefined}
       className={cn(
-        "inline-flex h-9 cursor-pointer items-center rounded-full border border-transparent px-4 text-sm text-fg-quaternary outline-none",
+        filterItemVariants({ variant: "pill", size: "md" }),
         motion.colors,
-        "hover:text-fg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
-        "data-selected:bg-background-tertiary data-selected:text-fg-primary",
         className,
       )}
       {...props}

package/src/filter-group.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import { Toggle as BaseToggle } from "@base-ui/react/toggle"
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group"
+import { cva, type VariantProps } from "class-variance-authority"
+import { createContext, type ComponentProps, useContext } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+const filterGroupVariants = cva("flex w-fit items-center", {
+  variants: {
+    variant: {
+      pill: "flex-wrap gap-1",
+      segmented: "gap-0.5 rounded-lg bg-background-tertiary p-0.5",
+    },
+  },
+  defaultVariants: {
+    variant: "pill",
+  },
+})
+
+const filterItemVariants = cva(
+  "group/filter-item inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap border border-transparent text-fg-tertiary outline-none hover:text-fg-primary focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:text-fg-primary",
+  {
+    variants: {
+      variant: {
+        pill: "rounded-full hover:bg-background-tertiary data-pressed:bg-background-tertiary",
+        segmented:
+          "rounded-md hover:bg-background-quaternary data-pressed:bg-surface-raised data-pressed:shadow-hairline",
+      },
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm",
+      },
+    },
+    compoundVariants: [
+      { variant: "pill", size: "sm", class: "h-8 px-3" },
+      { variant: "pill", size: "md", class: "h-9 px-4" },
+      { variant: "pill", size: "lg", class: "h-10 px-5" },
+      { variant: "segmented", size: "sm", class: "h-7 px-2.5" },
+      { variant: "segmented", size: "md", class: "h-8 px-3" },
+      { variant: "segmented", size: "lg", class: "h-9 px-3.5" },
+    ],
+    defaultVariants: {
+      variant: "pill",
+      size: "md",
+    },
+  },
+)
+
+export type FilterGroupVariant = NonNullable<
+  VariantProps<typeof filterGroupVariants>["variant"]
+>
+export type FilterGroupSize = NonNullable<
+  VariantProps<typeof filterItemVariants>["size"]
+>
+
+type FilterGroupStyleContextValue = {
+  variant: FilterGroupVariant
+  size: FilterGroupSize
+}
+
+const FilterGroupStyleContext = createContext<FilterGroupStyleContextValue>({
+  variant: "pill",
+  size: "md",
+})
+
+export type FilterGroupProps = ComponentProps<typeof BaseToggleGroup> &
+  VariantProps<typeof filterGroupVariants> & {
+    /** Whether pressing the active item can clear a single-select group. */
+    allowEmpty?: boolean
+    size?: FilterGroupSize
+  }
+export type FilterItemProps = ComponentProps<typeof BaseToggle> &
+  VariantProps<typeof filterItemVariants>
+export type FilterCountProps = ComponentProps<"span">
+
+export const FilterGroup = ({
+  className,
+  variant = "pill",
+  size = "md",
+  allowEmpty = false,
+  multiple = false,
+  onValueChange,
+  ...props
+}: FilterGroupProps) => (
+  <FilterGroupStyleContext.Provider value={{ variant: variant ?? "pill", size }}>
+    <BaseToggleGroup
+      className={cn(filterGroupVariants({ variant }), className)}
+      multiple={multiple}
+      onValueChange={(value, eventDetails) => {
+        if (!multiple && !allowEmpty && value.length === 0) {
+          eventDetails.cancel()
+          return
+        }
+        onValueChange?.(value, eventDetails)
+      }}
+      {...props}
+    />
+  </FilterGroupStyleContext.Provider>
+)
+
+export const FilterItem = ({
+  className,
+  variant,
+  size,
+  type = "button",
+  ...props
+}: FilterItemProps) => {
+  const styles = useContext(FilterGroupStyleContext)
+
+  return (
+    <BaseToggle
+      type={type}
+      className={cn(
+        filterItemVariants({
+          variant: variant ?? styles.variant,
+          size: size ?? styles.size,
+        }),
+        motion.colors,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const FilterCount = ({ className, ...props }: FilterCountProps) => (
+  <span
+    className={cn(
+      "text-2xs-strong inline-flex min-w-4 items-center justify-center rounded-full bg-background-quaternary px-1 py-0.5 text-fg-secondary tabular-nums group-data-pressed/filter-item:bg-surface",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export { filterGroupVariants, filterItemVariants }

package/src/index.ts

@@ -364,6 +364,18 @@ export {
   type FieldsetProps,
   type FieldsetLegendProps,
 } from "./fieldset";
+export {
+  FilterGroup,
+  FilterItem,
+  FilterCount,
+  filterGroupVariants,
+  filterItemVariants,
+  type FilterGroupProps,
+  type FilterItemProps,
+  type FilterCountProps,
+  type FilterGroupVariant,
+  type FilterGroupSize,
+} from "./filter-group";
 export { Form, type FormProps } from "./form";
 export {
   Meter,
@@ -426,13 +438,26 @@ export {
   NumberFieldInput,
   NumberFieldIncrement,
   NumberFieldDecrement,
+  NumberFieldStepper,
+  NumberFieldPrefix,
+  NumberFieldSuffix,
   NumberFieldScrubArea,
   NumberFieldScrubAreaCursor,
+  numberFieldAffixVariants,
+  numberFieldControlVariants,
+  numberFieldGroupVariants,
+  numberFieldInputVariants,
+  numberFieldStepperVariants,
+  type NumberFieldSize,
+  type NumberFieldAlign,
   type NumberFieldProps,
   type NumberFieldGroupProps,
   type NumberFieldInputProps,
   type NumberFieldIncrementProps,
   type NumberFieldDecrementProps,
+  type NumberFieldStepperProps,
+  type NumberFieldPrefixProps,
+  type NumberFieldSuffixProps,
   type NumberFieldScrubAreaProps,
   type NumberFieldScrubAreaCursorProps,
 } from "./number-field";
@@ -449,8 +474,18 @@ export {
   NavigationMenuPopup,
   NavigationMenuArrow,
   NavigationMenuLink,
+  NavigationMenuBarLink,
+  NavigationMenuLinkIcon,
+  NavigationMenuLinkTitle,
+  NavigationMenuLinkDescription,
   NavigationMenuIcon,
+  navigationMenuBarItemVariants,
+  navigationMenuLinkVariants,
+  navigationMenuListVariants,
+  navigationMenuRootVariants,
   navigationMenuTriggerClassName,
+  type NavigationMenuVariant,
+  type NavigationMenuSize,
   type NavigationMenuProps,
   type NavigationMenuListProps,
   type NavigationMenuItemProps,
@@ -463,6 +498,10 @@ export {
   type NavigationMenuPopupProps,
   type NavigationMenuArrowProps,
   type NavigationMenuLinkProps,
+  type NavigationMenuBarLinkProps,
+  type NavigationMenuLinkIconProps,
+  type NavigationMenuLinkTitleProps,
+  type NavigationMenuLinkDescriptionProps,
   type NavigationMenuIconProps,
 } from "./navigation-menu";
 export {
@@ -524,6 +563,47 @@ export {
   type ProgressTrackProps,
   type ProgressIndicatorProps,
 } from "./progress";
+export {
+  Questionnaire,
+  QuestionnaireProgress,
+  QuestionnaireItem,
+  QuestionnaireTitle,
+  QuestionnaireDescription,
+  QuestionnaireChoices,
+  QuestionnaireChoice,
+  QuestionnaireChoiceInput,
+  QuestionnaireChoiceLabel,
+  QuestionnaireChoiceShortcut,
+  QuestionnaireInput,
+  QuestionnaireError,
+  QuestionnaireActions,
+  QuestionnairePrevious,
+  QuestionnaireSkip,
+  QuestionnaireNext,
+  QuestionnaireSubmit,
+  type QuestionnaireProps,
+  type QuestionnaireProgressProps,
+  type QuestionnaireItemProps,
+  type QuestionnaireTitleProps,
+  type QuestionnaireDescriptionProps,
+  type QuestionnaireChoicesProps,
+  type QuestionnaireChoiceProps,
+  type QuestionnaireChoiceInputProps,
+  type QuestionnaireChoiceLabelProps,
+  type QuestionnaireChoiceShortcutProps,
+  type QuestionnaireInputProps,
+  type QuestionnaireErrorProps,
+  type QuestionnaireActionsProps,
+  type QuestionnairePreviousProps,
+  type QuestionnaireSkipProps,
+  type QuestionnaireNextProps,
+  type QuestionnaireSubmitProps,
+  type QuestionnaireChoiceDefinition,
+  type QuestionnaireInputType,
+  type QuestionnaireItemDefinition,
+  type QuestionnaireItemStatus,
+  type QuestionnaireShortcutMode,
+} from "./questionnaire";
 export {
   RadioGroup,
   Radio,
@@ -581,11 +661,14 @@ export {
   SliderTrack,
   SliderIndicator,
   SliderThumb,
+  SliderTicks,
+  sliderVariants,
   type SliderProps,
   type SliderControlProps,
   type SliderTrackProps,
   type SliderIndicatorProps,
   type SliderThumbProps,
+  type SliderTicksProps,
 } from "./slider";
 export {
   Tabs,
@@ -593,7 +676,12 @@ export {
   TabsTab,
   TabsIndicator,
   TabsPanel,
+  tabsListVariants,
+  tabsTabVariants,
+  tabsIndicatorVariants,
   type TabsProps,
+  type TabsVariant,
+  type TabsSize,
   type TabsListProps,
   type TabsTabProps,
   type TabsIndicatorProps,
@@ -606,6 +694,8 @@ export {
   ToastViewport,
   ToastRoot,
   ToastContent,
+  ToastIcon,
+  toastRootVariants,
   ToastTitle,
   ToastDescription,
   ToastAction,
@@ -619,6 +709,8 @@ export {
   type ToastViewportProps,
   type ToastRootProps,
   type ToastContentProps,
+  type ToastIconProps,
+  type ToastType,
   type ToastTitleProps,
   type ToastDescriptionProps,
   type ToastActionProps,
@@ -695,14 +787,27 @@ export {
   PaginationLink,
   PaginationPrevious,
   PaginationNext,
+  PaginationFirst,
+  PaginationLast,
   PaginationEllipsis,
+  PaginationStatus,
+  PaginationRange,
+  paginationLinkVariants,
+  paginationDirectionVariants,
   type PaginationProps,
   type PaginationContentProps,
   type PaginationItemProps,
   type PaginationLinkProps,
+  type PaginationButtonProps,
+  type PaginationAnchorProps,
   type PaginationPreviousProps,
   type PaginationNextProps,
+  type PaginationFirstProps,
+  type PaginationLastProps,
   type PaginationEllipsisProps,
+  type PaginationStatusProps,
+  type PaginationRangeProps,
+  type PaginationSize,
 } from "./pagination";
 export {
   Sidebar,
@@ -711,14 +816,20 @@ export {
   SidebarFooter,
   SidebarNav,
   SidebarNavItem,
+  SidebarNavItemLabel,
+  SidebarNavBadge,
   SidebarGroup,
   SidebarGroupLabel,
+  sidebarVariants,
+  sidebarNavItemVariants,
   type SidebarProps,
   type SidebarHeaderProps,
   type SidebarContentProps,
   type SidebarFooterProps,
   type SidebarNavProps,
   type SidebarNavItemProps,
+  type SidebarNavItemLabelProps,
+  type SidebarNavBadgeProps,
   type SidebarGroupProps,
   type SidebarGroupLabelProps,
 } from "./sidebar";
@@ -775,6 +886,8 @@ export {
   TableHead,
   TableCell,
   TableCaption,
+  tableHeaderVariants,
+  tableVariants,
   type TableProps,
   type TableHeaderProps,
   type TableBodyProps,