@firecms/ui 3.0.0-canary.155 → 3.0.0-canary.157

package/README.md

@@ -1,174 +1,84 @@
-<p align="center">
-    <img src="https://firecms.co/img/dark_mode.webp" alt="Intro video" style="max-width: 100%;"/>
-</p>
+## FireCMS UI
 
-<p align="center">
-  <a href="https://firecms.co">
-    <img src="https://firecms.co/img/logo_small.png" width="240px" alt="FireCMS logo" />
-  </a>
-</p>
 
-<h1 align="center">FireCMS</h1>
-<h3 align="center">Awesome Firebase/MongoDB-based headless CMS</h3>
-<p align="center"><a href="https://demo.firecms.co">Live demo</a></p>
+**FireCMS UI** is a high quality set of components that you can use to build your own custom views. You can
+use these components to build your own FireCMS views, or in any other React application. You just need to install
+`tailwindcss` and the `@firecms/ui` package.
 
-<br />
+### Why build this UI kit?
+FireCMS was using MUI until version 3.0. MUI provides ready to use components with intuitive APIs, but it also
+comes with a lot of complexity and overhead. We wanted to build a simpler and more flexible UI kit that could be used
+in any React project, not just in FireCMS.
+We also wanted to make it easy to transition from MUI to our new UI kit, so we kept the API as similar as possible.
+The result it a set of components that are easy to use, easy to customize, **much more performant** and with a smaller bundle size.
 
+The components are primarily built using **Radix UI** primitives and **tailwindcss**. This means that you can easily customize them
+using tailwindcss classes or override the styles using CSS.
 
-[![NPM](https://img.shields.io/npm/v/firecms.svg)](https://www.npmjs.com/package/firecms) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+See the full list of components in https://firecms.co/docs/components
 
-Designed by developers for developers, FireCMS is a headless CMS and admin panel
-that seamlessly integrates with **Firebase and Firestore** by default, but is
-also
-compatible with any backend.
 
-Effortlessly generate **CRUD views** based on your configuration. FireCMS is
-simple
-to set up for standard cases and easy to extend and customize for more specific
-needs.
+> All the components are exported from the `@firecms/ui` package. These are the same components used internally in **FireCMS**.
 
-Built to produce collection and form views that naturally align with the
-collection/document model, FireCMS covers a wide range of basic and advanced use
-cases. With extensibility in mind, it's easy to create your own views or modify
-existing ones.
 
-FireCMS does **not impose any data structure** restrictions, ensuring a smooth,
-out-of-the-box experience for any project.
+## Installation
 
-### Core technologies
+If you are using FireCMS, you don't need to install this package, as it is already included, and
+configured for you.
 
-FireCMS is based on this great technologies:
+To use the components in your own project, you need to install the `@firecms/ui` package:
 
-- Typescript
-- Tailwind CSS
-- Firebase SDK 10
-- React + React Router 6
+```bash
+yarn add @firecms/ui
+```
+or
+```bash
+npm install @firecms/ui
+```
 
-### Quickstart
+You also need to install `tailwindcss`:
 
-The easiest way to get going is to check our quickstart guide! You will just
-need to follow some quick steps:
+```bash
+yarn add tailwindcss @tailwindcss/typography
+```
 
-https://firecms.co/docs
+And initialize it in your project:
 
-### Demo
+```bash
+npx tailwindcss init
+```
 
-Check the demo with all the core functionalities.
+And add then add the fireCMS preset in your `tailwind.config.js`:
 
-https://demo.firecms.co
+```javascript
+import fireCMSConfig from "@firecms/ui/tailwind.config.js";
 
-> You can modify the data, but it gets periodically restored.
+export default {
+    presets: [fireCMSConfig],
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/firecms/src/**/*.{js,ts,jsx,tsx}",
+        "./node_modules/@firecms/**/src/**/*.{js,ts,jsx,tsx}"
+    ]
+};
+```
+(You might need to adjust the paths in the `content` array to match your project structure)
 
-### Changelog
+Finally, you need to define your primary and secondary colors in your `index.css` file:
 
-https://firecms.co/docs/changelog
+```css
+@import "@firecms/ui/index.css";
 
-## Features
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-FireCMS has been meticulously crafted to make it incredibly easy for developers
-to build a CMS/admin tool while offering an excellent data editing experience
-and a user-friendly interface for marketers and content managers.
+:root {
+    --fcms-primary: #0070F4;
+    --fcms-primary-dark: #0061e6;
+    --fcms-primary-bg: #0061e610;
+    --fcms-secondary: #FF5B79;
+}
+```
 
-### 🏓 Exceptional Spreadsheet View
-
-We've developed a highly efficient windowed **spreadsheet view** for
-collections, allowing inline editing for most common fields, as well as popup
-views for other cases and your custom field implementations.
-
-Featuring **real-time** support, FireCMS is perfect for apps that require
-constant updates. It also supports **text search** (through an external provider
-like Algolia, if using Firestore), **filtering and sorting**, and **exporting**
-data.
-
-### ✨ Robust Forms
-
-![fields](https://firecms.co/img/form_editing.webp)
-
-When editing an entity, FireCMS offers a nested system of side dialogs for
-navigating through **subcollections** and accessing custom views (such as custom
-forms or blog previews). This functionality can also be accessed
-programmatically using the `useSideEntityController` hook.
-
-FireCMS includes **over 20 built-in fields** with numerous customization and
-validation options. The components have been carefully designed for an
-outstanding user experience, including advanced features like **references** to
-other collections, **markdown**, and **array reordering**.
-
-For unsupported use cases, create your own **custom field** as a React
-component.
-
-FireCMS also supports **conditional fields** in forms, allowing you to define
-rules for active fields based on your logic.
-
-### 👮 Authentication, Permissions, and Role System
-
-Define which navigation views users can see and the operations (create, edit,
-delete) they can perform based on your role system. You can even configure this
-on a per-entity or collection level.
-
-By default, FireCMS supports all Firebase authorization mechanisms, but you can
-implement your own.
-
-### 🏹 Relational Support
-
-Define references to entities in other collections and benefit from the
-integrated reference fields and shortcuts.
-
-You can also define subcollections at the entity level for nesting data in a
-collection/document/collection model.
-
-### 🆒 Real-Time Data
-
-Every view in the CMS supports real-time data, making it suitable for displaying
-constantly updated information.
-
-Forms also support this feature, with any modified value in the database being
-updated in any open form view as long as it hasn't been touched by the user.
-This enables advanced cases where a Cloud Function is triggered after saving an
-entity, modifying some values, and requiring real-time updates.
-
-### 🗂️ File Storage
-
-FireCMS supports uploading files to Firebase Storage out of the box and provides
-specific fields for handling single and multiple file uploads, as well as
-reordering.
-
-You can replace the Firebase Storage implementation with your own.
-
-## Included example
-
-You can access the code for the demo project under
-[`example`](https://github.com/FireCMSco/firecms/tree/master/example). It includes
-every feature provided by this CMS.
-
-Keep in mind you need to update the dependencies in that project if you want to
-use it as it is, without linking it to the library source code. More details in
-its README
-
-## Contact and support
-
-If you need general support, you can open a GitHub issue.
-
-Do you need consulting setting up your Firestore-based CMS in no time? We are
-happy to help!
-`hello@firecms.co`
-
-## Development
-
-If you would like to make changes to the source, feel free to submit a PR!
-
-When developing, the core library can be found under `lib`.
-There is an example project in the folder `example`.
-
-In order to run the project, you need to create a file
-called `firebase_config.ts`
-in `example/src`.
-
-That file needs to export a valid Firebase config, that you can get
-from your Firebase console when creating a webapp for your project.
-
-Then simply run `yarn` and `yarn dev`
-
-## License
-
-MIT © [FireCMS](https://github.com/FireCMSco)

package/dist/components/Alert.js

@@ -0,0 +1,96 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+import { cls } from "../util/cls.js";
+const getSizeClasses = (size) => {
+  switch (size) {
+    case "small":
+      return "px-4 py-1";
+    case "large":
+      return "px-4 py-4";
+    case "medium":
+    default:
+      return "px-4 py-2";
+  }
+};
+const getColorClasses = (severity) => {
+  switch (severity) {
+    case "error":
+      return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900";
+    case "warning":
+      return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900";
+    case "info":
+      return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
+    case "success":
+      return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
+    case "base":
+    default:
+      return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900";
+  }
+};
+const Alert = (t0) => {
+  const $ = c(16);
+  const {
+    children,
+    onDismiss,
+    color: t1,
+    size: t2,
+    action,
+    className,
+    style
+  } = t0;
+  const color = t1 === void 0 ? "info" : t1;
+  const size = t2 === void 0 ? "medium" : t2;
+  let t3;
+  let t4;
+  if ($[0] !== className || $[1] !== color || $[2] !== size || $[3] !== style) {
+    const classes = getColorClasses(color);
+    t3 = style;
+    t4 = cls(getSizeClasses(size), "w-full", "font-medium", "rounded-md flex items-center gap-2", classes, className);
+    $[0] = className;
+    $[1] = color;
+    $[2] = size;
+    $[3] = style;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t3 = $[4];
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== children) {
+    t5 = /* @__PURE__ */ jsx("div", { className: "flex-grow", children });
+    $[6] = children;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== onDismiss) {
+    t6 = onDismiss && /* @__PURE__ */ jsx("button", { className: "text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400", onClick: onDismiss, children: "×" });
+    $[8] = onDismiss;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== action || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
+    t7 = /* @__PURE__ */ jsxs("div", { style: t3, className: t4, children: [
+      t5,
+      t6,
+      action
+    ] });
+    $[10] = action;
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  return t7;
+};
+export {
+  Alert
+};
+//# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../src/components/Alert.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cls } from \"../util\";\n\nexport interface AlertProps {\n    children: React.ReactNode;\n    onDismiss?: () => void;\n    color?: \"error\" | \"warning\" | \"info\" | \"success\" | \"base\";\n    size?: \"small\" | \"medium\" | \"large\";\n    action?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst getSizeClasses = (size: \"small\" | \"medium\" | \"large\") => {\n    switch (size) {\n        case \"small\":\n            return \"px-4 py-1\";\n        case \"large\":\n            return \"px-4 py-4\";\n        case \"medium\":\n        default:\n            return \"px-4 py-2\";\n    }\n}\nconst getColorClasses = (severity: string) => {\n    switch (severity) {\n        case \"error\":\n            return \"bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900\";\n        case \"warning\":\n            return \"bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900\";\n        case \"info\":\n            return \"bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900\";\n        case \"success\":\n            return \"bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900\";\n        case \"base\":\n        default:\n            return \"bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900\";\n    }\n};\n\nexport const Alert: React.FC<AlertProps> = ({\n                                                children,\n                                                onDismiss,\n                                                color = \"info\",\n                                                size = \"medium\",\n                                                action,\n                                                className,\n                                                style\n                                            }) => {\n    const classes = getColorClasses(color);\n\n    return (\n        <div\n            style={style}\n            className={cls(\n                getSizeClasses(size),\n                \"w-full\",\n                \"font-medium\",\n                \"rounded-md flex items-center gap-2\",\n                classes,\n                className)}>\n            <div className={\"flex-grow\"}>{children}</div>\n            {onDismiss && (\n                <button className=\"text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400\"\n                        onClick={onDismiss}>\n                    &times;\n                </button>\n            )}\n            {action}\n        </div>\n    );\n};\n"],"names":["getSizeClasses","size","getColorClasses","severity","Alert","t0","$","_c","children","onDismiss","color","t1","t2","action","className","style","undefined","t3","t4","classes","cls","t5","t6","t7"],"mappings":";;;AAaA,MAAMA,iBAAiBA,CAACC,SAAuC;AAC3D,UAAQA,MAAI;AAAA,IACR,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AAAA,IACL;AACW,aAAA;AAAA,EAAA;AAEnB;AACA,MAAMC,kBAAkBA,CAACC,aAAqB;AAC1C,UAAQA,UAAQ;AAAA,IACZ,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AAAA,IACL;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAMC,QAA8BC,CAAA,OAAA;AAAAC,QAAAA,IAAAC,EAAA,EAAA;AAAC,QAAA;AAAA,IAAAC;AAAAA,IAAAC;AAAAA,IAAAC,OAAAC;AAAAA,IAAAV,MAAAW;AAAAA,IAAAC;AAAAA,IAAAC;AAAAA,IAAAC;AAAAA,EAAAA,IAAAV;AAGIK,QAAAA,QAAAC,OAAcK,SAAN,SAARL;AACAV,QAAAA,OAAAW,OAAeI,SAAR,WAAPJ;AAAeK,MAAAA;AAAAC,MAAAA;AAAA,MAAAZ,EAAA,CAAA,MAAAQ,aAAAR,EAAAI,CAAAA,MAAAA,SAAAJ,EAAAL,CAAAA,MAAAA,QAAAK,SAAAS,OAAA;AAK3DI,UAAAA,UAAgBjB,gBAAgBQ,KAAK;AAItBK,SAAAA;AACIK,SAAAA,IACPpB,eAAeC,IAAI,GACnB,UACA,eACA,sCACAkB,SACAL,SAAS;AAACR,WAAAQ;AAAAR,WAAAI;AAAAJ,WAAAL;AAAAK,WAAAS;AAAAT,WAAAW;AAAAX,WAAAY;AAAAA,EAAAA,OAAA;AAAAD,SAAAX,EAAA,CAAA;AAAAY,SAAAZ,EAAA,CAAA;AAAA,EAAA;AAAAe,MAAAA;AAAAf,MAAAA,SAAAE,UAAA;AACda,SAAA,oBAAA,OAAA,EAAgB,WAAA,aAAcb,UAAS;AAAMF,WAAAE;AAAAF,WAAAe;AAAAA,EAAAA,OAAA;AAAAA,SAAAf,EAAA,CAAA;AAAA,EAAA;AAAAgB,MAAAA;AAAAhB,MAAAA,SAAAG,WAAA;AAC5Ca,SAAAb,aAIY,oBAAA,UAAA,EAHS,WAAA,yHACDA,SAAQ,WAAG,UAE5B,IAAA,CAAA;AACHH,WAAAG;AAAAH,WAAAgB;AAAAA,EAAAA,OAAA;AAAAA,SAAAhB,EAAA,CAAA;AAAA,EAAA;AAAAiB,MAAAA;AAAA,MAAAjB,EAAAO,EAAAA,MAAAA,UAAAP,EAAA,EAAA,MAAAW,MAAAX,EAAAY,EAAAA,MAAAA,MAAAZ,EAAA,EAAA,MAAAe,MAAAf,UAAAgB,IAAA;AAfLC,SAAA,qBAAA,OAAA,EACWR,WACI,WAAAG,IAOXG,UAAAA;AAAAA,MAAAA;AAAAA,MACCC;AAAAA,MAMAT;AAAAA,IAAAA,GACL;AAAMP,YAAAO;AAAAP,YAAAW;AAAAX,YAAAY;AAAAZ,YAAAe;AAAAf,YAAAgB;AAAAhB,YAAAiB;AAAAA,EAAAA,OAAA;AAAAA,SAAAjB,EAAA,EAAA;AAAA,EAAA;AAjBNiB,SAAAA;AAiBM;"}

package/dist/components/Autocomplete.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+import React__default from "react";
+import { paperMixin } from "../styles.js";
+import { Collapse } from "./Collapse.js";
+import { cls } from "../util/cls.js";
+import { useOutsideAlerter } from "../hooks/useOutsideAlerter.js";
+const useAutoComplete = ({
+  ref
+}) => {
+  const [autoCompleteOpen, setAutoCompleteOpen] = React__default.useState(false);
+  const [inputFocused, setInputFocused] = React__default.useState(false);
+  React__default.useEffect(() => {
+    if (ref.current) {
+      ref.current.onfocus = () => {
+        setAutoCompleteOpen(true);
+        setInputFocused(true);
+      };
+      ref.current.onblur = () => {
+        setInputFocused(false);
+      };
+    }
+  }, [ref]);
+  return {
+    inputFocused,
+    autoCompleteOpen,
+    setAutoCompleteOpen
+  };
+};
+function Autocomplete(t0) {
+  const $ = c(13);
+  const {
+    children,
+    open,
+    setOpen
+  } = t0;
+  const autocompleteRef = React__default.useRef(null);
+  let t1;
+  if ($[0] !== setOpen) {
+    t1 = () => setOpen(false);
+    $[0] = setOpen;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  useOutsideAlerter(autocompleteRef, t1);
+  const t2 = open ? "shadow" : "";
+  let t3;
+  if ($[2] !== t2) {
+    t3 = cls("absolute top-full left-0 right-0 overflow-visible", t2, "my-2", "z-20", "w-full");
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const t4 = open ? paperMixin : "";
+  let t5;
+  if ($[4] !== t4) {
+    t5 = cls(t4, "bg-surface-accent-50 dark:bg-surface-accent-900 py-2");
+    $[4] = t4;
+    $[5] = t5;
+  } else {
+    t5 = $[5];
+  }
+  let t6;
+  if ($[6] !== children || $[7] !== t5) {
+    t6 = /* @__PURE__ */ jsx("div", { ref: autocompleteRef, className: t5, children });
+    $[6] = children;
+    $[7] = t5;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== open || $[10] !== t3 || $[11] !== t6) {
+    t7 = /* @__PURE__ */ jsx(Collapse, { in: open, duration: 50, className: t3, children: t6 });
+    $[9] = open;
+    $[10] = t3;
+    $[11] = t6;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  return t7;
+}
+function AutocompleteItem(t0) {
+  const $ = c(3);
+  const {
+    children,
+    onClick
+  } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== onClick) {
+    t1 = /* @__PURE__ */ jsx("div", { className: "flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", onClick, children });
+    $[0] = children;
+    $[1] = onClick;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+export {
+  Autocomplete,
+  AutocompleteItem,
+  useAutoComplete
+};
+//# sourceMappingURL=Autocomplete.js.map

package/dist/components/Autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.js","sources":["../../src/components/Autocomplete.tsx"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nimport { paperMixin } from \"../styles\";\nimport { Collapse } from \"./Collapse\";\nimport { cls } from \"../util\";\nimport { useOutsideAlerter } from \"../hooks\";\n\nexport type AutocompleteProps = {\n    children: React.ReactNode;\n    open: boolean;\n    setOpen: (open: boolean) => void;\n}\n\nexport const useAutoComplete = ({ ref }: {\n    ref: React.MutableRefObject<HTMLDivElement | null>;\n}) => {\n\n    const [autoCompleteOpen, setAutoCompleteOpen] = React.useState(false);\n    const [inputFocused, setInputFocused] = React.useState(false);\n\n    // if ref is not focused, close autocomplete\n    React.useEffect(() => {\n        if (ref.current) {\n            ref.current.onfocus = () => {\n                setAutoCompleteOpen(true);\n                setInputFocused(true);\n            }\n            ref.current.onblur = () => {\n                setInputFocused(false);\n            }\n        }\n    }, [ref]);\n\n    return {\n        inputFocused,\n        autoCompleteOpen,\n        setAutoCompleteOpen\n    };\n}\n\nexport function Autocomplete({\n                                 children,\n                                 open,\n                                 setOpen\n                             }: AutocompleteProps) {\n\n    const autocompleteRef = React.useRef<HTMLDivElement>(null);\n    useOutsideAlerter(autocompleteRef, () => setOpen(false));\n\n    return <Collapse\n        in={open}\n        duration={50}\n        className={cls(\n            \"absolute top-full left-0 right-0 overflow-visible\",\n            open ? \"shadow\" : \"\",\n            \"my-2\",\n            \"z-20\",\n            \"w-full\")}>\n        <div ref={autocompleteRef}\n             className={cls(\n                 open ? paperMixin : \"\",\n                 \"bg-surface-accent-50 dark:bg-surface-accent-900 py-2\"\n             )}>\n            {children}\n        </div>\n    </Collapse>;\n\n}\n\nexport type AutocompleteItemProps = {\n    children: React.ReactNode,\n    onClick?: () => void,\n};\n\nexport function AutocompleteItem({\n                                     children,\n                                     onClick\n                                 }: AutocompleteItemProps) {\n\n    return (\n        <div\n            className=\"flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800\"\n            onClick={onClick}>\n            {children}\n        </div>\n    )\n}\n"],"names":["useAutoComplete","ref","autoCompleteOpen","setAutoCompleteOpen","React","useState","inputFocused","setInputFocused","useEffect","current","onfocus","onblur","Autocomplete","t0","$","_c","children","open","setOpen","autocompleteRef","useRef","t1","useOutsideAlerter","t2","t3","cls","t4","paperMixin","t5","t6","t7","AutocompleteItem","onClick"],"mappings":";;;;;;;;AAcO,MAAMA,kBAAkBA,CAAC;AAAA,EAAEC;AAElC,MAAM;AAEF,QAAM,CAACC,kBAAkBC,mBAAmB,IAAIC,eAAMC,SAAS,KAAK;AACpE,QAAM,CAACC,cAAcC,eAAe,IAAIH,eAAMC,SAAS,KAAK;AAG5DD,iBAAMI,UAAU,MAAM;AAClB,QAAIP,IAAIQ,SAAS;AACTA,UAAAA,QAAQC,UAAU,MAAM;AACxBP,4BAAoB,IAAI;AACxBI,wBAAgB,IAAI;AAAA,MACxB;AACIE,UAAAA,QAAQE,SAAS,MAAM;AACvBJ,wBAAgB,KAAK;AAAA,MACzB;AAAA,IAAA;AAAA,EACJ,GACD,CAACN,GAAG,CAAC;AAED,SAAA;AAAA,IACHK;AAAAA,IACAJ;AAAAA,IACAC;AAAAA,EACJ;AACJ;AAEO,SAAAS,aAAAC,IAAA;AAAAC,QAAAA,IAAAC,EAAA,EAAA;AAAsB,QAAA;AAAA,IAAAC;AAAAA,IAAAC;AAAAA,IAAAC;AAAAA,EAAAA,IAAAL;AAMzBM,QAAAA,kBAAwBf,eAAAgB,WAAiC;AAAEC,MAAAA;AAAAP,MAAAA,SAAAI,SAAA;AACxBG,SAAAA,MAAMH,aAAa;AAACJ,WAAAI;AAAAJ,WAAAO;AAAAA,EAAAA,OAAA;AAAAA,SAAAP,EAAA,CAAA;AAAA,EAAA;AAAvDQ,oBAAkBH,iBAAiBE,EAAoB;AAO/CE,QAAAA,KAAAN,OAAO,WAAW;AAAEO,MAAAA;AAAAV,MAAAA,SAAAS,IAAA;AAFbC,SAAAC,IACP,qDACAF,IACA,QACA,QACA,QAAQ;AAACT,WAAAS;AAAAT,WAAAU;AAAAA,EAAAA,OAAA;AAAAA,SAAAV,EAAA,CAAA;AAAA,EAAA;AAGJY,QAAAA,KAAAT,OAAIU,aAAgB;AAAEC,MAAAA;AAAAd,MAAAA,SAAAY,IAAA;AADfD,SAAAA,IACPC,IACA,sDACJ;AAACZ,WAAAY;AAAAZ,WAAAc;AAAAA,EAAAA,OAAA;AAAAA,SAAAd,EAAA,CAAA;AAAA,EAAA;AAAAe,MAAAA;AAAA,MAAAf,EAAAE,CAAAA,MAAAA,YAAAF,SAAAc,IAAA;AAJNC,oCAAUV,EAAAA,KAAAA,iBACM,WAAAS,IAIJ,UACZ;AAAMd,WAAAE;AAAAF,WAAAc;AAAAd,WAAAe;AAAAA,EAAAA,OAAA;AAAAA,SAAAf,EAAA,CAAA;AAAA,EAAA;AAAAgB,MAAAA;AAAAhB,MAAAA,EAAAG,CAAAA,MAAAA,QAAAH,UAAAU,MAAAV,EAAA,EAAA,MAAAe,IAAA;AAfH,SAAA,oBAAC,YACAZ,UACM,UAAC,IACA,WAAAO,IAMXK,UAOJ,GAAA,CAAA;AAAWf,WAAAG;AAAAH,YAAAU;AAAAV,YAAAe;AAAAf,YAAAgB;AAAAA,EAAAA,OAAA;AAAAA,SAAAhB,EAAA,EAAA;AAAA,EAAA;AAhBJgB,SAAAA;AAgBI;AASR,SAAAC,iBAAAlB,IAAA;AAAAC,QAAAA,IAAAC,EAAA,CAAA;AAA0B,QAAA;AAAA,IAAAC;AAAAA,IAAAgB;AAAAA,EAAAA,IAAAnB;AAGwBQ,MAAAA;AAAA,MAAAP,EAAAE,CAAAA,MAAAA,YAAAF,SAAAkB,SAAA;AAGjDX,SAIM,oBAAA,OAAA,EAHQ,WAAA,4HACDW,SACD,UACZ;AAAMlB,WAAAE;AAAAF,WAAAkB;AAAAlB,WAAAO;AAAAA,EAAAA,OAAA;AAAAA,SAAAP,EAAA,CAAA;AAAA,EAAA;AAJNO,SAAAA;AAIM;"}

package/dist/components/Avatar.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+import React__default, { useState } from "react";
+import { cls } from "../util/cls.js";
+const AvatarInner = (t0, ref) => {
+  const $ = c(23);
+  let alt;
+  let children;
+  let className;
+  let outerClassName;
+  let props;
+  let src;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      src,
+      alt,
+      children,
+      className,
+      style,
+      outerClassName,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = alt;
+    $[2] = children;
+    $[3] = className;
+    $[4] = outerClassName;
+    $[5] = props;
+    $[6] = src;
+    $[7] = style;
+  } else {
+    alt = $[1];
+    children = $[2];
+    className = $[3];
+    outerClassName = $[4];
+    props = $[5];
+    src = $[6];
+    style = $[7];
+  }
+  const [isImageError, setIsImageError] = useState(false);
+  let t1;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
+      setIsImageError(true);
+    };
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  const handleImageError = t1;
+  let t2;
+  if ($[9] !== outerClassName) {
+    t2 = cls("rounded-full flex items-center justify-center overflow-hidden", "p-1 hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700 w-12 h-12 min-w-12 min-h-12", outerClassName);
+    $[9] = outerClassName;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== alt || $[12] !== children || $[13] !== className || $[14] !== isImageError || $[15] !== src) {
+    t3 = src && !isImageError ? /* @__PURE__ */ jsx("img", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "w-full h-full object-cover rounded-full", className), src, alt, onError: handleImageError }) : /* @__PURE__ */ jsx("span", { className: cls("bg-surface-accent-100 dark:bg-surface-accent-800", "flex items-center justify-center", "w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full", className), children });
+    $[11] = alt;
+    $[12] = children;
+    $[13] = className;
+    $[14] = isImageError;
+    $[15] = src;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  let t4;
+  if ($[17] !== props || $[18] !== ref || $[19] !== style || $[20] !== t2 || $[21] !== t3) {
+    t4 = /* @__PURE__ */ jsx("button", { ref, style, ...props, className: t2, children: t3 });
+    $[17] = props;
+    $[18] = ref;
+    $[19] = style;
+    $[20] = t2;
+    $[21] = t3;
+    $[22] = t4;
+  } else {
+    t4 = $[22];
+  }
+  return t4;
+};
+const Avatar = React__default.forwardRef(AvatarInner);
+export {
+  Avatar
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../src/components/Avatar.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState } from \"react\";\nimport { cls } from \"../util\";\n\nexport interface AvatarProps {\n    src?: string;\n    alt?: string;\n    children?: React.ReactNode;\n    className?: string;\n    outerClassName?: string;\n    style?: React.CSSProperties;\n}\n\nconst AvatarInner: React.ForwardRefRenderFunction<HTMLButtonElement, AvatarProps> = (\n    {\n        src,\n        alt,\n        children,\n        className,\n        style,\n        outerClassName,\n        ...props\n    },\n    ref\n) => {\n    const [isImageError, setIsImageError] = useState(false);\n\n    const handleImageError = () => {\n        setIsImageError(true);\n    };\n\n    return (\n        <button\n            ref={ref}\n            style={style}\n            {...props}\n            className={cls(\n                \"rounded-full flex items-center justify-center overflow-hidden\",\n                \"p-1 hover:bg-surface-accent-200 hover:dark:bg-surface-accent-700 w-12 h-12 min-w-12 min-h-12\",\n                outerClassName\n            )}\n        >\n            {src && !isImageError ? (\n                <img\n                    className={cls(\n                        \"bg-surface-accent-100 dark:bg-surface-accent-800\",\n                        \"w-full h-full object-cover rounded-full\",\n                        className\n                    )}\n                    src={src}\n                    alt={alt}\n                    onError={handleImageError}\n                />\n            ) : (\n                <span\n                    className={cls(\n                        \"bg-surface-accent-100 dark:bg-surface-accent-800\",\n                        \"flex items-center justify-center\",\n                        \"w-full h-full py-1.5 text-lg font-medium text-surface-accent-900 dark:text-white rounded-full\",\n                        className\n                    )}\n                >\n          {children}\n        </span>\n            )}\n        </button>\n    );\n};\n\nexport const Avatar = React.forwardRef(AvatarInner);\n"],"names":["AvatarInner","t0","ref","$","_c","alt","children","className","outerClassName","props","src","style","isImageError","setIsImageError","useState","t1","Symbol","for","handleImageError","t2","cls","t3","t4","Avatar","React","forwardRef"],"mappings":";;;;;AAaA,MAAMA,cAA8EA,CAAAC,IAAAC,QAAA;AAAAC,QAAAA,IAAAC,EAAA,EAAA;AAAAC,MAAAA;AAAAC,MAAAA;AAAAC,MAAAA;AAAAC,MAAAA;AAAAC,MAAAA;AAAAC,MAAAA;AAAAC,MAAAA;AAAAR,MAAAA,SAAAF,IAAA;AAChF,KAAA;AAAA,MAAAS;AAAAA,MAAAL;AAAAA,MAAAC;AAAAA,MAAAC;AAAAA,MAAAI;AAAAA,MAAAH;AAAAA,MAAA,GAAAC;AAAAA,IAAAA,IAAAR;AAQCE,WAAAF;AAAAE,WAAAE;AAAAF,WAAAG;AAAAH,WAAAI;AAAAJ,WAAAK;AAAAL,WAAAM;AAAAN,WAAAO;AAAAP,WAAAQ;AAAAA,EAAAA,OAAA;AAAAN,UAAAF,EAAA,CAAA;AAAAG,eAAAH,EAAA,CAAA;AAAAI,gBAAAJ,EAAA,CAAA;AAAAK,qBAAAL,EAAA,CAAA;AAAAM,YAAAN,EAAA,CAAA;AAAAO,UAAAP,EAAA,CAAA;AAAAQ,YAAAR,EAAA,CAAA;AAAA,EAAA;AAGD,QAAA,CAAAS,cAAAC,eAAA,IAAwCC,cAAc;AAAEC,MAAAA;AAAA,MAAAZ,EAAA,CAAA,MAAAa,OAAAC,IAAA,2BAAA,GAAA;AAE/BF,SAAAA,MAAA;AACrBF,0BAAoB;AAAA,IAAC;AACxBV,WAAAY;AAAAA,EAAAA,OAAA;AAAAA,SAAAZ,EAAA,CAAA;AAAA,EAAA;AAFD,QAAAe,mBAAyBH;AAEvBI,MAAAA;AAAAhB,MAAAA,SAAAK,gBAAA;AAOiBY,SAAAA,IACP,iEACA,gGACAZ,cACJ;AAACL,WAAAK;AAAAL,YAAAgB;AAAAA,EAAAA,OAAA;AAAAA,SAAAhB,EAAA,EAAA;AAAA,EAAA;AAAAkB,MAAAA;AAAA,MAAAlB,EAAAE,EAAAA,MAAAA,OAAAF,EAAA,EAAA,MAAAG,YAAAH,EAAAI,EAAAA,MAAAA,aAAAJ,EAAA,EAAA,MAAAS,gBAAAT,UAAAO,KAAA;AAEAA,SAAAA,OAAG,CAAKE,4CAEU,WAAAQ,IACP,oDACA,2CACAb,SACJ,GACKG,KACAL,KACIa,SAAAA,iBAAAA,CAAgB,IAG7B,oBAAA,QACe,EAAA,WAAAE,IACP,oDACA,oCACA,iGACAb,SACJ,GAEF,SACV,CAAA;AACKJ,YAAAE;AAAAF,YAAAG;AAAAH,YAAAI;AAAAJ,YAAAS;AAAAT,YAAAO;AAAAP,YAAAkB;AAAAA,EAAAA,OAAA;AAAAA,SAAAlB,EAAA,EAAA;AAAA,EAAA;AAAAmB,MAAAA;AAAA,MAAAnB,EAAAM,EAAAA,MAAAA,SAAAN,EAAA,EAAA,MAAAD,OAAAC,EAAAQ,EAAAA,MAAAA,SAAAR,EAAA,EAAA,MAAAgB,MAAAhB,UAAAkB,IAAA;AAhCL,SAAA,oBAAA,YACSnB,KACES,OAAK,GACRF,OACO,WAAAU,IAMVE,UAuBL,GAAA,CAAA;AAASlB,YAAAM;AAAAN,YAAAD;AAAAC,YAAAQ;AAAAR,YAAAgB;AAAAhB,YAAAkB;AAAAlB,YAAAmB;AAAAA,EAAAA,OAAA;AAAAA,SAAAnB,EAAA,EAAA;AAAA,EAAA;AAjCTmB,SAAAA;AAiCS;AAIJC,MAAAA,SAASC,eAAMC,WAAWzB,WAAW;"}

package/dist/components/Badge.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+const getColor = (color) => {
+  switch (color) {
+    case "primary":
+      return "bg-primary";
+    case "secondary":
+      return "bg-secondary";
+    case "error":
+      return "bg-red-500";
+    default:
+      return "bg-surface-accent-300 dark:bg-surface-accent-700";
+  }
+};
+const Badge = (t0) => {
+  const $ = c(5);
+  const {
+    color: t1,
+    invisible: t2,
+    children
+  } = t0;
+  const color = t1 === void 0 ? "primary" : t1;
+  const invisible = t2 === void 0 ? false : t2;
+  const t3 = `absolute top-0.5 right-0.5 transform translate-x-1/2 -translate-y-1/2 rounded-full
+        ${getColor(color)}
+        transition-all duration-200 ease-out
+        ${invisible ? "w-0 h-0" : "w-2 h-2"}`;
+  let t4;
+  if ($[0] !== t3) {
+    t4 = /* @__PURE__ */ jsx("span", { className: t3 });
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== children || $[3] !== t4) {
+    t5 = /* @__PURE__ */ jsxs("div", { className: "relative inline-block w-fit", children: [
+      children,
+      t4
+    ] });
+    $[2] = children;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  return t5;
+};
+export {
+  Badge
+};
+//# sourceMappingURL=Badge.js.map

package/dist/components/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../src/components/Badge.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type BadgeColor = \"primary\" | \"secondary\" | \"error\";\n\nexport interface BadgeProps {\n    color?: BadgeColor;\n    children: React.ReactNode;\n    invisible?: boolean;\n}\n\nconst getColor = (color: BadgeColor) => {\n    switch (color) {\n        case \"primary\":\n            return \"bg-primary\";\n        case \"secondary\":\n            return \"bg-secondary\";\n        case \"error\":\n            return \"bg-red-500\";\n        default:\n            return \"bg-surface-accent-300 dark:bg-surface-accent-700\";\n    }\n}\n\nexport const Badge: React.FC<BadgeProps> = ({\n                                                color = \"primary\",\n                                                invisible = false,\n                                                children\n                                            }) => {\n    return (\n        <div className=\"relative inline-block w-fit\">\n            {children}\n            <span\n                className={`absolute top-0.5 right-0.5 transform translate-x-1/2 -translate-y-1/2 rounded-full\n        ${getColor(color)}\n        transition-all duration-200 ease-out\n        ${invisible ? \"w-0 h-0\" : \"w-2 h-2\"}`}\n            />\n        </div>\n    );\n}\n"],"names":["getColor","color","Badge","t0","$","_c","t1","invisible","t2","children","undefined","t3","t4","t5"],"mappings":";;AAUA,MAAMA,WAAWA,CAACC,UAAsB;AACpC,UAAQA,OAAK;AAAA,IACT,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX,KAAK;AACM,aAAA;AAAA,IACX;AACW,aAAA;AAAA,EAAA;AAEnB;AAEO,MAAMC,QAA8BC,CAAA,OAAA;AAAAC,QAAAA,IAAAC,EAAA,CAAA;AAAC,QAAA;AAAA,IAAAJ,OAAAK;AAAAA,IAAAC,WAAAC;AAAAA,IAAAC;AAAAA,EAAAA,IAAAN;AACIF,QAAAA,QAAAK,OAAiBI,SAAT,YAARJ;AACAC,QAAAA,YAAAC,OAAiBE,iBAAjBF;AAOrB,QAAAG,KAAA;AAAA,UACjBX,SAASC,KAAK,CAAC;AAAA;AAAA,UAEfM,YAAY,YAAY,SAAS;AAAEK,MAAAA;AAAAR,MAAAA,SAAAO,IAAA;qCAHlB,EAAA,WAAAA,GAIb,CAAA;AAAAP,WAAAO;AAAAP,WAAAQ;AAAAA,EAAAA,OAAA;AAAAA,SAAAR,EAAA,CAAA;AAAA,EAAA;AAAAS,MAAAA;AAAA,MAAAT,EAAAK,CAAAA,MAAAA,YAAAL,SAAAQ,IAAA;AACA,SAAA,qBAAA,OARS,EAAA,WAAA,+BACH,UAAA;AAAA,MAAA;AAAA,MACRA;AAAAA,IAAAA,GAMJ;AAAMR,WAAAK;AAAAL,WAAAQ;AAAAR,WAAAS;AAAAA,EAAAA,OAAA;AAAAA,SAAAT,EAAA,CAAA;AAAA,EAAA;AARNS,SAAAA;AAQM;"}

package/dist/components/BooleanSwitch.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default from "react";
+import { cls } from "../util/cls.js";
+const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
+  value,
+  allowIndeterminate,
+  className,
+  onValueChange,
+  disabled = false,
+  size = "medium",
+  ...props
+}, ref) {
+  return /* @__PURE__ */ jsxs("button", { type: "button", ref, tabIndex: disabled ? -1 : void 0, onClick: disabled ? (e) => e.preventDefault() : (e_0) => {
+    e_0.preventDefault();
+    if (allowIndeterminate) {
+      if (value === null || value === void 0) onValueChange?.(true);
+      else if (value) onValueChange?.(false);
+      else onValueChange?.(null);
+    } else {
+      onValueChange?.(!value);
+    }
+  }, className: cls(size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]", "outline-none rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
+    allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", {
+      "w-[21px] h-[10px]": size === "medium" || size === "large",
+      "w-[19px] h-[8px]": size === "small",
+      "translate-x-[10px]": size === "medium" || size === "large",
+      "translate-x-[9px]": size === "small"
+    }) }, "knob"),
+    !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-300 dark:bg-surface-accent-700" : value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400", {
+      "w-[21px] h-[21px]": size === "medium" || size === "large",
+      "w-[19px] h-[19px]": size === "small",
+      [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
+      [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
+    }) }, "knob")
+  ] });
+});
+export {
+  BooleanSwitch
+};
+//# sourceMappingURL=BooleanSwitch.js.map