refine-mantine 1.2.1 → 1.3.1

package/dist/index.d.ts

@@ -1,10 +1,12 @@
-import { ActionIconProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarConfiguration, AppShellNavbarProps, AppShellProps, AppShellSectionProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, MenuItemProps, NotificationProps, PinInputProps, PopoverProps, ScrollAreaProps, StackProps, TableProps, TextInputProps } from "@mantine/core";
+import { ActionIconProps, AnchorProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarConfiguration, AppShellNavbarProps, AppShellProps, AppShellSectionProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, MenuItemProps, NotificationProps, PinInputProps, PolymorphicComponentProps, PopoverProps, ScrollAreaProps, StackProps, TableProps, TextInputProps, TextProps } from "@mantine/core";
 import { AuthProvider, AutoSaveIndicatorProps as AutoSaveIndicatorProps$1, BaseRecord, HttpError, LoginFormTypes, NotificationProvider, OAuthProvider, RegisterFormTypes, UseFormProps as UseFormProps$1, UseFormReturnType as UseFormReturnType$1, useMenu, useTranslate } from "@refinedev/core";
-import { IconProps } from "@tabler/icons-react";
+import { IconProps, ReactNode } from "@tabler/icons-react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import React$1, { ReactNode } from "react";
+import React$1, { ReactNode as ReactNode$1 } from "react";
 import { RefineBreadcrumbProps, RefineCreateButtonProps, RefineCrudCreateProps, RefineCrudEditProps, RefineCrudListProps, RefineCrudShowProps, RefineDeleteButtonProps, RefineEditButtonProps, RefineListButtonProps, RefineRefreshButtonProps, RefineSaveButtonProps, RefineShowButtonProps } from "@refinedev/ui-types";
+import { ConfigType } from "dayjs";
 import { FormValidateInput, UseFormInput, UseFormReturnType as UseFormReturnType$2 } from "@mantine/form";
+import { TooltipBaseProps } from "@mantine/core/lib/components/Tooltip/Tooltip.types";
 import { Column } from "@tanstack/table-core";
 import { UseTableReturnType } from "@refinedev/react-table";
 
@@ -102,9 +104,51 @@ declare const List: React$1.FC<ListProps>;
 type ShowProps = RefineCrudShowProps<GroupProps, GroupProps, CardProps, GroupProps, BoxProps, {}, EditButtonProps, DeleteButtonProps, RefreshButtonProps, ListButtonProps>;
 declare const Show: React.FC<ShowProps>;
 //#endregion
+//#region src/components/fields/BooleanField.d.ts
+interface BooleanFieldProps {
+  value: boolean;
+  trueLabel?: string;
+  falseLabel?: string;
+  trueIcon?: ReactNode;
+  falseIcon?: ReactNode;
+  trueIconProps?: IconProps;
+  falseIconProps?: IconProps;
+  tootlipProps?: TooltipBaseProps;
+}
+declare const BooleanField: React.FC<BooleanFieldProps>;
+//#endregion
+//#region src/components/fields/DateField.d.ts
+interface DateFieldProps {
+  value: ConfigType;
+  locale?: string;
+  format?: string;
+  textProps?: TextProps;
+}
+declare const DateField: React.FC<DateFieldProps>;
+//#endregion
+//#region src/components/fields/UrlField.d.ts
+interface UrlFieldProps {
+  value: string;
+  children?: ReactNode;
+  anchorProps?: PolymorphicComponentProps<"a", AnchorProps>;
+  textProps?: TextProps;
+  iconProps?: IconProps;
+  icon?: React.FC<IconProps>;
+}
+declare const UrlField: React.FC<UrlFieldProps>;
+//#endregion
+//#region src/components/fields/EmailField.d.ts
+declare const EmailField: React.FC<UrlFieldProps>;
+//#endregion
+//#region src/components/fields/FileField.d.ts
+declare const FileField: React.FC<UrlFieldProps>;
+//#endregion
+//#region src/components/fields/PhoneField.d.ts
+declare const PhoneField: React.FC<UrlFieldProps>;
+//#endregion
 //#region src/components/layout/Layout.d.ts
 interface LayoutProps {
-  children: ReactNode;
+  children: ReactNode$1;
   shellProps?: AppShellProps;
   headerProps?: AppShellHeaderProps;
   navbarProps?: AppShellNavbarProps;
@@ -113,17 +157,17 @@ interface LayoutProps {
   navbarFooterProps?: AppShellSectionProps;
   mainProps?: AppShellMainProps;
   hideNavbar?: boolean;
-  footer?: ReactNode;
+  footer?: ReactNode$1;
   footerProps?: AppShellFooterProps;
   locales?: LayoutLocale[];
-  renderHeader?: (toggle: () => void) => ReactNode;
-  renderMenu?: (params: ReturnType<typeof useMenu>) => ReactNode;
-  renderIdentity?: <T extends BaseRecord>(identity: T, logout: () => void) => ReactNode;
+  renderHeader?: (toggle: () => void) => ReactNode$1;
+  renderMenu?: (params: ReturnType<typeof useMenu>) => ReactNode$1;
+  renderIdentity?: <T extends BaseRecord>(identity: T, logout: () => void) => ReactNode$1;
 }
 interface LayoutLocale {
   lang: string;
   label: string;
-  icon?: ReactNode;
+  icon?: ReactNode$1;
 }
 declare const Layout: React.FC<LayoutProps>;
 //#endregion
@@ -235,8 +279,8 @@ type LoginPageProps = {
   otpInputProps?: PinInputProps;
   submitButtonProps?: ButtonProps;
   cancelButtonProps?: ButtonProps;
-  icon?: ReactNode;
-  title?: ReactNode;
+  icon?: ReactNode$1;
+  title?: ReactNode$1;
   otpHandler?: OtpHandler;
 } & ({
   method: "oauth";
@@ -266,8 +310,8 @@ interface RegisterPageProps {
   otpInputProps?: PinInputProps;
   submitButtonProps?: ButtonProps;
   cancelButtonProps?: ButtonProps;
-  icon?: ReactNode;
-  title?: ReactNode;
+  icon?: ReactNode$1;
+  title?: ReactNode$1;
 }
 interface RegisterForm {
   email: string;
@@ -282,4 +326,4 @@ declare const authProvider: AuthProvider;
 //#region src/providers/notificationProvider.d.ts
 declare const notificationProvider: () => NotificationProvider;
 //#endregion
-export { AutoSaveIndicator, AutoSaveIndicatorProps, Breadcrumb, BreadcrumbProps, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, CreateButtonProps, CreateProps, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, Layout, LayoutLocale, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, OAuthProviderMantine, OtpHandler, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };
+export { AutoSaveIndicator, AutoSaveIndicatorProps, BooleanField, BooleanFieldProps, Breadcrumb, BreadcrumbProps, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, CreateButtonProps, CreateProps, DateField, DateFieldProps, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, EmailField, FileField, Layout, LayoutLocale, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UrlField, UrlFieldProps, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };

package/dist/index.js

@@ -1,10 +1,12 @@
 import { ActionIcon, Anchor, AppShell, Avatar, Badge, Box, Breadcrumbs, Burger, Button, Card, Center, Collapse, Divider, Group, Input, Loader, LoadingOverlay, Menu, NavLink, Notification, Pagination, PinInput, Popover, RingProgress, ScrollArea, Stack, Table as Table$1, Text, TextInput, Title, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
 import { CanAccess, Link, flattenObjectKeys, matchResourceFromRoute, useBack, useBreadcrumb, useCreateButton, useDeleteButton, useEditButton, useForm as useForm$1, useGetIdentity, useGo, useLink, useListButton, useLogin, useLogout, useMenu, useMutationMode, useNavigation, useRefineContext, useRefineOptions, useRefreshButton, useRegister, useResourceParams, useSaveButton, useShowButton, useToPath, useTranslate, useTranslation, useUserFriendlyName, useWarnAboutChange } from "@refinedev/core";
-import { IconArrowBackUp, IconArrowLeft, IconAt, IconCheck, IconChevronUp, IconCircleCheck, IconDeviceFloppy, IconDots, IconExclamationCircle, IconEye, IconFilter, IconHome, IconLanguage, IconList, IconLockPassword, IconLogout, IconMoon, IconPencil, IconRefresh, IconSelector, IconSquarePlus, IconSun, IconTrash, IconX } from "@tabler/icons-react";
+import { IconArrowBackUp, IconArrowLeft, IconAt, IconCheck, IconChevronUp, IconCircleCheck, IconCircleCheckFilled, IconCircleXFilled, IconDeviceFloppy, IconDots, IconExclamationCircle, IconExternalLink, IconEye, IconFileDownloadFilled, IconFilter, IconHome, IconLanguage, IconList, IconLockPassword, IconLogout, IconMailShare, IconMoon, IconPencil, IconPhoneOutgoing, IconRefresh, IconSelector, IconSquarePlus, IconSun, IconTrash, IconX } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useDebouncedCallback, useDisclosure } from "@mantine/hooks";
 import { RefinePageHeaderClassNames } from "@refinedev/ui-types";
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import { flexRender } from "@tanstack/react-table";
 import { isEmail, isNotEmpty, useForm as useForm$2 } from "@mantine/form";
 import { hideNotification, showNotification, updateNotification } from "@mantine/notifications";
@@ -796,6 +798,84 @@ const Show = (props) => {
 	});
 };
 
+//#endregion
+//#region src/components/fields/BooleanField.tsx
+const BooleanField = ({ value, trueLabel = "true", falseLabel = "false", trueIcon, falseIcon, trueIconProps, falseIconProps, tootlipProps }) => /* @__PURE__ */ jsx(Tooltip, {
+	label: value ? trueLabel : falseLabel,
+	...tootlipProps,
+	children: /* @__PURE__ */ jsx("span", { children: value ? trueIcon ?? /* @__PURE__ */ jsx(IconCircleCheckFilled, {
+		size: 18,
+		...trueIconProps
+	}) : falseIcon ?? /* @__PURE__ */ jsx(IconCircleXFilled, {
+		size: 18,
+		...falseIconProps
+	}) })
+});
+
+//#endregion
+//#region src/components/fields/DateField.tsx
+dayjs.extend(LocalizedFormat);
+const defaultLocale = dayjs.locale();
+const DateField = ({ value, locale, format: dateFormat = "L", textProps }) => /* @__PURE__ */ jsx(Text, {
+	...textProps,
+	children: value ? dayjs(value).locale(locale ?? defaultLocale).format(dateFormat) : ""
+});
+
+//#endregion
+//#region src/components/fields/UrlField.tsx
+const UrlField = ({ children, value, anchorProps, textProps, icon, iconProps }) => {
+	const Icon = icon ?? IconExternalLink;
+	return /* @__PURE__ */ jsxs(Anchor, {
+		href: value,
+		style: {
+			display: "inline-flex",
+			alignItems: "center"
+		},
+		...anchorProps,
+		children: [/* @__PURE__ */ jsx(Text, {
+			...textProps,
+			children: children ?? value
+		}), /* @__PURE__ */ jsx(Icon, {
+			size: textProps?.size === "xs" ? 12 : textProps?.size === "sm" ? 14 : textProps?.size === "md" ? 16 : textProps?.size === "lg" ? 18 : textProps?.size === "xl" ? 20 : 16,
+			style: {
+				marginLeft: 4,
+				flexShrink: 0
+			},
+			"aria-hidden": true,
+			...iconProps
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/fields/EmailField.tsx
+const EmailField = (props) => /* @__PURE__ */ jsx(UrlField, {
+	icon: IconMailShare,
+	...props,
+	anchorProps: {
+		href: `mailto:${props.value}`,
+		...props.anchorProps
+	}
+});
+
+//#endregion
+//#region src/components/fields/FileField.tsx
+const FileField = (props) => /* @__PURE__ */ jsx(UrlField, {
+	icon: IconFileDownloadFilled,
+	...props
+});
+
+//#endregion
+//#region src/components/fields/PhoneField.tsx
+const PhoneField = (props) => /* @__PURE__ */ jsx(UrlField, {
+	icon: IconPhoneOutgoing,
+	...props,
+	anchorProps: {
+		href: `tel:${props.value}`,
+		...props.anchorProps
+	}
+});
+
 //#endregion
 //#region src/components/layout/Layout.tsx
 const Layout = (p) => {
@@ -1650,4 +1730,4 @@ const notificationProvider = () => {
 };
 
 //#endregion
-export { AutoSaveIndicator, Breadcrumb, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DeleteButton, Edit, EditButton, Layout, List, ListButton, LoginPage, Message, RefreshButton, RegisterPage, SaveButton, Show, ShowButton, Table, notificationProvider, useForm, useOtp };
+export { AutoSaveIndicator, BooleanField, Breadcrumb, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, FileField, Layout, List, ListButton, LoginPage, Message, PhoneField, RefreshButton, RegisterPage, SaveButton, Show, ShowButton, Table, UrlField, notificationProvider, useForm, useOtp };

package/package.json

@@ -25,6 +25,7 @@
     "@tabler/icons-react": "^3.34.1",
     "@tanstack/react-query": "^5.87.4",
     "@tanstack/react-table": "^8.21.3",
+    "dayjs": "^1.11.19",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router": "^7.0.2",
@@ -52,6 +53,7 @@
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
     "@vitejs/plugin-react": "^5.1.0",
+    "dayjs": "^1.11.19",
     "husky": "^9.1.7",
     "postcss": "^8.5.6",
     "postcss-preset-mantine": "1.18.0",
@@ -87,5 +89,5 @@
   "dependencies": {
     "@refinedev/ui-types": "^2.0.1"
   },
-  "version": "1.2.1"
+  "version": "1.3.1"
 }

package/src/components/fields/BooleanField.story.tsx

@@ -0,0 +1,38 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { BooleanField } from "./BooleanField";
+
+export default {
+  title: 'Fields/BooleanField',
+  component: BooleanField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof BooleanField>;
+
+export const Default = () =>
+  <BooleanField value={true} />;
+
+export const CustomLabel = () =>
+  <BooleanField
+    value={false}
+    falseLabel="Value not selected"
+    trueLabel="Value selected"
+  />;
+
+export const CustomIcon = () =>
+  <BooleanField
+    value={false}
+    falseIcon={<IconX />}
+    trueIcon={<IconCheck />}
+  />;
+
+export const CustomColor = () =>
+  <BooleanField
+    value={false}
+    falseIconProps={{ fill: "red" }}
+    trueIconProps={{ fill: "green" }}
+  />;

package/src/components/fields/BooleanField.tsx

@@ -0,0 +1,33 @@
+import { Tooltip } from "@mantine/core";
+import type { TooltipBaseProps } from "@mantine/core/lib/components/Tooltip/Tooltip.types";
+import { IconCircleCheckFilled, IconCircleXFilled, ReactNode, type IconProps } from "@tabler/icons-react";
+
+export interface BooleanFieldProps {
+  value: boolean;
+  trueLabel?: string;
+  falseLabel?: string;
+  trueIcon?: ReactNode;
+  falseIcon?: ReactNode;
+  trueIconProps?: IconProps;
+  falseIconProps?: IconProps;
+  tootlipProps?: TooltipBaseProps;
+}
+
+export const BooleanField: React.FC<BooleanFieldProps> = ({
+  value,
+  trueLabel = "true",
+  falseLabel = "false",
+  trueIcon,
+  falseIcon,
+  trueIconProps,
+  falseIconProps,
+  tootlipProps,
+}) => (
+  <Tooltip label={value ? trueLabel : falseLabel} {...tootlipProps}>
+    <span>
+      {value
+        ? trueIcon ?? <IconCircleCheckFilled size={18} {...trueIconProps} />
+        : falseIcon ?? <IconCircleXFilled size={18} {...falseIconProps} />}
+    </span>
+  </Tooltip>
+);

package/src/components/fields/DateField.story.tsx

@@ -0,0 +1,46 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import "dayjs/locale/de";
+import { DateField } from "./DateField";
+
+export default {
+  title: 'Fields/DateField',
+  component: DateField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof DateField>;
+
+export const Default = () =>
+  <DateField value="2025-12-05T14:41:31" />;
+
+export const Small = () =>
+  <DateField
+    value="2025-12-05T14:41:31"
+    textProps={{size: "xs"}}
+  />;
+
+export const Color = () =>
+  <DateField
+    value="2025-12-05T14:41:31"
+    textProps={{ c: "teal" }}
+  />;
+
+export const Format = () =>
+  <DateField
+    value="2025-12-05T14:41:31"
+    // https://day.js.org/docs/en/display/format
+    format="LLLL"
+  />;
+
+export const Locale = () => (
+  <DateField
+    value="2025-12-05T14:41:31"
+    // https://day.js.org/docs/en/display/format
+    format="LLLL"
+    // importing "dayjs/locale/de" is required to work properly 
+    locale="de"
+  />
+);

package/src/components/fields/DateField.tsx

@@ -0,0 +1,29 @@
+import { Text, TextProps } from "@mantine/core";
+import type { ConfigType } from "dayjs";
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
+
+export interface DateFieldProps {
+  value: ConfigType;
+  locale?: string;
+  format?: string;
+  textProps?: TextProps;
+}
+
+dayjs.extend(LocalizedFormat);
+const defaultLocale = dayjs.locale();
+
+export const DateField: React.FC<DateFieldProps> = ({
+  value,
+  locale,
+  format: dateFormat = "L",
+  textProps,
+}) => (
+  <Text {...textProps}>
+    {value
+      ? dayjs(value)
+          .locale(locale ?? defaultLocale)
+          .format(dateFormat)
+      : ""}
+  </Text>
+);

package/src/components/fields/EmailField.story.tsx

@@ -0,0 +1,84 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { EmailField } from "./EmailField";
+
+export default {
+  title: 'Fields/EmailField',
+  component: EmailField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof EmailField>;
+
+export const Default = () =>
+  <EmailField value="test@example.com" />;
+
+export const Colors = () =>
+  <>
+    <EmailField
+      value="test@example.com"
+      anchorProps={{c: "indigo"}}
+    />
+    <EmailField
+      value="test@example.com"
+      anchorProps={{c: "cyan"}}
+    />
+    <EmailField
+      value="test@example.com"
+      anchorProps={{c: "teal"}}
+    />
+    <EmailField
+      value="test@example.com"
+      anchorProps={{c: "lime"}}
+    />
+  </>;
+
+export const Sizes = () =>
+  <>
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "xs"}}
+    />
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "sm"}}
+    />
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "md"}}
+    />
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "lg"}}
+    />
+    <EmailField
+      value="test@example.com"
+      textProps={{size: "xl"}}
+    />
+  </>;
+
+export const Truncated = () =>
+  <EmailField
+    value="firstname.lastname@verylongdomain.tld"
+    anchorProps={{maw: 200}}
+    textProps={{truncate: "end"}}
+  />;
+
+export const Gradient = () =>
+  <EmailField
+    value="test@example.com"
+    anchorProps={{
+      variant: "gradient",
+      gradient: { from: 'pink', to: 'yellow' }
+    }}
+  />;
+
+export const HiddenIcon = () =>
+  <EmailField
+    value="test@example.com"
+    iconProps={{
+      display: "none",
+    }}
+  />;

package/src/components/fields/EmailField.tsx

@@ -0,0 +1,9 @@
+import { IconMailShare } from "@tabler/icons-react";
+import { UrlField, UrlFieldProps } from "./UrlField";
+
+export const EmailField: React.FC<UrlFieldProps> = (props) =>
+  <UrlField
+    icon={IconMailShare}
+    {...props}
+    anchorProps={{ href: `mailto:${props.value}`, ...props.anchorProps }}
+  />;

package/src/components/fields/FileField.story.tsx

@@ -0,0 +1,91 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { IconPhotoDown } from "@tabler/icons-react";
+import { FileField } from "./FileField";
+
+export default {
+  title: 'Fields/FileField',
+  component: FileField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof FileField>;
+
+export const Default = () =>
+  <FileField value="https://github.com/kruschid/refine-mantine">refine-mantine</FileField>;
+
+export const Colors = () =>
+  <>
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "indigo"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "cyan"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "teal"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "lime"}}
+    />
+  </>;
+
+export const Sizes = () =>
+  <>
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "xs"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "sm"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "md"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "lg"}}
+    />
+    <FileField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "xl"}}
+    />
+  </>;
+
+export const Truncated = () =>
+  <FileField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{maw: 200}}
+    textProps={{truncate: "end"}}
+  />;
+
+export const Gradient = () =>
+  <FileField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{
+      variant: "gradient",
+      gradient: { from: 'pink', to: 'yellow' }
+    }}
+  />;
+
+export const HiddenIcon = () =>
+  <FileField
+    value="https://github.com/kruschid/refine-mantine"
+    iconProps={{
+      display: "none",
+    }}
+  />;
+
+export const CustomIcon = () =>
+  <FileField
+    value="https://github.com/kruschid/refine-mantine"
+    icon={IconPhotoDown}
+  />;

package/src/components/fields/FileField.tsx

@@ -0,0 +1,8 @@
+import { IconFileDownloadFilled } from "@tabler/icons-react";
+import { UrlField, UrlFieldProps } from "./UrlField";
+
+export const FileField: React.FC<UrlFieldProps> = (props) =>
+  <UrlField
+    icon={IconFileDownloadFilled}
+    {...props}
+  />;

package/src/components/fields/PhoneField.story.tsx

@@ -0,0 +1,96 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { PhoneField } from "./PhoneField";
+
+export default {
+  title: 'Fields/PhoneField',
+  component: PhoneField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof PhoneField>;
+
+export const Default = () =>
+  <PhoneField value="+05890000111">0-589-0000111</PhoneField>;
+
+export const Colors = () =>
+  <>
+    <PhoneField
+      value="+05890000111"
+      anchorProps={{c: "indigo"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      anchorProps={{c: "cyan"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      anchorProps={{c: "teal"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      anchorProps={{c: "lime"}}
+    />
+  </>;
+
+export const Sizes = () =>
+  <>
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "xs"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "sm"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "md"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "lg"}}
+    />
+    <PhoneField
+      value="+05890000111"
+      textProps={{size: "xl"}}
+    />
+  </>
+
+export const WithTarget = () =>
+  <PhoneField
+    value="+05890000111"
+    anchorProps={{target: "_blank"}}
+  />;
+
+export const Truncated = () =>
+  <PhoneField
+    value="+05890000111"
+    anchorProps={{maw: 200}}
+    textProps={{truncate: "end"}}
+  />;
+
+export const WithTitle = () =>
+  <PhoneField
+    value="+05890000111"
+    anchorProps={{title: "refine-mantine"}}
+  />;
+
+export const Gradient = () =>
+  <PhoneField
+    value="+05890000111"
+    anchorProps={{
+      variant: "gradient",
+      gradient: { from: 'pink', to: 'yellow' }
+    }}
+  />;
+
+export const HiddenIcon = () =>
+    <PhoneField
+    value="+05890000111"
+    iconProps={{
+      display: "none",
+    }}
+  />;

package/src/components/fields/PhoneField.tsx

@@ -0,0 +1,9 @@
+import { IconPhoneOutgoing } from "@tabler/icons-react";
+import { UrlField, UrlFieldProps } from "./UrlField";
+
+export const PhoneField: React.FC<UrlFieldProps> = (props) =>
+  <UrlField
+    icon={IconPhoneOutgoing}
+    {...props}
+    anchorProps={{ href: `tel:${props.value}`, ...props.anchorProps }}
+  />;

package/src/components/fields/UrlField.story.tsx

@@ -0,0 +1,96 @@
+import { Stack } from "@mantine/core";
+import { Meta } from "@storybook/react";
+import { UrlField } from "./UrlField";
+
+export default {
+  title: 'Fields/UrlField',
+  component: UrlField,
+  decorators: (Story) => (
+    <Stack h="100vh" align="center" justify="center">
+      <Story />
+    </Stack>
+  ),
+} satisfies Meta<typeof UrlField>;
+
+export const Default = () =>
+  <UrlField value="https://github.com/kruschid/refine-mantine">refine-mantine</UrlField>;
+
+export const Colors = () =>
+  <>
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "indigo"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "cyan"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "teal"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      anchorProps={{c: "lime"}}
+    />
+  </>;
+
+export const Sizes = () =>
+  <>
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "xs"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "sm"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "md"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "lg"}}
+    />
+    <UrlField
+      value="https://github.com/kruschid/refine-mantine"
+      textProps={{size: "xl"}}
+    />
+  </>
+
+export const WithTarget = () =>
+  <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{target: "_blank"}}
+  />;
+
+export const Truncated = () =>
+  <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{maw: 200}}
+    textProps={{truncate: "end"}}
+  />;
+
+export const WithTitle = () =>
+  <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{title: "refine-mantine"}}
+  />;
+
+export const Gradient = () =>
+  <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    anchorProps={{
+      variant: "gradient",
+      gradient: { from: 'pink', to: 'yellow' }
+    }}
+  />;
+
+export const HiddenIcon = () =>
+    <UrlField
+    value="https://github.com/kruschid/refine-mantine"
+    iconProps={{
+      display: "none",
+    }}
+  />;

package/src/components/fields/UrlField.tsx

@@ -0,0 +1,47 @@
+import { Anchor, AnchorProps, PolymorphicComponentProps, Text, TextProps } from "@mantine/core";
+import { IconExternalLink, IconProps, ReactNode } from "@tabler/icons-react";
+
+export interface UrlFieldProps {
+  value: string;
+  children?: ReactNode;
+  anchorProps?: PolymorphicComponentProps<"a", AnchorProps>;
+  textProps?: TextProps;
+  iconProps?: IconProps;
+  icon?: React.FC<IconProps>;
+}
+
+export const UrlField: React.FC<UrlFieldProps> = ({
+  children,
+  value,
+  anchorProps,
+  textProps,
+  icon,
+  iconProps,
+}) => {
+  const Icon = icon ?? IconExternalLink;
+
+  return (
+    <Anchor
+      href={value}
+      style={{display: "inline-flex", alignItems: "center"}}
+      {...anchorProps}
+    >
+      <Text {...textProps}>
+        {children ?? value}
+      </Text>
+      <Icon
+        size={
+          textProps?.size === "xs" ? 12 
+          : textProps?.size === "sm" ? 14
+          : textProps?.size === "md" ? 16
+          : textProps?.size === "lg" ? 18
+          : textProps?.size === "xl" ? 20
+          : 16
+        }
+        style={{ marginLeft: 4, flexShrink: 0 }}
+        aria-hidden
+        {...iconProps}
+      />
+    </Anchor>
+  );
+}

package/src/components/table/Table.story.tsx

@@ -1,9 +1,12 @@
-import { Badge, NumberFormatter, Select, Text } from "@mantine/core";
+import { ActionIconGroup, Badge, NumberFormatter, Select, Text } from "@mantine/core";
 import { type CrudOperators, useSelect } from "@refinedev/core";
 import { useTable } from "@refinedev/react-table";
 import type { Meta } from "@storybook/react";
 import type { ColumnDef } from "@tanstack/react-table";
-import { use, useCallback, useMemo } from "react";
+import { useCallback, useMemo } from "react";
+import { DeleteButton } from "../buttons/DeleteButton";
+import { EditButton } from "../buttons/EditButton";
+import { ShowButton } from "../buttons/ShowButton";
 import { Table } from "./Table";
 
 export default {
@@ -30,7 +33,7 @@ interface CategoryRecord {
 type ProductRecordKey = keyof ProductRecord;
 
 const useTableProps = () => {
-const categories = useSelect<CategoryRecord>({
+  const categories = useSelect<CategoryRecord>({
     resource: "categories",
     optionLabel: category => category.title, 
     optionValue: category => category.id.toString(),
@@ -117,6 +120,22 @@ const categories = useSelect<CategoryRecord>({
             {categoryMap[row.original.category.id] ?? "uncategorized"} 
           </Badge>
       },
+      {
+        id: "id" satisfies ProductRecordKey,
+        enableColumnFilter: false,
+        enableSorting: false,
+        header: "Actions",
+        cell: ({ row }) => (
+          <ActionIconGroup>
+            <ShowButton hideText recordItemId={row.original.id} />
+            <EditButton
+              hideText
+              recordItemId={row.original.id}
+            />
+            <DeleteButton hideText recordItemId={row.original.id} />
+          </ActionIconGroup>
+        ),
+      },
     ],
     [categoryMap, CategoryFilter],
   );

package/src/components/table/Table.tsx

@@ -1,4 +1,4 @@
-import { Box, Group, Table as MantineTable, Pagination, TableProps, TableScrollContainerProps } from "@mantine/core";
+import { Box, Group, Table as MantineTable, Pagination, type TableProps } from "@mantine/core";
 import type { BaseRecord, HttpError } from "@refinedev/core";
 import type { UseTableReturnType } from "@refinedev/react-table";
 import { flexRender } from "@tanstack/react-table";

package/src/index.ts

@@ -13,6 +13,13 @@ export * from "@/components/crud/Create";
 export * from "@/components/crud/Edit";
 export * from "@/components/crud/List";
 export * from "@/components/crud/Show";
+// fields
+export * from "@/components/fields/BooleanField";
+export * from "@/components/fields/DateField";
+export * from "@/components/fields/EmailField";
+export * from "@/components/fields/FileField";
+export * from "@/components/fields/PhoneField";
+export * from "@/components/fields/UrlField";
 // layout
 export * from "@/components/layout/Layout";
 // notification