@paul-portfolio/react 0.1.13 → 0.1.14

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@paul-portfolio/react",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "React components for the Paul Design System",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gpbsumido/paul-design-system.git",
+    "directory": "packages/react"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/Avatar.d.ts

@@ -1,8 +0,0 @@
-type AvatarProps = {
-    src?: string;
-    alt?: string;
-    size?: 'sm' | 'md' | 'lg' | 'xl';
-    fallback?: string;
-};
-export declare function Avatar({ src, alt, size, fallback }: AvatarProps): import("react").JSX.Element;
-export {};

package/dist/Avatar.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from './cx';
-export function Avatar({ src, alt, size, fallback }) {
-    return (_jsx("div", { className: cx('avatar', size && `avatar--${size}`), children: src ? (_jsx("img", { src: src, alt: alt })) : (_jsx("span", { className: "avatar--fallback", children: fallback })) }));
-}

package/dist/Badge.d.ts

@@ -1,8 +0,0 @@
-import type { ReactNode } from 'react';
-type BadgeProps = {
-    variant?: 'success' | 'warning' | 'error' | 'info';
-    dot?: boolean;
-    children?: ReactNode;
-};
-export declare function Badge({ variant, dot, children }: BadgeProps): import("react").JSX.Element;
-export {};

package/dist/Badge.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from './cx';
-export function Badge({ variant, dot, children }) {
-    return (_jsx("span", { className: cx('badge', variant && `badge--${variant}`, dot && 'badge--dot'), children: children }));
-}

package/dist/Button.d.ts

@@ -1,19 +0,0 @@
-import { type ButtonHTMLAttributes, type AnchorHTMLAttributes, type ReactNode } from 'react';
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-type BaseProps = {
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    loading?: boolean;
-    disabled?: boolean;
-    children: ReactNode;
-};
-type ButtonAsButton = BaseProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseProps> & {
-    href?: never;
-};
-type ButtonAsAnchor = BaseProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseProps> & {
-    href: string;
-};
-type ButtonProps = ButtonAsButton | ButtonAsAnchor;
-export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export {};

package/dist/Button.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
-import { cx } from './cx';
-export const Button = forwardRef(function Button({ variant, size, loading, disabled, className, children, ...props }, ref) {
-    const classes = cx('btn', variant && `btn--${variant}`, size && size !== 'md' && `btn--${size}`, className);
-    if ('href' in props && props.href) {
-        return (_jsx("a", { ref: ref, className: classes, "aria-disabled": disabled || loading || undefined, ...props, children: children }));
-    }
-    const { href: _, ...buttonProps } = props;
-    return (_jsx("button", { ref: ref, className: classes, disabled: disabled || loading, "aria-disabled": disabled || loading || undefined, "aria-busy": loading || undefined, ...buttonProps, onClick: disabled || loading ? undefined : buttonProps.onClick, children: children }));
-});

package/dist/Card.d.ts

@@ -1,14 +0,0 @@
-import { type ReactNode, type HTMLAttributes } from 'react';
-type CardVariant = 'elevated' | 'interactive';
-declare function Header({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-declare function Body({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-declare function Footer({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare const Card: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
-    variant?: CardVariant;
-    children: ReactNode;
-} & import("react").RefAttributes<HTMLDivElement>> & {
-    Header: typeof Header;
-    Body: typeof Body;
-    Footer: typeof Footer;
-};
-export {};

package/dist/Card.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { cx } from './cx';
-const CardRoot = forwardRef(function Card({ variant, className, children, ...props }, ref) {
-    return (_jsx("div", { ref: ref, className: cx('card', variant && `card--${variant}`, className), ...props, children: children }));
-});
-function Header({ className, children, ...props }) {
-    return _jsx("div", { className: cx('card__header', className), ...props, children: children });
-}
-function Body({ className, children, ...props }) {
-    return _jsx("div", { className: cx('card__body', className), ...props, children: children });
-}
-function Footer({ className, children, ...props }) {
-    return _jsx("div", { className: cx('card__footer', className), ...props, children: children });
-}
-export const Card = Object.assign(CardRoot, { Header, Body, Footer });

package/dist/Chip.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'react';
-type ChipProps = HTMLAttributes<HTMLSpanElement> & {
-    label: string;
-    size?: 'sm' | 'md';
-    clickable?: boolean;
-    removable?: boolean;
-    onRemove?: () => void;
-};
-export declare function Chip({ label, size, clickable, removable, onClick, onRemove, className, ...props }: ChipProps): import("react").JSX.Element;
-export {};

package/dist/Chip.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx } from './cx';
-export function Chip({ label, size, clickable, removable, onClick, onRemove, className, ...props }) {
-    return (_jsxs("span", { className: cx('chip', size && size !== 'md' && `chip--${size}`, clickable && 'chip--clickable', removable && 'chip--removable', className), onClick: onClick, ...props, children: [label, removable && (_jsx("button", { type: "button", className: "chip__remove", "aria-label": "Remove", onClick: (e) => {
-                    e.stopPropagation();
-                    onRemove?.();
-                } }))] }));
-}

package/dist/Input.d.ts

@@ -1,8 +0,0 @@
-import { type InputHTMLAttributes } from 'react';
-export declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
-    label?: string;
-    error?: string;
-    helper?: string;
-    size?: 'sm' | 'md';
-    disabled?: boolean;
-} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/Input.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useId } from 'react';
-import { cx } from './cx';
-export const Input = forwardRef(function Input({ label, error, helper, size, disabled, className, ...props }, ref) {
-    const id = useId();
-    const helperId = `${id}-helper`;
-    const helperText = error || helper;
-    return (_jsxs("div", { className: "input__wrapper", children: [label && _jsx("label", { className: "input__label", htmlFor: id, children: label }), _jsx("input", { ref: ref, id: id, className: cx('input', size && size !== 'md' && `input--${size}`, error && 'input--error', className), disabled: disabled, "aria-invalid": error ? true : undefined, "aria-describedby": helperText ? helperId : undefined, ...props }), helperText && (_jsx("span", { id: helperId, className: cx('input__helper', error && 'input__helper--error'), children: helperText }))] }));
-});

package/dist/Modal.d.ts

@@ -1,23 +0,0 @@
-import { type ReactNode } from 'react';
-type ModalProps = {
-    open: boolean;
-    onClose: () => void;
-    title?: string;
-    children: ReactNode;
-};
-declare function Header({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
-declare function Body({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
-declare function Footer({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
-export declare function Modal({ open, onClose, title, children }: ModalProps): import("react").ReactPortal | null;
-export declare namespace Modal {
-    export { Header };
-    export { Body };
-    export { Footer };
-}
-export {};

package/dist/Modal.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useId } from 'react';
-import { createPortal } from 'react-dom';
-function Header({ children }) {
-    return _jsx("div", { className: "modal__header", children: children });
-}
-function Body({ children }) {
-    return _jsx("div", { className: "modal__body", children: children });
-}
-function Footer({ children }) {
-    return _jsx("div", { className: "modal__footer", children: children });
-}
-export function Modal({ open, onClose, title, children }) {
-    const titleId = useId();
-    useEffect(() => {
-        if (!open)
-            return;
-        function handleKey(e) {
-            if (e.key === 'Escape')
-                onClose();
-        }
-        document.addEventListener('keydown', handleKey);
-        return () => document.removeEventListener('keydown', handleKey);
-    }, [open, onClose]);
-    if (!open)
-        return null;
-    return createPortal(_jsx("div", { className: "modal__backdrop", onClick: onClose, children: _jsxs("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, className: "modal", onClick: (e) => e.stopPropagation(), children: [title && (_jsx("div", { id: titleId, className: "modal__title", children: title })), children] }) }), document.body);
-}
-Modal.Header = Header;
-Modal.Body = Body;
-Modal.Footer = Footer;

package/dist/Skeleton.d.ts

@@ -1,7 +0,0 @@
-type SkeletonProps = {
-    variant?: 'text' | 'circle' | 'rect';
-    width?: string;
-    height?: string;
-};
-export declare function Skeleton({ variant, width, height }: SkeletonProps): import("react").JSX.Element;
-export {};

package/dist/Skeleton.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cx } from './cx';
-export function Skeleton({ variant, width, height }) {
-    const style = variant === 'rect'
-        ? {
-            '--skeleton-w': width,
-            '--skeleton-h': height,
-        }
-        : undefined;
-    return (_jsx("div", { className: cx('skeleton', variant && `skeleton--${variant}`), style: style }));
-}

package/dist/Tooltip.d.ts

@@ -1,8 +0,0 @@
-import { type ReactNode } from 'react';
-type TooltipProps = {
-    content: string;
-    side?: 'top' | 'bottom' | 'left' | 'right';
-    children: ReactNode;
-};
-export declare function Tooltip({ content, side, children }: TooltipProps): import("react").JSX.Element;
-export {};

package/dist/Tooltip.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useId } from 'react';
-import { cx } from './cx';
-export function Tooltip({ content, side = 'top', children }) {
-    const [visible, setVisible] = useState(false);
-    const id = useId();
-    return (_jsxs("span", { onMouseEnter: () => setVisible(true), onMouseLeave: () => setVisible(false), "aria-describedby": id, style: { position: 'relative', display: 'inline-block' }, children: [children, _jsx("span", { id: id, role: "tooltip", className: cx('tooltip', `tooltip--${side}`, visible && 'tooltip--visible'), children: content })] }));
-}

package/dist/VisuallyHidden.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-type VisuallyHiddenProps = {
-    children: ReactNode;
-};
-export declare function VisuallyHidden({ children }: VisuallyHiddenProps): import("react").JSX.Element;
-export {};

package/dist/VisuallyHidden.js

@@ -1,4 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export function VisuallyHidden({ children }) {
-    return _jsx("span", { className: "visually-hidden", children: children });
-}

package/dist/cx.d.ts

@@ -1 +0,0 @@
-export declare function cx(...classes: (string | false | null | undefined)[]): string;

package/dist/cx.js

@@ -1,3 +0,0 @@
-export function cx(...classes) {
-    return classes.filter(Boolean).join(' ');
-}

package/dist/index.d.ts

@@ -1,11 +0,0 @@
-export { Button } from './Button';
-export { Card } from './Card';
-export { Chip } from './Chip';
-export { Input } from './Input';
-export { Modal } from './Modal';
-export { Tooltip } from './Tooltip';
-export { Avatar } from './Avatar';
-export { Badge } from './Badge';
-export { Skeleton } from './Skeleton';
-export { VisuallyHidden } from './VisuallyHidden';
-export { cx } from './cx';

package/dist/index.js

@@ -1,11 +0,0 @@
-export { Button } from './Button';
-export { Card } from './Card';
-export { Chip } from './Chip';
-export { Input } from './Input';
-export { Modal } from './Modal';
-export { Tooltip } from './Tooltip';
-export { Avatar } from './Avatar';
-export { Badge } from './Badge';
-export { Skeleton } from './Skeleton';
-export { VisuallyHidden } from './VisuallyHidden';
-export { cx } from './cx';