@360crewing/ui 0.1.3

package/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+All notable changes to `@360crewing/ui` are documented here.
+Format roughly follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
+
+## 0.1.0 — 2026-05-27
+
+Initial public release. Extracted from `tenant-frontend/src/components`.
+
+### Primitives
+
+- Layout: `Page`, `Card`, `ShadowedBlock`, `LayoutBlock`, `Delimeter`
+- Form fields (legacy + DS): `TextField`, `TextareaField`, `CheckboxField`,
+  `ToggleField`, `Checkbox`, `Toggle`
+- Buttons: `Button`, `IconButton`, `DropdownButton`, `FormActionButtons`
+- Feedback: `Badge`, `BadgeWithDot`, `StatusBadge`, `Tag`, `Tooltip`, `Popover`,
+  `ContentLoader`, `SkeletonLoader`
+- Navigation: `Tabs`, `Breadcrumbs`, `SidebarMenu`, `Pagination`
+- Other: `Avatar`, `Icon`, `SearchInput`, `FileUpload`, `DetailItem`,
+  `InformationPanel`, `CollapsibleFields`
+
+### Foundations
+
+- `styles/tokens.css` — colour, spacing, radius, shadow tokens
+- `styles/typography.css` — Montserrat-based type scale
+
+### Engineering
+
+- Pure ESM, `type: "module"`, exports map with `./styles.css` entry
+- `prepublishOnly` runs `tsc -p tsconfig.build.json` + copies CSS
+- Peer-deps: react 18 || 19, react-dom 18 || 19, mobx-react-lite 4, react-icons 5

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 360crewing
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# @360crewing/ui
+
+Pure visual UI primitives for the 360crewing platform. Used by the host
+(`tenant-frontend`) and by marketplace extensions (via
+`@360crewing/marketplace-sdk`, which re-exports this package).
+
+## Principles
+
+- **Presentational components only.** No global state, managers, axios, or
+  MobX stores. Everything is driven through props.
+- **No import-time side effects.** Importing CSS is the only exception.
+- **Imperative platform services (Modal, Toast, Confirmation, Form) are NOT
+  here.** They live in the host as services; extensions reach them only through
+  SDK hooks (`useModal`, `useNotify`, `useConfirm`, `useForm`).
+
+## What's included
+
+**Forms & inputs:** `Button`, `TextField`, `TextareaField`, `CheckboxField`,
+`ToggleField`, `DropdownButton`, `FormActionButtons`.
+
+**Layout & presentation:** `Card`, `Page`, `LayoutBlock`, `ShadowedBlock`,
+`Delimeter`, `InformationPanel`, `DetailItem`, `Badge` (+ `BadgeWithDot`),
+`Icon`.
+
+**State & navigation:** `ContentLoader`, `SkeletonLoader`, `CollapsibleFields`,
+`Pagination`.
+
+## i18n-aware components
+
+`Pagination`, `CollapsibleFields`, and `FormActionButtons` accept their text
+labels as props with English defaults. The host wraps them in thin i18n
+adapters that call `useTranslation()` and pass localized strings down.
+Extensions inject their own `useI18n()` from the SDK when using these
+primitives directly.
+
+## Styles
+
+Import the stylesheet once at the host entry point:
+
+```ts
+import "@360crewing/ui/styles.css";
+```
+
+## Peer dependencies
+
+`react`, `react-dom`, `mobx-react-lite`, `react-icons` — provided by the host.

package/dist/components/Avatar.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import "../styles/Avatar.css";
+export type AvatarSize = "sm" | "md" | "lg";
+export interface AvatarProps {
+    size?: AvatarSize;
+    /** Image URL. When provided, overrides `initials`. */
+    src?: string;
+    /** Up to 2 characters shown when `src` is missing or fails. */
+    initials?: string;
+    /** Accessible label (alt text or aria-label). */
+    name?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Avatar — circular user/entity indicator. Mirrors Figma `Avatar` set
+ * (sm 32 / md 40 / lg 48). Falls back to initials on `Surface/Brand-Minimal`.
+ */
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/dist/components/Avatar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import "../styles/Avatar.css";
+/**
+ * Avatar — circular user/entity indicator. Mirrors Figma `Avatar` set
+ * (sm 32 / md 40 / lg 48). Falls back to initials on `Surface/Brand-Minimal`.
+ */
+const Avatar = ({ size = "md", src, initials, name, className, style, }) => {
+    const shortInitials = (initials ?? name ?? "")
+        .split(/\s+/)
+        .map((s) => s[0] ?? "")
+        .join("")
+        .slice(0, 2)
+        .toUpperCase();
+    return (_jsx("span", { className: classNames("ds-avatar", `ds-avatar--${size}`, className), style: style, role: "img", "aria-label": name, children: src ? (_jsx("img", { className: "ds-avatar__img", src: src, alt: name ?? "" })) : (_jsx("span", { className: "ds-avatar__initials", children: shortInitials })) }));
+};
+export default Avatar;

package/dist/components/Badge.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import "../styles/Badge.css";
+export type BadgeColor = "gray" | "brand" | "error" | "warning" | "success" | "slate" | "sky" | "blue" | "indigo" | "purple" | "pink" | "orange";
+export type BadgeSize = "sm" | "md" | "lg";
+export interface BadgeProps {
+    color?: BadgeColor;
+    size?: BadgeSize;
+    className?: string;
+    children: ReactNode;
+}
+declare const Badge: ({ color, size, className, children }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;
+export interface BadgeWithDotProps {
+    color?: BadgeColor;
+    size?: BadgeSize;
+    className?: string;
+    children: ReactNode;
+}
+export declare const BadgeWithDot: ({ color, size, className, children }: BadgeWithDotProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Badge.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import "../styles/Badge.css";
+const Badge = ({ color = "gray", size = "md", className, children }) => {
+    return _jsx("span", { className: classNames("badge", `badge--${size}`, `badge--${color}`, className), children: children });
+};
+export default Badge;
+export const BadgeWithDot = ({ color = "gray", size = "md", className, children }) => {
+    return _jsxs("span", { className: classNames("badge", "badge--with-dot", `badge--${size}`, `badge--${color}`, className), children: [_jsx("span", { className: "badge__dot", "aria-hidden": true }), children] });
+};

package/dist/components/Breadcrumbs.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import "../styles/Breadcrumbs.css";
+export interface BreadcrumbItem {
+    label: React.ReactNode;
+    href?: string;
+    onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+    /** Marks the current page item — rendered non-interactive. */
+    isCurrent?: boolean;
+}
+export interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    /** Custom separator. Defaults to `›`. */
+    separator?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/** Breadcrumbs — page-location trail (Figma `Breadcrumbs`). Last item is current/non-interactive; preceding are links. */
+declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export default Breadcrumbs;

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import "../styles/Breadcrumbs.css";
+/** Breadcrumbs — page-location trail (Figma `Breadcrumbs`). Last item is current/non-interactive; preceding are links. */
+const Breadcrumbs = ({ items, separator = "›", className, style, }) => {
+    return (_jsx("nav", { className: classNames("ds-breadcrumbs", className), style: style, "aria-label": "Breadcrumb", children: _jsx("ol", { className: "ds-breadcrumbs__list", children: items.map((it, i) => {
+                const isLast = i === items.length - 1;
+                const isCurrent = it.isCurrent ?? isLast;
+                return (_jsxs("li", { className: classNames("ds-breadcrumbs__item", isCurrent && "ds-breadcrumbs__item--current"), children: [isCurrent ? (_jsx("span", { className: "ds-breadcrumbs__current", "aria-current": "page", children: it.label })) : it.href ? (_jsx("a", { className: "ds-breadcrumbs__link", href: it.href, onClick: it.onClick, children: it.label })) : (_jsx("button", { type: "button", className: "ds-breadcrumbs__link", onClick: it.onClick, children: it.label })), !isLast && (_jsx("span", { className: "ds-breadcrumbs__separator", "aria-hidden": "true", children: separator }))] }, i));
+            }) }) }));
+};
+export default Breadcrumbs;

package/dist/components/Button.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import "../styles/Button.css";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "edit" | "additional" | "danger" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
+interface IDefaultButtonProps {
+    className?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
+    isDisabled?: boolean;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+    ref?: React.RefObject<HTMLButtonElement>;
+    type?: "button" | "submit" | "reset";
+    preventDoubleClick?: boolean;
+    cooldownMs?: number;
+    lockWhilePending?: boolean;
+    /** DS variant → `.ds-button .ds-button--<variant> .ds-button--<size>`.
+     *  Omitted → legacy `.button` class, so existing `className` callers keep working. */
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    fullWidth?: boolean;
+    iconBefore?: React.ReactNode;
+    iconAfter?: React.ReactNode;
+    isLoading?: boolean;
+    /** Accessibility — required if the button only contains an icon. */
+    "aria-label"?: string;
+}
+interface IButtonWithTitle extends IDefaultButtonProps {
+    title: string;
+}
+interface IButtonWithChildren extends IDefaultButtonProps {
+    title?: string;
+    children: React.ReactNode;
+}
+export type ButtonProps = IButtonWithTitle | IButtonWithChildren;
+declare const Button: (({ title, className, onClick, isDisabled, style, children, ref, type, preventDoubleClick, cooldownMs, lockWhilePending, variant, size, fullWidth, iconBefore, iconAfter, isLoading, "aria-label": ariaLabel, }: ButtonProps) => import("react/jsx-runtime").JSX.Element) & {
+    displayName: string;
+};
+export default Button;

package/dist/components/Button.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { observer } from "mobx-react-lite";
+import { useRef } from "react";
+import { ClipLoader } from "react-spinners";
+import "../styles/Button.css";
+const Button = observer(({ title, className, onClick, isDisabled, style, children, ref, type, preventDoubleClick = false, cooldownMs = 600, lockWhilePending = true, variant, size = "md", fullWidth, iconBefore, iconAfter, isLoading, "aria-label": ariaLabel, }) => {
+    const lockedRef = useRef(false);
+    const timerRef = useRef(null);
+    const releaseLockAfterCooldown = () => {
+        if (timerRef.current) {
+            window.clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+        timerRef.current = window.setTimeout(() => {
+            lockedRef.current = false;
+            timerRef.current = null;
+        }, Math.max(0, cooldownMs || 0));
+    };
+    const onClickHandler = (e) => {
+        if (isDisabled || isLoading)
+            return;
+        if (preventDoubleClick) {
+            if (lockedRef.current)
+                return;
+            lockedRef.current = true;
+        }
+        const maybePromise = onClick?.(e);
+        if (preventDoubleClick) {
+            const isPromise = maybePromise && typeof maybePromise.then === "function";
+            if (isPromise && lockWhilePending !== false) {
+                maybePromise
+                    .finally(() => {
+                    releaseLockAfterCooldown();
+                });
+            }
+            else {
+                releaseLockAfterCooldown();
+            }
+        }
+    };
+    const effectiveDisabled = !!isDisabled || (!!preventDoubleClick && lockedRef.current);
+    const useDs = !!variant;
+    const composedClassName = classNames(
+    // Legacy `.button` only off the DS API; mixing both re-applies the old
+    // `min-width:100px; height:20px` reset and breaks DS sizing.
+    !useDs && "button", useDs && "ds-button", useDs && `ds-button--${variant}`, useDs && `ds-button--${size}`, useDs && fullWidth && "ds-button--full-width", useDs && isLoading && "is-loading", { disabled: effectiveDisabled, "is-disabled": useDs && effectiveDisabled }, className);
+    return (_jsxs("button", { ref: ref, className: composedClassName, onClick: onClickHandler, style: style, type: type, disabled: effectiveDisabled, "aria-label": ariaLabel, "aria-busy": isLoading || undefined, children: [useDs && iconBefore && (_jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: iconBefore })), children ?? title, useDs && iconAfter && (_jsx("span", { className: "ds-button__icon", "aria-hidden": "true", children: iconAfter })), useDs && isLoading && (_jsx(ClipLoader, { size: 14, color: "currentColor", cssOverride: { position: "absolute" } }))] }));
+});
+export default Button;

package/dist/components/Card.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import "../styles/Card.css";
+export interface CardProps {
+    title?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    padding?: "none" | "sm" | "md" | "lg";
+}
+declare const Card: React.FC<CardProps>;
+export default Card;

package/dist/components/Card.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/Card.css";
+const Card = ({ title, actions, children, className, style, padding = "md", }) => {
+    return (_jsxs("div", { className: `crewing-card crewing-card--pad-${padding} ${className || ""}`.trim(), style: style, children: [(title || actions) && (_jsxs("div", { className: "crewing-card__header", children: [title && _jsx("div", { className: "crewing-card__title", children: title }), actions && _jsx("div", { className: "crewing-card__actions", children: actions })] })), _jsx("div", { className: "crewing-card__body", children: children })] }));
+};
+export default Card;

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import "../styles/Checkbox.css";
+export type CheckboxSize = "sm" | "md";
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    size?: CheckboxSize;
+    /** Renders the field in an error state (red border, optional `errorText`). */
+    isError?: boolean;
+    /** Label rendered next to the checkbox. */
+    label?: React.ReactNode;
+    /** Wrapper class applied to the outer <label>. */
+    wrapperClassName?: string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Checkbox;

package/dist/components/Checkbox.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import "../styles/Checkbox.css";
+const Checkbox = forwardRef(({ size = "md", isError, label, className, wrapperClassName, disabled, ...inputProps }, ref) => {
+    return (_jsxs("label", { className: classNames("ds-checkbox", `ds-checkbox--${size}`, isError && "ds-checkbox--error", disabled && "ds-checkbox--disabled", wrapperClassName), children: [_jsx("input", { ...inputProps, ref: ref, type: "checkbox", disabled: disabled, "aria-invalid": isError || undefined, className: classNames("ds-checkbox__input", className) }), label !== undefined && (_jsx("span", { className: "ds-checkbox__label", children: label }))] }));
+});
+Checkbox.displayName = "Checkbox";
+export default Checkbox;

package/dist/components/CheckboxField.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "../styles/CheckboxField.css";
+import "../styles/Error.css";
+export interface CheckboxFieldProps {
+    label?: string | React.ReactNode;
+    value?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+    isDisabled?: boolean;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    error?: string | {
+        message: string;
+    } | null;
+}
+declare const CheckboxField: React.FC<CheckboxFieldProps>;
+export default CheckboxField;

package/dist/components/CheckboxField.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from "mobx-react-lite";
+import "../styles/CheckboxField.css";
+import "../styles/Error.css";
+const CheckboxField = observer(({ label, value = false, onChange, className, isDisabled = false, inputProps, error = null, }) => {
+    const withStop = (handler) => (e) => {
+        e.stopPropagation();
+        if (handler)
+            handler(e);
+    };
+    const handleChange = (e) => {
+        e.stopPropagation();
+        onChange?.(e.target.checked);
+    };
+    return (_jsxs("div", { className: `checkbox-field ${className || ""} ${error ? "error" : ""}`, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onDoubleClick: (e) => e.stopPropagation(), children: [_jsx("input", { type: "checkbox", checked: value, disabled: isDisabled, ...inputProps, onChange: handleChange, onClick: withStop(inputProps?.onClick), onMouseDown: withStop(inputProps?.onMouseDown), onMouseUp: withStop(inputProps?.onMouseUp), onDoubleClick: withStop(inputProps?.onDoubleClick), onKeyDown: withStop(inputProps?.onKeyDown) }), label && _jsx("span", { className: "label", children: label }), error && (_jsx("div", { className: "error-text", children: typeof error === "string" ? error : error.message }))] }));
+});
+export default CheckboxField;

package/dist/components/CollapsibleFields.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import "../styles/CollapsibleFields.css";
+export interface CollapsibleFieldsProps {
+    label?: string;
+    children: React.ReactNode;
+    defaultExpanded?: boolean;
+}
+declare const CollapsibleFields: React.FC<CollapsibleFieldsProps>;
+export default CollapsibleFields;

package/dist/components/CollapsibleFields.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import "../styles/CollapsibleFields.css";
+const CollapsibleFields = ({ label = "Show full details", children, defaultExpanded = false, }) => {
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+    return (_jsxs("div", { className: "collapsible-fields", children: [_jsxs("button", { type: "button", className: "collapsible-toggle", onClick: () => setIsExpanded(!isExpanded), children: [_jsx("span", { className: `arrow ${isExpanded ? "expanded" : ""}`, children: "\u25B6" }), label] }), isExpanded && (_jsx("div", { className: "collapsible-content", children: children }))] }));
+};
+export default CollapsibleFields;

package/dist/components/ContentLoader.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ContentLoaderProps {
+    color?: string;
+    size?: number;
+    minHeight?: number | string;
+}
+declare const ContentLoader: React.FC<ContentLoaderProps>;
+export default ContentLoader;

package/dist/components/ContentLoader.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ClipLoader } from "react-spinners";
+const ContentLoader = ({ color = "#36d7b7", size = 50, minHeight = "60vh", }) => {
+    return (_jsx("div", { style: {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%",
+            height: "100%",
+            minHeight,
+            flex: 1,
+        }, children: _jsx(ClipLoader, { color: color, size: size }) }));
+};
+export default ContentLoader;

package/dist/components/Delimeter.d.ts

@@ -0,0 +1,3 @@
+import "../styles/Delimeter.css";
+declare const Delimeter: () => import("react/jsx-runtime").JSX.Element;
+export default Delimeter;

package/dist/components/Delimeter.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "../styles/Delimeter.css";
+const Delimeter = () => {
+    return _jsx("div", { className: "hr" });
+};
+export default Delimeter;

package/dist/components/DetailItem.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "../styles/DetailItem.css";
+export interface DetailItemProps {
+    title: string | React.ReactNode;
+    value: string | React.ReactNode;
+}
+export declare const DetailItem: React.FC<DetailItemProps>;
+export default DetailItem;

package/dist/components/DetailItem.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "../styles/DetailItem.css";
+export const DetailItem = ({ title, value }) => {
+    return (_jsxs("div", { className: "detail-item", children: [_jsx("span", { children: title }), _jsx("span", { className: "dots" }), typeof value === "string" ? _jsx("span", { children: value }) : value] }));
+};
+export default DetailItem;

package/dist/components/DropdownButton.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import "../styles/DropdownButton.css";
+export interface DropdownOption {
+    label: string;
+    onClick: () => void;
+}
+export interface DropdownButtonProps {
+    options: DropdownOption[];
+    className?: string;
+    children?: React.ReactNode;
+    onClick?: () => void;
+    isDisabled?: boolean;
+}
+declare const DropdownButton: React.FC<DropdownButtonProps>;
+export default DropdownButton;

package/dist/components/DropdownButton.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import classNames from "classnames";
+import { LuChevronDown } from "react-icons/lu";
+import Button from "./Button";
+import "../styles/DropdownButton.css";
+const DropdownButton = ({ options, className, children, onClick, isDisabled, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    if (options.length <= 1) {
+        const singleOnClick = options.length === 1 ? options[0].onClick : onClick;
+        return (_jsx(Button, { className: className, onClick: singleOnClick, isDisabled: isDisabled, children: children }));
+    }
+    return (_jsxs("div", { className: classNames("dropdown-button-container", className, { disabled: isDisabled }), ref: containerRef, onClick: () => !isDisabled && setIsOpen(!isOpen), children: [_jsxs("div", { className: "button-group", children: [_jsx("div", { className: "main-button-content", children: children }), _jsx("div", { className: "dropdown-toggle", children: _jsx(LuChevronDown, {}) })] }), isOpen && (_jsx("div", { className: "dropdown-menu", children: options.map((option, index) => (_jsx("div", { className: "dropdown-item", onClick: (e) => {
+                        e.stopPropagation();
+                        option.onClick();
+                        setIsOpen(false);
+                    }, children: option.label }, index))) }))] }));
+};
+export default DropdownButton;

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import "../styles/FileUpload.css";
+export type FileUploadSize = "md" | "lg";
+export type FileUploadState = "default" | "error" | "success";
+export interface FileUploadProps {
+    /** Native MIME / extension list. Defaults to images. */
+    accept?: string;
+    /** Allow selecting multiple files. */
+    multiple?: boolean;
+    /** Disabled state. */
+    isDisabled?: boolean;
+    /** "lg" matches Figma "Image upload / Big"; "md" matches "Medium". */
+    size?: FileUploadSize;
+    state?: FileUploadState;
+    /** Heading text inside the drop zone. */
+    label?: React.ReactNode;
+    /** Sub-line beneath the label (file-size hint, allowed formats, …). */
+    helpText?: React.ReactNode;
+    /** Custom icon (defaults to a paperclip glyph). */
+    icon?: React.ReactNode;
+    /** Fired for accepted files (drag-drop OR click). */
+    onFilesSelected?: (files: File[]) => void;
+    /** Max size per file in bytes — files exceeding are rejected and reported via onReject. */
+    maxSizeBytes?: number;
+    onReject?: (reason: "size" | "type", file: File) => void;
+    className?: string;
+    style?: React.CSSProperties;
+    id?: string;
+    name?: string;
+}
+declare const FileUpload: React.FC<FileUploadProps>;
+export default FileUpload;

package/dist/components/FileUpload.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useCallback, useId, useRef, useState } from "react";
+import "../styles/FileUpload.css";
+const DefaultUploadIcon = () => (_jsxs("svg", { viewBox: "0 0 24 24", width: "32", height: "32", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx("path", { d: "M12 16V4" }), _jsx("path", { d: "M7 9l5-5 5 5" }), _jsx("path", { d: "M5 20h14" })] }));
+const matchesAccept = (accept, file) => {
+    if (!accept)
+        return true;
+    const tokens = accept.split(",").map(t => t.trim().toLowerCase()).filter(Boolean);
+    if (tokens.length === 0)
+        return true;
+    const fname = file.name.toLowerCase();
+    const ftype = file.type.toLowerCase();
+    return tokens.some(tok => {
+        if (tok.startsWith("."))
+            return fname.endsWith(tok);
+        if (tok.endsWith("/*"))
+            return ftype.startsWith(tok.slice(0, -1));
+        return ftype === tok;
+    });
+};
+const FileUpload = ({ accept = "image/*", multiple, isDisabled, size = "lg", state = "default", label = "Click or drop files to upload", helpText, icon, onFilesSelected, maxSizeBytes, onReject, className, style, id, name, }) => {
+    const localId = useId();
+    const inputId = id ?? `ds-fileupload-${localId}`;
+    const inputRef = useRef(null);
+    const [isDragging, setDragging] = useState(false);
+    const handleFiles = useCallback((list) => {
+        if (!list || list.length === 0)
+            return;
+        const accepted = [];
+        for (let i = 0; i < list.length; i++) {
+            const f = list.item(i);
+            if (!f)
+                continue;
+            if (!matchesAccept(accept, f)) {
+                onReject?.("type", f);
+                continue;
+            }
+            if (maxSizeBytes !== undefined && f.size > maxSizeBytes) {
+                onReject?.("size", f);
+                continue;
+            }
+            accepted.push(f);
+        }
+        if (accepted.length)
+            onFilesSelected?.(accepted);
+    }, [accept, maxSizeBytes, onFilesSelected, onReject]);
+    const onDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+        if (isDisabled)
+            return;
+        handleFiles(e.dataTransfer?.files ?? null);
+    };
+    const onDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDisabled)
+            return;
+        setDragging(true);
+    };
+    const onDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setDragging(false);
+    };
+    const onChange = (e) => {
+        handleFiles(e.target.files);
+        // Reset so picking the same file twice still fires onChange
+        e.target.value = "";
+    };
+    return (_jsxs("label", { htmlFor: inputId, className: classNames("ds-file-upload", `ds-file-upload--${size}`, `ds-file-upload--${state}`, isDragging && "is-dragging", isDisabled && "is-disabled", className), style: style, onDrop: onDrop, onDragOver: onDragOver, onDragLeave: onDragLeave, children: [_jsx("input", { ref: inputRef, id: inputId, name: name, type: "file", accept: accept, multiple: multiple, disabled: isDisabled, onChange: onChange, className: "ds-file-upload__input" }), _jsx("span", { className: "ds-file-upload__icon", "aria-hidden": "true", children: icon ?? _jsx(DefaultUploadIcon, {}) }), _jsx("span", { className: "ds-file-upload__label", children: label }), helpText && (_jsx("span", { className: "ds-file-upload__help", children: helpText }))] }));
+};
+export default FileUpload;

package/dist/components/FormActionButtons.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+export interface FormActionButtonsProps {
+    isEditing: boolean;
+    onSaveEdit: () => Promise<void> | void;
+    onDelete?: () => Promise<void> | void;
+    isDisabled?: boolean;
+    addButtonText?: string;
+    children?: React.ReactNode;
+    variant?: "default" | "save-only" | "none";
+    /** Label of the save button when editing, default "Save". */
+    saveLabel?: string;
+    /** Label of the delete button when editing, default "Delete". */
+    deleteLabel?: string;
+    /** Label of the add button when creating, default "Add" (overridden by `addButtonText`). */
+    addLabel?: string;
+}
+declare const FormActionButtons: React.FC<FormActionButtonsProps>;
+export default FormActionButtons;