@mohasinac/appkit 4.9.5 → 4.11.0

package/dist/react/hooks/useVisibleItems.d.ts

@@ -1,37 +0,0 @@
-export interface UseVisibleItemsOptions {
-    /** Total number of items */
-    total: number;
-    /** Minimum width of each item in pixels */
-    minItemWidth: number;
-    /** Width reserved for each scroll arrow button (default: 36) */
-    arrowWidth?: number;
-    /** Gap between items in pixels (default: 8) */
-    gap?: number;
-}
-export interface UseVisibleItemsResult {
-    /** Attach to the scroll container element */
-    containerRef: React.RefObject<HTMLElement | null>;
-    /** Number of items that fit in the current container width */
-    visibleCount: number;
-    /** Whether any items are hidden (arrows should be shown) */
-    hasOverflow: boolean;
-    /** Index of the first visible item */
-    scrollOffset: number;
-    setScrollOffset: React.Dispatch<React.SetStateAction<number>>;
-    /** Scroll left by one page */
-    scrollLeft: () => void;
-    /** Scroll right by one page */
-    scrollRight: () => void;
-    canScrollLeft: boolean;
-    canScrollRight: boolean;
-}
-/**
- * `useVisibleItems` — compute how many items fit in a container, handling
- * arrow button reservations. Powers `HorizontalScroller` and `TabStrip`.
- *
- * **Formula** (when overflow exists):
- * `visible = floor((containerWidth - 2 × (arrowWidth + gap) + gap) / (minItemWidth + gap))`
- *
- * When all items fit without arrows, no arrows are shown.
- */
-export declare function useVisibleItems({ total, minItemWidth, arrowWidth, gap, }: UseVisibleItemsOptions): UseVisibleItemsResult;

package/dist/react/hooks/useVisibleItems.js

@@ -1,59 +0,0 @@
-"use client";
-// appkit/src/react/hooks/useVisibleItems.ts
-import { useRef, useState, useEffect, useCallback } from "react";
-/**
- * `useVisibleItems` — compute how many items fit in a container, handling
- * arrow button reservations. Powers `HorizontalScroller` and `TabStrip`.
- *
- * **Formula** (when overflow exists):
- * `visible = floor((containerWidth - 2 × (arrowWidth + gap) + gap) / (minItemWidth + gap))`
- *
- * When all items fit without arrows, no arrows are shown.
- */
-export function useVisibleItems({ total, minItemWidth, arrowWidth = 36, gap = 8, }) {
-    const containerRef = useRef(null);
-    const [visibleCount, setVisibleCount] = useState(total);
-    const [scrollOffset, setScrollOffset] = useState(0);
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el)
-            return;
-        const compute = (width) => {
-            // Check if all items fit without scrolling
-            const totalItemsWidth = total * minItemWidth + Math.max(0, total - 1) * gap;
-            if (totalItemsWidth <= width) {
-                setVisibleCount(total);
-                return;
-            }
-            // Reserve space for both arrows
-            const usable = width - 2 * (arrowWidth + gap);
-            const raw = Math.floor((usable + gap) / (minItemWidth + gap));
-            setVisibleCount(Math.max(1, raw));
-        };
-        const ro = new ResizeObserver(([entry]) => {
-            if (entry)
-                compute(entry.contentRect.width);
-        });
-        ro.observe(el);
-        compute(el.getBoundingClientRect().width);
-        return () => ro.disconnect();
-    }, [total, minItemWidth, arrowWidth, gap]);
-    // Clamp scroll offset when visibleCount or total changes
-    useEffect(() => {
-        setScrollOffset((o) => Math.min(o, Math.max(0, total - visibleCount)));
-    }, [visibleCount, total]);
-    const hasOverflow = visibleCount < total;
-    const scrollLeft = useCallback(() => setScrollOffset((o) => Math.max(0, o - visibleCount)), [visibleCount]);
-    const scrollRight = useCallback(() => setScrollOffset((o) => Math.min(total - visibleCount, o + visibleCount)), [visibleCount, total]);
-    return {
-        containerRef,
-        visibleCount,
-        hasOverflow,
-        scrollOffset,
-        setScrollOffset,
-        scrollLeft,
-        scrollRight,
-        canScrollLeft: scrollOffset > 0,
-        canScrollRight: scrollOffset + visibleCount < total,
-    };
-}

package/dist/ui/components/TabStrip.d.ts

@@ -1,34 +0,0 @@
-import React from "react";
-export interface TabStripTab {
-    key: string;
-    label: string;
-    badge?: number;
-    disabled?: boolean;
-}
-export interface TabStripProps {
-    tabs: TabStripTab[];
-    activeKey: string;
-    onChange: (key: string) => void;
-    /** Minimum width per tab in pixels (default: FLUID_GRID_MIN_WIDTHS.tabItem = 100) */
-    minTabWidth?: number;
-    className?: string;
-}
-/**
- * `TabStrip` — a horizontally scrollable tab bar that shows as many tabs as
- * fit the container width. Arrow buttons appear automatically when tabs overflow.
- * The active tab is always scrolled into the visible window.
- *
- * @example
- * ```tsx
- * <TabStrip
- * tabs={[
- * { key: "all", label: "All" },
- * { key: "active", label: "Active", badge: 3 },
- * { key: "archived", label: "Archived", disabled: true },
- * ]}
- * activeKey={activeTab}
- * onChange={setActiveTab}
- * />
- * ```
- */
-export declare function TabStrip({ tabs, activeKey, onChange, minTabWidth, className, }: TabStripProps): React.JSX.Element;

package/dist/ui/components/TabStrip.js

@@ -1,56 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// appkit/src/ui/components/TabStrip.tsx
-import { useEffect } from "react";
-import { Span } from "./Typography";
-import { useVisibleItems } from "../../react/hooks/useVisibleItems";
-import { FLUID_GRID_MIN_WIDTHS } from "../../tokens";
-/**
- * `TabStrip` — a horizontally scrollable tab bar that shows as many tabs as
- * fit the container width. Arrow buttons appear automatically when tabs overflow.
- * The active tab is always scrolled into the visible window.
- *
- * @example
- * ```tsx
- * <TabStrip
- * tabs={[
- * { key: "all", label: "All" },
- * { key: "active", label: "Active", badge: 3 },
- * { key: "archived", label: "Archived", disabled: true },
- * ]}
- * activeKey={activeTab}
- * onChange={setActiveTab}
- * />
- * ```
- */
-export function TabStrip({ tabs, activeKey, onChange, minTabWidth = FLUID_GRID_MIN_WIDTHS.tabItem, className, }) {
-    const { containerRef, visibleCount, hasOverflow, scrollLeft, scrollRight, setScrollOffset, scrollOffset, canScrollLeft, canScrollRight, } = useVisibleItems({
-        total: tabs.length,
-        minItemWidth: minTabWidth,
-        gap: 0,
-    });
-    // Keep active tab scrolled into the visible window
-    useEffect(() => {
-        const idx = tabs.findIndex((t) => t.key === activeKey);
-        if (idx < 0)
-            return;
-        if (idx < scrollOffset) {
-            setScrollOffset(idx);
-        }
-        else if (idx >= scrollOffset + visibleCount) {
-            setScrollOffset(idx - visibleCount + 1);
-        }
-    }, [activeKey, scrollOffset, visibleCount, tabs, setScrollOffset]);
-    const visible = tabs.slice(scrollOffset, scrollOffset + visibleCount);
-    return (_jsxs("div", { ref: containerRef, role: "tablist", className: ["appkit-tab-strip", className ?? ""].join(" ").trim(), children: [hasOverflow && (_jsx("button", { type: "button", onClick: scrollLeft, disabled: !canScrollLeft, "aria-label": "Previous tabs", className: "appkit-tab-strip__arrow", children: "\u2039" })), visible.map((tab) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": tab.key === activeKey, "aria-disabled": tab.disabled, onClick: () => !tab.disabled && onChange(tab.key), style: { minWidth: `${minTabWidth}px` }, className: [
-                    "appkit-tab-strip__tab",
-                    tab.key === activeKey
-                        ? "appkit-tab-strip__tab--active"
-                        : "appkit-tab-strip__tab--inactive",
-                    tab.disabled
-                        ? "appkit-tab-strip__tab--disabled"
-                        : "appkit-tab-strip__tab--enabled",
-                ]
-                    .join(" ")
-                    .trim(), children: [tab.label, tab.badge != null && tab.badge > 0 && (_jsx(Span, { className: "appkit-tab-strip__badge", children: tab.badge > 99 ? "99+" : tab.badge }))] }, tab.key))), hasOverflow && (_jsx("button", { type: "button", onClick: scrollRight, disabled: !canScrollRight, "aria-label": "Next tabs", className: "appkit-tab-strip__arrow", children: "\u203A" }))] }));
-}

package/dist/ui/components/TabStrip.style.css

@@ -1,97 +0,0 @@
-.appkit-tab-strip {
-  display: flex;
-  align-items: flex-end;
-  border-bottom: 1px solid var(--appkit-color-border);
-}
-
-.dark .appkit-tab-strip {
-  border-bottom-color: var(--appkit-color-border);
-}
-
-.appkit-tab-strip__arrow {
-  flex: none;
-  width: 2.25rem;
-  height: 3rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--appkit-color-zinc-500);
-  transition: color 0.2s ease, opacity 0.2s ease;
-}
-
-.appkit-tab-strip__arrow:hover:not(:disabled) {
-  color: var(--appkit-color-text);
-}
-
-.dark .appkit-tab-strip__arrow:hover:not(:disabled) {
-  color: var(--appkit-color-text);
-}
-
-.appkit-tab-strip__arrow:disabled {
-  opacity: 0.3;
-}
-
-.appkit-tab-strip__tab {
-  flex: 1;
-  height: 3rem;
-  padding: 0 1rem;
-  white-space: nowrap;
-  border-bottom: 2px solid transparent;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: color 0.2s ease, border-color 0.2s ease;
-}
-
-.appkit-tab-strip__tab--active {
-  border-bottom-color: var(--appkit-color-secondary-600);
-  color: var(--appkit-color-secondary-600);
-}
-
-.dark .appkit-tab-strip__tab--active {
-  border-bottom-color: var(--appkit-color-primary);
-  color: var(--appkit-color-primary-400);
-}
-
-.appkit-tab-strip__tab--inactive {
-  color: var(--appkit-color-zinc-600);
-}
-
-.appkit-tab-strip__tab--inactive:hover {
-  color: var(--appkit-color-text);
-}
-
-.dark .appkit-tab-strip__tab--inactive {
-  color: var(--appkit-color-text-faint);
-}
-
-.dark .appkit-tab-strip__tab--inactive:hover {
-  color: var(--appkit-color-text);
-}
-
-.appkit-tab-strip__tab--disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.appkit-tab-strip__tab--enabled {
-  cursor: pointer;
-}
-
-.appkit-tab-strip__badge {
-  margin-left: 0.375rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1rem;
-  height: 1rem;
-  padding: 0 0.25rem;
-  border-radius: 9999px;
-  font-size: var(--appkit-text-2xs);
-  background: var(--appkit-color-secondary-50);
-  color: var(--appkit-color-secondary-600);
-}
-
-.dark .appkit-tab-strip__badge {
-  background: rgba(112, 26, 117, 0.3);
-  color: var(--appkit-color-primary-300);
-}