@customafk/lunas-ui 0.2.16 → 0.2.18

package/dist/ui/tooltip.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime260 from "react/jsx-runtime";
+import * as react_jsx_runtime183 from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "radix-ui";
 
 //#region packages/components/ui/tooltip.d.ts
@@ -19,7 +19,7 @@ import { Tooltip as Tooltip$1 } from "radix-ui";
 declare function TooltipProvider({
   delayDuration,
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime260.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Provider>): react_jsx_runtime183.JSX.Element;
 /**
  * Floating label that reveals supplementary text when the user hovers or focuses its trigger element.
  *
@@ -38,18 +38,18 @@ declare function TooltipProvider({
  */
 declare function Tooltip({
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime260.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Root>): react_jsx_runtime183.JSX.Element;
 /** Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. */
 declare function TooltipTrigger({
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime260.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Trigger>): react_jsx_runtime183.JSX.Element;
 /** Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */
 declare function TooltipContent({
   className,
   sideOffset,
   children,
   ...props
-}: React.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime260.JSX.Element;
+}: React.ComponentProps<typeof Tooltip$1.Content>): react_jsx_runtime183.JSX.Element;
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
 //# sourceMappingURL=tooltip.d.mts.map

package/dist/ui/tooltip.mjs

@@ -1 +1 @@
-"use client";import{i as e,n as t,r as n,t as r}from"../tooltip-Bj0iOG4s.mjs";export{r as Tooltip,t as TooltipContent,n as TooltipProvider,e as TooltipTrigger};
+"use client";import{i as e,n as t,r as n,t as r}from"../tooltip-C7UhtrFf.mjs";export{r as Tooltip,t as TooltipContent,n as TooltipProvider,e as TooltipTrigger};

package/dist/{user-DONsffqr.mjs → user-DIEH54XW.mjs}

@@ -1,2 +1,2 @@
-import{t as e}from"./paragraph-Ch5TvEqL.mjs";import{t}from"./flex-BLMTj7Ev.mjs";import{n,t as r}from"./avatar-DbxqvCjT.mjs";import{UserRoundIcon as i}from"lucide-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{colorHashLight as s}from"@customafk/react-toolkit/color-hash";const c=({uuid:c,username:l,email:u})=>o(t,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[a(r,{className:`size-10 shadow-card`,children:a(n,{style:{backgroundColor:s.hex(c)},children:a(i,{size:28,className:`text-white`})})}),o(t,{vertical:!0,padding:`none`,gap:`none`,align:`start`,children:[a(e,{className:`text-sm font-medium text-text-positive`,children:l}),a(e,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:u})]})]});export{c as t};
-//# sourceMappingURL=user-DONsffqr.mjs.map
+import{t as e}from"./paragraph-jzLzzEYZ.mjs";import{t}from"./flex-zl_w1yeZ.mjs";import{n,t as r}from"./avatar-5LzTjIjo.mjs";import{UserRoundIcon as i}from"lucide-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{colorHashLight as s}from"@customafk/react-toolkit/color-hash";const c=({uuid:c,username:l,email:u})=>o(t,{"data-slot":`user-display`,wrap:!1,gap:`sm`,padding:`none`,children:[a(r,{className:`size-10 shadow-card`,children:a(n,{style:{backgroundColor:s.hex(c)},children:a(i,{size:28,className:`text-white`})})}),o(t,{vertical:!0,padding:`none`,gap:`none`,align:`start`,children:[a(e,{className:`text-sm font-medium text-text-positive`,children:l}),a(e,{variant:`sm`,className:`mt-0! text-xs text-text-positive-weak`,children:u})]})]});export{c as t};
+//# sourceMappingURL=user-DIEH54XW.mjs.map

package/dist/{user-DONsffqr.mjs.map → user-DIEH54XW.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"user-DONsffqr.mjs","names":["UserDataDisplay: React.FC<UserDataDisplayProps>"],"sources":["../packages/components/data-display/user.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\nimport { Avatar, AvatarFallback } from '../ui/avatar';\n\ntype UserDataDisplayProps = {\n  /** Unique identifier used to deterministically generate the avatar background colour. */\n  uuid: string;\n  /** Display name rendered as the primary line of the user card. */\n  username: string;\n  /** Email address rendered as the secondary, muted line below the username. */\n  email: string;\n};\n\n/**\n * Displays a user identity card with a colour-hashed avatar, username, and email address.\n *\n * @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n *\n * <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n */\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n  return (\n    <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\n      <Avatar className=\"size-10 shadow-card\">\n        <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n          <UserRoundIcon size={28} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n"],"mappings":"gSA6BA,MAAaA,GAAmD,CAAE,OAAM,WAAU,WAE9E,EAAC,EAAA,CAAK,YAAU,eAAe,KAAM,GAAO,IAAI,KAAK,QAAQ,iBAC3D,EAAC,EAAA,CAAO,UAAU,+BAChB,EAAC,EAAA,CAAe,MAAO,CAAE,gBAAiB,EAAe,IAAI,EAAK,CAAE,UAClE,EAAC,EAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,EACV,CACT,EAAC,EAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,kBAC7C,EAAC,EAAA,CAAU,UAAU,kDAA0C,GAAqB,CACpF,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,iDAC/B,GACS,CAAA,EACP,CAAA,EACF"}
+{"version":3,"file":"user-DIEH54XW.mjs","names":["UserDataDisplay: React.FC<UserDataDisplayProps>"],"sources":["../packages/components/data-display/user.tsx"],"sourcesContent":["'use client';\n\nimport { UserRoundIcon } from 'lucide-react';\n\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\nimport { Flex } from '../layouts/flex';\nimport { Paragraph } from '../typography/paragraph';\nimport { Avatar, AvatarFallback } from '../ui/avatar';\n\ntype UserDataDisplayProps = {\n  /** Unique identifier used to deterministically generate the avatar background colour. */\n  uuid: string;\n  /** Display name rendered as the primary line of the user card. */\n  username: string;\n  /** Email address rendered as the secondary, muted line below the username. */\n  email: string;\n};\n\n/**\n * Displays a user identity card with a colour-hashed avatar, username, and email address.\n *\n * @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n *\n * <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n */\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n  return (\n    <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\n      <Avatar className=\"size-10 shadow-card\">\n        <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n          <UserRoundIcon size={28} className=\"text-white\" />\n        </AvatarFallback>\n      </Avatar>\n      <Flex vertical padding=\"none\" gap=\"none\" align=\"start\">\n        <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n        <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n          {email}\n        </Paragraph>\n      </Flex>\n    </Flex>\n  );\n};\n"],"mappings":"gSA6BA,MAAaA,GAAmD,CAAE,OAAM,WAAU,WAE9E,EAAC,EAAA,CAAK,YAAU,eAAe,KAAM,GAAO,IAAI,KAAK,QAAQ,iBAC3D,EAAC,EAAA,CAAO,UAAU,+BAChB,EAAC,EAAA,CAAe,MAAO,CAAE,gBAAiB,EAAe,IAAI,EAAK,CAAE,UAClE,EAAC,EAAA,CAAc,KAAM,GAAI,UAAU,cAAe,EACnC,EACV,CACT,EAAC,EAAA,CAAK,SAAA,GAAS,QAAQ,OAAO,IAAI,OAAO,MAAM,kBAC7C,EAAC,EAAA,CAAU,UAAU,kDAA0C,GAAqB,CACpF,EAAC,EAAA,CAAU,QAAQ,KAAK,UAAU,iDAC/B,GACS,CAAA,EACP,CAAA,EACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@customafk/lunas-ui",
-  "version": "0.2.16",
+  "version": "0.2.18",
   "description": "UI library for Lunas Enterprise",
   "type": "module",
   "author": {
@@ -31,6 +31,7 @@
     "./styles/loader": "./styles/loader.css",
     "./styles/theme": "./styles/theme.css",
     "./styles/typography": "./styles/typography.css",
+    "./styles/text-editor": "./styles/text-editor.css",
     "./cards/grid-product-card": {
       "require": "./dist/cards/grid-product-card.cjs",
       "import": "./dist/cards/grid-product-card.mjs"
@@ -119,6 +120,10 @@
       "require": "./dist/features/tanstack-form/index.cjs",
       "import": "./dist/features/tanstack-form/index.mjs"
     },
+    "./features/text-editor": {
+      "require": "./dist/features/text-editor/index.cjs",
+      "import": "./dist/features/text-editor/index.mjs"
+    },
     "./layouts/cms-layout": {
       "require": "./dist/layouts/cms-layout/index.cjs",
       "import": "./dist/layouts/cms-layout/index.mjs"
@@ -424,6 +429,11 @@
     "@tanstack/react-form": "^1.29.0",
     "@tanstack/react-table": "^8.21.0",
     "@tanstack/react-virtual": "^3.13.12",
+    "@tiptap/extension-placeholder": "^3.24.0",
+    "@tiptap/extension-text-align": "^3.24.0",
+    "@tiptap/extension-underline": "^3.24.0",
+    "@tiptap/react": "^3.24.0",
+    "@tiptap/starter-kit": "^3.24.0",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.1.0",
     "embla-carousel-react": "^8.6.0",

package/styles/text-editor.css

@@ -0,0 +1,140 @@
+/* ProseMirror editor content styles */
+.lunas-text-editor .ProseMirror {
+  outline: none;
+  min-height: 8rem;
+  padding: 0.5rem 0.75rem;
+}
+
+/* Placeholder */
+.lunas-text-editor .ProseMirror p.is-editor-empty:first-child::before {
+  color: var(--text-positive-muted);
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}
+
+/* Headings */
+.lunas-text-editor .ProseMirror h1 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  line-height: 2.25rem;
+  color: var(--text-positive-strong);
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.lunas-text-editor .ProseMirror h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2rem;
+  color: var(--text-positive-strong);
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.lunas-text-editor .ProseMirror h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+  color: var(--text-positive-strong);
+  margin-top: 0.875rem;
+  margin-bottom: 0.375rem;
+}
+
+/* Paragraph */
+.lunas-text-editor .ProseMirror p {
+  margin: 0.25rem 0;
+  color: var(--text-positive);
+  line-height: 1.625;
+}
+
+/* Lists */
+.lunas-text-editor .ProseMirror ul,
+.lunas-text-editor .ProseMirror ol {
+  padding-left: 1.5rem;
+  margin: 0.5rem 0;
+  color: var(--text-positive);
+}
+
+.lunas-text-editor .ProseMirror ul {
+  list-style-type: disc;
+}
+
+.lunas-text-editor .ProseMirror ol {
+  list-style-type: decimal;
+}
+
+.lunas-text-editor .ProseMirror li {
+  margin: 0.125rem 0;
+  line-height: 1.625;
+}
+
+/* Blockquote */
+.lunas-text-editor .ProseMirror blockquote {
+  border-left: 3px solid var(--primary-weak);
+  padding-left: 1rem;
+  margin: 0.75rem 0;
+  color: var(--text-positive-weak);
+  font-style: italic;
+}
+
+/* Inline code */
+.lunas-text-editor .ProseMirror code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875em;
+  background-color: var(--muted-muted);
+  color: var(--text-positive-strong);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--border);
+}
+
+/* Code block */
+.lunas-text-editor .ProseMirror pre {
+  background-color: var(--muted-intense);
+  color: var(--text-negative);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  border-radius: 0.375rem;
+  padding: 0.75rem 1rem;
+  margin: 0.75rem 0;
+  overflow-x: auto;
+}
+
+.lunas-text-editor .ProseMirror pre code {
+  background: none;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+}
+
+/* Horizontal rule */
+.lunas-text-editor .ProseMirror hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1rem 0;
+}
+
+/* Strong / Bold */
+.lunas-text-editor .ProseMirror strong {
+  font-weight: 600;
+  color: var(--text-positive-strong);
+}
+
+/* Em / Italic */
+.lunas-text-editor .ProseMirror em {
+  font-style: italic;
+}
+
+/* Strike */
+.lunas-text-editor .ProseMirror s {
+  text-decoration: line-through;
+  color: var(--text-positive-weak);
+}
+
+/* Selection */
+.lunas-text-editor .ProseMirror ::selection {
+  background-color: var(--primary-muted);
+}