@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/ui/chat/waveform.tsx

@@ -0,0 +1,30 @@
+import type * as React from "react"
+import { cn } from "@/lib/utils"
+
+const DEFAULT_BARS = [0.3, 0.6, 1, 0.75, 0.45, 0.9, 0.55, 0.35, 0.8, 1, 0.6, 0.4, 0.7, 0.5, 0.85, 0.3, 0.65, 0.95, 0.5, 0.35]
+
+export interface WaveformProps extends React.ComponentPropsWithoutRef<"span"> {
+  /** Bar heights in 0…1. Defaults to a 20-bar sample. */
+  bars?: number[]
+  /** Bars up to this index render in the accent colour (playback progress). */
+  progress?: number
+}
+
+/**
+ * Static 20px-tall bar waveform for audio attachments.
+ *
+ * @sketch "Atom / Waveform"
+ */
+export function Waveform({ bars = DEFAULT_BARS, progress = 0, className, ...props }: WaveformProps): React.ReactElement {
+  return (
+    <span aria-hidden="true" data-slot="waveform" className={cn("inline-flex h-5 items-center gap-[2.5px]", className)} {...props}>
+      {bars.map((h, i) => (
+        <span
+          key={i}
+          className={cn("w-0.5 rounded-full", i < progress ? "bg-accent-default" : "bg-text-primary")}
+          style={{ height: `${Math.max(0.15, Math.min(1, h)) * 100}%` }}
+        />
+      ))}
+    </span>
+  )
+}

package/src/components/ui/chat-atoms.story.tsx

@@ -0,0 +1,94 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { FileText } from "lucide-react"
+import { defineStory } from "@/registry/story"
+import { IconTile } from "./chat/icon-tile"
+import { Thumbnail } from "./chat/thumbnail"
+import { AvatarHandle } from "./chat/avatar-handle"
+import { Waveform } from "./chat/waveform"
+import { SendButton } from "./chat/buttons"
+
+function IconTilePreview(
+  props: Pick<ComponentProps<typeof IconTile>, "size" | "tone">
+) {
+  return (
+    <div className="p-6">
+      <IconTile {...props}>
+        <FileText aria-hidden="true" />
+      </IconTile>
+    </div>
+  )
+}
+
+function ThumbnailPreview(
+  props: Pick<ComponentProps<typeof Thumbnail>, "size" | "src" | "alt">
+) {
+  return (
+    <div className="p-6">
+      <Thumbnail {...props} />
+    </div>
+  )
+}
+
+function AvatarHandlePreview(
+  props: Pick<ComponentProps<typeof AvatarHandle>, "size" | "initials" | "src">
+) {
+  return (
+    <div className="p-6">
+      <AvatarHandle {...props} />
+    </div>
+  )
+}
+
+function WaveformPreview(
+  props: Pick<ComponentProps<typeof Waveform>, "bars" | "progress">
+) {
+  return (
+    <div className="overflow-x-auto p-6">
+      <Waveform {...props} />
+    </div>
+  )
+}
+
+function SendButtonPreview(
+  props: Pick<
+    ComponentProps<typeof SendButton>,
+    "disabled" | "loading" | "sound"
+  >
+) {
+  return (
+    <div className="p-6">
+      <SendButton {...props} />
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: IconTilePreview,
+  args: { initial: { size: 40, tone: "accent" } },
+})
+export const thumbnailStory = defineStory({
+  Component: ThumbnailPreview,
+  args: { initial: { size: "sm", alt: "Manuscript preview" } },
+})
+export const avatarHandleStory = defineStory({
+  Component: AvatarHandlePreview,
+  args: { initial: { size: 20, initials: "JD" } },
+})
+export const waveformStory = defineStory({
+  Component: WaveformPreview,
+  args: {
+    initial: { progress: 4, bars: [0.3, 0.6, 1, 0.75, 0.45, 0.9, 0.55, 0.35] },
+  },
+})
+export const sendButtonStory = defineStory({
+  Component: SendButtonPreview,
+  args: { initial: { disabled: false, loading: false, sound: true } },
+})
+
+export const Preview = story.WithControl
+export const ThumbnailPreviewControl = thumbnailStory.WithControl
+export const AvatarHandlePreviewControl = avatarHandleStory.WithControl
+export const WaveformPreviewControl = waveformStory.WithControl
+export const SendButtonPreviewControl = sendButtonStory.WithControl

package/src/components/ui/checkbox.story.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import type { ComponentProps } from "react"
+import { defineStory } from "@/registry/story"
+import { Checkbox } from "./checkbox"
+
+type PreviewProps = Pick<
+  ComponentProps<typeof Checkbox>,
+  "indeterminate" | "disabled" | "sound"
+>
+
+function CheckboxPreview(props: PreviewProps) {
+  return (
+    <div className="p-6">
+      <div className="">
+        <label className="flex items-center gap-2">
+          <Checkbox {...props} />
+          Include this passage
+        </label>
+      </div>
+    </div>
+  )
+}
+
+export const story = defineStory({
+  Component: CheckboxPreview,
+  args: { initial: { indeterminate: false, disabled: false, sound: true } },
+})
+
+export const Preview = story.WithControl

package/src/components/ui/collapsible.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible";
+import type React from "react";
+import { cn } from "@/lib/utils";
+
+export function Collapsible({
+  ...props
+}: CollapsiblePrimitive.Root.Props): React.ReactElement {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+export function CollapsibleTrigger({
+  className,
+  ...props
+}: CollapsiblePrimitive.Trigger.Props): React.ReactElement {
+  return (
+    <CollapsiblePrimitive.Trigger
+      className={className}
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+export function CollapsiblePanel({
+  className,
+  ...props
+}: CollapsiblePrimitive.Panel.Props): React.ReactElement {
+  return (
+    <CollapsiblePrimitive.Panel
+      className={cn(
+        "h-(--collapsible-panel-height) overflow-hidden transition-[height] duration-200 data-ending-style:h-0 data-starting-style:h-0",
+        className,
+      )}
+      data-slot="collapsible-panel"
+      {...props}
+    />
+  );
+}
+
+export { CollapsiblePrimitive, CollapsiblePanel as CollapsibleContent };

package/src/components/ui/command.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { Dialog as CommandDialogPrimitive } from "@base-ui/react/dialog";
+import { SearchIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+import {
+  Autocomplete,
+  AutocompleteCollection,
+  AutocompleteEmpty,
+  AutocompleteGroup,
+  AutocompleteGroupLabel,
+  AutocompleteInput,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompleteSeparator,
+} from "@/components/ui/autocomplete";
+
+export const CommandDialog: typeof CommandDialogPrimitive.Root =
+  CommandDialogPrimitive.Root;
+
+export const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =
+  CommandDialogPrimitive.Portal;
+
+export const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =
+  CommandDialogPrimitive.createHandle;
+
+export function CommandDialogTrigger(
+  props: CommandDialogPrimitive.Trigger.Props,
+): React.ReactElement {
+  return (
+    <CommandDialogPrimitive.Trigger
+      data-slot="command-dialog-trigger"
+      {...props}
+    />
+  );
+}
+
+export function CommandDialogBackdrop({
+  className,
+  ...props
+}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {
+  return (
+    <CommandDialogPrimitive.Backdrop
+      className={cn(
+        "fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className,
+      )}
+      data-slot="command-dialog-backdrop"
+      {...props}
+    />
+  );
+}
+
+export function CommandDialogViewport({
+  className,
+  ...props
+}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {
+  return (
+    <CommandDialogPrimitive.Viewport
+      className={cn(
+        "fixed inset-0 z-50 flex flex-col items-center px-4 py-[max(--spacing(4),4vh)] sm:py-[10vh]",
+        className,
+      )}
+      data-slot="command-dialog-viewport"
+      {...props}
+    />
+  );
+}
+
+export function CommandDialogPopup({
+  className,
+  children,
+  portalProps,
+  ...props
+}: CommandDialogPrimitive.Popup.Props & {
+  portalProps?: CommandDialogPrimitive.Portal.Props;
+}): React.ReactElement {
+  return (
+    <CommandDialogPortal {...portalProps}>
+      <CommandDialogBackdrop />
+      <CommandDialogViewport>
+        <CommandDialogPrimitive.Popup
+          className={cn(
+            "relative row-start-2 flex max-h-105 min-h-0 w-full min-w-0 max-w-xl -translate-y-[calc(1.25rem*var(--nested-dialogs))] scale-[calc(1-0.1*var(--nested-dialogs))] flex-col rounded-2xl border bg-popover not-dark:bg-clip-padding text-popover-foreground opacity-[calc(1-0.1*var(--nested-dialogs))] shadow-lg/5 outline-none transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-2xl)-1px)] before:bg-muted/72 before:shadow-[0_1px_--theme(--color-black/4%)] data-nested:data-ending-style:translate-y-8 data-nested:data-starting-style:translate-y-8 data-nested-dialog-open:origin-top data-ending-style:scale-98 data-starting-style:scale-98 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=scroll-area-viewport]:data-has-overflow-y:pe-1 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+            className,
+          )}
+          data-slot="command-dialog-popup"
+          {...props}
+        >
+          {children}
+        </CommandDialogPrimitive.Popup>
+      </CommandDialogViewport>
+    </CommandDialogPortal>
+  );
+}
+
+export function Command({
+  autoHighlight = "always",
+  keepHighlight = true,
+  ...props
+}: React.ComponentProps<typeof Autocomplete>): React.ReactElement {
+  return (
+    <Autocomplete
+      autoHighlight={autoHighlight}
+      inline
+      keepHighlight={keepHighlight}
+      open
+      {...props}
+    />
+  );
+}
+
+export function CommandInput({
+  className,
+  placeholder = undefined,
+  ...props
+}: React.ComponentProps<typeof AutocompleteInput>): React.ReactElement {
+  return (
+    <div className="px-2.5 py-1.5">
+      <AutocompleteInput
+        autoFocus
+        className={cn(
+          "border-transparent! bg-transparent! shadow-none before:hidden has-focus-visible:ring-0",
+          className,
+        )}
+        placeholder={placeholder}
+        size="lg"
+        startAddon={<SearchIcon />}
+        {...props}
+      />
+    </div>
+  );
+}
+
+export function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompleteList>): React.ReactElement {
+  return (
+    <AutocompleteList
+      className={cn("not-empty:scroll-py-2 not-empty:p-2", className)}
+      data-slot="command-list"
+      {...props}
+    />
+  );
+}
+
+export function CommandEmpty({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompleteEmpty>): React.ReactElement {
+  return (
+    <AutocompleteEmpty
+      className={cn("not-empty:py-6", className)}
+      data-slot="command-empty"
+      {...props}
+    />
+  );
+}
+
+export function CommandPanel({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      className={cn(
+        "relative -mx-px not-has-[+[data-slot=command-footer]]:-mb-px min-h-0 rounded-t-xl not-has-[+[data-slot=command-footer]]:rounded-b-2xl border border-b-0 bg-popover bg-clip-padding shadow-xs/5 [clip-path:inset(0_1px)] not-has-[+[data-slot=command-footer]]:[clip-path:inset(0_1px_1px_1px_round_0_0_calc(var(--radius-2xl)-1px)_calc(var(--radius-2xl)-1px))] before:pointer-events-none before:absolute before:inset-0 before:rounded-t-[calc(var(--radius-xl)-1px)] **:data-[slot=scroll-area-scrollbar]:mt-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompleteGroup>): React.ReactElement {
+  return (
+    <AutocompleteGroup
+      className={className}
+      data-slot="command-group"
+      {...props}
+    />
+  );
+}
+
+export function CommandGroupLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompleteGroupLabel>): React.ReactElement {
+  return (
+    <AutocompleteGroupLabel
+      className={className}
+      data-slot="command-group-label"
+      {...props}
+    />
+  );
+}
+
+export const CommandCollection = AutocompleteCollection;
+
+export function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompleteItem>): React.ReactElement {
+  return (
+    <AutocompleteItem
+      className={cn("py-1.5", className)}
+      data-slot="command-item"
+      {...props}
+    />
+  );
+}
+
+export function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof AutocompleteSeparator>): React.ReactElement {
+  return (
+    <AutocompleteSeparator
+      className={cn("my-2", className)}
+      data-slot="command-separator"
+      {...props}
+    />
+  );
+}
+
+export function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"kbd">): React.ReactElement {
+  return (
+    <kbd
+      className={cn(
+        "ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest",
+        className,
+      )}
+      data-slot="command-shortcut"
+      {...props}
+    />
+  );
+}
+
+export function CommandFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.ReactElement {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-between gap-2 rounded-b-[calc(var(--radius-2xl)-1px)] border-t px-5 py-3 text-muted-foreground text-xs",
+        className,
+      )}
+      data-slot="command-footer"
+      {...props}
+    />
+  );
+}
+
+export { CommandDialogPrimitive };