@mohasinac/appkit 2.2.0 → 2.3.0

package/dist/ui/components/SideDrawer.js

@@ -1,151 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import "client-only";
-import { useEffect, useRef, useState, useCallback } from "react";
-import { useTranslations } from "next-intl";
-import { Button } from "./Button";
-import { Row } from "./Layout";
-import { Heading, Span } from "./Typography";
-import { useSwipe } from "../../react";
-const UI_SIDE_DRAWER = {
-    backdrop: "appkit-side-drawer__backdrop",
-    root: "appkit-side-drawer",
-    left: "appkit-side-drawer--left",
-    right: "appkit-side-drawer--right",
-    header: "appkit-side-drawer__header",
-    headerMode: {
-        view: "appkit-side-drawer__header--view",
-        create: "appkit-side-drawer__header--create",
-        edit: "appkit-side-drawer__header--edit",
-        delete: "appkit-side-drawer__header--delete",
-    },
-    closeBtn: "appkit-side-drawer__close-btn",
-    closeIcon: "appkit-side-drawer__close-icon",
-    deleteBadge: "appkit-side-drawer__delete-badge",
-    content: "appkit-side-drawer__content",
-    footer: "appkit-side-drawer__footer",
-    warnBackdrop: "appkit-side-drawer__warn-backdrop",
-    warnDialog: "appkit-side-drawer__warn-dialog",
-    warnHeader: "appkit-side-drawer__warn-header",
-    warnIcon: "appkit-side-drawer__warn-icon",
-    warnText: "appkit-side-drawer__warn-text",
-    warnActions: "appkit-side-drawer__warn-actions",
-};
-/** Selector for all keyboard-focusable elements */
-const FOCUSABLE_SELECTOR = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
-function getFocusableElements(container) {
-    if (!container)
-        return [];
-    return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
-}
-/**
- * SideDrawer — accessible slide-in panel with focus trap, swipe-to-close,
- * and an optional unsaved-changes confirmation overlay.
- *
- * @example
- * ```tsx
- * <SideDrawer isOpen={open} onClose={() => setOpen(false)} title="Edit product" mode="edit" isDirty={isDirty}>
- *   <MyForm />
- * </SideDrawer>
- * ```
- */
-export function SideDrawer({ isOpen, onClose, title, children, footer, mode = "view", isDirty = false, side = "right", }) {
-    const drawerRef = useRef(null);
-    const [showUnsavedWarning, setShowUnsavedWarning] = useState(false);
-    const tActions = useTranslations("actions");
-    const tConfirm = useTranslations("confirm");
-    const triggerRef = useRef(null);
-    const attemptClose = useCallback(() => {
-        if (isDirty && (mode === "create" || mode === "edit")) {
-            setShowUnsavedWarning(true);
-        }
-        else {
-            onClose();
-        }
-    }, [isDirty, mode, onClose]);
-    const confirmClose = useCallback(() => {
-        setShowUnsavedWarning(false);
-        onClose();
-    }, [onClose]);
-    const cancelClose = useCallback(() => {
-        setShowUnsavedWarning(false);
-    }, []);
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (!isOpen)
-                return;
-            if (e.key === "Escape") {
-                attemptClose();
-                return;
-            }
-            if (e.key === "Tab" && drawerRef.current) {
-                const focusable = getFocusableElements(drawerRef.current);
-                if (focusable.length === 0) {
-                    e.preventDefault();
-                    return;
-                }
-                const first = focusable[0];
-                const last = focusable[focusable.length - 1];
-                if (e.shiftKey) {
-                    if (document.activeElement === first) {
-                        e.preventDefault();
-                        last.focus();
-                    }
-                }
-                else {
-                    if (document.activeElement === last) {
-                        e.preventDefault();
-                        first.focus();
-                    }
-                }
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isOpen, attemptClose]);
-    // Save / restore focus (WCAG 2.4.3)
-    useEffect(() => {
-        if (isOpen) {
-            triggerRef.current = document.activeElement;
-            requestAnimationFrame(() => {
-                const focusable = getFocusableElements(drawerRef.current);
-                if (focusable.length > 0)
-                    focusable[0].focus();
-            });
-        }
-        else {
-            if (triggerRef.current && "focus" in triggerRef.current) {
-                triggerRef.current.focus();
-            }
-        }
-    }, [isOpen]);
-    // Prevent body scroll when drawer is open
-    useEffect(() => {
-        if (isOpen) {
-            const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-            document.body.style.overflow = "hidden";
-            document.body.style.paddingRight = `${scrollbarWidth}px`;
-        }
-        else {
-            document.body.style.overflow = "";
-            document.body.style.paddingRight = "";
-        }
-        return () => {
-            document.body.style.overflow = "";
-            document.body.style.paddingRight = "";
-        };
-    }, [isOpen]);
-    useSwipe(drawerRef, {
-        ...(side === "left"
-            ? { onSwipeLeft: () => attemptClose() }
-            : { onSwipeRight: () => attemptClose() }),
-        minSwipeDistance: 60,
-    });
-    if (!isOpen)
-        return null;
-    const positionClass = side === "left" ? UI_SIDE_DRAWER.left : UI_SIDE_DRAWER.right;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.backdrop, onClick: attemptClose, "aria-hidden": "true" }), _jsxs("div", { ref: drawerRef, className: [UI_SIDE_DRAWER.root, positionClass].join(" "), role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-title", children: [_jsxs(Row, { justify: "between", gap: "none", className: [
-                            UI_SIDE_DRAWER.header,
-                            UI_SIDE_DRAWER.headerMode[mode],
-                        ].join(" "), children: [_jsxs(Row, { gap: "3", className: "min-w-0", children: [_jsx(Button, { variant: "ghost", onClick: attemptClose, className: UI_SIDE_DRAWER.closeBtn, "aria-label": tActions("close"), children: _jsx("svg", { className: UI_SIDE_DRAWER.closeIcon, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) }), _jsx(Heading, { level: 3, id: "drawer-title", className: "truncate", children: title })] }), mode === "delete" && (_jsx(Span, { className: UI_SIDE_DRAWER.deleteBadge, children: tActions("delete") }))] }), _jsx("div", { className: UI_SIDE_DRAWER.content, children: children }), footer && _jsx("div", { className: UI_SIDE_DRAWER.footer, children: footer })] }), showUnsavedWarning && (_jsxs(_Fragment, { children: [_jsx("div", { className: UI_SIDE_DRAWER.warnBackdrop, onClick: cancelClose }), _jsxs("div", { className: UI_SIDE_DRAWER.warnDialog, children: [_jsxs("div", { className: UI_SIDE_DRAWER.warnHeader, children: [_jsx("div", { className: UI_SIDE_DRAWER.warnIcon, children: _jsx("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" }) }) }), _jsxs("div", { children: [_jsx(Heading, { level: 4, className: "mb-1", children: tConfirm("unsavedChangesTitle") }), _jsx("p", { className: UI_SIDE_DRAWER.warnText, children: tConfirm("unsavedChangesDescription") })] })] }), _jsxs("div", { className: UI_SIDE_DRAWER.warnActions, children: [_jsx(Button, { variant: "outline", onClick: cancelClose, size: "sm", children: tActions("keepEditing") }), _jsx(Button, { variant: "danger", onClick: confirmClose, size: "sm", children: tActions("discardChanges") })] })] })] }))] }));
-}

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

@@ -1,214 +0,0 @@
-/* SideDrawer — accessible slide-in panel with focus trap + unsaved-changes */
-
-.appkit-side-drawer__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-  transition: opacity 0.2s ease;
-}
-
-.appkit-side-drawer {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  z-index: 50;
-  background: white;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.3s ease-in-out;
-}
-
-:is(.dark) .appkit-side-drawer {
-  background: #0f172a;
-}
-
-/* Position */
-.appkit-side-drawer--left { left: 0; width: 100%; }
-.appkit-side-drawer--right { right: 0; width: 100%; }
-
-@media (min-width: 640px) {
-  .appkit-side-drawer--left { width: 24rem; }
-}
-@media (min-width: 768px) {
-  .appkit-side-drawer--left { width: 420px; }
-  .appkit-side-drawer--right { min-width: 50%; }
-}
-
-/* Header */
-.appkit-side-drawer__header {
-  padding: 1.5rem;
-  border-bottom-width: 1px;
-}
-
-.appkit-side-drawer__header--view {
-  background-color: #fafafa;
-  border-color: #e4e4e7;
-}
-:is(.dark) .appkit-side-drawer__header--view {
-  background-color: rgba(15, 23, 42, 0.8);
-  border-color: #334155;
-}
-
-.appkit-side-drawer__header--create {
-  background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.05), transparent, rgba(20, 184, 166, 0.03));
-  border-color: #e4e4e7;
-}
-:is(.dark) .appkit-side-drawer__header--create {
-  background: linear-gradient(to right, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), transparent, rgba(20, 184, 166, 0.025));
-  border-color: #334155;
-}
-
-.appkit-side-drawer__header--edit {
-  background: linear-gradient(to right, rgba(251, 191, 36, 0.04), transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.05));
-  border-color: #e4e4e7;
-}
-:is(.dark) .appkit-side-drawer__header--edit {
-  background: linear-gradient(to right, rgba(120, 53, 15, 0.15), transparent, rgba(var(--color-primary-rgb, 59, 130, 246), 0.1));
-  border-color: #334155;
-}
-
-.appkit-side-drawer__header--delete {
-  background-color: #fef2f2;
-  border-color: #fecaca;
-}
-:is(.dark) .appkit-side-drawer__header--delete {
-  background-color: rgba(69, 10, 10, 0.3);
-  border-color: #991b1b;
-}
-
-.appkit-side-drawer__close-btn {
-  flex-shrink: 0;
-  padding: 0.5rem;
-  color: #52525b;
-  border-radius: 0.5rem;
-  transition: all 0.15s ease;
-  box-shadow: 0 0 0 1px #e4e4e7;
-}
-.appkit-side-drawer__close-btn:hover {
-  background-color: #f4f4f5;
-  box-shadow: 0 0 0 1px #d4d4d8;
-}
-:is(.dark) .appkit-side-drawer__close-btn {
-  color: #d4d4d8;
-  box-shadow: 0 0 0 1px #334155;
-}
-:is(.dark) .appkit-side-drawer__close-btn:hover {
-  background-color: #1e293b;
-  box-shadow: 0 0 0 1px #475569;
-}
-
-.appkit-side-drawer__close-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.appkit-side-drawer__delete-badge {
-  flex-shrink: 0;
-  padding: 0.25rem 0.625rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: 0.25rem;
-  background-color: #fee2e2;
-  color: #b91c1c;
-}
-:is(.dark) .appkit-side-drawer__delete-badge {
-  background-color: #7f1d1d;
-  color: #fca5a5;
-}
-
-/* Content */
-.appkit-side-drawer__content {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1rem;
-}
-@media (min-width: 640px) {
-  .appkit-side-drawer__content { padding: 1.5rem; }
-}
-
-/* Footer */
-.appkit-side-drawer__footer {
-  flex-shrink: 0;
-  padding: 1rem 1rem;
-  border-top: 1px solid #e4e4e7;
-  background-color: #fafafa;
-}
-:is(.dark) .appkit-side-drawer__footer {
-  border-color: #334155;
-  background-color: rgba(15, 23, 42, 0.8);
-}
-@media (min-width: 640px) {
-  .appkit-side-drawer__footer { padding: 1.25rem 1.5rem; }
-}
-
-/* Unsaved-changes warning overlay */
-.appkit-side-drawer__warn-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 60;
-  background: rgba(0, 0, 0, 0.6);
-}
-
-.appkit-side-drawer__warn-dialog {
-  position: fixed;
-  z-index: 60;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 90vw;
-  max-width: 28rem;
-  background: white;
-  border-radius: 0.75rem;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  padding: 1.5rem;
-}
-:is(.dark) .appkit-side-drawer__warn-dialog {
-  background: #0f172a;
-}
-
-.appkit-side-drawer__warn-header {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-.appkit-side-drawer__warn-icon {
-  flex-shrink: 0;
-  width: 2.5rem;
-  height: 2.5rem;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #fef9c3;
-}
-:is(.dark) .appkit-side-drawer__warn-icon {
-  background-color: rgba(113, 63, 18, 0.3);
-}
-
-.appkit-side-drawer__warn-icon svg {
-  width: 1.25rem;
-  height: 1.25rem;
-  color: #ca8a04;
-}
-:is(.dark) .appkit-side-drawer__warn-icon svg {
-  color: #facc15;
-}
-
-.appkit-side-drawer__warn-text {
-  font-size: 0.875rem;
-  color: #52525b;
-}
-:is(.dark) .appkit-side-drawer__warn-text {
-  color: #a1a1aa;
-}
-
-.appkit-side-drawer__warn-actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-end;
-}

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

@@ -1,25 +0,0 @@
-import "client-only";
-import React from "react";
-export interface SideModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    /** Default: "right". "left" opens from the left edge. */
-    side?: "left" | "right";
-    /** Width on desktop. Default: "60vw" clamped to max-w-2xl. */
-    width?: string;
-    children: React.ReactNode;
-    /** Extra class on the panel Div. */
-    className?: string;
-}
-/**
- * SideModal — slides in from the right (or left) on desktop (60 vw),
- * full-screen drawer on mobile (< sm breakpoint).
- *
- * Accessibility:
- *  - Traps focus inside the panel when open
- *  - Closes on Escape key
- *  - backdrop click closes panel
- *  - role="dialog" + aria-modal + aria-labelledby
- */
-export declare function SideModal({ isOpen, onClose, title, side, children, className, }: SideModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/components/SideModal.js

@@ -1,61 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "client-only";
-import { useEffect, useRef } from "react";
-import { Button, Div, Heading } from "..";
-/**
- * SideModal — slides in from the right (or left) on desktop (60 vw),
- * full-screen drawer on mobile (< sm breakpoint).
- *
- * Accessibility:
- *  - Traps focus inside the panel when open
- *  - Closes on Escape key
- *  - backdrop click closes panel
- *  - role="dialog" + aria-modal + aria-labelledby
- */
-export function SideModal({ isOpen, onClose, title, side = "right", children, className = "", }) {
-    const panelRef = useRef(null);
-    const titleId = useRef(`side-modal-title-${Math.random().toString(36).slice(2, 8)}`);
-    // Escape key handler
-    useEffect(() => {
-        if (!isOpen)
-            return;
-        const handler = (e) => {
-            if (e.key === "Escape")
-                onClose();
-        };
-        document.addEventListener("keydown", handler);
-        return () => document.removeEventListener("keydown", handler);
-    }, [isOpen, onClose]);
-    // Focus trap — move focus into panel on open
-    useEffect(() => {
-        if (isOpen) {
-            const el = panelRef.current;
-            if (el) {
-                const focusable = el.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                focusable?.focus();
-            }
-        }
-    }, [isOpen]);
-    // Prevent body scroll while open
-    useEffect(() => {
-        if (isOpen) {
-            document.body.style.overflow = "hidden";
-        }
-        else {
-            document.body.style.overflow = "";
-        }
-        return () => {
-            document.body.style.overflow = "";
-        };
-    }, [isOpen]);
-    if (!isOpen)
-        return null;
-    return (_jsxs(Div, { className: "appkit-side-modal", "aria-hidden": !isOpen, children: [_jsx(Div, { className: "appkit-side-modal__backdrop", onClick: onClose, "aria-hidden": "true" }), _jsxs(Div, { ref: panelRef, role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId.current : undefined, className: [
-                    "appkit-side-modal__panel",
-                    `appkit-side-modal__panel--${side}`,
-                    className,
-                ]
-                    .filter(Boolean)
-                    .join(" "), children: [title && (_jsxs(Div, { className: "appkit-side-modal__header", children: [_jsx(Heading, { level: 2, id: titleId.current, className: "text-base font-semibold text-neutral-900 dark:text-white truncate", children: title }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onClose, "aria-label": "Close panel", className: "ml-2 flex-shrink-0", children: "\u2715" })] })), _jsx(Div, { className: "appkit-side-modal__body", children: children })] })] }));
-}

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

@@ -1,77 +0,0 @@
-/* appkit/src/ui/components/SideModal.style.css */
-
-.appkit-side-modal {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-}
-
-/* ── Backdrop ──────────────────────────────────────── */
-
-.appkit-side-modal__backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  transition: opacity 300ms;
-}
-
-/* ── Panel ─────────────────────────────────────────── */
-
-.appkit-side-modal__panel {
-  position: absolute;
-  inset-block: 0; /* top + bottom */
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  background: #ffffff;
-  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-  transition: transform 300ms ease-in-out;
-}
-
-@media (min-width: 640px) {
-  .appkit-side-modal__panel {
-    width: min(60vw, 672px);
-  }
-}
-
-.appkit-side-modal__panel--right {
-  right: 0;
-  transform: translateX(0);
-}
-
-.appkit-side-modal__panel--left {
-  left: 0;
-  transform: translateX(0);
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-side-modal__panel {
-    background: #18181b; /* zinc-900 */
-  }
-}
-
-/* ── Header ────────────────────────────────────────── */
-
-.appkit-side-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid #e5e7eb; /* neutral-200 */
-  padding: 1rem 1.25rem;
-  flex-shrink: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .appkit-side-modal__header {
-    border-bottom-color: #3f3f46; /* zinc-700 */
-  }
-}
-
-/* ── Body ──────────────────────────────────────────── */
-
-.appkit-side-modal__body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 1.25rem;
-}

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

@@ -1,14 +0,0 @@
-/**
- * Skeleton — content placeholder with pulse or wave animation.
- *
- * Extracted from src/components/ui/Skeleton.tsx for @mohasinac/ui.
- * Wave animation uses a plain <style> element (no styled-jsx dependency).
- */
-export interface SkeletonProps {
-    variant?: "text" | "circular" | "rectangular";
-    width?: string | number;
-    height?: string | number;
-    className?: string;
-    animation?: "pulse" | "wave" | "none";
-}
-export declare function Skeleton({ variant, width, height, className, animation, }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Skeleton.js

@@ -1,22 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function Skeleton({ variant = "text", width, height, className = "", animation = "pulse", }) {
-    const variantClass = variant === "circular"
-        ? "appkit-skeleton--circular"
-        : "appkit-skeleton--rounded";
-    const defaultSize = {
-        circular: { width: "40px", height: "40px" },
-        rectangular: { width: "100%", height: "140px" },
-        text: { width: "100%", height: "1em" },
-    }[variant];
-    const animationClass = {
-        pulse: "appkit-skeleton--pulse",
-        wave: "appkit-skeleton--wave",
-        none: "",
-    }[animation];
-    const style = {
-        width: width ?? defaultSize.width,
-        height: height ?? defaultSize.height,
-    };
-    return (_jsx("div", { className: `appkit-skeleton ${variantClass} ${animationClass} ${className}`, style: style, role: "status", "aria-label": "Loading", children: _jsx("span", { className: "appkit-sr-only", children: "Loading..." }) }));
-}

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

@@ -1,55 +0,0 @@
-.appkit-skeleton {
-  background: #f4f4f5;
-}
-
-.dark .appkit-skeleton {
-  background: #1e293b;
-}
-
-.appkit-skeleton--rounded {
-  border-radius: 0.25rem;
-}
-
-.appkit-skeleton--circular {
-  border-radius: 9999px;
-}
-
-.appkit-skeleton--pulse {
-  animation: appkit-skeleton-pulse 1.6s ease-in-out infinite;
-}
-
-.appkit-skeleton--wave {
-  position: relative;
-  overflow: hidden;
-}
-
-.appkit-skeleton--wave::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
-  animation: appkit-skeleton-wave 1.5s linear infinite;
-}
-
-.dark .appkit-skeleton--wave::after {
-  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.25), transparent);
-}
-
-@keyframes appkit-skeleton-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.45;
-  }
-}
-
-@keyframes appkit-skeleton-wave {
-  0% {
-    transform: translateX(-100%);
-  }
-  100% {
-    transform: translateX(100%);
-  }
-}

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

@@ -1,6 +0,0 @@
-export interface SkipToMainProps {
-    href?: string;
-    label?: string;
-    className?: string;
-}
-export declare function SkipToMain({ href, label, className, }: SkipToMainProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/SkipToMain.js

@@ -1,6 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TextLink } from "./TextLink";
-export function SkipToMain({ href = "#main-content", label = "Skip to main content", className = "", }) {
-    return (_jsx(TextLink, { href: href, variant: "none", className: ["appkit-skip-to-main", className].filter(Boolean).join(" "), children: label }));
-}

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

@@ -1,34 +0,0 @@
-/* SkipToMain — accessibility skip-navigation link */
-
-.appkit-skip-to-main {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.appkit-skip-to-main:focus-visible {
-  position: fixed;
-  left: 1rem;
-  top: 1rem;
-  z-index: 100;
-  width: auto;
-  height: auto;
-  padding: 0.625rem 1rem;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-  border-radius: 0.5rem;
-  background: var(--color-primary, #65a30d);
-  color: white;
-  font-size: 0.875rem;
-  font-weight: 600;
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-primary, #65a30d), 0 0 0 4px white;
-}

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

@@ -1,17 +0,0 @@
-import React from "react";
-export interface SliderProps {
-    value?: number;
-    defaultValue?: number;
-    min?: number;
-    max?: number;
-    step?: number;
-    onChange?: (value: number) => void;
-    onChangeEnd?: (value: number) => void;
-    disabled?: boolean;
-    label?: React.ReactNode;
-    showValue?: boolean;
-    size?: "sm" | "md" | "lg";
-    className?: string;
-    id?: string;
-}
-export declare function Slider({ value: controlledValue, defaultValue, min, max, step, onChange, onChangeEnd, disabled, label, showValue, size, className, id, }: SliderProps): import("react/jsx-runtime").JSX.Element;