@lattice-php/lattice 0.25.0 → 0.27.0

package/dist/ui/progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.js","names":[],"sources":["../../resources/js/ui/progress.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { coerceColor, colorValue, namedColor } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Size } from \"@lattice-php/lattice/types/generated\";\n\nconst barHeights: Record<Size, string> = {\n  xs: \"h-1\",\n  sm: \"h-1.5\",\n  md: \"h-2.5\",\n  lg: \"h-3\",\n  xl: \"h-4\",\n  \"2xl\": \"h-5\",\n  \"3xl\": \"h-6\",\n  \"4xl\": \"h-8\",\n};\n\nconst circleDiameters: Record<Size, number> = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 48,\n  xl: 64,\n  \"2xl\": 80,\n  \"3xl\": 96,\n  \"4xl\": 128,\n};\n\nconst circleReadouts: Record<Size, string> = {\n  xs: \"text-[0.5rem]\",\n  sm: \"text-[0.625rem]\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n  xl: \"text-base\",\n  \"2xl\": \"text-lg\",\n  \"3xl\": \"text-xl\",\n  \"4xl\": \"text-2xl\",\n};\n\nconst ProgressComponent: RendererComponent<\"progress\"> = ({ node }) => {\n  const { value, max, variant, showValue, color, size } = node.props;\n  const { locale } = useLocale();\n  const paint = colorValue(coerceColor(color) ?? namedColor(\"primary\"));\n\n  const clamped = max > 0 ? Math.min(Math.max(value, 0), max) : 0;\n  const ratio = max > 0 ? clamped / max : 0;\n  const percent = new Intl.NumberFormat(locale, {\n    maximumFractionDigits: 0,\n    style: \"percent\",\n  }).format(ratio);\n\n  const aria = {\n    \"aria-valuemax\": max,\n    \"aria-valuemin\": 0,\n    \"aria-valuenow\": clamped,\n    \"aria-valuetext\": percent,\n    role: \"progressbar\",\n  } as const;\n\n  if (variant === \"circle\") {\n    const diameter = circleDiameters[size];\n    const strokeWidth = Math.max(3, diameter / 10);\n    const radius = (diameter - strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n\n    return (\n      <div {...aria} className=\"relative inline-flex\" data-lattice-progress=\"circle\">\n        <svg className=\"-rotate-90\" height={diameter} width={diameter}>\n          <circle\n            className=\"text-lt-muted\"\n            cx={diameter / 2}\n            cy={diameter / 2}\n            fill=\"none\"\n            r={radius}\n            stroke=\"currentColor\"\n            strokeWidth={strokeWidth}\n          />\n          <circle\n            cx={diameter / 2}\n            cy={diameter / 2}\n            fill=\"none\"\n            r={radius}\n            stroke=\"currentColor\"\n            strokeDasharray={circumference}\n            strokeDashoffset={circumference * (1 - ratio)}\n            strokeLinecap=\"round\"\n            strokeWidth={strokeWidth}\n            style={{ color: paint }}\n          />\n        </svg>\n        {showValue && (\n          <span\n            className={cn(\n              \"absolute inset-0 flex items-center justify-center font-medium text-lt-fg tabular-nums\",\n              circleReadouts[size],\n            )}\n          >\n            {percent}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full items-center gap-2\" data-lattice-progress=\"bar\">\n      <div\n        {...aria}\n        className={cn(\"w-full overflow-hidden rounded-full bg-lt-muted\", barHeights[size])}\n      >\n        <div\n          className=\"h-full rounded-full\"\n          style={{ background: paint, width: `${ratio * 100}%` }}\n        />\n      </div>\n      {showValue && (\n        <span className=\"shrink-0 text-lt-muted-fg text-sm tabular-nums\">{percent}</span>\n      )}\n    </div>\n  );\n};\n\nexport default ProgressComponent;\n"],"mappings":";;;;;AAMA,IAAM,aAAmC;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,kBAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,iBAAuC;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,EAAE,OAAO,KAAK,SAAS,WAAW,OAAO,SAAS,KAAK;CAC7D,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,QAAQ,WAAW,YAAY,KAAK,KAAK,WAAW,SAAS,CAAC;CAEpE,MAAM,UAAU,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG,IAAI;CAC9D,MAAM,QAAQ,MAAM,IAAI,UAAU,MAAM;CACxC,MAAM,UAAU,IAAI,KAAK,aAAa,QAAQ;EAC5C,uBAAuB;EACvB,OAAO;CACT,CAAC,EAAE,OAAO,KAAK;CAEf,MAAM,OAAO;EACX,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;EAClB,MAAM;CACR;CAEA,IAAI,YAAY,UAAU;EACxB,MAAM,WAAW,gBAAgB;EACjC,MAAM,cAAc,KAAK,IAAI,GAAG,WAAW,EAAE;EAC7C,MAAM,UAAU,WAAW,eAAe;EAC1C,MAAM,gBAAgB,IAAI,KAAK,KAAK;EAEpC,OACE,qBAAC,OAAD;GAAK,GAAI;GAAM,WAAU;GAAuB,yBAAsB;aAAtE,CACE,qBAAC,OAAD;IAAK,WAAU;IAAa,QAAQ;IAAU,OAAO;cAArD,CACE,oBAAC,UAAD;KACE,WAAU;KACV,IAAI,WAAW;KACf,IAAI,WAAW;KACf,MAAK;KACL,GAAG;KACH,QAAO;KACM;IACd,CAAA,GACD,oBAAC,UAAD;KACE,IAAI,WAAW;KACf,IAAI,WAAW;KACf,MAAK;KACL,GAAG;KACH,QAAO;KACP,iBAAiB;KACjB,kBAAkB,iBAAiB,IAAI;KACvC,eAAc;KACD;KACb,OAAO,EAAE,OAAO,MAAM;IACvB,CAAA,CACE;OACJ,aACC,oBAAC,QAAD;IACE,WAAW,GACT,yFACA,eAAe,KACjB;cAEC;GACG,CAAA,CAEL;;CAET;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAiC,yBAAsB;YAAtE,CACE,oBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GAAG,mDAAmD,WAAW,KAAK;aAEjF,oBAAC,OAAD;IACE,WAAU;IACV,OAAO;KAAE,YAAY;KAAO,OAAO,GAAG,QAAQ,IAAI;IAAG;GACtD,CAAA;EACE,CAAA,GACJ,aACC,oBAAC,QAAD;GAAM,WAAU;aAAkD;EAAc,CAAA,CAE/E;;AAET"}
+{"version":3,"file":"progress.js","names":[],"sources":["../../resources/js/ui/progress.tsx"],"sourcesContent":["import type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { useLocale } from \"@lattice-php/lattice/i18n\";\nimport { coerceColor, colorValue, namedColor } from \"@lattice-php/lattice/lib/color\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { Size } from \"@lattice-php/lattice/types/generated\";\n\nconst barHeights: Record<Size, string> = {\n  xs: \"h-1\",\n  sm: \"h-1.5\",\n  md: \"h-2.5\",\n  lg: \"h-3\",\n  xl: \"h-4\",\n  \"2xl\": \"h-5\",\n  \"3xl\": \"h-6\",\n  \"4xl\": \"h-8\",\n};\n\nconst circleDiameters: Record<Size, number> = {\n  xs: 24,\n  sm: 32,\n  md: 40,\n  lg: 48,\n  xl: 64,\n  \"2xl\": 80,\n  \"3xl\": 96,\n  \"4xl\": 128,\n};\n\nconst circleReadouts: Record<Size, string> = {\n  xs: \"text-[0.5rem]\",\n  sm: \"text-[0.625rem]\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n  xl: \"text-base\",\n  \"2xl\": \"text-lg\",\n  \"3xl\": \"text-xl\",\n  \"4xl\": \"text-2xl\",\n};\n\nconst ProgressComponent: RendererComponent<\"progress\"> = ({ node }) => {\n  const { value, max, shape, showValue, color, size } = node.props;\n  const { locale } = useLocale();\n  const paint = colorValue(coerceColor(color) ?? namedColor(\"primary\"));\n\n  const clamped = max > 0 ? Math.min(Math.max(value, 0), max) : 0;\n  const ratio = max > 0 ? clamped / max : 0;\n  const percent = new Intl.NumberFormat(locale, {\n    maximumFractionDigits: 0,\n    style: \"percent\",\n  }).format(ratio);\n\n  const aria = {\n    \"aria-valuemax\": max,\n    \"aria-valuemin\": 0,\n    \"aria-valuenow\": clamped,\n    \"aria-valuetext\": percent,\n    role: \"progressbar\",\n  } as const;\n\n  if (shape === \"circle\") {\n    const diameter = circleDiameters[size];\n    const strokeWidth = Math.max(3, diameter / 10);\n    const radius = (diameter - strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n\n    return (\n      <div {...aria} className=\"relative inline-flex\" data-lattice-progress=\"circle\">\n        <svg className=\"-rotate-90\" height={diameter} width={diameter}>\n          <circle\n            className=\"text-lt-muted\"\n            cx={diameter / 2}\n            cy={diameter / 2}\n            fill=\"none\"\n            r={radius}\n            stroke=\"currentColor\"\n            strokeWidth={strokeWidth}\n          />\n          <circle\n            cx={diameter / 2}\n            cy={diameter / 2}\n            fill=\"none\"\n            r={radius}\n            stroke=\"currentColor\"\n            strokeDasharray={circumference}\n            strokeDashoffset={circumference * (1 - ratio)}\n            strokeLinecap=\"round\"\n            strokeWidth={strokeWidth}\n            style={{ color: paint }}\n          />\n        </svg>\n        {showValue && (\n          <span\n            className={cn(\n              \"absolute inset-0 flex items-center justify-center font-medium text-lt-fg tabular-nums\",\n              circleReadouts[size],\n            )}\n          >\n            {percent}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex w-full items-center gap-2\" data-lattice-progress=\"bar\">\n      <div\n        {...aria}\n        className={cn(\"w-full overflow-hidden rounded-full bg-lt-muted\", barHeights[size])}\n      >\n        <div\n          className=\"h-full rounded-full\"\n          style={{ background: paint, width: `${ratio * 100}%` }}\n        />\n      </div>\n      {showValue && (\n        <span className=\"shrink-0 text-lt-muted-fg text-sm tabular-nums\">{percent}</span>\n      )}\n    </div>\n  );\n};\n\nexport default ProgressComponent;\n"],"mappings":";;;;;AAMA,IAAM,aAAmC;CACvC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,kBAAwC;CAC5C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,iBAAuC;CAC3C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACP,OAAO;CACP,OAAO;AACT;AAEA,IAAM,qBAAoD,EAAE,WAAW;CACrE,MAAM,EAAE,OAAO,KAAK,OAAO,WAAW,OAAO,SAAS,KAAK;CAC3D,MAAM,EAAE,WAAW,UAAU;CAC7B,MAAM,QAAQ,WAAW,YAAY,KAAK,KAAK,WAAW,SAAS,CAAC;CAEpE,MAAM,UAAU,MAAM,IAAI,KAAK,IAAI,KAAK,IAAI,OAAO,CAAC,GAAG,GAAG,IAAI;CAC9D,MAAM,QAAQ,MAAM,IAAI,UAAU,MAAM;CACxC,MAAM,UAAU,IAAI,KAAK,aAAa,QAAQ;EAC5C,uBAAuB;EACvB,OAAO;CACT,CAAC,EAAE,OAAO,KAAK;CAEf,MAAM,OAAO;EACX,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;EAClB,MAAM;CACR;CAEA,IAAI,UAAU,UAAU;EACtB,MAAM,WAAW,gBAAgB;EACjC,MAAM,cAAc,KAAK,IAAI,GAAG,WAAW,EAAE;EAC7C,MAAM,UAAU,WAAW,eAAe;EAC1C,MAAM,gBAAgB,IAAI,KAAK,KAAK;EAEpC,OACE,qBAAC,OAAD;GAAK,GAAI;GAAM,WAAU;GAAuB,yBAAsB;aAAtE,CACE,qBAAC,OAAD;IAAK,WAAU;IAAa,QAAQ;IAAU,OAAO;cAArD,CACE,oBAAC,UAAD;KACE,WAAU;KACV,IAAI,WAAW;KACf,IAAI,WAAW;KACf,MAAK;KACL,GAAG;KACH,QAAO;KACM;IACd,CAAA,GACD,oBAAC,UAAD;KACE,IAAI,WAAW;KACf,IAAI,WAAW;KACf,MAAK;KACL,GAAG;KACH,QAAO;KACP,iBAAiB;KACjB,kBAAkB,iBAAiB,IAAI;KACvC,eAAc;KACD;KACb,OAAO,EAAE,OAAO,MAAM;IACvB,CAAA,CACE;OACJ,aACC,oBAAC,QAAD;IACE,WAAW,GACT,yFACA,eAAe,KACjB;cAEC;GACG,CAAA,CAEL;;CAET;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAiC,yBAAsB;YAAtE,CACE,oBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GAAG,mDAAmD,WAAW,KAAK;aAEjF,oBAAC,OAAD;IACE,WAAU;IACV,OAAO;KAAE,YAAY;KAAO,OAAO,GAAG,QAAQ,IAAI;IAAG;GACtD,CAAA;EACE,CAAA,GACJ,aACC,oBAAC,QAAD;GAAM,WAAU;aAAkD;EAAc,CAAA,CAE/E;;AAET"}

package/dist/ui/text.js

@@ -1,6 +1,6 @@
 import { cn } from "../lib/utils.js";
-import { CopyableText } from "./copyable-text.js";
 import { coerceColor, colorValue, namedColor } from "../lib/color.js";
+import { CopyableText } from "./copyable-text.js";
 import { jsx } from "react/jsx-runtime";
 //#region resources/js/ui/text.tsx
 var textAlignments = {

package/dist/ui/tooltip.js

@@ -11,7 +11,7 @@ var TooltipComponent = ({ node }) => {
 	if (trigger.length === 0) return /* @__PURE__ */ jsx(InfoTooltip, { content });
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		type: "button",
-		className: "inline-flex items-center rounded-lt-sm outline-none focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]",
+		className: "inline-flex items-center rounded-lt-sm outline-none focus-visible:ring-lt-ring/50 focus-visible:ring-[length:var(--lt-ring-width)]",
 		children: /* @__PURE__ */ jsx(Renderer, { nodes: trigger })
 	}), /* @__PURE__ */ jsx(PopoverContent, {
 		align: "start",

package/dist/ui/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../resources/js/ui/tooltip.tsx"],"sourcesContent":["import { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { InfoTooltip } from \"./info-tooltip\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nconst TooltipComponent: RendererComponent<\"tooltip\"> = ({ node }) => {\n  const content = node.props.content;\n  const trigger = toNodes(node.props.trigger);\n\n  if (!content) {\n    return null;\n  }\n\n  if (trigger.length === 0) {\n    return <InfoTooltip content={content} />;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        type=\"button\"\n        className=\"inline-flex items-center rounded-lt-sm outline-none focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\"\n      >\n        <Renderer nodes={trigger} />\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"max-w-xs p-3 text-sm [&_a]:underline\"\n        dangerouslySetInnerHTML={{ __html: content }}\n      />\n    </Popover>\n  );\n};\n\nexport default TooltipComponent;\n"],"mappings":";;;;;;AAMA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,UAAU,QAAQ,KAAK,MAAM,OAAO;CAE1C,IAAI,CAAC,SACH,OAAO;CAGT,IAAI,QAAQ,WAAW,GACrB,OAAO,oBAAC,aAAD,EAAsB,QAAU,CAAA;CAGzC,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,MAAK;EACL,WAAU;YAEV,oBAAC,UAAD,EAAU,OAAO,QAAU,CAAA;CACb,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../resources/js/ui/tooltip.tsx"],"sourcesContent":["import { Renderer } from \"@lattice-php/lattice/core/renderer\";\nimport { toNodes } from \"@lattice-php/lattice/core/nodes\";\nimport type { RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { InfoTooltip } from \"./info-tooltip\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nconst TooltipComponent: RendererComponent<\"tooltip\"> = ({ node }) => {\n  const content = node.props.content;\n  const trigger = toNodes(node.props.trigger);\n\n  if (!content) {\n    return null;\n  }\n\n  if (trigger.length === 0) {\n    return <InfoTooltip content={content} />;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        type=\"button\"\n        className=\"inline-flex items-center rounded-lt-sm outline-none focus-visible:ring-lt-ring/50 focus-visible:ring-[length:var(--lt-ring-width)]\"\n      >\n        <Renderer nodes={trigger} />\n      </PopoverTrigger>\n      <PopoverContent\n        align=\"start\"\n        className=\"max-w-xs p-3 text-sm [&_a]:underline\"\n        dangerouslySetInnerHTML={{ __html: content }}\n      />\n    </Popover>\n  );\n};\n\nexport default TooltipComponent;\n"],"mappings":";;;;;;AAMA,IAAM,oBAAkD,EAAE,WAAW;CACnE,MAAM,UAAU,KAAK,MAAM;CAC3B,MAAM,UAAU,QAAQ,KAAK,MAAM,OAAO;CAE1C,IAAI,CAAC,SACH,OAAO;CAGT,IAAI,QAAQ,WAAW,GACrB,OAAO,oBAAC,aAAD,EAAsB,QAAU,CAAA;CAGzC,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,MAAK;EACL,WAAU;YAEV,oBAAC,UAAD,EAAU,OAAO,QAAU,CAAA;CACb,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}