@hemerson/design-system 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Hemerson Oliveira
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,79 @@
-# Temporary Holding Version
+# Hemerson Design System
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A dark-first design system with a sage-teal accent and liquid-glass navigation, built for React. It ships design tokens for a dark and a light theme, a stylesheet, and React components with a Storybook to browse them.
+
+## Install
+
+```bash
+npm install @hemerson/design-system
+```
+
+React 18.2 or later is required.
+
+```tsx
+import "@hemerson/design-system/styles.css";
+import { Button } from "@hemerson/design-system";
+
+export function Toolbar() {
+  return <Button variant="primary">Novo boleto</Button>;
+}
+```
+
+- **Themes:** set `data-theme="dark"` (the default) or `data-theme="light"` on `<html>`.
+- **Reduced transparency:** set `data-transparency="reduced"` on `<html>` to turn every glass surface solid. Offer it as a setting in your app.
+- **Fonts:** `styles.css` loads Raleway and JetBrains Mono from Google Fonts. To self-host them, import `tokens.css` and your own font files instead.
+
+## What's inside
+
+| Export | Contents |
+| --- | --- |
+| `@hemerson/design-system` | React components |
+| `@hemerson/design-system/styles.css` | Fonts, tokens and component styles |
+| `@hemerson/design-system/tokens.css` | CSS custom properties for both themes |
+| `@hemerson/design-system/tokens.json` | The tokens as data |
+
+## Development
+
+```bash
+npm install
+npm run dev          # Storybook on http://localhost:6006
+npm test             # unit tests
+npm run typecheck
+npm run lint
+npm run build        # the package, into dist/
+npm run build-storybook
+```
+
+Tokens live in [`tokens/tokens.json`](tokens/tokens.json); `npm run tokens` turns them into `src/styles/tokens.css`. Each component lives in `src/components/<Name>/` with its stories and tests.
+
+## Contributing
+
+Contributions are welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for how to set up the project and how contributors are credited.
+
+## Contributors
+
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[![All Contributors](https://img.shields.io/github/all-contributors/hemerson-git/hemerson-design-system?color=7ea8a7&style=flat-square)](#contributors)
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+Thanks to everyone who has contributed ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://hemerson-dev.vercel.app/pt-BR"><img src="https://avatars.githubusercontent.com/u/48595787?v=4?s=100" width="100px;" alt="Hemerson Oliveira"/><br /><sub><b>Hemerson Oliveira</b></sub></a><br /><a href="https://github.com/hemerson-git/hemerson-design-system/commits?author=hemerson-git" title="Code">💻</a> <a href="#design-hemerson-git" title="Design">🎨</a> <a href="https://github.com/hemerson-git/hemerson-design-system/commits?author=hemerson-git" title="Documentation">📖</a> <a href="https://github.com/hemerson-git/hemerson-design-system/commits?author=hemerson-git" title="Tests">⚠️</a> <a href="#infra-hemerson-git" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-hemerson-git" title="Maintenance">🚧</a></td>
+    </tr>
+  </tbody>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+## License
+
+[MIT](LICENSE)

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+export type BadgeTone = "neutral" | "accent" | "success" | "warning" | "danger";
+export interface BadgeProps {
+    tone?: BadgeTone;
+    /** A Lucide icon, or `false` for none. Status tones show their own icon by default. */
+    icon?: ReactNode | false;
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * A small pill that states a status or a category in one or two words.
+ * The word stays in ink; the tone shows in the icon and the tint, so color never carries the meaning alone.
+ */
+export declare function Badge({ tone, icon, children, className }: BadgeProps): import("react").JSX.Element;

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,17 @@
+import { type ButtonHTMLAttributes, type ReactNode } from "react";
+export type ButtonVariant = "primary" | "secondary" | "glass" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md" | "lg";
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** primary (one per view) · secondary · glass (over content or in glass bars) · ghost · danger (destructive). */
+    variant?: ButtonVariant;
+    /** sm 32px · md 40px · lg 56px, as on the portfolio. */
+    size?: ButtonSize;
+    /** A Lucide icon, shown before the label. */
+    icon?: ReactNode;
+    /** Shows only the icon. Requires `aria-label`. */
+    iconOnly?: boolean;
+    /** Shows a spinner, disables the button and sets `aria-busy`. */
+    loading?: boolean;
+}
+/** Triggers an action. Labels are set uppercase and bold, verb first. */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+export type { ButtonProps, ButtonSize, ButtonVariant } from "./Button";

package/dist/components/Card/Card.d.ts

@@ -0,0 +1,19 @@
+import type { ElementType, HTMLAttributes, ReactNode } from "react";
+export interface CardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** The element to render. Default `article`; use `a` with `href` for a link card. */
+    as?: ElementType;
+    href?: string;
+    /** An uppercase label above the title. */
+    eyebrow?: ReactNode;
+    title?: ReactNode;
+    media?: {
+        src: string;
+        alt?: string;
+    };
+    /** Actions or badges at the bottom. */
+    footer?: ReactNode;
+    /** The whole card is clickable; it scales up slightly on hover. */
+    interactive?: boolean;
+}
+/** A solid raised block that groups one item's content. */
+export declare function Card({ as: Tag, eyebrow, title, media, footer, interactive, className, children, ...rest }: CardProps): import("react").JSX.Element;

package/dist/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** States the "yes" ("Pago"), never a negative. */
+    label: ReactNode;
+    hint?: ReactNode;
+}
+/** A checkbox whose whole label is clickable. */
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,9 @@
+import type { ElementType, HTMLAttributes } from "react";
+export interface ContainerProps extends HTMLAttributes<HTMLElement> {
+    /** The element to render. Default `section`. */
+    as?: ElementType;
+    /** Adds the sidebar's width as left padding from 768px up. */
+    withSidebar?: boolean;
+}
+/** Centres page content at content-max, with a section's vertical rhythm and the side gutter. */
+export declare function Container({ as: Tag, withSidebar, className, ...rest }: ContainerProps): import("react").JSX.Element;

package/dist/components/Dialog/Dialog.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface DialogProps {
+    open: boolean;
+    /** Called on Escape, on the close button and on a click outside the panel. */
+    onClose: () => void;
+    title: ReactNode;
+    description?: ReactNode;
+    children?: ReactNode;
+    /** The buttons, main action last. */
+    footer?: ReactNode;
+    /** Accessible name of the close button. Default "Fechar". */
+    closeLabel?: string;
+    /** `panel` focuses the panel itself instead of its first control. */
+    initialFocus?: "first" | "panel";
+    className?: string;
+}
+/** A modal panel of thick glass for a focused task or a confirmation. */
+export declare function Dialog({ open, onClose, title, description, children, footer, closeLabel, initialFocus, className, }: DialogProps): import("react").ReactPortal | null;

package/dist/components/FloatingButton/FloatingButton.d.ts

@@ -0,0 +1,9 @@
+import { type ButtonHTMLAttributes } from "react";
+export type FloatingButtonPosition = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+export interface FloatingButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Accessible name and tooltip. */
+    label: string;
+    position?: FloatingButtonPosition;
+}
+/** A round glass button fixed to a corner of the viewport, for one persistent action. */
+export declare const FloatingButton: import("react").ForwardRefExoticComponent<FloatingButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/GlassPanel/GlassPanel.d.ts

@@ -0,0 +1,13 @@
+import { type ElementType, type HTMLAttributes } from "react";
+export type GlassTone = "regular" | "clear" | "thick" | "accent";
+export interface GlassPanelProps extends HTMLAttributes<HTMLElement> {
+    /** The element to render. Default `div`. */
+    as?: ElementType;
+    /**
+     * regular (default, the only tone for text) · clear (icon-only controls over the app's own surfaces)
+     * · thick (dialogs and sheets) · accent (one prominent floating control per view).
+     */
+    tone?: GlassTone;
+}
+/** Liquid glass: the material of every surface that floats above the content. */
+export declare const GlassPanel: import("react").ForwardRefExoticComponent<GlassPanelProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/GlowAvatar/GlowAvatar.d.ts

@@ -0,0 +1,10 @@
+export interface GlowAvatarProps {
+    src: string;
+    /** The person's name. */
+    alt: string;
+    /** Diameter in px. Default 96. */
+    size?: number;
+    className?: string;
+}
+/** A round photo ringed in the accent with a soft glow behind it. One per view. */
+export declare function GlowAvatar({ src, alt, size, className }: GlowAvatarProps): import("react").JSX.Element;

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,12 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    /** Always visible, written as a noun ("Beneficiário"). */
+    label: ReactNode;
+    hint?: ReactNode;
+    /** Says how to fix the value; also marks the input invalid. */
+    error?: ReactNode;
+    /** Mono, tabular figures and a decimal keyboard, for amounts and codes. */
+    numeric?: boolean;
+}
+/** A labelled text field on a solid, recessed well. */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,11 @@
+export interface LoadingProps {
+    /** sm 16px · md 24px · lg 32px. */
+    size?: "sm" | "md" | "lg";
+    /** Announced to screen readers. Default "Carregando…". */
+    label?: string;
+    /** Shows the label beside the spinner. */
+    showLabel?: boolean;
+    className?: string;
+}
+/** A spinner that tells assistive technology something is loading. */
+export declare function Loading({ size, label, showLabel, className }: LoadingProps): import("react").JSX.Element;

package/dist/components/Menu/Menu.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from "react";
+import { type ButtonVariant } from "../Button/Button";
+export type MenuItem = {
+    label: string;
+    icon?: ReactNode;
+    onSelect?: () => void;
+    danger?: boolean;
+    separator?: never;
+} | {
+    separator: true;
+};
+export interface MenuProps {
+    /** Trigger text, or its accessible name with `iconOnly`. */
+    label: string;
+    icon?: ReactNode;
+    iconOnly?: boolean;
+    items: MenuItem[];
+    /** Which edge of the trigger the list lines up with. Default `end`. */
+    align?: "start" | "end";
+    /** Default `glass`. */
+    triggerVariant?: ButtonVariant;
+    className?: string;
+}
+/** A button that opens a glass list of actions. */
+export declare function Menu({ label, icon, iconOnly, items, align, triggerVariant, className }: MenuProps): import("react").JSX.Element;

package/dist/components/NavBar/NavBar.d.ts

@@ -0,0 +1,20 @@
+import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from "react";
+export interface NavBarProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Product or page name on the left. */
+    title?: ReactNode;
+    /** Buttons on the right. */
+    actions?: ReactNode;
+    /** Name of the navigation landmark. Default "Principal". */
+    navLabel?: string;
+}
+export interface NavBarLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Marks the current page. */
+    active?: boolean;
+}
+declare function NavBarLink({ active, className, ...rest }: NavBarLinkProps): import("react").JSX.Element;
+declare function NavBarRoot({ title, actions, navLabel, className, children, ...rest }: NavBarProps): import("react").JSX.Element;
+/** The app's top bar: a floating glass capsule with the product name, the main sections and the global actions. */
+export declare const NavBar: typeof NavBarRoot & {
+    Link: typeof NavBarLink;
+};
+export {};

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "react";
+export interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    /** Accessible name of the region. */
+    label: string;
+    maxHeight?: number | string;
+}
+/** A focusable scrollable region with the brand's slim scrollbars. */
+export declare function ScrollArea({ label, maxHeight, className, style, ...rest }: ScrollAreaProps): import("react").JSX.Element;

package/dist/components/SectionTitle/SectionTitle.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export interface SectionTitleProps {
+    children: ReactNode;
+    /** Shown zero-padded (3 → "03") before the heading, only when sections are a sequence. */
+    index?: number;
+    /** Heading level. Default `h2`. */
+    as?: "h1" | "h2" | "h3" | "h4";
+    id?: string;
+    className?: string;
+}
+/** A page-section heading led by a glowing mono index, the portfolio's signature heading. */
+export declare function SectionTitle({ children, index, as: Tag, id, className }: SectionTitleProps): import("react").JSX.Element;

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export interface SegmentedOption<T extends string | number = string> {
+    value: T;
+    label?: ReactNode;
+    icon?: ReactNode;
+    /** Accessible name when the label is only an icon or a flag. */
+    ariaLabel?: string;
+}
+export interface SegmentedControlProps<T extends string | number = string> {
+    options: SegmentedOption<T>[];
+    /** The selected value, for a controlled control. */
+    value?: T;
+    /** The initially selected value, for an uncontrolled control. */
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+    /** Name of the group. */
+    label: string;
+    className?: string;
+}
+/** Switches between two to four exclusive options with a lit thumb that slides between them. */
+export declare function SegmentedControl<T extends string | number = string>({ options, value, defaultValue, onChange, label, className, }: SegmentedControlProps<T>): import("react").JSX.Element;

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode, type SelectHTMLAttributes } from "react";
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
+    label: ReactNode;
+    options: SelectOption[];
+    /** Shown as a disabled first option. */
+    placeholder?: string;
+    hint?: ReactNode;
+    error?: ReactNode;
+}
+/** A labelled native dropdown, styled like Input, for choosing one option from a short list. */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,8 @@
+export interface SeparatorProps {
+    orientation?: "horizontal" | "vertical";
+    /** Hides the line from screen readers when it only decorates. */
+    decorative?: boolean;
+    className?: string;
+}
+/** A 1px line that divides groups of content. */
+export declare function Separator({ orientation, decorative, className }: SeparatorProps): import("react").JSX.Element;

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export interface SidebarItem {
+    /** Accessible name and tooltip. */
+    label: string;
+    icon: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    active?: boolean;
+}
+export interface SidebarProps {
+    items: SidebarItem[];
+    /** Items pinned to the bottom, such as settings. */
+    footer?: ReactNode;
+    /** A free-floating capsule instead of a rail attached to the edge. */
+    floating?: boolean;
+    /** Name of the navigation landmark. Default "Navegação". */
+    label?: string;
+    className?: string;
+}
+/** A slim glass rail of icon buttons for the app's main sections. */
+export declare function Sidebar({ items, footer, floating, label, className }: SidebarProps): import("react").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+export interface TableColumn<Row> {
+    key: string;
+    header: ReactNode;
+    /** Mono, tabular figures, right-aligned. */
+    numeric?: boolean;
+    align?: "start" | "center";
+    /** Renders the cell from the row; by default the cell shows `row[key]`. */
+    render?: (row: Row) => ReactNode;
+}
+export interface TableProps<Row> {
+    columns: TableColumn<Row>[];
+    rows: Row[];
+    /** Key of each row's unique id. Default `id`. */
+    rowKey?: keyof Row & string;
+    /** Names the table and its scroll region. */
+    caption?: string;
+    /** Keeps the caption for screen readers only. */
+    hideCaption?: boolean;
+    /** Shown when there are no rows. Default "Nada para mostrar.". */
+    empty?: ReactNode;
+    maxHeight?: number | string;
+    className?: string;
+}
+/** A solid data table with a sticky header, roomy rows and aligned numbers. */
+export declare function Table<Row extends object>({ columns, rows, rowKey, caption, hideCaption, empty, maxHeight, className, }: TableProps<Row>): import("react").JSX.Element;

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export type ToastTone = "neutral" | "success" | "warning" | "danger";
+export interface ToastProps {
+    open: boolean;
+    onClose?: () => void;
+    tone?: ToastTone;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Milliseconds before it closes itself; 0 keeps it open. Default 5000. */
+    duration?: number;
+    /** Accessible name of the close button. Default "Fechar aviso". */
+    closeLabel?: string;
+    className?: string;
+}
+/** A short glass notice at the bottom of the screen that confirms an action or reports a problem. */
+export declare function Toast({ open, onClose, tone, title, description, duration, closeLabel, className, }: ToastProps): import("react").ReactPortal | null;

package/dist/glass/enableGlassRefraction.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Adds the SVG filter that makes glass refract its backdrop, and marks
+ * `<html data-glass-refraction>` so the styles use it.
+ *
+ * Only Chromium renders the effect. Firefox accepts it in `@supports` and then
+ * drops the whole backdrop-filter, blur included, so other browsers are left alone.
+ * Returns whether refraction was turned on.
+ */
+export declare function enableGlassRefraction(): boolean;

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+export { GlassPanel } from "./components/GlassPanel/GlassPanel";
+export type { GlassPanelProps, GlassTone } from "./components/GlassPanel/GlassPanel";
+export { enableGlassRefraction } from "./glass/enableGlassRefraction";
+export * from "./components/Button";
+export { NavBar } from "./components/NavBar/NavBar";
+export type { NavBarLinkProps, NavBarProps } from "./components/NavBar/NavBar";
+export { Sidebar } from "./components/Sidebar/Sidebar";
+export type { SidebarItem, SidebarProps } from "./components/Sidebar/Sidebar";
+export { SegmentedControl } from "./components/SegmentedControl/SegmentedControl";
+export type { SegmentedControlProps, SegmentedOption } from "./components/SegmentedControl/SegmentedControl";
+export { Menu } from "./components/Menu/Menu";
+export type { MenuItem, MenuProps } from "./components/Menu/Menu";
+export { FloatingButton } from "./components/FloatingButton/FloatingButton";
+export type { FloatingButtonPosition, FloatingButtonProps } from "./components/FloatingButton/FloatingButton";
+export { Dialog } from "./components/Dialog/Dialog";
+export type { DialogProps } from "./components/Dialog/Dialog";
+export { Toast } from "./components/Toast/Toast";
+export type { ToastProps, ToastTone } from "./components/Toast/Toast";
+export { Input } from "./components/Input/Input";
+export type { InputProps } from "./components/Input/Input";
+export { Select } from "./components/Select/Select";
+export type { SelectOption, SelectProps } from "./components/Select/Select";
+export { Checkbox } from "./components/Checkbox/Checkbox";
+export type { CheckboxProps } from "./components/Checkbox/Checkbox";
+export { Card } from "./components/Card/Card";
+export type { CardProps } from "./components/Card/Card";
+export { Badge } from "./components/Badge/Badge";
+export type { BadgeProps, BadgeTone } from "./components/Badge/Badge";
+export { Table } from "./components/Table/Table";
+export type { TableColumn, TableProps } from "./components/Table/Table";
+export { Container } from "./components/Container/Container";
+export type { ContainerProps } from "./components/Container/Container";
+export { SectionTitle } from "./components/SectionTitle/SectionTitle";
+export type { SectionTitleProps } from "./components/SectionTitle/SectionTitle";
+export { Separator } from "./components/Separator/Separator";
+export type { SeparatorProps } from "./components/Separator/Separator";
+export { ScrollArea } from "./components/ScrollArea/ScrollArea";
+export type { ScrollAreaProps } from "./components/ScrollArea/ScrollArea";
+export { Loading } from "./components/Loading/Loading";
+export type { LoadingProps } from "./components/Loading/Loading";
+export { GlowAvatar } from "./components/GlowAvatar/GlowAvatar";
+export type { GlowAvatarProps } from "./components/GlowAvatar/GlowAvatar";