@cntyclub/ui-react 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [
@@ -47,6 +47,7 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.561.0",
     "qr-code-styling": "^1.9.2",
+    "react-aria-components": "^1.20.0",
     "react-day-picker": "^9.14.0",
     "react-dropzone": "^14.4.0",
     "react-markdown": "^9.1.0",

package/src/components/ui/color-picker.tsx

@@ -0,0 +1,378 @@
+"use client";
+
+import { PipetteIcon, PlusIcon } from "lucide-react";
+import * as React from "react";
+import {
+  ColorArea as AriaColorArea,
+  ColorField as AriaColorField,
+  ColorPicker as AriaColorPicker,
+  ColorSlider as AriaColorSlider,
+  ColorSwatch as AriaColorSwatch,
+  ColorSwatchPicker as AriaColorSwatchPicker,
+  ColorSwatchPickerItem as AriaColorSwatchPickerItem,
+  ColorThumb as AriaColorThumb,
+  ColorPickerStateContext,
+  Input as AriaInput,
+  SliderTrack as AriaSliderTrack,
+  getColorChannels,
+  parseColor,
+} from "react-aria-components";
+
+import { cn } from "../../lib/utils/css";
+
+/**
+ * A colour picker, built on React Aria's colour primitives.
+ *
+ * The one part of this kit that is not Base UI, and deliberately: choosing a colour is
+ * a pointer-and-keyboard problem with a saturation plane, two gradient sliders, a
+ * parsed text field and a channel model behind them, and React Aria is the only
+ * accessible implementation of that we would not otherwise be writing ourselves.
+ * Everything visible is still this kit's tokens and `data-slot` conventions.
+ *
+ * **Compound, so a screen takes only the parts it needs.** The four-hex-field panel in
+ * the office needs a swatch and a hex box; a full editor wants the plane and both
+ * sliders. Both are the same state, so both read `ColorPicker.Provider` and neither
+ * has to lift anything.
+ *
+ * ```tsx
+ * <ColorPicker.Provider defaultValue="#8c1515" onChange={(c) => save(c.toString("hex"))}>
+ *   <ColorPicker.Area />
+ *   <ColorPicker.HueSlider />
+ *   <ColorPicker.ValueInput />
+ * </ColorPicker.Provider>
+ * ```
+ *
+ * Or the whole thing, already composed:
+ *
+ * ```tsx
+ * <ColorPickerPanel defaultValue="#8c1515" onChange={…} />
+ * ```
+ */
+
+// The chequerboard behind anything that can be semi-transparent. Inline rather than a
+// token because it is a texture, not a colour, and it must look identical in both
+// themes — a transparency indicator that changes with the theme reads as part of the
+// colour being shown.
+const CHECKERBOARD =
+  "repeating-conic-gradient(rgba(0,0,0,.12) 0% 25%, transparent 0% 50%) 50% / 12px 12px";
+
+function useColorPicker() {
+  const state = React.useContext(ColorPickerStateContext);
+  if (!state) {
+    throw new Error("useColorPicker must be used inside <ColorPicker.Provider>.");
+  }
+  return state;
+}
+
+function ColorPickerProvider(props: React.ComponentProps<typeof AriaColorPicker>) {
+  return <AriaColorPicker {...props} />;
+}
+
+function ColorArea({ className, ...props }: React.ComponentProps<typeof AriaColorArea>) {
+  return (
+    <AriaColorArea
+      className={cn(
+        "h-40 w-full shrink-0 rounded-lg border border-input outline-none",
+        "data-[disabled]:opacity-64",
+        className,
+      )}
+      data-slot="color-picker-area"
+      {...props}
+    >
+      <ColorThumb />
+    </AriaColorArea>
+  );
+}
+
+function ColorThumb({ className, ...props }: React.ComponentProps<typeof AriaColorThumb>) {
+  return (
+    <AriaColorThumb
+      className={cn(
+        // `box-shadow` rather than a border, so the ring sits *outside* the swatch and
+        // the pixel under the thumb is the colour actually selected.
+        "size-4 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,.35)] outline-none",
+        "transition-[scale,box-shadow] duration-150 ease-out",
+        "data-[focus-visible]:ring-[3px] data-[focus-visible]:ring-ring/32 data-[dragging]:scale-115",
+        className,
+      )}
+      data-slot="color-picker-thumb"
+      {...props}
+    />
+  );
+}
+
+function ColorSliderBase({
+  className,
+  channel,
+  chequered,
+  ...props
+}: Omit<React.ComponentProps<typeof AriaColorSlider>, "channel"> & {
+  channel: "hue" | "alpha";
+  chequered?: boolean;
+}) {
+  return (
+    <AriaColorSlider
+      channel={channel}
+      className={cn("w-full data-[disabled]:opacity-64", className)}
+      data-slot={`color-picker-${channel}-slider`}
+      orientation="horizontal"
+      {...props}
+    >
+      {/* The gradient is React Aria's, handed over as `defaultStyle` — it knows the
+          channel and the current colour, and recomputing it here would be a second
+          source of truth for the same thing. An alpha track additionally stacks the
+          chequerboard *under* it, which is the whole point of that track: the gradient
+          ends at transparent, so what shows through is what "transparent" looks like. */}
+      <AriaSliderTrack
+        className="relative h-3 w-full rounded-full border border-input"
+        style={({ defaultStyle }) => ({
+          background: chequered
+            ? `${defaultStyle.background}, ${CHECKERBOARD}`
+            : defaultStyle.background,
+        })}
+      >
+        <ColorThumb className="top-1/2" />
+      </AriaSliderTrack>
+    </AriaColorSlider>
+  );
+}
+
+function ColorHueSlider(props: Omit<React.ComponentProps<typeof AriaColorSlider>, "channel">) {
+  return <ColorSliderBase channel="hue" {...props} />;
+}
+
+function ColorAlphaSlider(props: Omit<React.ComponentProps<typeof AriaColorSlider>, "channel">) {
+  return <ColorSliderBase channel="alpha" chequered {...props} />;
+}
+
+function ColorSwatch({ className, ...props }: React.ComponentProps<typeof AriaColorSwatch>) {
+  return (
+    <AriaColorSwatch
+      className={cn("size-8 shrink-0 rounded-md border border-input", className)}
+      data-slot="color-picker-swatch"
+      style={{ background: CHECKERBOARD }}
+      {...props}
+    />
+  );
+}
+
+function ColorValueInput({
+  className,
+  ...props
+}: Omit<React.ComponentProps<typeof AriaColorField>, "children">) {
+  return (
+    <AriaColorField
+      className={cn("min-w-0 flex-1", className)}
+      data-slot="color-picker-value"
+      {...props}
+    >
+      <AriaInput
+        className={cn(
+          "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 font-mono text-sm tabular-nums outline-none",
+          "placeholder:text-muted-foreground focus-visible:ring-[3px] focus-visible:ring-ring/24",
+        )}
+      />
+    </AriaColorField>
+  );
+}
+
+/**
+ * A grid of colours somebody can pick from, and optionally add to.
+ *
+ * `onAdd` is what makes it "saved colours" rather than a fixed palette: the plus tile
+ * only appears when there is somewhere for the current colour to go.
+ */
+function ColorSavedColors({
+  className,
+  colors,
+  onSelect,
+  onAdd,
+  size = "md",
+  ...props
+}: Omit<React.ComponentProps<typeof AriaColorSwatchPicker>, "onChange" | "children"> & {
+  colors: string[];
+  onSelect?: (color: string) => void;
+  onAdd?: () => void;
+  size?: "sm" | "md";
+}) {
+  const tile = size === "sm" ? "size-6" : "size-8";
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-1.5", className)} data-slot="color-picker-saved">
+      <AriaColorSwatchPicker
+        className="flex flex-wrap items-center gap-1.5"
+        onChange={(color) => onSelect?.(color.toString("hex"))}
+        {...props}
+      >
+        {colors.map((color) => (
+          <AriaColorSwatchPickerItem
+            className={cn(
+              tile,
+              "rounded-md border border-input outline-none",
+              "data-[focus-visible]:ring-[3px] data-[focus-visible]:ring-ring/24",
+              "data-[selected]:ring-2 data-[selected]:ring-ring data-[selected]:ring-offset-2 data-[selected]:ring-offset-background",
+            )}
+            color={color}
+            key={color}
+          >
+            <AriaColorSwatch className="size-full rounded-[5px]" />
+          </AriaColorSwatchPickerItem>
+        ))}
+      </AriaColorSwatchPicker>
+      {onAdd ? (
+        <button
+          aria-label="Save this colour"
+          className={cn(
+            tile,
+            "flex items-center justify-center rounded-md border border-input border-dashed text-muted-foreground outline-none",
+            "transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/24",
+          )}
+          onClick={onAdd}
+          type="button"
+        >
+          <PlusIcon className={size === "sm" ? "size-3" : "size-3.5"} strokeWidth={2} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Pick a colour from anywhere on the screen.
+ *
+ * Renders nothing where the browser has no `EyeDropper` — Firefox and Safari do not,
+ * and a button that silently does nothing is worse than one that is not offered. The
+ * check runs in an effect rather than during render, because `window` is not there on
+ * the server and a hydration mismatch over a button is still a hydration mismatch.
+ */
+function ColorEyeDropper({ className, ...props }: React.ComponentProps<"button">) {
+  const state = useColorPicker();
+  const [supported, setSupported] = React.useState(false);
+
+  React.useEffect(() => {
+    setSupported(typeof window !== "undefined" && "EyeDropper" in window);
+  }, []);
+
+  if (!supported) return null;
+
+  return (
+    <button
+      aria-label="Pick a colour from the screen"
+      className={cn(
+        "flex size-9 shrink-0 items-center justify-center rounded-md border border-input text-muted-foreground outline-none",
+        "transition-colors hover:bg-accent hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/24",
+        className,
+      )}
+      data-slot="color-picker-eyedropper"
+      onClick={async () => {
+        try {
+          // @ts-expect-error — EyeDropper is not in lib.dom yet.
+          const result = await new window.EyeDropper().open();
+          state.setColor(parseColor(result.sRGBHex));
+        } catch {
+          // The user dismissed it. Not an error, and nothing to say about it.
+        }
+      }}
+      type="button"
+      {...props}
+    >
+      <PipetteIcon className="size-4" strokeWidth={1.8} />
+    </button>
+  );
+}
+
+/** The current colour as a swatch — reads state, so it needs no props. */
+function ColorPreview({ className }: { className?: string }) {
+  const state = useColorPicker();
+  return (
+    <AriaColorSwatch
+      className={cn("size-9 shrink-0 rounded-md border border-input", className)}
+      color={state.color}
+      data-slot="color-picker-preview"
+      style={{ background: CHECKERBOARD }}
+    />
+  );
+}
+
+/**
+ * The whole picker, already composed — plane, hue, alpha, eyedropper and a hex box.
+ *
+ * What a screen reaches for when it just wants "let them choose a colour". Anything
+ * more specific composes the parts above instead.
+ */
+function ColorPickerPanel({
+  className,
+  withAlpha = false,
+  savedColors,
+  onSaveColor,
+  ...props
+}: Omit<React.ComponentProps<typeof AriaColorPicker>, "children"> & {
+  /** Wraps the panel, not the provider — the provider renders no element. */
+  className?: string;
+  withAlpha?: boolean;
+  savedColors?: string[];
+  onSaveColor?: () => void;
+}) {
+  return (
+    <ColorPickerProvider {...props}>
+      <div
+        className={cn("flex w-64 flex-col gap-3 rounded-xl border border-input bg-popover p-3", className)}
+        data-slot="color-picker"
+      >
+        <ColorArea colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
+        <div className="flex items-center gap-2">
+          <ColorPreview />
+          <div className="flex min-w-0 flex-1 flex-col gap-2">
+            <ColorHueSlider />
+            {withAlpha ? <ColorAlphaSlider /> : null}
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <ColorEyeDropper />
+          <ColorValueInput />
+        </div>
+        {savedColors?.length || onSaveColor ? (
+          <ColorSavedColors colors={savedColors ?? []} onAdd={onSaveColor} size="sm" />
+        ) : null}
+      </div>
+    </ColorPickerProvider>
+  );
+}
+
+/**
+ * The compound namespace.
+ *
+ * Exported as one object rather than a dozen loose names because the parts are only
+ * meaningful together, and `ColorPicker.Area` says which state it reads in a way that
+ * `ColorArea` does not.
+ */
+const ColorPicker = Object.assign(ColorPickerPanel, {
+  Provider: ColorPickerProvider,
+  Area: ColorArea,
+  Thumb: ColorThumb,
+  HueSlider: ColorHueSlider,
+  AlphaSlider: ColorAlphaSlider,
+  Swatch: ColorSwatch,
+  Preview: ColorPreview,
+  ValueInput: ColorValueInput,
+  SavedColors: ColorSavedColors,
+  EyeDropper: ColorEyeDropper,
+});
+
+export {
+  ColorPicker,
+  ColorPickerPanel,
+  ColorPickerProvider,
+  ColorArea,
+  ColorThumb,
+  ColorHueSlider,
+  ColorAlphaSlider,
+  ColorSwatch,
+  ColorPreview,
+  ColorValueInput,
+  ColorSavedColors,
+  ColorEyeDropper,
+  useColorPicker,
+  parseColor,
+  getColorChannels,
+};

package/src/index.ts

@@ -28,6 +28,7 @@ export * from "./components/ui/chat-divider";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/checkbox-group";
 export * from "./components/ui/collapsible";
+export * from "./components/ui/color-picker";
 export * from "./components/ui/combobox";
 export * from "./components/ui/command";
 export * from "./components/ui/confetti";