@a-type/ui 5.0.21 → 6.0.0

package/dist/components/button/Button.stories.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
+import { Box } from '../box/Box.js';
+import { Icon } from '../icon/index.js';
+import { Button } from './Button.js';
+import { ConfirmedButton } from './ConfirmedButton.js';
+const meta = {
+    title: 'Components/Button',
+    component: Button,
+    parameters: {
+        controls: { expanded: true },
+    },
+    args: {
+        children: 'Button',
+        loading: false,
+        emphasis: 'default',
+        size: 'default',
+        visuallyDisabled: false,
+        disabled: false,
+        visuallyFocused: false,
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        return (_jsxs(Box, { col: true, gap: true, wrap: true, full: "width", children: [_jsxs(Box, { gap: true, items: "center", children: [_jsx(Button, Object.assign({}, args)), _jsxs(Button, Object.assign({}, args, { children: [_jsx(Icon, { name: "placeholder" }), args.children] })), _jsx(Button, Object.assign({}, args, { disabled: true, children: "Disabled" })), _jsx(Button, Object.assign({}, args, { size: "small" })), _jsx(Button, Object.assign({}, args, { size: "wrapper", children: _jsx(Button.Icon, { render: _jsx(Avatar, { name: "A" }) }) })), _jsx(Button, Object.assign({}, args, { children: _jsx(Icon, { name: "placeholder" }) })), _jsx(Button, Object.assign({}, args, { size: "small", children: _jsx(Icon, { name: "placeholder" }) }))] }), _jsxs(Box, { gap: true, items: "center", children: [_jsx(Button, Object.assign({}, args, { emphasis: "primary", children: "Primary" })), _jsx(Button, Object.assign({}, args, { emphasis: "default", children: "Default" })), _jsx(Button, Object.assign({}, args, { emphasis: "light", children: "Light" })), _jsx(Button, Object.assign({}, args, { emphasis: "ghost", children: "Ghost" })), _jsx(Button, Object.assign({}, args, { emphasis: "primary", className: "@mode-inverted", children: "Contrast" }))] })] }));
+    },
+};
+function ButtonStack({ emphasis }) {
+    return (_jsxs(Box, { col: true, gap: true, children: [_jsx(Button, { emphasis: emphasis, children: "Button" }), _jsxs(Button, { emphasis: emphasis, children: [_jsx(Icon, { name: "placeholder" }), "Icon"] }), _jsx(Button, { emphasis: emphasis, disabled: true, children: "Disabled" }), _jsx(Button, { emphasis: emphasis, size: "small", children: "Small" }), _jsx(Button, { emphasis: emphasis, size: "wrapper", children: _jsx(Button.Icon, { render: _jsx(Avatar, { imageSrc: "https://i.pravatar.cc/300", name: "Avatar" }) }) }), _jsx(Button, { emphasis: emphasis, children: _jsx(Icon, { name: "placeholder" }) }), _jsx(Button, { emphasis: emphasis, size: "small", children: _jsx(Icon, { name: "placeholder" }) })] }));
+}
+export const AllButtons = {
+    render() {
+        return (_jsxs(Box, { col: true, gap: true, children: [_jsx(Box, { gap: true, justify: "between", children: ['primary', 'light', 'default', 'ghost'].map((emphasis) => (_jsx(ButtonStack, { emphasis: emphasis }, emphasis))) }), _jsx(Box, { gap: true, surface: true, justify: "between", className: "@mode-success", children: ['primary', 'light', 'default', 'ghost'].map((emphasis) => (_jsx(ButtonStack, { emphasis: emphasis }, emphasis))) }), _jsx(Box, { gap: true, surface: true, justify: "between", className: "@mode-attention", children: ['primary', 'light', 'default', 'ghost'].map((emphasis) => (_jsx(ButtonStack, { emphasis: emphasis }, emphasis))) })] }));
+    },
+};
+export const WithIcon = {
+    args: {
+        children: (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "placeholder" }), "Iconic"] })),
+    },
+};
+export const IconOnly = {
+    args: {
+        children: _jsx(Icon, { name: "placeholder" }),
+    },
+};
+export const IconTransition = {
+    render: (args) => {
+        const [toggled, setToggled] = useState(false);
+        return (_jsx(Button, Object.assign({}, args, { onClick: () => setToggled((v) => !v), children: toggled ? _jsx(Icon, { name: "check" }) : 'no icon' })));
+    },
+};
+export const Toggled = {
+    render: (args) => {
+        const [on, setOn] = useState(false);
+        const toggle = () => setOn((v) => !v);
+        return _jsx(Button, Object.assign({}, args, { toggled: on, onClick: toggle }));
+    },
+};
+export const ToggledIcon = {
+    render: (args) => {
+        const [on, setOn] = useState(false);
+        const toggle = () => setOn((v) => !v);
+        return (_jsx(Button, Object.assign({}, args, { toggled: on, onClick: toggle, children: _jsx(Icon, { name: "placeholder" }) })));
+    },
+};
+export const Alignment = {
+    render(args) {
+        return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column' }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        borderStyle: 'solid',
+                        borderWidth: 1,
+                    }, children: [_jsx(Button, Object.assign({}, args, { size: "small", children: "Button" })), _jsx(Button, Object.assign({}, args, { size: "small", children: _jsx(Icon, { name: "placeholder" }) }))] }), _jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'row',
+                        borderStyle: 'solid',
+                        borderWidth: 1,
+                    }, children: [_jsx(Button, Object.assign({}, args, { children: "Button" })), _jsx(Button, Object.assign({}, args, { children: _jsx(Icon, { name: "placeholder" }) }))] })] }));
+    },
+};
+export const ConfirmedButtonDemo = {
+    render(args) {
+        return (_jsx(ConfirmedButton, Object.assign({ confirmText: "Are you sure?", confirmTitle: "Confirm", onConfirm: () => console.log('confirmed') }, args, { children: "Confirm" })));
+    },
+};
+export const FragmentTest = {
+    render(args) {
+        return (_jsxs(Box, { gap: true, items: "center", children: [_jsx(Button, Object.assign({}, args, { children: _jsx(_Fragment, { children: args.children }) })), _jsx(Button, Object.assign({}, args, { children: _jsxs(_Fragment, { children: [_jsx(Icon, { name: "placeholder" }), args.children] }) })), _jsx(Button, { children: _jsx(_Fragment, { children: _jsx(Icon, { name: "placeholder" }) }) })] }));
+    },
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/components/button/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../src/components/button/Button.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAe,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE;QACL,QAAQ,EAAE,QAAQ;QAClB,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,SAAS;QACnB,IAAI,EAAE,SAAS;QACf,gBAAgB,EAAE,KAAK;QACvB,QAAQ,EAAE,KAAK;QACf,eAAe,EAAE,KAAK;KACtB;CAC6B,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,GAAG,QAAC,IAAI,QAAC,IAAI,EAAC,OAAO,aAC7B,MAAC,GAAG,IAAC,GAAG,QAAC,KAAK,EAAC,QAAQ,aACtB,KAAC,MAAM,oBAAK,IAAI,EAAI,EACpB,MAAC,MAAM,oBAAK,IAAI,eACf,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC1B,IAAI,CAAC,QAAQ,KACN,EACT,KAAC,MAAM,oBAAK,IAAI,IAAE,QAAQ,gCAEjB,EACT,KAAC,MAAM,oBAAK,IAAI,IAAE,IAAI,EAAC,OAAO,IAAG,EACjC,KAAC,MAAM,oBAAK,IAAI,IAAE,IAAI,EAAC,SAAS,YAC/B,KAAC,MAAM,CAAC,IAAI,IAAC,MAAM,EAAE,KAAC,MAAM,IAAC,IAAI,EAAC,GAAG,GAAG,GAAI,IACpC,EACT,KAAC,MAAM,oBAAK,IAAI,cACf,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,EACT,KAAC,MAAM,oBAAK,IAAI,IAAE,IAAI,EAAC,OAAO,YAC7B,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,IACJ,EACN,MAAC,GAAG,IAAC,GAAG,QAAC,KAAK,EAAC,QAAQ,aACtB,KAAC,MAAM,oBAAK,IAAI,IAAE,QAAQ,EAAC,SAAS,yBAE3B,EACT,KAAC,MAAM,oBAAK,IAAI,IAAE,QAAQ,EAAC,SAAS,yBAE3B,EACT,KAAC,MAAM,oBAAK,IAAI,IAAE,QAAQ,EAAC,OAAO,uBAEzB,EACT,KAAC,MAAM,oBAAK,IAAI,IAAE,QAAQ,EAAC,OAAO,uBAEzB,EACT,KAAC,MAAM,oBAAK,IAAI,IAAE,QAAQ,EAAC,SAAS,EAAC,SAAS,EAAC,gBAAgB,0BAEtD,IACJ,IACD,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,SAAS,WAAW,CAAC,EAAE,QAAQ,EAAyC;IACvE,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,GAAG,mBACX,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,uBAAiB,EAC3C,MAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,aACzB,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,YAEnB,EACT,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,+BAE3B,EACT,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,sBAE/B,EACT,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,SAAS,YACzC,KAAC,MAAM,CAAC,IAAI,IACX,MAAM,EAAE,KAAC,MAAM,IAAC,QAAQ,EAAC,2BAA2B,EAAC,IAAI,EAAC,QAAQ,GAAG,GACpE,GACM,EACT,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,YACzB,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACnB,EACT,KAAC,MAAM,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,YACvC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACnB,IACJ,CACN,CAAC;AACH,CAAC;AACD,MAAM,CAAC,MAAM,UAAU,GAAU;IAChC,MAAM;QACL,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,GAAG,mBACX,KAAC,GAAG,IAAC,GAAG,QAAC,OAAO,EAAC,SAAS,YACxB,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3D,KAAC,WAAW,IAEX,QAAQ,EAAE,QAAmC,IADxC,QAAQ,CAEZ,CACF,CAAC,GACG,EACN,KAAC,GAAG,IAAC,GAAG,QAAC,OAAO,QAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,eAAe,YAC1D,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3D,KAAC,WAAW,IAEX,QAAQ,EAAE,QAAmC,IADxC,QAAQ,CAEZ,CACF,CAAC,GACG,EACN,KAAC,GAAG,IAAC,GAAG,QAAC,OAAO,QAAC,OAAO,EAAC,SAAS,EAAC,SAAS,EAAC,iBAAiB,YAC5D,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAC3D,KAAC,WAAW,IAEX,QAAQ,EAAE,QAAmC,IADxC,QAAQ,CAEZ,CACF,CAAC,GACG,IACD,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,IAAI,EAAE;QACL,QAAQ,EAAE,CACT,8BACC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,cAEzB,CACH;KACD;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,IAAI,EAAE;QACL,QAAQ,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG;KACrC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACpC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CACN,KAAC,MAAM,oBAAK,IAAI,IAAE,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YACpD,OAAO,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,CAAC,CAAC,CAAC,SAAS,IACpC,CACT,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,OAAO,KAAC,MAAM,oBAAK,IAAI,IAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC;IAC3D,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IACjC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QAChB,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;QACpC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QACtC,OAAO,CACN,KAAC,MAAM,oBAAK,IAAI,IAAE,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,YAC7C,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,CACT,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC/B,MAAM,CAAC,IAAI;QACV,OAAO,CACN,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,aACvD,eACC,KAAK,EAAE;wBACN,OAAO,EAAE,MAAM;wBACf,aAAa,EAAE,KAAK;wBACpB,WAAW,EAAE,OAAO;wBACpB,WAAW,EAAE,CAAC;qBACd,aAED,KAAC,MAAM,oBAAK,IAAI,IAAE,IAAI,EAAC,OAAO,wBAErB,EACT,KAAC,MAAM,oBAAK,IAAI,IAAE,IAAI,EAAC,OAAO,YAC7B,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,IACJ,EACN,eACC,KAAK,EAAE;wBACN,OAAO,EAAE,MAAM;wBACf,aAAa,EAAE,KAAK;wBACpB,WAAW,EAAE,OAAO;wBACpB,WAAW,EAAE,CAAC;qBACd,aAED,KAAC,MAAM,oBAAK,IAAI,0BAAiB,EACjC,KAAC,MAAM,oBAAK,IAAI,cACf,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,IACnB,IACJ,IACD,CACN,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU;IACzC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,KAAC,eAAe,kBACf,WAAW,EAAC,eAAe,EAC3B,YAAY,EAAC,SAAS,EACtB,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,IACrC,IAAI,2BAGS,CAClB,CAAC;IACH,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IAClC,MAAM,CAAC,IAAI;QACV,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,QAAC,KAAK,EAAC,QAAQ,aACtB,KAAC,MAAM,oBAAK,IAAI,cACf,4BAAG,IAAI,CAAC,QAAQ,GAAI,IACZ,EACT,KAAC,MAAM,oBAAK,IAAI,cACf,8BACC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,EAC1B,IAAI,CAAC,QAAQ,IACZ,IACK,EACT,KAAC,MAAM,cACN,4BACC,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG,GACzB,GACK,IACJ,CACN,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/button/ConfirmedButton.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from 'react';
+import { Dialog, DialogActions, DialogClose, DialogContent, DialogTitle, DialogTrigger, } from '../dialog/index.js';
+import { P } from '../typography/index.js';
+import { Button } from './Button.js';
+export function ConfirmedButton(_a) {
+    var { confirmText, confirmTitle = 'Are you sure?', confirmAction = 'OK', cancelAction = 'Nevermind', confirmColor = 'primary', onConfirm, skip } = _a, rest = __rest(_a, ["confirmText", "confirmTitle", "confirmAction", "cancelAction", "confirmColor", "onConfirm", "skip"]);
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const confirm = useCallback(async () => {
+        setLoading(true);
+        try {
+            await onConfirm();
+            setOpen(false);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [onConfirm]);
+    if (skip) {
+        return (_jsx(Button, Object.assign({}, rest, { onClick: () => {
+                onConfirm();
+            } })));
+    }
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, Object.assign({ render: _jsx(Button, {}) }, rest)), _jsxs(DialogContent, { children: [_jsx(DialogTitle, { children: confirmTitle }), _jsx(P, { children: confirmText }), _jsxs(DialogActions, { children: [_jsx(DialogClose, { render: _jsx(Button, { emphasis: "default" }), children: cancelAction }), _jsx(Button, { loading: loading, onClick: confirm, emphasis: "primary", color: confirmColor, children: confirmAction })] })] })] }));
+}
+//# sourceMappingURL=ConfirmedButton.js.map

package/dist/components/button/ConfirmedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmedButton.js","sourceRoot":"","sources":["../../../src/components/button/ConfirmedButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EACN,MAAM,EACN,aAAa,EACb,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,GACb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,CAAC,EAAE,MAAM,wBAAwB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAe,MAAM,aAAa,CAAC;AAYlD,MAAM,UAAU,eAAe,CAAC,EAST;QATS,EAC/B,WAAW,EACX,YAAY,GAAG,eAAe,EAC9B,aAAa,GAAG,IAAI,EACpB,YAAY,GAAG,WAAW,EAC1B,YAAY,GAAG,SAAS,EACxB,SAAS,EACT,IAAI,OAEkB,EADnB,IAAI,cARwB,qGAS/B,CADO;IAEP,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QACtC,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,IAAI,CAAC;YACJ,MAAM,SAAS,EAAE,CAAC;YAClB,OAAO,CAAC,KAAK,CAAC,CAAC;QAChB,CAAC;gBAAS,CAAC;YACV,UAAU,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACF,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAI,IAAI,EAAE,CAAC;QACV,OAAO,CACN,KAAC,MAAM,oBACF,IAAI,IACR,OAAO,EAAE,GAAG,EAAE;gBACb,SAAS,EAAE,CAAC;YACb,CAAC,IACA,CACF,CAAC;IACH,CAAC;IAED,OAAO,CACN,MAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACxC,KAAC,aAAa,kBAAC,MAAM,EAAE,KAAC,MAAM,KAAG,IAAM,IAAI,EAAI,EAC/C,MAAC,aAAa,eACb,KAAC,WAAW,cAAE,YAAY,GAAe,EACzC,KAAC,CAAC,cAAE,WAAW,GAAK,EACpB,MAAC,aAAa,eACb,KAAC,WAAW,IAAC,MAAM,EAAE,KAAC,MAAM,IAAC,QAAQ,EAAC,SAAS,GAAG,YAChD,YAAY,GACA,EACd,KAAC,MAAM,IACN,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE,YAAY,YAElB,aAAa,GACN,IACM,IACD,IACR,CACT,CAAC;AACH,CAAC"}

package/dist/components/button/classes.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonProps } from './Button.jsx';
+export declare function getButtonClassName({ emphasis, size, toggleable, disableIconMode, }: {
+    emphasis?: ButtonProps['emphasis'];
+    size?: ButtonProps['size'];
+    toggleable?: boolean;
+    disableIconMode?: boolean;
+}): string;

package/dist/components/button/classes.js

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+export function getButtonClassName({ emphasis = 'default', size = 'default', toggleable, disableIconMode, }) {
+    if (emphasis === 'unstyled') {
+        return clsx('layer-components:(m-0 appearance-none p-0 bg-transparent border-none)', 'layer-components:(cursor-pointer)', 'layer-components:focus:outline-none');
+    }
+    return clsx('layer-components:(select-none fw-[bold] leading-[1] font-inherit)', 'layer-components:(b-fg b border-solid)', 'layer-components:(cursor-pointer)', 'layer-components:(flex flex-row items-center gap-sm)', 'layer-components:(relative overflow-visible whitespace-nowrap)', 'layer-components:(transition-all duration-200)', 'layer-components:(shadow-sm ring-bg)', 'layer-components:color-contrast', 'layer-components:text-secondary', 'layer-components:(px-action py-action rd-[9999px])', {
+        '@mode-dense': size === 'small',
+        '@mode-density-reset': size === 'default',
+        'layer-variants:(border-0 p-0 shadow-none)': size === 'wrapper',
+    }, emphasis === 'ghost' && 'layer-variants:(shadow-none border-transparent)', {
+        'layer-components:bg-main': emphasis === 'primary',
+        'layer-components:(color-main-ink bg-main-light bg-desaturate-2)': emphasis === 'light',
+        'layer-components:bg-neutral-paper layer-variants:focus-visible:bg-neutral-paper': emphasis === 'default',
+        'layer-components:(color-main-ink bg-transparent aria-[pressed]:bg-main-wash)': emphasis === 'ghost',
+    }, {
+        'layer-components:(min-h-[30px])': size === 'small',
+        'layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 rd-lg text-ambient)': size === 'default' && !disableIconMode,
+        'layer-components:[&[data-has-icon=true][data-has-label=false]]:min-h-touch-small layer-components:[&[data-has-icon=true][data-has-label=false]]:-m-y-2xs layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-sm rd-lg text-ambient)': size === 'small' && !disableIconMode,
+    }, !disableIconMode &&
+        'layer-components:[&[data-has-icon=true][data-has-label=false]:not([aria-pressed])]:(aspect-1 items-center justify-center)', 'layer-components:hover:(bg-main bg-lighten-2 ring-bg ring-[4px])', 'layer-components:active:(bg-darken-1 ring-bg ring-[8px])', 'focus-visible:(ring-neutral-ink ring-[4px] ring-offset)', 'layer-components:disabled:(cursor-default opacity-50 shadow-none ring-none)', 'layer-components:[&[data-disabled=true]]:(cursor-default opacity-50 shadow-none)', {
+        'layer-variants:[&[aria-pressed=false]]:[&:not(:hover)]:bg-transparent': toggleable,
+    }, 'self-center', `size-${size !== null && size !== void 0 ? size : 'default'}`);
+}
+//# sourceMappingURL=classes.js.map

package/dist/components/button/classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"classes.js","sourceRoot":"","sources":["../../../src/components/button/classes.tsx"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,MAAM,UAAU,kBAAkB,CAAC,EAClC,QAAQ,GAAG,SAAS,EACpB,IAAI,GAAG,SAAS,EAChB,UAAU,EACV,eAAe,GAMf;IACA,IAAI,QAAQ,KAAK,UAAU,EAAE,CAAC;QAC7B,OAAO,IAAI,CACV,uEAAuE,EACvE,mCAAmC,EACnC,qCAAqC,CACrC,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CACV,mEAAmE,EACnE,wCAAwC,EACxC,mCAAmC,EACnC,sDAAsD,EACtD,gEAAgE,EAChE,gDAAgD,EAChD,sCAAsC,EACtC,iCAAiC,EACjC,iCAAiC,EACjC,oDAAoD,EAEpD;QACC,aAAa,EAAE,IAAI,KAAK,OAAO;QAC/B,qBAAqB,EAAE,IAAI,KAAK,SAAS;QACzC,2CAA2C,EAAE,IAAI,KAAK,SAAS;KAC/D,EAED,QAAQ,KAAK,OAAO,IAAI,iDAAiD,EAEzE;QACC,0BAA0B,EAAE,QAAQ,KAAK,SAAS;QAClD,iEAAiE,EAChE,QAAQ,KAAK,OAAO;QACrB,iFAAiF,EAChF,QAAQ,KAAK,SAAS;QACvB,8EAA8E,EAC7E,QAAQ,KAAK,OAAO;KACrB,EAED;QACC,iCAAiC,EAAE,IAAI,KAAK,OAAO;QACnD,4FAA4F,EAC3F,IAAI,KAAK,SAAS,IAAI,CAAC,eAAe;QACvC,mPAAmP,EAClP,IAAI,KAAK,OAAO,IAAI,CAAC,eAAe;KACrC,EACD,CAAC,eAAe;QACf,2HAA2H,EAE5H,kEAAkE,EAClE,0DAA0D,EAC1D,yDAAyD,EAEzD,6EAA6E,EAC7E,kFAAkF,EAElF;QACC,uEAAuE,EACtE,UAAU;KACX,EAED,aAAa,EAEb,QAAQ,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,EAAE,CAC3B,CAAC;AACH,CAAC"}

package/dist/components/button/index.js

@@ -0,0 +1,4 @@
+export * from './Button.js';
+export * from './ConfirmedButton.js';
+export * from './classes.js';
+//# sourceMappingURL=index.js.map

package/dist/components/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC"}

package/dist/components/camera/Camera.d.ts

@@ -0,0 +1,30 @@
+import { ButtonProps as BaseButtonProps } from '@base-ui/react/button';
+import { MouseEvent, ReactNode, Ref } from 'react';
+import { ButtonProps } from '../button/index.js';
+export interface CameraRootProps {
+    className?: string;
+    style?: React.CSSProperties;
+    onCapture?: (data: File) => void;
+    children?: ReactNode;
+    format?: 'image/png' | 'image/jpeg';
+    facingMode?: 'user' | 'environment';
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function CameraRoot({ className, onCapture, children, facingMode, format, ref, ...rest }: CameraRootProps): import("react/jsx-runtime").JSX.Element;
+export type CameraShutterButtonProps = BaseButtonProps & {
+    className?: string;
+    onClick?: (ev: MouseEvent<HTMLButtonElement>) => void;
+    ref?: Ref<HTMLButtonElement>;
+};
+export declare function CameraShutterButton({ onClick, ref, ...rest }: CameraShutterButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface CameraDeviceSelectorProps {
+    className?: string;
+}
+export declare const CameraDeviceSelector: ({ className, ...props }: CameraDeviceSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CameraFullscreenButton: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Camera: ((props: CameraRootProps) => import("react/jsx-runtime").JSX.Element) & {
+    Root: typeof CameraRoot;
+    ShutterButton: typeof CameraShutterButton;
+    DeviceSelector: ({ className, ...props }: CameraDeviceSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+    FullscreenButton: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/components/camera/Camera.js

@@ -0,0 +1,190 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as BaseButton, } from '@base-ui/react/button';
+import { clsx } from 'clsx';
+import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+import { withClassName } from '../../hooks.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
+import { Select, SelectContent, SelectItem } from '../select/index.js';
+import cls from './Camera.module.css';
+const CameraContext = createContext({
+    triggerCapture: () => { },
+    selectedDeviceId: 'default',
+    selectDeviceId: () => { },
+    devices: [],
+    fullscreen: false,
+    setFullscreen: () => { },
+});
+export function CameraRoot(_a) {
+    var { className, onCapture, children, facingMode, format = 'image/png', ref } = _a, rest = __rest(_a, ["className", "onCapture", "children", "facingMode", "format", "ref"]);
+    const videoRef = useRef(null);
+    const [devices, setDevices] = useState([]);
+    const [stream, setStream] = useState();
+    useEffect(() => {
+        var _a;
+        (_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.enumerateDevices().then((devices) => {
+            setDevices(devices.filter((device) => device.kind === 'videoinput'));
+        });
+    }, [!!stream]);
+    const [selectedDeviceId, setSelectedDeviceId] = useState();
+    const cleanupRef = useRef(undefined);
+    useEffect(() => {
+        const init = () => {
+            var _a, _b;
+            (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
+            (_b = navigator.mediaDevices) === null || _b === void 0 ? void 0 : _b.getUserMedia({
+                video: {
+                    deviceId: selectedDeviceId || undefined,
+                    facingMode,
+                },
+            }).then((s) => {
+                setStream(s);
+                cleanupRef.current = () => s.getTracks().forEach((track) => track.stop());
+            });
+        };
+        init();
+        // reconnect if browser was backgrounded
+        const reconnect = () => {
+            if ((stream === null || stream === void 0 ? void 0 : stream.active) || document.visibilityState !== 'visible') {
+                return;
+            }
+            init();
+        };
+        document.addEventListener('visibilitychange', reconnect);
+        return () => {
+            var _a;
+            document.removeEventListener('visibilitychange', reconnect);
+            (_a = cleanupRef.current) === null || _a === void 0 ? void 0 : _a.call(cleanupRef);
+        };
+    }, [selectedDeviceId, facingMode]);
+    useEffect(() => {
+        const video = videoRef.current;
+        if (video && stream) {
+            video.srcObject = stream;
+            return () => {
+                video.srcObject = null;
+            };
+        }
+    }, [stream]);
+    const [capture, setCapture] = useState();
+    useEffect(() => {
+        if (typeof window !== 'undefined' && 'ImageCapture' in window) {
+            const videoTrack = stream === null || stream === void 0 ? void 0 : stream.getVideoTracks()[0];
+            if (videoTrack) {
+                const capturer = new ImageCapture(videoTrack);
+                setCapture(capturer);
+                capturer.getPhotoCapabilities().then((capabilities) => {
+                    console.log('ImageCapture capabilities:', capabilities);
+                });
+            }
+        }
+    }, [stream]);
+    const triggerCapture = () => {
+        var _a;
+        if (capture) {
+            capture.takePhoto().then((blob) => {
+                const file = new File([blob], `image.${format.split('/')[1]}`, {
+                    type: format,
+                });
+                onCapture === null || onCapture === void 0 ? void 0 : onCapture(file);
+            });
+        }
+        else {
+            // ImageCapture not supported, fallback to
+            // canvas capture
+            const video = videoRef.current;
+            if (video) {
+                const canvas = document.createElement('canvas');
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+                (_a = canvas.getContext('2d')) === null || _a === void 0 ? void 0 : _a.drawImage(video, 0, 0);
+                const data = canvas.toDataURL(format);
+                const file = dataURItoFile(data);
+                onCapture === null || onCapture === void 0 ? void 0 : onCapture(file);
+            }
+        }
+    };
+    const [fullscreen, setFullscreen] = useState(false);
+    return (_jsx(CameraContext.Provider, { value: {
+            devices,
+            triggerCapture,
+            selectedDeviceId,
+            selectDeviceId: setSelectedDeviceId,
+            setFullscreen,
+            fullscreen,
+        }, children: _jsxs(Box, Object.assign({ surface: "ambient", rounded: "md", overflow: "hidden", className: clsx('@mode-dark', cls.root, fullscreen && cls.fullscreen, className) }, rest, { ref: ref, children: [_jsx("video", { ref: videoRef, className: cls.video, autoPlay: true, muted: true, playsInline: true }), children] })) }));
+}
+export function CameraShutterButton(_a) {
+    var { onClick, ref } = _a, rest = __rest(_a, ["onClick", "ref"]);
+    const { triggerCapture } = useContext(CameraContext);
+    return (_jsx(StyledShutterButton, Object.assign({ ref: ref, "aria-label": 'Capture photo', onClick: (ev) => {
+            triggerCapture();
+            onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+        } }, rest)));
+}
+const StyledShutterButton = withClassName(BaseButton, '@mode-light', cls.shutterButton);
+export const CameraDeviceSelector = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { devices, selectDeviceId, selectedDeviceId } = useContext(CameraContext);
+    const swapCamera = () => {
+        if (selectedDeviceId) {
+            const index = devices.findIndex((device) => device.deviceId === selectedDeviceId);
+            if (index === -1) {
+                return;
+            }
+            selectDeviceId(devices[(index + 1) % devices.length].deviceId);
+        }
+        else {
+            selectDeviceId(devices[0].deviceId);
+        }
+    };
+    if (!devices.length || devices.length === 1)
+        return null;
+    if (devices.length === 2) {
+        return (_jsx(Button, Object.assign({ emphasis: "ghost", className: clsx(cls.swapButton, className), onClick: swapCamera }, props, { children: _jsx(Icon, { name: "refresh" }) })));
+    }
+    return (_jsxs(Select, Object.assign({ value: selectedDeviceId || 'default', onValueChange: selectDeviceId }, props, { children: [_jsx(Select.Trigger, { render: _jsx(Button, { emphasis: "ghost", className: clsx(cls.swapButton, className), children: _jsx(Icon, { name: "refresh" }) }) }), _jsx(SelectContent, { children: devices.map((device) => (_jsx(SelectItem, { value: device.deviceId, children: device.label }, device.deviceId))) })] })));
+};
+export const CameraFullscreenButton = (props) => {
+    const { setFullscreen, fullscreen } = useContext(CameraContext);
+    return (_jsx(Button, Object.assign({}, props, { emphasis: "ghost", className: clsx(cls.fullscreenButton, props.className), onClick: () => setFullscreen(!fullscreen), children: _jsx(Icon, { name: fullscreen ? 'x' : 'maximize' }) })));
+};
+const CameraBase = (props) => {
+    return (_jsxs(CameraRoot, Object.assign({}, props, { children: [_jsx(CameraShutterButton, {}), _jsx(CameraDeviceSelector, {}), _jsx(CameraFullscreenButton, {})] })));
+};
+export const Camera = Object.assign(CameraBase, {
+    Root: CameraRoot,
+    ShutterButton: CameraShutterButton,
+    DeviceSelector: CameraDeviceSelector,
+    FullscreenButton: CameraFullscreenButton,
+});
+function dataURItoFile(dataURI) {
+    // convert base64/URLEncoded data component to raw binary data held in a string
+    let byteString;
+    if (dataURI.split(',')[0].indexOf('base64') >= 0)
+        byteString = atob(dataURI.split(',')[1]);
+    else
+        byteString = unescape(dataURI.split(',')[1]);
+    // separate out the mime component
+    const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+    // write the bytes of the string to a typed array
+    const ia = new Uint8Array(byteString.length);
+    for (let i = 0; i < byteString.length; i++) {
+        ia[i] = byteString.charCodeAt(i);
+    }
+    const fileExt = mimeString.split('/')[1];
+    return new File([ia], `image.${fileExt}`, { type: mimeString });
+}
+//# sourceMappingURL=Camera.js.map

package/dist/components/camera/Camera.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../../src/components/camera/Camera.tsx"],"names":[],"mappings":"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"}

package/dist/components/camera/Camera.module.css

@@ -0,0 +1,65 @@
+.fullscreen {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	border-radius: 0;
+}
+
+.root {
+	min-width: --fn-literal(48px);
+	min-height: --fn-literal(48px);
+}
+
+.video {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.shutterButton {
+	position: absolute;
+	bottom: var(--m-spacing-md);
+	left: 50%;
+	width: calc(48px / var(--m-global-spacing-density));
+	height: calc(48px / var(--m-global-spacing-density));
+	cursor: pointer;
+	transform: translateX(-50%);
+	opacity: 80%;
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-ring-value: --fn-ring(var(--m-action-secondary-bg), 2px);
+	@apply --mx-bg(var(--m-action-secondary-bg));
+	@apply --mx-fg(color-contrast(var(--mx-bg-ref)));
+	@apply --mx-borderColor(var(--mx-fg-ref));
+	border-width: var(--m-lineWidth);
+	border-radius: var(--m-action-radius);
+
+	&:hover {
+		opacity: 100%;
+		@apply --mx-bg-heavier(2);
+	}
+
+	&:focus {
+		outline: none;
+		opacity: 100%;
+	}
+	&:focus-visible {
+		@apply --mx-bg-lighter(1);
+		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 4px);
+	}
+}
+
+.swapButton {
+	position: absolute;
+	bottom: var(--m-spacing-xs);
+	left: var(--m-spacing-xs);
+}
+
+.fullscreenButton {
+	position: absolute;
+	top: var(--m-spacing-xs);
+	right: var(--m-spacing-xs);
+}

package/dist/components/camera/Camera.stories.d.ts

@@ -0,0 +1,22 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { Camera } from './Camera.js';
+declare const meta: {
+    title: string;
+    component: ((props: import("./Camera.js").CameraRootProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: typeof import("./Camera.js").CameraRoot;
+        ShutterButton: typeof import("./Camera.js").CameraShutterButton;
+        DeviceSelector: ({ className, ...props }: import("./Camera.js").CameraDeviceSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+        FullscreenButton: (props: import("../index.js").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof Camera>;
+export declare const Default: Story;
+export declare const BackCamera: Story;

package/dist/components/camera/Camera.stories.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Camera } from './Camera.js';
+const meta = {
+    title: 'Components/Camera',
+    component: Camera,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+    args: {},
+};
+export default meta;
+export const Default = {
+    render() {
+        return _jsx(CameraDemo, {});
+    },
+};
+export const BackCamera = {
+    render() {
+        return _jsx(CameraDemo, { facingMode: "environment" });
+    },
+};
+function CameraDemo({ facingMode }) {
+    const [latest, setLatest] = useState();
+    const dataUri = useMemo(() => (latest ? URL.createObjectURL(latest) : undefined), [latest]);
+    return (_jsxs("div", { children: [_jsx(Camera, { facingMode: facingMode, onCapture: setLatest, style: { width: 256, height: 256 } }), latest && _jsx("img", { src: dataUri, style: { width: '100%' } })] }));
+}
+//# sourceMappingURL=Camera.stories.js.map

package/dist/components/camera/Camera.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Camera.stories.js","sourceRoot":"","sources":["../../../src/components/camera/Camera.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;IACD,IAAI,EAAE,EAAE;CACsB,CAAC;AAEhC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,OAAO,KAAC,UAAU,KAAG,CAAC;IACvB,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAChC,MAAM;QACL,OAAO,KAAC,UAAU,IAAC,UAAU,EAAC,aAAa,GAAG,CAAC;IAChD,CAAC;CACD,CAAC;AAEF,SAAS,UAAU,CAAC,EAAE,UAAU,EAA2C;IAC1E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAAoB,CAAC;IACzD,MAAM,OAAO,GAAG,OAAO,CACtB,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EACxD,CAAC,MAAM,CAAC,CACR,CAAC;IAEF,OAAO,CACN,0BACC,KAAC,MAAM,IACN,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GACjC,EACD,MAAM,IAAI,cAAK,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,IACrD,CACN,CAAC;AACH,CAAC"}

package/dist/components/camera/index.js

@@ -0,0 +1,2 @@
+export * from './Camera.js';
+//# sourceMappingURL=index.js.map

package/dist/components/camera/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/camera/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/dist/components/card/Card.d.ts

@@ -0,0 +1,47 @@
+import { UseRenderRenderProp } from '@base-ui/react/use-render';
+import { CSSProperties, HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
+import { MasonryProps } from '../masonry/masonry.js';
+export declare const CardRoot: import("react").FunctionComponent<import("../box/Box.js").BoxProps>;
+export declare function CardMain({ className, compact, nonInteractive, ref, style, children, visuallyDisabled, visuallyFocused, render, ...rest }: {
+    render?: UseRenderRenderProp<{
+        visuallyFocused?: boolean;
+        visuallyDisabled?: boolean;
+        interactive?: boolean;
+        compact?: boolean;
+    }>;
+    className?: string;
+    onClick?: (ev: MouseEvent) => void;
+    children?: ReactNode;
+    compact?: boolean;
+    /** forces non-interactive version */
+    nonInteractive?: boolean;
+    visuallyFocused?: boolean;
+    visuallyDisabled?: boolean;
+    style?: CSSProperties;
+    ref?: Ref<any>;
+}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const CardTitle: import("react").FunctionComponent<import("../box/Box.js").BoxProps>;
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    unstyled?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function CardContent({ unstyled, ref, ...rest }: CardContentProps): import("react/jsx-runtime").JSX.Element;
+export declare const CardImage: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
+export declare const CardFooter: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CardActions: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const CardMenu: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const cardGridColumns: {
+    default: (size: number) => 2 | 1 | 3;
+    small: (size: number) => 2 | 1 | 4 | 3;
+};
+export declare const CardGrid: ({ children, className, columns, gap, }: MasonryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: import("react").FunctionComponent<import("../box/Box.js").BoxProps> & {
+    Main: typeof CardMain;
+    Title: import("react").FunctionComponent<import("../box/Box.js").BoxProps>;
+    Content: typeof CardContent;
+    Image: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
+    Footer: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    Actions: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    Menu: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    Grid: ({ children, className, columns, gap, }: MasonryProps) => import("react/jsx-runtime").JSX.Element;
+};