@grampro/kit 0.0.0-stage → 2.4.0

package/source/components/tooltip/react/Tooltip.tsx

@@ -0,0 +1,196 @@
+"use client";
+
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useEffect,
+  useId,
+  useState,
+  type CSSProperties,
+  type FocusEvent,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { AnchoredPopover } from "../../shared/react/Popover";
+import {
+  isHoverPointer,
+  nextVisibility,
+  type TooltipTrigger,
+  type TooltipTriggers,
+} from "../core/visibility";
+import type { TooltipAlign, TooltipSide, TooltipSlot } from "../core/types";
+import { cx } from "./props";
+
+export interface TooltipProps {
+  /** The short label. Keep it to a few words. */
+  content: ReactNode;
+  /**
+   * The control it describes: a single element, cloned with a ref, the pointer
+   * and focus handlers, and `aria-describedby`.
+   */
+  children: ReactElement<{ [attribute: string]: unknown }>;
+  /** Default `top`. */
+  side?: TooltipSide;
+  /** Default `center`, which is only meaningful with `side` top or bottom. */
+  align?: TooltipAlign;
+  /** Distance from the control. Default 6. */
+  gap?: number;
+  /** Wait before showing on hover, in ms. Default 400. Focus never waits. */
+  delay?: number;
+  /** Wait before hiding, in ms. Default 120, so crossing a gap does not flicker. */
+  closeDelay?: number;
+  disabled?: boolean;
+  id?: string;
+  className?: string;
+  classNames?: Partial<Record<TooltipSlot, string>>;
+  style?: CSSProperties;
+}
+
+/**
+ * A short label shown on hover or keyboard focus, following the WAI-ARIA
+ * tooltip pattern: it describes the control rather than naming it, Escape
+ * dismisses it, and it never takes focus.
+ *
+ * Touch devices never see it — a tooltip on tap covers the thing that was
+ * tapped — so never put anything here that is not available some other way.
+ */
+export function Tooltip(props: TooltipProps) {
+  const {
+    content,
+    children,
+    side = "top",
+    align = "center",
+    gap = 6,
+    delay = 400,
+    closeDelay = 120,
+    disabled = false,
+    id: idProp,
+    className,
+    classNames,
+    style,
+  } = props;
+
+  const reactId = useId();
+  const id = idProp ?? reactId;
+
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const [triggers, setTriggers] = useState<TooltipTriggers>({ hovered: false, focused: false });
+
+  // What is asking for the tooltip is state, and a delayed change is the effect
+  // that follows from it: React clears the pending timer whenever that state
+  // changes, so there is no timer to track and nothing to cancel by hand.
+  useEffect(() => {
+    const next = nextVisibility(triggers, { open: delay, close: closeDelay });
+    // Anything immediate has already been applied by the handler below.
+    if (next.delay === 0) return;
+    const timer = setTimeout(() => setOpen(next.open), next.delay);
+    return () => clearTimeout(timer);
+  }, [triggers, delay, closeDelay]);
+
+  const set = (trigger: TooltipTrigger, value: boolean) => {
+    const next = { ...triggers, [trigger]: value };
+    setTriggers(next);
+    // Keyboard focus shows it at once. Doing that here rather than in the
+    // effect keeps it in the same render as the event that caused it.
+    const visibility = nextVisibility(next, { open: delay, close: closeDelay });
+    if (visibility.delay === 0) setOpen(visibility.open);
+  };
+
+  const hide = useCallback(() => {
+    setTriggers({ hovered: false, focused: false });
+    setOpen(false);
+  }, []);
+
+  // Escape closes it wherever focus happens to be, which the pattern requires
+  // and which matters most when the tooltip is covering something.
+  useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (event: globalThis.KeyboardEvent) => {
+      if (event.key === "Escape") hide();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, hide]);
+
+  if (!isValidElement(children)) {
+    throw new Error("Tooltip: `children` must be a single React element.");
+  }
+
+  const childProps = children.props as {
+    onPointerEnter?(event: PointerEvent<HTMLElement>): void;
+    onPointerLeave?(event: PointerEvent<HTMLElement>): void;
+    onFocus?(event: FocusEvent<HTMLElement>): void;
+    onBlur?(event: FocusEvent<HTMLElement>): void;
+    onKeyDown?(event: KeyboardEvent<HTMLElement>): void;
+    onClick?(event: unknown): void;
+    "aria-describedby"?: string;
+  };
+
+  const shown = open && !disabled;
+
+  const triggerProps = {
+    // Describes, never names: the control keeps its own accessible name.
+    "aria-describedby": cx(childProps["aria-describedby"], shown ? id : "") || undefined,
+    onPointerEnter(event: PointerEvent<HTMLElement>) {
+      childProps.onPointerEnter?.(event);
+      if (disabled || !isHoverPointer(event.pointerType)) return;
+      // The anchor comes from the event rather than a ref: it is the same
+      // element either way, and it keeps this component out of the business of
+      // cloning a ref onto someone else's element.
+      setAnchor(event.currentTarget);
+      set("hovered", true);
+    },
+    onPointerLeave(event: PointerEvent<HTMLElement>) {
+      childProps.onPointerLeave?.(event);
+      set("hovered", false);
+    },
+    onFocus(event: FocusEvent<HTMLElement>) {
+      childProps.onFocus?.(event);
+      // Only for keyboard focus: clicking a button should not leave a tooltip
+      // hanging over whatever the click just did.
+      if (disabled || !event.target.matches(":focus-visible")) return;
+      setAnchor(event.currentTarget);
+      set("focused", true);
+    },
+    onBlur(event: FocusEvent<HTMLElement>) {
+      childProps.onBlur?.(event);
+      set("focused", false);
+    },
+    onClick(event: unknown) {
+      childProps.onClick?.(event);
+      hide();
+    },
+  };
+
+  return (
+    <>
+      {cloneElement(children, triggerProps)}
+      {shown && anchor && (
+        <AnchoredPopover
+          anchor={anchor}
+          onClose={hide}
+          id={id}
+          role="tooltip"
+          side={side}
+          align={align}
+          gap={gap}
+          autoFocus={false}
+          observeResize="self"
+          // Manual: an `auto` popover closes every other one, so a tooltip on a
+          // control inside a menu would take the menu down with it.
+          mode="manual"
+          className={cx("tt-root", classNames?.root, className)}
+        >
+          {/* The popover element itself is the tooltip; this only draws it. */}
+          <div className={cx("tt-content", classNames?.content)} style={style}>
+            {content}
+          </div>
+        </AnchoredPopover>
+      )}
+    </>
+  );
+}

package/source/components/tooltip/react/props.ts

@@ -0,0 +1,4 @@
+export type { TooltipSlot } from "../core/types";
+
+// Shared with every other component, so class handling cannot drift.
+export { cx } from "../../shared/core/cx";

package/source/components/tooltip/styles.css

@@ -0,0 +1,71 @@
+/*
+ * Tooltip styles.
+ *
+ * Tokens read the shared --gbs-* variables when they are set on an ancestor
+ * (set them on :root to theme every component at once) and fall back to the
+ * same default palette otherwise. Rules are unlayered: they beat a framework
+ * reset on specificity, and lose to anything you pass through `className`.
+ * With Tailwind v4, import this file after the framework and inside its
+ * components layer - see the README.
+ */
+
+.tt-root {
+  /* Inverted against the page, the way a tooltip is expected to read. */
+  --tt-bg: var(--gbs-tooltip-bg, light-dark(#18181b, #f4f4f5));
+  --tt-fg: var(--gbs-tooltip-fg, light-dark(#fafafa, #18181b));
+  --tt-radius: var(--gbs-radius, var(--dg-radius, 8px));
+  --tt-font-size: calc(var(--gbs-font-size, var(--dg-font-size, 13px)) - 1px);
+  --tt-max-width: 240px;
+  --tt-duration: 120ms;
+
+  position: fixed;
+  inset: auto;
+  z-index: 70;
+  width: max-content;
+  max-width: min(var(--tt-max-width), calc(100vw - 16px));
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--tt-radius);
+  background: var(--tt-bg);
+  color: var(--tt-fg);
+  color-scheme: inherit;
+  font-size: var(--tt-font-size);
+  line-height: 1.4;
+  /* It follows the pointer's business, never takes it. */
+  pointer-events: none;
+}
+
+:where(.dark, [data-theme="dark"]) .tt-root {
+  color-scheme: dark;
+}
+:where(.light, [data-theme="light"]) .tt-root {
+  color-scheme: light;
+}
+
+.tt-root:popover-open {
+  animation: tt-in var(--tt-duration) ease;
+}
+@keyframes tt-in {
+  from {
+    opacity: 0;
+    scale: 0.97;
+  }
+}
+
+.tt-content {
+  padding: 5px 8px;
+  text-wrap: pretty;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tt-root:popover-open {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .tt-root {
+    border: 1px solid CanvasText;
+  }
+}

package/source/fallback/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function Fallback(props: any) {
+  const { component } = props;
+  return (
+    <div>
+      <p>Oops {component} failed!!</p>
+      <button>Raise an Issue</button>
+    </div>
+  );
+}

package/source/globalStyle.ts

@@ -0,0 +1,74 @@
+import { getComponentPreset } from "./theme";
+
+const preset = getComponentPreset();
+
+export const primary = {
+  "error-border": "border border-rose-500 focus-within:border-rose-500",
+  "error-primary": `${preset.text.error} mt-1 pl-1`,
+};
+
+export const popUp = {
+  "pop-up-style": `${preset.surface.overlay} w-full absolute overflow-y-auto rounded-lg mt-1 scrollbar z-[90] h-44 text-sm text-slate-700 dark:text-slate-100 animate-fade-down animate-once animate-duration-200`,
+  "pop-up-style-calender": `${preset.surface.overlay} w-full absolute overflow-y-auto rounded-lg mt-1 scrollbar z-[90] h-[370px] text-slate-700 dark:text-slate-100 animate-fade-down animate-once animate-duration-200`,
+};
+
+export const iconClass = {
+  "grey-common": "h-4 w-4 stroke-slate-500 fill-none dark:stroke-slate-300",
+  "error-icon": "h-4 w-4 stroke-rose-500 fill-none dark:stroke-rose-400",
+};
+
+export const inputStyles = {
+  default: `${preset.control} ${preset.radius} ${preset.focusRing} px-3 py-2 text-sm shadow-sm`,
+  error: "border-rose-500 focus-visible:ring-rose-500",
+  otp: `${preset.control} ${preset.radius} ${preset.focusRing} m-1 h-10 w-9 text-center text-sm font-semibold`,
+  passwordToggle: "absolute inset-y-0 right-0 flex items-center pr-2",
+  otpContainer: "otp-container flex items-center gap-1",
+};
+
+export const selectStyle = {
+  "select-button": `${preset.control} ${preset.radius} ${preset.focusRing} flex min-h-10 w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm font-medium shadow-sm`,
+  "filter-button":
+    "mt-1 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-zinc-700 transition-colors hover:bg-zinc-100 hover:text-black dark:text-zinc-300 dark:hover:bg-zinc-900 dark:hover:text-white",
+  "input-parent":
+    "sticky top-0 z-50 flex w-full items-center gap-1 border-b border-zinc-200 bg-white px-1 py-1 text-sm dark:border-zinc-800 dark:bg-zinc-950",
+  "selectedDisplay-Button":
+    "absolute right-8 top-1/2 z-20 flex -translate-y-1/2 items-center rounded-md p-1 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-800",
+};
+
+export const buttonStyles = {
+  base: `${preset.radius} ${preset.focusRing} ${preset.disabled} inline-flex items-center justify-center gap-2 font-medium transition-colors`,
+  sizes: {
+    sm: "h-8 px-3 text-xs",
+    md: "h-10 px-4 text-sm",
+    lg: "h-11 px-5 text-base",
+  },
+  variants: {
+    primary:
+      "bg-black text-white hover:bg-zinc-900 dark:bg-white dark:text-black dark:hover:bg-zinc-100",
+    secondary:
+      "bg-zinc-900 text-white hover:bg-zinc-850 dark:bg-zinc-100 dark:text-black dark:hover:bg-zinc-200",
+    outline:
+      "border border-zinc-300 bg-white text-zinc-900 hover:bg-zinc-50 dark:border-zinc-850 dark:bg-black dark:text-zinc-100 dark:hover:bg-zinc-900",
+    ghost:
+      "text-zinc-700 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-900",
+    danger: "bg-rose-600 text-white hover:bg-rose-700",
+  },
+};
+
+export const cardStyles = {
+  base: `${preset.surface.raised} rounded-lg p-4`,
+  interactive: "transition-shadow hover:shadow-md hover:shadow-zinc-950/10",
+};
+
+export const gridStyles = {
+  container: `${preset.surface.raised} flex flex-col rounded-md overflow-hidden dark:text-white`,
+  toolbar: `flex bg-white dark:bg-black justify-end space-x-2 px-4 py-3 border-b border-zinc-200 dark:border-zinc-900`,
+  pagination: `w-full flex flex-wrap justify-between items-center text-xs px-4 py-3 bg-white dark:bg-black gap-2 md:gap-4 border-t border-zinc-200 dark:border-zinc-900`,
+  tableHeader: `bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100 font-bold border-b border-zinc-200 dark:border-zinc-900 px-4 py-3 text-left text-xs uppercase tracking-wider`,
+  button: `border border-zinc-300 dark:border-zinc-800 bg-white dark:bg-zinc-950 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 rounded px-3 py-1.5 text-xs font-semibold cursor-pointer transition`,
+  rowEven:
+    "bg-white dark:bg-black hover:bg-zinc-50/50 dark:hover:bg-zinc-900/60 transition-colors text-black dark:text-white",
+  rowOdd:
+    "bg-zinc-50/20 dark:bg-zinc-950/20 hover:bg-zinc-50/50 dark:hover:bg-zinc-900/60 transition-colors",
+  rowSelected: "bg-zinc-100 dark:bg-zinc-900 font-semibold",
+};

package/source/hooks/SelectionHooks/type.ts

@@ -0,0 +1,4 @@
+export type ItemsProps = {
+  value: string;
+  label: string;
+};

package/source/hooks/SelectionHooks/useClickOutside.ts

@@ -0,0 +1,22 @@
+import { useCallback, useEffect } from "react";
+
+export const useClickOutside = <T extends HTMLElement>(
+  ref: React.RefObject<T | null>,
+  callback: () => void
+) => {
+  const handleClickOutside = useCallback(
+    (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        callback();
+      }
+    },
+    [callback, ref]
+  );
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleClickOutside]);
+};

package/source/hooks/SelectionHooks/useMultiSelectState.ts

@@ -0,0 +1,64 @@
+import { useState, useCallback } from "react";
+import { useSelectState } from "./useSelectState";
+import { useSelectData } from "./useSelectData";
+import type { ItemsProps } from "./type";
+
+export const useMultiSelectState = (
+  items: ItemsProps[] | string | undefined,
+  selectedItems: string[] = [],
+  lazy = false,
+  onSelect?: (selectedItems: string[]) => void
+) => {
+  const [selected, setSelected] = useState<string[]>(selectedItems);
+
+  const {
+    showPopover,
+    setShowPopover,
+    workingDataSource,
+    setWorkingDataSource,
+    searchTerm,
+    setSearchTerm,
+    togglePopover,
+  } = useSelectState();
+
+  const { filteredItems, getSelectItems } = useSelectData(
+    items,
+    setWorkingDataSource,
+    workingDataSource,
+    searchTerm,
+    lazy,
+    undefined
+  );
+
+  const handleSelect = useCallback(
+    (value: string) => {
+      const newSelected = selected.includes(value)
+        ? selected.filter((item) => item !== value)
+        : [...selected, value];
+      setSelected(newSelected);
+      onSelect?.(newSelected);
+    },
+    [selected, onSelect]
+  );
+
+  const clearSelected = useCallback(() => {
+    setSelected([]);
+    setShowPopover(false);
+    setSearchTerm("");
+    onSelect?.([]);
+  }, [setShowPopover, setSearchTerm, onSelect]);
+
+  return {
+    showPopover,
+    setShowPopover,
+    workingDataSource,
+    filteredItems,
+    selected,
+    searchTerm,
+    setSearchTerm,
+    handleSelect,
+    togglePopover,
+    clearSelected,
+    getSelectItems,
+  };
+};

package/source/hooks/SelectionHooks/useSelectData.ts

@@ -0,0 +1,58 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { getSourceData } from "../../utils";
+import type { ItemsProps } from "./type";
+
+export const useSelectData = (
+  items: ItemsProps[] | string | undefined,
+  setWorkingDataSource: (data: ItemsProps[]) => void,
+  workingDataSource: ItemsProps[],
+  searchTerm: string,
+  lazy: boolean,
+  selectedItem?: string
+) => {
+  const getSelectItems = useCallback(
+    async (itemsApi: string) => {
+      const itemsData = await getSourceData(itemsApi);
+      setWorkingDataSource(itemsData.sourcedata);
+    },
+    [setWorkingDataSource]
+  );
+
+  useEffect(() => {
+    if (!items) {
+      setWorkingDataSource([]);
+      return;
+    }
+
+    if (Array.isArray(items)) {
+      setWorkingDataSource(items);
+    } else if (typeof items === "string") {
+      getSelectItems(items);
+    }
+  }, [items, getSelectItems, setWorkingDataSource]);
+
+  const selectedDisplay = useMemo(() => {
+    if (selectedItem && workingDataSource.length > 0) {
+      const selected = workingDataSource.find(
+        (item) => item.value === selectedItem
+      );
+      return selected ? selected.label : "";
+    }
+    return "";
+  }, [selectedItem, workingDataSource]);
+
+  const filteredItems = useMemo(() => {
+    if (!searchTerm || lazy) return workingDataSource;
+    return workingDataSource.filter((item) =>
+      Object.values(item).some((val) =>
+        val.toString().toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    );
+  }, [workingDataSource, searchTerm, lazy]);
+
+  return {
+    getSelectItems,
+    selectedDisplay,
+    filteredItems,
+  };
+};

package/source/hooks/SelectionHooks/useSelectState.ts

@@ -0,0 +1,36 @@
+import { useState, useCallback } from "react";
+import type { ItemsProps } from "./type";
+
+export const useSelectState = (initialSelectedItem?: string) => {
+  const [showPopover, setShowPopover] = useState(false);
+  const [workingDataSource, setWorkingDataSource] = useState<ItemsProps[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedItem, setSelectedItem] = useState<string | undefined>(
+    initialSelectedItem
+  );
+
+  const togglePopover = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowPopover((prev) => !prev);
+  }, []);
+
+  const clearSelected = useCallback(() => {
+    setSelectedItem(undefined);
+    setShowPopover(false);
+    setSearchTerm("");
+    return "";
+  }, []);
+
+  return {
+    showPopover,
+    setShowPopover,
+    workingDataSource,
+    setWorkingDataSource,
+    searchTerm,
+    setSearchTerm,
+    selectedItem,
+    setSelectedItem,
+    togglePopover,
+    clearSelected,
+  };
+};

package/source/icon/Icon.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+
+type SvgElement = {
+  type: "path" | "circle" | "polyline" | "rect" | "line";
+  key: string;
+  d?: string;
+  cx?: number;
+  cy?: number;
+  r?: number;
+  points?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  rx?: number;
+  ry?: number;
+  x1?: number;
+  y1?: number;
+  x2?: number;
+  y2?: number;
+};
+
+type IconProps = {
+  svgClass?: string;
+  elements?: SvgElement[];
+  dimensions?: any;
+};
+
+export default function Icon({
+  svgClass = "stroke-none fill-none",
+  elements = [
+    { type: "path", d: "m11 17-5-5 5-5", key: "13zhaf" },
+    { type: "path", d: "m18 17-5-5 5-5", key: "h8a8et" },
+    { type: "circle", cx: 12, cy: 12, r: 5, key: "circle1" },
+    { type: "polyline", points: "20 6 12 13 4 6", key: "polyline1" },
+    {
+      type: "rect",
+      x: 4,
+      y: 4,
+      width: 16,
+      height: 16,
+      key: "rect1",
+      rx: 2,
+      ry: 2,
+    },
+    { type: "line", x1: 0, y1: 0, x2: 24, y2: 24, key: "line1" }, // Example line
+  ],
+  dimensions = { width: "24", height: "24" },
+}: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={dimensions.width}
+      height={dimensions.height}
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={svgClass}
+    >
+      {elements.map((element) => {
+        if (element.type === "path") {
+          return <path d={element.d} key={element.key} />;
+        } else if (element.type === "circle") {
+          return (
+            <circle
+              cx={element.cx}
+              cy={element.cy}
+              r={element.r}
+              key={element.key}
+            />
+          );
+        } else if (element.type === "polyline") {
+          return <polyline points={element.points} key={element.key} />;
+        } else if (element.type === "rect") {
+          return (
+            <rect
+              x={element.x}
+              y={element.y}
+              width={element.width}
+              height={element.height}
+              rx={element.rx}
+              ry={element.ry}
+              key={element.key}
+            />
+          );
+        } else if (element.type === "line") {
+          return (
+            <line
+              x1={element.x1}
+              y1={element.y1}
+              x2={element.x2}
+              y2={element.y2}
+              key={element.key}
+            />
+          );
+        }
+        return null;
+      })}
+    </svg>
+  );
+}