npm - @serendie/ui - Versions diffs - 0.1.6 - Mend

@serendie/ui 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (172) hide show

package/README.md +86 -0
package/dist/components/Accordion.d.ts +23 -0
package/dist/components/AccordionGroup.d.ts +2 -0
package/dist/components/Avatar.d.ts +40 -0
package/dist/components/Badge.d.ts +90 -0
package/dist/components/Banner.d.ts +43 -0
package/dist/components/BottomNavigation.d.ts +2 -0
package/dist/components/BottomNavigationItem.d.ts +30 -0
package/dist/components/Button.d.ts +133 -0
package/dist/components/CheckBox.d.ts +47 -0
package/dist/components/ChoiceBox.d.ts +8 -0
package/dist/components/DashboardWidget.d.ts +13 -0
package/dist/components/Divider.d.ts +33 -0
package/dist/components/Drawer.d.ts +40 -0
package/dist/components/DropdownMenu.d.ts +14 -0
package/dist/components/IconButton.d.ts +81 -0
package/dist/components/List.d.ts +2 -0
package/dist/components/ListItem.d.ts +46 -0
package/dist/components/ModalDialog.d.ts +15 -0
package/dist/components/NotificationBadge.d.ts +54 -0
package/dist/components/ProgressIndicator.d.ts +29 -0
package/dist/components/RadioButton.d.ts +30 -0
package/dist/components/RadioGroup.d.ts +2 -0
package/dist/components/Search.d.ts +51 -0
package/dist/components/Select.d.ts +63 -0
package/dist/components/SvgIcon.d.ts +75 -0
package/dist/components/SvgIcon.stories.d.ts +7 -0
package/dist/components/Switch.d.ts +10 -0
package/dist/components/TabItem.d.ts +22 -0
package/dist/components/Tabs.d.ts +3 -0
package/dist/components/TextArea.d.ts +8 -0
package/dist/components/TextField.d.ts +7 -0
package/dist/components/Toast.d.ts +35 -0
package/dist/components/TopAppBar.d.ts +37 -0
package/dist/index.cjs +65 -0
package/dist/index.d.ts +33 -0
package/dist/index.js +19523 -0
package/dist/preset.d.ts +534 -0
package/dist/recipes/index.d.ts +2 -0
package/dist/styles.css +1 -0
package/dist/tokens/getToken.d.ts +789 -0
package/dist/tokens/index.d.ts +1808 -0
package/dist/tokens/keyframes/index.d.ts +10 -0
package/package.json +100 -0
package/styled-system/css/conditions.js +34 -0
package/styled-system/css/css.d.ts +22 -0
package/styled-system/css/css.js +45 -0
package/styled-system/css/cva.d.ts +6 -0
package/styled-system/css/cva.js +87 -0
package/styled-system/css/cx.d.ts +5 -0
package/styled-system/css/cx.js +15 -0
package/styled-system/css/index.d.ts +5 -0
package/styled-system/css/index.js +4 -0
package/styled-system/css/sva.d.ts +4 -0
package/styled-system/css/sva.js +41 -0
package/styled-system/helpers.js +326 -0
package/styled-system/jsx/aspect-ratio.d.ts +10 -0
package/styled-system/jsx/aspect-ratio.js +14 -0
package/styled-system/jsx/bleed.d.ts +10 -0
package/styled-system/jsx/bleed.js +14 -0
package/styled-system/jsx/box.d.ts +10 -0
package/styled-system/jsx/box.js +14 -0
package/styled-system/jsx/center.d.ts +10 -0
package/styled-system/jsx/center.js +14 -0
package/styled-system/jsx/circle.d.ts +10 -0
package/styled-system/jsx/circle.js +14 -0
package/styled-system/jsx/container.d.ts +10 -0
package/styled-system/jsx/container.js +14 -0
package/styled-system/jsx/cq.d.ts +10 -0
package/styled-system/jsx/cq.js +14 -0
package/styled-system/jsx/divider.d.ts +10 -0
package/styled-system/jsx/divider.js +14 -0
package/styled-system/jsx/factory-helper.js +22 -0
package/styled-system/jsx/factory.d.ts +3 -0
package/styled-system/jsx/factory.js +80 -0
package/styled-system/jsx/flex.d.ts +10 -0
package/styled-system/jsx/flex.js +14 -0
package/styled-system/jsx/float.d.ts +10 -0
package/styled-system/jsx/float.js +14 -0
package/styled-system/jsx/grid-item.d.ts +10 -0
package/styled-system/jsx/grid-item.js +14 -0
package/styled-system/jsx/grid.d.ts +10 -0
package/styled-system/jsx/grid.js +14 -0
package/styled-system/jsx/hstack.d.ts +10 -0
package/styled-system/jsx/hstack.js +14 -0
package/styled-system/jsx/index.d.ts +24 -0
package/styled-system/jsx/index.js +22 -0
package/styled-system/jsx/is-valid-prop.d.ts +11 -0
package/styled-system/jsx/is-valid-prop.js +17 -0
package/styled-system/jsx/link-overlay.d.ts +10 -0
package/styled-system/jsx/link-overlay.js +14 -0
package/styled-system/jsx/spacer.d.ts +10 -0
package/styled-system/jsx/spacer.js +14 -0
package/styled-system/jsx/square.d.ts +10 -0
package/styled-system/jsx/square.js +14 -0
package/styled-system/jsx/stack.d.ts +10 -0
package/styled-system/jsx/stack.js +14 -0
package/styled-system/jsx/visually-hidden.d.ts +10 -0
package/styled-system/jsx/visually-hidden.js +14 -0
package/styled-system/jsx/vstack.d.ts +10 -0
package/styled-system/jsx/vstack.js +14 -0
package/styled-system/jsx/wrap.d.ts +10 -0
package/styled-system/jsx/wrap.js +14 -0
package/styled-system/patterns/aspect-ratio.d.ts +21 -0
package/styled-system/patterns/aspect-ratio.js +38 -0
package/styled-system/patterns/bleed.d.ts +22 -0
package/styled-system/patterns/bleed.js +24 -0
package/styled-system/patterns/box.d.ts +21 -0
package/styled-system/patterns/box.js +15 -0
package/styled-system/patterns/center.d.ts +21 -0
package/styled-system/patterns/center.js +21 -0
package/styled-system/patterns/circle.d.ts +21 -0
package/styled-system/patterns/circle.js +25 -0
package/styled-system/patterns/container.d.ts +21 -0
package/styled-system/patterns/container.js +21 -0
package/styled-system/patterns/cq.d.ts +22 -0
package/styled-system/patterns/cq.js +21 -0
package/styled-system/patterns/divider.d.ts +23 -0
package/styled-system/patterns/divider.js +25 -0
package/styled-system/patterns/flex.d.ts +27 -0
package/styled-system/patterns/flex.js +26 -0
package/styled-system/patterns/float.d.ts +24 -0
package/styled-system/patterns/float.js +52 -0
package/styled-system/patterns/grid-item.d.ts +26 -0
package/styled-system/patterns/grid-item.js +25 -0
package/styled-system/patterns/grid.d.ts +25 -0
package/styled-system/patterns/grid.js +27 -0
package/styled-system/patterns/hstack.d.ts +22 -0
package/styled-system/patterns/hstack.js +24 -0
package/styled-system/patterns/index.d.ts +21 -0
package/styled-system/patterns/index.js +20 -0
package/styled-system/patterns/link-overlay.d.ts +21 -0
package/styled-system/patterns/link-overlay.js +24 -0
package/styled-system/patterns/spacer.d.ts +21 -0
package/styled-system/patterns/spacer.js +21 -0
package/styled-system/patterns/square.d.ts +21 -0
package/styled-system/patterns/square.js +24 -0
package/styled-system/patterns/stack.d.ts +24 -0
package/styled-system/patterns/stack.js +24 -0
package/styled-system/patterns/visually-hidden.d.ts +21 -0
package/styled-system/patterns/visually-hidden.js +18 -0
package/styled-system/patterns/vstack.d.ts +22 -0
package/styled-system/patterns/vstack.js +24 -0
package/styled-system/patterns/wrap.d.ts +25 -0
package/styled-system/patterns/wrap.js +25 -0
package/styled-system/themes/asagi.json +5 -0
package/styled-system/themes/index.d.ts +36 -0
package/styled-system/themes/index.js +24 -0
package/styled-system/themes/kurikawa.json +5 -0
package/styled-system/themes/sumire.json +5 -0
package/styled-system/themes/theme-asagi.json +5 -0
package/styled-system/themes/theme-kurikawa.json +5 -0
package/styled-system/themes/theme-sumire.json +5 -0
package/styled-system/themes/theme-tsutsuji.json +5 -0
package/styled-system/themes/tsutsuji.json +5 -0
package/styled-system/tokens/index.d.ts +9 -0
package/styled-system/tokens/index.js +3548 -0
package/styled-system/tokens/tokens.d.ts +48 -0
package/styled-system/types/composition.d.ts +138 -0
package/styled-system/types/conditions.d.ts +214 -0
package/styled-system/types/csstype.d.ts +21298 -0
package/styled-system/types/global.d.ts +19 -0
package/styled-system/types/index.d.ts +8 -0
package/styled-system/types/jsx.d.ts +52 -0
package/styled-system/types/parts.d.ts +8 -0
package/styled-system/types/pattern.d.ts +78 -0
package/styled-system/types/prop-type.d.ts +237 -0
package/styled-system/types/recipe.d.ts +181 -0
package/styled-system/types/selectors.d.ts +59 -0
package/styled-system/types/static-css.d.ts +51 -0
package/styled-system/types/style-props.d.ts +7468 -0
package/styled-system/types/system-types.d.ts +88 -0

package/README.md ADDED Viewed

@@ -0,0 +1,86 @@
+# Serendie UI
+[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://storybook.serendie.design/)
+[Serendie UI Kit (Figma)](https://www.figma.com/community/file/1433690846108785966)と対となるReactベースのUIコンポーネント集です。Figma Code Connectにも対応しており、Storybookと同等の内容が[Figma Devモードでも確認](https://serendie.design/get-started/dev/#section-1)できます。
+## 使い方
+### インストール
+デザイントークンも同梱されるので同時インストールは不要です。
+```
+npm install @serendie/ui
+```
+### プロジェクトへの導入
+rootのCSSに対して、次の2行を設定してください。1行目は、Serendie UIに対して、スタイルを適切に当てるためにカスケードレイヤーの指定をするもの、2行目は同梱のデザイントークンやデフォルトスタイルを読み込むものです。
+```css
+@layer reset, base, tokens, recipes, utilities;
+@import "@serendie/ui/styles.css";
+```
+### コンポーネントを使う
+使いたいComponentをimportしたうえで、通常のReact Componentとして使用してください。各Componentが持つpropsについては、[ドキュメント](https://serendie.design/components/button/)や、[Storybook](https://storybook.serendie.design/?path=/story/components-button--medium)、Figma Code Connectを参照してください。
+```js
+import { Button } from "@serendie/ui";
+<Button size="medium">Login</Button>
+```
+### テーマ切り替え
+Serendie Design Systemには5つのカラーテーマがあり、デザイントークンもそれに対応します。htmlタグなどに、`data-panda-theme`属性 (`konjo`, `asagi`, `sumire`, `tsutusji`, `kurikawa`)を付与することでカラーテーマを切り替えることができます。
+各テーマについては[こちら](https://serendie.design/foundations/theming/)を参照してください。
+```html
+<html data-panda-theme="asagi"></html>
+```
+## スタイリングライブラリと併用する
+あるコンポーネントのmarginを微修正したいなど、Serendie UIのスタイルをカスタムしたいシーンでは、プロジェクト側にスタイリングライブラリ(CSS-in-JSなど)を導入してください。どのスタイリングライブラリでも併用は可能ですが、ここではSerendie UIの内部でも使用している[Panda CSS](https://panda-css.com/)の例を紹介します。
+### SerendiePresetの追加
+Panda CSS導入後に生成される`panda.config.ts`に下記を追記することで、Panda CSSの[Preset](https://panda-css.com/docs/customization/presets)とSerendie Design Systemのデザイントークンを繋ぎこみます。
+```
++import { SerendiePreset } from "@serendie/ui";
+export default defineConfig({
++  jsxFramework: "react",
++  presets: [SerendiePreset],
+});
+```
+より実践的な例は、こちらの[サンプルプロジェクト](https://github.com/serendie/bootcamp?tab=readme-ov-file#%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%A8%E4%BD%B5%E7%94%A8%E3%81%99%E3%82%8B)を参考にしてください。
+## APIを詳しく知る
+Serendie UIはヘッドレスUIとして、[Ark UI](https://ark-ui.com/)を内部的に利用しており、各コンポーネントのAPIはArk UIを継承します。Selectコンポーネントなどインタラクションが複雑なコンポーネントは、Ark UIの[APIリファレンス](https://ark-ui.com/react/docs/components/select#api-reference)を合わせて参照してください。
+## 開発
+Serendie UIに新しくコンポーネントを追加する場合は、Ark UIをベースにしてください。
+```
+npm run dev # run storybook
+npm run build
+```
+## Figma Code Connect
+Serendie UIでは、Figma Code ConnectをStorybookと繋ぎこむ形で導入しています。下記のコマンドで各コンポーネント毎のstoriesファイルの内容を、Figmaにpublishします。
+```
+npm run connect:publish
+```
+storiesファイルに変更が入ると上記が[GitHub Actions](https://github.com/serendie/serendie/blob/main/.github/workflows/publish-code-connect.yml)によって実行されます。

package/dist/components/Accordion.d.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import { AccordionItemProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/types';
+declare const AccordionStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"description" | "title" | "item" | "itemIndicator" | "icon", {
+    isLeftIcon: {
+        true: {
+            item: {
+                flexDirection: "row-reverse";
+            };
+            itemIndicator: {
+                transform: "rotate(-90deg)";
+                _open: {
+                    transform: "rotate(0deg)";
+                };
+            };
+        };
+    };
+}>;
+export type AccordionProps = {
+    title: string;
+    description: string;
+} & RecipeVariantProps<typeof AccordionStyle> & AccordionItemProps;
+export declare const Accordion: React.FC<AccordionProps>;
+export {};

package/dist/components/AccordionGroup.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Accordion } from '@ark-ui/react';
2	+ export declare const AccordionGroup: import('../../styled-system/jsx').StyledComponent<import('react').ForwardRefExoticComponent<Accordion.RootProps & import('react').RefAttributes<HTMLDivElement>>, {}>;

package/dist/components/Avatar.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { AvatarRootProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const AvatarStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"image" | "root" | "fallback", {
+    size: {
+        small: {
+            root: {
+                width: number;
+                height: number;
+            };
+            fallback: {
+                fontSize: number;
+            };
+        };
+        medium: {
+            root: {
+                width: number;
+                height: number;
+            };
+            fallback: {
+                fontSize: number;
+            };
+        };
+        large: {
+            root: {
+                width: number;
+                height: number;
+            };
+            fallback: {
+                fontSize: number;
+            };
+        };
+    };
+}>;
+export type AvatarProps = {
+    src?: string;
+    alt?: string;
+    text?: string;
+    placeholder?: "filled" | "outlined";
+} & RecipeVariantProps<typeof AvatarStyle> & AvatarRootProps;
+export declare const Avatar: React.FC<AvatarProps>;

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

@@ -0,0 +1,90 @@
+import { ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../styled-system/types';
+export declare const BadgeStyle: import('../../styled-system/types').RecipeRuntimeFn<{
+    size: {
+        small: {
+            height: "16px";
+            pr: "sd.system.dimension.spacing.twoExtraSmall";
+            pl: "sd.system.dimension.spacing.twoExtraSmall";
+            textStyle: "sd.system.typography.label.small_compact";
+            expanded: {
+                textStyle: "sd.system.typography.label.small_expanded";
+            };
+        };
+        medium: {
+            height: "24px";
+            pr: "sd.system.dimension.spacing.extraSmall";
+            pl: "sd.system.dimension.spacing.extraSmall";
+            textStyle: "sd.system.typography.label.medium_compact";
+            expanded: {
+                textStyle: "sd.system.typography.label.medium_expanded";
+            };
+        };
+        large: {
+            height: "32px";
+            pr: "sd.system.dimension.spacing.medium";
+            pl: "sd.system.dimension.spacing.medium";
+            textStyle: "sd.system.typography.label.large_compact";
+            expanded: {
+                textStyle: "sd.system.typography.label.large_expanded";
+            };
+        };
+    };
+    styleColor: {
+        gray: {
+            bg: "sd.reference.color.scale.gray.600";
+            color: "sd.system.color.component.inverseOnSurface";
+        };
+        blue: {
+            bg: "sd.reference.color.scale.blue.600";
+            color: "sd.system.color.component.inverseOnSurface";
+        };
+        green: {
+            bg: "sd.reference.color.scale.green.600";
+            color: "sd.system.color.component.inverseOnSurface";
+        };
+        yellow: {
+            bg: "sd.reference.color.scale.yellow.600";
+            color: "sd.system.color.component.inverseOnSurface";
+        };
+        chestnut: {
+            bg: "sd.reference.color.scale.chestnut.600";
+            color: "sd.system.color.component.inverseOnSurface";
+        };
+        red: {
+            bg: "sd.reference.color.scale.red.600";
+            color: "sd.system.color.component.inverseOnSurface";
+        };
+        "gray-subtle": {
+            bg: "sd.reference.color.scale.gray.100";
+            color: "sd.reference.color.scale.gray.800";
+        };
+        "blue-subtle": {
+            bg: "sd.reference.color.scale.blue.100";
+            color: "sd.reference.color.scale.blue.800";
+        };
+        "green-subtle": {
+            bg: "sd.reference.color.scale.green.100";
+            color: "sd.reference.color.scale.green.800";
+        };
+        "yellow-subtle": {
+            bg: "sd.reference.color.scale.yellow.100";
+            color: "sd.reference.color.scale.yellow.800";
+        };
+        "chestnut-subtle": {
+            bg: "sd.reference.color.scale.chestnut.100";
+            color: "sd.reference.color.scale.chestnut.800";
+        };
+        "red-subtle": {
+            bg: "sd.reference.color.scale.red.100";
+            color: "sd.reference.color.scale.red.800";
+        };
+    };
+}>;
+type BadgeProps = ComponentProps<"span"> & RecipeVariantProps<typeof BadgeStyle> & {
+    closeButton?: React.ReactElement<BadgeCloseButtonProps>;
+};
+export declare const Badge: React.FC<BadgeProps>;
+type BadgeCloseButtonProps = React.FC<ComponentProps<"button">>;
+export declare const BadgeCloseButton: React.FC<ComponentProps<"button">>;
+export {};

package/dist/components/Banner.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+import { ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../styled-system/css';
+declare const BannerStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"container" | "description" | "title" | "icon", {
+    type: {
+        information: {
+            container: {
+                bg: "sd.system.color.component.surface";
+                color: "sd.system.color.component.onSurface";
+                borderWidth: "sd.system.dimension.border.medium";
+                borderStyle: "solid";
+                borderColor: "sd.system.color.component.outline";
+            };
+        };
+        error: {
+            container: {
+                bg: "sd.system.color.impression.negativeContainer";
+                color: "sd.system.color.impression.onNegativeContainer";
+                borderWidth: "sd.system.dimension.border.medium";
+                borderStyle: "solid";
+                borderColor: "sd.system.color.impression.negativeContainer";
+            };
+            icon: {
+                color: "sd.system.color.impression.negative";
+            };
+        };
+        warning: {
+            container: {
+                bg: "sd.system.color.impression.noticeContainer";
+                color: "sd.system.color.impression.onNoticeContainer";
+                borderWidth: "sd.system.dimension.border.medium";
+                borderStyle: "solid";
+                borderColor: "sd.system.color.impression.noticeContainer";
+            };
+        };
+    };
+}>;
+type BannerProps = {
+    title: string;
+    description: string;
+    icon?: React.ReactElement;
+} & ComponentProps<"div">;
+export declare const Banner: React.FC<BannerProps & RecipeVariantProps<typeof BannerStyle>>;
+export {};

package/dist/components/BottomNavigation.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { ComponentProps } from 'react';
2	+ export declare const BottomNavigation: ({ children, className, ...props }: ComponentProps<"nav">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BottomNavigationItem.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const BottomNavigationItemStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"label" | "icon" | "root" | "iconGroup" | "badge", {
+    isActive: {
+        true: {
+            label: {
+                color: "sd.system.color.impression.primary";
+            };
+            icon: {
+                color: "sd.system.color.impression.primary";
+            };
+        };
+    };
+    dot: {
+        true: {
+            badge: {
+                top: "-2.5px";
+                right: "4px";
+            };
+        };
+    };
+}>;
+type Props = {
+    icon: React.ReactNode;
+    label: string;
+    count?: number;
+};
+export type BottomNavigationItemProps = Props & ComponentProps<"button"> & RecipeVariantProps<typeof BottomNavigationItemStyle>;
+export declare const BottomNavigationItem: React.FC<BottomNavigationItemProps>;
+export {};

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

@@ -0,0 +1,133 @@
+import { default as React } from 'react';
+export declare const ButtonStyle: import('../../styled-system/types').RecipeRuntimeFn<{
+    styleType: {
+        filled: {
+            bg: "sd.system.color.impression.primaryContainer";
+            color: "sd.system.color.impression.onPrimaryContainer";
+            _enabled: {
+                _hover: {
+                    _after: {
+                        content: "''";
+                        position: "absolute";
+                        inset: "0";
+                        bg: "sd.system.color.interaction.hovered";
+                    };
+                };
+                _focusVisible: {
+                    outlineWidth: "sd.system.dimension.border.medium";
+                    outlineStyle: "solid";
+                    outlineColor: "sd.system.color.interaction.hovered";
+                    _after: {
+                        content: "''";
+                        position: "absolute";
+                        inset: "0";
+                        bg: "sd.system.color.interaction.hovered";
+                    };
+                };
+            };
+            _disabled: {
+                bg: "sd.system.color.interaction.disabled";
+                color: "sd.system.color.interaction.disabledOnSurface";
+            };
+        };
+        ghost: {
+            color: "sd.system.color.impression.primary";
+            _enabled: {
+                _hover: {
+                    bgColor: "sd.system.color.interaction.hoveredVariant";
+                };
+                _focusVisible: {
+                    bgColor: "sd.system.color.interaction.hoveredVariant";
+                    outlineWidth: "sd.system.dimension.border.medium";
+                    outlineStyle: "solid";
+                    outlineColor: "sd.system.color.component.outlineVariant";
+                };
+            };
+            _disabled: {
+                color: "sd.system.color.interaction.disabledOnSurface";
+            };
+        };
+        outlined: {
+            color: string;
+            outlineWidth: string;
+            outlineStyle: string;
+            outlineColor: string;
+            bgColor: string;
+            _enabled: {
+                _hover: {
+                    bgColor: string;
+                };
+                _focusVisible: {
+                    outlineColor: string;
+                    bgColor: string;
+                };
+            };
+            _disabled: {
+                bgColor: string;
+                color: string;
+                outline: string;
+            };
+        };
+        rectangle: {
+            borderRadius: "sd.system.dimension.radius.medium";
+            color: string;
+            outlineWidth: string;
+            outlineStyle: string;
+            outlineColor: string;
+            bgColor: string;
+            _enabled: {
+                _hover: {
+                    bgColor: string;
+                };
+                _focusVisible: {
+                    outlineColor: string;
+                    bgColor: string;
+                };
+            };
+            _disabled: {
+                bgColor: string;
+                color: string;
+                outline: string;
+            };
+        };
+    };
+    size: {
+        medium: {
+            height: number;
+            px: "sd.system.dimension.spacing.extraLarge";
+            py: "sd.system.dimension.spacing.small";
+            textStyle: "sd.system.typography.label.large_compact";
+            expanded: {
+                textStyle: "sd.system.typography.label.large_expanded";
+            };
+        };
+        small: {
+            height: number;
+            px: "sd.system.dimension.spacing.small";
+            py: "sd.system.dimension.spacing.twoExtraSmall";
+            textStyle: "sd.system.typography.label.medium_compact";
+            expanded: {
+                textStyle: "sd.system.typography.label.medium_expanded";
+            };
+        };
+    };
+}>;
+type ButtonLoadingProps = {
+    isLoading?: boolean;
+};
+export declare const Button: React.ForwardRefExoticComponent<(Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
+    size?: "medium" | "small" | undefined;
+} & {
+    leftIcon?: React.ReactElement;
+} & {
+    rightIcon?: never;
+} & ButtonLoadingProps, "ref"> | Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    styleType?: "filled" | "outlined" | "ghost" | "rectangle" | undefined;
+    size?: "medium" | "small" | undefined;
+} & {
+    leftIcon?: never;
+} & {
+    rightIcon?: React.ReactElement;
+} & ButtonLoadingProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/CheckBox.d.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import { CheckboxRootProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const checkboxIconCss: {
+    flexShrink: number;
+    cursor: string;
+    ".group:has(:focus-visible) &": {
+        outlineStyle: string;
+        outlineOffset: string;
+        outlineWidth: string;
+        outlineColor: string;
+        borderRadius: string;
+    };
+    _disabled: {
+        _checked: {
+            "& svg": {
+                color: string;
+            };
+            "& .checkmark": {
+                color: string;
+            };
+        };
+    };
+};
+export declare const checkboxCheckedIconCss: {
+    width: number;
+    height: number;
+    color: string;
+    "& .checkmark": {
+        color: string;
+    };
+};
+export declare const checkboxUncheckedIconCss: {
+    width: number;
+    height: number;
+    color: string;
+    _disabled: {
+        color: string;
+    };
+};
+export declare const CheckBoxStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "itemControl" | "checkedIcon" | "uncheckedIcon" | "itemTextGroup" | "itemText" | "helperText", import('../../styled-system/types').SlotRecipeVariantRecord<"root" | "itemControl" | "checkedIcon" | "uncheckedIcon" | "itemTextGroup" | "itemText" | "helperText">>;
+type CheckBoxItemProps = {
+    label: string;
+    helperText?: string;
+};
+export type CheckBoxProps = CheckboxRootProps & RecipeVariantProps<typeof CheckBoxStyle> & CheckBoxItemProps;
+export declare const CheckBox: React.FC<CheckBoxProps>;
+export {};

package/dist/components/ChoiceBox.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { RadioGroupItemProps, CheckboxRootProps } from '@ark-ui/react';
+export declare const ChoiceBoxStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"root" | "radioItem" | "radioCheckedIcon" | "radioUncheckedIcon" | "checkboxItem" | "checkboxCheckedIcon" | "checkboxUncheckedIcon", import('../../styled-system/types').SlotRecipeVariantRecord<"root" | "radioItem" | "radioCheckedIcon" | "radioUncheckedIcon" | "checkboxItem" | "checkboxCheckedIcon" | "checkboxUncheckedIcon">>;
+type ChoiceBoxBaseProps = {
+    type: "radio" | "checkbox";
+};
+export type ChoiceBoxProps = ChoiceBoxBaseProps & RadioGroupItemProps & CheckboxRootProps;
+export declare const ChoiceBox: React.FC<ChoiceBoxProps>;
+export {};

package/dist/components/DashboardWidget.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { ComponentProps } from 'react';
+type AreaValueProps = {
+    label: string;
+    value: number;
+    unit: string;
+};
+type DashboardWidgetProps = {
+    values?: [AreaValueProps, AreaValueProps] | [AreaValueProps] | undefined;
+    linkTo?: string;
+    children?: React.ReactNode;
+} & ComponentProps<"div">;
+export declare const DashboardWidget: React.FC<DashboardWidgetProps>;
+export {};

package/dist/components/Divider.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { ComponentProps } from 'react';
+import { RecipeVariantProps } from '../../styled-system/css';
+export declare const DividerStyle: import('../../styled-system/types').RecipeRuntimeFn<{
+    color: {
+        light: {
+            borderColor: "sd.reference.color.scale.gray.200";
+        };
+        normal: {
+            borderColor: "sd.reference.color.scale.gray.300";
+        };
+        dark: {
+            borderColor: "sd.system.color.component.outlineVariant";
+        };
+    };
+    type: {
+        horizontal: {
+            width: "100%";
+            height: "sd.reference.dimension.scale.1";
+            borderBottomStyle: "solid";
+            borderWidth: "sd.system.dimension.border.medium";
+        };
+        vertical: {
+            borderLeftStyle: "solid";
+            width: "sd.reference.dimension.scale.1";
+            borderWidth: "sd.system.dimension.border.medium";
+            height: "100%";
+            minHeight: "10px";
+        };
+    };
+}>;
+type DividerProps = ComponentProps<"hr"> & RecipeVariantProps<typeof DividerStyle>;
+export declare const Divider: (props: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Drawer.d.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { DialogRootProps } from '@ark-ui/react';
+import { RecipeVariantProps } from '../../styled-system/css';
+declare const DrawerStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "backdrop" | "contentInner" | "closeTrigger", {
+    type: {
+        left: {
+            content: {
+                left: "0";
+                justifyContent: "flex-start";
+            };
+        };
+        full: {
+            content: {
+                left: "0";
+                width: "100%";
+                minWidth: "100%";
+                maxWidth: "100%";
+            };
+        };
+        right: {
+            content: {
+                right: "0";
+            };
+            closeTrigger: {
+                justifyContent: "flex-end";
+            };
+        };
+    };
+}>;
+type Props = {
+    isOpen: boolean;
+    children: React.ReactNode;
+    contentClassName?: string;
+    backdropClassName?: string;
+    onOpenChange: (e: {
+        open: boolean;
+    }) => void;
+};
+export type DrawerProps = Props & DialogRootProps & RecipeVariantProps<typeof DrawerStyle>;
+export declare const Drawer: React.FC<DrawerProps>;
+export {};

package/dist/components/DropdownMenu.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { MenuRootProps } from '@ark-ui/react';
+export declare const DropdownMenuStyle: import('../../styled-system/types').SlotRecipeRuntimeFn<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon", import('../../styled-system/types').SlotRecipeVariantRecord<"content" | "item" | "button" | "itemGroup" | "itemIcon" | "buttonIcon">>;
+export type MenuItemProps = {
+    value: string;
+    label: string;
+    icon?: React.ReactElement;
+};
+export type DropdownMenuProps = {
+    isIconMenu?: boolean;
+    title: string;
+    items: MenuItemProps[];
+    disabled?: boolean;
+};
+export declare const DropdownMenu: React.FC<DropdownMenuProps & MenuRootProps>;