@antscorp/ama-ui 0.0.44 → 0.1.0

package/dist/index.d.ts

@@ -29,6 +29,7 @@ import { Collapse as Collapse_2 } from 'antd-mobile';
 import { CollapseProps as CollapseProps_2 } from 'antd-mobile';
 import { ConfigProviderProps as ConfigProviderProps_2 } from 'antd-mobile';
 import { confirm as confirm_2 } from 'antd-mobile/es/components/modal/confirm';
+import { CSSProperties } from 'react';
 import { DatePickerProps as DatePickerProps_2 } from 'antd-mobile';
 import { default as default_2 } from 'react';
 import { Dialog } from 'antd-mobile';
@@ -41,7 +42,7 @@ import { ErrorBlockProps as ErrorBlockProps_2 } from 'antd-mobile';
 import { FC } from 'react';
 import { FloatingPanelProps as FloatingPanelProps_2 } from 'antd-mobile';
 import { FooterProps as FooterProps_2 } from 'antd-mobile';
-import { Form as Form_2 } from 'antd-mobile';
+import { FormItemProps } from 'antd-mobile';
 import { FormProps as FormProps_2 } from 'antd-mobile';
 import { ForwardRefExoticComponent } from 'react';
 import { Grid as Grid_2 } from 'antd-mobile';
@@ -113,10 +114,28 @@ import { TextAreaProps as TextAreaProps_2 } from 'antd-mobile';
 import { Toast } from 'antd-mobile';
 import { ToastHandler } from 'antd-mobile/es/components/toast';
 import { ToastShowProps } from 'antd-mobile';
+import { Transition } from 'motion/react';
+import { useForm } from 'rc-field-form';
+import { useWatch } from 'rc-field-form';
 import { WaterMarkProps as WaterMarkProps_2 } from 'antd-mobile';
 
 export { Action }
 
+export declare interface ActionButton {
+    /** Text hiển thị trên action button */
+    text: string;
+    /** Nếu giá trị là true action sẽ có kiểu highlight */
+    highLight?: boolean;
+    /** Nếu giá trị là true action sẽ có kiểu danger */
+    danger?: boolean;
+    /** Function sẽ được gọi khi click action */
+    onClick?: () => void;
+    /** Action sau khi click sẽ close modal */
+    close?: boolean;
+    /** Disable action */
+    disabled?: boolean;
+}
+
 export declare const ActionSheet: ActionSheetType;
 
 export declare interface ActionSheetProps extends ActionSheetProps_2 {
@@ -241,8 +260,6 @@ export declare const ConfigProvider: default_2.FC<ConfigProviderProps>;
 declare interface ConfigProviderProps extends ConfigProviderProps_2 {
     /** An optional prop */
     optional?: string;
-    /** An optional prop */
-    language?: "en" | "vi";
 }
 
 export declare const DatePicker: default_2.FC<DatePickerProps>;
@@ -304,9 +321,9 @@ export declare interface FooterProps extends FooterProps_2 {
 }
 
 export declare const Form: default_2.FC<FormProps> & {
-    Item: typeof Form_2.Item;
-    useForm: typeof Form_2.useForm;
-    useWatch: typeof Form_2.useWatch;
+    Item: default_2.FC<FormItemProps>;
+    useForm: useForm;
+    useWatch: useWatch;
 };
 
 export declare interface FormProps extends FormProps_2 {
@@ -433,7 +450,7 @@ export declare interface PickerProps extends PickerProps_2 {
 
 export declare const PickerView: (props: PickerViewProps) => JSX_2.Element;
 
-export declare type PickerViewProps = Pick<PickerViewProps_2, 'className' | 'columns' | 'defaultValue' | 'mouseWheel' | 'onChange' | 'renderLabel' | 'value' | 'loading' | 'loadingContent'>;
+export declare type PickerViewProps = Pick<PickerViewProps_2, "className" | "columns" | "defaultValue" | "mouseWheel" | "onChange" | "renderLabel" | "value" | "loading" | "loadingContent">;
 
 export declare const Popover: default_2.FC<PopoverProps> & {
     Menu: typeof Popover_2.Menu;
@@ -530,6 +547,116 @@ declare interface SelectorProps_2<V extends SelectorValue> extends SelectorProps
 
 declare type SelectorValue = string | number;
 
+export declare const Sheet: SheetType;
+
+export declare const SheetAction: default_2.FC<SheetActionProps>;
+
+export declare interface SheetActionProps {
+    /** Có divider giữa các action */
+    divider?: boolean;
+    /** Danh sách các action */
+    actions: ActionButton[];
+    /** Có divider giữa các group action */
+    groupDivider?: boolean;
+    /** Callback để close sheet khi action có close=true */
+    onClose?: () => void;
+}
+
+declare const SheetComponent: default_2.ForwardRefExoticComponent<SheetProps & default_2.RefAttributes<SheetRef>>;
+
+export declare interface SheetProps extends Omit<PopupProps_2, "position" | "bodyStyle"> {
+    /** Hiển thị mask khi show sheet */
+    mask?: boolean;
+    /** Function gọi sau khi close sheet */
+    afterClose?: () => void;
+    /** Function gọi khi close sheet */
+    onClose?: () => void;
+    /** Đóng sheet khi click vào mask */
+    maskClosable?: boolean;
+    /** Hiển thị sheet modal */
+    visible?: boolean;
+    /** Unmount sau khi đóng sheet modal */
+    unmountOnClose?: boolean;
+    /** Title của sheet modal */
+    title?: string;
+    /** Sheet width */
+    width?: string | number;
+    /** Sheet height */
+    height?: string | number;
+    /** Sheet description */
+    description?: string;
+    /** Nội dung sheet */
+    children?: default_2.ReactNode;
+    /** Giá trị z-index của modal */
+    zIndex?: number;
+    /** Sheet handler */
+    handler?: boolean;
+    /** Chiều cao của sheet ôm theo content */
+    autoHeight?: boolean;
+    /** Vuốt xuống để đóng sheet modal */
+    swipeToClose?: boolean;
+    /** Các snap points */
+    snapPoints?: number[] | ((args: {
+        sheetModalHeight: number;
+    }) => number[]);
+    /** Index của snapPoints mặc định khi mở sheet modal */
+    defaultSnapPoint?: number;
+    /** Callback function khi expand/collapse đến một snap point mới */
+    onSnap?: (snapPoint: number) => void;
+    /** Cấu hình transition animation cho sheet (default: spring với damping: 30, stiffness: 300) */
+    transition?: Transition;
+    /** Semantic class names cho các parts của Sheet */
+    classNames?: {
+        /** Class name cho AntdPopup root wrapper */
+        popup?: string;
+        /** Class name cho AntdPopup body */
+        popupBody?: string;
+        /** Class name cho Sheet container (SheetContainer) */
+        sheet?: string;
+        /** Class name cho mask overlay */
+        mask?: string;
+        /** Class name cho handler bar */
+        handler?: string;
+        /** Class name cho header wrapper */
+        header?: string;
+        /** Class name cho title */
+        title?: string;
+        /** Class name cho description */
+        description?: string;
+        /** Class name cho content wrapper */
+        content?: string;
+    };
+    /** Semantic styles cho các parts của Sheet */
+    styles?: {
+        /** Style cho AntdPopup root wrapper */
+        popup?: CSSProperties;
+        /** Style cho Sheet container (SheetContainer) */
+        sheet?: CSSProperties;
+        /** Style cho mask overlay */
+        mask?: CSSProperties;
+        /** Style cho handler bar */
+        handler?: CSSProperties;
+        /** Style cho header wrapper */
+        header?: CSSProperties;
+        /** Style cho title */
+        title?: CSSProperties;
+        /** Style cho description */
+        description?: CSSProperties;
+        /** Style cho content wrapper */
+        content?: CSSProperties;
+    };
+}
+
+export declare interface SheetRef {
+    sheet: HTMLDivElement | null;
+    snapTo: (index: number) => void;
+    getCurrentSnapIndex: () => number;
+}
+
+declare type SheetType = typeof SheetComponent & {
+    Action: typeof SheetAction;
+};
+
 export declare const SideBar: default_2.FC<SideBarProps> & {
     Item: typeof SideBar_2.Item;
 };

package/dist/tailwind-theme.css

@@ -0,0 +1,32 @@
+@plugin "tailwindcss-animate";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --radius-lg: var(--am-radius);
+  --radius-md: calc(var(--am-radius) - 2px);
+  --radius-sm: calc(var(--am-radius) - 4px);
+  --color-background: hsl(var(--am-background));
+  --color-foreground: hsl(var(--am-foreground));
+  --color-card: hsl(var(--am-card));
+  --color-card-foreground: hsl(var(--am-card-foreground));
+  --color-popover: hsl(var(--am-popover));
+  --color-popover-foreground: hsl(var(--am-popover-foreground));
+  --color-primary: hsl(var(--am-primary));
+  --color-primary-foreground: hsl(var(--am-primary-foreground));
+  --color-secondary: hsl(var(--am-secondary));
+  --color-secondary-foreground: hsl(var(--am-secondary-foreground));
+  --color-muted: hsl(var(--am-muted));
+  --color-muted-foreground: hsl(var(--am-muted-foreground));
+  --color-accent: hsl(var(--am-accent));
+  --color-accent-foreground: hsl(var(--am-accent-foreground));
+  --color-destructive: hsl(var(--am-destructive));
+  --color-destructive-foreground: hsl(var(--am-destructive-foreground));
+  --color-border: hsl(var(--am-border));
+  --color-input: hsl(var(--am-input));
+  --color-ring: hsl(var(--am-ring));
+  --color-chart-1: hsl(var(--am-chart-1));
+  --color-chart-2: hsl(var(--am-chart-2));
+  --color-chart-3: hsl(var(--am-chart-3));
+  --color-chart-4: hsl(var(--am-chart-4));
+  --color-chart-5: hsl(var(--am-chart-5));
+}

package/package.json

@@ -1,9 +1,17 @@
 {
   "name": "@antscorp/ama-ui",
-  "version": "0.0.44",
+  "version": "0.1.0",
   "main": "dist/ama-ui.es.js",
   "module": "dist/ama-ui.es.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/ama-ui.es.js"
+    },
+    "./ama-ui.css": "./dist/ama-ui.css",
+    "./tailwind-theme.css": "./dist/tailwind-theme.css"
+  },
   "sideEffects": false,
   "type": "module",
   "files": [
@@ -14,7 +22,9 @@
     "dev": "vite",
     "build": "yarn clean && vite build --config vite.config.build.ts",
     "clean": "rimraf dist",
-    "lint": "eslint .",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "format": "biome format --write .",
     "preview": "vite preview",
     "test": "vitest",
     "storybook": "storybook dev -p 6006",
@@ -24,14 +34,14 @@
     "antd-mobile": "^5.38.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
+    "motion": "^12.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "styled-components": "^6.1.14",
-    "tailwindcss-animate": "^1.0.7"
+    "styled-components": "^6.1.14"
   },
   "devDependencies": {
+    "@biomejs/biome": "^2.3.2",
     "@chromatic-com/storybook": "^3.2.4",
-    "@eslint/js": "^9.17.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@storybook/addon-docs": "^8.5.6",
     "@storybook/addon-essentials": "^8.5.8",
@@ -43,7 +53,6 @@
     "@storybook/react-vite": "^8.5.6",
     "@storybook/test": "^8.5.6",
     "@storybook/theming": "^8.5.7",
-    "@tailwindcss/cli": "^4.0.0",
     "@tailwindcss/vite": "^4.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -53,11 +62,6 @@
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.17.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.16",
-    "eslint-plugin-storybook": "^0.11.3",
-    "globals": "^15.14.0",
     "jest": "^29.7.0",
     "js-beautify": "^1.15.3",
     "postcss": "^8.5.1",
@@ -67,22 +71,26 @@
     "rollup-plugin-visualizer": "^5.14.0",
     "sass-embedded": "^1.83.4",
     "storybook": "^8.5.6",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "^4.0.0",
+    "tailwindcss-animate": "^1.0.7",
     "ts-dedent": "^2.2.0",
     "typescript": "~5.6.2",
-    "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.0.4"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react-dom": ">=16.9.0",
+    "tailwindcss": "^4.0.0",
+    "tailwindcss-animate": "^1.0.7"
   },
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    },
+    "tailwindcss-animate": {
+      "optional": true
+    }
   }
 }