@fairmint/ui 0.1.6 → 0.2.0

package/README.md

@@ -12,13 +12,14 @@ bun add @fairmint/ui
 
 Mantine is included as a dependency — no extra packages to install.
 
-### 2. Import styles
+### 2. Import styles (required)
 
 ```typescript
+// In your app's entry file (main.tsx, App.tsx, etc.)
 import '@fairmint/ui/styles.css';
 ```
 
-This single import includes both Mantine core styles and Fairmint component styles.
+**This is required.** This single import includes Mantine core CSS, notification styles, and Fairmint component animations. Without it, components render unstyled. You do NOT need to install or import `@mantine/core/styles.css` separately — it's all included.
 
 ### 3. Wrap with provider
 

package/dist/components/ErrorFallback/ErrorFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorFallback.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorFallback/ErrorFallback.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gHAAgH;IAChH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAA8B,EAC9B,WAA6D,EAC7D,QAAQ,EACR,WAA2B,EAC3B,KAAK,GACN,EAAE,kBAAkB,2CAgBpB"}
+{"version":3,"file":"ErrorFallback.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorFallback/ErrorFallback.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,kBAAkB;IACjC,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,kDAAkD;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gHAAgH;IAChH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAA8B,EAC9B,WAA6D,EAC7D,QAAQ,EACR,WAA2B,EAC3B,KAAK,GACN,EAAE,kBAAkB,2CAgBpB"}

package/dist/components/layout/PageHeader/PageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,2CActE"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/PageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,eAAe;IAC9B,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,2CActE"}

package/dist/components/primitives/index.d.ts

@@ -0,0 +1,19 @@
+export { ActionIcon } from './ActionIcon/ActionIcon';
+export { Alert } from './Alert/Alert';
+export { Avatar } from './Avatar/Avatar';
+export { Badge } from './Badge/Badge';
+export { Button, type ButtonProps } from './Button/Button';
+export { Card } from './Card/Card';
+export { Checkbox } from './Checkbox/Checkbox';
+export { Drawer } from './Drawer/Drawer';
+export { Menu } from './Menu/Menu';
+export { Modal } from './Modal/Modal';
+export { PasswordInput } from './PasswordInput/PasswordInput';
+export { Select } from './Select/Select';
+export { Skeleton } from './Skeleton/Skeleton';
+export { Switch } from './Switch/Switch';
+export { Table } from './Table/Table';
+export { Tabs } from './Tabs/Tabs';
+export { TextInput } from './TextInput/TextInput';
+export { Tooltip } from './Tooltip/Tooltip';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/primitives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/fairmint-ui.cjs

@@ -17376,6 +17376,105 @@ const Title = factory((_props, ref) => {
 });
 Title.classes = classes$1;
 Title.displayName = "@mantine/core/Title";
+const colors = {
+  /** Primary UI color — buttons, links, active states. */
+  primary: "indigo",
+  /** Fairmint brand blue — gradients, brand elements. */
+  brandBlue: "fairmintBlue",
+  /** Fairmint brand purple — gradients, brand elements. */
+  brandPurple: "fairmintPurple",
+  /** Positive outcome — completed, approved, active. */
+  success: "success",
+  /** Caution — pending, processing, review. */
+  warning: "warning",
+  /** Negative outcome — failed, rejected, cancelled. */
+  error: "error",
+  /** Informational — neutral status messages. */
+  info: "info",
+  /** Neutral gray scale — borders, backgrounds, disabled. */
+  neutral: "gray",
+  /** Accent color 1 for avatar palette. */
+  accent1: "teal",
+  /** Accent color 2 for avatar palette. */
+  accent2: "cyan",
+  /** Accent color 3 for avatar palette. */
+  accent3: "green"
+};
+const AVATAR_PALETTE = [
+  colors.primary,
+  colors.brandBlue,
+  colors.brandPurple,
+  colors.success,
+  colors.info,
+  colors.accent1,
+  colors.accent2,
+  colors.accent3
+];
+const ActionIcon = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionIcon$1, { color: colors.primary, variant: "subtle", ...props, ref }));
+ActionIcon.displayName = "ActionIcon";
+function Alert(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Alert$1, { ...props });
+}
+const Avatar = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Avatar$1, { radius: "md", color: colors.primary, ...props, ref }));
+Avatar.displayName = "Avatar";
+const Badge = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "light", ...props, ref }));
+Badge.displayName = "Badge";
+const Button = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Button$1, { color: colors.primary, ...props, ref }));
+Button.displayName = "Button";
+const Card = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Card$1, { padding: "lg", radius: "xl", withBorder: true, ...props, ref }));
+Card.displayName = "Card";
+const Checkbox = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Checkbox$1, { color: colors.primary, ...props, ref }));
+Checkbox.displayName = "Checkbox";
+function Drawer(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Drawer$1, { position: "right", size: "lg", p: "lg", ...props });
+}
+function MenuBase(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Menu$1, { shadow: "md", ...props });
+}
+const Menu = Object.assign(MenuBase, {
+  Target: Menu$1.Target,
+  Dropdown: Menu$1.Dropdown,
+  Item: Menu$1.Item,
+  Label: Menu$1.Label,
+  Divider: Menu$1.Divider
+});
+function Modal(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Modal$1, { centered: true, radius: "lg", ...props });
+}
+const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(PasswordInput$1, { size: "md", ...props, ref }));
+PasswordInput.displayName = "PasswordInput";
+const Select = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Select$1, { size: "md", ...props, ref }));
+Select.displayName = "Select";
+function Skeleton(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton$1, { ...props });
+}
+const Switch = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Switch$1, { color: colors.primary, ...props, ref }));
+Switch.displayName = "Switch";
+function TableBase(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Table$1, { ...props });
+}
+const Table = Object.assign(TableBase, {
+  Thead: Table$1.Thead,
+  Tbody: Table$1.Tbody,
+  Tr: Table$1.Tr,
+  Th: Table$1.Th,
+  Td: Table$1.Td,
+  Tfoot: Table$1.Tfoot,
+  Caption: Table$1.Caption
+});
+function TabsBase(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { color: colors.primary, ...props });
+}
+const Tabs = Object.assign(TabsBase, {
+  List: Tabs$1.List,
+  Tab: Tabs$1.Tab,
+  Panel: Tabs$1.Panel
+});
+const TextInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(TextInput$1, { size: "md", ...props, ref }));
+TextInput.displayName = "TextInput";
+function Tooltip(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip$1, { ...props });
+}
 function ErrorFallback({
   title = "Something went wrong",
   description = "We've been notified and are working on a fix.",
@@ -17390,7 +17489,7 @@ function ErrorFallback({
   return /* @__PURE__ */ jsxRuntime.jsx(Container, { size: "sm", py: "xl", children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { align: "center", gap: "md", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Title, { order: 2, children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(Text, { c: "dimmed", children: description }),
-    /* @__PURE__ */ jsxRuntime.jsx(Button$1, { onClick: handleAction, children: actionLabel })
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { onClick: handleAction, children: actionLabel })
   ] }) });
 }
 function FairmintLogo({
@@ -19400,40 +19499,6 @@ Notifications.update = notifications.update;
 Notifications.clean = notifications.clean;
 Notifications.cleanQueue = notifications.cleanQueue;
 Notifications.updateState = notifications.updateState;
-const colors = {
-  /** Primary UI color — buttons, links, active states. */
-  primary: "indigo",
-  /** Fairmint brand blue — gradients, brand elements. */
-  brandBlue: "fairmintBlue",
-  /** Fairmint brand purple — gradients, brand elements. */
-  brandPurple: "fairmintPurple",
-  /** Positive outcome — completed, approved, active. */
-  success: "success",
-  /** Caution — pending, processing, review. */
-  warning: "warning",
-  /** Negative outcome — failed, rejected, cancelled. */
-  error: "error",
-  /** Informational — neutral status messages. */
-  info: "info",
-  /** Neutral gray scale — borders, backgrounds, disabled. */
-  neutral: "gray",
-  /** Accent color 1 for avatar palette. */
-  accent1: "teal",
-  /** Accent color 2 for avatar palette. */
-  accent2: "cyan",
-  /** Accent color 3 for avatar palette. */
-  accent3: "green"
-};
-const AVATAR_PALETTE = [
-  colors.primary,
-  colors.brandBlue,
-  colors.brandPurple,
-  colors.success,
-  colors.info,
-  colors.accent1,
-  colors.accent2,
-  colors.accent3
-];
 const indigo = [
   "#EEF2FF",
   "#E0E7FF",
@@ -23211,8 +23276,6 @@ ZodEnum.create;
 ZodPromise.create;
 ZodOptional.create;
 ZodNullable.create;
-const TextInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(TextInput$1, { size: "md", ...props, ref }));
-TextInput.displayName = "TextInput";
 const emailSchema = stringType().email("Please enter a valid email address");
 function EmailField({ error: error2, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -24289,8 +24352,6 @@ function FormField({
     children && description && !inputProps.error && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "xs", c: "dimmed", children: description })
   ] });
 }
-const PasswordInput = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(PasswordInput$1, { size: "md", ...props, ref }));
-PasswordInput.displayName = "PasswordInput";
 const passwordSchema = stringType().min(8, "Password must be at least 8 characters");
 function PasswordField({ error: error2, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -24340,11 +24401,6 @@ function AnimateIn({
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style, className, children });
 }
-const Button = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Button$1, { color: colors.primary, ...props, ref }));
-Button.displayName = "Button";
-function Modal(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Modal$1, { centered: true, radius: "lg", ...props });
-}
 function ConfirmDialog({
   title,
   message,
@@ -24425,21 +24481,6 @@ function Currency({ value, precise = false, currency, ...rest }) {
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { component: "span", ...rest, children: formatted });
 }
-function Skeleton(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Skeleton$1, { ...props });
-}
-function TableBase(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Table$1, { ...props });
-}
-const Table = Object.assign(TableBase, {
-  Thead: Table$1.Thead,
-  Tbody: Table$1.Tbody,
-  Tr: Table$1.Tr,
-  Th: Table$1.Th,
-  Td: Table$1.Td,
-  Tfoot: Table$1.Tfoot,
-  Caption: Table$1.Caption
-});
 function EmptyState({
   icon,
   title,
@@ -24548,9 +24589,6 @@ function DataTable({
 function DateDisplay({ value, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { component: "span", ...rest, children: formatDate(value) });
 }
-function Drawer(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Drawer$1, { position: "right", size: "lg", p: "lg", ...props });
-}
 function DetailDrawer({
   title,
   opened,
@@ -24573,8 +24611,6 @@ function DetailDrawer({
     }
   );
 }
-const Avatar = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Avatar$1, { radius: "md", color: colors.primary, ...props, ref }));
-Avatar.displayName = "Avatar";
 const DefaultChevronIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
   "svg",
   {
@@ -24669,8 +24705,6 @@ function ListRow({
 function Percent({ value, decimals = 2, ...rest }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { component: "span", ...rest, children: formatPercent(value, decimals) });
 }
-const ActionIcon = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(ActionIcon$1, { color: colors.primary, variant: "subtle", ...props, ref }));
-ActionIcon.displayName = "ActionIcon";
 function SearchInput({
   value,
   onChange,
@@ -24743,8 +24777,6 @@ function SearchInput({
     }
   );
 }
-const Card = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Card$1, { padding: "lg", radius: "xl", withBorder: true, ...props, ref }));
-Card.displayName = "Card";
 function StatCard({
   label,
   value,
@@ -24780,8 +24812,6 @@ function StatCard({
     }
   );
 }
-const Badge = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Badge$1, { variant: "light", ...props, ref }));
-Badge.displayName = "Badge";
 const DEFAULT_COLOR_MAP = {
   active: colors.success,
   approved: colors.success,
@@ -24930,36 +24960,6 @@ function UserMenu({
     ] }, item.id)) })
   ] });
 }
-function Alert(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Alert$1, { ...props });
-}
-const Checkbox = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Checkbox$1, { color: colors.primary, ...props, ref }));
-Checkbox.displayName = "Checkbox";
-function MenuBase(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Menu$1, { shadow: "md", ...props });
-}
-const Menu = Object.assign(MenuBase, {
-  Target: Menu$1.Target,
-  Dropdown: Menu$1.Dropdown,
-  Item: Menu$1.Item,
-  Label: Menu$1.Label,
-  Divider: Menu$1.Divider
-});
-const Select = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Select$1, { size: "md", ...props, ref }));
-Select.displayName = "Select";
-const Switch = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(Switch$1, { color: colors.primary, ...props, ref }));
-Switch.displayName = "Switch";
-function TabsBase(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tabs$1, { color: colors.primary, ...props });
-}
-const Tabs = Object.assign(TabsBase, {
-  List: Tabs$1.List,
-  Tab: Tabs$1.Tab,
-  Panel: Tabs$1.Panel
-});
-function Tooltip(props) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tooltip$1, { ...props });
-}
 function DocumentRow({
   name,
   type,