@bearmenu/ui 0.8.25 → 0.8.27

package/src/components/checkbox.tsx

@@ -2,31 +2,57 @@
 
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva, type VariantProps } from "class-variance-authority";
 import { Check, Minus } from "lucide-react";
 import { cn } from "../lib/utils";
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    data-slot="checkbox"
-    className={cn(
-      "peer size-5 shrink-0 rounded-md border border-border bg-background transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary hover:border-primary/50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      {props.checked === "indeterminate" ? (
-        <Minus className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out" strokeWidth={3} />
-      ) : (
-        <Check className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out" strokeWidth={3} />
-      )}
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
+const checkboxVariants = cva(
+  "peer size-5 shrink-0 rounded-md border border-border bg-background transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary hover:border-primary/50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      /**
+       * The booking flow's opt-in ("Save these details for next time",
+       * booking flow.html): a 17px box with a 5px radius, a hairline on the
+       * soft ground when off, the brand gradient with an 11px white check
+       * when on.
+       */
+      appearance: {
+        default: "",
+        booking:
+          "size-[17px] rounded-[5px] bg-surface-2 data-[state=checked]:border-transparent data-[state=checked]:bg-[image:var(--gradient-primary)] data-[state=checked]:text-white [&_svg]:size-[11px]",
+      },
+    },
+    defaultVariants: { appearance: "default" },
+  }
+);
+
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
+  VariantProps<typeof checkboxVariants>;
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, appearance, ...props }, ref) => (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      data-slot="checkbox"
+      className={cn(checkboxVariants({ appearance }), className)}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+        {props.checked === "indeterminate" ? (
+          <Minus
+            className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out"
+            strokeWidth={3}
+          />
+        ) : (
+          <Check
+            className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out"
+            strokeWidth={3}
+          />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox };
+export { Checkbox, checkboxVariants };

package/src/components/field.stories.tsx

@@ -1,6 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Field, FieldControl, FieldDescription, FieldError, FieldLabel } from "./field";
+import { Checkbox } from "./checkbox";
+import {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  FieldOptional,
+} from "./field";
 import { Input } from "./input";
+import { Textarea } from "./textarea";
 
 const meta = {
   title: "Components/Field",
@@ -34,3 +43,44 @@ export const Invalid: Story = {
     </Field>
   ),
 };
+
+/** The booking flow's "Your details" fields (B2, S6): caption labels, 46px fields, the opt-in. */
+export const Booking: Story = {
+  render: () => (
+    <div className="flex w-[335px] flex-col gap-3">
+      <Field appearance="booking">
+        <FieldLabel>Name</FieldLabel>
+        <FieldControl>
+          <Input appearance="booking" defaultValue="Adrian Pop" />
+        </FieldControl>
+      </Field>
+      <Field appearance="booking" invalid>
+        <FieldLabel>Phone</FieldLabel>
+        <FieldControl>
+          <Input appearance="booking" defaultValue="0712 34" />
+        </FieldControl>
+        <FieldError>That number looks too short.</FieldError>
+      </Field>
+      <Field appearance="booking">
+        <FieldLabel>
+          Email <FieldOptional>(optional)</FieldOptional>
+        </FieldLabel>
+        <FieldControl>
+          <Input appearance="booking" type="email" placeholder="you@example.com" />
+        </FieldControl>
+      </Field>
+      <Field appearance="booking">
+        <FieldLabel>
+          Anything we should know <FieldOptional>(optional)</FieldOptional>
+        </FieldLabel>
+        <FieldControl>
+          <Textarea appearance="booking" defaultValue="Birthday — a quieter corner if possible." />
+        </FieldControl>
+      </Field>
+      <label className="flex items-center gap-[9px] text-[12.5px] text-ink-secondary">
+        <Checkbox appearance="booking" defaultChecked />
+        Save these details for next time
+      </label>
+    </div>
+  ),
+};

package/src/components/field.tsx

@@ -5,12 +5,21 @@ import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../lib/utils";
 import { Label } from "./label";
 
+/**
+ * `booking` — the booking flow's fields (booking flow.html, `.fld`): the
+ * label a 10.5px uppercase caption in the muted ink that stays muted when
+ * the field is invalid (the hairline and the line under it carry the error),
+ * the error at 11.5px, 5px between label, control and error.
+ */
+type FieldAppearance = "default" | "booking";
+
 const FieldContext = React.createContext<{
   id: string;
   descriptionId: string;
   errorId: string;
   hasError: boolean;
-}>({ id: "", descriptionId: "", errorId: "", hasError: false });
+  appearance: FieldAppearance;
+}>({ id: "", descriptionId: "", errorId: "", hasError: false, appearance: "default" });
 
 type FieldProps = React.HTMLAttributes<HTMLDivElement> & {
   /** Field id. Auto-generated if omitted. */
@@ -19,23 +28,38 @@ type FieldProps = React.HTMLAttributes<HTMLDivElement> & {
   invalid?: boolean;
   /** Lay out content horizontally instead of stacked. */
   orientation?: "vertical" | "horizontal";
+  appearance?: FieldAppearance;
 };
 
 const Field = React.forwardRef<HTMLDivElement, FieldProps>(
-  ({ id: providedId, invalid, orientation = "vertical", className, children, ...props }, ref) => {
+  (
+    {
+      id: providedId,
+      invalid,
+      orientation = "vertical",
+      appearance = "default",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const generatedId = React.useId();
     const id = providedId ?? generatedId;
     const descriptionId = `${id}-description`;
     const errorId = `${id}-error`;
 
     return (
-      <FieldContext.Provider value={{ id, descriptionId, errorId, hasError: !!invalid }}>
+      <FieldContext.Provider
+        value={{ id, descriptionId, errorId, hasError: !!invalid, appearance }}
+      >
         <div
           ref={ref}
           data-slot="field"
           data-invalid={invalid || undefined}
           className={cn(
-            "flex gap-2",
+            "flex",
+            appearance === "booking" ? "gap-[5px]" : "gap-2",
             orientation === "vertical" ? "flex-col" : "flex-row items-center",
             className
           )}
@@ -53,19 +77,38 @@ const FieldLabel = React.forwardRef<
   HTMLLabelElement,
   React.ComponentPropsWithoutRef<typeof Label>
 >(({ className, ...props }, ref) => {
-  const { id, hasError } = React.useContext(FieldContext);
+  const { id, hasError, appearance } = React.useContext(FieldContext);
   return (
     <Label
       ref={ref}
       data-slot="field-label"
       htmlFor={id}
-      className={cn(hasError && "text-destructive", className)}
+      className={cn(
+        appearance === "booking"
+          ? "text-[10.5px] leading-[1.2] font-semibold tracking-[0.04em] text-muted-foreground uppercase"
+          : hasError && "text-destructive",
+        className
+      )}
       {...props}
     />
   );
 });
 FieldLabel.displayName = "FieldLabel";
 
+/**
+ * "(optional)" after a label's text — sentence case, regular weight, a
+ * shade quieter than the label (booking flow.html's EMAIL (optional)).
+ */
+function FieldOptional({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      data-slot="field-optional"
+      className={cn("font-normal normal-case opacity-70", className)}
+      {...props}
+    />
+  );
+}
+
 const FieldControl = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Slot>>(
   ({ ...props }, ref) => {
     const { id, descriptionId, errorId, hasError } = React.useContext(FieldContext);
@@ -101,7 +144,7 @@ FieldDescription.displayName = "FieldDescription";
 
 const FieldError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, children, ...props }, ref) => {
-    const { errorId, hasError } = React.useContext(FieldContext);
+    const { errorId, hasError, appearance } = React.useContext(FieldContext);
     if (!hasError || !children) return null;
     return (
       <p
@@ -109,7 +152,16 @@ const FieldError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<H
         id={errorId}
         role="alert"
         data-slot="field-error"
-        className={cn("text-sm text-destructive", className)}
+        className={cn(
+          appearance === "booking"
+            ? // The design's error ink: the solid token is too bright for AA
+              // at 11.5px on white; dark mode's lifted token already clears it.
+              // Light: the design's ink. Dark: lifted further than the solid
+              // token, which lands at ~3.8:1 on the card ground at 11.5px.
+              "m-0 text-[11.5px] leading-[1.2] text-[oklch(0.52_0.16_25)] dark:text-[oklch(0.75_0.13_25)]"
+            : "text-sm text-destructive",
+          className
+        )}
         {...props}
       >
         {children}
@@ -143,4 +195,13 @@ const FieldLegend = React.forwardRef<HTMLLegendElement, React.HTMLAttributes<HTM
 );
 FieldLegend.displayName = "FieldLegend";
 
-export { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldSet, FieldLegend };
+export {
+  Field,
+  FieldLabel,
+  FieldOptional,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldSet,
+  FieldLegend,
+};

package/src/components/input.tsx

@@ -15,10 +15,21 @@ const inputVariants = cva(
         rounded: "rounded-xl focus-visible:ring-ring",
         pill: "rounded-full bg-background shadow-[var(--shadow-card)] focus-visible:ring-accent/30",
       },
+      /**
+       * The booking flow's field (booking flow.html, `.in`): 46px on the card
+       * ground rather than the input wash, an 11px radius, 13px inset, 14px
+       * type. Last, so it wins over the size and shape it restates.
+       */
+      appearance: {
+        default: "",
+        booking:
+          "h-[46px] rounded-[11px] bg-card px-[13px] py-0 text-[14px] leading-[1.2] focus-visible:bg-card focus-visible:ring-ring aria-invalid:border-[oklch(0.52_0.16_25)] dark:aria-invalid:border-destructive",
+      },
     },
     defaultVariants: {
       size: "default",
       shape: "rounded",
+      appearance: "default",
     },
   }
 );
@@ -28,12 +39,12 @@ export interface InputProps
     VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, size, shape, ...props }, ref) => {
+  ({ className, type, size, shape, appearance, ...props }, ref) => {
     return (
       <input
         type={type}
         data-slot="input"
-        className={cn(inputVariants({ size, shape }), className)}
+        className={cn(inputVariants({ size, shape, appearance }), className)}
         ref={ref}
         {...props}
       />

package/src/components/textarea.tsx

@@ -1,17 +1,35 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+const textareaVariants = cva(
+  "flex min-h-20 w-full rounded-xl border border-border bg-input/50 px-4 py-3 text-base transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 resize-y aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      /**
+       * The booking flow's note field (booking flow.html, `.in.ta`): the
+       * `Input` booking appearance's ground, radius and type, 66px tall with
+       * a 12px × 13px inset, and no drag handle — the design draws none.
+       */
+      appearance: {
+        default: "",
+        booking:
+          "min-h-[66px] resize-none rounded-[11px] bg-card px-[13px] py-3 text-[14px] leading-[1.4] focus-visible:bg-card aria-invalid:border-[oklch(0.52_0.16_25)] dark:aria-invalid:border-destructive",
+      },
+    },
+    defaultVariants: { appearance: "default" },
+  }
+);
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+  VariantProps<typeof textareaVariants>;
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, appearance, ...props }, ref) => {
     return (
       <textarea
         data-slot="textarea"
-        className={cn(
-          "flex min-h-20 w-full rounded-xl border border-border bg-input/50 px-4 py-3 text-base transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 resize-y aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
-          className
-        )}
+        className={cn(textareaVariants({ appearance }), className)}
         ref={ref}
         {...props}
       />
@@ -20,4 +38,4 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 );
 Textarea.displayName = "Textarea";
 
-export { Textarea };
+export { Textarea, textareaVariants };

package/src/components/toggle-group.tsx

@@ -67,13 +67,13 @@ function ToggleGroupItem({
         "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
         resolved === "segmented"
           ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]"
-          : // Tabs and chips size to their type: the size variant's fixed
-            // height and min-width would otherwise win the merge.
+          : // Tabs and chips size themselves (`toggleVariants`' compounds);
+            // the item's own rounding must not square them off.
             resolved === "tab"
-            ? "h-auto min-w-0 rounded-full px-3"
+            ? "rounded-full"
             : resolved === "chip"
               ? // A chip keeps its own width, so the row can wrap.
-                "h-auto min-w-0 flex-none rounded-full px-[13px]"
+                "flex-none rounded-full"
               : "rounded-none first:rounded-l-md last:rounded-r-md",
         className
       )}

package/src/components/toggle.tsx

@@ -45,6 +45,14 @@ const toggleVariants = cva(
         lg: "h-10 px-2.5 min-w-10",
       },
     },
+    // Chips and tabs size to their type. Restated here, after the size
+    // variants, so the default size's `h-9 px-2 min-w-9` never wins the
+    // merge — for a `Toggle`, a `ToggleGroupItem` or a bare `toggleVariants`
+    // call on another element alike.
+    compoundVariants: [
+      { variant: "chip", class: "h-auto min-w-0 px-[13px]" },
+      { variant: "tab", class: "h-auto min-w-0 px-3" },
+    ],
     defaultVariants: {
       variant: "default",
       size: "default",

package/dist/chunk-NMEVJT5Q.js

@@ -1,26 +0,0 @@
-import { cn } from './chunk-FEK5XGZW.js';
-import { __objRest, __spreadProps, __spreadValues } from './chunk-MMUBH76A.js';
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Minus, Check } from 'lucide-react';
-import { jsx } from 'react/jsx-runtime';
-
-var Checkbox = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    CheckboxPrimitive.Root,
-    __spreadProps(__spreadValues({
-      ref,
-      "data-slot": "checkbox",
-      className: cn(
-        "peer size-5 shrink-0 rounded-md border border-border bg-background transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary hover:border-primary/50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
-        className
-      )
-    }, props), {
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out", strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { className: "size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out", strokeWidth: 3 }) })
-    })
-  );
-});
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };