@petnow/ui 3.0.3 → 4.0.0

package/dist/src/components/ui/button.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/src/components/ui/dialog.d.ts

@@ -0,0 +1,13 @@
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import * as React from "react";
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/src/components/{mobile → v0}/tabs/Tabs.d.ts

@@ -7,7 +7,7 @@ interface TabItem {
 interface Props<T extends TabItem> {
     tabList: Readonly<T[]>;
     isCuratedcontent?: true;
-    unswipeableContent?: JSX.Element;
+    unswipeableContent?: ReactNode;
     defaultIndex?: number;
     onTabChange?: (index: number) => void;
     disabled?: boolean;

package/dist/src/components/v1/badge/Badge.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+type BadgeType = "filled" | "outlined" | "tinted";
+type BadgeColor = "orange" | "blue" | "red" | "green" | "neutral";
+type BadgeSize = "small" | "large";
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    type?: BadgeType;
+    color?: BadgeColor;
+    size?: BadgeSize;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export { Badge };

package/dist/src/components/v1/badge/Badge.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Badge } from './Badge';
+declare const meta: Meta<typeof Badge>;
+export default meta;
+type Story = StoryObj<typeof Badge>;
+export declare const Default: Story;
+export declare const TintedWithIcon: Story;
+export declare const OutlinedSmall: Story;
+export declare const TypeColorShowcase: Story;
+export declare const SizeShowcase: Story;

package/dist/src/components/v1/chip/Chip.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    selected?: boolean;
+    onPress?: () => void;
+}
+declare const Chip: ({ className, label, icon: Icon, selected, disabled, onPress, onClick, type, ...props }: ChipProps) => import("react/jsx-runtime").JSX.Element;
+export { Chip };

package/dist/src/components/v1/chip/Chip.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Chip } from './Chip';
+declare const meta: Meta<typeof Chip>;
+export default meta;
+type Story = StoryObj<typeof Chip>;
+export declare const Default: Story;
+export declare const Selected: Story;
+export declare const WithIcon: Story;
+export declare const Disabled: Story;
+export declare const SelectableGroup: Story;

package/dist/src/components/v1/cta-button/CTAButton.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const ctaButtonVariants: (props?: ({
+    hierarchy?: "primary" | "secondary" | "tertiary" | null | undefined;
+    size?: "small" | "large" | "medium" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CTAButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof ctaButtonVariants> {
+    label: string | React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    className?: string;
+}
+declare const CTAButton: React.ForwardRefExoticComponent<CTAButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { CTAButton };

package/dist/src/components/v1/cta-button/CTAButton.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { CTAButton } from './CTAButton';
+declare const meta: Meta<typeof CTAButton>;
+export default meta;
+type Story = StoryObj<typeof CTAButton>;
+export declare const Default: Story;
+export declare const SecondaryMedium: Story;
+export declare const TertiarySmallWithIcon: Story;
+export declare const Disabled: Story;
+export declare const HierarchyShowcase: Story;
+export declare const SizeShowcase: Story;

package/dist/src/components/v1/icons/action/CancelFilledIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const CancelFilledIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { CancelFilledIcon };

package/dist/src/components/v1/icons/action/CancelIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const CancelIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { CancelIcon };

package/dist/src/components/v1/icons/action/ChevronDownIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ChevronDownIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ChevronDownIcon };

package/dist/src/components/v1/icons/action/ChevronLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ChevronLeftIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ChevronLeftIcon };

package/dist/src/components/v1/icons/action/ChevronRightIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ChevronRightIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ChevronRightIcon };

package/dist/src/components/v1/icons/action/ChevronUpIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ChevronUpIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ChevronUpIcon };

package/dist/src/components/v1/icons/action/FilterIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const FilterIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { FilterIcon };

package/dist/src/components/v1/icons/action/RetryIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const RetryIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { RetryIcon };

package/dist/src/components/v1/icons/action/SortingIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const SortingIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { SortingIcon };

package/dist/src/components/v1/icons/static/CloseIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const CloseIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { CloseIcon };

package/dist/src/components/v1/icons/static/DeleteIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const DeleteIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { DeleteIcon };

package/dist/src/components/v1/icons/static/RecentIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const RecentIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { RecentIcon };

package/dist/src/components/v1/icons/static/ReportIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ReportIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ReportIcon };

package/dist/src/components/v1/icons/static/ShieldDoneIcon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+declare const ShieldDoneIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+export { ShieldDoneIcon };

package/dist/src/components/v1/popup/Popup.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+type PopupAction = {
+    label: string | React.ReactNode;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    onClick?: () => void;
+};
+export interface PopupProps {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    title?: string | React.ReactNode;
+    description?: string | React.ReactNode;
+    content?: React.ReactNode;
+    confirm?: PopupAction;
+    cancel?: PopupAction;
+    preventEasyClose?: boolean;
+    className?: string;
+}
+declare const Popup: ({ isOpen, setIsOpen, title, description, content, confirm, cancel, preventEasyClose, className, }: PopupProps) => import("react/jsx-runtime").JSX.Element;
+export { Popup };

package/dist/src/components/{mobile → v1}/popup/Popup.stories.d.ts

@@ -1,12 +1,11 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { default as Popup } from './Popup';
+import { Popup } from './Popup';
 declare const meta: Meta<typeof Popup>;
 export default meta;
 type Story = StoryObj<typeof Popup>;
 export declare const Default: Story;
 export declare const OnlyTitle: Story;
 export declare const OnlyConfirm: Story;
-export declare const OnlyTitleAndConfirm: Story;
-export declare const OnlyImage: Story;
-export declare const DisableOutsideClick: Story;
-export declare const DisableConfirmAndCancelBtn: Story;
+export declare const WithCustomContent: Story;
+export declare const PreventEasyClose: Story;
+export declare const DescriptionOnly: Story;

package/dist/src/components/v1/text-field/TextField.d.ts

@@ -0,0 +1,50 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+interface TextFieldNormalProps extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "size"> {
+    subtitle?: string;
+    isRequired?: boolean;
+    assistiveText?: string | React.ReactNode;
+    errorText?: string;
+    disabled?: boolean;
+    multiLine?: boolean;
+    className?: string;
+    rightElement?: React.ReactNode;
+    showCounter?: boolean;
+    size?: "large" | "small";
+}
+declare const TextFieldNormal: React.ForwardRefExoticComponent<TextFieldNormalProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+declare const textFieldSelectVariants: (props?: ({
+    size?: "small" | "large" | null | undefined;
+    hasError?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+interface TextFieldSelectProps extends VariantProps<typeof textFieldSelectVariants> {
+    label?: string;
+    placeholder: string;
+    value?: string;
+    isRequired?: boolean;
+    disabled?: boolean;
+    assistiveText?: string | React.ReactNode;
+    errorText?: string;
+    onPress?: () => void;
+    className?: string;
+    size?: "large" | "small";
+}
+declare const TextFieldSelect: ({ label, placeholder, value, isRequired, disabled, assistiveText, errorText, onPress, className, size, }: TextFieldSelectProps) => import("react/jsx-runtime").JSX.Element;
+interface TextFieldWithButtonProps extends Omit<React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "size"> {
+    subtitle?: string;
+    isRequired?: boolean;
+    assistiveText?: string | React.ReactNode;
+    errorText?: string;
+    disabled?: boolean;
+    multiLine?: boolean;
+    className?: string;
+    showCounter?: boolean;
+    size?: "large" | "small";
+    fieldRightElement?: React.ReactNode;
+    buttonText: string;
+    onButtonClick: () => void;
+    buttonDisabled?: boolean;
+}
+declare const TextFieldWithButton: React.ForwardRefExoticComponent<TextFieldWithButtonProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export { TextFieldNormal, TextFieldSelect, TextFieldWithButton };

package/dist/src/components/v1/text-field/TextField.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { TextFieldNormal } from './TextField';
+declare const meta: Meta<typeof TextFieldNormal>;
+export default meta;
+type Story = StoryObj<typeof TextFieldNormal>;
+export declare const Normal: Story;
+export declare const NormalWithErrorAndCounter: Story;
+export declare const Multiline: Story;
+export declare const SelectField: Story;
+export declare const SelectFieldSmallError: Story;
+export declare const WithButton: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@petnow/ui",
-  "version": "3.0.3",
+  "version": "4.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -15,18 +15,22 @@
     "format:fix": "prettier . --write"
   },
   "dependencies": {
+    "@fontsource-variable/geist": "^5.2.8",
     "@headlessui/react": "^2.2.9",
     "@types/react-swipeable-views": "^0.13.6",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "keen-slider": "^6.8.6",
-    "react": "^18.2.0",
+    "lucide-react": "^0.577.0",
+    "radix-ui": "^1.4.3",
     "react-datepicker": "^8.3.0",
     "react-daum-postcode": "^3.2.0",
-    "react-dom": "^18.2.0",
     "react-icons": "^5.5.0",
     "react-swipeable-views": "^0.14.1",
-    "tailwind-merge": "^3.3.1"
+    "shadcn": "^4.0.8",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.7",
@@ -44,8 +48,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
     "@types/node": "^24.6.2",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^5.0.4",
@@ -61,6 +65,8 @@
     "postcss": "^8.5.6",
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "storybook": "^8.5.3",
     "tailwindcss": "^4.1.14",
     "ts-jest": "^29.4.4",
@@ -69,13 +75,17 @@
     "vite": "^6.2.4",
     "vite-plugin-dts": "^4.5.3"
   },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.umd.js"
     },
     "./package.json": "./package.json",
     "./dist/*": "./dist/*",