@tiny-server/design 0.0.0-pre202605241751

package/dist/components/badge-group/BadgeGroup.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export interface BadgeGroupProps extends PropsWithChildren {
+    max?: number;
+    renderHidden?(hidden: number): ReactNode;
+}
+export declare function BadgeGroup({ children, max, renderHidden }: BadgeGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/badge-group/BadgeGroup.stories.d.ts

@@ -0,0 +1,6 @@
+import { BadgeGroup } from './BadgeGroup';
+import { Meta, StoryObj } from '@storybook/react-vite';
+declare const meta: Meta<typeof BadgeGroup>;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export default meta;

package/dist/components/badge-group/index.d.ts

@@ -0,0 +1 @@
+export * from './BadgeGroup';

package/dist/components/checkbox-card/CheckboxCard.d.ts

@@ -0,0 +1,7 @@
+import { CheckboxCardProps as MantineCheckboxCardProps } from '@mantine/core';
+import { ReactNode } from 'react';
+export interface CheckboxCardProps extends MantineCheckboxCardProps {
+    label?: ReactNode;
+    description?: ReactNode;
+}
+export declare function CheckboxCard({ label, description, children, disabled, ...rest }: CheckboxCardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/checkbox-card/CheckboxCard.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { CheckboxCard } from './CheckboxCard';
+declare const meta: Meta<typeof CheckboxCard>;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export default meta;

package/dist/components/checkbox-card/index.d.ts

@@ -0,0 +1 @@
+export * from './CheckboxCard';

package/dist/components/form/Form.d.ts

@@ -0,0 +1,15 @@
+import { ContainerProps, StackProps, ElementProps } from '@mantine/core';
+import { ReactNode } from 'react';
+import { FormSection } from './FormSection';
+import { FormFooter } from './FormFooter';
+import { FormAlert } from './FormAlert';
+export interface FormProps extends ElementProps<'form'>, Omit<ContainerProps, keyof ElementProps<'div'>> {
+    gap?: StackProps['gap'];
+    children?: ReactNode;
+}
+export declare function Form({ ref, size, p, gap, children, ...rest }: FormProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Form {
+    var Alert: typeof FormAlert;
+    var Section: typeof FormSection;
+    var Footer: typeof FormFooter;
+}

package/dist/components/form/Form.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { Form } from './Form';
+declare const meta: Meta<typeof Form>;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export default meta;

package/dist/components/form/FormAlert.d.ts

@@ -0,0 +1,6 @@
+import { AlertProps } from '@mantine/core';
+export type FormAlertKind = 'success' | 'error';
+export interface FormAlertProps extends Omit<AlertProps, 'color' | 'icon'> {
+    kind: FormAlertKind;
+}
+export declare function FormAlert({ kind, variant, ...rest }: FormAlertProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/FormFooter.d.ts

@@ -0,0 +1,4 @@
+import { GroupProps } from '@mantine/core';
+export interface FormFooterProps extends GroupProps {
+}
+export declare function FormFooter({ gap, wrap, ...rest }: FormFooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/FormSection.d.ts

@@ -0,0 +1,4 @@
+import { StackProps } from '@mantine/core';
+export interface FormSectionProps extends StackProps {
+}
+export declare function FormSection({ gap, ...rest }: FormSectionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Form';

package/dist/components/image-cropper/ImageCropper.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { CropperProps } from 'react-easy-crop';
+export interface ImageCropperProps extends Partial<Omit<CropperProps, 'crop' | 'zoom' | 'rotation' | 'onCropChange' | 'onZoomChange' | 'onRotationChange' | 'onCropComplete'>> {
+    src?: string;
+    initialCrop?: CropperProps['crop'];
+    initialZoom?: CropperProps['zoom'];
+    initialRotation?: CropperProps['rotation'];
+    fallback?: ReactNode;
+    onCropped?(croppedImageBlob: File): void;
+}
+export declare function ImageCropper({ src, initialCrop, initialZoom, initialRotation, fallback, onCropped, ...rest }: ImageCropperProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/components/image-cropper/cropImage.d.ts

@@ -0,0 +1,11 @@
+import { Area } from 'react-easy-crop';
+/**
+ * Creates an image blob, representing a cropped version of the source image.
+ *
+ * Source:
+ * https://valentinh.github.io/react-easy-crop/docs/examples/output
+ */
+export declare function cropImage(imageSrc: string, pixelCrop: Area, rotation?: number, flip?: {
+    horizontal: boolean;
+    vertical: boolean;
+}): Promise<File>;

package/dist/components/image-cropper/index.d.ts

@@ -0,0 +1 @@
+export * from './ImageCropper';

package/dist/components/index.d.ts

@@ -0,0 +1,6 @@
+export * from './badge-group';
+export * from './checkbox-card';
+export * from './form';
+export * from './image-cropper';
+export * from './labeled-info';
+export * from './section-card';

package/dist/components/labeled-info/LabeledInfo.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+/**
+ * {@link LabeledInfo} variants.
+ *
+ * - `default`: Renders an icon, label as header and children below.
+ * - `inline`: Renders an icon and the children in a single row.
+ */
+export type LabeledInfoVariant = 'default' | 'inline';
+export interface LabeledInfoProps {
+    variant?: LabeledInfoVariant;
+    icon?: ReactNode;
+    label?: ReactNode;
+    children?: ReactNode;
+    fallback?: ReactNode;
+}
+/**
+ * Enriches the children with an optional label and icon.
+ */
+export declare function LabeledInfo({ icon, label, children, variant, fallback }: LabeledInfoProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/labeled-info/LabeledInfo.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { LabeledInfo } from './LabeledInfo';
+declare const meta: Meta<typeof LabeledInfo>;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export default meta;

package/dist/components/labeled-info/index.d.ts

@@ -0,0 +1 @@
+export * from './LabeledInfo';

package/dist/components/section-card/Header.d.ts

@@ -0,0 +1,18 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps, TextProps, TitleProps } from '@mantine/core';
+import { ReactNode } from 'react';
+export interface SectionCardHeaderProps extends BoxProps, StylesApiProps<SectionCardHeaderFactory>, ElementProps<'header', 'title'> {
+    illustration?: ReactNode;
+    title?: ReactNode;
+    titleProps?: Omit<TitleProps, 'children'>;
+    subTitle?: ReactNode;
+    subTitleProps?: Omit<TextProps, 'children'>;
+    actions?: ReactNode;
+}
+export type SectionCardHeaderFactory = Factory<{
+    props: SectionCardHeaderProps;
+    ref: HTMLDivElement;
+}>;
+export declare const SectionCardHeader: import('@mantine/core').MantineComponent<{
+    props: SectionCardHeaderProps;
+    ref: HTMLDivElement;
+}>;

package/dist/components/section-card/Section.d.ts

@@ -0,0 +1,14 @@
+import { BoxProps, ElementProps, Factory, StylesApiProps, TitleProps } from '@mantine/core';
+import { ReactNode } from 'react';
+export interface SectionCardSectionProps extends BoxProps, StylesApiProps<SectionCardSectionFactory>, ElementProps<'section', 'title'> {
+    title?: ReactNode;
+    titleProps?: Omit<TitleProps, 'children'>;
+}
+export type SectionCardSectionFactory = Factory<{
+    props: SectionCardSectionProps;
+    ref: HTMLDivElement;
+}>;
+export declare const SectionCardSection: import('@mantine/core').MantineComponent<{
+    props: SectionCardSectionProps;
+    ref: HTMLDivElement;
+}>;

package/dist/components/section-card/SectionCard.d.ts

@@ -0,0 +1,21 @@
+import { BoxProps, ElementProps, Factory, PaperBaseProps, StylesApiProps } from '@mantine/core';
+import { SectionCardSection } from './Section';
+import { SectionCardHeader } from './Header';
+export interface SectionCardProps extends BoxProps, PaperBaseProps, StylesApiProps<SectionCardFactory>, ElementProps<'section'> {
+}
+export type SectionCardFactory = Factory<{
+    props: SectionCardProps;
+    ref: HTMLDivElement;
+    staticComponents: {
+        Header: typeof SectionCardHeader;
+        Section: typeof SectionCardSection;
+    };
+}>;
+export declare const SectionCard: import('@mantine/core').MantineComponent<{
+    props: SectionCardProps;
+    ref: HTMLDivElement;
+    staticComponents: {
+        Header: typeof SectionCardHeader;
+        Section: typeof SectionCardSection;
+    };
+}>;

package/dist/components/section-card/SectionCard.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { SectionCard } from './SectionCard';
+declare const meta: Meta<typeof SectionCard>;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const TitleOnly: Story;
+export default meta;

package/dist/components/section-card/index.d.ts

@@ -0,0 +1,3 @@
+export * from './SectionCard';
+export type { SectionCardHeaderProps } from './Header';
+export type { SectionCardSectionProps } from './Section';

package/dist/index.css

@@ -0,0 +1 @@
+._section-card_4lpwj_1{color:var(--mantine-color-text)}._section-card_4lpwj_1 ._section-card__header_4lpwj_4{display:flex;flex-direction:column;gap:var(--mantine-spacing-md)}._section-card_4lpwj_1 ._section-card__header_4lpwj_4 ._section-card__header__header_4lpwj_9{display:flex;flex-direction:row;gap:var(--mantine-spacing-md);align-items:center}._section-card_4lpwj_1 ._section-card__header_4lpwj_4 ._section-card__header__header_4lpwj_9 ._section-card__header__header__illustration_4lpwj_15{flex:0 0 auto}._section-card_4lpwj_1 ._section-card__header_4lpwj_4 ._section-card__header__header_4lpwj_9 ._section-card__header__header__title_4lpwj_19{flex:1 1 auto;min-width:0}._section-card_4lpwj_1 ._section-card__header_4lpwj_4 ._section-card__header__header_4lpwj_9 ._section-card__header__header__actions_4lpwj_24{flex:0 0 auto}._section-card_4lpwj_1 ._section-card__header_4lpwj_4+._section-card__section_4lpwj_30,._section-card_4lpwj_1 ._section-card__section_4lpwj_30+._section-card__section_4lpwj_30{padding-top:0!important}._ellipsis_4lpwj_36{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1,312 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { Group as w, Badge as U, Checkbox as j, Input as F, Stack as v, Alert as V, Container as q, Box as y, LoadingOverlay as K, Tooltip as X, Text as f, Center as L, factory as I, useProps as E, Title as z, Paper as J } from "@mantine/core";
+import { Children as Q, useContext as Y, createContext as ee, forwardRef as T, createElement as A, useState as x, useRef as k, useCallback as te, useEffect as R } from "react";
+import re from "react-easy-crop";
+function ne(t) {
+  return /* @__PURE__ */ l(U, { variant: "default", children: [
+    "+",
+    t
+  ] });
+}
+function Pe({ children: t, max: e = Number.MAX_SAFE_INTEGER, renderHidden: n = ne }) {
+  const r = Q.toArray(t), o = r.slice(0, e), c = r.length - e;
+  return /* @__PURE__ */ l(w, { gap: "xs", children: [
+    o,
+    c > 0 && n(c)
+  ] });
+}
+function je({ label: t, description: e, children: n, disabled: r, ...o }) {
+  return /* @__PURE__ */ a(j.Card, { radius: "md", p: "md", disabled: r, ...o, children: /* @__PURE__ */ l(w, { h: "100%", wrap: "nowrap", align: "flex-start", children: [
+    /* @__PURE__ */ a(j.Indicator, { mt: "calc(var(--mantine-spacing-xs) / 2)", disabled: r }),
+    /* @__PURE__ */ l("div", { children: [
+      t && /* @__PURE__ */ a(F.Label, { htmlFor: o.id, children: t }),
+      e && /* @__PURE__ */ a(F.Description, { children: e }),
+      n
+    ] })
+  ] }) });
+}
+function oe({ gap: t = "md", ...e }) {
+  return /* @__PURE__ */ a(v, { gap: t, ...e });
+}
+function ce({ gap: t = "md", wrap: e = "wrap", ...n }) {
+  return /* @__PURE__ */ a(w, { gap: t, wrap: e, ...n });
+}
+const W = (...t) => t.filter((e, n, r) => !!e && e.trim() !== "" && r.indexOf(e) === n).join(" ").trim();
+const ae = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const ie = (t) => t.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (e, n, r) => r ? r.toUpperCase() : n.toLowerCase()
+);
+const B = (t) => {
+  const e = ie(t);
+  return e.charAt(0).toUpperCase() + e.slice(1);
+};
+var $ = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+const se = (t) => {
+  for (const e in t)
+    if (e.startsWith("aria-") || e === "role" || e === "title")
+      return !0;
+  return !1;
+}, de = ee({}), le = () => Y(de), he = T(
+  ({ color: t, size: e, strokeWidth: n, absoluteStrokeWidth: r, className: o = "", children: c, iconNode: i, ...s }, d) => {
+    const {
+      size: _ = 24,
+      strokeWidth: h = 2,
+      absoluteStrokeWidth: p = !1,
+      color: C = "currentColor",
+      className: g = ""
+    } = le() ?? {}, m = r ?? p ? Number(n ?? h) * 24 / Number(e ?? _) : n ?? h;
+    return A(
+      "svg",
+      {
+        ref: d,
+        ...$,
+        width: e ?? _ ?? $.width,
+        height: e ?? _ ?? $.height,
+        stroke: t ?? C,
+        strokeWidth: m,
+        className: W("lucide", g, o),
+        ...!c && !se(s) && { "aria-hidden": "true" },
+        ...s
+      },
+      [
+        ...i.map(([S, N]) => A(S, N)),
+        ...Array.isArray(c) ? c : [c]
+      ]
+    );
+  }
+);
+const H = (t, e) => {
+  const n = T(
+    ({ className: r, ...o }, c) => A(he, {
+      ref: c,
+      iconNode: e,
+      className: W(
+        `lucide-${ae(B(t))}`,
+        `lucide-${t}`,
+        r
+      ),
+      ...o
+    })
+  );
+  return n.displayName = B(t), n;
+};
+const ue = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], _e = H("check", ue);
+const me = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+], pe = H("circle-alert", me), ge = {
+  success: "green",
+  error: "red"
+}, fe = {
+  success: /* @__PURE__ */ a(_e, { size: 16 }),
+  error: /* @__PURE__ */ a(pe, { size: 16 })
+};
+function we({ kind: t, variant: e = "outline", ...n }) {
+  const r = ge[t], o = fe[t];
+  return /* @__PURE__ */ a(V, { variant: e, color: r, icon: o, ...n });
+}
+function M({ ref: t, size: e = "xs", p: n = 0, gap: r = "lg", children: o, ...c }) {
+  return /* @__PURE__ */ a(q, { ...c, component: "form", ref: t, mx: 0, size: e, p: n, children: /* @__PURE__ */ a(v, { gap: r, children: o }) });
+}
+M.Alert = we;
+M.Section = oe;
+M.Footer = ce;
+async function Ce(t, e, n = 0, r = { horizontal: !1, vertical: !1 }) {
+  const o = await ve(t), c = document.createElement("canvas"), i = c.getContext("2d");
+  if (!i)
+    throw new Error("Failed to create canvas context.");
+  const s = Z(n), { width: d, height: _ } = xe(o.width, o.height, n);
+  c.width = d, c.height = _, i.translate(d / 2, _ / 2), i.rotate(s), i.scale(r.horizontal ? -1 : 1, r.vertical ? -1 : 1), i.translate(-o.width / 2, -o.height / 2), i.drawImage(o, 0, 0);
+  const h = document.createElement("canvas"), p = h.getContext("2d");
+  if (!p)
+    throw new Error("Failed to create canvas context.");
+  return h.width = e.width, h.height = e.height, p.drawImage(
+    c,
+    e.x,
+    e.y,
+    e.width,
+    e.height,
+    0,
+    0,
+    e.width,
+    e.height
+  ), new Promise(
+    (C, g) => h.toBlob(
+      (m) => m ? C(new File([m], "img.png", { type: m.type })) : g(new Error("Failed to crop image.")),
+      "image/png"
+    )
+  );
+}
+function Z(t) {
+  return t * Math.PI / 180;
+}
+function xe(t, e, n) {
+  const r = Z(n);
+  return {
+    width: Math.abs(Math.cos(r) * t) + Math.abs(Math.sin(r) * e),
+    height: Math.abs(Math.sin(r) * t) + Math.abs(Math.cos(r) * e)
+  };
+}
+function ve(t) {
+  return new Promise((e, n) => {
+    const r = new Image();
+    r.addEventListener("load", () => e(r)), r.addEventListener("error", n), r.setAttribute("crossOrigin", "anonymous"), r.src = t;
+  });
+}
+function ye(t, e, n = { leading: !1 }) {
+  const [r, o] = x(t), c = k(!1), i = k(null), s = k(!1), d = te(() => window.clearTimeout(i.current), []);
+  return R(() => {
+    c.current && (!s.current && n.leading ? (s.current = !0, o(t)) : (d(), i.current = window.setTimeout(() => {
+      s.current = !1, o(t);
+    }, e)));
+  }, [
+    t,
+    n.leading,
+    e
+  ]), R(() => (c.current = !0, d), []), [r, d];
+}
+function Fe({
+  src: t,
+  initialCrop: e = { x: 0, y: 0 },
+  initialZoom: n = 1,
+  initialRotation: r = 0,
+  fallback: o,
+  onCropped: c,
+  ...i
+}) {
+  const [s, d] = x(e), [_, h] = x(n), [p, C] = x(r), [g, m] = x(!1), [S] = ye(g, 250, { leading: !1 }), N = async ($e, D) => {
+    try {
+      if (g)
+        return;
+      m(!0);
+      const b = await Ce(t, D);
+      c?.(b);
+    } catch (b) {
+      console.error("Image cropping failed.", b);
+    } finally {
+      m(!1);
+    }
+  };
+  return t ? /* @__PURE__ */ l(y, { pos: "relative", w: "100%", h: "100%", children: [
+    /* @__PURE__ */ a(K, { visible: S }),
+    /* @__PURE__ */ a(
+      re,
+      {
+        ...i,
+        image: t,
+        crop: s,
+        zoom: _,
+        rotation: p,
+        onCropChange: d,
+        onZoomChange: h,
+        onRotationChange: C,
+        onCropComplete: N
+      }
+    )
+  ] }) : o;
+}
+function Le({ icon: t, label: e, children: n, variant: r = "default", fallback: o = "–" }) {
+  const c = /* @__PURE__ */ a(f, { component: "div", children: n || o });
+  if (r === "inline") {
+    const i = /* @__PURE__ */ a(f, { component: "div", c: "dimmed", children: /* @__PURE__ */ a(L, { children: t }) });
+    return /* @__PURE__ */ l(w, { gap: "xs", align: "center", wrap: "nowrap", children: [
+      e ? /* @__PURE__ */ a(X, { label: e, children: i }) : i,
+      c
+    ] });
+  }
+  return /* @__PURE__ */ l(v, { gap: 0, children: [
+    /* @__PURE__ */ a(f, { component: "div", c: "dimmed", fz: "sm", children: /* @__PURE__ */ l(w, { gap: "xs", align: "center", wrap: "nowrap", children: [
+      t && /* @__PURE__ */ a(L, { children: t }),
+      /* @__PURE__ */ a(f, { component: "div", truncate: !0, inherit: !0, children: e })
+    ] }) }),
+    c
+  ] });
+}
+const Se = "_ellipsis_4lpwj_36", u = {
+  "section-card": "_section-card_4lpwj_1",
+  "section-card__header": "_section-card__header_4lpwj_4",
+  "section-card__header__header": "_section-card__header__header_4lpwj_9",
+  "section-card__header__header__illustration": "_section-card__header__header__illustration_4lpwj_15",
+  "section-card__header__header__title": "_section-card__header__header__title_4lpwj_19",
+  "section-card__header__header__actions": "_section-card__header__header__actions_4lpwj_24",
+  "section-card__section": "_section-card__section_4lpwj_30",
+  ellipsis: Se
+}, Ne = {
+  p: "md"
+}, G = I((t) => {
+  const { title: e, titleProps: n, className: r, children: o, ...c } = E(
+    "SectionCard.Section",
+    Ne,
+    t
+  );
+  return /* @__PURE__ */ l(y, { component: "section", className: `${u["section-card__section"]} ${r ?? ""}`, ...c, children: [
+    e && /* @__PURE__ */ a(z, { order: 3, ...n, className: `${u.ellipsis} ${n?.className ?? ""}`, children: e }),
+    o && /* @__PURE__ */ a("div", { children: o })
+  ] });
+});
+G.displayName = "SectionCard.Section";
+const be = {
+  p: "md"
+}, O = I((t) => {
+  const { illustration: e, title: n, titleProps: r, subTitle: o, subTitleProps: c, actions: i, children: s, className: d, ..._ } = E(
+    "SectionCard.Header",
+    be,
+    t
+  ), h = /* @__PURE__ */ l(v, { gap: "xs", className: `${u["section-card__header__header__title"]} ${u.ellipsis}`, children: [
+    n && /* @__PURE__ */ a(z, { order: 2, ...r, className: `${u.ellipsis} ${r?.className ?? ""}`, children: n }),
+    o && /* @__PURE__ */ a(
+      f,
+      {
+        component: "div",
+        c: "dimmed",
+        ...c,
+        className: `${u.ellipsis} ${c?.className ?? ""}`,
+        children: o
+      }
+    )
+  ] });
+  return /* @__PURE__ */ l(y, { component: "header", className: `${u["section-card__header"]} ${d ?? ""}`, ..._, children: [
+    /* @__PURE__ */ l("div", { className: u["section-card__header__header"], children: [
+      e && /* @__PURE__ */ a("div", { className: u["section-card__header__header__illustration"], children: e }),
+      h,
+      i && /* @__PURE__ */ a(w, { gap: "xs", className: u["section-card__header__header__actions"], children: i })
+    ] }),
+    s && /* @__PURE__ */ a("div", { children: s })
+  ] });
+});
+O.displayName = "SectionCard.Header";
+const ke = {
+  radius: "lg",
+  shadow: "sm",
+  withBorder: !1
+}, P = I((t) => {
+  const { radius: e, shadow: n, withBorder: r, children: o, className: c, ...i } = E(
+    "SectionCard",
+    ke,
+    t
+  );
+  return /* @__PURE__ */ a(y, { component: "section", className: `${u["section-card"]} ${c ?? ""}`, ...i, children: /* @__PURE__ */ a(J, { radius: e, shadow: n, withBorder: r, children: /* @__PURE__ */ a(f, { component: "div", children: o }) }) });
+});
+P.displayName = "SectionCard";
+P.Header = O;
+P.Section = G;
+export {
+  Pe as BadgeGroup,
+  je as CheckboxCard,
+  M as Form,
+  Fe as ImageCropper,
+  Le as LabeledInfo,
+  P as SectionCard
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@tiny-server/design",
+  "version": "0.0.0-pre202605241751",
+  "description": "The Tiny Server design library package.",
+  "keywords": [
+    "tiny-server",
+    "design",
+    "library"
+  ],
+  "author": "Manuel Römer",
+  "license": "AGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/manuelroemer/tiny-server.git"
+  },
+  "bugs": {
+    "url": "https://github.com/manuelroemer/tiny-server/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./index.css": {
+      "import": "./dist/index.css"
+    }
+  },
+  "scripts": {
+    "start": "vite build --watch",
+    "build": "vite build",
+    "test": "",
+    "lint": "eslint src",
+    "storybook": "storybook dev -p 6006"
+  },
+  "dependencies": {
+    "react-easy-crop": "5.5.7"
+  },
+  "peerDependencies": {
+    "@mantine/core": "^9",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "gitHead": "193d19cb2bc34732a7d80e709067851e249803c4"
+}

package/src/components/badge-group/BadgeGroup.stories.tsx

@@ -0,0 +1,24 @@
+import { Badge } from '@mantine/core';
+import { BadgeGroup } from './BadgeGroup';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof BadgeGroup> = {
+  component: BadgeGroup,
+  title: 'Components/BadgeGroup',
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <BadgeGroup max={3}>
+      <Badge>Badge 1</Badge>
+      <Badge>Badge 2</Badge>
+      <Badge>Badge 3</Badge>
+      <Badge>Badge 4</Badge>
+      <Badge>Badge 5</Badge>
+    </BadgeGroup>
+  ),
+};
+
+export default meta;

package/src/components/badge-group/BadgeGroup.tsx

@@ -0,0 +1,24 @@
+import { Badge, Group } from '@mantine/core';
+import { Children, type PropsWithChildren, type ReactNode } from 'react';
+
+export interface BadgeGroupProps extends PropsWithChildren {
+  max?: number;
+  renderHidden?(hidden: number): ReactNode;
+}
+
+function defaultMore(hidden: number) {
+  return <Badge variant="default">+{hidden}</Badge>;
+}
+
+export function BadgeGroup({ children, max = Number.MAX_SAFE_INTEGER, renderHidden = defaultMore }: BadgeGroupProps) {
+  const childElements = Children.toArray(children);
+  const visibleElement = childElements.slice(0, max);
+  const hiddenElements = childElements.length - max;
+
+  return (
+    <Group gap="xs">
+      {visibleElement}
+      {hiddenElements > 0 && renderHidden(hiddenElements)}
+    </Group>
+  );
+}

package/src/components/badge-group/index.ts

@@ -0,0 +1 @@
+export * from './BadgeGroup';