@cntyclub/ui-react 0.1.0

package/src/components/ui/tag.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { cva } from "class-variance-authority";
+import { CheckIcon, XIcon } from "lucide-react";
+import { createContext, useContext, useState } from "react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type TagSize = "sm" | "md" | "lg";
+type TagSelectionMode = "none" | "single" | "multiple";
+
+// ─── Context ──────────────────────────────────────────────────────────────────
+
+interface TagGroupContextValue {
+  size: TagSize;
+  selectionMode: TagSelectionMode;
+  selectedKeys: ReadonlySet<string>;
+  onItemSelect: (key: string) => void;
+  onItemRemove?: (key: string) => void;
+}
+
+const TagGroupContext = createContext<TagGroupContextValue | null>(null);
+
+// ─── TagGroup ─────────────────────────────────────────────────────────────────
+
+interface TagGroupProps {
+  size?: TagSize;
+  selectionMode?: TagSelectionMode;
+  defaultSelectedKeys?: Iterable<string>;
+  selectedKeys?: Set<string>;
+  onSelectionChange?: (keys: Set<string>) => void;
+  onRemove?: (key: string) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function TagGroup({
+  size = "md",
+  selectionMode = "none",
+  defaultSelectedKeys,
+  selectedKeys: controlledKeys,
+  onSelectionChange,
+  onRemove,
+  className,
+  children,
+}: TagGroupProps) {
+  const [internalKeys, setInternalKeys] = useState<Set<string>>(
+    () => new Set(defaultSelectedKeys),
+  );
+
+  const selectedKeys = controlledKeys ?? internalKeys;
+
+  function handleSelect(key: string) {
+    if (selectionMode === "none") return;
+    let next: Set<string>;
+    if (selectionMode === "single") {
+      next = selectedKeys.has(key) ? new Set() : new Set([key]);
+    } else {
+      next = new Set(selectedKeys);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+    }
+    if (!controlledKeys) setInternalKeys(next);
+    onSelectionChange?.(next);
+  }
+
+  return (
+    <TagGroupContext.Provider
+      value={{
+        size,
+        selectionMode,
+        selectedKeys,
+        onItemSelect: handleSelect,
+        onItemRemove: onRemove,
+      }}
+    >
+      <div
+        className={cn("flex flex-wrap items-center gap-1.5", className)}
+        data-slot="tag-group"
+        role={selectionMode !== "none" ? "group" : undefined}
+      >
+        {children}
+      </div>
+    </TagGroupContext.Provider>
+  );
+}
+
+// ─── Tag ──────────────────────────────────────────────────────────────────────
+
+const tagVariants = cva(
+  [
+    "relative inline-flex items-center rounded-full border font-medium whitespace-nowrap select-none",
+    "outline-none transition-colors",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+  ],
+  {
+    defaultVariants: { size: "md" },
+    variants: {
+      size: {
+        sm: "h-6 gap-1 px-2 text-xs",
+        md: "h-7 gap-1.5 px-2.5 text-sm",
+        lg: "h-8 gap-2 px-3 text-base",
+      },
+    },
+  },
+);
+
+const iconSize = { sm: "size-3", md: "size-3.5", lg: "size-4" } as const;
+const countSize = {
+  sm: "h-4 min-w-4 text-[10px]",
+  md: "h-[18px] min-w-[18px] text-xs",
+  lg: "h-5 min-w-5 text-sm",
+} as const;
+
+interface TagProps extends Omit<React.ComponentProps<"span">, "children"> {
+  /** Unique value used for selection and removal tracking. */
+  value?: string;
+  size?: TagSize;
+  /** Numeric count displayed as a small pill beside the label. */
+  count?: number;
+  /** Called when the remove button is clicked. Renders the X button. */
+  onRemove?: () => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+function Tag({
+  value = "",
+  size: sizeProp,
+  count,
+  onRemove: onRemoveProp,
+  disabled,
+  children,
+  className,
+  ...props
+}: TagProps) {
+  const ctx = useContext(TagGroupContext);
+
+  const size = sizeProp ?? ctx?.size ?? "md";
+  const selectionMode = ctx?.selectionMode ?? "none";
+  const isSelected = Boolean(ctx?.selectedKeys.has(value));
+  const isSelectable = selectionMode !== "none";
+  const handleRemove =
+    onRemoveProp ??
+    (value && ctx?.onItemRemove ? () => ctx.onItemRemove!(value) : undefined);
+
+  return (
+    <span
+      aria-disabled={disabled || undefined}
+      aria-pressed={isSelectable ? isSelected : undefined}
+      className={cn(
+        tagVariants({ size }),
+        "border-input bg-background text-foreground",
+        isSelectable && !disabled && "cursor-pointer hover:bg-accent",
+        isSelected && "border-brand bg-brand/10 text-brand hover:bg-brand/15",
+        disabled && "pointer-events-none opacity-50",
+        className,
+      )}
+      data-disabled={disabled || undefined}
+      data-selected={isSelected || undefined}
+      data-slot="tag"
+      role={isSelectable ? "button" : undefined}
+      tabIndex={isSelectable && !disabled ? 0 : undefined}
+      onClick={
+        isSelectable && !disabled ? () => ctx?.onItemSelect(value) : undefined
+      }
+      onKeyDown={
+        isSelectable && !disabled
+          ? (e) => {
+              if (e.key === " " || e.key === "Enter") {
+                e.preventDefault();
+                ctx?.onItemSelect(value);
+              }
+            }
+          : undefined
+      }
+      {...props}
+    >
+      {isSelected && isSelectable && (
+        <CheckIcon
+          aria-hidden
+          className={cn("shrink-0", iconSize[size])}
+          strokeWidth={2.5}
+        />
+      )}
+      <span>{children}</span>
+      {count !== undefined && (
+        <span
+          className={cn(
+            "inline-flex items-center justify-center rounded-full px-1 font-medium tabular-nums",
+            countSize[size],
+            isSelected
+              ? "bg-brand/20 text-brand"
+              : "bg-muted text-muted-foreground",
+          )}
+          data-slot="tag-count"
+        >
+          {count}
+        </span>
+      )}
+      {handleRemove && (
+        <button
+          aria-label="Remove"
+          className={cn(
+            "-me-0.5 inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full",
+            "text-current opacity-60 outline-none transition-opacity",
+            "hover:opacity-100 focus-visible:ring-1 focus-visible:ring-ring focus-visible:opacity-100",
+            iconSize[size],
+          )}
+          data-slot="tag-remove"
+          onClick={(e) => {
+            e.stopPropagation();
+            handleRemove();
+          }}
+          tabIndex={-1}
+          type="button"
+        >
+          <XIcon aria-hidden className="pointer-events-none size-full" />
+        </button>
+      )}
+    </span>
+  );
+}
+
+export { TagGroup, Tag };
+export type { TagSize, TagSelectionMode, TagGroupProps, TagProps };

package/src/components/ui/target-countdown.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { type Duration, intervalToDuration } from "date-fns";
+import { useEffect, useState } from "react";
+import { useFirstRender } from "../../lib/hooks/use-first-render";
+import useIsTabActive from "../../lib/hooks/use-is-tab-active";
+
+function TargetCountdown({
+  target,
+  children,
+}: {
+  target: Date | number;
+  children: (
+    duration: Duration | null,
+    isFirstRender: boolean,
+  ) => React.ReactNode;
+}) {
+  const [now, setNow] = useState(Date.now());
+  const [start] = useState(() => now);
+  const isTabActive = useIsTabActive();
+
+  useEffect(() => {
+    if (!isTabActive || now >= Number(target)) return;
+    const timeout = setTimeout(
+      () => {
+        setNow(Date.now());
+      },
+      1000 - ((Date.now() - start) % 1000),
+    );
+    return () => clearTimeout(timeout);
+  }, [start, now, isTabActive, target]);
+
+  const isFirstRender = useFirstRender();
+
+  if (isFirstRender || now >= Number(target))
+    return children(null, isFirstRender);
+  return children(
+    intervalToDuration({
+      start: now,
+      end: target,
+    }),
+    isFirstRender,
+  );
+}
+
+export default TargetCountdown;

package/src/components/ui/text-editor.tsx

@@ -0,0 +1,313 @@
+"use client";
+
+import { EditorContent, useEditor } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import Placeholder from "@tiptap/extension-placeholder";
+import TextAlign from "@tiptap/extension-text-align";
+import StarterKit from "@tiptap/starter-kit";
+import type { Editor } from "@tiptap/core";
+import type * as React from "react";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  Italic,
+  List,
+  ListOrdered,
+  Redo2,
+  Strikethrough,
+  Undo2,
+} from "lucide-react";
+
+import { cn } from "../../lib/utils/css";
+import {
+  Tooltip,
+  TooltipPopup,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
+
+// Inject placeholder + list styles once (client only, idempotent)
+if (typeof window !== "undefined") {
+  const CSS_ID = "cc-text-editor";
+  if (!document.getElementById(CSS_ID)) {
+    const s = document.createElement("style");
+    s.id = CSS_ID;
+    s.textContent = [
+      ".cc-text-editor .ProseMirror{outline:none}",
+      ".cc-text-editor .ProseMirror p.is-editor-empty:first-child::before{content:attr(data-placeholder);float:left;color:var(--muted-foreground);pointer-events:none;height:0}",
+      ".cc-text-editor .ProseMirror ul{list-style-type:disc;padding-left:1.5em}",
+      ".cc-text-editor .ProseMirror ol{list-style-type:decimal;padding-left:1.5em}",
+      ".cc-text-editor .ProseMirror li{margin-top:0.15em}",
+      ".cc-text-editor .ProseMirror > * + *{margin-top:0.4em}",
+    ].join("\n");
+    document.head.appendChild(s);
+  }
+}
+
+// ─── Toolbar internals ────────────────────────────────────────────────────────
+
+interface TBtnProps {
+  icon: React.ReactNode;
+  label: string;
+  onClick?: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  compact?: boolean;
+  tooltip?: string;
+}
+
+function TBtn({ icon, label, onClick, isActive, disabled, compact, tooltip }: TBtnProps) {
+  const btnClass = cn(
+    "relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent outline-none transition-[background-color,box-shadow] duration-100",
+    "text-muted-foreground hover:bg-accent hover:text-foreground",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-40",
+    "data-[active]:bg-accent data-[active]:text-foreground",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0",
+    compact ? "size-6 [&_svg]:size-3" : "size-7 [&_svg]:size-3.5",
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger
+          type="button"
+          onClick={onClick}
+          disabled={disabled}
+          aria-label={label}
+          data-active={isActive ? "" : undefined}
+          className={btnClass}
+        >
+          {icon}
+        </TooltipTrigger>
+        <TooltipPopup>{tooltip}</TooltipPopup>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      data-active={isActive ? "" : undefined}
+      className={btnClass}
+    >
+      {icon}
+    </button>
+  );
+}
+
+function TSep() {
+  return <div className="mx-0.5 h-4 w-px shrink-0 bg-border" />;
+}
+
+interface ToolbarButtonsProps {
+  editor: Editor | null;
+  compact?: boolean;
+  withTooltips?: boolean;
+}
+
+function ToolbarButtons({ editor, compact, withTooltips }: ToolbarButtonsProps) {
+  if (!editor) return null;
+  const t = (label: string) => (withTooltips ? label : undefined);
+
+  return (
+    <>
+      <TBtn
+        icon={<Undo2 />}
+        label="Undo"
+        tooltip={t("Undo")}
+        compact={compact}
+        onClick={() => editor.chain().focus().undo().run()}
+        disabled={!editor.can().undo()}
+      />
+      <TBtn
+        icon={<Redo2 />}
+        label="Redo"
+        tooltip={t("Redo")}
+        compact={compact}
+        onClick={() => editor.chain().focus().redo().run()}
+        disabled={!editor.can().redo()}
+      />
+      <TSep />
+      <TBtn
+        icon={<Bold />}
+        label="Bold"
+        tooltip={t("Bold")}
+        compact={compact}
+        isActive={editor.isActive("bold")}
+        onClick={() => editor.chain().focus().toggleBold().run()}
+      />
+      <TBtn
+        icon={<Italic />}
+        label="Italic"
+        tooltip={t("Italic")}
+        compact={compact}
+        isActive={editor.isActive("italic")}
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+      />
+      <TBtn
+        icon={<Strikethrough />}
+        label="Strikethrough"
+        tooltip={t("Strikethrough")}
+        compact={compact}
+        isActive={editor.isActive("strike")}
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+      />
+      <TSep />
+      <TBtn
+        icon={<List />}
+        label="Bullet list"
+        tooltip={t("Bullet list")}
+        compact={compact}
+        isActive={editor.isActive("bulletList")}
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+      />
+      <TBtn
+        icon={<ListOrdered />}
+        label="Ordered list"
+        tooltip={t("Ordered list")}
+        compact={compact}
+        isActive={editor.isActive("orderedList")}
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+      />
+      <TSep />
+      <TBtn
+        icon={<AlignLeft />}
+        label="Align left"
+        tooltip={t("Align left")}
+        compact={compact}
+        isActive={editor.isActive({ textAlign: "left" })}
+        onClick={() => editor.chain().focus().setTextAlign("left").run()}
+      />
+      <TBtn
+        icon={<AlignCenter />}
+        label="Align center"
+        tooltip={t("Align center")}
+        compact={compact}
+        isActive={editor.isActive({ textAlign: "center" })}
+        onClick={() => editor.chain().focus().setTextAlign("center").run()}
+      />
+      <TBtn
+        icon={<AlignRight />}
+        label="Align right"
+        tooltip={t("Align right")}
+        compact={compact}
+        isActive={editor.isActive({ textAlign: "right" })}
+        onClick={() => editor.chain().focus().setTextAlign("right").run()}
+      />
+      <TBtn
+        icon={<AlignJustify />}
+        label="Justify"
+        tooltip={t("Justify")}
+        compact={compact}
+        isActive={editor.isActive({ textAlign: "justify" })}
+        onClick={() => editor.chain().focus().setTextAlign("justify").run()}
+      />
+    </>
+  );
+}
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+export interface TextEditorProps {
+  /** Compact (sm) or standard (md) size */
+  size?: "sm" | "md";
+  /** Placeholder when the editor is empty */
+  placeholder?: string;
+  /** Initial HTML content */
+  content?: string;
+  /** Called with the updated HTML on every change */
+  onChange?: (html: string) => void;
+  /** Show tooltips on every toolbar button */
+  withTooltips?: boolean;
+  /** Replace the fixed toolbar with a selection-triggered floating toolbar */
+  floatingToolbar?: boolean;
+  /** Extra className for the outer wrapper */
+  className?: string;
+}
+
+export function TextEditor({
+  size = "md",
+  placeholder = "Start typing...",
+  content,
+  onChange,
+  withTooltips = false,
+  floatingToolbar = false,
+  className,
+}: TextEditorProps) {
+  const editor = useEditor(
+    {
+      immediatelyRender: false,
+      extensions: [
+        StarterKit,
+        TextAlign.configure({ types: ["heading", "paragraph"] }),
+        Placeholder.configure({
+          placeholder,
+          emptyEditorClass: "is-editor-empty",
+        }),
+      ],
+      content: content ?? "",
+      onUpdate({ editor: e }) {
+        onChange?.(e.getHTML());
+      },
+    },
+  );
+
+  const compact = size === "sm";
+
+  return (
+    <TooltipProvider>
+      <div
+        data-slot="text-editor"
+        className={cn(
+          "cc-text-editor relative overflow-hidden rounded-xl border border-input bg-background",
+          "not-dark:bg-clip-padding shadow-xs/5",
+          className,
+        )}
+      >
+        {/* Fixed toolbar */}
+        {!floatingToolbar && (
+          <div
+            className={cn(
+              "flex flex-wrap items-center gap-0.5 border-b border-input",
+              compact ? "px-1.5 py-1" : "px-2 py-1.5",
+            )}
+          >
+            <ToolbarButtons editor={editor} compact={compact} withTooltips={withTooltips} />
+          </div>
+        )}
+
+        {/* Floating (bubble) toolbar — appears on text selection */}
+        {floatingToolbar && editor && (
+          <BubbleMenu
+            editor={editor}
+            className={cn(
+              "flex items-center gap-0.5 rounded-lg border border-input bg-popover not-dark:bg-clip-padding p-1",
+              "relative shadow-md/8 before:pointer-events-none before:absolute before:inset-0",
+              "before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)]",
+            )}
+          >
+            <ToolbarButtons editor={editor} compact withTooltips={withTooltips} />
+          </BubbleMenu>
+        )}
+
+        {/* Editor content */}
+        <EditorContent
+          editor={editor}
+          className={cn(
+            "text-foreground",
+            compact
+              ? "[&_.ProseMirror]:min-h-24 [&_.ProseMirror]:px-3 [&_.ProseMirror]:py-2 [&_.ProseMirror]:text-sm"
+              : "[&_.ProseMirror]:min-h-36 [&_.ProseMirror]:px-4 [&_.ProseMirror]:py-3 [&_.ProseMirror]:text-sm",
+          )}
+        />
+      </div>
+    </TooltipProvider>
+  );
+}

package/src/components/ui/textarea.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Field as FieldPrimitive } from "@base-ui/react/field";
+import { mergeProps } from "@base-ui/react/merge-props";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+
+type TextareaProps = React.ComponentProps<"textarea"> & {
+  size?: "sm" | "default" | "lg" | number;
+  unstyled?: boolean;
+};
+
+function Textarea({
+  className,
+  size = "default",
+  unstyled = false,
+  ...props
+}: TextareaProps) {
+  return (
+    <span
+      className={
+        cn(
+          !unstyled &&
+            "relative inline-flex w-full rounded-lg border border-input bg-background not-dark:bg-clip-padding text-base text-foreground shadow-xs/5 ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 has-aria-invalid:border-destructive/36 has-focus-visible:border-ring has-disabled:opacity-64 has-[:disabled,:focus-visible,[aria-invalid]]:shadow-none has-focus-visible:ring-[3px] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/6%)] sm:text-sm dark:bg-input/32 dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/6%)]",
+          className,
+        ) || undefined
+      }
+      data-size={size}
+      data-slot="textarea-control"
+    >
+      <FieldPrimitive.Control
+        render={(defaultProps) => (
+          <textarea
+            className={cn(
+              "field-sizing-content min-h-17.5 w-full rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none max-sm:min-h-20.5",
+              size === "sm" &&
+                "min-h-16.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)] max-sm:min-h-19.5",
+              size === "lg" &&
+                "min-h-18.5 py-[calc(--spacing(2)-1px)] max-sm:min-h-21.5",
+            )}
+            data-slot="textarea"
+            {...mergeProps(defaultProps, props)}
+          />
+        )}
+      />
+    </span>
+  );
+}
+
+export { Textarea, type TextareaProps };