@hubstr/kit 0.1.0 → 0.1.2

package/ui/src/DraggableSideNav/DraggableSideNav.tsx

@@ -15,8 +15,8 @@ import {
 } from 'react';
 import useControlledState from 'use-merge-value';
 
-import { Center, Flexbox } from '@/Flex';
-import Icon from '@/Icon';
+import { Center, Flexbox } from '../Flex';
+import Icon from '../Icon';
 
 import { styles } from './style';
 import type { DraggableSideNavProps } from './type';

package/ui/src/DraggableSideNav/demos/Body.tsx

@@ -2,7 +2,7 @@ import { Avatar, Menu, Text } from '@hubstr/kit/ui';
 import { FolderIcon } from 'lucide-react';
 import type { FC } from 'react';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../../Flex';
 
 import { agents } from './data';
 

package/ui/src/DraggableSideNav/demos/Footer.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../../Flex';
 
 export const DemoFooter: FC<{ expand: boolean }> = () => {
   return <Flexbox gap={8} padding={8} />;

package/ui/src/DraggableSideNav/demos/Header.tsx

@@ -2,7 +2,7 @@ import { ActionIcon, Avatar, Menu, type MenuItemType, Text } from '@hubstr/kit/u
 import { ChevronDown, Home, SquareDashedBottom, Users } from 'lucide-react';
 import type { FC } from 'react';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../../Flex';
 
 export const DemoHeader: FC<{
   activeKey: string;

package/ui/src/DraggableSideNav/demos/index.tsx

@@ -2,9 +2,9 @@ import { DraggableSideNav } from '@hubstr/kit/ui';
 import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
 import { useState } from 'react';
 
-import { Flexbox } from '@/Flex';
-import sideNavMessages from '@/i18n/resources/en/sideNav';
-import { useTranslation } from '@/i18n/useTranslation';
+import { Flexbox } from '../../Flex';
+import sideNavMessages from '../../i18n/resources/en/sideNav';
+import { useTranslation } from '../../i18n/useTranslation';
 
 import { DemoBody } from './Body';
 import { DemoFooter } from './Footer';

package/ui/src/DraggableSideNav/type.ts

@@ -1,7 +1,7 @@
 import type { NumberSize } from 're-resizable';
 import type { CSSProperties, ReactNode } from 'react';
 
-import type { DivProps } from '@/types';
+import type { DivProps } from '../types';
 
 export interface DraggableSideNavProps extends Omit<DivProps, 'children' | 'onSelect'> {
   backgroundColor?: string;

package/ui/src/Drawer/Drawer.tsx

@@ -5,8 +5,8 @@ import { cssVar } from 'antd-style';
 import { XIcon } from 'lucide-react';
 import { type CSSProperties, memo, useMemo } from 'react';
 
-import ActionIcon from '@/ActionIcon';
-import { Flexbox } from '@/Flex';
+import ActionIcon from '../ActionIcon';
+import { Flexbox } from '../Flex';
 
 import type { DrawerProps } from './type';
 

package/ui/src/Drawer/type.ts

@@ -1,7 +1,7 @@
 import type { DrawerProps as AntdDrawerProps } from 'antd';
 import type { CSSProperties, ReactNode, Ref } from 'react';
 
-import type { ActionIconProps } from '@/ActionIcon';
+import type { ActionIconProps } from '../ActionIcon';
 
 export interface DrawerProps extends Omit<AntdDrawerProps, 'styles' | 'classNames'> {
   classNames?: AntdDrawerProps['classNames'] & {

package/ui/src/Dropdown/Dropdown.tsx

@@ -3,8 +3,8 @@
 import { Dropdown as AntdDropdown } from 'antd';
 import { memo, useMemo } from 'react';
 
-import { IconProvider } from '@/Icon';
-import { mapItems } from '@/Menu';
+import { IconProvider } from '../Icon';
+import { mapItems } from '../Menu';
 
 import type { DropdownProps } from './type';
 

package/ui/src/Dropdown/demos/ContextMenu.tsx

@@ -1,6 +1,6 @@
 import { Dropdown } from '@hubstr/kit/ui';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../../Flex';
 
 import { menu } from './data';
 

package/ui/src/Dropdown/type.ts

@@ -1,11 +1,11 @@
 import type { DropdownProps as AntdDropdownProps } from 'antd/es';
 
-import type { IconContentConfig } from '@/Icon';
-import type { MenuProps } from '@/Menu';
+import type { IconContentConfig } from '../Icon';
+import type { MenuProps } from '../Menu';
 
 export interface DropdownProps extends Omit<AntdDropdownProps, 'menu'> {
   iconProps?: IconContentConfig;
   menu: MenuProps;
 }
 
-export type { MenuItemType as DropdownMenuItemType } from '@/Menu';
+export type { MenuItemType as DropdownMenuItemType } from '../Menu';

package/ui/src/DropdownMenu/index.ts

@@ -1,2 +1,2 @@
-export * from '@/base-ui/DropdownMenu';
-export { default } from '@/base-ui/DropdownMenu';
+export * from '../base-ui/DropdownMenu';
+export { default } from '../base-ui/DropdownMenu';

package/ui/src/EditableText/ControlInput.tsx

@@ -4,9 +4,9 @@ import type { InputRef } from 'antd';
 import { RotateCcw, Save } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
 
-import ActionIcon, { type ActionIconProps } from '@/ActionIcon';
-import { Flexbox } from '@/Flex';
-import Input, { type InputProps } from '@/Input';
+import ActionIcon, { type ActionIconProps } from '../ActionIcon';
+import { Flexbox } from '../Flex';
+import Input, { type InputProps } from '../Input';
 
 export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
   onChange?: (value: string) => void;

package/ui/src/EditableText/EditableText.tsx

@@ -6,8 +6,8 @@ import { memo, useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import useControlledState from 'use-merge-value';
 
-import ActionIcon from '@/ActionIcon';
-import { Flexbox } from '@/Flex';
+import ActionIcon from '../ActionIcon';
+import { Flexbox } from '../Flex';
 
 import ControlInput from './ControlInput';
 import type { EditableTextProps } from './type';

package/ui/src/EditableText/type.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 
-import type { ControlInputProps } from '@/EditableText/ControlInput';
-import type { FlexboxProps } from '@/Flex';
+import type { ControlInputProps } from './ControlInput';
+import type { FlexboxProps } from '../Flex';
 
 export interface EditableTextProps
   extends

package/ui/src/EditorSlashMenu/atoms.tsx

@@ -4,8 +4,8 @@ import { Autocomplete } from '@base-ui/react/autocomplete';
 import { cx } from 'antd-style';
 import type React from 'react';
 
-import { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';
-import { useAppElement } from '@/ThemeProvider';
+import { styles as menuStyles } from '../base-ui/DropdownMenu/sharedStyle';
+import { useAppElement } from '../ThemeProvider';
 
 import { styles } from './style';
 

package/ui/src/EmojiPicker/AvatarUploader.tsx

@@ -6,13 +6,13 @@ import { ChevronLeftIcon, ImageUpIcon } from 'lucide-react';
 import { memo, useCallback, useRef, useState } from 'react';
 import AvatarEditor from 'react-avatar-editor';
 
-import Button from '@/Button';
-import { Center, Flexbox } from '@/Flex';
-import emojiPickerMessages from '@/i18n/resources/en/emojiPicker';
-import { useTranslation } from '@/i18n/useTranslation';
-import Icon from '@/Icon';
-import Tag from '@/Tag';
-import Text from '@/Text';
+import Button from '../Button';
+import { Center, Flexbox } from '../Flex';
+import emojiPickerMessages from '../i18n/resources/en/emojiPicker';
+import { useTranslation } from '../i18n/useTranslation';
+import Icon from '../Icon';
+import Tag from '../Tag';
+import Text from '../Text';
 
 import { type AvatarUploaderProps } from './type';
 

package/ui/src/EmojiPicker/EmojiPicker.tsx

@@ -10,15 +10,15 @@ import { memo, useMemo, useRef, useState } from 'react';
 import useSWR from 'swr';
 import useMergeState from 'use-merge-value';
 
-import ActionIcon from '@/ActionIcon';
-import Avatar from '@/Avatar';
-import { Flexbox } from '@/Flex';
-import emojiPickerMessages from '@/i18n/resources/en/emojiPicker';
-import { useTranslation } from '@/i18n/useTranslation';
-import Icon from '@/Icon';
-import Popover from '@/Popover';
-import Tabs, { type TabsProps } from '@/Tabs';
-import Tooltip from '@/Tooltip';
+import ActionIcon from '../ActionIcon';
+import Avatar from '../Avatar';
+import { Flexbox } from '../Flex';
+import emojiPickerMessages from '../i18n/resources/en/emojiPicker';
+import { useTranslation } from '../i18n/useTranslation';
+import Icon from '../Icon';
+import Popover from '../Popover';
+import Tabs, { type TabsProps } from '../Tabs';
+import Tooltip from '../Tooltip';
 
 import AvatarUploader from './AvatarUploader';
 import { styles } from './style';

package/ui/src/EmojiPicker/demos/Control.tsx

@@ -1,7 +1,7 @@
 import { Button, EmojiPicker } from '@hubstr/kit/ui';
 import { useState } from 'react';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../../Flex';
 
 export default () => {
   const [open, setOpen] = useState(false);

package/ui/src/EmojiPicker/type.ts

@@ -1,8 +1,8 @@
 import type { CSSProperties, ReactNode } from 'react';
 
-import type { AvatarProps } from '@/Avatar/type';
-import type { FlexboxProps } from '@/Flex/type';
-import type { PopoverProps } from '@/Popover';
+import type { AvatarProps } from '../Avatar/type';
+import type { FlexboxProps } from '../Flex/type';
+import type { PopoverProps } from '../Popover';
 
 export interface AvatarUploaderProps {
   compressSize?: number;

package/ui/src/Empty/Empty.tsx

@@ -4,11 +4,11 @@ import { Empty as AntEmpty } from 'antd';
 import { cssVar, useThemeMode } from 'antd-style';
 import { type FC } from 'react';
 
-import Block from '@/Block';
-import { Flexbox } from '@/Flex';
-import FluentEmoji from '@/FluentEmoji';
-import Icon from '@/Icon';
-import Text from '@/Text';
+import Block from '../Block';
+import { Flexbox } from '../Flex';
+import FluentEmoji from '../FluentEmoji';
+import Icon from '../Icon';
+import Text from '../Text';
 
 import type { EmptyProps } from './type';
 

package/ui/src/Empty/type.ts

@@ -1,9 +1,9 @@
 import type { ReactNode } from 'react';
 
-import type { BlockProps } from '@/Block';
-import type { FlexboxProps } from '@/Flex';
-import type { IconProps } from '@/Icon';
-import type { TextProps } from '@/Text';
+import type { BlockProps } from '../Block';
+import type { FlexboxProps } from '../Flex';
+import type { IconProps } from '../Icon';
+import type { TextProps } from '../Text';
 
 export interface EmptyProps extends Omit<FlexboxProps, 'title'> {
   action?: ReactNode;

package/ui/src/FileTypeIcon/FileTypeIcon.tsx

@@ -3,7 +3,7 @@
 import { cssVar, cx, useThemeMode } from 'antd-style';
 import { type FC, useMemo } from 'react';
 
-import { Center } from '@/Flex';
+import { Center } from '../Flex';
 
 import FileIcon from './components/FileIcon';
 import FolderIcon from './components/FolderIcon';

package/ui/src/FileTypeIcon/components/FileIcon.tsx

@@ -1,7 +1,7 @@
 import { cssVar, cx } from 'antd-style';
 import { type FC } from 'react';
 
-import type { SvgProps } from '@/types';
+import type { SvgProps } from '../../types';
 
 import { styles } from '../style';
 

package/ui/src/FileTypeIcon/components/FolderIcon.tsx

@@ -1,7 +1,7 @@
 import { cssVar, cx } from 'antd-style';
 import { type FC } from 'react';
 
-import type { SvgProps } from '@/types';
+import type { SvgProps } from '../../types';
 
 import { styles } from '../style';
 

package/ui/src/FileTypeIcon/demos/Icon.tsx

@@ -2,7 +2,7 @@ import { FileTypeIcon, Icon } from '@hubstr/kit/ui';
 import { createStaticStyles, cssVar } from 'antd-style';
 import { ArrowUpIcon, PlusIcon } from 'lucide-react';
 
-import { Center, Flexbox } from '@/Flex';
+import { Center, Flexbox } from '../../Flex';
 
 const styles = createStaticStyles(({ css, cssVar }) => {
   return {

package/ui/src/FileTypeIcon/type.ts

@@ -1,6 +1,6 @@
 import type { ReactNode, Ref } from 'react';
 
-import type { DivProps, SvgProps } from '@/types';
+import type { DivProps, SvgProps } from '../types';
 
 type IconProps = SvgProps & DivProps;
 

package/ui/src/FluentEmoji/FluentEmoji.tsx

@@ -3,9 +3,9 @@
 import { cx } from 'antd-style';
 import { type FC, useMemo, useState } from 'react';
 
-import { useCdnFn } from '@/ConfigProvider';
-import { Center } from '@/Flex';
-import Img from '@/Img';
+import { useCdnFn } from '../ConfigProvider';
+import { Center } from '../Flex';
+import Img from '../Img';
 
 import { styles } from './style';
 import type { FluentEmojiProps } from './type';

package/ui/src/FluentEmoji/demos/index.tsx

@@ -3,7 +3,7 @@ import { FluentEmoji, type FluentEmojiProps } from '@hubstr/kit/ui';
 import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
 import { Button } from 'antd';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../../Flex';
 
 export default () => {
   const store = useCreateStore();

package/ui/src/FluentEmoji/type.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'react';
 
-import type { EmojiType } from '@/FluentEmoji/utils';
-import type { DivProps } from '@/types';
+import type { EmojiType } from './utils';
+import type { DivProps } from '../types';
 
 export interface FluentEmojiProps extends DivProps {
   emoji: string;

package/ui/src/Footer/Footer.tsx

@@ -3,7 +3,7 @@
 import RcFooter from 'rc-footer';
 import { memo, useMemo } from 'react';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../Flex';
 
 import { styles } from './style';
 import type { FooterProps } from './type';

package/ui/src/Footer/type.ts

@@ -1,7 +1,7 @@
 import type { FooterProps as RcProps } from 'rc-footer';
 import type { ReactNode } from 'react';
 
-import type { FlexboxProps } from '@/Flex';
+import type { FlexboxProps } from '../Flex';
 
 export interface FooterProps extends FlexboxProps {
   bottom?: ReactNode;

package/ui/src/Form/components/FormFlatGroup.tsx

@@ -3,7 +3,7 @@
 import { cx, useResponsive } from 'antd-style';
 import { memo } from 'react';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../../Flex';
 
 import { flatGroupStyles, flatGroupVariants } from '../style';
 import type { FormFlatGroupProps } from '../type';

package/ui/src/Form/components/FormFooter.tsx

@@ -3,7 +3,7 @@
 import { cx } from 'antd-style';
 import { type FC } from 'react';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../../Flex';
 
 import { footerStyles } from '../style';
 import type { FormFooterProps } from '../type';

package/ui/src/Form/components/FormGroup.tsx

@@ -4,9 +4,9 @@ import { cx, useResponsive } from 'antd-style';
 import { isUndefined } from 'es-toolkit/compat';
 import { memo } from 'react';
 
-import Collapse from '@/Collapse';
-import { Flexbox } from '@/Flex';
-import Icon from '@/Icon';
+import Collapse from '../../Collapse';
+import { Flexbox } from '../../Flex';
+import Icon from '../../Icon';
 
 import { groupStyles, titleVariants } from '../style';
 import type { FormGroupProps } from '../type';

package/ui/src/Form/components/FormSubmitFooter.tsx

@@ -6,12 +6,12 @@ import isEqual from 'fast-deep-equal';
 import { InfoIcon } from 'lucide-react';
 import { memo, useEffect, useMemo, useState } from 'react';
 
-import Button from '@/Button';
-import { Flexbox } from '@/Flex';
-import formMessages from '@/i18n/resources/en/form';
-import { useTranslation } from '@/i18n/useTranslation';
-import Icon from '@/Icon';
-import { useMotionComponent } from '@/MotionProvider';
+import Button from '../../Button';
+import { Flexbox } from '../../Flex';
+import formMessages from '../../i18n/resources/en/form';
+import { useTranslation } from '../../i18n/useTranslation';
+import Icon from '../../Icon';
+import { useMotionComponent } from '../../MotionProvider';
 
 import { submitFooterStyles } from '../style';
 import { type FormSubmitFooterProps } from '../type';

package/ui/src/Form/components/FormTitle.tsx

@@ -3,8 +3,8 @@
 import { cx } from 'antd-style';
 import { type FC } from 'react';
 
-import { Flexbox } from '@/Flex';
-import Tag from '@/Tag';
+import { Flexbox } from '../../Flex';
+import Tag from '../../Tag';
 
 import { titleStyles as styles } from '../style';
 import type { FormTitleProps } from '../type';

package/ui/src/Form/demos/SubmitFooter.tsx

@@ -2,7 +2,7 @@ import { Form } from '@hubstr/kit/ui';
 import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
 import { useState } from 'react';
 
-import { items } from '@/Form/demos/data';
+import { items } from './data';
 
 const setting = {
   i18n: 'en',

package/ui/src/Form/demos/index.tsx

@@ -2,7 +2,7 @@ import { Form, type FormProps } from '@hubstr/kit/ui';
 import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
 import { useState } from 'react';
 
-import { items } from '@/Form/demos/data';
+import { items } from './data';
 
 const setting = {
   i18n: 'en',

package/ui/src/Form/style.ts

@@ -1,7 +1,7 @@
 import { createStaticStyles, responsive } from 'antd-style';
 import { cva } from 'class-variance-authority';
 
-import { hubstrStaticStylish } from '@/styles';
+import { hubstrStaticStylish } from '../styles';
 
 const prefixCls = 'ant';
 

package/ui/src/Form/type.ts

@@ -2,12 +2,12 @@ import { type DividerProps, type FormInstance, type FormProps as AntFormProps }
 import { type FormItemProps as AntdFormItemProps } from 'antd/es/form/FormItem';
 import { type CSSProperties, type ReactNode, type Ref } from 'react';
 
-import { type ButtonProps } from '@/Button';
-import { type CollapseProps } from '@/Collapse';
-import { type FlexboxProps } from '@/Flex';
-import { type IconProps } from '@/Icon';
-import { type TagProps } from '@/Tag';
-import { type DivProps } from '@/types';
+import { type ButtonProps } from '../Button';
+import { type CollapseProps } from '../Collapse';
+import { type FlexboxProps } from '../Flex';
+import { type IconProps } from '../Icon';
+import { type TagProps } from '../Tag';
+import { type DivProps } from '../types';
 
 export type FormVariant = 'filled' | 'outlined' | 'borderless';
 export type ItemsType = 'group' | 'flat';

package/ui/src/FormModal/FormModal.tsx

@@ -3,10 +3,10 @@
 import { cx, useResponsive } from 'antd-style';
 import { memo } from 'react';
 
-import Button from '@/Button';
-import { Flexbox } from '@/Flex';
-import Form from '@/Form';
-import Modal from '@/Modal';
+import Button from '../Button';
+import { Flexbox } from '../Flex';
+import Form from '../Form';
+import Modal from '../Modal';
 
 import { styles as staticStyles } from './style';
 import type { FormModalProps } from './type';

package/ui/src/FormModal/type.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'react';
 
-import type { ButtonProps } from '@/Button';
-import type { FormInstance, FormProps } from '@/Form';
-import type { ModalProps } from '@/Modal';
+import type { ButtonProps } from '../Button';
+import type { FormInstance, FormProps } from '../Form';
+import type { ModalProps } from '../Modal';
 
 type PickModalProps = Pick<
   ModalProps,

package/ui/src/Grid/Grid.tsx

@@ -5,7 +5,7 @@ import { isString } from 'es-toolkit/compat';
 import { type FC } from 'react';
 import { useMemo } from 'react';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../Flex';
 
 import { styles } from './style';
 import type { GridProps } from './type';

package/ui/src/Grid/type.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'react';
 
-import type { FlexboxProps } from '@/Flex';
+import type { FlexboxProps } from '../Flex';
 
 export interface GridProps extends Omit<FlexboxProps, 'gap'> {
   gap?: string | number;

package/ui/src/GroupAvatar/GroupAvatar.tsx

@@ -3,9 +3,9 @@
 import { cx } from 'antd-style';
 import { type FC, useMemo } from 'react';
 
-import Avatar from '@/Avatar';
-import Block from '@/Block';
-import Grid from '@/Grid';
+import Avatar from '../Avatar';
+import Block from '../Block';
+import Grid from '../Grid';
 
 import { variants } from './style';
 import type { GroupAvatarProps } from './type';

package/ui/src/GroupAvatar/demos/CornerShape.tsx

@@ -1,7 +1,7 @@
 import { Grid, GroupAvatar, Text } from '@hubstr/kit/ui';
 
-import { Center } from '@/Flex';
-import { SMOOTH_CORNER_MASKS } from '@/utils/smoothCorners';
+import { Center } from '../../Flex';
+import { SMOOTH_CORNER_MASKS } from '../../utils/smoothCorners';
 
 const avatars = [
   'https://avatar.vercel.sh/jane',

package/ui/src/GroupAvatar/demos/index.tsx

@@ -1,7 +1,7 @@
 import { GroupAvatar, type GroupAvatarProps } from '@hubstr/kit/ui';
 import { StoryBook, useControls, useCreateStore } from '@hubstr/kit/ui/storybook';
 
-import { Flexbox } from '@/Flex';
+import { Flexbox } from '../../Flex';
 
 export default () => {
   const store = useCreateStore();

package/ui/src/GroupAvatar/style.ts

@@ -1,7 +1,7 @@
 import { createStaticStyles } from 'antd-style';
 import { cva } from 'class-variance-authority';
 
-import { SMOOTH_CORNER_MASKS } from '@/utils/smoothCorners';
+import { SMOOTH_CORNER_MASKS } from '../utils/smoothCorners';
 
 export const styles = createStaticStyles(({ css }) => {
   const createCornerVariant = (cornerType: keyof typeof SMOOTH_CORNER_MASKS) => css`

package/ui/src/GroupAvatar/type.ts

@@ -1,8 +1,8 @@
 import type { Ref } from 'react';
 
-import type { AvatarProps } from '@/Avatar/type';
-import type { BlockProps } from '@/Block/type';
-import type { SMOOTH_CORNER_MASKS } from '@/utils/smoothCorners';
+import type { AvatarProps } from '../Avatar/type';
+import type { BlockProps } from '../Block/type';
+import type { SMOOTH_CORNER_MASKS } from '../utils/smoothCorners';
 
 type AvatarItem = string | Omit<AvatarProps, 'size'>;