@tuuject/koi-react 0.0.0-stage → 0.1.0

package/dist/link/Link.d.ts

@@ -0,0 +1,11 @@
+import { type LinkOwnProps } from '@tuuject/koi-core';
+import type { ComponentPropsWithRef } from 'react';
+export type { LinkVariant } from '@tuuject/koi-core';
+export interface LinkProps extends LinkOwnProps, Omit<ComponentPropsWithRef<'a'>, keyof LinkOwnProps> {
+}
+/**
+ * An inline text link: amber text over a dashed underline that fills with a soft tint on hover.
+ * `variant="plain"` reads as secondary text and turns brand on hover, for navigation rows such as breadcrumbs.
+ * For standalone actions use Button (ghost for a quiet one).
+ */
+export declare function Link({ external, variant, className, children, ...rest }: LinkProps): import("react").JSX.Element;

package/dist/link/Link.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { link } from '@tuuject/koi-react/styled-system/recipes';
+import { sizes } from '@tuuject/koi-tokens/dimensions';
+import { ExternalIcon } from '../icons.js';
+/**
+ * An inline text link: amber text over a dashed underline that fills with a soft tint on hover.
+ * `variant="plain"` reads as secondary text and turns brand on hover, for navigation rows such as breadcrumbs.
+ * For standalone actions use Button (ghost for a quiet one).
+ */
+export function Link({ external, variant, className, children, ...rest }) {
+    const s = link({ variant });
+    // Passed target/rel still win, as in legacy.
+    const ext = external ? { target: '_blank', rel: 'noopener noreferrer' } : null;
+    return (_jsxs("a", { ...ext, ...rest, className: cx(s.root, className), children: [children, external ? (_jsxs("span", { className: s.external, children: [_jsx(ExternalIcon, { size: sizes['icon-sm'] }), _jsx("span", { className: s.srOnly, children: strings.opensInNewWindow })] })) : null] }));
+}

package/dist/pagination/Pagination.d.ts

@@ -0,0 +1,7 @@
+import { type PaginationOwnProps } from '@tuuject/koi-core';
+import { type ComponentPropsWithRef } from 'react';
+export type { PaginationVariant } from '@tuuject/koi-core';
+export interface PaginationProps extends PaginationOwnProps, Omit<ComponentPropsWithRef<'nav'>, keyof PaginationOwnProps | 'children'> {
+}
+/** Page navigation: a <nav> with prev/next Buttons and either page numbers or "n / m". */
+export declare function Pagination({ page: pageProp, pageCount, onChange, variant, prevLabel, nextLabel, siblings, label, className, ...rest }: PaginationProps): import("react").JSX.Element;

package/dist/pagination/Pagination.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { pageList, strings } from '@tuuject/koi-core';
+import { cx } from '@tuuject/koi-react/styled-system/css';
+import { pagination } from '@tuuject/koi-react/styled-system/recipes';
+import { useContext } from 'react';
+import { Button, IconButton } from '../button/Button.js';
+import { ChevronLeftIcon, ChevronRightIcon } from '../icons.js';
+import { ShapeContext } from '../shape.js';
+const noop = () => { };
+/** Page navigation: a <nav> with prev/next Buttons and either page numbers or "n / m". */
+export function Pagination({ page: pageProp, pageCount, onChange, variant, prevLabel, nextLabel, siblings, label, className, ...rest }) {
+    // `|| 1` as legacy, so 0 or NaN fall back to one page / the first page.
+    const count = pageCount || 1;
+    const page = pageProp || 1;
+    const go = onChange || noop;
+    const simple = variant === 'simple';
+    const compact = variant === 'compact';
+    // Reads the context directly: Panda tries to evaluate a zero-arg useButtonShape() call at build time
+    // and warns (pure_helper_unevaluated). An unset shape falls back to the recipe default, as in useButtonShape.
+    // compact is always circles: round prev/next beside rounded-square page numbers would mix shapes in one row.
+    const shape = useContext(ShapeContext) ?? undefined;
+    const s = pagination({ shape: compact ? 'pill' : shape, compact });
+    const prev = compact ? (_jsx(IconButton, { color: "primary", variant: "soft", shape: "pill", label: prevLabel || strings.prevPage, disabled: page <= 1, onClick: () => go(page - 1), icon: _jsx(ChevronLeftIcon, {}) })) : (_jsx(Button, { variant: simple ? 'solid' : 'soft', size: simple ? 'lg' : 'md', disabled: page <= 1, onClick: () => go(page - 1), iconStart: simple ? undefined : _jsx(ChevronLeftIcon, {}), children: prevLabel || strings.prevPage }));
+    const next = compact ? (_jsx(IconButton, { color: "primary", variant: "soft", shape: "pill", label: nextLabel || strings.nextPage, disabled: page >= count, onClick: () => go(page + 1), icon: _jsx(ChevronRightIcon, {}) })) : (_jsx(Button, { variant: simple ? 'solid' : 'soft', size: simple ? 'lg' : 'md', disabled: page >= count, onClick: () => go(page + 1), iconEnd: simple ? undefined : _jsx(ChevronRightIcon, {}), children: nextLabel || strings.nextPage }));
+    return (_jsxs("nav", { "aria-label": label || strings.pagination, ...rest, className: cx(s.root, className), children: [prev, simple ? (_jsx("span", { className: s.count, children: `${page} / ${count}` })) : (_jsx("ol", { className: s.pages, children: pageList(page, count, siblings ?? 1).map((p) => typeof p === 'string' ? (_jsx("li", { className: s.gap, "aria-hidden": "true", children: "\u2026" }, p)) : (_jsx("li", { children: _jsx("button", { type: "button", className: s.page, "aria-current": p === page ? 'page' : undefined, "aria-label": strings.page(p), onClick: () => go(p), children: p }) }, p))) })), next] }));
+}