@marskat/skeui/dist/index.d.cts

A React component library for skeuomorphic aesthetics

import * as react_jsx_runtime from 'react/jsx-runtime';
import React$1 from 'react';

declare const aesthetics: readonly ["glassmorphic", "neumorphic"];
type Aesthetic = (typeof aesthetics)[number];
type CardProps = React.ComponentProps<"div"> & {
    aesthetic?: Aesthetic;
    inset?: boolean;
    isDarkMode?: boolean;
    fullyRounded?: boolean;
};
/**
 * A skeuomorphic card component.
 *
 * Wrap any element in this component to render it on the card.
 *
 * @property {Aesthetic} [aesthetic] - [Optional] Skeuomorphic styling. Choices are `glassmorphic` and `neumorphic`.  Default is `glassmorphic`.
 * @property {boolean} [isDarkMode] - [Optional] Adjust the shadow blending to lower the contrast for dark modes.  Default is `false`.
 * @property {boolean} [inset] - [Optional] Apply neumorphic inset.  Default is `false`.
 * @property {string} [fullyRounded] - [Optional] Applies full rounding.  Default is `false`.
 *
 * This type extends all standard HTML `<div>` element attributes.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div
 */
declare const Card: ({ children, className, inset, isDarkMode, fullyRounded, aesthetic, ...props }: CardProps) => react_jsx_runtime.JSX.Element;

type ButtonProps = React.ComponentProps<"button"> & {
    aesthetic?: Aesthetic;
    isDarkMode?: boolean;
};
/**
 * A neumorphic button component.
 *
 * Wrap any element in this component to render it on the button.
 *
 * @property {Aesthetic} [aesthetic] - [Optional] Skeuomorphic styling. Choices are `glassmorphic` and `neumorphic`.  Default is `glassmorphic`.
 * @property {boolean} [isDarkMode] - [Optional] Adjust the shadow blending to lower the contrast for dark modes.  Default is `false`.
 * This type extends all standard HTML `<button>` element attributes.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button
 */
declare const Button: ({ children, className, aesthetic, isDarkMode, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;

/**
 * Image used in a carousel slide.
 *
 * This type extends all standard HTML <img> element attributes.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img
 */
type SlideImage = React.ComponentProps<"img">;
/**
 * Custom indicators to be used in the bottom navigation of the carousel component.
 * It is optional to override the indicators, but both types must be overridden if any overriding is done.
 *
 * @property {React.ReactNode} on - What is rendered for an active page.
 * @property {React.ReactNode} off - What is rendered for an inactive page.
 */
type SlideIndicators = {
    on: React.ReactNode;
    off: React.ReactNode;
};
/**
 * Custom navigation buttons to be used for the previous and next buttons of the carousel component.
 * It is optional to override the navigation buttons, but both types must be overridden if any overriding is done.
 *
 * @property {React.ReactNode} prev - What is rendered for the previous button.
 * @property {React.ReactNode} next - What is rendered for the next button.
 */
type SlideNavButtons = {
    prev: React.ReactNode;
    next: React.ReactNode;
};
/**
 * Class names for overriding the appearance of the carousel component.
 *
 * @property {string} [card] - [Optional] Class name(s) for the carousel card, which is the container for the slide.
 * @property {string} [indicator] - [Optional] Class name(s) for the individual indicators.
 * @property {string} [indicators] - [Optional] Class name(s) for the indicators container.
 * @property {string} [navButtons] - [Optional] Class name(s) for the navigation buttons.
 */
type CarouselClassnames = {
    card?: string;
    indicator?: string;
    indicators?: string;
    navButtons?: string;
};
/**
 * A slide to be rendered as part of a carousel component.
 *
 * @property {SlideImage} desktopImage - Image to be rendered in the carousel for desktop resolutions (i.e. for larger breakpoints).
 * @property {SlideImage} [mobileImage] - [Optional] Image to be rendered in the carousel for mobile resolutions (i.e. for smaller breakpoints).
 * @property {React.ReactNode} [slideContent] - [Optional] What is to be rendered under the image, such as a title or description.
 */
type Slide = {
    desktopImage: SlideImage;
    mobileImage?: SlideImage;
    slideContent?: React.ReactNode;
};
type CarouselProps = React.ComponentProps<"div"> & {
    slides: Slide[];
    aesthetic?: Aesthetic;
    size?: {
        h?: string;
        w?: string;
    };
    indicators?: SlideIndicators;
    navButtons?: SlideNavButtons;
    classNames?: CarouselClassnames;
    isDarkMode?: boolean;
};
/**
 * A carousel component.
 *
 * @property {Slide[]} slides - The slides to display.
 * @property {Aesthetic} [aesthetic] - [Optional] Skeuomorphic styling. Choices are `glassmorphic` and `neumorphic`.  Default is `glassmorphic`.
 * @property {{h:string, w:string}} [size] - [Optional] Size of the card in any CSS-acceptable string.  This must be a static size to ensure the navigation buttons don't move when cycling through slides.  Default is `{ h: '28rem', w:'24rem' }`.
 * @property {SlideIndicators} [indicators] - [Optional] Indicators for the pages of the carousel.  Default is `{ on: '●', off: '○' }`.
 * @property {SlideNavButtons} [navButtons] - [Optional] Previous and next buttons for slide navigation.  Default is `{prev: <div title="previous slide">&lt;</div>, next: <div title="next slide">&gt;</div>}`.
 * @property {CarouselClassnames} [classNames] - [Optional] Class name overrides for various parts of the carousel anatomy.  Targets available are `card`, `indicator`, `indicators`, and `navButtons`.
 * @property {boolean} [isDarkMode] - [Optional] Adjust the shadow blending to lower the contrast for dark modes.  Default is `false`.
 */
declare const Carousel: ({ slides, size, indicators, navButtons, classNames, isDarkMode, ...props }: CarouselProps) => react_jsx_runtime.JSX.Element;

type NavBarProps = React.ComponentProps<"div"> & {
    placement?: "bottom" | "left" | "top" | "right";
    aesthetic?: Aesthetic;
    isDarkMode?: boolean;
};
/**
 * A skeuomorphic, sticky navigation bar component.
 *
 * @property {"bottom" | "left" | "top" | "right"} [placement] - Where to place the navigation bar.  Default is `bottom`.
 * @property {Aesthetic} [aesthetic] - [Optional] Skeuomorphic styling. Choices are `glassmorphic` and `neumorphic`.  Default is `glassmorphic`.
 * @property {boolean} [isDarkMode] - [Optional] Adjust the shadow blending to lower the contrast for dark modes.  Default is `false`.
 *
 * This type extends all standard HTML <div> element attributes.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div
 */
declare const NavBar: ({ children, className, placement, aesthetic, isDarkMode, ...props }: NavBarProps) => react_jsx_runtime.JSX.Element;

/**
 * Class names for overriding the appearance of the toggle component.
 *
 * @property {string} [thumb] - [Optional] Class name(s) for the thumb.
 * @property {string} [track] - [Optional] Class name(s) for the track.
 */
type ToggleClassnames = {
    thumb?: string;
    track?: string;
};
type ToggleProps = React$1.ComponentProps<"button"> & {
    aesthetic?: Aesthetic;
    isOn?: boolean;
    setIsOn?: React$1.Dispatch<React$1.SetStateAction<boolean>>;
    thumb?: React$1.ReactNode;
    classNames?: ToggleClassnames;
};
/**
 * A toggle component.
 *
 * @property {Aesthetic} [aesthetic] - [Optional] Skeuomorphic styling. Choices are `glassmorphic` and `neumorphic`.  Default is `glassmorphic`.
 * @property {boolean} [isOn] - [Optional] Controls the toggle's on/off position.  Default is `false`.
 * @property {React.Dispatch<React.SetStateAction<boolean>>} [setIsOn] - [Optional] The setState function to control isOn.  No default behavior.
 * @property {React.ReactNode} [thumb] - [Optional] The thumb component.  Default is `"⚪"`.
 * @property {ToggleClassnames} [classNames] - [Optional] Class name overrides for parts of the toggle anatomy.  Targets available are `thumb` and `track`.
 *
 * This type extends all standard HTML `<button>` element attributes.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button
 */
declare const Toggle: ({ aesthetic, isOn, setIsOn, thumb, classNames, ...props }: ToggleProps) => react_jsx_runtime.JSX.Element;

export { type Aesthetic, Button, type ButtonProps, Card, type CardProps, Carousel, type CarouselClassnames, type CarouselProps, NavBar, type Slide, type SlideImage, type SlideIndicators, type SlideNavButtons, Toggle, type ToggleClassnames, type ToggleProps };