mal-ui 0.1.3

package/README.md

@@ -0,0 +1,244 @@
+# mal-ui
+
+A React component library built on [Mantine v9](https://mantine.dev), providing a complete design system for MAL Devs projects — components, hooks, form utilities, charts, a rich-text editor, file uploads, and more, all pre-wired to the MAL brand theme.
+
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Subpath Imports](#subpath-imports)
+- [Peer Dependencies](#peer-dependencies)
+- [Theme](#theme)
+- [Available Subpaths](#available-subpaths)
+- [Development](#development)
+
+---
+
+## Installation
+
+```bash
+# npm
+npm install mal-ui
+
+# bun
+bun add mal-ui
+
+# yarn
+yarn add mal-ui
+
+# pnpm
+pnpm add mal-ui
+```
+
+---
+
+## Quick Start
+
+### 1 — Wrap your app with `MALUIProvider`
+
+```tsx
+// app/providers.tsx  (Next.js App Router example)
+'use client';
+
+import { MALUIProvider } from 'mal-ui/core';
+import { malTheme } from 'mal-ui/theme';
+import 'mal-ui/styles.css';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <MALUIProvider theme={malTheme}>
+      {children}
+    </MALUIProvider>
+  );
+}
+```
+
+### 2 — Use components
+
+```tsx
+import { Button, TextInput, Card } from 'mal-ui/core';
+
+export function LoginCard() {
+  return (
+    <Card>
+      <TextInput label="Email" placeholder="you@example.com" />
+      <Button mt="sm" fullWidth>
+        Sign in
+      </Button>
+    </Card>
+  );
+}
+```
+
+---
+
+## Subpath Imports
+
+Import only what you need — each subpath is independently tree-shakeable:
+
+| Subpath | What it contains |
+|---|---|
+| `mal-ui` | Re-exports `core` + `hooks` (most common components and hooks) |
+| `mal-ui/core` | All Mantine core components + MALUI branded aliases |
+| `mal-ui/hooks` | All Mantine hooks + MALUI branded aliases |
+| `mal-ui/form` | `useForm`, form fields, validation helpers |
+| `mal-ui/charts` | Line, Bar, Area, Donut, Pie, Radar, Scatter, Bubble, Sparkline |
+| `mal-ui/notifications` | Notification system (`showNotification`, `updateNotification`, etc.) |
+| `mal-ui/modals` | Modal manager (`openConfirmModal`, `openModal`, etc.) |
+| `mal-ui/spotlight` | `⌘K` / `Ctrl+K` spotlight search |
+| `mal-ui/code-highlight` | Syntax-highlighted code blocks (powered by Shiki) |
+| `mal-ui/tiptap` | Rich-text editor (Tiptap + Mantine toolbar) |
+| `mal-ui/dropzone` | File upload dropzone |
+| `mal-ui/carousel` | Embla-powered carousel |
+| `mal-ui/nprogress` | Top-of-page progress bar |
+| `mal-ui/dates` | Date pickers, calendars, time pickers |
+| `mal-ui/schedule` | Weekly/day schedule view |
+| `mal-ui/theme` | `malTheme` object + raw design tokens |
+| `mal-ui/styles.css` | Required global CSS (import once at your app root) |
+
+---
+
+## Peer Dependencies
+
+Install the peer dependencies you actually use. Only `react` and `react-dom` are always required; the rest are **optional** and only needed if you import the corresponding subpath.
+
+```bash
+# Always required
+npm install react react-dom
+
+# Required for mal-ui/charts
+npm install recharts
+
+# Required for mal-ui/dates, mal-ui/schedule
+npm install dayjs
+
+# Required for mal-ui/carousel
+npm install embla-carousel-react
+
+# Required for mal-ui/tiptap
+npm install @tiptap/react @tiptap/pm @tiptap/starter-kit @tiptap/extension-link
+```
+
+---
+
+## Theme
+
+`mal-ui/theme` exports a ready-to-use Mantine theme override pre-configured with:
+
+- **Brand colors** — `mal-brand` (purple) and `mal-secondary` palettes
+- **Typography** — System font stack, tuned heading sizes and weights
+- **Spacing & Radius** — Design-token-based scale
+- **Shadows** — Consistent elevation scale
+- **Component defaults** — Buttons, inputs, cards, and modals all default to `radius="md"`
+
+```tsx
+import { malTheme } from 'mal-ui/theme';
+// malTheme is a MantineThemeOverride — pass it to MantineProvider
+
+// Raw tokens are also exported if you need them directly:
+import { malColors, malSpacingTokens, malBreakpoints } from 'mal-ui/theme';
+```
+
+Both Mantine names (`MantineProvider`, `useMantineTheme`) and MALUI aliases (`MALUIProvider`, `useMALUITheme`) are exported from `mal-ui/core` — use whichever you prefer.
+
+---
+
+## Available Subpaths
+
+### Core + Hooks
+
+```tsx
+import { Button, TextInput, Select, Modal, Tabs } from 'mal-ui/core';
+import { useDisclosure, useLocalStorage, useMediaQuery } from 'mal-ui/hooks';
+```
+
+### Form
+
+```tsx
+import { useForm, isEmail, isNotEmpty } from 'mal-ui/form';
+
+const form = useForm({
+  initialValues: { email: '', name: '' },
+  validate: {
+    email: isEmail('Invalid email'),
+    name: isNotEmpty('Name is required'),
+  },
+});
+```
+
+### Charts
+
+```tsx
+import { LineChart, BarChart, DonutChart } from 'mal-ui/charts';
+
+<LineChart
+  h={300}
+  data={data}
+  dataKey="date"
+  series={[{ name: 'Revenue', color: 'mal-brand.5' }]}
+/>
+```
+
+### Notifications
+
+```tsx
+import { notifications } from 'mal-ui/notifications';
+// In your layout, render: <Notifications />
+
+notifications.show({ title: 'Done!', message: 'Upload complete.' });
+```
+
+### Modals
+
+```tsx
+import { modals } from 'mal-ui/modals';
+// In your layout, render: <ModalsProvider>
+
+modals.openConfirmModal({
+  title: 'Delete item',
+  children: <Text>Are you sure?</Text>,
+  onConfirm: () => deleteItem(),
+});
+```
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+bun install
+
+# Build the library
+bun run build
+
+# Type-check
+bun run typecheck
+
+# Run tests
+bun test
+
+# Lint & format
+bun run lint
+bun run format
+```
+
+### Running the demo app
+
+```bash
+# 1. Build the library
+bun run build
+
+# 2. Start the Next.js demo
+cd examples/nextjs-demo
+bun install
+bun run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) — every subpath has its own demo route.
+
+---
+
+> Built with [Mantine](https://mantine.dev) · Bundled with [Bun](https://bun.sh)

package/dist/carousel/extensions.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/carousel/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@mantine/carousel';
+export * from './extensions';

package/dist/carousel/index.js

@@ -0,0 +1,424 @@
+"use client";
+import {
+  AccordionChevron,
+  Box,
+  InlineStyles,
+  UnstyledButton,
+  VisuallyHidden,
+  createSafeContext,
+  createVarsResolver,
+  factory,
+  filterProps,
+  getBaseValue,
+  getSortedBreakpoints,
+  getSpacing,
+  keys,
+  px,
+  rem,
+  useDirection,
+  useMantineTheme,
+  useProps,
+  useRandomClassName,
+  useStyles
+} from "../chunks/index-3ffbn0gc.js";
+import {
+  clamp,
+  useId$1
+} from "../chunks/index-syjq3515.js";
+import"../chunks/index-mc01z7m9.js";
+
+// node_modules/@mantine/carousel/esm/Carousel.context.mjs
+
+var [CarouselProvider, useCarouselContext] = createSafeContext("Carousel component was not found in tree");
+
+// node_modules/@mantine/carousel/esm/Carousel.module.mjs
+
+var Carousel_module_default = {
+  root: "m_17884d0f",
+  viewport: "m_a2dae653",
+  container: "m_fcd81474",
+  controls: "m_39bc3463",
+  control: "m_64f58e10",
+  indicators: "m_71ea3ab1",
+  indicator: "m_eae68602",
+  slide: "m_d98df724"
+};
+
+// node_modules/@mantine/carousel/esm/CarouselSlide/CarouselSlide.mjs
+import { jsx } from "react/jsx-runtime";
+
+var CarouselSlide = factory((props) => {
+  const { classNames, className, style, styles, vars, mod, ...others } = useProps("CarouselSlide", null, props);
+  const ctx = useCarouselContext();
+  return /* @__PURE__ */ jsx(Box, {
+    mod: [{ orientation: ctx.orientation }, mod],
+    role: "group",
+    "aria-roledescription": "slide",
+    "aria-label": "Carousel slide",
+    ...ctx.getStyles("slide", {
+      className,
+      style,
+      classNames,
+      styles
+    }),
+    ...others
+  });
+});
+CarouselSlide.classes = Carousel_module_default;
+CarouselSlide.displayName = "@mantine/carousel/CarouselSlide";
+
+// node_modules/@mantine/carousel/esm/CarouselVariables/CarouselVariables.mjs
+import { jsx as jsx2 } from "react/jsx-runtime";
+
+function CarouselVariables({ slideGap, slideSize, selector }) {
+  const theme = useMantineTheme();
+  const baseStyles = filterProps({
+    "--carousel-slide-gap": getSpacing(getBaseValue(slideGap)),
+    "--carousel-slide-size": rem(getBaseValue(slideSize))
+  });
+  const queries = keys(theme.breakpoints).reduce((acc, breakpoint) => {
+    if (!acc[breakpoint])
+      acc[breakpoint] = {};
+    if (typeof slideGap === "object" && slideGap[breakpoint] !== undefined)
+      acc[breakpoint]["--carousel-slide-gap"] = getSpacing(slideGap[breakpoint]);
+    if (typeof slideSize === "object" && slideSize[breakpoint] !== undefined)
+      acc[breakpoint]["--carousel-slide-size"] = getSpacing(slideSize[breakpoint]);
+    return acc;
+  }, {});
+  return /* @__PURE__ */ jsx2(InlineStyles, {
+    styles: baseStyles,
+    media: getSortedBreakpoints(keys(queries), theme.breakpoints).filter((breakpoint) => keys(queries[breakpoint.value]).length > 0).map((breakpoint) => ({
+      query: `(min-width: ${theme.breakpoints[breakpoint.value]})`,
+      styles: queries[breakpoint.value]
+    })),
+    selector
+  });
+}
+function getBreakpoints(values) {
+  if (typeof values === "object" && values !== null)
+    return keys(values);
+  return [];
+}
+function sortBreakpoints(breakpoints) {
+  return breakpoints.sort((a, b) => px(a) - px(b));
+}
+function getUniqueBreakpoints({ slideGap, slideSize }) {
+  return sortBreakpoints(Array.from(new Set([...getBreakpoints(slideGap), ...getBreakpoints(slideSize)])));
+}
+function CarouselContainerVariables({ slideGap, slideSize, selector }) {
+  const baseStyles = filterProps({
+    "--carousel-slide-gap": getSpacing(getBaseValue(slideGap)),
+    "--carousel-slide-size": rem(getBaseValue(slideSize))
+  });
+  const queries = getUniqueBreakpoints({
+    slideGap,
+    slideSize
+  }).reduce((acc, breakpoint) => {
+    if (!acc[breakpoint])
+      acc[breakpoint] = {};
+    if (typeof slideGap === "object" && slideGap[breakpoint] !== undefined)
+      acc[breakpoint]["--carousel-slide-gap"] = getSpacing(slideGap[breakpoint]);
+    if (typeof slideSize === "object" && slideSize[breakpoint] !== undefined)
+      acc[breakpoint]["--carousel-slide-size"] = getSpacing(slideSize[breakpoint]);
+    return acc;
+  }, {});
+  return /* @__PURE__ */ jsx2(InlineStyles, {
+    styles: baseStyles,
+    container: Object.keys(queries).map((breakpoint) => ({
+      query: `carousel (min-width: ${breakpoint})`,
+      styles: queries[breakpoint]
+    })),
+    selector
+  });
+}
+
+// node_modules/@mantine/carousel/esm/get-chevron-rotation.mjs
+
+function getChevronRotation({ dir, orientation, direction }) {
+  if (direction === "previous")
+    return orientation === "horizontal" ? 90 * (dir === "ltr" ? 1 : -1) : -180;
+  return orientation === "horizontal" ? 90 * (dir === "ltr" ? -1 : 1) : 0;
+}
+
+// node_modules/@mantine/carousel/esm/Carousel.mjs
+import { Children, createElement, useCallback, useEffect, useState } from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+
+var defaultProps = {
+  controlSize: 26,
+  controlsOffset: "sm",
+  slideSize: "100%",
+  slideGap: 0,
+  orientation: "horizontal",
+  includeGapInSize: true,
+  initialSlide: 0,
+  withControls: true,
+  withIndicators: false,
+  withKeyboardEvents: true,
+  type: "media"
+};
+var defaultEmblaOptions = {
+  align: "center",
+  loop: false,
+  slidesToScroll: 1,
+  dragFree: false,
+  inViewThreshold: 0,
+  skipSnaps: false,
+  containScroll: "trimSnaps"
+};
+var varsResolver = createVarsResolver((_, { height, controlSize, controlsOffset }) => ({ root: {
+  "--carousel-height": rem(height),
+  "--carousel-control-size": rem(controlSize),
+  "--carousel-controls-offset": getSpacing(controlsOffset)
+} }));
+var Carousel = factory((_props) => {
+  const props = useProps("Carousel", defaultProps, _props);
+  const { classNames, className, style, styles, unstyled, vars, children, getEmblaApi, onNextSlide, onPreviousSlide, onSlideChange, nextControlProps, previousControlProps, controlSize, controlsOffset, slideSize, slideGap, orientation, height, includeGapInSize, draggable, initialSlide, withControls, withIndicators, plugins, nextControlIcon, previousControlIcon, withKeyboardEvents, mod, type, emblaOptions, attributes, getIndicatorProps, id, ...others } = props;
+  const getStyles = useStyles({
+    name: "Carousel",
+    classes: Carousel_module_default,
+    props,
+    className,
+    style,
+    classNames,
+    styles,
+    unstyled,
+    attributes,
+    vars,
+    varsResolver
+  });
+  const _id = useId$1(id);
+  const responsiveClassName = useRandomClassName();
+  const { dir } = useDirection();
+  const [emblaRefElement, embla] = useEmblaCarousel({
+    axis: orientation === "horizontal" ? "x" : "y",
+    direction: orientation === "horizontal" ? dir : undefined,
+    startIndex: initialSlide,
+    ...defaultEmblaOptions,
+    ...emblaOptions
+  }, plugins);
+  const [selected, setSelected] = useState(0);
+  const [slidesCount, setSlidesCount] = useState(0);
+  const handleScroll = useCallback((index) => embla && embla.scrollTo(index), [embla]);
+  const handleSelect = useCallback(() => {
+    if (!embla)
+      return;
+    const slide = embla.selectedScrollSnap();
+    setSelected(slide);
+    slide !== selected && onSlideChange?.(slide);
+  }, [
+    embla,
+    setSelected,
+    onSlideChange,
+    selected
+  ]);
+  const handlePrevious = useCallback(() => {
+    embla?.scrollPrev();
+    onPreviousSlide?.();
+  }, [embla]);
+  const handleNext = useCallback(() => {
+    embla?.scrollNext();
+    onNextSlide?.();
+  }, [embla]);
+  const handleKeydown = useCallback((event) => {
+    if (withKeyboardEvents) {
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        handleNext();
+      }
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        handlePrevious();
+      }
+      if (event.key === "Home") {
+        event.preventDefault();
+        embla?.scrollTo(0);
+      }
+      if (event.key === "End") {
+        event.preventDefault();
+        embla?.scrollTo(embla.scrollSnapList().length - 1);
+      }
+    }
+  }, [
+    embla,
+    handleNext,
+    handlePrevious
+  ]);
+  useEffect(() => {
+    if (embla) {
+      getEmblaApi?.(embla);
+      handleSelect();
+      setSlidesCount(embla.scrollSnapList().length);
+      embla.on("select", handleSelect);
+      return () => {
+        embla.off("select", handleSelect);
+      };
+    }
+  }, [
+    embla,
+    emblaOptions?.slidesToScroll,
+    handleSelect
+  ]);
+  useEffect(() => {
+    if (embla) {
+      embla.reInit();
+      setSlidesCount(embla.scrollSnapList().length);
+      setSelected((currentSelected) => clamp(currentSelected, 0, Children.toArray(children).length - 1));
+    }
+  }, [Children.toArray(children).length, emblaOptions?.slidesToScroll]);
+  const canScrollPrev = embla?.canScrollPrev() || false;
+  const canScrollNext = embla?.canScrollNext() || false;
+  const handleIndicatorKeyDown = useCallback((event, index) => {
+    const isHorizontal = orientation === "horizontal";
+    const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
+    const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
+    if (event.key === nextKey) {
+      event.preventDefault();
+      const nextIndex = index < slidesCount - 1 ? index + 1 : 0;
+      handleScroll(nextIndex);
+      event.currentTarget.parentElement?.children[nextIndex]?.focus();
+    }
+    if (event.key === prevKey) {
+      event.preventDefault();
+      const prevIndex = index > 0 ? index - 1 : slidesCount - 1;
+      handleScroll(prevIndex);
+      event.currentTarget.parentElement?.children[prevIndex]?.focus();
+    }
+    if (event.key === "Home") {
+      event.preventDefault();
+      handleScroll(0);
+      event.currentTarget.parentElement?.children[0]?.focus();
+    }
+    if (event.key === "End") {
+      event.preventDefault();
+      handleScroll(slidesCount - 1);
+      event.currentTarget.parentElement?.children[slidesCount - 1]?.focus();
+    }
+  }, [
+    orientation,
+    slidesCount,
+    handleScroll
+  ]);
+  const indicators = Array(slidesCount).fill(0).map((_, index) => /* @__PURE__ */ createElement(UnstyledButton, {
+    ...getStyles("indicator"),
+    key: index,
+    role: "tab",
+    "aria-label": `Go to slide ${index + 1}`,
+    "aria-selected": index === selected,
+    tabIndex: index === selected ? 0 : -1,
+    "data-active": index === selected || undefined,
+    onClick: () => handleScroll(index),
+    onKeyDown: (event) => handleIndicatorKeyDown(event, index),
+    "data-orientation": orientation,
+    onMouseDown: (event) => event.preventDefault(),
+    ...getIndicatorProps?.(index)
+  }));
+  return /* @__PURE__ */ jsxs(CarouselProvider, {
+    value: {
+      getStyles,
+      orientation
+    },
+    children: [type === "container" ? /* @__PURE__ */ jsx3(CarouselContainerVariables, {
+      ...props,
+      selector: `.${responsiveClassName}`
+    }) : /* @__PURE__ */ jsx3(CarouselVariables, {
+      ...props,
+      selector: `.${responsiveClassName}`
+    }), /* @__PURE__ */ jsxs(Box, {
+      role: "region",
+      "aria-roledescription": "carousel",
+      ...getStyles("root", { className: responsiveClassName }),
+      ...others,
+      id: _id,
+      mod: [{
+        orientation,
+        "include-gap-in-size": includeGapInSize
+      }, mod],
+      onKeyDownCapture: handleKeydown,
+      children: [
+        /* @__PURE__ */ jsx3(VisuallyHidden, {
+          role: "status",
+          "aria-live": "polite",
+          "aria-atomic": "true",
+          children: slidesCount > 0 && `Slide ${selected + 1} of ${slidesCount}`
+        }),
+        withControls && /* @__PURE__ */ jsxs("div", {
+          ...getStyles("controls"),
+          "data-orientation": orientation,
+          children: [/* @__PURE__ */ jsx3(UnstyledButton, {
+            "aria-controls": _id,
+            "aria-label": "Previous slide",
+            "aria-disabled": !canScrollPrev,
+            "data-inactive": !canScrollPrev || undefined,
+            "data-type": "previous",
+            tabIndex: canScrollPrev ? 0 : -1,
+            ...previousControlProps,
+            ...getStyles("control", {
+              className: previousControlProps?.className,
+              style: previousControlProps?.style
+            }),
+            onClick: (event) => {
+              handlePrevious();
+              previousControlProps?.onClick?.(event);
+            },
+            children: typeof previousControlIcon !== "undefined" ? previousControlIcon : /* @__PURE__ */ jsx3(AccordionChevron, { style: { transform: `rotate(${getChevronRotation({
+              dir,
+              orientation,
+              direction: "previous"
+            })}deg)` } })
+          }), /* @__PURE__ */ jsx3(UnstyledButton, {
+            "aria-controls": _id,
+            "aria-label": "Next slide",
+            "aria-disabled": !canScrollNext,
+            "data-inactive": !canScrollNext || undefined,
+            "data-type": "next",
+            tabIndex: canScrollNext ? 0 : -1,
+            ...getStyles("control", {
+              className: nextControlProps?.className,
+              style: nextControlProps?.style
+            }),
+            ...nextControlProps,
+            onClick: (event) => {
+              handleNext();
+              nextControlProps?.onClick?.(event);
+            },
+            children: typeof nextControlIcon !== "undefined" ? nextControlIcon : /* @__PURE__ */ jsx3(AccordionChevron, { style: { transform: `rotate(${getChevronRotation({
+              dir,
+              orientation,
+              direction: "next"
+            })}deg)` } })
+          })]
+        }),
+        /* @__PURE__ */ jsx3("div", {
+          ...getStyles("viewport"),
+          ref: emblaRefElement,
+          "data-type": type,
+          children: /* @__PURE__ */ jsx3("div", {
+            ...getStyles("container", { className: responsiveClassName }),
+            "data-orientation": orientation,
+            children
+          })
+        }),
+        withIndicators && /* @__PURE__ */ jsx3("div", {
+          ...getStyles("indicators"),
+          role: "tablist",
+          "aria-label": "Slides",
+          "data-orientation": orientation,
+          children: indicators
+        })
+      ]
+    })]
+  });
+});
+Carousel.classes = Carousel_module_default;
+Carousel.varsResolver = varsResolver;
+Carousel.displayName = "@mantine/carousel/Carousel";
+Carousel.Slide = CarouselSlide;
+export {
+  useCarouselContext,
+  CarouselSlide,
+  Carousel
+};
+
+//# debugId=0A5736BDFF04F01564756E2164756E21