@haklex/rich-editor-ui 0.0.1

package/dist/lib/get-strict-context.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare function getStrictContext<T>(name?: string): readonly [
+    (props: {
+        value: T;
+        children?: ReactNode;
+    }) => ReactNode,
+    () => T
+];
+//# sourceMappingURL=get-strict-context.d.ts.map

package/dist/lib/get-strict-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-strict-context.d.ts","sourceRoot":"","sources":["../../src/lib/get-strict-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,wBAAgB,gBAAgB,CAAC,CAAC,EAChC,IAAI,CAAC,EAAE,MAAM,GACZ,SAAS;IACV,CAAC,KAAK,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;KAAE,KAAK,SAAS;IACxD,MAAM,CAAC;CACR,CAoBA"}

package/dist/rich-editor-ui.css

@@ -0,0 +1,487 @@
+@keyframes f2q44l0 {
+  from {
+    opacity: 0;
+    transform: translateY(2px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@keyframes f2q44l1 {
+  from {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(2px) scale(0.96);
+  }
+}
+.f2q44l2 {
+  z-index: 50;
+  width: 288px;
+  border-radius: 0.5rem;
+  border: 1px solid var(--rc-border);
+  padding: 1rem;
+  background-color: var(--rc-bg);
+  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  outline: none;
+  transition: opacity 150ms ease-out, transform 150ms ease-out;
+}
+.f2q44l2[data-open] {
+  animation: f2q44l0 150ms ease-out;
+}
+.f2q44l2[data-ending-style] {
+  opacity: 0;
+  transform: translateY(2px) scale(0.96);
+}
+.f2q44l2[data-closed] {
+  animation: f2q44l1 150ms ease-in;
+}
+.f2q44l3 {
+  width: 10px;
+  height: 10px;
+  transform-origin: center;
+}
+.f2q44l3 > polygon {
+  fill: var(--rc-bg);
+}
+.f2q44l3 > polyline {
+  stroke: var(--rc-border);
+  fill: none;
+}
+.f2q44l4 {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1;
+  color: var(--rc-text);
+}
+.f2q44l5 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--rc-text-secondary);
+  margin-top: 0.25rem;
+}@keyframes _17r50hf0 {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+._17r50hf1 {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  height: 32px;
+  padding: 0 6px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  cursor: pointer;
+  color: var(--rc-text-secondary);
+  transition: color 0.1s, background-color 0.1s;
+}
+._17r50hf1:hover {
+  color: var(--rc-text);
+  background-color: color-mix(in srgb, var(--rc-text) 4%, transparent);
+}
+._17r50hf2 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+._17r50hf3 {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1;
+}
+._17r50hf4 {
+  margin-top: 2px;
+  height: 2px;
+  width: 14px;
+  border-radius: 1px;
+}
+._17r50hf5 {
+  width: 12px;
+  height: 12px;
+  transition: transform 0.15s;
+}
+._17r50hf6 {
+  padding: 8px;
+  width: auto;
+}
+._17r50hf6[data-open] {
+  animation: _17r50hf0 120ms ease-out;
+}
+._17r50hf7 {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 4px;
+}
+._17r50hf8 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: none;
+  background: none;
+  border-radius: 8px;
+  cursor: pointer;
+  padding: 0;
+  transition: background-color 0.1s;
+}
+._17r50hf8:hover {
+  background-color: color-mix(in srgb, var(--rc-text) 4%, transparent);
+}
+._17r50hf9 {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 1px solid color-mix(in srgb, var(--rc-text) 10%, transparent);
+}
+._17r50hfa {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  color: var(--rc-bg);
+}@keyframes vwlngv0 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes vwlngv1 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes vwlngv2 {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+@keyframes vwlngv3 {
+  from {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.95);
+  }
+}
+.vwlngv4 {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.vwlngv4[data-open] {
+  animation: vwlngv0 150ms ease-out;
+}
+.vwlngv4[data-closed] {
+  animation: vwlngv1 100ms ease-in;
+}
+.vwlngv5 {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 50;
+  display: grid;
+  width: 100%;
+  max-width: calc(100% - 2rem);
+  gap: 1rem;
+  border-radius: 0.75rem;
+  border: 1px solid var(--rc-border);
+  padding: 1.5rem;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: var(--rc-text);
+  background-color: var(--rc-bg);
+  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+  outline: none;
+}
+.vwlngv5[data-open] {
+  animation: vwlngv2 150ms ease-out;
+}
+.vwlngv5[data-closed] {
+  animation: vwlngv3 100ms ease-in;
+}
+.vwlngv6 {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 0.25rem;
+  border: none;
+  background: none;
+  cursor: pointer;
+  opacity: 0.7;
+  color: var(--rc-text-secondary);
+  transition: opacity 0.2s ease, color 0.2s ease;
+}
+.vwlngv6:hover {
+  opacity: 1;
+  color: var(--rc-text);
+}
+.vwlngv6:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--rc-bg), 0 0 0 4px var(--rc-text-secondary);
+}
+.vwlngv6:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.vwlngv6 svg {
+  width: 16px;
+  height: 16px;
+  pointer-events: none;
+  flex-shrink: 0;
+}
+.vwlngv7 {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  text-align: center;
+}
+.vwlngv8 {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+  padding-top: 0.25rem;
+}
+.vwlngv9 {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 1.33;
+  letter-spacing: -0.015em;
+  color: var(--rc-text);
+}
+.vwlngva {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.43;
+  color: var(--rc-text-secondary);
+}
+@media (min-width: 640px) {
+  .vwlngv5 {
+    max-width: 28rem;
+  }
+  .vwlngv7 {
+    text-align: left;
+  }
+  .vwlngv8 {
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+}.oih0op0 {
+  min-width: 8rem;
+  border-radius: 0.5rem;
+  padding: 0.25rem;
+  background-color: var(--rc-bg);
+  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
+  outline: none;
+  border: 1px solid var(--rc-border);
+  z-index: 50;
+  max-height: var(--available-height);
+  overflow-y: auto;
+  transform-origin: var(--transform-origin);
+  transition: opacity 100ms, transform 100ms;
+}
+.oih0op0[data-open] {
+  opacity: 1;
+  transform: scale(1);
+}
+.oih0op0[data-closed] {
+  opacity: 0;
+  transform: scale(0.95);
+}
+.oih0op1 {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  outline: none;
+  user-select: none;
+  cursor: default;
+  color: var(--rc-text);
+}
+.oih0op1[data-highlighted] {
+  background-color: color-mix(in srgb, var(--rc-text) 4%, transparent);
+}
+.oih0op1[data-disabled] {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.oih0op1 svg {
+  pointer-events: none;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+}
+.oih0op2 {
+  height: 1px;
+  background-color: var(--rc-border);
+  margin: 0.25rem -0.25rem;
+}
+.oih0op3 {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--rc-text-secondary);
+  padding: 0.25rem 0.375rem;
+}
+.oih0op4 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+.oih0op5 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}._6d8tz20 {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 0.5rem;
+  background-color: var(--rc-bg-secondary);
+  padding: 0.25rem;
+}
+._6d8tz21 {
+  width: 100%;
+}
+._6d8tz22 {
+  height: 2rem;
+  font-size: 0.75rem;
+}
+._6d8tz23 {
+  height: 2.5rem;
+  font-size: 0.875rem;
+}
+._6d8tz24 {
+  position: absolute;
+  top: 0.25rem;
+  bottom: 0.25rem;
+  border-radius: 0.375rem;
+  background-color: var(--rc-bg);
+  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  transition: all 300ms cubic-bezier(0.25, 1, 0.5, 1);
+  pointer-events: none;
+}
+._6d8tz25 {
+  opacity: 0;
+}
+._6d8tz26 {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.375rem;
+  font-weight: 500;
+  outline: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: color 200ms;
+  color: var(--rc-text-secondary);
+}
+._6d8tz26:focus-visible {
+  outline: 2px solid var(--rc-accent);
+  outline-offset: 1px;
+}
+._6d8tz27 {
+  color: var(--rc-text);
+}
+._6d8tz28 {
+  pointer-events: none;
+  opacity: 0.4;
+}
+._6d8tz29 {
+  flex: 1;
+}
+._6d8tz2a {
+  padding: 0 0.75rem;
+}
+._6d8tz2b {
+  padding: 0 1rem;
+}@keyframes _1cspf2m0 {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes _1cspf2m1 {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+}
+._1cspf2m2 {
+  z-index: 50;
+  max-width: 320px;
+  padding: 6px 10px;
+  font-size: var(--rc-font-size-small);
+  line-height: 1.4;
+  color: var(--rc-text);
+  background-color: var(--rc-bg);
+  border: 1px solid var(--rc-border);
+  border-radius: var(--rc-radius-md);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+  outline: none;
+  white-space: normal;
+  word-break: break-word;
+  pointer-events: none;
+  transition: opacity 120ms ease-out, transform 120ms ease-out;
+}
+._1cspf2m2[data-open] {
+  animation: _1cspf2m0 120ms ease-out;
+}
+._1cspf2m2[data-ending-style] {
+  opacity: 0;
+  transform: translateY(2px);
+}
+._1cspf2m2[data-closed] {
+  animation: _1cspf2m1 120ms ease-in;
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@haklex/rich-editor-ui",
+  "version": "0.0.1",
+  "description": "UI components for haklex rich editor",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/rich-editor-ui.css"
+  },
+  "main": "./dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@base-ui/react": "^1.1.0",
+    "lucide-react": "^0.574.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vanilla-extract/css": "^1.17.1",
+    "@vanilla-extract/vite-plugin": "^4.0.20",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "typescript": "^5.9.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.0",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": ">=19",
+    "@haklex/rich-style-token": "0.0.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev:build": "vite build --watch"
+  },
+  "types": "./dist/index.d.ts"
+}