@epoch32/visage 0.0.0-stage → 0.0.0

package/src/ui/popover.tsx

@@ -0,0 +1,249 @@
+import { Portal } from "../dom/control-flow";
+import type { Child } from "../dom/render";
+import { onCleanup, type ReadonlySignal } from "../signals";
+import { createContext, useContext } from "../signals/context";
+import { createControllableSignal, createId, onClickOutside } from "./utils";
+
+export interface PopoverContextValue {
+  open: ReadonlySignal<boolean>;
+  setOpen: (open: boolean) => void;
+  triggerRef: { current: HTMLElement | null };
+  contentRef: { current: HTMLElement | null };
+  contentId: string;
+}
+
+export const PopoverContext = createContext<PopoverContextValue | null>(null);
+
+export function usePopoverContext(): PopoverContextValue | null {
+  return useContext(PopoverContext);
+}
+
+export interface PopoverProps {
+  open?: () => boolean | undefined;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: Child | (() => Child);
+  content?: Child | (() => Child);
+  triggerClass?: any;
+  contentClass?: any;
+  portalled?: boolean;
+  children?: Child | (() => Child);
+}
+
+export function PopoverRoot(props: PopoverProps): Child {
+  const [open, setOpen] = createControllableSignal<boolean>({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange
+  });
+
+  const triggerRef: { current: HTMLElement | null } = { current: null };
+  const contentRef: { current: HTMLElement | null } = { current: null };
+  const contentId = createId("popover-content");
+
+  const ctx: PopoverContextValue = {
+    open,
+    setOpen,
+    triggerRef,
+    contentRef,
+    contentId
+  };
+
+  if (props.trigger !== undefined || props.content !== undefined) {
+    return PopoverContext.Provider({
+      value: ctx,
+      children: () => (
+        <>
+          {props.trigger ? (
+            <PopoverTrigger as="span" class={props.triggerClass}>
+              {typeof props.trigger === "function" ? props.trigger() : props.trigger}
+            </PopoverTrigger>
+          ) : null}
+          <PopoverContent portalled={props.portalled} class={props.contentClass}>
+            {typeof props.content === "function" ? props.content() : props.content}
+            {typeof props.children === "function" ? props.children() : props.children}
+          </PopoverContent>
+        </>
+      )
+    });
+  }
+
+  return PopoverContext.Provider({
+    value: ctx,
+    children: props.children
+  });
+}
+
+export interface PopoverTriggerProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  onClick?: (e: MouseEvent) => void;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function PopoverTrigger(props: PopoverTriggerProps): Child {
+  const ctx = useContext(PopoverContext);
+
+  const handleClick = (e: MouseEvent) => {
+    if (props.onClick) props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(!ctx.open());
+    }
+  };
+
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+
+  return (
+    <Tag
+      ref={(el: HTMLElement | null) => {
+        if (ctx) ctx.triggerRef.current = el;
+      }}
+      type={Tag === "button" ? "button" : undefined}
+      aria-haspopup="dialog"
+      aria-expanded={() => ctx?.open() ?? false}
+      aria-controls={ctx?.contentId}
+      data-state={() => (ctx?.open() ? "open" : "closed")}
+      class={className}
+      style={style}
+      onClick={handleClick}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export interface PopoverPortalProps {
+  mount?: HTMLElement | null;
+  children: Child | (() => Child);
+}
+
+export function PopoverPortal(props: PopoverPortalProps): Child {
+  return <Portal mount={props.mount}>{props.children}</Portal>;
+}
+
+export interface PopoverContentProps {
+  as?: string;
+  portalled?: boolean;
+  mount?: HTMLElement | null;
+  class?: any;
+  style?: any;
+  onKeyDown?: (e: KeyboardEvent) => void;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function PopoverContent(props: PopoverContentProps): Child {
+  const ctx = useContext(PopoverContext);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (props.onKeyDown) props.onKeyDown(e);
+    if (e.defaultPrevented) return;
+
+    if (e.key === "Escape" && ctx) {
+      ctx.setOpen(false);
+      ctx.triggerRef.current?.focus();
+      e.stopPropagation();
+    }
+  };
+
+  const handleClick = (e: MouseEvent) => {
+    if (props.onClick) props.onClick(e);
+    if (e.defaultPrevented) return;
+    const target = e.target as HTMLElement | null;
+    if (target?.closest("[data-popover-close]")) {
+      ctx?.setOpen(false);
+    }
+  };
+
+  const {
+    as: Tag = "div",
+    children,
+    onKeyDown,
+    onClick: _onClick,
+    class: className,
+    style,
+    portalled = true,
+    mount,
+    ...rest
+  } = props;
+
+  const content = (
+    <Tag
+      ref={(el: HTMLElement | null) => {
+        if (ctx) {
+          ctx.contentRef.current = el;
+          if (el) {
+            const cleanup = onClickOutside([ctx.triggerRef.current, el], () => {
+              if (ctx.open()) {
+                ctx.setOpen(false);
+              }
+            });
+            onCleanup(cleanup);
+          }
+        }
+      }}
+      id={ctx?.contentId}
+      role="dialog"
+      data-state={() => (ctx?.open() ? "open" : "closed")}
+      class={className}
+      style={() => ({
+        display: ctx?.open() ? undefined : "none",
+        ...style
+      })}
+      onKeyDown={handleKeyDown}
+      onClick={handleClick}
+      tabIndex={-1}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+
+  return portalled ? <Portal mount={mount}>{content}</Portal> : content;
+}
+
+export interface PopoverCloseProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  onClick?: (e: MouseEvent) => void;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function PopoverClose(props: PopoverCloseProps): Child {
+  const ctx = useContext(PopoverContext);
+
+  const handleClick = (e: MouseEvent) => {
+    if (props.onClick) props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setOpen(false);
+    }
+  };
+
+  const { as: Tag = "button", children, onClick, class: className, style, ...rest } = props;
+
+  return (
+    <Tag
+      type={Tag === "button" ? "button" : undefined}
+      data-popover-close=""
+      class={className}
+      style={style}
+      onClick={handleClick}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export const Popover = Object.assign(PopoverRoot, {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  Portal: PopoverPortal,
+  Content: PopoverContent,
+  Close: PopoverClose
+});

package/src/ui/switch.tsx

@@ -0,0 +1,114 @@
+import type { Child } from "../dom/render";
+import { createControllableSignal } from "./utils";
+
+export interface SwitchProps {
+  checked?: () => boolean | undefined;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean | (() => boolean);
+  required?: boolean;
+  name?: string;
+  value?: string;
+  thumbClass?: any;
+  thumbStyle?: any;
+  as?: string;
+  class?: any;
+  style?: any;
+  children?: Child | (() => Child);
+  onClick?: (e: MouseEvent) => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
+  [key: string]: any;
+}
+
+export function SwitchRoot(props: SwitchProps): Child {
+  const [checked, setChecked] = createControllableSignal<boolean>({
+    value: props.checked,
+    defaultValue: props.defaultChecked ?? false,
+    onChange: props.onCheckedChange
+  });
+
+  const toggle = () => {
+    const isDisabled =
+      typeof props.disabled === "function"
+        ? (props.disabled as () => boolean)()
+        : Boolean(props.disabled);
+    if (isDisabled) return;
+    setChecked(!checked());
+  };
+
+  const handleClick = (e: MouseEvent) => {
+    if (props.onClick) props.onClick(e);
+    if (!e.defaultPrevented) {
+      toggle();
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (props.onKeyDown) props.onKeyDown(e);
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggle();
+    }
+  };
+
+  const {
+    checked: _c,
+    defaultChecked: _dc,
+    onCheckedChange: _occ,
+    disabled,
+    required,
+    name,
+    value,
+    thumbClass,
+    thumbStyle,
+    as: Tag = "button",
+    children,
+    onClick,
+    onKeyDown,
+    class: className,
+    style,
+    ...rest
+  } = props;
+
+  return (
+    <Tag
+      type={Tag === "button" ? "button" : undefined}
+      role="switch"
+      aria-checked={checked}
+      data-state={() => (checked() ? "checked" : "unchecked")}
+      disabled={disabled}
+      class={className}
+      style={style}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      {...rest}
+    >
+      {children !== undefined ? (
+        typeof children === "function" ? (
+          children()
+        ) : (
+          children
+        )
+      ) : (
+        <SwitchThumb class={thumbClass} style={thumbStyle} />
+      )}
+    </Tag>
+  );
+}
+
+export interface SwitchThumbProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  [key: string]: any;
+}
+
+export function SwitchThumb(props: SwitchThumbProps): Child {
+  const { as: Tag = "span", class: className, style, ...rest } = props;
+  return <Tag class={className} style={style} {...rest} />;
+}
+
+export const Switch = Object.assign(SwitchRoot, {
+  Root: SwitchRoot,
+  Thumb: SwitchThumb
+});

package/src/ui/tabs.tsx

@@ -0,0 +1,297 @@
+import { Show } from "../dom/control-flow";
+import type { Child } from "../dom/render";
+import type { ReadonlySignal } from "../signals";
+import { createContext, useContext } from "../signals/context";
+import { createControllableSignal, createId } from "./utils";
+
+export interface TabsContextValue {
+  value: ReadonlySignal<string>;
+  setValue: (value: string) => void;
+  orientation: "horizontal" | "vertical";
+  activationMode: "automatic" | "manual";
+  baseId: string;
+}
+
+export const TabsContext = createContext<TabsContextValue | null>(null);
+
+export function useTabsContext(): TabsContextValue | null {
+  return useContext(TabsContext);
+}
+
+export interface TabItem {
+  value: string;
+  label: Child | (() => Child);
+  icon?: Child | (() => Child);
+  content?: Child | (() => Child);
+  disabled?: boolean | (() => boolean);
+}
+
+export interface TabsProps {
+  value?: () => string | undefined;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  orientation?: "horizontal" | "vertical";
+  activationMode?: "automatic" | "manual";
+  items?: TabItem[];
+  listClass?: any;
+  triggerClass?: any;
+  contentClass?: any;
+  class?: any;
+  style?: any;
+  as?: string;
+  children?: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function TabsRoot(props: TabsProps): Child {
+  const [value, setValue] = createControllableSignal<string>({
+    value: props.value,
+    defaultValue:
+      props.defaultValue ?? (props.items && props.items.length > 0 ? props.items[0]?.value : ""),
+    onChange: props.onValueChange
+  });
+
+  const baseId = createId("tabs");
+  const orientation = props.orientation ?? "horizontal";
+  const activationMode = props.activationMode ?? "automatic";
+
+  const ctx: TabsContextValue = {
+    value,
+    setValue,
+    orientation,
+    activationMode,
+    baseId
+  };
+
+  const {
+    as: Tag = "div",
+    value: _v,
+    defaultValue: _dv,
+    onValueChange: _ovc,
+    orientation: _ori,
+    activationMode: _am,
+    items,
+    listClass,
+    triggerClass,
+    contentClass,
+    children,
+    class: className,
+    style,
+    ...rest
+  } = props;
+
+  return TabsContext.Provider({
+    value: ctx,
+    children: () => (
+      <Tag data-orientation={orientation} class={className} style={style} {...rest}>
+        {items ? (
+          <>
+            <TabsList class={listClass}>
+              {items.map((item) => (
+                <TabsTrigger value={item.value} disabled={item.disabled} class={triggerClass}>
+                  {item.icon ? (
+                    <span class="tab-icon" style={{ display: "inline-flex", alignItems: "center" }}>
+                      {typeof item.icon === "function" ? item.icon() : item.icon}
+                    </span>
+                  ) : null}
+                  {typeof item.label === "function" ? item.label() : item.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+            {items.map((item) => (
+              <TabsContent value={item.value} class={contentClass}>
+                {typeof item.content === "function" ? item.content() : item.content}
+              </TabsContent>
+            ))}
+          </>
+        ) : null}
+        {typeof children === "function" ? children() : children}
+      </Tag>
+    )
+  });
+}
+
+export interface TabsListProps {
+  as?: string;
+  class?: any;
+  style?: any;
+  onKeyDown?: (e: KeyboardEvent) => void;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function TabsList(props: TabsListProps): Child {
+  const ctx = useContext(TabsContext);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (props.onKeyDown) props.onKeyDown(e);
+    if (e.defaultPrevented) return;
+
+    const target = e.target as HTMLElement | null;
+    if (target?.getAttribute("role") !== "tab") return;
+
+    const list = target.closest('[role="tablist"]');
+    if (!list) return;
+
+    const tabs = Array.from(list.querySelectorAll<HTMLElement>('[role="tab"]:not([disabled])'));
+    const index = tabs.indexOf(target);
+    if (index === -1) return;
+
+    let nextIndex = index;
+    const isHorizontal = (ctx?.orientation ?? "horizontal") === "horizontal";
+
+    const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+    const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+
+    if (e.key === prevKey) {
+      nextIndex = index === 0 ? tabs.length - 1 : index - 1;
+      e.preventDefault();
+    } else if (e.key === nextKey) {
+      nextIndex = index === tabs.length - 1 ? 0 : index + 1;
+      e.preventDefault();
+    } else if (e.key === "Home") {
+      nextIndex = 0;
+      e.preventDefault();
+    } else if (e.key === "End") {
+      nextIndex = tabs.length - 1;
+      e.preventDefault();
+    }
+
+    if (nextIndex !== index) {
+      const nextTab = tabs[nextIndex]!;
+      nextTab.focus();
+      if (ctx?.activationMode === "automatic") {
+        const val = nextTab.getAttribute("data-value");
+        if (val) ctx.setValue(val);
+      }
+    }
+  };
+
+  const { as: Tag = "div", children, onKeyDown, class: className, style, ...rest } = props;
+
+  return (
+    <Tag
+      role="tablist"
+      aria-orientation={ctx?.orientation ?? "horizontal"}
+      class={className}
+      style={style}
+      onKeyDown={handleKeyDown}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export interface TabsTriggerProps {
+  value: string;
+  disabled?: boolean | (() => boolean);
+  as?: string;
+  class?: any;
+  style?: any;
+  onClick?: (e: MouseEvent) => void;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function TabsTrigger(props: TabsTriggerProps): Child {
+  const ctx = useContext(TabsContext);
+  const isSelected = () => (ctx ? ctx.value() === props.value : false);
+
+  const handleClick = (e: MouseEvent) => {
+    if (props.onClick) props.onClick(e);
+    if (!e.defaultPrevented && ctx) {
+      ctx.setValue(props.value);
+    }
+  };
+
+  const {
+    value,
+    disabled,
+    as: Tag = "button",
+    children,
+    onClick,
+    class: className,
+    style,
+    ...rest
+  } = props;
+
+  return (
+    <Tag
+      id={ctx ? `${ctx.baseId}-trigger-${value}` : undefined}
+      type={Tag === "button" ? "button" : undefined}
+      role="tab"
+      aria-selected={isSelected}
+      aria-controls={ctx ? `${ctx.baseId}-panel-${value}` : undefined}
+      data-state={() => (isSelected() ? "active" : "inactive")}
+      data-value={value}
+      tabIndex={() => (isSelected() ? 0 : -1)}
+      disabled={disabled}
+      class={className}
+      style={style}
+      onClick={handleClick}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export interface TabsContentProps {
+  value: string;
+  forceMount?: boolean;
+  as?: string;
+  class?: any;
+  style?: any;
+  children: Child | (() => Child);
+  [key: string]: any;
+}
+
+export function TabsContent(props: TabsContentProps): Child {
+  const ctx = useContext(TabsContext);
+  const isSelected = () => (ctx ? ctx.value() === props.value : false);
+
+  const { value, forceMount, as: Tag = "div", children, class: className, style, ...rest } = props;
+
+  if (forceMount) {
+    return (
+      <Tag
+        id={ctx ? `${ctx.baseId}-panel-${value}` : undefined}
+        role="tabpanel"
+        aria-labelledby={ctx ? `${ctx.baseId}-trigger-${value}` : undefined}
+        data-state={() => (isSelected() ? "active" : "inactive")}
+        hidden={() => !isSelected()}
+        tabIndex={0}
+        class={className}
+        style={style}
+        {...rest}
+      >
+        {children}
+      </Tag>
+    );
+  }
+
+  return (
+    <Show when={isSelected}>
+      <Tag
+        id={ctx ? `${ctx.baseId}-panel-${value}` : undefined}
+        role="tabpanel"
+        aria-labelledby={ctx ? `${ctx.baseId}-trigger-${value}` : undefined}
+        data-state="active"
+        tabIndex={0}
+        class={className}
+        style={style}
+        {...rest}
+      >
+        {children}
+      </Tag>
+    </Show>
+  );
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  Root: TabsRoot,
+  List: TabsList,
+  Trigger: TabsTrigger,
+  Content: TabsContent
+});