@flowtomic/ui 0.1.2 → 0.1.5

package/dist/styles/typography.css

@@ -0,0 +1,430 @@
+.prose:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  --tw-prose-body: var(--color-text-tertiary);
+  --tw-prose-headings: var(--color-text-primary);
+  --tw-prose-lead: var(--color-text-tertiary);
+  --tw-prose-links: var(--color-text-tertiary);
+  --tw-prose-bold: var(--color-text-primary);
+  --tw-prose-counters: var(--color-text-tertiary);
+  --tw-prose-bullets: var(--color-text-tertiary);
+  --tw-prose-hr: var(--color-border-secondary);
+  --tw-prose-quotes: var(--color-text-primary);
+  --tw-prose-quote-borders: var(--color-fg-brand-primary_alt);
+  --tw-prose-captions: var(--color-text-tertiary);
+  --tw-prose-code: var(--color-text-tertiary);
+  --tw-prose-pre-code: var(--color-text-tertiary);
+  --tw-prose-pre-bg: var(--color-bg-primary);
+  --tw-prose-th-borders: var(--color-border-primary);
+  --tw-prose-td-borders: var(--color-border-secondary);
+
+  /* Base */
+  color: var(--tw-prose-body);
+  font-size: var(--text-md);
+  line-height: var(--text-md--line-height);
+}
+
+.prose :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  /* Text */
+  &:where(p) {
+    margin-top: calc(var(--spacing) * 4);
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+
+  &:where([class~="lead"]) {
+    font-size: var(--text-md);
+    line-height: var(--text-md--line-height);
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+  }
+
+  /* Lists */
+  &:where(ol) {
+    list-style-type: decimal;
+
+    margin-top: calc(var(--spacing) * 4);
+    margin-bottom: calc(var(--spacing) * 4);
+    padding-inline-start: calc(var(--spacing) * 5.75);
+  }
+  &:where(ul) {
+    list-style-type: disc;
+
+    margin-top: calc(var(--spacing) * 4);
+    margin-bottom: calc(var(--spacing) * 4);
+    padding-inline-start: calc(var(--spacing) * 5.75);
+  }
+  &:where(li) {
+    margin-top: calc(var(--spacing) * 2);
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  &:where(ol > li) {
+    padding-inline-start: 1px;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  &:where(ul > li) {
+    padding-inline-start: 1px;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  /* Horizontal rules */
+  &:where(hr) {
+    margin-top: calc(var(--spacing) * 8);
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+
+  /* Quotes */
+  &:where(blockquote) {
+    color: var(--tw-prose-quotes);
+
+    border-left-width: 2px;
+    border-left-color: var(--tw-prose-quote-borders);
+
+    padding-inline-start: 0;
+    margin-top: calc(var(--spacing) * 10);
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+  &:where(blockquote p) {
+    margin: 0;
+    font-weight: 500;
+    font-style: italic;
+
+    font-size: var(--text-xl);
+    line-height: var(--text-xl--line-height);
+  }
+  &:where(blockquote p:first-of-type::before) {
+    content: open-quote;
+  }
+  &:where(blockquote p:last-of-type::after) {
+    content: close-quote;
+  }
+
+  /* Headings */
+  &:where(h1) {
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+
+    font-size: var(--text-display-sm);
+    line-height: var(--text-display-sm--line-height);
+    margin-bottom: calc(var(--spacing) * 5);
+    margin-top: calc(var(--spacing) * 10);
+  }
+  &:where(h2) {
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+
+    font-size: var(--text-display-xs);
+    line-height: var(--text-display-xs--line-height);
+    margin-bottom: calc(var(--spacing) * 4);
+    margin-top: calc(var(--spacing) * 8);
+  }
+  &:where(h3) {
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+
+    font-size: var(--text-xl);
+    line-height: var(--text-xl--line-height);
+    margin-bottom: calc(var(--spacing) * 3);
+    margin-top: calc(var(--spacing) * 8);
+  }
+  &:where(h4) {
+    color: var(--tw-prose-headings);
+    font-weight: 600;
+
+    font-size: var(--text-lg);
+    line-height: var(--text-lg--line-height);
+    margin-bottom: calc(var(--spacing) * 2);
+    margin-top: calc(var(--spacing) * 5);
+  }
+
+  &:where(h2 + *) {
+    margin-top: 0;
+  }
+  &:where(h3 + *) {
+    margin-top: 0;
+  }
+  &:where(h4 + *) {
+    margin-top: 0;
+  }
+
+  &:where(h1 strong) {
+    font-weight: 900;
+    color: inherit;
+  }
+  &:where(h2 strong) {
+    font-weight: 800;
+    color: inherit;
+  }
+  &:where(h3 strong) {
+    font-weight: 700;
+    color: inherit;
+  }
+  &:where(h4 strong) {
+    font-weight: 700;
+    color: inherit;
+  }
+
+  /* Media */
+
+  &:where(img) {
+    border-radius: var(--radius-xl);
+    width: 100%;
+    object-fit: cover;
+
+    margin-top: calc(var(--spacing) * 8);
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  &:where(video) {
+    margin-top: calc(var(--spacing) * 8);
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  &:where(figure) {
+    margin-top: calc(var(--spacing) * 10);
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+  &:where(figure > *) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  &:where(figure:has(> blockquote)) {
+    border-left-width: 2px;
+    border-left-color: var(--tw-prose-quote-borders);
+    padding-top: calc(var(--spacing) * 2);
+    padding-bottom: calc(var(--spacing) * 2);
+
+    padding-inline-start: calc(var(--spacing) * 4);
+  }
+  &:where(figure:has(> blockquote) blockquote) {
+    padding-inline-start: 0;
+    border: none;
+  }
+  &:where(img + figcaption) {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+  }
+  &:where(figcaption) {
+    color: var(--tw-prose-captions);
+
+    font-size: var(--text-sm);
+    line-height: var(--text-sm--line-height);
+    margin-top: calc(var(--spacing) * 3);
+  }
+  &:where(cite) {
+    font-style: normal;
+  }
+
+  /* Inline elements */
+  &:where(a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
+    font-weight: 400;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+
+  &:where(a:focus-visible) {
+    border-radius: var(--radius-sm);
+    outline: 2px solid var(--color-focus-ring);
+    outline-offset: 2px;
+  }
+  &:where(:is(h1, h2, h3) a) {
+    color: var(--tw-prose-headings);
+    font-weight: inherit;
+    text-decoration: none;
+  }
+
+  /* Inline code element */
+  &:where(code:not(pre code)) {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 700;
+    border-radius: 6px;
+    padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
+    margin: calc(var(--spacing) * -0.5) 0px;
+    background: var(--color-bg-secondary);
+    box-shadow: 0 0 0 1px var(--color-border-secondary);
+
+    &::before,
+    &::after {
+      content: "";
+    }
+  }
+}
+
+.prose.prose-centered-quote :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:where(blockquote) {
+    padding-inline-start: 0px !important;
+    border-left: none;
+    text-align: center;
+  }
+  &:where(figure:has(> blockquote)) {
+    border-left: none;
+    padding-inline-start: 0px !important;
+    padding-top: 0px !important;
+    padding-bottom: 0px !important;
+    text-align: center;
+  }
+}
+
+.prose.prose-minimal-quote :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  &:where(blockquote) {
+    border-left: none;
+    padding-inline-start: 0px !important;
+  }
+  &:where(figure:has(> blockquote)) {
+    border-left: none;
+    padding-inline-start: 0px !important;
+  }
+}
+
+.prose.md\:prose-lg:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  @media (width >= 48rem /* 768px */) {
+    /* Base */
+    font-size: var(--text-lg);
+    line-height: var(--text-lg--line-height);
+  }
+}
+
+.prose.md\:prose-lg :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  @media (width >= 48rem /* 768px */) {
+    /* Text */
+    &:where(p) {
+      margin-top: calc(var(--spacing) * 4.5);
+      margin-bottom: calc(var(--spacing) * 4.5);
+    }
+
+    &:where([class~="lead"]) {
+      font-size: var(--text-xl);
+      line-height: var(--text-xl--line-height);
+      margin-top: 1.09em;
+      margin-bottom: 1.09em;
+    }
+
+    /* Lists */
+    &:where(ol) {
+      margin-top: calc(var(--spacing) * 4.5);
+      margin-bottom: calc(var(--spacing) * 4.5);
+      padding-inline-start: calc(var(--spacing) * 6.5);
+    }
+    &:where(ul) {
+      margin-top: calc(var(--spacing) * 4.5);
+      margin-bottom: calc(var(--spacing) * 4.5);
+      padding-inline-start: calc(var(--spacing) * 6.5);
+    }
+
+    &:where(ol > li) {
+      padding-inline-start: 1px;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    &:where(ul > li) {
+      padding-inline-start: 1px;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+
+    /* Horizontal rules */
+    &:where(hr) {
+      margin-top: calc(var(--spacing) * 8);
+      margin-bottom: calc(var(--spacing) * 8);
+    }
+
+    /* Quotes */
+    &:where(blockquote) {
+      padding-inline-start: 0;
+      margin-top: calc(var(--spacing) * 12);
+      margin-bottom: calc(var(--spacing) * 12);
+    }
+    &:where(blockquote p) {
+      margin: 0;
+
+      font-size: var(--text-display-xs);
+      line-height: var(--text-display-xs--line-height);
+    }
+
+    /* Headings */
+    &:where(h1) {
+      font-size: var(--text-display-md);
+      line-height: var(--text-display-md--line-height);
+      margin-bottom: calc(var(--spacing) * 6);
+      margin-top: calc(var(--spacing) * 12);
+    }
+    &:where(h2) {
+      font-size: var(--text-display-sm);
+      line-height: var(--text-display-sm--line-height);
+      margin-bottom: calc(var(--spacing) * 5);
+      margin-top: calc(var(--spacing) * 10);
+    }
+    &:where(h3) {
+      font-size: var(--text-display-xs);
+      line-height: var(--text-display-xs--line-height);
+      margin-bottom: calc(var(--spacing) * 4);
+      margin-top: calc(var(--spacing) * 8);
+    }
+    &:where(h4) {
+      font-size: var(--text-xl);
+      line-height: var(--text-xl--line-height);
+      margin-bottom: calc(var(--spacing) * 3);
+      margin-top: calc(var(--spacing) * 8);
+    }
+    &:where(h2 + *) {
+      margin-top: 0;
+    }
+    &:where(h3 + *) {
+      margin-top: 0;
+    }
+    &:where(h4 + *) {
+      margin-top: 0;
+    }
+
+    &:where(figure) {
+      margin-top: calc(var(--spacing) * 12);
+      margin-bottom: calc(var(--spacing) * 12);
+    }
+    &:where(figure > *) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+    &:where(figure:has(> blockquote)) {
+      padding-inline-start: calc(var(--spacing) * 5);
+    }
+    &:where(figure > blockquote + figcaption) {
+      font-size: var(--text-md);
+      line-height: var(--text-md--line-height);
+    }
+
+    &:where(figcaption) {
+      margin-top: calc(var(--spacing) * 4);
+    }
+
+    /* Inline elements */
+    &:where(a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
+      font-weight: 400;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+    }
+    &:where(:is(h1, h2, h3) a) {
+      color: var(--tw-prose-headings);
+      font-weight: inherit;
+      text-decoration: none;
+    }
+
+    /* Inline code element */
+    &:where(code:not(pre code)) {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      font-weight: 700;
+      border-radius: 6px;
+      padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
+      margin: calc(var(--spacing) * -0.5) 0px;
+      background: var(--color-bg-secondary);
+      box-shadow: 0 0 0 1px var(--color-border-secondary);
+    }
+  }
+}
+
+/* Remove top margin from first element */
+.prose > :first-child:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-top: 0;
+}
+.prose > :last-child:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+  margin-bottom: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flowtomic/ui",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "description": "Componentes UI reutilizáveis baseados em Radix UI e Tailwind CSS",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,7 +14,8 @@
     "./components/*": {
       "import": "./dist/components/*/index.js",
       "types": "./dist/components/*/index.d.ts"
-    }
+    },
+    "./styles/*": "./dist/styles/*"
   },
   "files": [
     "dist"
@@ -27,7 +28,8 @@
   "license": "MIT",
   "scripts": {
     "dev": "bun run --watch src/index.ts",
-    "build": "tsc --build && bun build ./src/index.ts --outdir ./dist --target browser --format esm --minify",
+    "build": "tsc --build && bun build ./src/index.ts --outdir ./dist --target browser --format esm --minify --external react --external react-dom --external react/jsx-runtime --external react-dom/client && bun run build:copy-styles",
+    "build:copy-styles": "bun run ../../scripts/copy-ui-styles.ts",
     "type-check": "tsc --noEmit",
     "clean": "rm -rf dist",
     "lint": "biome check .",
@@ -42,36 +44,60 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.2.4",
+    "@floating-ui/dom": "^1.6.11",
+    "@flowtomic/logic": "^0.1.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@react-aria/combobox": "^3.9.0",
+    "@react-aria/i18n": "^3.9.0",
+    "@react-aria/interactions": "^3.25.6",
+    "@react-aria/listbox": "^3.9.0",
+    "@react-aria/overlays": "^3.30.0",
+    "@react-aria/tooltip": "^3.8.8",
+    "@react-aria/utils": "^3.25.6",
+    "@react-stately/combobox": "^3.9.0",
+    "@react-stately/list": "^3.9.0",
+    "@react-stately/tooltip": "^3.5.8",
+    "@react-types/shared": "^3.32.1",
+    "@tanstack/react-table": "^8.21.3",
+    "@tiptap/core": "^2.8.0",
+    "@tiptap/extension-color": "^2.8.0",
+    "@tiptap/extension-image": "^2.8.0",
+    "@tiptap/extension-placeholder": "^2.8.0",
+    "@tiptap/extension-text-align": "^2.8.0",
+    "@tiptap/extension-text-style": "^2.8.0",
+    "@tiptap/pm": "^2.8.0",
+    "@tiptap/react": "^2.8.0",
+    "@tiptap/starter-kit": "^2.8.0",
     "@xyflow/react": "^12.9.2",
-    "lucide-react": "^0.553.0",
-    "tokenlens": "^1.3.1",
+    "ai": "^5.0.89",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
-    "@tanstack/react-table": "^8.21.3",
-    "@flowtomic/logic": "^0.1.0",
     "cmdk": "^1.1.1",
+    "lucide-react": "^0.553.0",
     "motion": "^12.23.24",
+    "nanoid": "^5.1.6",
+    "qr-code-styling": "^1.9.2",
+    "react-number-format": "^5.4.4",
     "shiki": "^3.15.0",
+    "sonner": "^2.0.7",
     "streamdown": "^1.4.0",
-    "use-stick-to-bottom": "^1.1.1",
-    "nanoid": "^5.1.6",
-    "ai": "^5.0.89"
+    "tailwind-merge": "^3.3.1",
+    "tiptap-markdown": "^0.8.9",
+    "tokenlens": "^1.3.1",
+    "use-stick-to-bottom": "^1.1.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
@@ -107,3 +133,4 @@
     "vite": "^7.1.7"
   }
 }
+