@tanishqkancharla/maui 0.0.2 → 0.0.9

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Tanishq Kancharla
+
+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/NOTICE

@@ -0,0 +1,4 @@
+Maui
+Copyright (c) 2026 Tanishq Kancharla
+
+Licensed under the MIT License. See LICENSE.

package/README.md

@@ -1,6 +1,71 @@
-Frontend app boilerplate built with esbuild, typescript, vercel.
+# Maui
 
+TypeScript-first design system styled with [`purse-styles`](https://www.npmjs.com/package/purse-styles). This repo is the design-system source and a gallery of tokens, components, patterns, and demo apps.
+
+**Gallery:** [maui.tanishqkancharla.dev](https://maui.tanishqkancharla.dev)
+
+Maui is open source under the MIT License and published on npm as `@tanishqkancharla/maui`.
+
+## Install
+
+Halo keeps the short `maui` import alias:
+
+```sh
+pnpm add maui@npm:@tanishqkancharla/maui@0.0.9
+```
+
+```json
+{
+	"dependencies": {
+		"maui": "npm:@tanishqkancharla/maui@0.0.9"
+	}
+}
+```
+
+The published tarball contains compiled `dist/` JavaScript and declarations. Installs do not run a Maui build.
+
+Wrap the app in `MauiProvider`, then import tokens and components:
+
+```tsx
+import { MauiProvider, Button } from "maui"
+
+function App() {
+	return (
+		<MauiProvider>
+			<Button>Hello</Button>
+		</MauiProvider>
+	)
+}
 ```
+
+Put the exported `themeFoucScript` in a classic inline `<script>` in `<head>` so `data-theme` is correct on first paint.
+
+## Develop
+
+```bash
+npm install
 npm run dev
-npm run build
 ```
+
+Vite serves the gallery at [http://localhost:5173/](http://localhost:5173/).
+
+| Script | What it does |
+| --- | --- |
+| `npm run dev` | Gallery dev server |
+| `npm run build` | Static gallery → `website/` |
+| `npm run build:lib` | Compile package ESM + types → `dist/` (generated, not committed) |
+| `npm run typecheck` | One-shot TypeScript check |
+| `npm run verify-package` | Pack and inspect the real tarball |
+| `npm run serve` | Preview the gallery build |
+
+## Package
+
+The default package export is compiled `dist/` JavaScript and declarations. TypeScript source remains available through the `source` export condition and `maui/src`. Patterns and demo apps in this repo are reference implementations, not part of the package barrel.
+
+Tag `vX.Y.Z` matching `package.json` to publish to npm through GitHub Actions.
+
+Agent conventions for consuming Maui: [`skills/maui`](./skills/maui/SKILL.md).
+
+## License
+
+Maui is available under the [MIT License](./LICENSE).

package/dist/MauiProvider.d.ts

@@ -1,3 +1,5 @@
+import "@fontsource/commit-mono/400.css";
+import "@fontsource/commit-mono/400-italic.css";
 import type { ReactNode } from "react";
 /**
  * Root provider for consuming Maui. Wraps theme (`data-theme`), purse-styles,

package/dist/MauiProvider.js

@@ -1,4 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference path="./css-modules.d.ts" />
+import "@fontsource/commit-mono/400.css";
+import "@fontsource/commit-mono/400-italic.css";
 import { PurseProvider, useInjectGlobalStyles } from "purse-styles";
 import { ThemeProvider } from "./theme/ThemeContext";
 import { UIDatabaseProvider } from "./UIDatabase/UIDatabase";

package/dist/UIDatabase/Focus.js

@@ -7,7 +7,7 @@ export const focusActions = {
         }
         const focusElement = {
             type: "element",
-            id: elementKey.last,
+            id: lastFocusKeySegment(elementKey),
         };
         tx.set(elementKey, focusElement);
     }),
@@ -23,7 +23,7 @@ export const focusActions = {
         }
         const scope = {
             type: "scope",
-            id: scopeKey.last,
+            id: lastFocusKeySegment(scopeKey),
             ...scopeProps,
         };
         tx.set(scopeKey, scope);
@@ -131,10 +131,11 @@ export const focusQueries = {
         return nextElement;
     },
     getFirstElementInScope(db, scopeKey) {
-        return focusQueries.getAllElementsInScope(db, scopeKey).first;
+        return focusQueries.getAllElementsInScope(db, scopeKey)[0];
     },
     getLastElementInScope(db, scopeKey) {
-        return focusQueries.getAllElementsInScope(db, scopeKey).last;
+        const elements = focusQueries.getAllElementsInScope(db, scopeKey);
+        return elements[elements.length - 1];
     },
     // TODO: Could have a different index just for elements that would make
     // this more efficient
@@ -147,14 +148,20 @@ export const focusQueries = {
     isElementFirstInScope(db, elementKey) {
         const parentScopeKey = elementKey.slice(0, -1);
         const elementsInScope = focusQueries.getAllElementsInScope(db, parentScopeKey);
-        const firstElementInScopeKey = elementsInScope[0].key;
-        return isEqual(firstElementInScopeKey, elementKey);
+        const firstElementInScope = elementsInScope[0];
+        if (firstElementInScope === undefined) {
+            return false;
+        }
+        return isEqual(firstElementInScope.key, elementKey);
     },
     isElementLastInScope(db, elementKey) {
         const parentScopeKey = elementKey.slice(0, -1);
         const elementsInScope = focusQueries.getAllElementsInScope(db, parentScopeKey);
-        const lastElementInScopeKey = elementsInScope[elementsInScope.length - 1].key;
-        return isEqual(lastElementInScopeKey, elementKey);
+        const lastElementInScope = elementsInScope[elementsInScope.length - 1];
+        if (lastElementInScope === undefined) {
+            return false;
+        }
+        return isEqual(lastElementInScope.key, elementKey);
     },
     getParentScope(db, elementKey) {
         const parentScopeKey = elementKey.slice(0, -1);
@@ -171,3 +178,10 @@ export const focusQueries = {
         return db.get(["activeFocus"]);
     },
 };
+function lastFocusKeySegment(key) {
+    const segment = key[key.length - 1];
+    if (segment === undefined) {
+        throw new Error("Focus tree key is missing an id segment");
+    }
+    return segment;
+}

package/dist/components/Avatar.js

@@ -58,8 +58,18 @@ function avatarColorIndex(seed) {
     }
     return Math.abs(hash) % avatarPalette.length;
 }
+function avatarPaletteForSeed(seed) {
+    const index = avatarColorIndex(seed);
+    if (index === 0)
+        return avatarPalette[0];
+    if (index === 1)
+        return avatarPalette[1];
+    if (index === 2)
+        return avatarPalette[2];
+    return avatarPalette[3];
+}
 const avatarClass = memoize((seed, size) => {
-    const palette = avatarPalette[avatarColorIndex(seed)];
+    const palette = avatarPaletteForSeed(seed);
     return style(text("2xs", 600, "highContrast"), radius.circle, {
         display: "grid",
         placeItems: "center",

package/dist/components/Button.d.ts

@@ -1,12 +1,18 @@
 import React from "react";
+import { type ColorName } from "../tokens/colors";
+export type ButtonVariant = "default" | "quiet" | "primary";
+/** Opaque hex or `rgb()`. Palette names stay ColorName (`"blue"` is Radix, not CSS `blue`). */
+export type ButtonCssColor = `#${string}` | `rgb(${string}`;
+export type ButtonVariantColor = ColorName | ButtonCssColor;
 type ButtonAttributes = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 type ButtonData = {
     id: string;
     focused: boolean;
 };
-type ButtonProps = Omit<ButtonAttributes, "children" | "ref"> & {
+export type ButtonProps = Omit<ButtonAttributes, "children" | "ref"> & {
     children: React.ReactNode;
-    variant?: "default" | "quiet";
+    variant?: ButtonVariant;
+    variantColor?: ButtonVariantColor;
 };
 export declare function useButton(props: ButtonProps): [ButtonData, ButtonAttributes];
 export declare function Button(props: ButtonProps): React.JSX.Element;

package/dist/components/Button.js

@@ -4,20 +4,22 @@ import { useId } from "react-aria";
 import { style, useStyles } from "purse-styles";
 import { useFocus } from "../hooks/useFocus";
 import { useRefCurrent } from "../hooks/useRefCurrent";
-import { backgroundColor } from "../tokens/background";
+import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/background";
 import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
 import { motion } from "../tokens/motion";
-import { shadow, shadowVars } from "../tokens/shadow";
+import { shadow, shadowVars, tintedSubtle } from "../tokens/shadow";
 import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
+import { memoize } from "../utils/memoize";
 const buttonBaseClass = style(text("xs", 400, "highContrast"), focusRing("&:focus-visible", shadowVars.subtle), motion.standard("box-shadow", "background-color", "color"), shadow.subtle, spacing.padding({ x: 6, y: 4 }), {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
-    gap: spacing.value(3),
+    gap: spacing.value(2),
     borderRadius: "4px",
     width: "fit-content",
+    height: "28px",
     border: "none",
     textOverflow: "ellipsis",
     overflow: "hidden",
@@ -61,6 +63,93 @@ const quietButtonClass = style(buttonBaseClass, focusRing("&:focus-visible"), {
         backgroundColor: backgroundColor.elementHover,
     },
 });
+const darkTextOnSolid = new Set([
+    "amber",
+    "lime",
+    "mint",
+    "sky",
+    "yellow",
+]);
+function isCssColor(value) {
+    return value.startsWith("#") || value.startsWith("rgb");
+}
+function paletteFill(name) {
+    return colors[name];
+}
+/** Drop origin alpha so custom fills stay solid. */
+function opaqueColor(color) {
+    return `oklch(from ${color} l c h / 1)`;
+}
+/** Hover/active of a one-off fill: same hue, a step darker. */
+function darkerFill(color) {
+    return `oklch(from ${color} calc(l - 0.04) c h)`;
+}
+/**
+ * White or near-black from fill lightness. Threshold sits between Radix
+ * orange-9 (white text) and amber-9 (dark text).
+ */
+function onSolidText(color) {
+    return `oklch(from ${color} clamp(0.2, (0.75 - l) * 100, 0.99) 0 0)`;
+}
+const coloredButtonClass = memoize((variant, color) => {
+    if (isCssColor(color)) {
+        const fill = opaqueColor(color);
+        if (variant === "primary") {
+            const edge = tintedSubtle(fill);
+            const hover = darkerFill(fill);
+            return style(buttonBaseClass, focusRing("&:focus-visible", edge), {
+                color: onSolidText(fill),
+                backgroundColor: fill,
+                boxShadow: edge,
+                "&:hover": {
+                    backgroundColor: hover,
+                },
+                "&:active": {
+                    backgroundColor: hover,
+                },
+            });
+        }
+        return style(buttonBaseClass, focusRing("&:focus-visible"), {
+            color: fill,
+            backgroundColor: surfaceWash(fill, surfaceMixPercent.hover, "transparent"),
+            boxShadow: "none",
+            "&:hover": {
+                color: darkerFill(fill),
+                backgroundColor: surfaceWash(fill, surfaceMixPercent.active, "transparent"),
+            },
+            "&:active": {
+                backgroundColor: surfaceWash(fill, surfaceMixPercent.active, "transparent"),
+            },
+        });
+    }
+    const scale = paletteFill(color);
+    if (variant === "primary") {
+        const edge = tintedSubtle(scale[9]);
+        return style(buttonBaseClass, focusRing("&:focus-visible", edge), {
+            color: darkTextOnSolid.has(color) ? scale[12] : "white",
+            backgroundColor: scale[9],
+            boxShadow: edge,
+            "&:hover": {
+                backgroundColor: scale[10],
+            },
+            "&:active": {
+                backgroundColor: scale[10],
+            },
+        });
+    }
+    return style(buttonBaseClass, focusRing("&:focus-visible"), {
+        color: scale[11],
+        backgroundColor: surfaceWash(scale[9], surfaceMixPercent.hover, "transparent"),
+        boxShadow: "none",
+        "&:hover": {
+            color: scale[12],
+            backgroundColor: surfaceWash(scale[9], surfaceMixPercent.active, "transparent"),
+        },
+        "&:active": {
+            backgroundColor: surfaceWash(scale[9], surfaceMixPercent.active, "transparent"),
+        },
+    });
+});
 export function useButton(props) {
     const ref = useRef(null);
     const id = useId();
@@ -81,13 +170,25 @@ export function useButton(props) {
     ];
 }
 export function Button(props) {
-    const { children, className: classNameProp, onClick, onFocus, type = "button", variant = "default", ...buttonProps } = props;
+    const { children, className: classNameProp, onClick, onFocus, type = "button", variant = "default", variantColor, ...buttonProps } = props;
     const [data, attributes] = useButton({ children, onClick, onFocus });
-    const className = useStyles(variant === "quiet" ? quietButtonClass : buttonClass);
+    const className = useStyles(buttonVariantClass(variant, variantColor));
     const textClassName = useStyles(buttonTextClass);
     const mergedClassName = [className, classNameProp].filter(Boolean).join(" ");
     return (_jsx("button", { ...buttonProps, ...attributes, type: type, className: mergedClassName, children: renderButtonChildren(children, textClassName) }));
 }
+function buttonVariantClass(variant, variantColor) {
+    if (variant === "primary") {
+        return coloredButtonClass("primary", variantColor ?? "accent");
+    }
+    if (variant === "quiet" && variantColor) {
+        return coloredButtonClass("quiet", variantColor);
+    }
+    if (variant === "quiet") {
+        return quietButtonClass;
+    }
+    return buttonClass;
+}
 function renderButtonChildren(children, className) {
     const rendered = [];
     let textRun = [];

package/dist/components/Checkbox.js

@@ -3,6 +3,7 @@ import { useRef } from "react";
 import { useCheckbox } from "react-aria";
 import { useToggleState } from "react-stately";
 import { style, useStyles } from "purse-styles";
+import { backgroundColor } from "../tokens/background";
 import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
 import { flex } from "../tokens/layout";
@@ -15,7 +16,7 @@ const checkboxClass = style(flex({ align: "center", gap: 3 }), focusRing("& .che
     position: "relative",
     width: "fit-content",
     "&:hover .checkbox-toggle": {
-        backgroundColor: colors.gray[8],
+        backgroundColor: backgroundColor.elementHover,
     },
     "& .checkbox-input:checked + .checkbox-toggle": {
         backgroundColor: colors.accent[9],
@@ -29,7 +30,7 @@ const checkboxToggleClass = style(flex({ align: "center", justify: "center" }),
     pointerEvents: "none",
     width: "14px",
     height: "14px",
-    backgroundColor: colors.gray[7],
+    backgroundColor: backgroundColor.element,
 });
 const checkboxIconClass = style(motion.standard("opacity", "transform"), {
     width: "10px",

package/dist/components/Code.d.ts

@@ -0,0 +1,5 @@
+import type React from "react";
+type CodeProps = React.HTMLAttributes<HTMLElement>;
+export declare function Code({ className, children, ...props }: CodeProps): React.JSX.Element;
+export declare function Kbd({ className, children, ...props }: CodeProps): React.JSX.Element;
+export {};

package/dist/components/Code.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { style, useStyles } from "purse-styles";
+import { colors } from "../tokens/colors";
+import { radius } from "../tokens/radius";
+import { spacing } from "../tokens/spacing";
+import { monospace, text } from "../tokens/text";
+const codeClass = style(monospace, radius.sm, spacing.padding({ x: 2, y: 1 }), {
+    backgroundColor: colors.gray[3],
+    color: colors.gray[12],
+    display: "inline",
+    boxDecorationBreak: "clone",
+    fontSize: "0.875em",
+    whiteSpace: "nowrap",
+});
+const kbdClass = style(text("xs", 400, "lowContrast"), radius.sm, {
+    backgroundColor: colors.gray[3],
+    boxDecorationBreak: "clone",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingInline: 3,
+    paddingBlock: 0,
+    whiteSpace: "nowrap",
+});
+export function Code({ className, children, ...props }) {
+    const codeClassName = useStyles(codeClass);
+    return (_jsx("code", { ...props, className: joinClassNames(codeClassName, className), children: children }));
+}
+export function Kbd({ className, children, ...props }) {
+    const kbdClassName = useStyles(kbdClass);
+    return (_jsx("kbd", { ...props, className: joinClassNames(kbdClassName, className), children: children }));
+}
+function joinClassNames(...classNames) {
+    return classNames.filter(Boolean).join(" ");
+}

package/dist/components/CodeBlock.js

@@ -17,9 +17,11 @@ const codeBlockClass = style(text("xs", 400, "highContrast"), monospace, shadow.
     padding: "12px",
     "& .shiki": {
         backgroundColor: "transparent !important",
+        fontFamily: "inherit",
     },
     "& .shiki code": {
         font: "inherit",
+        fontFamily: "inherit",
         fontSize: "inherit",
         lineHeight: "inherit",
         tabSize: "inherit",

package/dist/components/Dialog.js

@@ -2,13 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { animated, useSpring } from "@react-spring/web";
 import { style, useStyles } from "purse-styles";
 import { FocusScope } from "../hooks/useFocus";
+import { background } from "../tokens/background";
 import { border } from "../tokens/borders";
-import { colors } from "../tokens/colors";
 import { Overlay } from "./Overlay";
-const dialogStyle = style(border([], "border"), {
+const dialogStyle = style(background.element, border([], "border"), {
     flex: 1,
     borderRadius: "4px",
-    backgroundColor: colors.gray[2],
     margin: "15vh 20vw",
     padding: "32px",
 });

package/dist/components/Editor.d.ts

@@ -0,0 +1,19 @@
+import { type ProseSize } from "../tokens/prose";
+export type EditorProps = {
+    /** Markdown content. Updates are applied when this value changes. */
+    content?: string;
+    /** Called with the current markdown whenever the document changes. */
+    onChange?: (markdown: string) => void;
+    placeholder?: string;
+    size?: ProseSize;
+    editable?: boolean;
+    className?: string;
+    "aria-label"?: string;
+    onSubmit?: () => void;
+};
+/**
+ * TipTap markdown surface with CommonMark shortcuts (`#`, `**`, `-`, `>`, …)
+ * and Maui prose type styles on the ProseMirror tree. No chrome — wrap it
+ * for padding, elevation, and actions.
+ */
+export declare function Editor({ content, onChange, placeholder, size, editable, className, "aria-label": ariaLabel, onSubmit, }: EditorProps): import("react").JSX.Element;

package/dist/components/Editor.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { Markdown } from "@tiptap/markdown";
+import Placeholder from "@tiptap/extension-placeholder";
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import { style, useStyles } from "purse-styles";
+import { useRefCurrent } from "../hooks/useRefCurrent";
+import { colors } from "../tokens/colors";
+import { proseHtml } from "../tokens/prose";
+import { cls } from "../utils/cls";
+/**
+ * TipTap markdown surface with CommonMark shortcuts (`#`, `**`, `-`, `>`, …)
+ * and Maui prose type styles on the ProseMirror tree. No chrome — wrap it
+ * for padding, elevation, and actions.
+ */
+export function Editor({ content = "", onChange, placeholder = "Write…", size = "md", editable = true, className, "aria-label": ariaLabel = "Editor", onSubmit, }) {
+    const surfaceClassName = useStyles(editorClass);
+    const proseClassName = useStyles(proseHtml(size));
+    const onChangeRef = useRefCurrent(onChange);
+    const onSubmitRef = useRefCurrent(onSubmit);
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                heading: { levels: [1, 2, 3, 4] },
+                link: {
+                    openOnClick: false,
+                },
+            }),
+            Markdown,
+            Placeholder.configure({
+                placeholder,
+            }),
+        ],
+        content,
+        contentType: "markdown",
+        editable,
+        immediatelyRender: false,
+        editorProps: {
+            attributes: {
+                "aria-label": ariaLabel,
+                class: `maui-editor-prose ${proseClassName}`,
+            },
+            handleKeyDown: (_view, event) => {
+                if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
+                    event.preventDefault();
+                    onSubmitRef.current?.();
+                    return true;
+                }
+                return false;
+            },
+        },
+        onUpdate: ({ editor: current }) => {
+            onChangeRef.current?.(current.getMarkdown());
+        },
+    });
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setEditable(editable);
+    }, [editor, editable]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setOptions({
+            editorProps: {
+                ...editor.options.editorProps,
+                attributes: {
+                    ...editor.options.editorProps?.attributes,
+                    "aria-label": ariaLabel,
+                    class: `maui-editor-prose ${proseClassName}`,
+                },
+            },
+        });
+    }, [editor, ariaLabel, proseClassName]);
+    useEffect(() => {
+        if (!editor)
+            return;
+        const current = editor.getMarkdown();
+        if (content === current)
+            return;
+        editor.commands.setContent(content, { contentType: "markdown" });
+    }, [editor, content]);
+    return (_jsx(EditorContent, { editor: editor, className: cls(surfaceClassName, className) }));
+}
+const editorClass = style({
+    minWidth: 0,
+    width: "100%",
+    "& .ProseMirror": {
+        outline: "none",
+        minHeight: "2.75em",
+    },
+    "& .ProseMirror p.is-editor-empty:first-child::before": {
+        color: colors.gray[9],
+        content: "attr(data-placeholder)",
+        float: "left",
+        height: 0,
+        pointerEvents: "none",
+    },
+});

package/dist/components/Icons.d.ts

@@ -1,30 +1,2 @@
-import React from "react";
-declare function Search(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function CircleX(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function Plus(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function Minus(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function DotsHorizontal(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function ArrowDown(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function ArrowUp(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function Star(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function Archive(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function Trash(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function Envelope(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function Clock(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-declare function Pin(props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
-export declare const Icons: {
-    Search: typeof Search;
-    CircleX: typeof CircleX;
-    Plus: typeof Plus;
-    Minus: typeof Minus;
-    DotsHorizontal: typeof DotsHorizontal;
-    ArrowDown: typeof ArrowDown;
-    ArrowUp: typeof ArrowUp;
-    Star: typeof Star;
-    Archive: typeof Archive;
-    Trash: typeof Trash;
-    Envelope: typeof Envelope;
-    Clock: typeof Clock;
-    Pin: typeof Pin;
-};
-export {};
+export type { IconProps, IconSize } from "../icons/createIcon";
+export * as Icons from "../icons";