@tipp/ui 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,18 +1,24 @@
 import {
-  Tooltip
-} from "./chunk-ACVANQJ4.js";
+  TextField
+} from "./chunk-JPIZP2PZ.js";
 import {
-  ThemeProvider
-} from "./chunk-LREYUDKD.js";
+  Text
+} from "./chunk-XJJDE4YP.js";
 import {
-  useThemeContext
-} from "./chunk-MMGP4GEQ.js";
+  Tooltip
+} from "./chunk-ACVANQJ4.js";
 import {
   uiProps
 } from "./chunk-NVKNDAIN.js";
 import {
   DatePicker
-} from "./chunk-D5QWAVBB.js";
+} from "./chunk-IIBITN2G.js";
+import {
+  Select
+} from "./chunk-355MU6BH.js";
+import {
+  Separator
+} from "./chunk-HYITAA4J.js";
 import {
   Skeleton
 } from "./chunk-5H3YPCZK.js";
@@ -32,11 +38,11 @@ import {
   TextArea
 } from "./chunk-ILRUXI2E.js";
 import {
-  TextField
-} from "./chunk-JPIZP2PZ.js";
+  Progress
+} from "./chunk-365QMK4D.js";
 import {
-  Text
-} from "./chunk-DYUKDKUS.js";
+  Quote
+} from "./chunk-YO3BQW6S.js";
 import {
   RadioCards
 } from "./chunk-6IVCARWS.js";
@@ -56,11 +62,11 @@ import {
   SegmentedControl
 } from "./chunk-TVDKGMBI.js";
 import {
-  Select
-} from "./chunk-355MU6BH.js";
+  Grid
+} from "./chunk-EGEQY3KT.js";
 import {
-  Separator
-} from "./chunk-HYITAA4J.js";
+  Heading
+} from "./chunk-HLOY6BIP.js";
 import {
   HoverCard
 } from "./chunk-O3T3TM3V.js";
@@ -75,16 +81,16 @@ import {
 } from "./chunk-TULWX7D6.js";
 import {
   Link
-} from "./chunk-MLMWFOEE.js";
+} from "./chunk-XQOZWYUA.js";
 import {
   Popover
 } from "./chunk-5AVBYDPB.js";
 import {
-  Progress
-} from "./chunk-365QMK4D.js";
+  Checkbox
+} from "./chunk-JEHDCZQU.js";
 import {
-  Quote
-} from "./chunk-YO3BQW6S.js";
+  Code
+} from "./chunk-OHMOP5PV.js";
 import {
   Container
 } from "./chunk-Q37G2GS6.js";
@@ -104,17 +110,17 @@ import {
   Flex
 } from "./chunk-25HMMI7R.js";
 import {
-  Grid
-} from "./chunk-EGEQY3KT.js";
+  Badge
+} from "./chunk-ALOPZ54P.js";
 import {
-  Heading
-} from "./chunk-MYTJIEMB.js";
+  Blockquote
+} from "./chunk-YGL6SWKN.js";
 import {
   Box
 } from "./chunk-4Y5BEXVN.js";
 import {
   Button
-} from "./chunk-LFJCZVNE.js";
+} from "./chunk-RET725VL.js";
 import {
   Callout
 } from "./chunk-B6XJN6EC.js";
@@ -126,13 +132,7 @@ import {
 } from "./chunk-MIMJ7LON.js";
 import {
   CheckboxGroup
-} from "./chunk-4PP245MS.js";
-import {
-  Checkbox
-} from "./chunk-3566LFAS.js";
-import {
-  Code
-} from "./chunk-OHMOP5PV.js";
+} from "./chunk-IQEEPHOY.js";
 import {
   BookmarkIcon,
   ChatBubbleIcon,
@@ -143,6 +143,12 @@ import {
   MagnifyingGlassIcon,
   PlusIcon
 } from "./chunk-UVZ6CCUI.js";
+import {
+  ThemeProvider
+} from "./chunk-PL3Q4UVY.js";
+import {
+  useThemeContext
+} from "./chunk-MMGP4GEQ.js";
 import {
   AlertDialog
 } from "./chunk-J242TTFH.js";
@@ -151,14 +157,8 @@ import {
 } from "./chunk-EAXUQEO5.js";
 import {
   Avatar
-} from "./chunk-M4P36WOR.js";
-import {
-  Badge
-} from "./chunk-W4KST6UY.js";
-import {
-  Blockquote
-} from "./chunk-YGL6SWKN.js";
-import "./chunk-LGTAQGUA.js";
+} from "./chunk-CZEGRZBK.js";
+import "./chunk-N552FDTV.js";
 export {
   AlertDialog,
   AspectRatio,

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/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.4",
+  "version": "0.1.6",
   "private": false,
   "type": "module",
   "exports": {
@@ -54,9 +54,11 @@
     "dist/**"
   ],
   "dependencies": {
-    "@kbox-labs/react-echarts": "^1.2.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.1.1",
+    "echarts-for-react": "^3.0.2",
+    "i": "^0.3.7",
+    "npm": "^10.8.2",
     "react": "^18.3.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.3.1",

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/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/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/chart/chart.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { EChart } from '@kbox-labs/react-echarts';
-import type { EChartProps } from '@kbox-labs/react-echarts';
 import { useResizeDetector } from 'react-resize-detector';
+import ReactECharts from 'echarts-for-react';
 
-export type ChartProps = EChartProps;
+export type ChartProps = React.ComponentProps<typeof ReactECharts>;
 
 export function Chart(props: ChartProps): JSX.Element {
   const { width, height, ref } = useResizeDetector({
@@ -14,7 +13,7 @@ export function Chart(props: ChartProps): JSX.Element {
 
   return (
     <div ref={ref} style={{ width: '100%', height: '100%' }}>
-      <EChart style={{ width, height }} {...props} />
+      <ReactECharts style={{ width, height }} {...props} />
     </div>
   );
 }

package/src/theme/theme-provider.tsx

@@ -8,5 +8,5 @@ interface ThemeProviderProps extends ThemeProps {
 }
 
 export function ThemeProvider(props: ThemeProviderProps): React.ReactNode {
-  return <Theme accentColor="iris" {...props} />;
+  return <Theme accentColor="iris" radius="large" {...props} />;
 }

package/dist/chunk-3566LFAS.js

@@ -1,7 +0,0 @@
-// src/atoms/check-box.tsx
-import { Checkbox } from "@radix-ui/themes";
-
-export {
-  Checkbox
-};
-//# sourceMappingURL=chunk-3566LFAS.js.map

package/dist/chunk-3566LFAS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/check-box.tsx"],"sourcesContent":["export { Checkbox, type CheckboxProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,gBAAoC;","names":[]}

package/dist/chunk-4PP245MS.js

@@ -1,7 +0,0 @@
-// src/atoms/check-box-group.tsx
-import { CheckboxGroup } from "@radix-ui/themes";
-
-export {
-  CheckboxGroup
-};
-//# sourceMappingURL=chunk-4PP245MS.js.map

package/dist/chunk-4PP245MS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/check-box-group.tsx"],"sourcesContent":["export { CheckboxGroup } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,qBAAqB;","names":[]}

package/dist/chunk-DYUKDKUS.js

@@ -1,7 +0,0 @@
-// src/atoms/text.tsx
-import { Text } from "@radix-ui/themes";
-
-export {
-  Text
-};
-//# sourceMappingURL=chunk-DYUKDKUS.js.map

package/dist/chunk-DYUKDKUS.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/text.tsx"],"sourcesContent":["export { Text, type TextProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,YAA4B;","names":[]}

package/dist/chunk-LFJCZVNE.js

@@ -1,7 +0,0 @@
-// src/atoms/button.tsx
-import { Button } from "@radix-ui/themes";
-
-export {
-  Button
-};
-//# sourceMappingURL=chunk-LFJCZVNE.js.map

package/dist/chunk-LFJCZVNE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/button.tsx"],"sourcesContent":["export { Button, type ButtonProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,cAAgC;","names":[]}

package/dist/chunk-M4P36WOR.js

@@ -1,7 +0,0 @@
-// src/atoms/avatar.tsx
-import { Avatar } from "@radix-ui/themes";
-
-export {
-  Avatar
-};
-//# sourceMappingURL=chunk-M4P36WOR.js.map

package/dist/chunk-M4P36WOR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/avatar.tsx"],"sourcesContent":["export { Avatar, type AvatarProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,cAAgC;","names":[]}

package/dist/chunk-MLMWFOEE.js

@@ -1,7 +0,0 @@
-// src/atoms/link.tsx
-import { Link } from "@radix-ui/themes";
-
-export {
-  Link
-};
-//# sourceMappingURL=chunk-MLMWFOEE.js.map

package/dist/chunk-MLMWFOEE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/link.tsx"],"sourcesContent":["export { Link, type LinkProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,YAA4B;","names":[]}

package/dist/chunk-MYTJIEMB.js

@@ -1,7 +0,0 @@
-// src/atoms/heading.tsx
-import { Heading } from "@radix-ui/themes";
-
-export {
-  Heading
-};
-//# sourceMappingURL=chunk-MYTJIEMB.js.map

package/dist/chunk-MYTJIEMB.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atoms/heading.tsx"],"sourcesContent":["export { Heading, type HeadingProps } from '@radix-ui/themes';\n"],"mappings":";AAAA,SAAS,eAAkC;","names":[]}