@factorialco/f0-react 1.180.1

package/README.md

@@ -0,0 +1,86 @@
+F0 represents a transformative reboot of the visual language for the Factorial
+platform. Its core mission is to enhance consistency and coherence across
+Factorial's user interface, while ensuring a quick, efficient, and delightful
+user and developer experience.
+
+## Why F0?
+
+As Factorial has evolved, it has expanded into a complex suite of features and
+functionalities, resulting in a fragmented user experience. Various sections of
+the platform display inconsistent visual styles and interactions.
+
+This fragmentation complicates maintenance and scalability of both our user
+experience and codebase. We often find ourselves dedicating excessive time to
+reinventing the wheel and resolving bugs and inconsistencies instead of
+enhancing our product, and our users are left with a confusing, disjointed
+experience.
+
+## Why Reboot Our Design System?
+
+Our existing design system, known as "Gamma," was established on informal
+constraints that have not withstood the test of time. Despite adding new
+components and styles, the underlying foundations have weakened to the point
+they have mostly become useless.
+
+After thorough evaluation, we've decided that a fresh start is essential. We
+need to distinctly separate our old design rules from the new, establishing a
+foundation that supports future growth.
+
+Here are several benefits of rebooting our design system:
+
+- **Clear Vision**: A design system thrives on constraints. Previously, as we
+  added components and styles without a clear direction, complexity grew,
+  leading to a system that was difficult to use effectively.
+- **Fully Responsive**: We aim to provide abstractions that facilitate the
+  creation of responsive interfaces across all devices, complementing our mobile
+  application and ensuring consistency.
+- **Usability for External Developers**: With well-documented and easy-to-use
+  components, external developers can potentially seamlessly integrate with our
+  look and feel and build upon the Factorial ecosystem.
+- **Accessibility**: Ensuring that our platform is accessible to everyone,
+  regardless of their abilities, is a priority. This means focusing on the
+  accessibility of our components.
+- **Robustness**: Our goal is to make every interaction with F0 exceptional.
+  This includes comprehensive testing of components to maintain consistency and
+  coherence.
+
+## Principles
+
+- **Consistency**: With Factorial's vast features, a consistent visual language
+  is key to helping users navigate and leverage their experiences across the
+  platform.
+- **Efficiency**: Designed for efficiency, F0 aids users in completing tasks
+  swiftly and seamlessly.
+- **Enjoyability**: We aim for users to enjoy their interaction with Factorial.
+  A visually appealing and coherent experience is central to F0.
+
+## Technical Choices
+
+F0 is crafted using leading technologies:
+
+- **React**: This design system is built on React, the leading JavaScript
+  library for building user interfaces.
+- **TypeScript**: Utilized for robust, maintainable code and enhanced developer
+  experience with amazing developer tooling.
+- **Tailwind**: Our choice for a utility-first CSS framework, promoting quick,
+  consistent UI development.
+- **Shadcn** and **Radix** for a powerful and accessible baseline for our
+  components.
+
+# How to Use F0?
+
+To integrate F0, install it as a dependency:
+
+$ pnpm install @factorialco/f0-react
+
+Import its styles in your application (typically in main.tsx or similar):
+
+```tsx
+import "@factorialco/f0-react/dist/styles.css"
+```
+
+You can then utilize any of its components:
+
+```
+import { Button } from "@factorialco/f0-react"
+```

package/assets/fonts/style.css

@@ -0,0 +1,43 @@
+/* #### Generated By: http://font.download #### */
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  src: url("Inter-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 400;
+  src: url("Inter-Italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  src: url("Inter-Medium.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 500;
+  src: url("Inter-MediumItalic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  src: url("Inter-SemiBold.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 600;
+  src: url("Inter-SemiBoldItalic.woff") format("woff");
+}

package/dist/experimental.css

@@ -0,0 +1 @@
+em-emoji-picker{--background-rgb: 255, 255, 255;--border-radius: 12px;--category-icon-size: 20px;--color-border-over: hsl(var(--neutral-10));--color-border: hsl(var(--neutral-10));--font-size: 14px;--rgb-accent: 1, 22, 55;--rgb-background: 255, 255, 255;--rgb-color: 1, 22, 55;--rgb-input: 255, 255, 255;width:372px!important;max-height:518px!important;--shadow: 0px 4px 20px 0px #0d162514}.FactorialOneTextEditor{line-height:1.5rem}.FactorialOneTextEditor .TextEditorTheme__ltr{text-align:left}.FactorialOneTextEditor .TextEditorTheme__rtl{text-align:right}.FactorialOneTextEditor .TextEditorTheme__paragraph{position:relative;margin:0 0 8px}.FactorialOneTextEditor .TextEditorTheme__paragraph:last-child{margin-bottom:0}.FactorialOneTextEditor .TextEditorTheme__quote{margin:0 0 10px 20px;border-bottom-width:4px;padding-left:16px;color:#65676b;border-left-color:#ced0d4}.FactorialOneTextEditor .TextEditorTheme__h1{margin:0 0 12px;padding:0;font-size:1rem;line-height:1.5rem;letter-spacing:-.01em;font-weight:600}.FactorialOneTextEditor .TextEditorTheme__h2{margin:10px 0 0;padding:0;font-size:1rem;line-height:1.5rem;letter-spacing:-.01em;font-weight:500}.FactorialOneTextEditor .TextEditorTheme__h3{margin:10px 0 0;padding:0;font-size:.875rem;line-height:1.25rem;letter-spacing:-.005em;font-weight:600}.FactorialOneTextEditor .TextEditorTheme__textBold{font-weight:600}.FactorialOneTextEditor .TextEditorTheme__textItalic{font-style:italic}.FactorialOneTextEditor .TextEditorTheme__textUnderline{text-decoration-line:underline}.FactorialOneTextEditor .TextEditorTheme__textStrikethrough{text-decoration-line:line-through}.FactorialOneTextEditor .TextEditorTheme__textUnderlineStrikethrough{text-decoration:underline line-through}.FactorialOneTextEditor .TextEditorTheme__textSubscript{vertical-align:sub!important}.FactorialOneTextEditor .TextEditorTheme__textSuperscript{vertical-align:super}.FactorialOneTextEditor .TextEditorTheme__textCode{background-color:#f0f2f5;padding:1px .25rem;font-family:Menlo,Consolas,Monaco,monospace}.FactorialOneTextEditor .TextEditorTheme__hashtag{border-radius:.375rem;background-color:hsl(var(--info-50) / .1);padding:2px;font-weight:500;color:hsl(var(--info-70));text-decoration-line:none}.FactorialOneTextEditor .TextEditorTheme__link{font-weight:500;color:hsl(var(--neutral-100));text-decoration-line:underline}.FactorialOneTextEditor .TextEditorTheme__link:hover{text-decoration-line:underline}.FactorialOneTextEditor .TextEditorTheme__code{margin:8px 0;padding:8px 8px 8px 40px;background-color:#f0f2f5;font-family:Menlo,Consolas,Monaco,monospace;display:block;line-height:1.53;-moz-tab-size:2;-o-tab-size:2;tab-size:2;overflow-x:auto;position:relative}.FactorialOneTextEditor .TextEditorTheme__code:before{content:attr(data-gutter);position:absolute;background-color:#eee;left:0;top:0;border-right:1px solid #ccc;padding:8px;color:#777;white-space:pre-wrap;text-align:right;min-width:25px}.FactorialOneTextEditor .TextEditorTheme__code:after{content:attr(data-highlight-language);top:0;right:3px;padding:3px;text-transform:uppercase;position:absolute;color:#00000080}.FactorialOneTextEditor .TextEditorTheme__characterLimit{display:inline;background-color:#fbb!important}.FactorialOneTextEditor .TextEditorTheme__ol1{margin:0 0 0 16px;padding:0}.FactorialOneTextEditor .TextEditorTheme__ol2{margin:0 0 0 16px;padding:0;list-style-type:upper-alpha}.FactorialOneTextEditor .TextEditorTheme__ol3{margin:0 0 0 16px;padding:0;list-style-type:lower-alpha}.FactorialOneTextEditor .TextEditorTheme__ol4{margin:0 0 0 16px;padding:0;list-style-type:upper-roman}.FactorialOneTextEditor .TextEditorTheme__ol5{margin:0 0 0 16px;padding:0;list-style-type:lower-roman}.FactorialOneTextEditor .TextEditorTheme__ul{margin:0 0 0 16px;padding:0;list-style:disc}.FactorialOneTextEditor .TextEditorTheme__tokenComment{color:#708090}.FactorialOneTextEditor .TextEditorTheme__tokenPunctuation{color:#999}.FactorialOneTextEditor .TextEditorTheme__tokenProperty{color:#905}.FactorialOneTextEditor.TextEditorTheme__tokenSelector{color:#690}.FactorialOneTextEditor .TextEditorTheme__tokenOperator{color:#9a6e3a}.FactorialOneTextEditor .TextEditorTheme__tokenAttr{color:#07a}.FactorialOneTextEditor .TextEditorTheme__tokenVariable{color:#e90}.FactorialOneTextEditor .TextEditorTheme__tokenFunction{color:#dd4a68}.FactorialOneTextEditor .TextEditorTheme__mark{padding:2px;background:#ffd40024;border-bottom:2px solid rgba(255,212,0,.3)}.FactorialOneTextEditor .TextEditorTheme__markOverlap{padding:2px;background:#ffd4004d;border-bottom:2px solid rgba(255,212,0,.7)}.FactorialOneTextEditor .TextEditorTheme__mark.selected{background:#ffd40080;border-bottom:2px solid rgba(255,212,0,1)}.FactorialOneTextEditor .TextEditorTheme__markOverlap.selected{background:#ffd400b3;border-bottom:2px solid rgba(255,212,0,.7)}.FactorialOneTextEditor .mention a,.FactorialOneTextEditor .mentioned a{border-radius:.375rem;background-color:hsl(var(--accent-50) / .05);padding:2px 6px;font-weight:500;color:hsl(var(--accent-70));text-decoration-line:none}.FactorialOneTextEditor .mention:focus a,.FactorialOneTextEditor .mentioned:focus a{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:hsl(var(--selected-50))}.FactorialOneTextEditor .link_mentioned{text-decoration:none}._rfx31ssb:before{border-radius:50%}._15m6ys7w:before{border-color:var(--stroke-color)}._3l8810ly:before{border-width:var(--stroke-width)}._kzdanqa1:before{border-style:solid}._13y0usvi:before{box-sizing:border-box}._154ifghn{top:var(--line-main-axis-start)}._154ihv0e{top:var(--main-axis-offset)}._19wo70hn:before{bottom:var(--terminal-cross-axis-offset)}._1auk70hn:before{top:var(--terminal-cross-axis-offset)}._1aukuj5p:before{top:var(--terminal-main-axis-start)}._1bsb10ly{width:var(--stroke-width)}._1cs8stnw:before{position:absolute}._1e02fghn{inset-inline-start:var(--line-main-axis-start)}._1e0c1ule{display:block}._1kt9b3bt:before{content:""}._1ltvhv0e{left:var(--main-axis-offset)}._1mp4vjfa:before{width:var(--terminal-diameter)}._1pbykb7n{z-index:1}._1xi2hv0e{right:var(--main-axis-offset)}._4t3i10ly{height:var(--stroke-width)}._94n5hv0e{bottom:var(--main-axis-offset)}._94n5idpf{bottom:0}._bfhkys7w{background-color:var(--stroke-color)}._cfu11ld9:before{display:var(--terminal-display)}._kfgtvjfa:before{height:var(--terminal-diameter)}._kqswstnw{position:absolute}._lcxvglyw{pointer-events:none}._ooun70hn:before{right:var(--terminal-cross-axis-offset)}._qnec70hn:before{left:var(--terminal-cross-axis-offset)}._rjxpidpf{inset-inline-end:0}._z5wtuj5p:before{inset-inline-start:var(--terminal-main-axis-start)}.mention{border-radius:.375rem;background-color:hsl(var(--accent-50) / .05);padding:2px 6px;font-weight:500}.mention:focus{outline-style:solid;outline-width:1px;outline-offset:1px;outline-color:hsl(var(--selected-50))}.preserved-selection{background-color:hsl(var(--selected-60) / .2)}.rich-text-editor-container *::-moz-selection,.basic-text-editor-container *::-moz-selection{background-color:transparent!important}.rich-text-editor-container *::selection,.basic-text-editor-container *::selection{background-color:transparent!important}.rich-text-editor-container::-moz-selection,.basic-text-editor-container::-moz-selection{background-color:transparent!important}.rich-text-editor-container::selection,.basic-text-editor-container::selection{background-color:transparent!important}.ProseMirror p,.rich-text-display-container p{position:relative;margin:0 0 8px}.ProseMirror p:last-child,.rich-text-display-container p:last-child{margin-bottom:0}.ProseMirror h1,.rich-text-display-container h1{margin:0 0 12px;padding:0;font-size:1.625rem;line-height:2rem;letter-spacing:-.01em;font-weight:600}.ProseMirror h2,.rich-text-display-container h2{margin:0 0 10px;padding:0;font-size:1.375rem;line-height:1.75rem;letter-spacing:-.01em;font-weight:500}.ProseMirror h3,.rich-text-display-container h3{margin:0 0 10px;padding:0;font-size:1rem;line-height:1.5rem;letter-spacing:-.01em;font-weight:500}.ProseMirror a,.rich-text-display-container a{cursor:pointer;font-weight:500;color:hsl(var(--accent-70));text-decoration-line:none}.ProseMirror strong,.rich-text-display-container strong{font-weight:600}.ProseMirror em,.rich-text-display-container em{font-style:italic}.ProseMirror u,.rich-text-display-container u{text-decoration-line:underline}.ProseMirror s,.rich-text-display-container s{text-decoration-line:line-through}.ProseMirror .f1-bullet-list,.rich-text-display-container .f1-bullet-list{list-style-type:disc}.ProseMirror .f1-ordered-list,.rich-text-display-container .f1-ordered-list{list-style-type:decimal}.ProseMirror ul,.ProseMirror ol,.rich-text-display-container ul,.rich-text-display-container ol{padding-left:20px}.ProseMirror .f1-ordered-list p,.rich-text-display-container .f1-ordered-list p,.ProseMirror .f1-bullet-list p,.rich-text-display-container .f1-bullet-list p{margin-left:8px}.ProseMirror li,.rich-text-display-container li{margin-bottom:8px}.ProseMirror pre,.rich-text-display-container pre{position:relative;margin:16px 0;overflow-x:auto;white-space:pre-wrap;border-radius:.75rem;background-color:hsl(var(--neutral-10));padding:8px}.ProseMirror code,.rich-text-display-container code{font-size:.75rem;line-height:1rem;font-family:Menlo,Consolas,Monaco,monospace}.ProseMirror blockquote,.rich-text-display-container blockquote{margin:0 0 10px;border-width:0px;border-left-width:4px;border-style:solid;border-color:hsl(var(--neutral-30));padding-left:16px}.ProseMirror:focus,.rich-text-display-container:focus{outline:2px solid transparent;outline-offset:2px}.ProseMirror hr,.rich-text-display-container hr{margin-top:12px;margin-bottom:12px;border-width:0px;border-top-width:1px;border-color:hsl(var(--neutral-30))}.ProseMirror mark,.rich-text-display-container mark{border-radius:.375rem;background-color:hsl(var(--promote-50) / .3);padding:2px;color:hsl(var(--neutral-100))}.ProseMirror p:empty:before,.rich-text-display-container p:empty:before{content:" "}.ProseMirror ul[data-type=taskList],.rich-text-display-container ul[data-type=taskList]{padding-left:0}.shadow-editor-tools{box-shadow:0 -4px 20px #0d162514}.scrollbar-macos{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}.scrollbar-macos::-webkit-scrollbar{width:8px}.scrollbar-macos::-webkit-scrollbar-track{background:var(--scrollbar-track)}.scrollbar-macos::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb);border-radius:9999px;border:2px solid transparent;background-clip:padding-box}.scrollbar-macos::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover)}.f1-task-item{margin-bottom:8px;display:flex;list-style-type:none;gap:8px}.f1-task-item div{flex:1 1 0%}.f1-task-item input{-moz-appearance:none;appearance:none;-webkit-appearance:none;position:relative;height:1.25rem;width:1.25rem;flex-shrink:0;cursor:pointer;border-radius:.375rem;border-width:1px;border-style:solid;border-color:hsl(var(--neutral-30));background-color:hsl(var(--neutral-0));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.f1-task-item input:hover{border-color:hsl(var(--neutral-40))}.f1-task-item input:checked{border-color:hsl(var(--selected-50) / .4);background-color:hsl(var(--selected-60))}.f1-task-item[data-checked=true]>div>p{color:hsl(var(--neutral-50));text-decoration-line:line-through}.f1-task-item input:checked:after{position:absolute;left:50%;top:50%;height:1rem;width:1rem;--tw-translate-x: -50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));content:"";background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.75 16.75L17.75 7.25004' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.25 11.75L10.75 16.75' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:contain}.f1-task-item-content{min-width:0px;flex:1 1 0%;outline:none}.f1-task-item[data-checked=true] .f1-task-item-content{color:hsl(var(--neutral-50));text-decoration-line:line-through}.f1-task-item-content p{margin:0}.tiptap p.is-empty:before{pointer-events:none;float:left;display:block;height:0px;max-width:100%;text-overflow:ellipsis;white-space:nowrap;color:hsl(var(--neutral-40));content:attr(data-placeholder)}.editor-mood-tracker p{margin:0}.rich-text-details{margin-top:0;margin-bottom:0;display:flex;gap:8px;padding-top:4px;padding-bottom:4px;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.rich-text-details summary{font-size:1rem;line-height:1.5rem;letter-spacing:-.01em;font-weight:600}.rich-text-details summary::marker{content:""}.rich-text-details>button{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;border-radius:.375rem;background-color:hsl(var(--neutral-0))}.rich-text-details>button:hover{background-color:hsl(var(--neutral-10))}.rich-text-details>button:before{font-size:.625rem;line-height:.75rem;color:hsl(var(--neutral-100));content:"▶"}.rich-text-details.is-open>button:before{--tw-rotate: 90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rich-text-details>div{display:flex;width:100%;flex-direction:column;gap:8px}.rich-text-details>div>[data-type=detailsContent]>:last-child{margin-bottom:8px}.rich-text-details.rich-text-details{margin-bottom:8px}