@tipp/ui 0.1.5 → 0.1.7

package/dist/molecules/index.d.ts

@@ -0,0 +1,4 @@
+export { ExpandTable, ExpandTableProps } from './expand-table/index.js';
+export { ExpandComp, OnRowClick } from './expand-table/row.js';
+export { ColumnDef, createColumnHelper } from '@tanstack/react-table';
+import 'react';

package/dist/molecules/index.js

@@ -0,0 +1,63 @@
+import "../chunk-WWCWPFEJ.js";
+import {
+  ExpandTable,
+  createColumnHelper
+} from "../chunk-76NL7K3Z.js";
+import "../chunk-ZE5G2S34.js";
+import "../chunk-BSTJBBEX.js";
+import "../chunk-NDUKDKGB.js";
+import "../chunk-WN3DQQSJ.js";
+import "../chunk-IIBITN2G.js";
+import "../chunk-JPIZP2PZ.js";
+import "../chunk-XJJDE4YP.js";
+import "../chunk-ACVANQJ4.js";
+import "../chunk-355MU6BH.js";
+import "../chunk-HYITAA4J.js";
+import "../chunk-5H3YPCZK.js";
+import "../chunk-74DX4CU7.js";
+import "../chunk-OYM4XCHQ.js";
+import "../chunk-YJ7ZFOYL.js";
+import "../chunk-5ZITU5L7.js";
+import "../chunk-ILRUXI2E.js";
+import "../chunk-365QMK4D.js";
+import "../chunk-YO3BQW6S.js";
+import "../chunk-6IVCARWS.js";
+import "../chunk-6DJOIRMF.js";
+import "../chunk-FPD73OHW.js";
+import "../chunk-ZKZDVS7G.js";
+import "../chunk-MUNMDHRF.js";
+import "../chunk-TVDKGMBI.js";
+import "../chunk-HLOY6BIP.js";
+import "../chunk-O3T3TM3V.js";
+import "../chunk-O3DNDMV3.js";
+import "../chunk-XQOL7UBI.js";
+import "../chunk-TULWX7D6.js";
+import "../chunk-XQOZWYUA.js";
+import "../chunk-5AVBYDPB.js";
+import "../chunk-OCJNQGHN.js";
+import "../chunk-Q37G2GS6.js";
+import "../chunk-VTJZMOSP.js";
+import "../chunk-P6B2PNYI.js";
+import "../chunk-YTZSKMX3.js";
+import "../chunk-2DZ2Y3JI.js";
+import "../chunk-25HMMI7R.js";
+import "../chunk-EGEQY3KT.js";
+import "../chunk-4Y5BEXVN.js";
+import "../chunk-RET725VL.js";
+import "../chunk-B6XJN6EC.js";
+import "../chunk-FYEASFUU.js";
+import "../chunk-MIMJ7LON.js";
+import "../chunk-IQEEPHOY.js";
+import "../chunk-JEHDCZQU.js";
+import "../chunk-OHMOP5PV.js";
+import "../chunk-J242TTFH.js";
+import "../chunk-EAXUQEO5.js";
+import "../chunk-CZEGRZBK.js";
+import "../chunk-ALOPZ54P.js";
+import "../chunk-YGL6SWKN.js";
+import "../chunk-N552FDTV.js";
+export {
+  ExpandTable,
+  createColumnHelper
+};
+//# sourceMappingURL=index.js.map

package/dist/molecules/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/theme/theme-provider.cjs

@@ -40,7 +40,7 @@ module.exports = __toCommonJS(theme_provider_exports);
 var import_themes = require("@radix-ui/themes");
 var import_jsx_runtime = require("react/jsx-runtime");
 function ThemeProvider(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Theme, __spreadValues({ accentColor: "iris" }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_themes.Theme, __spreadValues({ accentColor: "iris", radius: "large" }, props));
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/theme/theme-provider.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/theme/theme-provider.tsx"],"sourcesContent":["import React from 'react';\nimport { Theme } from '@radix-ui/themes';\n\ntype ThemeProps = React.ComponentProps<typeof Theme>;\n\ninterface ThemeProviderProps extends ThemeProps {\n  children: React.ReactNode;\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): React.ReactNode {\n  return <Theme accentColor=\"iris\" {...props} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAsB;AASb;AADF,SAAS,cAAc,OAA4C;AACxE,SAAO,4CAAC,sCAAM,aAAY,UAAW,MAAO;AAC9C;","names":[]}
+{"version":3,"sources":["../../src/theme/theme-provider.tsx"],"sourcesContent":["import React from 'react';\nimport { Theme } from '@radix-ui/themes';\n\ntype ThemeProps = React.ComponentProps<typeof Theme>;\n\ninterface ThemeProviderProps extends ThemeProps {\n  children: React.ReactNode;\n}\n\nexport function ThemeProvider(props: ThemeProviderProps): React.ReactNode {\n  return <Theme accentColor=\"iris\" radius=\"large\" {...props} />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,oBAAsB;AASb;AADF,SAAS,cAAc,OAA4C;AACxE,SAAO,4CAAC,sCAAM,aAAY,QAAO,QAAO,WAAY,MAAO;AAC7D;","names":[]}

package/dist/theme/theme-provider.d.cts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { Theme } from '@radix-ui/themes';
 
-type ThemeProps = React.ComponentProps<typeof Theme>;
+type ThemeProps = React__default.ComponentProps<typeof Theme>;
 interface ThemeProviderProps extends ThemeProps {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 }
-declare function ThemeProvider(props: ThemeProviderProps): React.ReactNode;
+declare function ThemeProvider(props: ThemeProviderProps): React__default.ReactNode;
 
 export { ThemeProvider };

package/dist/theme/theme-provider.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { Theme } from '@radix-ui/themes';
 
-type ThemeProps = React.ComponentProps<typeof Theme>;
+type ThemeProps = React__default.ComponentProps<typeof Theme>;
 interface ThemeProviderProps extends ThemeProps {
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 }
-declare function ThemeProvider(props: ThemeProviderProps): React.ReactNode;
+declare function ThemeProvider(props: ThemeProviderProps): React__default.ReactNode;
 
 export { ThemeProvider };

package/dist/theme/theme-provider.js

@@ -1,7 +1,7 @@
 import {
   ThemeProvider
-} from "../chunk-LREYUDKD.js";
-import "../chunk-LGTAQGUA.js";
+} from "../chunk-PL3Q4UVY.js";
+import "../chunk-N552FDTV.js";
 export {
   ThemeProvider
 };

package/dist/theme/use-theme.js

@@ -1,7 +1,7 @@
 import {
   useThemeContext
 } from "../chunk-MMGP4GEQ.js";
-import "../chunk-LGTAQGUA.js";
+import "../chunk-N552FDTV.js";
 export {
   useThemeContext
 };

package/dist/types/react-table.d.cjs

@@ -0,0 +1,5 @@
+"use strict";
+
+// src/types/react-table.d.ts
+var import_react_table = require("@tanstack/react-table");
+//# sourceMappingURL=react-table.d.cjs.map

package/dist/types/react-table.d.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/react-table.d.ts"],"sourcesContent":["import '@tanstack/react-table';\n\ndeclare module '@tanstack/react-table' {\n  type ExpandButtonComp = <Data extends RowData>(props: {\n    open: boolean;\n    setIsOpen: (value: boolean) => void;\n    data: Data;\n  }) => React.ReactNode;\n\n  /** OpenBtn을 전달한 경우 open과 setIsOpen 상태 관리 props를 전달해 렌더함 */\n\n  interface ColumnMeta {\n    OpenBtn?: ExpandButtonComp;\n    /** 셀의 가로 너비 지정을 number가 아닌 auto로 사용하고 싶을 경우.\n     * 테이블 당 하나의 셀에만 사용하기를 권장\n     */\n    autoSize?: boolean;\n  }\n}\n"],"mappings":";;;AAAA,yBAAO;","names":[]}

package/dist/types/react-table.d.d.cts

@@ -0,0 +1,17 @@
+declare module '@tanstack/react-table' {
+  type ExpandButtonComp = <Data extends RowData>(props: {
+    open: boolean;
+    setIsOpen: (value: boolean) => void;
+    data: Data;
+  }) => React.ReactNode;
+
+  /** OpenBtn을 전달한 경우 open과 setIsOpen 상태 관리 props를 전달해 렌더함 */
+
+  interface ColumnMeta {
+    OpenBtn?: ExpandButtonComp;
+    /** 셀의 가로 너비 지정을 number가 아닌 auto로 사용하고 싶을 경우.
+     * 테이블 당 하나의 셀에만 사용하기를 권장
+     */
+    autoSize?: boolean;
+  }
+}

package/dist/types/react-table.d.d.ts

@@ -0,0 +1,17 @@
+declare module '@tanstack/react-table' {
+  type ExpandButtonComp = <Data extends RowData>(props: {
+    open: boolean;
+    setIsOpen: (value: boolean) => void;
+    data: Data;
+  }) => React.ReactNode;
+
+  /** OpenBtn을 전달한 경우 open과 setIsOpen 상태 관리 props를 전달해 렌더함 */
+
+  interface ColumnMeta {
+    OpenBtn?: ExpandButtonComp;
+    /** 셀의 가로 너비 지정을 number가 아닌 auto로 사용하고 싶을 경우.
+     * 테이블 당 하나의 셀에만 사용하기를 권장
+     */
+    autoSize?: boolean;
+  }
+}

package/dist/types/react-table.d.js

@@ -0,0 +1,3 @@
+// src/types/react-table.d.ts
+import "@tanstack/react-table";
+//# sourceMappingURL=react-table.d.js.map

package/dist/types/react-table.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/types/react-table.d.ts"],"sourcesContent":["import '@tanstack/react-table';\n\ndeclare module '@tanstack/react-table' {\n  type ExpandButtonComp = <Data extends RowData>(props: {\n    open: boolean;\n    setIsOpen: (value: boolean) => void;\n    data: Data;\n  }) => React.ReactNode;\n\n  /** OpenBtn을 전달한 경우 open과 setIsOpen 상태 관리 props를 전달해 렌더함 */\n\n  interface ColumnMeta {\n    OpenBtn?: ExpandButtonComp;\n    /** 셀의 가로 너비 지정을 number가 아닌 auto로 사용하고 싶을 경우.\n     * 테이블 당 하나의 셀에만 사용하기를 권장\n     */\n    autoSize?: boolean;\n  }\n}\n"],"mappings":";AAAA,OAAO;","names":[]}

package/dist/ui-props/index.js

@@ -1,7 +1,7 @@
 import {
   uiProps
 } from "../chunk-NVKNDAIN.js";
-import "../chunk-LGTAQGUA.js";
+import "../chunk-N552FDTV.js";
 export {
   uiProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "private": false,
   "type": "module",
   "exports": {
@@ -56,9 +56,11 @@
   "dependencies": {
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.1",
+    "@tanstack/react-table": "^8.19.3",
     "echarts-for-react": "^3.0.2",
     "i": "^0.3.7",
     "npm": "^10.8.2",
+    "postcss-scss": "^4.0.9",
     "react": "^18.3.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",
@@ -78,17 +80,17 @@
     "postcss-nesting": "12.0.2",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",
-    "@tipp/eslint-config": "0.2.2",
-    "@tipp/typescript-config": "0.0.3"
+    "@tipp/eslint-config": "0.2.3",
+    "@tipp/typescript-config": "0.0.4"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css",
+    "build": "pnpm run build:js & pnpm run build:css",
     "build:css": "postcss style/index.css -o dist/index.css",
     "build:js": "tsup",
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
-    "dev": "pnpm run dev:js && pnpm run dev:css",
-    "dev:css": "postcss src/styles/index.css -o dist/index.css --watch",
-    "dev:js": "tsup --watch",
+    "dev": "pnpm run dev:js & pnpm run dev:css",
+    "dev:css": "pnpm run build:css --watch",
+    "dev:js": "pnpm run build:js --watch",
     "lint": "eslint . --max-warnings 0",
     "lint-staged": "lint-staged ./src",
     "type-check": "tsc --noEmit"

package/src/atoms/avatar.tsx

@@ -1 +1,37 @@
-export { Avatar, type AvatarProps } from '@radix-ui/themes';
+import {
+  Avatar as RadixAvatar,
+  type AvatarProps as RadixAvatarProps,
+} from '@radix-ui/themes';
+import { useMemo, forwardRef } from 'react';
+
+export type AvatarProps = Omit<RadixAvatarProps, 'size'> & {
+  size?: 'small' | 'medium' | 'large' | 'full';
+};
+
+export const Avatar = forwardRef<HTMLImageElement, AvatarProps>(
+  (props: AvatarProps, ref): React.ReactNode => {
+    const { children, size, variant = 'soft', ...rest } = props;
+    const radixSize = useMemo<RadixAvatarProps['size']>(() => {
+      switch (size) {
+        case 'small':
+          return '1';
+        case 'medium':
+          return '2';
+        case 'large':
+          return '3';
+        case 'full':
+          return '4';
+        default:
+          return size;
+      }
+    }, [size]);
+
+    return (
+      <RadixAvatar {...rest} ref={ref} size={radixSize} variant={variant}>
+        {children}
+      </RadixAvatar>
+    );
+  }
+);
+
+Avatar.displayName = 'Avatar';

package/src/atoms/badge.tsx

@@ -1 +1,47 @@
-export { Badge } from '@radix-ui/themes';
+import {
+  Badge as RadixBadge,
+  type BadgeProps as RadixBadgeProps,
+} from '@radix-ui/themes';
+import { useMemo, forwardRef } from 'react';
+
+export type BadgeProps = Omit<RadixBadgeProps, 'color'> & {
+  size: 'small' | 'large';
+  color: 'error' | 'accent' | 'neutral' | 'success';
+};
+
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  (props: BadgeProps, ref): React.ReactNode => {
+    const { size, color, ...rest } = props;
+
+    const radixSize = useMemo(() => {
+      switch (size) {
+        case 'small':
+          return '1';
+        case 'large':
+          return '3';
+        default:
+          return '1';
+      }
+    }, [size]);
+
+    const radixColor = useMemo(() => {
+      switch (color) {
+        case 'error':
+          return 'red';
+        case 'neutral':
+          return 'gray';
+        case 'success':
+          return 'green';
+        case 'accent':
+        default:
+          return undefined;
+      }
+    }, [color]);
+
+    return (
+      <RadixBadge {...rest} color={radixColor} ref={ref} size={radixSize} />
+    );
+  }
+);
+
+Badge.displayName = 'Badge';

package/src/atoms/button.tsx

@@ -1 +1,32 @@
-export { Button, type ButtonProps } from '@radix-ui/themes';
+import {
+  Button as RadixButton,
+  type ButtonProps as RadixButtonProps,
+} from '@radix-ui/themes';
+import React, { forwardRef, useMemo } from 'react';
+
+export type ButtonProps = Omit<RadixButtonProps, 'size'> & {
+  size: 'small' | 'medium' | 'large';
+};
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref): React.ReactNode => {
+    const { size, ...restProps } = props;
+
+    const radixSize = useMemo(() => {
+      switch (size) {
+        case 'small':
+          return '2';
+        case 'medium':
+          return '3';
+        case 'large':
+          return '4';
+        default:
+          return '3';
+      }
+    }, [size]);
+
+    return <RadixButton {...restProps} ref={ref} size={radixSize} />;
+  }
+);
+
+Button.displayName = 'Button';

package/src/atoms/check-box-group.tsx

@@ -1 +1,38 @@
-export { CheckboxGroup } from '@radix-ui/themes';
+import { CheckboxGroup as RadixCheckboxGroup } from '@radix-ui/themes';
+import React, { forwardRef, useMemo } from 'react';
+
+type RadixCheckboxGroupProps = React.ComponentPropsWithoutRef<
+  typeof RadixCheckboxGroup.Root
+>;
+type CheckboxGroupProps = Omit<RadixCheckboxGroupProps, 'size'> & {
+  size: 'small' | 'medium' | 'large';
+};
+
+const Root = forwardRef<HTMLDivElement, CheckboxGroupProps>((props, ref) => {
+  const { children, size, ...rest } = props;
+
+  const groupSize = useMemo<RadixCheckboxGroupProps['size']>(() => {
+    switch (size) {
+      case 'small':
+        return '1';
+      case 'large':
+        return '3';
+      case 'medium':
+      default:
+        return '2';
+    }
+  }, [size]);
+
+  return (
+    <RadixCheckboxGroup.Root {...rest} ref={ref} size={groupSize}>
+      {children}
+    </RadixCheckboxGroup.Root>
+  );
+});
+
+Root.displayName = 'CheckboxGroup.Root';
+
+export const CheckboxGroup = {
+  Root,
+  Item: RadixCheckboxGroup.Item,
+};

package/src/atoms/check-box.tsx

@@ -1 +1,30 @@
-export { Checkbox, type CheckboxProps } from '@radix-ui/themes';
+import {
+  Checkbox as RadixCheckbox,
+  type CheckboxProps as RadixCheckboxProps,
+} from '@radix-ui/themes';
+import { useMemo, forwardRef } from 'react';
+
+export type CheckboxProps = Omit<RadixCheckboxProps, 'size'> & {
+  size?: 'small' | 'medium' | 'large';
+};
+
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
+  (props, ref): React.ReactNode => {
+    const { size = 'medium', ...rest } = props;
+
+    const radixSize = useMemo<RadixCheckboxProps['size']>(() => {
+      switch (size) {
+        case 'small':
+          return '1';
+        case 'medium':
+          return '2';
+        case 'large':
+          return '3';
+      }
+    }, [size]);
+
+    return <RadixCheckbox {...rest} ref={ref} size={radixSize} />;
+  }
+);
+
+Checkbox.displayName = 'Checkbox';

package/src/atoms/collapse.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+export interface CollapseProps {
+  children: React.ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+}
+
+export function Collapse(props: CollapseProps): React.ReactNode {
+  const { children } = props;
+  const [open, setOpen] = useState(() => {
+    return props.open || props.defaultOpen || false;
+  });
+
+  useEffect(() => {
+    if (props.open === undefined) return;
+    setOpen(props.open);
+  }, [props.open]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    ref.current.style.maxHeight = open ? `${ref.current.scrollHeight}px` : '0';
+  }, [open]);
+
+  return (
+    <div className="collapse" ref={ref}>
+      {children}
+    </div>
+  );
+}

package/src/atoms/heading.tsx

@@ -1 +1,35 @@
-export { Heading, type HeadingProps } from '@radix-ui/themes';
+import {
+  Heading as RadixHeading,
+  type HeadingProps as RadixHeadingProps,
+} from '@radix-ui/themes';
+import { useMemo } from 'react';
+
+export { Heading as RadixHeading } from '@radix-ui/themes';
+
+export type HeadingProps = RadixHeadingProps & {
+  variant?: 'subtitle1' | 'heading1' | 'heading2' | 'heading3';
+};
+
+export function Heading(props: HeadingProps): React.ReactNode {
+  const { size, children, variant, ...rest } = props;
+  const radixSize = useMemo<RadixHeadingProps['size']>(() => {
+    switch (variant) {
+      case 'subtitle1':
+        return '4';
+      case 'heading1':
+        return '7';
+      case 'heading2':
+        return '6';
+      case 'heading3':
+        return '5';
+      default:
+        return size;
+    }
+  }, [size, variant]);
+
+  return (
+    <RadixHeading {...rest} size={radixSize}>
+      {children}
+    </RadixHeading>
+  );
+}

package/src/atoms/index.ts

@@ -0,0 +1,48 @@
+export * from './alert-dialog';
+export * from './aspect-ratio';
+export * from './avatar';
+export * from './badge';
+export * from './blockquote';
+export * from './box';
+export * from './button';
+export * from './call-out';
+export * from './card';
+export * from './check-box';
+export * from './check-box-card';
+export * from './check-box-group';
+export * from './code';
+export * from './container';
+export * from './data-list';
+export * from './date-picker';
+export * from './dialog';
+export * from './dropdown-menu';
+export * from './em';
+export * from './flex';
+export * from './grid';
+export * from './heading';
+export * from './hover-card';
+export * from './icon-button';
+export * from './inset';
+export * from './kbd';
+export * from './link';
+export * from './popover';
+export * from './progress';
+export * from './quote';
+export * from './radio';
+export * from './radio-cards';
+export * from './radio-group';
+export * from './scroll-area';
+export * from './section';
+export * from './segmented-control';
+export * from './select';
+export * from './separator';
+export * from './skeleton';
+export * from './strong';
+export * from './switch';
+export * from './tab-nav';
+export * from './tabs';
+export * from './text-area';
+export * from './text';
+export * from './text-field';
+export * from './tooltip';
+export * from './collapse';

package/src/atoms/link.tsx

@@ -1 +1,33 @@
-export { Link, type LinkProps } from '@radix-ui/themes';
+import {
+  Link as RadixLink,
+  type LinkProps as RadixLinkProps,
+} from '@radix-ui/themes';
+import { useMemo } from 'react';
+
+export { Heading as RadixHeading } from '@radix-ui/themes';
+
+export type LinkProps = RadixLinkProps & {
+  variant?: 'caption' | 'body' | 'subtitle';
+};
+
+export function Link(props: LinkProps): React.ReactNode {
+  const { size, children, variant, ...rest } = props;
+  const radixSize = useMemo<RadixLinkProps['size']>(() => {
+    switch (variant) {
+      case 'caption':
+        return '1';
+      case 'body':
+        return '2';
+      case 'subtitle':
+        return '3';
+      default:
+        return size;
+    }
+  }, [size, variant]);
+
+  return (
+    <RadixLink {...rest} size={radixSize}>
+      {children}
+    </RadixLink>
+  );
+}

package/src/atoms/text.tsx

@@ -1 +1,30 @@
-export { Text, type TextProps } from '@radix-ui/themes';
+import type { TextProps as RadixTextProps } from '@radix-ui/themes';
+import { Text as RadixText } from '@radix-ui/themes';
+import React, { useMemo } from 'react';
+
+export type TextProps = RadixTextProps & {
+  variant?: 'body' | 'caption' | 'subtitle';
+};
+
+export function Text(props: TextProps): React.ReactNode {
+  const { size, variant, children, ...rest } = props;
+
+  const radixSize = useMemo<RadixTextProps['size']>(() => {
+    switch (variant) {
+      case 'caption':
+        return '1';
+      case 'subtitle':
+        return '3';
+      case 'body':
+        return '2';
+      default:
+        return size;
+    }
+  }, [size, variant]);
+
+  return (
+    <RadixText {...rest} size={radixSize}>
+      {children}
+    </RadixText>
+  );
+}

package/src/icons/down.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import type { IconProps } from './types';
+
+export const TriangleArrowDownIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  ({ color = 'currentColor', ...props }, forwardedRef) => {
+    return (
+      <svg
+        fill="none"
+        height="7"
+        viewBox="0 0 8 7"
+        width="8"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          d="M7.10844 0.8125H0.891554C0.197392 0.8125 -0.177096 1.62672 0.274659 2.15377L3.3831 5.78029C3.70737 6.1586 4.29263 6.1586 4.6169 5.78029L7.72534 2.15377C8.1771 1.62672 7.80261 0.8125 7.10844 0.8125Z"
+          fill={color}
+        />
+      </svg>
+    );
+  }
+);
+
+TriangleArrowDownIcon.displayName = 'ArrowDownIcon';