@fpkit/acss 0.5.0 → 0.5.2

package/dist/index.d.ts

@@ -1,566 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React$1 from 'react';
-import React__default from 'react';
-import { C as ComponentProps$1 } from './icon-e6044c73.js';
-export { I as Icon } from './icon-e6044c73.js';
-
-interface FpBadgeProps {
-    elm?: 'span' | 'p';
-    children: React__default.ReactNode;
-    role: 'note' | 'alert' | 'status';
-    renderStyles?: boolean;
-    styles?: {};
-}
-/**
- * @description Creates a Badge component that wraps a child element with a badge.
- * @param {string} elm - element type to render
- * @param {string} role - aria role
- * @param {any} children - child element to render
- * @param {boolean} renderStyles - whether or not to render the default styles
- * @param {object} styles - styles to pass to the FP component
- * @param {object} props - additional props to pass to the FP component
- * @returns {any} - returns the Badge component
- */
-declare const Badge: {
-    ({ elm, role, children, renderStyles, styles, ...props }: FpBadgeProps): react_jsx_runtime.JSX.Element;
-    styles: {
-        paddingInline: string;
-        paddingBlock: string;
-        color: string;
-        fontSize: string;
-        fontWeight: string;
-        fontFamily: string;
-        border: string;
-        borderRadius: string;
-        backgroundColor: string;
-        textDecoration: string;
-        textTransform: string;
-    };
-    displayName: string;
-};
-
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * The type of the button.
-     */
-    type: 'button' | 'submit' | 'reset';
-    /**
-     * Button label/content
-     */
-    children: React.ReactNode;
-    /**
-     * Button styles and props
-     */
-    styles?: object;
-    /**
-     * button classes
-     */
-    classes?: string;
-    /**
-     * @deprecated import styles Button.styles
-     * default button styles
-     */
-    defaultStyles?: boolean;
-    /**
-     * Button pointer-down event (pointerOver, pointerLeave)
-     */
-    pointerDown?: (e: React.PointerEvent) => void;
-    /**
-     * Button pointer-down event (pointerOver, pointerLeave)
-     */
-    pointerOver?: (e: React.PointerEvent) => void;
-    /**
-     * Pointer leave event handler for the Button component.
-     *
-     * @param {React.PointerEvent} e - The pointer event
-     */
-    pointerLeave?: (e: React.PointerEvent) => void;
-}
-declare const Button: {
-    ({ type, children, styles, disabled, classes, pointerDown, pointerOver, pointerLeave, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
-    styles: {
-        paddingInline: string;
-        paddingBlock: string;
-        display: string;
-        placeItems: string;
-        justifyContent: string;
-        cursor: string;
-        border: string;
-        color: string;
-        backgroundColor: string;
-        borderRadius: string;
-    };
-    displayName: string;
-};
-
-interface ComponentProps {
-    /**
-     * The default child content/component to render.
-     */
-    children?: React.ReactNode;
-    /**
-     * Use defaylt component styles
-     */
-    renderStyles?: boolean;
-    /**
-     * Component id attribute
-     */
-    id?: string;
-    /**
-     * Styles object
-     */
-    styles?: {};
-    /**
-     * Component class attribute
-     */
-    classes?: string;
-    /**
-     * Style value for [data-style] attribute
-     */
-    dataStyle?: string;
-}
-
-interface SharedInputProps extends ComponentProps {
-    /**
-     * The input name
-     */
-    name?: string;
-    /**
-     * The input value
-     */
-    value?: string;
-    /**
-     * The input placeholder
-     */
-    placeholder?: string;
-    /**
-     * Input is required or not
-     */
-    required?: boolean;
-    /**
-     * Input id attribute
-     */
-    id: string;
-    /**
-     * Set the element as disabled
-     */
-    disabled?: boolean;
-    /**
-     * Set the element as readonly
-     */
-    readonly?: boolean;
-}
-
-interface CardProps extends ComponentProps$1 {
-    elm?: 'div' | 'aside' | 'section' | 'article';
-}
-declare const Card: {
-    ({ elm, styles, children, renderStyles, dataStyle, id, ...props }: CardProps): react_jsx_runtime.JSX.Element;
-    styles: {
-        padding: string;
-        backgroundColor: string;
-        boxShadow: string;
-        borderRadius: string;
-        border: string;
-        color: string;
-    };
-    displayName: string;
-};
-
-interface DialogProps extends ComponentProps$1 {
-    /**
-     * React ref for dialog element
-     */
-    modalRef: React__default.RefObject<HTMLDialogElement>;
-    /**
-     * Handle close modal event
-     */
-    closeModal?: (e: React__default.SyntheticEvent<HTMLDialogElement>) => void;
-    /**
-     * open modal on mount
-     */
-    openOnMount?: boolean;
-}
-/**
- * Dialog component
- */
-declare const Dialog: {
-    ({ id, children, modalRef, openOnMount, ...props }: DialogProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface DropdownProps$1 extends ComponentProps$1 {
-    elm?: 'div' | 'aside';
-    title: string;
-    children: React.ReactNode;
-    onToggle?: (e: React.SyntheticEvent) => void;
-}
-
-interface SummaryPros {
-    children: React.ReactNode;
-    styles?: {};
-    renderStyles?: boolean;
-}
-
-interface DropdownProps extends ComponentProps$1 {
-    title: string;
-    summary: React.ReactNode;
-    toggle?: (e: React.SyntheticEvent) => void;
-}
-declare const Dropdown: {
-    ({ styles, children, summary, toggle, renderStyles, ...props }: DropdownProps): react_jsx_runtime.JSX.Element;
-    styles: {
-        display: string;
-        placeContent: string;
-        placeItems: string;
-        gap: string;
-        border: string;
-        transition: string;
-        backgroundColor: string;
-        padding: string;
-        minWidth: string;
-        maxWidth: string;
-    };
-    Summary: {
-        ({ children, styles, renderStyles, ...props }: SummaryPros): react_jsx_runtime.JSX.Element;
-        styles: {
-            listStyle: string;
-            justifyContent: string;
-            color: string;
-            cursor: string;
-        };
-        displayName: string;
-    };
-    Details: {
-        ({ title, children, styles, renderStyles, onToggle, ...props }: DropdownProps$1): react_jsx_runtime.JSX.Element;
-        styles: {
-            padding: string;
-            backgroundColor: string;
-        };
-        displayName: string;
-    };
-    displayName: string;
-};
-
-interface FieldProps extends ComponentProps$1 {
-    /**
-     * Defines the for attribute of the label element
-     */
-    labelFor: string;
-    /**
-     * The label content
-     */
-    label: React.ReactNode;
-}
-/**
- * Field component that renders a label and children wrapped in a div element.
- * @param labelFor Defines the for attribute of the label element
- * @param styles Custom styles to be applied to the component
- * @param label The label content
- * @param children The children to be rendered inside the component
- * @param props Additional props to be spread to the component
- */
-declare const Field: {
-    ({ labelFor, styles, label, children, ...props }: FieldProps): react_jsx_runtime.JSX.Element;
-    styles: {};
-    displayName: string;
-};
-
-declare const Header: {
-    ({ children, styles, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Main: {
-    ({ children, styles, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Footer: {
-    ({ children, styles, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Aside: {
-    ({ children, styles, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Section: {
-    ({ children, styles, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Article: {
-    ({ children, styles, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface ImageProps extends ComponentProps$1 {
-    alt: string;
-    src?: string;
-    width?: number;
-    height?: number;
-    loading?: 'eager' | 'lazy';
-    placeholder?: string;
-    fetchpriority?: 'high' | 'low';
-    decoding?: 'sync' | 'async' | 'auto';
-    imgError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-    imgLoaded?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-}
-declare const Img: {
-    ({ src, alt, width, height, styles, loading, placeholder, fetchpriority, decoding, imgLoaded, imgError, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
-    styles: {
-        maxWidth: string;
-        height: string;
-        objectFit: string;
-        objectPosition: string;
-        aspectRatio: string;
-        display: string;
-    };
-    displayName: string;
-};
-
-interface InputProps extends Omit<ComponentProps$1, 'children'> {
-    /**
-     * The type of the input.
-     */
-    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
-    /**
-     * The input name
-     */
-    name?: string;
-    /**
-     * The input value
-     */
-    value?: string;
-    /**
-     * The input placeholder
-     */
-    placeholder?: string;
-    /**
-     * Pass a function to handle input change events
-     */
-    inputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * Pass a function to handle input focus events
-     */
-    inputBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
-    /**
-     * Function prop to handle input keydown events
-     */
-    inputDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    /**
-     * Input is required or not
-     */
-    required?: boolean;
-    /**
-     * Input id attribute
-     */
-    id: string;
-    /**
-     * Set the element as disabled
-     */
-    isDisabled?: boolean;
-    /**
-     * Set the element as readonly
-     */
-    readonly?: boolean;
-    /**
-     * ref to the input element
-     */
-    inputRef?: React.RefObject<HTMLInputElement>;
-    /**
-     * Input styles
-     */
-    styles?: {};
-    /**
-     * input classes
-     */
-    classes?: string;
-}
-/**
- * Input component that renders an HTML input element.
- * @param {InputProps} props - The input component props.
- * @returns {JSX.Element} - The input component.
- */
-declare const Input: {
-    ({ type, name, value, placeholder, id, styles, classes, isDisabled, readonly, required, inputRef, inputChange, inputBlur, inputDown, ...props }: InputProps): JSX.Element;
-    styles: {
-        minWidth: string;
-    };
-    displayName: string;
-};
-
-type LinkProps = Partial<ComponentProps$1> & {
-    href: string;
-    target?: string;
-    rel?: string;
-    children: React.ReactNode;
-    prefetch?: boolean;
-    onPointerDown?: (e: React.PointerEvent<HTMLAnchorElement>) => void;
-};
-declare const Link: {
-    ({ href, target, rel, children, styles, prefetch, onPointerDown, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface ListProps {
-    styles?: {};
-    classes?: string;
-    children: React$1.ReactNode;
-    type: 'ul' | 'ol' | 'dl';
-    variant: string;
-}
-declare const List: ({ children, classes, type, variant, styles, ...props }: ListProps) => react_jsx_runtime.JSX.Element;
-
-interface ModalProps extends ComponentProps$1 {
-    /**
-     * The child component/content for open button
-     */
-    openChild?: React__default.ReactNode;
-    /**
-     * The child component/content for close button
-     */
-    closeChild?: React__default.ReactNode;
-    /**
-     * The child component/content for modal header
-     */
-    modalHeader?: React__default.ReactNode;
-    /**
-     * The child component/content for modal footer
-     */
-    modalFooter?: React__default.ReactNode;
-    /**
-     * The child component/content for modal body
-     */
-    children: React__default.ReactNode;
-    /**
-     * Open modal on mount when set to true
-     */
-    showOpen?: boolean;
-}
-declare const Modal: {
-    ({ openChild, closeChild, modalHeader, modalFooter, children, showOpen, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface TableProps extends ComponentProps$1 {
-    tblHead: React.ReactNode;
-    tblBody: React.ReactNode;
-    tblCaption?: React.ReactNode;
-}
-/**
- * Render the table placing `caption`, `thead` and `tbody` in the correct order
- * caption is optional
- */
-declare const RenderTable: {
-    ({ tblBody, tblCaption, tblHead }: TableProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-declare const Caption: {
-    ({ children, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Thead: {
-    ({ children, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Tbody: {
-    ({ children, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Tr: {
-    ({ children, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Td: {
-    ({ children, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-declare const Table: {
-    ({ id, dataStyle, children, ...props }: ComponentProps$1): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type TextElements = 'p' | 'span' | 'a' | 'strong' | 'em' | 'small' | 's' | 'cite' | 'time' | 'code' | 'kbd' | 'sub' | 'sup' | 'i' | 'b' | 'u' | 'mark' | 'span' | 'blockquote';
-interface TextProps {
-    /**
-     * HTML element
-     */
-    elm?: TextElements;
-    children?: React__default.ReactNode;
-    text?: string;
-    styles?: {};
-}
-declare const Text: {
-    ({ elm, text, styles, children, ...props }: TextProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-interface TitleProps {
-    /**
-     * HTML headings
-     */
-    elm?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    children?: React__default.ReactNode;
-    styles?: {};
-}
-declare const Title: {
-    ({ elm, children, styles, ...props }: TitleProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-interface TextareaProps extends SharedInputProps {
-    /**
-     * The number of lines in textarea
-     */
-    rows?: number;
-    /**
-     * The number of columns in textarea
-     */
-    cols?: number;
-    /**
-     * Textarea react ref
-     */
-    textareaRef?: React.RefObject<HTMLTextAreaElement>;
-    /**
-     * Textarea change event handler
-     */
-    textareaChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * Textarea area blur event handler
-     */
-    textareaBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
-    /**
-     * Textarea keydown event handler
-     */
-    textareaDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
-}
-declare const Textarea: {
-    ({ value, rows, cols, id, required, disabled, readonly, textareaBlur, textareaChange, textareaDown, textareaRef, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-type PolymorphicRef<C extends React__default.ElementType> = React__default.ComponentPropsWithRef<C>['ref'];
-type AsProp<C extends React__default.ElementType> = {
-    as?: C;
-};
-type PropsToOmit<C extends React__default.ElementType, P> = keyof (AsProp<C> & P);
-type PolymorphicComponentProp<C extends React__default.ElementType, Props = {}> = React__default.PropsWithChildren<Props & AsProp<C>> & Omit<React__default.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
-type PolymorphicComponentPropWithRef<C extends React__default.ElementType, Props = {}> = PolymorphicComponentProp<C, Props> & {
-    ref?: PolymorphicRef<C>;
-};
-type FPProps<C extends React__default.ElementType> = PolymorphicComponentPropWithRef<C, {
-    renderStyles?: boolean;
-    styles?: {};
-}>;
-type FPComponent = <C extends React__default.ElementType = 'span'>(props: FPProps<C>) => React__default.ReactElement | any;
-/**
- * FP component is a polymorphic component that renders an HTML element with optional styles.
- * @param {Object} props - Component props
- * @param {React.ElementType} props.as - The HTML element to render. Defaults to 'div'.
- * @param {boolean} props.renderStyles - Whether to render styles or not. Defaults to true.
- * @param {Object} props.styles - The styles to apply to the component.
- * @param {Object} props.defaultStyles - The default styles to apply to the component.
- * @param {React.ReactNode} props.children - The children to render inside the component.
- * @returns {React.ReactElement} - A React component that renders an HTML element with optional styles.
- */
-declare const FP: FPComponent;
-
-export { Article, Aside, Badge, FP as Box, Button, Caption, Card, Dialog, Dropdown, FP, Field, Footer, Header, Img, Input, Link, List, Main, Modal, Section, RenderTable as TBL, Table, FP as Tag, Tbody, Td, Text, Textarea, Thead, Title, Link as To, Tr };

package/dist/index.js

@@ -1,11 +0,0 @@
-import { a } from './chunk-GJWMCDFS.js';
-import { c, b, a as a$1 } from './chunk-PCDUGD3C.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import Se from 'react';
-export { a as Box, a as FP, q as Icon, a as Tag } from './chunk-GJWMCDFS.js';
-
-const ae={paddingInline:"var(--badge-px, 0.7rem)",paddingBlock:"var(--badge-py, 0.2rem)",color:"var(--badge-cl, black)",fontSize:"var(--badge-fs, 0.8rem)",fontWeight:"var(--badge-fw, normal)",fontFamily:"var(--badge-ff, sans-serif)",border:"var(--badge-brd, none)",borderRadius:"var(--badge-rds, 99rem)",backgroundColor:'var(--badge-bg, "blue")',textDecoration:"var(--badge-decoration, none)",textTransform:"var(--badge-tt, var(--tt))"}; const D=i=>{const m=i; const {elm:o="span",role:t,children:r,renderStyles:e=!0,styles:a$2={}}=m; const p=c(m,["elm","role","children","renderStyles","styles"]);return jsx(a,b(a$1({as:o,role:t,styles:a$2},p),{children:r}))};D.styles=ae;D.displayName="Badge";const se={paddingInline:"var(--btn-px, 1.4rem)",paddingBlock:"var(--btn-py, 0.8rem)",display:"var(--btn-dsp, inline-flex)",placeItems:"var(--btn-place, center)",justifyContent:"var(--btn-justify, center)",cursor:"var(--btn-cursor, pointer)",border:"var(--btn-border, none)",color:"var(--btn-color, white)",backgroundColor:"var(--btn-bg, royalblue)",borderRadius:"var(--btn-radius, 0.2rem)"}; const E=c$1=>{const f=c$1; const {type:o="button",children:t,styles:r,disabled:e,classes:a,pointerDown:p,pointerOver:i,pointerLeave:m}=f; const y=c(f,["type","children","styles","disabled","classes","pointerDown","pointerOver","pointerLeave"]);return jsx("button",b(a$1({type:o,onPointerOver:v=>{e||i==null||i(v);},onPointerDown:v=>{e||p==null||p(v);},onPointerLeave:v=>{e||m==null||m(v);},style:r,"aria-disabled":e},y),{children:t}))};E.styles=se;E.displayName="Button";const pe={padding:"var(--card-p, 2rem)",backgroundColor:"var(--card-bg, white)",boxShadow:"var(--card-shadow, 0 0 0.5rem 0.1rem rgba(0, 0, 0, 0.1))",borderRadius:"var(--card-rds, 0.2\xDFrem)",border:"var(--card-brd, none)",color:"var(--card-cl, black)"}; const A=m=>{const y=m; const {elm:o="div",styles:t,children:r,renderStyles:e=!0,dataStyle:a$2,id:p}=y; const i=c(y,["elm","styles","children","renderStyles","dataStyle","id"]);return jsx(a,b(a$1({as:o,id:p,styles:t,renderStyles:e,"data-card":a$2},i),{children:r}))};A.styles=pe;A.displayName="Card";const L=p=>{const i=p; const {id:o,children:t,modalRef:r,openOnMount:e}=i; const a$2=c(i,["id","children","modalRef","openOnMount"]);return jsx(a,b(a$1({as:"dialog",id:o,ref:r,open:e,onClick:y=>{y.currentTarget===y.target&&y.currentTarget.close();}},a$2),{children:t}))};L.displayName="Dialog";const me={padding:"var(--card-p, 1.2rem)",backgroundColor:"var(--card-bg, white)"}; const F=i=>{const m=i; const {title:o,children:t,styles:r,renderStyles:e=!0,onToggle:a$1}=m;c(m,["title","children","styles","renderStyles","onToggle"]);return jsx(a,{as:"details",title:o,onToggle:c=>{a$1==null||a$1(c);},styles:r,children:t})};F.styles=me;F.displayName="Details";const ye={listStyle:"none",justifyContent:"var(--summary-justify, space-between)",color:"var(--summary-color, currentColor)",cursor:"var(--detail-cursor, pointer)"}; const N=a$2=>{const p=a$2; const {children:o,styles:t,renderStyles:r=!0}=p; const e=c(p,["children","styles","renderStyles"]);return jsx(a,b(a$1({as:"summary",styles:t},e),{children:o}))};N.styles=ye;N.displayName="Summary";const ue={display:"flex",placeContent:"flex-start",placeItems:"center",gap:".7rem",border:"var(--summary-border, solid 1px #ccc)",transition:"all 0.2s ease",backgroundColor:"var(--summary-bg, whitesmoke)",padding:"var(--details-pd, 1.2rem)",minWidth:"var(--summary-min-w, 80vw)",maxWidth:"var(--summary-min-w, 80vw)"}; const M=i=>{const m=i; const {styles:o,children:t,summary:r,toggle:e,renderStyles:a=!0}=m; const p=c(m,["styles","children","summary","toggle","renderStyles"]);return jsxs(F,b(a$1({styles:o,onToggle:e},p),{children:[jsx(N,{children:r}),t]}))};M.styles=ue;M.Summary=N;M.Details=F;M.displayName="Dropdown";const xe={}; const O=p=>{const i=p; const {labelFor:o,styles:t,label:r,children:e}=i;c(i,["labelFor","styles","label","children"]);return jsxs(a,{as:"div",styles:t,"data-style":"fields",children:[jsx("label",{htmlFor:o,children:r}),e]})};O.styles=xe;O.displayName="Field";const V=e=>{const a$2=e; const {children:o,styles:t={}}=a$2; const r=c(a$2,["children","styles"]);return jsx(a,b(a$1({as:"header"},r),{styles:t,children:jsx(a,{as:"section",children:o})}))}; const X=e=>{const a$2=e; const {children:o,styles:t={}}=a$2; const r=c(a$2,["children","styles"]);return jsx(a,b(a$1({as:"main",styles:t},r),{children:o}))}; const _=e=>{const a$2=e; const {children:o,styles:t={}}=a$2; const r=c(a$2,["children","styles"]);return jsx(a,b(a$1({as:"footer",styles:t},r),{children:jsx(a,{as:"section",children:o||"Copyright \xA9 2022"})}))}; const G=e=>{const a$2=e; const {children:o,styles:t={}}=a$2; const r=c(a$2,["children","styles"]);return jsx(a,b(a$1({as:"aside",styles:t},r),{children:jsx(a,{as:"section",children:o})}))}; const Q=e=>{const a$2=e; const {children:o,styles:t={}}=a$2; const r=c(a$2,["children","styles"]);return jsx(a,b(a$1({as:"section",styles:t},r),{children:o}))}; const U=e=>{const a$2=e; const {children:o,styles:t={}}=a$2; const r=c(a$2,["children","styles"]);return jsx(a,b(a$1({as:"article",styles:t},r),{children:o}))};V.displayName="Header";X.displayName="Main";_.displayName="Footer";G.displayName="Aside";Q.displayName="Section";U.displayName="Article";const he={maxWidth:"var(--img-w, 100%)",height:"var(--img-h, auto)",objectFit:"var(--img-obj-fit, cover)",objectPosition:"var(--img-position, center center)",aspectRatio:"var(--img-ratio, auto 2/3)",display:"var(--img-display, initial)"}; const K=b=>{const P=b; const {src:o,alt:t,width:r=480,height:e,styles:a$2,loading:p="lazy",placeholder:i=`https://via.placeholder.com/${r}?text=PLACEHOLDER`,fetchpriority:m="low",decoding:y="auto",imgLoaded:c$1,imgError:f}=P; const u=c(P,["src","alt","width","height","styles","loading","placeholder","fetchpriority","decoding","imgLoaded","imgError"]);return jsx(a,a$1({as:"img",src:o,alt:t,width:r,height:e||"auto",loading:p,style:a$2,onError:x=>{if(f){f==null||f(x);return}x.currentTarget.src!==i&&(x.currentTarget.src=i);},onLoad:x=>{c$1==null||c$1(x);}},u))};K.styles=he;K.displayName="Img";const Re={minWidth:"var(--input-min-w, 60%)"}; const W=k=>{const x=k; const {type:o="text",name:t,value:r,placeholder:e,id:a$2,styles:p,classes:i,isDisabled:m,readonly:y,required:c$1,inputRef:f,inputChange:u,inputBlur:b,inputDown:P}=x; const v=c(x,["type","name","value","placeholder","id","styles","classes","isDisabled","readonly","required","inputRef","inputChange","inputBlur","inputDown"]);return jsx(a,a$1({as:"input",id:a$2,type:o,placeholder:e,className:i,styles:p,onChange:C=>{u&&!m&&(u==null||u(C));},onBlur:C=>{b&&!m&&(b==null||b(C));},onKeyDown:C=>{P&&!m&&(C.preventDefault(),P==null||P(C));},value:r,name:t,ref:f,"aria-disabled":m,"tab-index":m?-1:void 0,"aria-readonly":y,readOnly:y},v))};W.styles=Re;W.displayName="Input";const q=y=>{const c$1=y; const {href:o,target:t,rel:r,children:e,styles:a$2={},prefetch:p=!0,onPointerDown:i}=c$1; const m=c(c$1,["href","target","rel","children","styles","prefetch","onPointerDown"]);let f=r;return t==="_blank"&&(f=`noopener noreferrer ${p?"prefetch":""}`),jsx(a,b(a$1({as:"a",href:o,target:t,styles:a$2,rel:f,onPointerDown:b=>{i&&(i==null||i(b));}},m),{children:e!=null?e:"Link"}))}; const Ee=q;q.displayName="Link";const Ne=i=>{const m=i; const {children:o,classes:t,type:r="ul",variant:e,styles:a$2}=m; const p=c(m,["children","classes","type","variant","styles"]);return jsx(a,b(a$1({as:r,"data-variant":e,className:t,style:a$2},p),{children:o}))};const Y=m=>{const y=m; const {openChild:o,closeChild:t,modalHeader:r,modalFooter:e,children:a,showOpen:p=!1}=y; const i=c(y,["openChild","closeChild","modalHeader","modalFooter","children","showOpen"]);const c$1=Se.useRef(null); const f=()=>{c$1.current&&(p?c$1.current.show():c$1.current.showModal());}; const u=()=>{c$1.current&&c$1.current.close();};return jsxs(Fragment,{children:[jsx(L,b(a$1({modalRef:c$1,openOnMount:p},i),{children:jsxs("section",{children:[r,a,e!=null?e:jsxs("div",{children:[jsx(E,{type:"button",pointerDown:()=>{u();},children:t||"Close"})," "]})]})})),!p&&jsx(E,{type:"button",pointerDown:f,children:o||"Open Modal"})]})};Y.displayName="Modal";const H=r=>{const e=r; const {children:o}=e; const t=c(e,["children"]);return jsx(a,b(a$1({as:"caption"},t),{children:o}))}; const I=r=>{const e=r; const {children:o}=e; const t=c(e,["children"]);return jsx(a,b(a$1({as:"thead"},t),{children:o}))}; const S=r=>{const e=r; const {children:o}=e; const t=c(e,["children"]);return jsx(a,b(a$1({as:"tbody"},t),{children:o}))}; const w=r=>{const e=r; const {children:o}=e; const t=c(e,["children"]);return jsx(a,b(a$1({as:"tr"},t),{children:o}))}; const Z=r=>{const e=r; const {children:o}=e; const t=c(e,["children"]);return jsx(a,b(a$1({as:"td"},t),{children:o}))}; const B=a$2=>{const p=a$2; const {id:o,dataStyle:t,children:r}=p; const e=c(p,["id","dataStyle","children"]);return jsx(a,b(a$1({as:"section",id:o},e),{"data-style":"table-wrapper",children:jsx("table",{children:r})}))};B.displayName="Table";H.displayName="Caption";I.displayName="Thead";S.displayName="Tbody";w.displayName="Tr";Z.displayName="Td";const j=({tblBody:o,tblCaption:t,tblHead:r})=>jsxs(B,{children:[t&&jsx(H,{children:t}),jsx(I,{children:jsx(w,{children:r})}),jsx(S,{children:o})]});j.displayName="TBL";const ee=p=>{const i=p; const {elm:o="p",text:t,styles:r,children:e}=i; const a$2=c(i,["elm","text","styles","children"]);return jsx(a,b(a$1({as:o,styles:r},a$2),{children:e||t}))}; const te=a$2=>{const p=a$2; const {elm:o="h3",children:t,styles:r}=p; const e=c(p,["elm","children","styles"]);return jsx(a,b(a$1({as:o,styles:r},e),{children:t}))};ee.displayName="Text";te.displayName="Title";const ke={}; const oe=b=>{const P=b; const {value:o,rows:t,cols:r,id:e,required:a$2,disabled:p,readonly:i,textareaBlur:m,textareaChange:y,textareaDown:c$1,textareaRef:f}=P; const u=c(P,["value","rows","cols","id","required","disabled","readonly","textareaBlur","textareaChange","textareaDown","textareaRef"]);const v=R=>{y&&!p&&y(R);}; const k=R=>{m&&!p&&(m==null||m(R));}; const x=R=>{c$1&&!p&&(c$1==null||c$1(R));};return jsx(a,a$1({as:"textarea",ref:f,rows:t,cols:r,styles:a$1({},ke),"data-style":"textarea",id:e,required:a$2,value:o,"aria-disabled":p,readOnly:i,onChange:v,onBlur:k,onKeyDown:x},u))};oe.displayName="Textarea";
-
-export { U as Article, G as Aside, D as Badge, E as Button, H as Caption, A as Card, L as Dialog, M as Dropdown, O as Field, _ as Footer, V as Header, K as Img, W as Input, q as Link, Ne as List, X as Main, Y as Modal, Q as Section, j as TBL, B as Table, S as Tbody, Z as Td, ee as Text, oe as Textarea, I as Thead, te as Title, Ee as To, w as Tr };
-// # sourceMappingURL=out.js.map
-// # sourceMappingURL=index.js.map