@moneyforward/mfui-components 2.48.1

package/LICENSE

@@ -0,0 +1,40 @@
+# MFUI License
+
+Copyright (c) Money Forward, Inc.
+
+## 1. Purpose
+
+MFUI is a UI component library primarily intended for **internal use** in products and services developed by Money Forward.
+
+## 2. Grant of Permission
+
+Subject to the terms of this license, permission is hereby granted to use, copy, and modify MFUI **solely for non-commercial purposes**.
+
+## 3. Restrictions
+
+The following uses are **explicitly prohibited** without prior written permission from Money Forward:
+
+* Any **commercial use**, including but not limited to:
+  * Use in products or services that are sold, licensed, or otherwise monetized
+  * Use in Software-as-a-Service (SaaS) or hosted services
+  * Use in client work, consulting, or contract-based development
+* Redistribution of MFUI, in whole or in part, whether modified or unmodified
+* Sub-licensing or transferring MFUI to third parties
+* Reverse engineering, decompiling, or disassembling the compiled assets of MFUI
+
+## 4. No Warranty
+
+MFUI 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 non-infringement.
+
+## 5. Limitation of Liability
+
+In no event shall Money Forward be liable for any claim, damages, or other liability arising from the use of MFUI.
+
+## 6. Third-Party Software
+
+MFUI may include or depend on third-party software licensed under open source licenses.
+Such third-party software is governed by its respective licenses and is **not subject to the restrictions of this license**.
+
+## 7. Governing Law and Jurisdiction
+
+This License shall be governed by the laws of Japan. Any disputes arising from this License shall be subject to the exclusive jurisdiction of the Tokyo District Court.

package/README.md

@@ -0,0 +1,160 @@
+# <img src="./logo_with_isolation.svg" alt="Money Forward UI"/>
+
+# MFUI Components
+
+React components for basic UI parts and layouts.
+
+- [Changelog](https://github.com/moneyforward/mfui/blob/main/packages/components/CHANGELOG.md)
+
+## Library Requirements
+
+MFUI requires certain libraries. Please check their versions.
+You can also check the recommended environment by referring to the libraries used in the projects under the `examples/` directory.
+
+### Requirements
+
+MFUI Components requires the following libraries with minimum versions:
+
+- React & React DOM: ≥18
+- TypeScript: ≥5.1.0
+
+### Notices
+
+The following libraries are not mandatory, but if you are using them, MFUI requires at least the versions listed below:
+
+- Tailwind CSS ≥3.4.2
+
+For detailed setup instructions with Tailwind CSS (v3 and v4), see the [Tailwind Integration Guide](https://github.com/moneyforward/mfui/blob/main/docs/usage/tailwind-integration.md).
+
+## Installation
+
+### 0. Set Up Access Token
+
+Before installing this package, read [How to Set Up Access Token](https://github.com/moneyforward/mfui/blob/main/docs/usage/set-up-access-token.md) and set up the access token on your local and your CI/CD pipeline.
+
+### 1. Install the Package
+
+Run the following command to install the package:
+
+```zsh
+npm install @moneyforward/mfui-components
+```
+
+### 2. Install the Peer Dependencies
+
+This package requires `react` and `react-dom` with version 17 or above as peer dependencies.
+
+```zsh
+npm install react react-dom
+```
+
+### 3. (Only Vite with SSR user) Add libraries to the noExternal dependencies
+
+<!--
+TODO: Remove this after we support providing ES Modules.
+This is a workaround to prevent error caused by untranspiled the package.
+In Vite with SSR mode, the libraries inside a node_modules won't be a target of bundle.
+However, since mfui libraries doesn't provide as ES Modules, it need to be transpiled.
+So after we support ES Modules, we can remove this step
+https://vite.dev/guide/ssr#ssr-externals
+-->
+
+If you're using Vite with Server Side Rendering feature, this step is required.
+Please add both `@moneyforward/mfui-components` and `@moneyforward/mfui-icons-react` to `ssr.noExternal` in your `vite.config.ts`.
+
+```ts
+export default defineConfig({
+  // Other configurations
+  ssr: {
+    noExternal: ['@moneyforward/mfui-components', '@moneyforward/mfui-icons-react'],
+  },
+});
+```
+
+## Usage
+
+### Import Styles to Your Global Stylesheet
+
+Add the following line into your global stylesheet (e.g. globals.css for Next.js application):
+
+```css
+@import url('@moneyforward/mfui-components/styles.css');
+```
+
+### Use Components
+
+This is the basic usage of Button. See the official documentation for all available components and how to use their properties.
+
+```tsx
+import { Button } from '@moneyforward/mfui-components';
+
+export function Foo() {
+  return <Button priority="primary">Label</Button>;
+}
+```
+
+### Use Icons
+
+Use icons by importing from `@moneyforward/mfui-icons-react`. See the official documentation for all available icons.
+
+```tsx
+import { Add } from '@moneyforward/mfui-icons-react';
+import { IconButton } from '@moneyforward/mfui-components';
+
+export function Bar() {
+  return (
+    <IconButton>
+      <Add />
+    </IconButton>
+  );
+}
+```
+
+### Reduce Bundle Size
+
+If bundle size is a concern, import components from their specific paths so that
+tree shaking works with Next.js and Vite.
+
+```tsx
+import { IconButton } from '@moneyforward/mfui-components/IconButton';
+```
+
+By importing components this way, unused code can be omitted from the final
+bundle.
+
+## About Experimental Features
+
+Some features may be released in an "Experimental" state. These features are primarily in one of the following situations:
+
+- Features whose specifications defined in the design standards have not received sufficient feedback from products
+- Features that have well-defined design standards but need validation for React component usability
+
+This experimental status allows us to gather practical feedback while ensuring the features meet our minimum quality standards.
+
+### Definition of Experimental
+
+- Breaking changes may occur
+- Some features may be missing or incomplete
+- Requirements may not be fully defined
+- A minimum quality standard of 60% is ensured
+- Expected to become stable in the next major release
+
+### Identifying Experimental Features
+
+Experimental features can be identified through:
+
+- An "Experimental" tag in Storybook
+- "Experimental" annotations in JSDoc
+
+### Providing Feedback
+
+You can provide feedback on experimental features through:
+
+- [GitHub Issues](https://github.com/moneyforward/mfui/issues) for bug reports and feature requests
+- [GitHub Discussions](https://github.com/moneyforward/mfui/discussions) for questions and ideas
+
+Your feedback will be used to improve features before their official release.
+
+---
+
+All company names, product and service names, and logos are trademarks or registered trademarks of their respective owners.

package/dist/cjs/src/Accordion/Accordion.d.ts

@@ -0,0 +1,67 @@
+import { type AccordionProps, type AccordionItemProps } from './Accordion.types';
+declare function AccordionBase({ children, size, width, defaultOpenItems }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ children, id, enableAutoUnmount }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The `Accordion` component.
+ *
+ * It renders a collapsible content container with expandable/collapsible sections.
+ *
+ * This component should be used as a wrapper for all Accordion composition components.
+ * The composition components are provided as sub-components of Accordion.
+ *
+ * **EXPERIMENTAL**: This component is experimental and may be changed or removed in the future.
+ *
+ * You can use them as follows:
+ *
+ * @example
+ * ```jsx
+ * <Accordion size="small" defaultOpenItems={['accordion-1']}>
+ *   <Accordion.Item id="accordion-1">
+ *     <Accordion.Trigger>Section 1</Accordion.Trigger>
+ *     <Accordion.Target>Content for section 1</Accordion.Target>
+ *   </Accordion.Item>
+ *   <Accordion.Item id="accordion-2">
+ *     <Accordion.Trigger>Section 2</Accordion.Trigger>
+ *     <Accordion.Target>Content for section 2</Accordion.Target>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
+export declare const Accordion: typeof AccordionBase & {
+    /**
+     * The `AccordionItem` component.
+     * This component should be used inside the `Accordion` component.
+     *
+     * Provides an expandable/collapsible section within an Accordion.
+     */
+    Item: typeof AccordionItem;
+    /**
+     * The `AccordionTarget` component.
+     * This component should be used inside the `AccordionItem` component.
+     *
+     * The collapsible content area that is shown/hidden when the trigger is activated.
+     *
+     * It renders and extends the props of `div` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+     */
+    Target: import("react").ForwardRefExoticComponent<{
+        className?: string;
+        children: import("react").ReactNode;
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * The `AccordionTrigger` component.
+     * This component should be used inside the `AccordionItem` component.
+     *
+     * The trigger button that toggles the accordion target's visibility.
+     *
+     * It renders and extends the props of `button` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+     */
+    Trigger: import("react").ForwardRefExoticComponent<{
+        className?: string;
+        children: import("react").ReactNode;
+    } & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export {};

package/dist/cjs/src/Accordion/Accordion.js

@@ -0,0 +1,139 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const css_1 = require("../../styled-system/css");
+const recipes_1 = require("../../styled-system/recipes");
+const Typography_1 = require("../Typography");
+const FocusIndicator_1 = require("../FocusIndicator");
+const AccordionContext = (0, react_1.createContext)(null);
+const AccordionItemContext = (0, react_1.createContext)(null);
+const useAccordionContext = () => {
+    const context = (0, react_1.useContext)(AccordionContext);
+    if (!context) {
+        throw new Error('Accordion compound components cannot be rendered outside the Accordion component');
+    }
+    return context;
+};
+const useAccordionItemContext = () => {
+    const context = (0, react_1.useContext)(AccordionItemContext);
+    if (!context) {
+        throw new Error('Accordion.Trigger and Accordion.Target must be rendered inside the Accordion.Item component');
+    }
+    return context;
+};
+function AccordionBase({ children, size = 'medium', width, defaultOpenItems = [] }) {
+    const defaultOpenItemsMap = (0, react_1.useMemo)(() => Object.fromEntries(defaultOpenItems.map((id) => [id, true])), [defaultOpenItems]);
+    const [openItems, setOpenItems] = (0, react_1.useState)(defaultOpenItemsMap);
+    const toggleItem = (0, react_1.useCallback)((id) => {
+        setOpenItems((previous) => ({
+            ...previous,
+            [id]: !previous[id],
+        }));
+    }, []);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        size,
+        openItems,
+        toggleItem,
+    }), [size, openItems, toggleItem]);
+    const containerStyle = {
+        ...(width && { width }),
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: (0, jsx_runtime_1.jsx)(AccordionContext.Provider, { value: contextValue, children: children }) }));
+}
+function AccordionItem({ children, id, enableAutoUnmount = true }) {
+    const { openItems, toggleItem } = useAccordionContext();
+    const isOpen = openItems[id] || false;
+    const toggle = (0, react_1.useCallback)(() => {
+        toggleItem(id);
+    }, [toggleItem, id]);
+    const contextValue = (0, react_1.useMemo)(() => ({
+        isOpen,
+        toggle,
+        enableAutoUnmount,
+        id,
+    }), [isOpen, toggle, enableAutoUnmount, id]);
+    return ((0, jsx_runtime_1.jsx)("section", { children: (0, jsx_runtime_1.jsx)(AccordionItemContext.Provider, { value: contextValue, children: children }) }));
+}
+const AccordionTrigger = (0, react_1.forwardRef)(({ children, className, onClick, ...props }, ref) => {
+    const { size } = useAccordionContext();
+    const { isOpen, toggle, id } = useAccordionItemContext();
+    const classes = (0, recipes_1.accordionSlotRecipe)({ isOpen, size });
+    const handleClick = (0, react_1.useCallback)((event) => {
+        toggle();
+        onClick?.(event);
+    }, [onClick, toggle]);
+    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsxs)("button", { ref: ref, className: (0, css_1.cx)(classes.trigger, 'mfui-Accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": id, onClick: handleClick, ...props, children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: children }), isOpen ? (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicExpanded, {}) : (0, jsx_runtime_1.jsx)(mfui_icons_react_1.DisclosureBasicCollapsed, {})] }) }));
+});
+const AccordionTarget = (0, react_1.forwardRef)(({ children, className, style, ...props }, ref) => {
+    const { size } = useAccordionContext();
+    const { isOpen, enableAutoUnmount, id } = useAccordionItemContext();
+    const classes = (0, recipes_1.accordionSlotRecipe)({ isOpen, size });
+    if (enableAutoUnmount && !isOpen) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, id: id, className: (0, css_1.cx)(classes.target, 'mfui-Accordion__target', className), style: {
+            ...style,
+            display: !enableAutoUnmount && !isOpen ? 'none' : undefined,
+        }, ...props, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body", children: children }) }));
+});
+/**
+ * The `Accordion` component.
+ *
+ * It renders a collapsible content container with expandable/collapsible sections.
+ *
+ * This component should be used as a wrapper for all Accordion composition components.
+ * The composition components are provided as sub-components of Accordion.
+ *
+ * **EXPERIMENTAL**: This component is experimental and may be changed or removed in the future.
+ *
+ * You can use them as follows:
+ *
+ * @example
+ * ```jsx
+ * <Accordion size="small" defaultOpenItems={['accordion-1']}>
+ *   <Accordion.Item id="accordion-1">
+ *     <Accordion.Trigger>Section 1</Accordion.Trigger>
+ *     <Accordion.Target>Content for section 1</Accordion.Target>
+ *   </Accordion.Item>
+ *   <Accordion.Item id="accordion-2">
+ *     <Accordion.Trigger>Section 2</Accordion.Trigger>
+ *     <Accordion.Target>Content for section 2</Accordion.Target>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
+exports.Accordion = Object.assign(AccordionBase, {
+    /**
+     * The `AccordionItem` component.
+     * This component should be used inside the `Accordion` component.
+     *
+     * Provides an expandable/collapsible section within an Accordion.
+     */
+    Item: AccordionItem,
+    /**
+     * The `AccordionTarget` component.
+     * This component should be used inside the `AccordionItem` component.
+     *
+     * The collapsible content area that is shown/hidden when the trigger is activated.
+     *
+     * It renders and extends the props of `div` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
+     */
+    Target: AccordionTarget,
+    /**
+     * The `AccordionTrigger` component.
+     * This component should be used inside the `AccordionItem` component.
+     *
+     * The trigger button that toggles the accordion target's visibility.
+     *
+     * It renders and extends the props of `button` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+     */
+    Trigger: AccordionTrigger,
+});

package/dist/cjs/src/Accordion/Accordion.types.d.ts

@@ -0,0 +1,71 @@
+import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from 'react';
+import { type AccordionSlotRecipeVariant } from '../../styled-system/recipes';
+/**
+ * Props for the Accordion wrapper component
+ */
+export type AccordionProps = {
+    /**
+     * The content to be rendered inside the Accordion component
+     */
+    children: ReactNode;
+    /**
+     * The size of the accordion
+     *
+     * @default medium
+     */
+    size?: AccordionSlotRecipeVariant['size'];
+    /**
+     * Custom width for the accordion
+     */
+    width?: CSSProperties['width'];
+    /**
+     * Default open state for each accordion item by ID
+     */
+    defaultOpenItems?: string[];
+};
+/**
+ * Props for the Accordion.Item component
+ */
+export type AccordionItemProps = {
+    /**
+     * The content to be rendered inside the Accordion.Item component
+     */
+    children: ReactNode;
+    /**
+     * The unique identifier for this accordion item
+     */
+    id: string;
+    /**
+     * Enable auto unmounting of the target content when it's not displayed.
+     * When true, the target content will return null instead of hiding via CSS.
+     *
+     * @default true
+     */
+    enableAutoUnmount?: boolean;
+};
+/**
+ * Props for the Accordion.Trigger component
+ */
+export type AccordionTriggerProps = {
+    /**
+     * Additional class name for the trigger element
+     */
+    className?: string;
+    /**
+     * The content to be rendered inside the trigger
+     */
+    children: ReactNode;
+} & ComponentPropsWithoutRef<'button'>;
+/**
+ * Props for the Accordion.Target component
+ */
+export type AccordionTargetProps = {
+    /**
+     * Additional class name for the target element
+     */
+    className?: string;
+    /**
+     * The content to be rendered inside the target
+     */
+    children: ReactNode;
+} & ComponentPropsWithoutRef<'div'>;

package/dist/cjs/src/Accordion/Accordion.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './Accordion';
+export type { AccordionProps, AccordionItemProps, AccordionTargetProps, AccordionTriggerProps, } from './Accordion.types';

package/dist/cjs/src/Accordion/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = void 0;
+var Accordion_1 = require("./Accordion");
+Object.defineProperty(exports, "Accordion", { enumerable: true, get: function () { return Accordion_1.Accordion; } });

package/dist/cjs/src/Badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import { type BadgeProps } from './Badge.types';
+/**
+ * The general-purpose Badge component.
+ * This component switches the variants of looks depends on the props: dot, count and children:
+ *  - If `dot` is `true`, the badge will be displayed as a dot.
+ *  - If `count` is not `undefined`, the badge will be displayed as a number calculated by `digit` prop.
+ *  - If `children` is not `undefined`, the badge will be displayed in the top-right corner of the children.
+ *   - In addition, the `aria-describedby` attribute will be added to the children to link the aria-label of the badge.
+ *
+ * Also extends the props of `<span>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/cjs/src/Badge/Badge.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const css_1 = require("../../styled-system/css");
+const recipes_1 = require("../../styled-system/recipes");
+const Typography_1 = require("../Typography");
+/**
+ * The general-purpose Badge component.
+ * This component switches the variants of looks depends on the props: dot, count and children:
+ *  - If `dot` is `true`, the badge will be displayed as a dot.
+ *  - If `count` is not `undefined`, the badge will be displayed as a number calculated by `digit` prop.
+ *  - If `children` is not `undefined`, the badge will be displayed in the top-right corner of the children.
+ *   - In addition, the `aria-describedby` attribute will be added to the children to link the aria-label of the badge.
+ *
+ * Also extends the props of `<span>` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
+ */
+exports.Badge = (0, react_1.forwardRef)(({ dot, count: number, digit, className, children, ...props }, ref) => {
+    const classes = (0, recipes_1.badgeSlotRecipe)({ hasChildren: children !== undefined });
+    const displayContent = (() => {
+        if (number === undefined)
+            return;
+        if (digit === undefined)
+            return String(number);
+        const maxValue = 10 ** digit - 1;
+        return number > maxValue ? `${String(maxValue)}+` : String(number);
+    })();
+    const badgeId = (0, react_1.useId)();
+    const displayBadge = dot !== undefined || number !== undefined;
+    // If the badge is not displayed, just return the children.
+    if (!displayBadge)
+        return children;
+    return ((0, jsx_runtime_1.jsxs)("span", { ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-Badge__root', className), id: badgeId, ...props, children: [children ? (0, react_1.cloneElement)(children, { 'aria-describedby': badgeId }) : null, (0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.indicator, 'mfui-Badge__indicator'), children: number !== undefined ? (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "condensedBody", children: displayContent }) : null })] }));
+});

package/dist/cjs/src/Badge/Badge.types.d.ts

@@ -0,0 +1,68 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type Exclusive } from '../types/helpers';
+type DotType = {
+    /**
+     * The badge will be displayed as a dot.
+     * This prop is exclusive to `count` and `digit` prop.
+     *
+     * If this undefined, the badge will not be displayed.
+     */
+    dot?: true;
+};
+type CountType = {
+    /**
+     * The count of the badge.
+     * This prop is exclusive to `digit` prop.
+     *
+     * If this undefined, the badge will not be displayed.
+     * If this is a number:
+     *  Display the count with a `+` sign if it exceeds the specified digit.
+     *  Display the count as is if it does not exceed the specified digit.
+     */
+    count?: number;
+    /**
+     * The digits of the count to display.
+     * This prop is exclusive to `count` prop.
+     *
+     * If this is not specified, the count will be displayed as is.
+     * If this is specified, the count will be displayed with a `+` sign if it exceeds the specified digit.
+     *
+     * @default undefined
+     */
+    digit?: number;
+};
+export type BadgeProps = {
+    /**
+     * The component which the badge will be displayed in the top-right corner.
+     *
+     * If `children` is `undefined`, the badge will be a standalone component.
+     *
+     * @default undefined
+     */
+    children?: ReactNode;
+    /**
+     * The class name of the component.
+     *
+     * @default undefined
+     */
+    className?: string;
+    /**
+     * The invisible label to specify how you want the badge to be recognized and read by screen readers.
+     * This prop is required.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label
+     *
+     * @example
+     * ```jsx
+     *  <Badge count={5} digit={2} aria-label="5件の新しい通知があります">
+     *    <IconButton aria-label="通知">
+     *      <Notification />
+     *    </IconButton>
+     *  </Badge>
+     *
+     * // The button will be described as "通知, 5件の新しい通知があります" by screen readers.
+     * ```
+     */
+    'aria-label': string;
+} & Exclusive<DotType, CountType> & ComponentPropsWithoutRef<'span'>;
+export {};

package/dist/cjs/src/Badge/Badge.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge.types';

package/dist/cjs/src/Badge/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+var Badge_1 = require("./Badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return Badge_1.Badge; } });

package/dist/cjs/src/Button/Button.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The general-purpose Button component.
+ * This component switches the variants of looks depends on the props: size, priority, destructive, disabled, leftIcon, isDropdownTrigger.
+ *
+ * Also extends the props of `<button>` element or `<a>` element depending on whether the href prop is provided.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<{
+    children: React.ReactNode;
+    disabled?: boolean;
+    size?: import("../../styled-system/recipes").ButtonSlotRecipeVariant["size"];
+    priority?: import("../../styled-system/recipes").ButtonSlotRecipeVariant["priority"];
+    destructive?: import("../../styled-system/recipes").ButtonSlotRecipeVariant["destructive"];
+    leftIcon?: React.ReactElement;
+    isDropdownTrigger?: boolean;
+    loading?: boolean;
+    rightIcon?: React.ReactElement;
+    href?: string;
+    customLinkComponent?: import("react").ElementType;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;