@tipp/ui 1.0.13 → 1.0.14

package/src/atoms/drawer.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
-import { ThemeProvider } from '../theme/theme-provider';
-
-export function Root(props: Dialog.DialogProps): React.ReactNode {
-  return <Dialog.Root {...props} />;
-}
-
-type ContentProps = Dialog.DialogContentProps & {
-  /** Drawer가 붙는 위치, 기본값 right */
-  position?: 'left' | 'right' | 'bottom' | 'top';
-};
-
-export function Content(props: ContentProps): React.ReactNode {
-  const { position = 'right', className, ...rest } = props;
-  return (
-    <Dialog.Portal>
-      <ThemeProvider>
-        <Dialog.Overlay className="DrawerOverlay" />
-        <Dialog.Content
-          className={`DrawerContent ${position} ${className || ''}`}
-          {...rest}
-        />
-      </ThemeProvider>
-    </Dialog.Portal>
-  );
-}
-
-export function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {
-  return <Dialog.Trigger asChild {...props} />;
-}
-
-export const Drawer = {
-  Root: Dialog.Root,
-  Trigger,
-  Content,
-  Close: Dialog.Close,
-  Title: Dialog.Title,
-  Description: Dialog.Description,
-};
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { ThemeProvider } from '../theme/theme-provider';
+
+export function Root(props: Dialog.DialogProps): React.ReactNode {
+  return <Dialog.Root {...props} />;
+}
+
+type ContentProps = Dialog.DialogContentProps & {
+  /** Drawer가 붙는 위치, 기본값 right */
+  position?: 'left' | 'right' | 'bottom' | 'top';
+};
+
+export function Content(props: ContentProps): React.ReactNode {
+  const { position = 'right', className, ...rest } = props;
+  return (
+    <Dialog.Portal>
+      <ThemeProvider>
+        <Dialog.Overlay className="DrawerOverlay" />
+        <Dialog.Content
+          className={`DrawerContent ${position} ${className || ''}`}
+          {...rest}
+        />
+      </ThemeProvider>
+    </Dialog.Portal>
+  );
+}
+
+export function Trigger(props: Dialog.DialogTriggerProps): React.ReactNode {
+  return <Dialog.Trigger asChild {...props} />;
+}
+
+export const Drawer = {
+  Root: Dialog.Root,
+  Trigger,
+  Content,
+  Close: Dialog.Close,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+};

package/src/atoms/dropdown-menu.tsx

@@ -1 +1 @@
-export { DropdownMenu } from '@radix-ui/themes';
+export { DropdownMenu } from '@radix-ui/themes';

package/src/atoms/ellipsis-tooltip.tsx

@@ -1,57 +1,57 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Tooltip } from './tooltip';
-import { Typo, type TypoProps } from './typo';
-
-export type EllipsisTooltipProps = TypoProps & {
-  lineClamp?: number;
-  children?: string;
-};
-
-export function EllipsisTooltip(props: EllipsisTooltipProps): React.ReactNode {
-  const { children, style, lineClamp = 2, ...rest } = props;
-  const ref = useRef<HTMLSpanElement>(null);
-
-  const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(
-    'none'
-  );
-
-  useEffect(() => {
-    if (ref.current) {
-      const typo = ref.current;
-      const mouseOver = (): void => {
-        if (typo.clientHeight < typo.scrollHeight) {
-          setTooltipDisplay('block');
-        }
-      };
-
-      const mouseOut = (): void => {
-        setTooltipDisplay('none');
-      };
-
-      ref.current.addEventListener('mouseenter', mouseOver);
-      ref.current.addEventListener('mouseleave', mouseOut);
-    }
-  }, [children]);
-
-  return (
-    <Tooltip content={children} style={{ display: tooltipDisplay }}>
-      <Typo
-        {...rest}
-        ref={ref}
-        style={{
-          width: '100%',
-          textOverflow: 'ellipsis',
-          overflow: 'hidden',
-          WebkitLineClamp: lineClamp,
-
-          display: '-webkit-box',
-          WebkitBoxOrient: 'vertical',
-          wordBreak: 'break-word',
-          ...style,
-        }}
-      >
-        {children}
-      </Typo>
-    </Tooltip>
-  );
-}
+import React, { useEffect, useRef, useState } from 'react';
+import { Tooltip } from './tooltip';
+import { Typo, type TypoProps } from './typo';
+
+export type EllipsisTooltipProps = TypoProps & {
+  lineClamp?: number;
+  children?: string;
+};
+
+export function EllipsisTooltip(props: EllipsisTooltipProps): React.ReactNode {
+  const { children, style, lineClamp = 2, ...rest } = props;
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const [tooltipDisplay, setTooltipDisplay] = useState<'none' | 'block'>(
+    'none'
+  );
+
+  useEffect(() => {
+    if (ref.current) {
+      const typo = ref.current;
+      const mouseOver = (): void => {
+        if (typo.clientHeight < typo.scrollHeight) {
+          setTooltipDisplay('block');
+        }
+      };
+
+      const mouseOut = (): void => {
+        setTooltipDisplay('none');
+      };
+
+      ref.current.addEventListener('mouseenter', mouseOver);
+      ref.current.addEventListener('mouseleave', mouseOut);
+    }
+  }, [children]);
+
+  return (
+    <Tooltip content={children} style={{ display: tooltipDisplay }}>
+      <Typo
+        {...rest}
+        ref={ref}
+        style={{
+          width: '100%',
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          WebkitLineClamp: lineClamp,
+
+          display: '-webkit-box',
+          WebkitBoxOrient: 'vertical',
+          wordBreak: 'break-word',
+          ...style,
+        }}
+      >
+        {children}
+      </Typo>
+    </Tooltip>
+  );
+}

package/src/atoms/em.tsx

@@ -1 +1 @@
-export { Em, type EmProps } from '@radix-ui/themes';
+export { Em, type EmProps } from '@radix-ui/themes';

package/src/atoms/field-error-wrapper.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Flex } from './flex';
-import { Typo } from './typo';
-
-export interface FieldErrorWrapperProps {
-  children?: React.ReactNode;
-  error?: React.ReactNode;
-}
-
-export function FieldErrorWrapper({
-  children,
-  error,
-}: FieldErrorWrapperProps): JSX.Element {
-  return (
-    <Flex direction="column" gap="1">
-      {children}
-      {error ? (
-        <Typo color="red" variant="caption">
-          {error}
-        </Typo>
-      ) : null}
-    </Flex>
-  );
-}
+import React from 'react';
+import { Flex } from './flex';
+import { Typo } from './typo';
+
+export interface FieldErrorWrapperProps {
+  children?: React.ReactNode;
+  error?: React.ReactNode;
+}
+
+export function FieldErrorWrapper({
+  children,
+  error,
+}: FieldErrorWrapperProps): JSX.Element {
+  return (
+    <Flex direction="column" gap="1">
+      {children}
+      {error ? (
+        <Typo color="red" variant="caption">
+          {error}
+        </Typo>
+      ) : null}
+    </Flex>
+  );
+}

package/src/atoms/flex.tsx

@@ -1 +1 @@
-export { Flex, type FlexProps } from '@radix-ui/themes';
+export { Flex, type FlexProps } from '@radix-ui/themes';

package/src/atoms/grid.tsx

@@ -1 +1 @@
-export { Grid, type GridProps } from '@radix-ui/themes';
+export { Grid, type GridProps } from '@radix-ui/themes';

package/src/atoms/heading.tsx

@@ -1,35 +1,35 @@
-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>
-  );
-}
+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/hover-card.tsx

@@ -1 +1 @@
-export { HoverCard } from '@radix-ui/themes';
+export { HoverCard } from '@radix-ui/themes';

package/src/atoms/icon-button.tsx

@@ -1 +1 @@
-export { IconButton, type IconButtonProps } from '@radix-ui/themes';
+export { IconButton, type IconButtonProps } from '@radix-ui/themes';

package/src/atoms/index.ts

@@ -1,53 +1,55 @@
-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 './typo';
-export * from './text-field';
-export * from './tooltip';
-export * from './collapse';
-export * from './spinner';
-export * from './pagination';
-export * from './field-error-wrapper';
-export * from './ellipsis-tooltip';
-export * from './drawer';
+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 './typo';
+export * from './text-field';
+export * from './tooltip';
+export * from './collapse';
+export * from './spinner';
+export * from './pagination';
+export * from './field-error-wrapper';
+export * from './ellipsis-tooltip';
+export * from './drawer';
+
+export * from './toast';

package/src/atoms/inset.tsx

@@ -1 +1 @@
-export { Inset, type InsetProps } from '@radix-ui/themes';
+export { Inset, type InsetProps } from '@radix-ui/themes';

package/src/atoms/kbd.tsx

@@ -1 +1 @@
-export { Kbd, type KbdProps } from '@radix-ui/themes';
+export { Kbd, type KbdProps } from '@radix-ui/themes';

package/src/atoms/link.tsx

@@ -1,33 +1,33 @@
-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>
-  );
-}
+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>
+  );
+}