@lattice-php/lattice 0.24.0 → 0.26.0

package/dist/ui/chart-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"chart-view.js","names":[],"sources":["../../resources/js/ui/chart-view.tsx"],"sourcesContent":["import {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  ComposedChart,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { isRecord } from \"@lattice-php/lattice/core/materialize\";\nimport type { ComponentPropsOf, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { useFormatContext } from \"@lattice-php/lattice/format/format-context\";\nimport { numericValue } from \"@lattice-php/lattice/format/numeric\";\nimport { formatValue } from \"@lattice-php/lattice/format/value\";\n\ntype ChartProps = ComponentPropsOf<\"chart\">;\ntype ChartSeries = ChartProps[\"series\"][number];\ntype ChartDatum = ChartProps[\"data\"][number];\ntype CartesianSeries = ChartSeries & { type: \"area\" | \"bar\" | \"line\" };\ntype SpecialSeries = ChartSeries & { type: \"distribution\" | \"gauge\" | \"pie\" };\ntype ChartMargin = { bottom: number; left: number; right: number; top: number };\ntype CartesianChartComponent = ComponentType<{\n  children: ReactNode;\n  data: ChartProps[\"data\"];\n  margin?: ChartMargin;\n}>;\n\nconst chartMargin: ChartMargin = { bottom: 0, left: 0, right: 16, top: 8 };\nconst compactLegendProps = {\n  align: \"center\" as const,\n  height: 24,\n  iconSize: 7,\n  verticalAlign: \"top\" as const,\n  wrapperStyle: { fontSize: 11, lineHeight: \"14px\", paddingBottom: 6 },\n};\nconst axisTick = { fontSize: 10 };\nconst tooltipProps = {\n  contentStyle: {\n    background: \"var(--lt-surface)\",\n    border: \"1px solid var(--lt-border)\",\n    borderRadius: \"var(--lt-radius-sm)\",\n    boxShadow: \"var(--lt-shadow-sm)\",\n    color: \"var(--lt-surface-fg)\",\n    fontSize: 12,\n  },\n  itemStyle: { color: \"var(--lt-surface-fg)\" },\n  labelStyle: { color: \"var(--lt-muted-fg)\" },\n} as const;\n\nconst palette = [\n  \"var(--lt-primary)\",\n  \"var(--lt-success)\",\n  \"var(--lt-info)\",\n  \"var(--lt-warning)\",\n  \"var(--lt-danger)\",\n  \"var(--lt-muted-fg)\",\n];\n\nfunction colorAt(index: number): string {\n  return palette[index % palette.length] ?? \"var(--lt-primary)\";\n}\n\nfunction datumColor(datum: ChartDatum, series: ChartSeries, index: number): string {\n  if (isRecord(datum)) {\n    const color = coerceColor(datum.color);\n\n    if (color) {\n      return colorValue(color);\n    }\n  }\n\n  return series.color ? colorValue(series.color) : colorAt(index);\n}\n\nfunction isCartesianSeries(series: ChartSeries): series is CartesianSeries {\n  return series.type === \"area\" || series.type === \"bar\" || series.type === \"line\";\n}\n\nfunction isSpecialSeries(series: ChartSeries): series is SpecialSeries {\n  return !isCartesianSeries(series);\n}\n\nfunction datumValue(datum: ChartDatum, key: string): number {\n  return isRecord(datum) ? (numericValue(datum[key]) ?? 0) : 0;\n}\n\nfunction datumName(datum: ChartDatum, series: ChartSeries): string {\n  if (series.nameKey === null || !isRecord(datum)) {\n    return series.name;\n  }\n\n  const name = datum[series.nameKey];\n\n  return typeof name === \"string\" ? name : series.name;\n}\n\nfunction cartesianChartFor(series: CartesianSeries[]): CartesianChartComponent {\n  const types = new Set(series.map((item) => item.type));\n  const firstSeries = series[0];\n\n  if (firstSeries === undefined || types.size !== 1) {\n    return ComposedChart;\n  }\n\n  switch (firstSeries.type) {\n    case \"area\":\n      return AreaChart;\n    case \"bar\":\n      return BarChart;\n    case \"line\":\n      return LineChart;\n  }\n}\n\nfunction ChartFrame({\n  children,\n  description,\n  id,\n  title,\n}: {\n  children: ReactNode;\n  description: string | null;\n  id?: string;\n  title: string | null;\n}) {\n  const hasHeader = title !== null || description !== null;\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={id}\n    >\n      {hasHeader && (\n        <div className=\"flex min-w-0 flex-col gap-1.5\">\n          {title !== null && <div className=\"text-sm font-semibold leading-tight\">{title}</div>}\n          {description !== null && (\n            <div className=\"text-xs leading-5 text-lt-muted-fg\">{description}</div>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nfunction CartesianChart({ props }: { props: ChartProps }) {\n  const series = props.series.filter(isCartesianSeries);\n  const RechartsChart = cartesianChartFor(series);\n  const ctx = useFormatContext();\n  const formatCategory = (value: unknown) => formatValue(value, props.categoryFormat, ctx);\n  const formatValueTick = (value: unknown) => formatValue(value, props.valueFormat, ctx);\n  const hasBarSeries = series.some((item) => item.type === \"bar\");\n  const tooltipCursor = hasBarSeries\n    ? { fill: \"var(--lt-muted-fg)\", fillOpacity: 0.15 }\n    : { stroke: \"var(--lt-muted-fg)\", strokeOpacity: 0.4 };\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <RechartsChart data={props.data} margin={chartMargin}>\n        {props.grid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--lt-border)\" />}\n        {props.xAxis && props.categoryKey !== null && (\n          <XAxis\n            dataKey={props.categoryKey}\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatCategory}\n            tickLine={false}\n          />\n        )}\n        {props.yAxis && (\n          <YAxis\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatValueTick}\n            tickLine={false}\n            width={42}\n          />\n        )}\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            cursor={tooltipCursor}\n            formatter={formatValueTick}\n            labelFormatter={formatCategory}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        {series.map((item, index) => {\n          const color = item.color ? colorValue(item.color) : colorAt(index);\n          const key = `${item.type}:${item.dataKey}`;\n\n          if (item.type === \"area\") {\n            return (\n              <Area\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                fillOpacity={0.16}\n                name={item.name}\n                stackId={item.stackId ?? undefined}\n                stroke={color}\n                type=\"monotone\"\n              />\n            );\n          }\n\n          if (item.type === \"bar\") {\n            return (\n              <Bar\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                name={item.name}\n                radius={[4, 4, 0, 0]}\n                stackId={item.stackId ?? undefined}\n              />\n            );\n          }\n\n          return (\n            <Line\n              key={key}\n              dataKey={item.dataKey}\n              dot={false}\n              name={item.name}\n              stroke={color}\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          );\n        })}\n      </RechartsChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction PieChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const ctx = useFormatContext();\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <PieChart margin={chartMargin}>\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            formatter={(value) => formatValue(value, props.valueFormat, ctx)}\n            labelFormatter={(value) => formatValue(value, props.categoryFormat, ctx)}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        <Pie\n          data={props.data}\n          dataKey={series.dataKey}\n          name={series.name}\n          nameKey={series.nameKey ?? undefined}\n          innerRadius={series.innerRadius}\n          outerRadius=\"68%\"\n        >\n          {props.data.map((datum, index) => (\n            <Cell key={index} fill={datumColor(datum, series, index)} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction ChartLegend({\n  entries,\n}: {\n  entries: Array<{ color: string; label: string; value?: string }>;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-x-3 gap-y-1\">\n      {entries.map((entry, index) => (\n        <span\n          key={index}\n          className=\"flex items-center gap-1 text-[11px] leading-[14px] text-lt-muted-fg\"\n        >\n          <span\n            aria-hidden\n            className=\"size-[7px] rounded-full\"\n            style={{ background: entry.color }}\n          />\n          {entry.label}\n          {entry.value !== undefined && (\n            <span className=\"font-medium text-lt-surface-fg\">{entry.value}</span>\n          )}\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction GaugeChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const ctx = useFormatContext();\n  const values = props.data.map((datum) => datumValue(datum, series.dataKey));\n  const max = series.maxValue ?? Math.max(0, ...values);\n  const legendEntries = props.data.map((datum, index) => ({\n    color: datumColor(datum, series, index),\n    label: datumName(datum, series),\n  }));\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {props.legend && <ChartLegend entries={legendEntries} />}\n      <div className=\"relative\">\n        <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n          <RadialBarChart\n            data={props.data}\n            endAngle={-30}\n            innerRadius={series.innerRadius}\n            margin={chartMargin}\n            outerRadius=\"100%\"\n            startAngle={210}\n          >\n            <PolarAngleAxis type=\"number\" domain={[0, max]} tick={false} />\n            {props.tooltip && (\n              <Tooltip\n                {...tooltipProps}\n                formatter={(value) => formatValue(value, props.valueFormat, ctx)}\n              />\n            )}\n            <RadialBar\n              background={{ fill: \"var(--lt-muted)\" }}\n              cornerRadius={6}\n              dataKey={series.dataKey}\n              name={series.name}\n            >\n              {props.data.map((datum, index) => (\n                <Cell key={index} fill={datumColor(datum, series, index)} />\n              ))}\n            </RadialBar>\n          </RadialBarChart>\n        </ResponsiveContainer>\n        {values.length === 1 && (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n            <span className=\"text-2xl font-semibold text-lt-surface-fg\">\n              {formatValue(values[0], props.valueFormat, ctx)}\n            </span>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction DistributionChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const ctx = useFormatContext();\n  const segments = props.data\n    .map((datum, index) => ({\n      color: datumColor(datum, series, index),\n      label: datumName(datum, series),\n      value: datumValue(datum, series.dataKey),\n    }))\n    .filter((segment) => segment.value > 0);\n  const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n\n  if (total <= 0) {\n    return <div className=\"h-2.5 w-full rounded-full bg-lt-muted\" data-lattice-distribution=\"\" />;\n  }\n\n  const formatPercent = new Intl.NumberFormat(ctx.locale, {\n    maximumFractionDigits: 1,\n    style: \"percent\",\n  });\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div\n        className=\"flex h-2.5 w-full gap-0.5 overflow-hidden rounded-full\"\n        data-lattice-distribution=\"\"\n      >\n        {segments.map((segment, index) => (\n          <div\n            key={index}\n            style={{ background: segment.color, width: `${(segment.value / total) * 100}%` }}\n            title={\n              props.tooltip\n                ? `${segment.label}: ${formatValue(segment.value, props.valueFormat, ctx)}`\n                : undefined\n            }\n          />\n        ))}\n      </div>\n      {props.legend && (\n        <ChartLegend\n          entries={segments.map((segment) => ({\n            color: segment.color,\n            label: segment.label,\n            value: formatPercent.format(segment.value / total),\n          }))}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction SpecialChart({ props, series }: { props: ChartProps; series: SpecialSeries }) {\n  switch (series.type) {\n    case \"distribution\":\n      return <DistributionChartView props={props} series={series} />;\n    case \"gauge\":\n      return <GaugeChartView props={props} series={series} />;\n    case \"pie\":\n      return <PieChartView props={props} series={series} />;\n  }\n}\n\nconst ChartView: RendererComponent<\"chart\"> = ({ node }) => {\n  const props = node.props;\n  const specialSeries = props.series.find(isSpecialSeries);\n  const hasCartesianSeries = props.series.some(isCartesianSeries);\n\n  return (\n    <ChartFrame description={props.description} id={nodeIdentity(node)} title={props.title}>\n      <div className=\"min-h-0 w-full\">\n        {specialSeries !== undefined && !hasCartesianSeries ? (\n          <SpecialChart props={props} series={specialSeries} />\n        ) : (\n          <CartesianChart props={props} />\n        )}\n      </div>\n    </ChartFrame>\n  );\n};\n\nexport default ChartView;\n"],"mappings":"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"}
+{"version":3,"file":"chart-view.js","names":[],"sources":["../../resources/js/ui/chart-view.tsx"],"sourcesContent":["import {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Cell,\n  ComposedChart,\n  Legend,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  RadialBar,\n  RadialBarChart,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n} from \"recharts\";\nimport type { ComponentType, ReactNode } from \"react\";\nimport { nodeIdentity } from \"@lattice-php/lattice/core/test-id\";\nimport { isRecord } from \"@lattice-php/lattice/core/materialize\";\nimport type { ComponentPropsOf, RendererComponent } from \"@lattice-php/lattice/core/types\";\nimport { coerceColor, colorValue } from \"@lattice-php/lattice/lib/color\";\nimport { useFormatContext } from \"@lattice-php/lattice/format/format-context\";\nimport { numericValue } from \"@lattice-php/lattice/format/numeric\";\nimport { formatValue } from \"@lattice-php/lattice/format/value\";\n\ntype ChartProps = ComponentPropsOf<\"chart\">;\ntype ChartSeries = ChartProps[\"series\"][number];\ntype ChartDatum = ChartProps[\"data\"][number];\ntype CartesianSeries = ChartSeries & { type: \"area\" | \"bar\" | \"line\" };\ntype SpecialSeries = ChartSeries & { type: \"distribution\" | \"gauge\" | \"pie\" };\ntype ChartMargin = { bottom: number; left: number; right: number; top: number };\ntype CartesianChartComponent = ComponentType<{\n  children: ReactNode;\n  data: ChartProps[\"data\"];\n  margin?: ChartMargin;\n}>;\n\nconst chartMargin: ChartMargin = { bottom: 0, left: 0, right: 16, top: 8 };\nconst compactLegendProps = {\n  align: \"center\" as const,\n  height: 24,\n  iconSize: 7,\n  verticalAlign: \"top\" as const,\n  wrapperStyle: { fontSize: 11, lineHeight: \"14px\", paddingBottom: 6 },\n};\nconst axisTick = { fontSize: 10 };\nconst tooltipProps = {\n  contentStyle: {\n    background: \"var(--lt-surface)\",\n    border: \"1px solid var(--lt-border)\",\n    borderRadius: \"var(--lt-radius-sm)\",\n    boxShadow: \"var(--lt-shadow-sm)\",\n    color: \"var(--lt-surface-fg)\",\n    fontSize: 12,\n  },\n  itemStyle: { color: \"var(--lt-surface-fg)\" },\n  labelStyle: { color: \"var(--lt-muted-fg)\" },\n} as const;\n\nconst palette = [\n  \"var(--lt-chart-1)\",\n  \"var(--lt-chart-2)\",\n  \"var(--lt-chart-3)\",\n  \"var(--lt-chart-4)\",\n  \"var(--lt-chart-5)\",\n  \"var(--lt-chart-6)\",\n  \"var(--lt-chart-7)\",\n  \"var(--lt-chart-8)\",\n];\n\nfunction colorAt(index: number): string {\n  return palette[index % palette.length] ?? \"var(--lt-chart-1)\";\n}\n\nfunction datumColor(datum: ChartDatum, series: ChartSeries, index: number): string {\n  if (isRecord(datum)) {\n    const color = coerceColor(datum.color);\n\n    if (color) {\n      return colorValue(color);\n    }\n  }\n\n  return series.color ? colorValue(series.color) : colorAt(index);\n}\n\nfunction isCartesianSeries(series: ChartSeries): series is CartesianSeries {\n  return series.type === \"area\" || series.type === \"bar\" || series.type === \"line\";\n}\n\nfunction isSpecialSeries(series: ChartSeries): series is SpecialSeries {\n  return !isCartesianSeries(series);\n}\n\nfunction datumValue(datum: ChartDatum, key: string): number {\n  return isRecord(datum) ? (numericValue(datum[key]) ?? 0) : 0;\n}\n\nfunction datumName(datum: ChartDatum, series: ChartSeries): string {\n  if (series.nameKey === null || !isRecord(datum)) {\n    return series.name;\n  }\n\n  const name = datum[series.nameKey];\n\n  return typeof name === \"string\" ? name : series.name;\n}\n\nfunction cartesianChartFor(series: CartesianSeries[]): CartesianChartComponent {\n  const types = new Set(series.map((item) => item.type));\n  const firstSeries = series[0];\n\n  if (firstSeries === undefined || types.size !== 1) {\n    return ComposedChart;\n  }\n\n  switch (firstSeries.type) {\n    case \"area\":\n      return AreaChart;\n    case \"bar\":\n      return BarChart;\n    case \"line\":\n      return LineChart;\n  }\n}\n\nfunction ChartFrame({\n  children,\n  description,\n  id,\n  title,\n}: {\n  children: ReactNode;\n  description: string | null;\n  id?: string;\n  title: string | null;\n}) {\n  const hasHeader = title !== null || description !== null;\n\n  return (\n    <div\n      className=\"flex flex-col gap-3 rounded-lt border border-lt-border bg-lt-surface p-4 text-lt-surface-fg shadow-lt-sm\"\n      data-lattice-component={id}\n    >\n      {hasHeader && (\n        <div className=\"flex min-w-0 flex-col gap-1.5\">\n          {title !== null && <div className=\"text-sm font-semibold leading-tight\">{title}</div>}\n          {description !== null && (\n            <div className=\"text-xs leading-5 text-lt-muted-fg\">{description}</div>\n          )}\n        </div>\n      )}\n      {children}\n    </div>\n  );\n}\n\nfunction CartesianChart({ props }: { props: ChartProps }) {\n  const series = props.series.filter(isCartesianSeries);\n  const RechartsChart = cartesianChartFor(series);\n  const ctx = useFormatContext();\n  const formatCategory = (value: unknown) => formatValue(value, props.categoryFormat, ctx);\n  const formatValueTick = (value: unknown) => formatValue(value, props.valueFormat, ctx);\n  const hasBarSeries = series.some((item) => item.type === \"bar\");\n  const tooltipCursor = hasBarSeries\n    ? { fill: \"var(--lt-muted-fg)\", fillOpacity: 0.15 }\n    : { stroke: \"var(--lt-muted-fg)\", strokeOpacity: 0.4 };\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <RechartsChart data={props.data} margin={chartMargin}>\n        {props.grid && <CartesianGrid strokeDasharray=\"3 3\" stroke=\"var(--lt-border)\" />}\n        {props.xAxis && props.categoryKey !== null && (\n          <XAxis\n            dataKey={props.categoryKey}\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatCategory}\n            tickLine={false}\n          />\n        )}\n        {props.yAxis && (\n          <YAxis\n            stroke=\"var(--lt-muted-fg)\"\n            tick={axisTick}\n            tickFormatter={formatValueTick}\n            tickLine={false}\n            width={42}\n          />\n        )}\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            cursor={tooltipCursor}\n            formatter={formatValueTick}\n            labelFormatter={formatCategory}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        {series.map((item, index) => {\n          const color = item.color ? colorValue(item.color) : colorAt(index);\n          const key = `${item.type}:${item.dataKey}`;\n\n          if (item.type === \"area\") {\n            return (\n              <Area\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                fillOpacity={0.16}\n                name={item.name}\n                stackId={item.stackId ?? undefined}\n                stroke={color}\n                type=\"monotone\"\n              />\n            );\n          }\n\n          if (item.type === \"bar\") {\n            return (\n              <Bar\n                key={key}\n                dataKey={item.dataKey}\n                fill={color}\n                name={item.name}\n                radius={[4, 4, 0, 0]}\n                stackId={item.stackId ?? undefined}\n              />\n            );\n          }\n\n          return (\n            <Line\n              key={key}\n              dataKey={item.dataKey}\n              dot={false}\n              name={item.name}\n              stroke={color}\n              strokeWidth={2}\n              type=\"monotone\"\n            />\n          );\n        })}\n      </RechartsChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction PieChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const ctx = useFormatContext();\n\n  return (\n    <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n      <PieChart margin={chartMargin}>\n        {props.tooltip && (\n          <Tooltip\n            {...tooltipProps}\n            formatter={(value) => formatValue(value, props.valueFormat, ctx)}\n            labelFormatter={(value) => formatValue(value, props.categoryFormat, ctx)}\n          />\n        )}\n        {props.legend && <Legend {...compactLegendProps} />}\n        <Pie\n          data={props.data}\n          dataKey={series.dataKey}\n          name={series.name}\n          nameKey={series.nameKey ?? undefined}\n          innerRadius={series.innerRadius}\n          outerRadius=\"68%\"\n        >\n          {props.data.map((datum, index) => (\n            <Cell key={index} fill={datumColor(datum, series, index)} />\n          ))}\n        </Pie>\n      </PieChart>\n    </ResponsiveContainer>\n  );\n}\n\nfunction ChartLegend({\n  entries,\n}: {\n  entries: Array<{ color: string; label: string; value?: string }>;\n}) {\n  return (\n    <div className=\"flex flex-wrap items-center justify-center gap-x-3 gap-y-1\">\n      {entries.map((entry, index) => (\n        <span\n          key={index}\n          className=\"flex items-center gap-1 text-[11px] leading-[14px] text-lt-muted-fg\"\n        >\n          <span\n            aria-hidden\n            className=\"size-[7px] rounded-full\"\n            style={{ background: entry.color }}\n          />\n          {entry.label}\n          {entry.value !== undefined && (\n            <span className=\"font-medium text-lt-surface-fg\">{entry.value}</span>\n          )}\n        </span>\n      ))}\n    </div>\n  );\n}\n\nfunction GaugeChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const ctx = useFormatContext();\n  const values = props.data.map((datum) => datumValue(datum, series.dataKey));\n  const max = series.maxValue ?? Math.max(0, ...values);\n  const legendEntries = props.data.map((datum, index) => ({\n    color: datumColor(datum, series, index),\n    label: datumName(datum, series),\n  }));\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      {props.legend && <ChartLegend entries={legendEntries} />}\n      <div className=\"relative\">\n        <ResponsiveContainer width=\"100%\" height={props.height} debounce={100}>\n          <RadialBarChart\n            data={props.data}\n            endAngle={-30}\n            innerRadius={series.innerRadius}\n            margin={chartMargin}\n            outerRadius=\"100%\"\n            startAngle={210}\n          >\n            <PolarAngleAxis type=\"number\" domain={[0, max]} tick={false} />\n            {props.tooltip && (\n              <Tooltip\n                {...tooltipProps}\n                formatter={(value) => formatValue(value, props.valueFormat, ctx)}\n              />\n            )}\n            <RadialBar\n              background={{ fill: \"var(--lt-muted)\" }}\n              cornerRadius={6}\n              dataKey={series.dataKey}\n              name={series.name}\n            >\n              {props.data.map((datum, index) => (\n                <Cell key={index} fill={datumColor(datum, series, index)} />\n              ))}\n            </RadialBar>\n          </RadialBarChart>\n        </ResponsiveContainer>\n        {values.length === 1 && (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n            <span className=\"text-2xl font-semibold text-lt-surface-fg\">\n              {formatValue(values[0], props.valueFormat, ctx)}\n            </span>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nfunction DistributionChartView({ props, series }: { props: ChartProps; series: ChartSeries }) {\n  const ctx = useFormatContext();\n  const segments = props.data\n    .map((datum, index) => ({\n      color: datumColor(datum, series, index),\n      label: datumName(datum, series),\n      value: datumValue(datum, series.dataKey),\n    }))\n    .filter((segment) => segment.value > 0);\n  const total = segments.reduce((sum, segment) => sum + segment.value, 0);\n\n  if (total <= 0) {\n    return <div className=\"h-2.5 w-full rounded-full bg-lt-muted\" data-lattice-distribution=\"\" />;\n  }\n\n  const formatPercent = new Intl.NumberFormat(ctx.locale, {\n    maximumFractionDigits: 1,\n    style: \"percent\",\n  });\n\n  return (\n    <div className=\"flex flex-col gap-1.5\">\n      <div\n        className=\"flex h-2.5 w-full gap-0.5 overflow-hidden rounded-full\"\n        data-lattice-distribution=\"\"\n      >\n        {segments.map((segment, index) => (\n          <div\n            key={index}\n            style={{ background: segment.color, width: `${(segment.value / total) * 100}%` }}\n            title={\n              props.tooltip\n                ? `${segment.label}: ${formatValue(segment.value, props.valueFormat, ctx)}`\n                : undefined\n            }\n          />\n        ))}\n      </div>\n      {props.legend && (\n        <ChartLegend\n          entries={segments.map((segment) => ({\n            color: segment.color,\n            label: segment.label,\n            value: formatPercent.format(segment.value / total),\n          }))}\n        />\n      )}\n    </div>\n  );\n}\n\nfunction SpecialChart({ props, series }: { props: ChartProps; series: SpecialSeries }) {\n  switch (series.type) {\n    case \"distribution\":\n      return <DistributionChartView props={props} series={series} />;\n    case \"gauge\":\n      return <GaugeChartView props={props} series={series} />;\n    case \"pie\":\n      return <PieChartView props={props} series={series} />;\n  }\n}\n\nconst ChartView: RendererComponent<\"chart\"> = ({ node }) => {\n  const props = node.props;\n  const specialSeries = props.series.find(isSpecialSeries);\n  const hasCartesianSeries = props.series.some(isCartesianSeries);\n\n  return (\n    <ChartFrame description={props.description} id={nodeIdentity(node)} title={props.title}>\n      <div className=\"min-h-0 w-full\">\n        {specialSeries !== undefined && !hasCartesianSeries ? (\n          <SpecialChart props={props} series={specialSeries} />\n        ) : (\n          <CartesianChart props={props} />\n        )}\n      </div>\n    </ChartFrame>\n  );\n};\n\nexport default ChartView;\n"],"mappings":"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"}

package/dist/ui/checkbox.js

@@ -7,7 +7,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 function Checkbox({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
 		"data-slot": "checkbox",
-		className: cn("peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-lt-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+		className: cn("peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-lt-xs transition-shadow outline-none focus-visible:ring-[length:var(--lt-ring-width)] disabled:cursor-not-allowed disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:data-[state=checked]:bg-lt-disabled disabled:data-[state=checked]:text-lt-disabled-fg disabled:data-[state=checked]:border-lt-disabled", className),
 		...props,
 		children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, {
 			"data-slot": "checkbox-indicator",

package/dist/ui/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../resources/js/ui/checkbox.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-lt-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <Icon name=\"check\" className=\"size-lt-icon-sm\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAMA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,OACE,oBAAC,kBAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,gcACA,SACF;EACA,GAAI;YAEJ,oBAAC,kBAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA;EACrB,CAAA;CACP,CAAA;AAE5B"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../resources/js/ui/checkbox.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-lt-input data-[state=checked]:bg-lt-primary data-[state=checked]:text-lt-primary-fg data-[state=checked]:border-lt-primary focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40 aria-invalid:border-lt-danger size-4 shrink-0 rounded-lt-xs border shadow-lt-xs transition-shadow outline-none focus-visible:ring-[length:var(--lt-ring-width)] disabled:cursor-not-allowed disabled:bg-lt-disabled disabled:text-lt-disabled-fg disabled:data-[state=checked]:bg-lt-disabled disabled:data-[state=checked]:text-lt-disabled-fg disabled:data-[state=checked]:border-lt-disabled\",\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"flex items-center justify-center text-current transition-none\"\n      >\n        <Icon name=\"check\" className=\"size-lt-icon-sm\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAMA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,OACE,oBAAC,kBAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,yoBACA,SACF;EACA,GAAI;YAEJ,oBAAC,kBAAkB,WAAnB;GACE,aAAU;GACV,WAAU;aAEV,oBAAC,MAAD;IAAM,MAAK;IAAQ,WAAU;GAAmB,CAAA;EACrB,CAAA;CACP,CAAA;AAE5B"}

package/dist/ui/confirm-dialog.d.ts

@@ -1,10 +1,11 @@
-import { ButtonVariant } from '../types/generated.js';
-export declare function ConfirmDialog({ title, description, confirmLabel, cancelLabel, confirmVariant, processing, confirmDisabled, onConfirm, onCancel, }: {
+import { Emphasis, Variant } from '../types/generated.js';
+export declare function ConfirmDialog({ title, description, confirmLabel, cancelLabel, confirmVariant, confirmEmphasis, processing, confirmDisabled, onConfirm, onCancel, }: {
     title: string;
     description?: string;
     confirmLabel: string;
     cancelLabel?: string;
-    confirmVariant?: ButtonVariant;
+    confirmVariant?: Variant | null;
+    confirmEmphasis?: Emphasis | null;
     processing?: boolean;
     confirmDisabled?: boolean;
     onConfirm: () => void;

package/dist/ui/confirm-dialog.js

@@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog.
 import { Spinner } from "./spinner.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region resources/js/ui/confirm-dialog.tsx
-function ConfirmDialog({ title, description, confirmLabel, cancelLabel = "Cancel", confirmVariant = "default", processing = false, confirmDisabled = false, onConfirm, onCancel }) {
+function ConfirmDialog({ title, description, confirmLabel, cancelLabel = "Cancel", confirmVariant = null, confirmEmphasis = null, processing = false, confirmDisabled = false, onConfirm, onCancel }) {
 	const blockWhileProcessing = (event) => {
 		if (processing) event.preventDefault();
 	};
@@ -24,13 +24,14 @@ function ConfirmDialog({ title, description, confirmLabel, cancelLabel = "Cancel
 				className: "mt-6 flex justify-end gap-2",
 				children: [/* @__PURE__ */ jsx(Button, {
 					type: "button",
-					variant: "outline",
+					emphasis: "outline",
 					"data-test": "confirm-cancel",
 					disabled: processing,
 					onClick: onCancel,
 					children: cancelLabel
 				}), /* @__PURE__ */ jsxs(Button, {
 					type: "button",
+					emphasis: confirmEmphasis,
 					variant: confirmVariant,
 					"data-test": "confirm-accept",
 					disabled: processing || confirmDisabled,

package/dist/ui/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../resources/js/ui/confirm-dialog.tsx"],"sourcesContent":["import type { ButtonVariant } from \"@lattice-php/lattice/types/generated\";\nimport { Button } from \"./button\";\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"./dialog\";\nimport { Spinner } from \"./spinner\";\n\nexport function ConfirmDialog({\n  title,\n  description,\n  confirmLabel,\n  cancelLabel = \"Cancel\",\n  confirmVariant = \"default\",\n  processing = false,\n  confirmDisabled = false,\n  onConfirm,\n  onCancel,\n}: {\n  title: string;\n  description?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  confirmVariant?: ButtonVariant;\n  processing?: boolean;\n  confirmDisabled?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  const blockWhileProcessing = (event: Event): void => {\n    if (processing) {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <Dialog\n      open\n      onOpenChange={(open) => {\n        if (!open) {\n          onCancel();\n        }\n      }}\n    >\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        width=\"md\"\n        onEscapeKeyDown={blockWhileProcessing}\n        onInteractOutside={blockWhileProcessing}\n      >\n        <div className=\"grid gap-2\">\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </div>\n        <div className=\"mt-6 flex justify-end gap-2\">\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            data-test=\"confirm-cancel\"\n            disabled={processing}\n            onClick={onCancel}\n          >\n            {cancelLabel}\n          </Button>\n          <Button\n            type=\"button\"\n            variant={confirmVariant}\n            data-test=\"confirm-accept\"\n            disabled={processing || confirmDisabled}\n            onClick={onConfirm}\n          >\n            {processing && <Spinner />}\n            {confirmLabel}\n          </Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc,EAC5B,OACA,aACA,cACA,cAAc,UACd,iBAAiB,WACjB,aAAa,OACb,kBAAkB,OAClB,WACA,YAWC;CACD,MAAM,wBAAwB,UAAuB;EACnD,IAAI,YACF,MAAM,eAAe;CAEzB;CAEA,OACE,oBAAC,QAAD;EACE,MAAA;EACA,eAAe,SAAS;GACtB,IAAI,CAAC,MACH,SAAS;EAEb;YAEA,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,OAAM;GACN,iBAAiB;GACjB,mBAAmB;aAJrB,CAME,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,eAAe,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CAChE;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,MAAK;KACL,SAAQ;KACR,aAAU;KACV,UAAU;KACV,SAAS;eAER;IACK,CAAA,GACR,qBAAC,QAAD;KACE,MAAK;KACL,SAAS;KACT,aAAU;KACV,UAAU,cAAc;KACxB,SAAS;eALX,CAOG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,YACK;MACL;KACQ;;CACT,CAAA;AAEZ"}
+{"version":3,"file":"confirm-dialog.js","names":[],"sources":["../../resources/js/ui/confirm-dialog.tsx"],"sourcesContent":["import type { Emphasis, Variant } from \"@lattice-php/lattice/types/generated\";\nimport { Button } from \"./button\";\nimport { Dialog, DialogContent, DialogDescription, DialogTitle } from \"./dialog\";\nimport { Spinner } from \"./spinner\";\n\nexport function ConfirmDialog({\n  title,\n  description,\n  confirmLabel,\n  cancelLabel = \"Cancel\",\n  confirmVariant = null,\n  confirmEmphasis = null,\n  processing = false,\n  confirmDisabled = false,\n  onConfirm,\n  onCancel,\n}: {\n  title: string;\n  description?: string;\n  confirmLabel: string;\n  cancelLabel?: string;\n  confirmVariant?: Variant | null;\n  confirmEmphasis?: Emphasis | null;\n  processing?: boolean;\n  confirmDisabled?: boolean;\n  onConfirm: () => void;\n  onCancel: () => void;\n}) {\n  const blockWhileProcessing = (event: Event): void => {\n    if (processing) {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <Dialog\n      open\n      onOpenChange={(open) => {\n        if (!open) {\n          onCancel();\n        }\n      }}\n    >\n      <DialogContent\n        {...(description ? {} : { \"aria-describedby\": undefined })}\n        width=\"md\"\n        onEscapeKeyDown={blockWhileProcessing}\n        onInteractOutside={blockWhileProcessing}\n      >\n        <div className=\"grid gap-2\">\n          <DialogTitle>{title}</DialogTitle>\n          {description && <DialogDescription>{description}</DialogDescription>}\n        </div>\n        <div className=\"mt-6 flex justify-end gap-2\">\n          <Button\n            type=\"button\"\n            emphasis=\"outline\"\n            data-test=\"confirm-cancel\"\n            disabled={processing}\n            onClick={onCancel}\n          >\n            {cancelLabel}\n          </Button>\n          <Button\n            type=\"button\"\n            emphasis={confirmEmphasis}\n            variant={confirmVariant}\n            data-test=\"confirm-accept\"\n            disabled={processing || confirmDisabled}\n            onClick={onConfirm}\n          >\n            {processing && <Spinner />}\n            {confirmLabel}\n          </Button>\n        </div>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":";;;;;AAKA,SAAgB,cAAc,EAC5B,OACA,aACA,cACA,cAAc,UACd,iBAAiB,MACjB,kBAAkB,MAClB,aAAa,OACb,kBAAkB,OAClB,WACA,YAYC;CACD,MAAM,wBAAwB,UAAuB;EACnD,IAAI,YACF,MAAM,eAAe;CAEzB;CAEA,OACE,oBAAC,QAAD;EACE,MAAA;EACA,eAAe,SAAS;GACtB,IAAI,CAAC,MACH,SAAS;EAEb;YAEA,qBAAC,eAAD;GACE,GAAK,cAAc,CAAC,IAAI,EAAE,oBAAoB,KAAA,EAAU;GACxD,OAAM;GACN,iBAAiB;GACjB,mBAAmB;aAJrB,CAME,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,eAAe,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CAChE;OACL,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KACE,MAAK;KACL,UAAS;KACT,aAAU;KACV,UAAU;KACV,SAAS;eAER;IACK,CAAA,GACR,qBAAC,QAAD;KACE,MAAK;KACL,UAAU;KACV,SAAS;KACT,aAAU;KACV,UAAU,cAAc;KACxB,SAAS;eANX,CAQG,cAAc,oBAAC,SAAD,CAAU,CAAA,GACxB,YACK;MACL;KACQ;;CACT,CAAA;AAEZ"}

package/dist/ui/control.d.ts

@@ -1,4 +1,4 @@
-export declare const FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]";
+export declare const FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-offset-[length:var(--lt-ring-offset)]";
 /**
  * The shared chrome for single-line form/table controls (text inputs, native
  * selects, and the Select/filter trigger buttons). `density` is the only axis

package/dist/ui/control.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 //#region resources/js/ui/control.ts
-var FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]";
+var FOCUS_RING = "focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-offset-[length:var(--lt-ring-offset)]";
 /**
 * The shared chrome for single-line form/table controls (text inputs, native
 * selects, and the Select/filter trigger buttons). `density` is the only axis

package/dist/ui/control.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.js","names":[],"sources":["../../resources/js/ui/control.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const FOCUS_RING =\n  \"focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\";\n\n/**\n * The shared chrome for single-line form/table controls (text inputs, native\n * selects, and the Select/filter trigger buttons). `density` is the only axis\n * that differs between forms (comfortable) and table filters (compact); the\n * border, focus ring, invalid, and disabled treatment are unified.\n */\nexport const controlSurface = cva(\n  [\n    \"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-lt-xs outline-none transition-[color,box-shadow]\",\n    \"placeholder:text-lt-muted-fg\",\n    FOCUS_RING,\n    \"aria-invalid:border-lt-danger aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lt-disabled disabled:text-lt-disabled-fg\",\n  ],\n  {\n    variants: {\n      density: {\n        comfortable: \"h-lt-control-md bg-transparent px-3 py-1 text-base\",\n        compact: \"h-lt-control-md bg-lt-bg px-2 text-sm font-normal\",\n      },\n    },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n"],"mappings":";;AAEA,IAAa,aACX;;;;;;;AAQF,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,aAAa;EACb,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,cAAc;AAC5C,CACF"}
+{"version":3,"file":"control.js","names":[],"sources":["../../resources/js/ui/control.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const FOCUS_RING =\n  \"focus-visible:border-lt-ring focus-visible:ring-lt-ring/50 focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-offset-[length:var(--lt-ring-offset)]\";\n\n/**\n * The shared chrome for single-line form/table controls (text inputs, native\n * selects, and the Select/filter trigger buttons). `density` is the only axis\n * that differs between forms (comfortable) and table filters (compact); the\n * border, focus ring, invalid, and disabled treatment are unified.\n */\nexport const controlSurface = cva(\n  [\n    \"w-full min-w-0 rounded-lt-sm border border-lt-input shadow-lt-xs outline-none transition-[color,box-shadow]\",\n    \"placeholder:text-lt-muted-fg\",\n    FOCUS_RING,\n    \"aria-invalid:border-lt-danger aria-invalid:ring-lt-danger/20 dark:aria-invalid:ring-lt-danger/40\",\n    \"disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-lt-disabled disabled:text-lt-disabled-fg\",\n  ],\n  {\n    variants: {\n      density: {\n        comfortable: \"h-lt-control-md bg-transparent px-3 py-1 text-base\",\n        compact: \"h-lt-control-md bg-lt-bg px-2 text-sm font-normal\",\n      },\n    },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n"],"mappings":";;AAEA,IAAa,aACX;;;;;;;AAQF,IAAa,iBAAiB,IAC5B;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,aAAa;EACb,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,cAAc;AAC5C,CACF"}

package/dist/ui/dialog.js

@@ -84,7 +84,7 @@ function DialogHeader({ closeLabel, description, title }) {
 				"aria-label": closeLabel,
 				"data-test": "dialog-close",
 				size: "icon",
-				variant: "ghost",
+				emphasis: "ghost",
 				children: /* @__PURE__ */ jsx(Icon, {
 					name: "x",
 					"aria-hidden": "true",

package/dist/ui/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../resources/js/ui/dialog.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cva } from \"class-variance-authority\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ModalWidth, Side } from \"@lattice-php/lattice/types/generated\";\n\nexport type DialogPlacement = \"center\" | Side;\n\nconst dialogContentVariants = cva(\n  \"fixed z-lt-modal w-full overflow-y-auto bg-lt-bg p-6 shadow-lt-lg\",\n  {\n    variants: {\n      placement: {\n        center:\n          \"left-1/2 top-1/2 max-h-[min(680px,calc(100vh-2rem))] -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border data-[state=open]:animate-lt-dialog-in data-[state=closed]:animate-lt-dialog-out\",\n        start:\n          \"inset-y-0 start-0 border-e border-lt-border data-[state=open]:animate-lt-sheet-in-start data-[state=closed]:animate-lt-sheet-out-start\",\n        end: \"inset-y-0 end-0 border-s border-lt-border data-[state=open]:animate-lt-sheet-in-end data-[state=closed]:animate-lt-sheet-out-end\",\n      },\n      width: {\n        sm: \"max-w-sm\",\n        md: \"max-w-md\",\n        lg: \"max-w-lg\",\n        xl: \"max-w-xl\",\n        \"2xl\": \"max-w-2xl\",\n        \"3xl\": \"max-w-3xl\",\n      },\n    },\n    defaultVariants: { placement: \"center\", width: \"lg\" },\n  },\n);\n\nfunction Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-sm text-lt-muted-fg\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  children,\n  className,\n  placement = \"center\",\n  width = \"lg\",\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  placement?: DialogPlacement;\n  width?: ModalWidth;\n}) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        className=\"fixed inset-0 z-lt-overlay bg-lt-overlay data-[state=open]:animate-lt-fade-in data-[state=closed]:animate-lt-fade-out\"\n        data-slot=\"dialog-overlay\"\n      />\n      <DialogPrimitive.Content\n        className={cn(dialogContentVariants({ placement, width }), className)}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\n/**\n * The shared dialog header: a title with an optional description and a ghost\n * close button. Pass `description` as `undefined` to suppress the description\n * and the matching `aria-describedby` wiring on the content.\n */\nfunction DialogHeader({\n  closeLabel,\n  description,\n  title,\n}: {\n  closeLabel?: string;\n  description?: React.ReactNode;\n  title: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-start justify-between gap-4\">\n      <div className=\"grid gap-2\">\n        <DialogTitle>{title}</DialogTitle>\n        {description ? <DialogDescription>{description}</DialogDescription> : null}\n      </div>\n      <DialogClose asChild>\n        <Button aria-label={closeLabel} data-test=\"dialog-close\" size=\"icon\" variant=\"ghost\">\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </Button>\n      </DialogClose>\n    </div>\n  );\n}\n\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle };\n"],"mappings":";;;;;;;;AAUA,IAAM,wBAAwB,IAC5B,qEACA;CACE,UAAU;EACR,WAAW;GACT,QACE;GACF,OACE;GACF,KAAK;EACP;EACA,OAAO;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,WAAW;EAAU,OAAO;CAAK;AACtD,CACF;AAEA,SAAS,OAAO,OAA0D;CACxE,OAAO,oBAAC,gBAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAAC,gBAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAAC,gBAAgB,OAAjB;EACE,WAAW,GAAG,qDAAqD,SAAS;EAC5E,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAAC,gBAAgB,aAAjB;EACE,WAAW,GAAG,4BAA4B,SAAS;EACnD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,UACA,WACA,YAAY,UACZ,QAAQ,MACR,GAAG,SAIF;CACD,OACE,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CACE,oBAAC,gBAAgB,SAAjB;EACE,WAAU;EACV,aAAU;CACX,CAAA,GACD,oBAAC,gBAAgB,SAAjB;EACE,WAAW,GAAG,sBAAsB;GAAE;GAAW;EAAM,CAAC,GAAG,SAAS;EACpE,aAAU;EACV,GAAI;EAEH;CACsB,CAAA,CACH,EAAA,CAAA;AAE5B;;;;;;AAOA,SAAS,aAAa,EACpB,YACA,aACA,SAKC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,cAAc,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,IAAI,IACnE;MACL,oBAAC,aAAD;GAAa,SAAA;aACX,oBAAC,QAAD;IAAQ,cAAY;IAAY,aAAU;IAAe,MAAK;IAAO,SAAQ;cAC3E,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EACG,CAAA,CACV;;AAET"}
+{"version":3,"file":"dialog.js","names":[],"sources":["../../resources/js/ui/dialog.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport * as React from \"react\";\nimport { cva } from \"class-variance-authority\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport type { ModalWidth, Side } from \"@lattice-php/lattice/types/generated\";\n\nexport type DialogPlacement = \"center\" | Side;\n\nconst dialogContentVariants = cva(\n  \"fixed z-lt-modal w-full overflow-y-auto bg-lt-bg p-6 shadow-lt-lg\",\n  {\n    variants: {\n      placement: {\n        center:\n          \"left-1/2 top-1/2 max-h-[min(680px,calc(100vh-2rem))] -translate-x-1/2 -translate-y-1/2 rounded-lt border border-lt-border data-[state=open]:animate-lt-dialog-in data-[state=closed]:animate-lt-dialog-out\",\n        start:\n          \"inset-y-0 start-0 border-e border-lt-border data-[state=open]:animate-lt-sheet-in-start data-[state=closed]:animate-lt-sheet-out-start\",\n        end: \"inset-y-0 end-0 border-s border-lt-border data-[state=open]:animate-lt-sheet-in-end data-[state=closed]:animate-lt-sheet-out-end\",\n      },\n      width: {\n        sm: \"max-w-sm\",\n        md: \"max-w-md\",\n        lg: \"max-w-lg\",\n        xl: \"max-w-xl\",\n        \"2xl\": \"max-w-2xl\",\n        \"3xl\": \"max-w-3xl\",\n      },\n    },\n    defaultVariants: { placement: \"center\", width: \"lg\" },\n  },\n);\n\nfunction Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n      data-slot=\"dialog-title\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      className={cn(\"text-sm text-lt-muted-fg\", className)}\n      data-slot=\"dialog-description\"\n      {...props}\n    />\n  );\n}\n\nfunction DialogContent({\n  children,\n  className,\n  placement = \"center\",\n  width = \"lg\",\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  placement?: DialogPlacement;\n  width?: ModalWidth;\n}) {\n  return (\n    <DialogPrimitive.Portal>\n      <DialogPrimitive.Overlay\n        className=\"fixed inset-0 z-lt-overlay bg-lt-overlay data-[state=open]:animate-lt-fade-in data-[state=closed]:animate-lt-fade-out\"\n        data-slot=\"dialog-overlay\"\n      />\n      <DialogPrimitive.Content\n        className={cn(dialogContentVariants({ placement, width }), className)}\n        data-slot=\"dialog-content\"\n        {...props}\n      >\n        {children}\n      </DialogPrimitive.Content>\n    </DialogPrimitive.Portal>\n  );\n}\n\n/**\n * The shared dialog header: a title with an optional description and a ghost\n * close button. Pass `description` as `undefined` to suppress the description\n * and the matching `aria-describedby` wiring on the content.\n */\nfunction DialogHeader({\n  closeLabel,\n  description,\n  title,\n}: {\n  closeLabel?: string;\n  description?: React.ReactNode;\n  title: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-start justify-between gap-4\">\n      <div className=\"grid gap-2\">\n        <DialogTitle>{title}</DialogTitle>\n        {description ? <DialogDescription>{description}</DialogDescription> : null}\n      </div>\n      <DialogClose asChild>\n        <Button aria-label={closeLabel} data-test=\"dialog-close\" size=\"icon\" emphasis=\"ghost\">\n          <Icon name=\"x\" aria-hidden=\"true\" className=\"size-lt-icon-md\" />\n        </Button>\n      </DialogClose>\n    </div>\n  );\n}\n\nexport { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle };\n"],"mappings":";;;;;;;;AAUA,IAAM,wBAAwB,IAC5B,qEACA;CACE,UAAU;EACR,WAAW;GACT,QACE;GACF,OACE;GACF,KAAK;EACP;EACA,OAAO;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACP,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,WAAW;EAAU,OAAO;CAAK;AACtD,CACF;AAEA,SAAS,OAAO,OAA0D;CACxE,OAAO,oBAAC,gBAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAAC,gBAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAAC,gBAAgB,OAAjB;EACE,WAAW,GAAG,qDAAqD,SAAS;EAC5E,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAAC,gBAAgB,aAAjB;EACE,WAAW,GAAG,4BAA4B,SAAS;EACnD,aAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,UACA,WACA,YAAY,UACZ,QAAQ,MACR,GAAG,SAIF;CACD,OACE,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CACE,oBAAC,gBAAgB,SAAjB;EACE,WAAU;EACV,aAAU;CACX,CAAA,GACD,oBAAC,gBAAgB,SAAjB;EACE,WAAW,GAAG,sBAAsB;GAAE;GAAW;EAAM,CAAC,GAAG,SAAS;EACpE,aAAU;EACV,GAAI;EAEH;CACsB,CAAA,CACH,EAAA,CAAA;AAE5B;;;;;;AAOA,SAAS,aAAa,EACpB,YACA,aACA,SAKC;CACD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,cAAc,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,IAAI,IACnE;MACL,oBAAC,aAAD;GAAa,SAAA;aACX,oBAAC,QAAD;IAAQ,cAAY;IAAY,aAAU;IAAe,MAAK;IAAO,UAAS;cAC5E,oBAAC,MAAD;KAAM,MAAK;KAAI,eAAY;KAAO,WAAU;IAAmB,CAAA;GACzD,CAAA;EACG,CAAA,CACV;;AAET"}

package/dist/ui/dropdown-menu.d.ts

@@ -7,8 +7,8 @@ declare function DropdownMenuContent({ className, ...props }: React.ComponentPro
  * A menu entry that closes the menu when activated. Wrap the click handler in
  * `onClick`; selecting the item dismisses the popover via `PopoverClose`.
  */
-declare function DropdownMenuItem({ children, className, destructive, icon, ...props }: React.ComponentProps<"button"> & {
-    destructive?: boolean;
+declare function DropdownMenuItem({ children, className, danger, icon, ...props }: React.ComponentProps<"button"> & {
+    danger?: boolean;
     icon?: string;
 }): React.JSX.Element;
 export { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };

package/dist/ui/dropdown-menu.js

@@ -21,13 +21,13 @@ function DropdownMenuContent({ className, ...props }) {
 * A menu entry that closes the menu when activated. Wrap the click handler in
 * `onClick`; selecting the item dismisses the popover via `PopoverClose`.
 */
-function DropdownMenuItem({ children, className, destructive = false, icon, ...props }) {
+function DropdownMenuItem({ children, className, danger = false, icon, ...props }) {
 	return /* @__PURE__ */ jsx(PopoverClose, {
 		asChild: true,
 		children: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			role: "menuitem",
-			className: cn("flex w-full items-center gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm [&_svg]:size-lt-icon-sm", destructive ? "text-lt-danger hover:bg-lt-danger/10" : "hover:bg-lt-accent hover:text-lt-accent-fg", className),
+			className: cn("flex w-full items-center gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm [&_svg]:size-lt-icon-sm", danger ? "text-lt-danger hover:bg-lt-danger/10" : "hover:bg-lt-accent hover:text-lt-accent-fg", className),
 			...props,
 			children: [icon ? /* @__PURE__ */ jsx(Icon, {
 				name: icon,

package/dist/ui/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../resources/js/ui/dropdown-menu.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Popover, PopoverClose, PopoverContent, PopoverTrigger } from \"./popover\";\n\nfunction DropdownMenu(props: React.ComponentProps<typeof Popover>) {\n  return <Popover {...props} />;\n}\n\nfunction DropdownMenuTrigger(props: React.ComponentProps<typeof PopoverTrigger>) {\n  return <PopoverTrigger {...props} />;\n}\n\nfunction DropdownMenuContent({ className, ...props }: React.ComponentProps<typeof PopoverContent>) {\n  return (\n    <PopoverContent className={cn(\"grid min-w-40 gap-1 p-1\", className)} role=\"menu\" {...props} />\n  );\n}\n\n/**\n * A menu entry that closes the menu when activated. Wrap the click handler in\n * `onClick`; selecting the item dismisses the popover via `PopoverClose`.\n */\nfunction DropdownMenuItem({\n  children,\n  className,\n  destructive = false,\n  icon,\n  ...props\n}: React.ComponentProps<\"button\"> & { destructive?: boolean; icon?: string }) {\n  return (\n    <PopoverClose asChild>\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        className={cn(\n          \"flex w-full items-center gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm [&_svg]:size-lt-icon-sm\",\n          destructive\n            ? \"text-lt-danger hover:bg-lt-danger/10\"\n            : \"hover:bg-lt-accent hover:text-lt-accent-fg\",\n          className,\n        )}\n        {...props}\n      >\n        {icon ? <Icon name={icon} aria-hidden=\"true\" /> : null}\n        {children}\n      </button>\n    </PopoverClose>\n  );\n}\n\nexport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };\n"],"mappings":";;;;;;AAKA,SAAS,aAAa,OAA6C;CACjE,OAAO,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA;AAC9B;AAEA,SAAS,oBAAoB,OAAoD;CAC/E,OAAO,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA;AACrC;AAEA,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAsD;CACjG,OACE,oBAAC,gBAAD;EAAgB,WAAW,GAAG,2BAA2B,SAAS;EAAG,MAAK;EAAO,GAAI;CAAQ,CAAA;AAEjG;;;;;AAMA,SAAS,iBAAiB,EACxB,UACA,WACA,cAAc,OACd,MACA,GAAG,SACyE;CAC5E,OACE,oBAAC,cAAD;EAAc,SAAA;YACZ,qBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,WAAW,GACT,sGACA,cACI,yCACA,8CACJ,SACF;GACA,GAAI;aAVN,CAYG,OAAO,oBAAC,MAAD;IAAM,MAAM;IAAM,eAAY;GAAQ,CAAA,IAAI,MACjD,QACK;;CACI,CAAA;AAElB"}
+{"version":3,"file":"dropdown-menu.js","names":[],"sources":["../../resources/js/ui/dropdown-menu.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport * as React from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\nimport { Popover, PopoverClose, PopoverContent, PopoverTrigger } from \"./popover\";\n\nfunction DropdownMenu(props: React.ComponentProps<typeof Popover>) {\n  return <Popover {...props} />;\n}\n\nfunction DropdownMenuTrigger(props: React.ComponentProps<typeof PopoverTrigger>) {\n  return <PopoverTrigger {...props} />;\n}\n\nfunction DropdownMenuContent({ className, ...props }: React.ComponentProps<typeof PopoverContent>) {\n  return (\n    <PopoverContent className={cn(\"grid min-w-40 gap-1 p-1\", className)} role=\"menu\" {...props} />\n  );\n}\n\n/**\n * A menu entry that closes the menu when activated. Wrap the click handler in\n * `onClick`; selecting the item dismisses the popover via `PopoverClose`.\n */\nfunction DropdownMenuItem({\n  children,\n  className,\n  danger = false,\n  icon,\n  ...props\n}: React.ComponentProps<\"button\"> & { danger?: boolean; icon?: string }) {\n  return (\n    <PopoverClose asChild>\n      <button\n        type=\"button\"\n        role=\"menuitem\"\n        className={cn(\n          \"flex w-full items-center gap-2 rounded-lt-sm px-3 py-1.5 text-left text-sm [&_svg]:size-lt-icon-sm\",\n          danger\n            ? \"text-lt-danger hover:bg-lt-danger/10\"\n            : \"hover:bg-lt-accent hover:text-lt-accent-fg\",\n          className,\n        )}\n        {...props}\n      >\n        {icon ? <Icon name={icon} aria-hidden=\"true\" /> : null}\n        {children}\n      </button>\n    </PopoverClose>\n  );\n}\n\nexport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger };\n"],"mappings":";;;;;;AAKA,SAAS,aAAa,OAA6C;CACjE,OAAO,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA;AAC9B;AAEA,SAAS,oBAAoB,OAAoD;CAC/E,OAAO,oBAAC,gBAAD,EAAgB,GAAI,MAAQ,CAAA;AACrC;AAEA,SAAS,oBAAoB,EAAE,WAAW,GAAG,SAAsD;CACjG,OACE,oBAAC,gBAAD;EAAgB,WAAW,GAAG,2BAA2B,SAAS;EAAG,MAAK;EAAO,GAAI;CAAQ,CAAA;AAEjG;;;;;AAMA,SAAS,iBAAiB,EACxB,UACA,WACA,SAAS,OACT,MACA,GAAG,SACoE;CACvE,OACE,oBAAC,cAAD;EAAc,SAAA;YACZ,qBAAC,UAAD;GACE,MAAK;GACL,MAAK;GACL,WAAW,GACT,sGACA,SACI,yCACA,8CACJ,SACF;GACA,GAAI;aAVN,CAYG,OAAO,oBAAC,MAAD;IAAM,MAAM;IAAM,eAAY;GAAQ,CAAA,IAAI,MACjD,QACK;;CACI,CAAA;AAElB"}

package/dist/ui/icon-button.d.ts

@@ -3,15 +3,15 @@ import * as React from "react";
 /**
  * A compact, resizable icon button — the shared affordance behind toolbar
  * triggers, popover triggers, and inline clear/remove buttons. `ghost` matches
- * `Button variant="ghost"` (accent hover) and reacts to `aria-pressed` (toggle)
+ * `Button emphasis="ghost"` (accent hover) and reacts to `aria-pressed` (toggle)
  * and `data-[state=open]` (a popover trigger). `segmented` joins onto the right
  * of an adjacent input. Size defaults to `sm`; pass `size` to resize.
  */
 declare const iconButtonVariants: (props?: ({
-    variant?: "ghost" | "segmented" | null | undefined;
+    emphasis?: "ghost" | "segmented" | null | undefined;
     size?: "sm" | "md" | "xs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare function IconButton({ icon, label, active, size, variant, className, children, ref, ...props }: Omit<React.ComponentProps<"button">, "aria-pressed"> & VariantProps<typeof iconButtonVariants> & {
+export declare function IconButton({ icon, label, active, size, emphasis, className, children, ref, ...props }: Omit<React.ComponentProps<"button">, "aria-pressed"> & VariantProps<typeof iconButtonVariants> & {
     /** Icon glyph name; omit and pass `children` for custom content. */
     icon?: string;
     /** Accessible name (also used when the button shows only an icon). */

package/dist/ui/icon-button.js

@@ -7,13 +7,13 @@ import { cva } from "class-variance-authority";
 /**
 * A compact, resizable icon button — the shared affordance behind toolbar
 * triggers, popover triggers, and inline clear/remove buttons. `ghost` matches
-* `Button variant="ghost"` (accent hover) and reacts to `aria-pressed` (toggle)
+* `Button emphasis="ghost"` (accent hover) and reacts to `aria-pressed` (toggle)
 * and `data-[state=open]` (a popover trigger). `segmented` joins onto the right
 * of an adjacent input. Size defaults to `sm`; pass `size` to resize.
 */
-var iconButtonVariants = cva(cn("relative inline-flex shrink-0 items-center justify-center rounded-lt-sm transition-colors", "outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50", "disabled:pointer-events-none disabled:opacity-50"), {
+var iconButtonVariants = cva(cn("relative inline-flex shrink-0 items-center justify-center rounded-lt-sm transition-colors", "outline-none focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-lt-ring/50", "disabled:pointer-events-none disabled:bg-lt-disabled disabled:text-lt-disabled-fg"), {
 	variants: {
-		variant: {
+		emphasis: {
 			ghost: cn("text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg", "data-[state=open]:bg-lt-accent data-[state=open]:text-lt-accent-fg", "aria-pressed:bg-lt-accent aria-pressed:text-lt-accent-fg"),
 			segmented: cn("-ml-px rounded-l-none border border-lt-input text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg", "data-[state=open]:z-10 data-[state=open]:border-lt-primary data-[state=open]:text-lt-fg")
 		},
@@ -24,18 +24,18 @@ var iconButtonVariants = cva(cn("relative inline-flex shrink-0 items-center just
 		}
 	},
 	defaultVariants: {
-		variant: "ghost",
+		emphasis: "ghost",
 		size: "sm"
 	}
 });
-function IconButton({ icon, label, active, size, variant, className, children, ref, ...props }) {
+function IconButton({ icon, label, active, size, emphasis, className, children, ref, ...props }) {
 	return /* @__PURE__ */ jsxs("button", {
 		ref,
 		type: "button",
 		"aria-label": label,
 		"aria-pressed": active,
 		className: cn(iconButtonVariants({
-			variant,
+			emphasis,
 			size
 		}), className),
 		...props,

package/dist/ui/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../resources/js/ui/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * A compact, resizable icon button — the shared affordance behind toolbar\n * triggers, popover triggers, and inline clear/remove buttons. `ghost` matches\n * `Button variant=\"ghost\"` (accent hover) and reacts to `aria-pressed` (toggle)\n * and `data-[state=open]` (a popover trigger). `segmented` joins onto the right\n * of an adjacent input. Size defaults to `sm`; pass `size` to resize.\n */\nconst iconButtonVariants = cva(\n  cn(\n    \"relative inline-flex shrink-0 items-center justify-center rounded-lt-sm transition-colors\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-lt-ring/50\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n  ),\n  {\n    variants: {\n      variant: {\n        ghost: cn(\n          \"text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg\",\n          \"data-[state=open]:bg-lt-accent data-[state=open]:text-lt-accent-fg\",\n          \"aria-pressed:bg-lt-accent aria-pressed:text-lt-accent-fg\",\n        ),\n        segmented: cn(\n          \"-ml-px rounded-l-none border border-lt-input text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg\",\n          \"data-[state=open]:z-10 data-[state=open]:border-lt-primary data-[state=open]:text-lt-fg\",\n        ),\n      },\n      size: {\n        xs: \"size-5 [&_svg]:size-lt-icon-sm\",\n        sm: \"size-7 [&_svg]:size-lt-icon-md\",\n        md: \"size-lt-control-md [&_svg]:size-lt-icon-md\",\n      },\n    },\n    defaultVariants: { variant: \"ghost\", size: \"sm\" },\n  },\n);\n\nexport function IconButton({\n  icon,\n  label,\n  active,\n  size,\n  variant,\n  className,\n  children,\n  ref,\n  ...props\n}: Omit<React.ComponentProps<\"button\">, \"aria-pressed\"> &\n  VariantProps<typeof iconButtonVariants> & {\n    /** Icon glyph name; omit and pass `children` for custom content. */\n    icon?: string;\n    /** Accessible name (also used when the button shows only an icon). */\n    label: string;\n    /** Toggle state — sets `aria-pressed` and the pressed styling. */\n    active?: boolean;\n  }) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={active}\n      className={cn(iconButtonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {icon ? <Icon name={icon} aria-hidden=\"true\" /> : null}\n      {children}\n    </button>\n  );\n}\n\nexport { iconButtonVariants };\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAM,qBAAqB,IACzB,GACE,6FACA,mEACA,kDACF,GACA;CACE,UAAU;EACR,SAAS;GACP,OAAO,GACL,+DACA,sEACA,0DACF;GACA,WAAW,GACT,4GACA,yFACF;EACF;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EAAE,SAAS;EAAS,MAAM;CAAK;AAClD,CACF;AAEA,SAAgB,WAAW,EACzB,MACA,OACA,QACA,MACA,SACA,WACA,UACA,KACA,GAAG,SASA;CACH,OACE,qBAAC,UAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,gBAAc;EACd,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC9D,GAAI;YANN,CAQG,OAAO,oBAAC,MAAD;GAAM,MAAM;GAAM,eAAY;EAAQ,CAAA,IAAI,MACjD,QACK;;AAEZ"}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../resources/js/ui/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Icon } from \"@lattice-php/lattice/icons\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\n/**\n * A compact, resizable icon button — the shared affordance behind toolbar\n * triggers, popover triggers, and inline clear/remove buttons. `ghost` matches\n * `Button emphasis=\"ghost\"` (accent hover) and reacts to `aria-pressed` (toggle)\n * and `data-[state=open]` (a popover trigger). `segmented` joins onto the right\n * of an adjacent input. Size defaults to `sm`; pass `size` to resize.\n */\nconst iconButtonVariants = cva(\n  cn(\n    \"relative inline-flex shrink-0 items-center justify-center rounded-lt-sm transition-colors\",\n    \"outline-none focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-lt-ring/50\",\n    \"disabled:pointer-events-none disabled:bg-lt-disabled disabled:text-lt-disabled-fg\",\n  ),\n  {\n    variants: {\n      emphasis: {\n        ghost: cn(\n          \"text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg\",\n          \"data-[state=open]:bg-lt-accent data-[state=open]:text-lt-accent-fg\",\n          \"aria-pressed:bg-lt-accent aria-pressed:text-lt-accent-fg\",\n        ),\n        segmented: cn(\n          \"-ml-px rounded-l-none border border-lt-input text-lt-muted-fg hover:bg-lt-accent hover:text-lt-accent-fg\",\n          \"data-[state=open]:z-10 data-[state=open]:border-lt-primary data-[state=open]:text-lt-fg\",\n        ),\n      },\n      size: {\n        xs: \"size-5 [&_svg]:size-lt-icon-sm\",\n        sm: \"size-7 [&_svg]:size-lt-icon-md\",\n        md: \"size-lt-control-md [&_svg]:size-lt-icon-md\",\n      },\n    },\n    defaultVariants: { emphasis: \"ghost\", size: \"sm\" },\n  },\n);\n\nexport function IconButton({\n  icon,\n  label,\n  active,\n  size,\n  emphasis,\n  className,\n  children,\n  ref,\n  ...props\n}: Omit<React.ComponentProps<\"button\">, \"aria-pressed\"> &\n  VariantProps<typeof iconButtonVariants> & {\n    /** Icon glyph name; omit and pass `children` for custom content. */\n    icon?: string;\n    /** Accessible name (also used when the button shows only an icon). */\n    label: string;\n    /** Toggle state — sets `aria-pressed` and the pressed styling. */\n    active?: boolean;\n  }) {\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      aria-label={label}\n      aria-pressed={active}\n      className={cn(iconButtonVariants({ emphasis, size }), className)}\n      {...props}\n    >\n      {icon ? <Icon name={icon} aria-hidden=\"true\" /> : null}\n      {children}\n    </button>\n  );\n}\n\nexport { iconButtonVariants };\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAM,qBAAqB,IACzB,GACE,6FACA,+FACA,mFACF,GACA;CACE,UAAU;EACR,UAAU;GACR,OAAO,GACL,+DACA,sEACA,0DACF;GACA,WAAW,GACT,4GACA,yFACF;EACF;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EAAE,UAAU;EAAS,MAAM;CAAK;AACnD,CACF;AAEA,SAAgB,WAAW,EACzB,MACA,OACA,QACA,MACA,UACA,WACA,UACA,KACA,GAAG,SASA;CACH,OACE,qBAAC,UAAD;EACO;EACL,MAAK;EACL,cAAY;EACZ,gBAAc;EACd,WAAW,GAAG,mBAAmB;GAAE;GAAU;EAAK,CAAC,GAAG,SAAS;EAC/D,GAAI;YANN,CAQG,OAAO,oBAAC,MAAD;GAAM,MAAM;GAAM,eAAY;EAAQ,CAAA,IAAI,MACjD,QACK;;AAEZ"}

package/dist/ui/image-preview.js

@@ -51,7 +51,7 @@ function PreviewableImage({ src, alt, previewable, width, height, className, tes
 						"aria-label": t("common.close", "Close"),
 						"data-test": "lightbox-close",
 						size: "icon",
-						variant: "ghost",
+						emphasis: "ghost",
 						className: "absolute top-2 right-2 bg-lt-bg/80 hover:bg-lt-bg"
 					})
 				})

package/dist/ui/image-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-preview.js","names":[],"sources":["../../resources/js/ui/image-preview.tsx"],"sourcesContent":["import { useT } from \"@lattice-php/lattice/i18n\";\nimport { type ReactNode, useState } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { Dialog, DialogClose, DialogContent, DialogTitle } from \"./dialog\";\n\ninterface PreviewableImageProps {\n  src: string;\n  alt: string;\n  previewable: boolean;\n  width?: number;\n  height?: number;\n  className?: string;\n  testId?: string;\n}\n\nexport function PreviewableImage({\n  src,\n  alt,\n  previewable,\n  width,\n  height,\n  className,\n  testId,\n}: PreviewableImageProps): ReactNode {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  const image = (\n    <img\n      alt={alt}\n      src={src}\n      width={width}\n      height={height}\n      className={className}\n      style={width ? { width, height } : undefined}\n    />\n  );\n\n  if (!previewable) {\n    return image;\n  }\n\n  const openLabel = t(\"common.image.open-preview\", \"View image\");\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        data-test={testId}\n        className=\"cursor-zoom-in\"\n        aria-label={openLabel}\n        onClick={() => setOpen(true)}\n      >\n        {image}\n      </button>\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogContent\n          aria-describedby={undefined}\n          className=\"max-h-[90vh] w-auto max-w-[90vw] border-none bg-transparent p-0 shadow-none\"\n        >\n          <DialogTitle className=\"sr-only\">{alt || openLabel}</DialogTitle>\n          <img\n            alt={alt}\n            src={src}\n            data-slot=\"image-lightbox\"\n            className=\"max-h-[90vh] max-w-[90vw] rounded-lt object-contain\"\n          />\n          <DialogClose asChild>\n            <Button\n              icon=\"x\"\n              aria-label={t(\"common.close\", \"Close\")}\n              data-test=\"lightbox-close\"\n              size=\"icon\"\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2 bg-lt-bg/80 hover:bg-lt-bg\"\n            />\n          </DialogClose>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,iBAAiB,EAC/B,KACA,KACA,aACA,OACA,QACA,WACA,UACmC;CACnC,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,QACJ,oBAAC,OAAD;EACO;EACA;EACE;EACC;EACG;EACX,OAAO,QAAQ;GAAE;GAAO;EAAO,IAAI,KAAA;CACpC,CAAA;CAGH,IAAI,CAAC,aACH,OAAO;CAGT,MAAM,YAAY,EAAE,6BAA6B,YAAY;CAE7D,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,aAAW;EACX,WAAU;EACV,cAAY;EACZ,eAAe,QAAQ,IAAI;YAE1B;CACK,CAAA,GACR,oBAAC,QAAD;EAAc;EAAM,cAAc;YAChC,qBAAC,eAAD;GACE,oBAAkB,KAAA;GAClB,WAAU;aAFZ;IAIE,oBAAC,aAAD;KAAa,WAAU;eAAW,OAAO;IAAuB,CAAA;IAChE,oBAAC,OAAD;KACO;KACA;KACL,aAAU;KACV,WAAU;IACX,CAAA;IACD,oBAAC,aAAD;KAAa,SAAA;eACX,oBAAC,QAAD;MACE,MAAK;MACL,cAAY,EAAE,gBAAgB,OAAO;MACrC,aAAU;MACV,MAAK;MACL,SAAQ;MACR,WAAU;KACX,CAAA;IACU,CAAA;GACA;;CACT,CAAA,CACR,EAAA,CAAA;AAEN"}
+{"version":3,"file":"image-preview.js","names":[],"sources":["../../resources/js/ui/image-preview.tsx"],"sourcesContent":["import { useT } from \"@lattice-php/lattice/i18n\";\nimport { type ReactNode, useState } from \"react\";\nimport { Button } from \"@lattice-php/lattice/ui/button\";\nimport { Dialog, DialogClose, DialogContent, DialogTitle } from \"./dialog\";\n\ninterface PreviewableImageProps {\n  src: string;\n  alt: string;\n  previewable: boolean;\n  width?: number;\n  height?: number;\n  className?: string;\n  testId?: string;\n}\n\nexport function PreviewableImage({\n  src,\n  alt,\n  previewable,\n  width,\n  height,\n  className,\n  testId,\n}: PreviewableImageProps): ReactNode {\n  const { t } = useT(\"lattice\");\n  const [open, setOpen] = useState(false);\n\n  const image = (\n    <img\n      alt={alt}\n      src={src}\n      width={width}\n      height={height}\n      className={className}\n      style={width ? { width, height } : undefined}\n    />\n  );\n\n  if (!previewable) {\n    return image;\n  }\n\n  const openLabel = t(\"common.image.open-preview\", \"View image\");\n\n  return (\n    <>\n      <button\n        type=\"button\"\n        data-test={testId}\n        className=\"cursor-zoom-in\"\n        aria-label={openLabel}\n        onClick={() => setOpen(true)}\n      >\n        {image}\n      </button>\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogContent\n          aria-describedby={undefined}\n          className=\"max-h-[90vh] w-auto max-w-[90vw] border-none bg-transparent p-0 shadow-none\"\n        >\n          <DialogTitle className=\"sr-only\">{alt || openLabel}</DialogTitle>\n          <img\n            alt={alt}\n            src={src}\n            data-slot=\"image-lightbox\"\n            className=\"max-h-[90vh] max-w-[90vw] rounded-lt object-contain\"\n          />\n          <DialogClose asChild>\n            <Button\n              icon=\"x\"\n              aria-label={t(\"common.close\", \"Close\")}\n              data-test=\"lightbox-close\"\n              size=\"icon\"\n              emphasis=\"ghost\"\n              className=\"absolute top-2 right-2 bg-lt-bg/80 hover:bg-lt-bg\"\n            />\n          </DialogClose>\n        </DialogContent>\n      </Dialog>\n    </>\n  );\n}\n"],"mappings":";;;;;;AAeA,SAAgB,iBAAiB,EAC/B,KACA,KACA,aACA,OACA,QACA,WACA,UACmC;CACnC,MAAM,EAAE,MAAM,KAAK,SAAS;CAC5B,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,QACJ,oBAAC,OAAD;EACO;EACA;EACE;EACC;EACG;EACX,OAAO,QAAQ;GAAE;GAAO;EAAO,IAAI,KAAA;CACpC,CAAA;CAGH,IAAI,CAAC,aACH,OAAO;CAGT,MAAM,YAAY,EAAE,6BAA6B,YAAY;CAE7D,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;EACE,MAAK;EACL,aAAW;EACX,WAAU;EACV,cAAY;EACZ,eAAe,QAAQ,IAAI;YAE1B;CACK,CAAA,GACR,oBAAC,QAAD;EAAc;EAAM,cAAc;YAChC,qBAAC,eAAD;GACE,oBAAkB,KAAA;GAClB,WAAU;aAFZ;IAIE,oBAAC,aAAD;KAAa,WAAU;eAAW,OAAO;IAAuB,CAAA;IAChE,oBAAC,OAAD;KACO;KACA;KACL,aAAU;KACV,WAAU;IACX,CAAA;IACD,oBAAC,aAAD;KAAa,SAAA;eACX,oBAAC,QAAD;MACE,MAAK;MACL,cAAY,EAAE,gBAAgB,OAAO;MACrC,aAAU;MACV,MAAK;MACL,UAAS;MACT,WAAU;KACX,CAAA;IACU,CAAA;GACA;;CACT,CAAA,CACR,EAAA,CAAA;AAEN"}

package/dist/ui/index.d.ts

@@ -1,8 +1,8 @@
 export { AffixGroup } from './affix-group.js';
 export { ActionMenuProvider, actionMenuItemClassName, useActionMenu } from './action-menu-context.js';
-export { Badge, badgeVariants } from './badge.js';
+export { Badge } from './badge.js';
 export { Button, buttonVariants } from './button.js';
-export type { ButtonVariant } from './button.js';
+export type { Emphasis, Variant } from './button.js';
 export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './card.js';
 export { Checkbox } from './checkbox.js';
 export { Combobox } from './combobox.js';

package/dist/ui/index.js

@@ -7,7 +7,7 @@ import { ConfirmDialog } from "./confirm-dialog.js";
 import { Skeleton } from "./skeleton.js";
 import { ActionMenuProvider, actionMenuItemClassName, useActionMenu } from "./action-menu-context.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
-import { Badge, badgeVariants } from "./badge.js";
+import { Badge } from "./badge.js";
 import { InfoTooltip } from "./info-tooltip.js";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./card.js";
 import { CopyButton, CopyableText, copyToClipboard } from "./copyable-text.js";
@@ -24,4 +24,4 @@ import { InputOTP } from "./input-otp.js";
 import PasswordInput from "./password-input.js";
 import { Combobox } from "./combobox.js";
 import { Textarea } from "./textarea.js";
-export { ActionMenuProvider, ActionTrigger, ActionTriggerProvider, AffixGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ConfirmDialog, CopyButton, CopyableText, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InfoTooltip, Input, InputError, InputOTP, Label, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverTrigger, PreviewableImage, SegmentedPills, Skeleton, Spinner, TextLink, Textarea, actionMenuItemClassName, badgeVariants, buttonVariants, copyToClipboard, uiComponents, useActionMenu, useActionTrigger, useClickBehavior };
+export { ActionMenuProvider, ActionTrigger, ActionTriggerProvider, AffixGroup, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Combobox, ConfirmDialog, CopyButton, CopyableText, Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, InfoTooltip, Input, InputError, InputOTP, Label, PasswordInput, Popover, PopoverClose, PopoverContent, PopoverTrigger, PreviewableImage, SegmentedPills, Skeleton, Spinner, TextLink, Textarea, actionMenuItemClassName, buttonVariants, copyToClipboard, uiComponents, useActionMenu, useActionTrigger, useClickBehavior };

package/dist/ui/info-tooltip.js

@@ -9,7 +9,7 @@ function InfoTooltip({ content }) {
 	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
 		type: "button",
 		"aria-label": t("common.more-info", "More information"),
-		className: "ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]",
+		className: "ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[length:var(--lt-ring-width)]",
 		children: /* @__PURE__ */ jsx(Icon, {
 			name: "info",
 			className: "size-lt-icon-sm"

package/dist/ui/info-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../resources/js/ui/info-tooltip.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport function InfoTooltip({ content }: { content?: string | null }) {\n  const { t } = useT(\"lattice\");\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        type=\"button\"\n        aria-label={t(\"common.more-info\", \"More information\")}\n        className=\"ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[3px]\"\n      >\n        <Icon name=\"info\" className=\"size-lt-icon-sm\" />\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"],"mappings":";;;;;AAIA,SAAgB,YAAY,EAAE,WAAwC;CACpE,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,MAAK;EACL,cAAY,EAAE,oBAAoB,kBAAkB;EACpD,WAAU;YAEV,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA;CACjC,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}
+{"version":3,"file":"info-tooltip.js","names":[],"sources":["../../resources/js/ui/info-tooltip.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport { useT } from \"@lattice-php/lattice/i18n\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport function InfoTooltip({ content }: { content?: string | null }) {\n  const { t } = useT(\"lattice\");\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <Popover>\n      <PopoverTrigger\n        type=\"button\"\n        aria-label={t(\"common.more-info\", \"More information\")}\n        className=\"ml-1 inline-flex rounded-lt-sm text-lt-muted-fg outline-none hover:text-lt-fg focus-visible:text-lt-fg focus-visible:ring-lt-ring/50 focus-visible:ring-[length:var(--lt-ring-width)]\"\n      >\n        <Icon name=\"info\" className=\"size-lt-icon-sm\" />\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"],"mappings":";;;;;AAIA,SAAgB,YAAY,EAAE,WAAwC;CACpE,MAAM,EAAE,MAAM,KAAK,SAAS;CAE5B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,MAAK;EACL,cAAY,EAAE,oBAAoB,kBAAkB;EACpD,WAAU;YAEV,oBAAC,MAAD;GAAM,MAAK;GAAO,WAAU;EAAmB,CAAA;CACjC,CAAA,GAChB,oBAAC,gBAAD;EACE,OAAM;EACN,WAAU;EACV,yBAAyB,EAAE,QAAQ,QAAQ;CAC5C,CAAA,CACM,EAAA,CAAA;AAEb"}

package/dist/ui/input-otp.js

@@ -4,7 +4,7 @@ import { OTPInput, REGEXP_ONLY_DIGITS } from "input-otp";
 //#region resources/js/ui/input-otp.tsx
 function Slot({ char, hasFakeCaret, isActive }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex h-lt-control-md w-10 items-center justify-center border-y border-r border-lt-input text-base shadow-lt-xs transition-all first:rounded-l-lt-sm first:border-l last:rounded-r-lt-sm", isActive && "z-10 border-lt-ring ring-lt-ring/50 ring-[3px]"),
+		className: cn("relative flex h-lt-control-md w-10 items-center justify-center border-y border-r border-lt-input text-base shadow-lt-xs transition-all first:rounded-l-lt-sm first:border-l last:rounded-r-lt-sm", isActive && "z-10 border-lt-ring ring-lt-ring/50 ring-[length:var(--lt-ring-width)]"),
 		children: [char, hasFakeCaret ? /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
 			children: /* @__PURE__ */ jsx("div", { className: "bg-lt-fg h-5 w-px animate-pulse" })

package/dist/ui/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../../resources/js/ui/input-otp.tsx"],"sourcesContent":["import { OTPInput, REGEXP_ONLY_DIGITS, type SlotProps } from \"input-otp\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Slot({ char, hasFakeCaret, isActive }: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-lt-control-md w-10 items-center justify-center border-y border-r border-lt-input text-base shadow-lt-xs transition-all first:rounded-l-lt-sm first:border-l last:rounded-r-lt-sm\",\n        isActive && \"z-10 border-lt-ring ring-lt-ring/50 ring-[3px]\",\n      )}\n    >\n      {char}\n      {hasFakeCaret ? (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"bg-lt-fg h-5 w-px animate-pulse\" />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\ntype InputOTPProps = Omit<ComponentProps<typeof OTPInput>, \"children\" | \"maxLength\" | \"render\"> & {\n  length: number;\n};\n\nexport function InputOTP({\n  length,\n  containerClassName,\n  pattern = REGEXP_ONLY_DIGITS,\n  ...props\n}: InputOTPProps) {\n  return (\n    <OTPInput\n      maxLength={length}\n      pattern={pattern}\n      containerClassName={cn(\n        \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n        containerClassName,\n      )}\n      render={({ slots }) => (\n        <div className=\"flex items-center\">\n          {slots.map((slot, index) => (\n            <Slot key={index} {...slot} />\n          ))}\n        </div>\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,KAAK,EAAE,MAAM,cAAc,YAAuB;CACzD,OACE,qBAAC,OAAD;EACE,WAAW,GACT,oMACA,YAAY,gDACd;YAJF,CAMG,MACA,eACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD,EAAK,WAAU,kCAAmC,CAAA;EAC/C,CAAA,IACH,IACD;;AAET;AAMA,SAAgB,SAAS,EACvB,QACA,oBACA,UAAU,oBACV,GAAG,SACa;CAChB,OACE,oBAAC,UAAD;EACE,WAAW;EACF;EACT,oBAAoB,GAClB,sDACA,kBACF;EACA,SAAS,EAAE,YACT,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,MAAM,UAChB,oBAAC,MAAD,EAAkB,GAAI,KAAO,GAAlB,KAAkB,CAC9B;EACE,CAAA;EAEP,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../resources/js/ui/input-otp.tsx"],"sourcesContent":["import { OTPInput, REGEXP_ONLY_DIGITS, type SlotProps } from \"input-otp\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Slot({ char, hasFakeCaret, isActive }: SlotProps) {\n  return (\n    <div\n      className={cn(\n        \"relative flex h-lt-control-md w-10 items-center justify-center border-y border-r border-lt-input text-base shadow-lt-xs transition-all first:rounded-l-lt-sm first:border-l last:rounded-r-lt-sm\",\n        isActive && \"z-10 border-lt-ring ring-lt-ring/50 ring-[length:var(--lt-ring-width)]\",\n      )}\n    >\n      {char}\n      {hasFakeCaret ? (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"bg-lt-fg h-5 w-px animate-pulse\" />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\ntype InputOTPProps = Omit<ComponentProps<typeof OTPInput>, \"children\" | \"maxLength\" | \"render\"> & {\n  length: number;\n};\n\nexport function InputOTP({\n  length,\n  containerClassName,\n  pattern = REGEXP_ONLY_DIGITS,\n  ...props\n}: InputOTPProps) {\n  return (\n    <OTPInput\n      maxLength={length}\n      pattern={pattern}\n      containerClassName={cn(\n        \"flex items-center gap-2 has-[:disabled]:opacity-50\",\n        containerClassName,\n      )}\n      render={({ slots }) => (\n        <div className=\"flex items-center\">\n          {slots.map((slot, index) => (\n            <Slot key={index} {...slot} />\n          ))}\n        </div>\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;AAIA,SAAS,KAAK,EAAE,MAAM,cAAc,YAAuB;CACzD,OACE,qBAAC,OAAD;EACE,WAAW,GACT,oMACA,YAAY,wEACd;YAJF,CAMG,MACA,eACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD,EAAK,WAAU,kCAAmC,CAAA;EAC/C,CAAA,IACH,IACD;;AAET;AAMA,SAAgB,SAAS,EACvB,QACA,oBACA,UAAU,oBACV,GAAG,SACa;CAChB,OACE,oBAAC,UAAD;EACE,WAAW;EACF;EACT,oBAAoB,GAClB,sDACA,kBACF;EACA,SAAS,EAAE,YACT,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,MAAM,UAChB,oBAAC,MAAD,EAAkB,GAAI,KAAO,GAAlB,KAAkB,CAC9B;EACE,CAAA;EAEP,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/label.js

@@ -6,7 +6,7 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 function Label({ className, ...props }) {
 	return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
 		"data-slot": "label",
-		className: cn("text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		className: cn("text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:text-lt-disabled-fg peer-disabled:cursor-not-allowed peer-disabled:text-lt-disabled-fg", className),
 		...props
 	});
 }

package/dist/ui/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":[],"sources":["../../resources/js/ui/label.tsx"],"sourcesContent":["import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":";;;;;AAKA,SAAS,MAAM,EAAE,WAAW,GAAG,SAA2D;CACxF,OACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,iMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"label.js","names":[],"sources":["../../resources/js/ui/label.tsx"],"sourcesContent":["import * as LabelPrimitive from \"@radix-ui/react-label\";\nimport * as React from \"react\";\n\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"text-base leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:text-lt-disabled-fg peer-disabled:cursor-not-allowed peer-disabled:text-lt-disabled-fg\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":";;;;;AAKA,SAAS,MAAM,EAAE,WAAW,GAAG,SAA2D;CACxF,OACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,mNACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/password-input.js

@@ -17,7 +17,7 @@ function PasswordInput({ className, ref, ...props }) {
 			type: "button",
 			"data-test": typeof props.name === "string" ? `${props.name}-visibility` : "password-visibility",
 			onClick: () => setShowPassword((prev) => !prev),
-			className: "absolute inset-y-0 right-0 flex items-center rounded-r-lt-sm px-3 text-lt-muted-fg hover:text-lt-fg focus-visible:ring-[3px] focus-visible:ring-lt-ring focus-visible:outline-none",
+			className: "absolute inset-y-0 right-0 flex items-center rounded-r-lt-sm px-3 text-lt-muted-fg hover:text-lt-fg focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-lt-ring/50 focus-visible:outline-none",
 			"aria-label": showPassword ? "Hide password" : "Show password",
 			tabIndex: -1,
 			children: showPassword ? /* @__PURE__ */ jsx(Icon, {

package/dist/ui/password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":[],"sources":["../../resources/js/ui/password-input.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { ComponentProps, Ref } from \"react\";\nimport { useState } from \"react\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\ntype PasswordInputProps = Omit<ComponentProps<\"input\">, \"type\"> & {\n  passwordrules?: string;\n  ref?: Ref<HTMLInputElement>;\n};\n\nexport default function PasswordInput({ className, ref, ...props }: PasswordInputProps) {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <Input\n        type={showPassword ? \"text\" : \"password\"}\n        className={cn(\"pr-10\", className)}\n        ref={ref}\n        {...props}\n      />\n      <button\n        type=\"button\"\n        data-test={\n          typeof props.name === \"string\" ? `${props.name}-visibility` : \"password-visibility\"\n        }\n        onClick={() => setShowPassword((prev) => !prev)}\n        className=\"absolute inset-y-0 right-0 flex items-center rounded-r-lt-sm px-3 text-lt-muted-fg hover:text-lt-fg focus-visible:ring-[3px] focus-visible:ring-lt-ring focus-visible:outline-none\"\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n      >\n        {showPassword ? (\n          <Icon name=\"eye-off\" className=\"size-lt-icon-md\" />\n        ) : (\n          <Icon name=\"eye\" className=\"size-lt-icon-md\" />\n        )}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAwB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CACtF,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAM,eAAe,SAAS;GAC9B,WAAW,GAAG,SAAS,SAAS;GAC3B;GACL,GAAI;EACL,CAAA,GACD,oBAAC,UAAD;GACE,MAAK;GACL,aACE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,KAAK,eAAe;GAEhE,eAAe,iBAAiB,SAAS,CAAC,IAAI;GAC9C,WAAU;GACV,cAAY,eAAe,kBAAkB;GAC7C,UAAU;aAET,eACC,oBAAC,MAAD;IAAM,MAAK;IAAU,WAAU;GAAmB,CAAA,IAElD,oBAAC,MAAD;IAAM,MAAK;IAAM,WAAU;GAAmB,CAAA;EAE1C,CAAA,CACL;;AAET"}
+{"version":3,"file":"password-input.js","names":[],"sources":["../../resources/js/ui/password-input.tsx"],"sourcesContent":["import { Icon } from \"@lattice-php/lattice/icons\";\nimport type { ComponentProps, Ref } from \"react\";\nimport { useState } from \"react\";\nimport { Input } from \"@lattice-php/lattice/ui/input\";\nimport { cn } from \"@lattice-php/lattice/lib/utils\";\n\ntype PasswordInputProps = Omit<ComponentProps<\"input\">, \"type\"> & {\n  passwordrules?: string;\n  ref?: Ref<HTMLInputElement>;\n};\n\nexport default function PasswordInput({ className, ref, ...props }: PasswordInputProps) {\n  const [showPassword, setShowPassword] = useState(false);\n\n  return (\n    <div className=\"relative\">\n      <Input\n        type={showPassword ? \"text\" : \"password\"}\n        className={cn(\"pr-10\", className)}\n        ref={ref}\n        {...props}\n      />\n      <button\n        type=\"button\"\n        data-test={\n          typeof props.name === \"string\" ? `${props.name}-visibility` : \"password-visibility\"\n        }\n        onClick={() => setShowPassword((prev) => !prev)}\n        className=\"absolute inset-y-0 right-0 flex items-center rounded-r-lt-sm px-3 text-lt-muted-fg hover:text-lt-fg focus-visible:ring-[length:var(--lt-ring-width)] focus-visible:ring-lt-ring/50 focus-visible:outline-none\"\n        aria-label={showPassword ? \"Hide password\" : \"Show password\"}\n        tabIndex={-1}\n      >\n        {showPassword ? (\n          <Icon name=\"eye-off\" className=\"size-lt-icon-md\" />\n        ) : (\n          <Icon name=\"eye\" className=\"size-lt-icon-md\" />\n        )}\n      </button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAWA,SAAwB,cAAc,EAAE,WAAW,KAAK,GAAG,SAA6B;CACtF,MAAM,CAAC,cAAc,mBAAmB,SAAS,KAAK;CAEtD,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,OAAD;GACE,MAAM,eAAe,SAAS;GAC9B,WAAW,GAAG,SAAS,SAAS;GAC3B;GACL,GAAI;EACL,CAAA,GACD,oBAAC,UAAD;GACE,MAAK;GACL,aACE,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,KAAK,eAAe;GAEhE,eAAe,iBAAiB,SAAS,CAAC,IAAI;GAC9C,WAAU;GACV,cAAY,eAAe,kBAAkB;GAC7C,UAAU;aAET,eACC,oBAAC,MAAD;IAAM,MAAK;IAAU,WAAU;GAAmB,CAAA,IAElD,oBAAC,MAAD;IAAM,MAAK;IAAM,WAAU;GAAmB,CAAA;EAE1C,CAAA,CACL;;AAET"}

package/dist/ui/progress.js

@@ -34,7 +34,7 @@ var circleReadouts = {
 	"4xl": "text-2xl"
 };
 var ProgressComponent = ({ node }) => {
-	const { value, max, variant, showValue, color, size } = node.props;
+	const { value, max, shape, showValue, color, size } = node.props;
 	const { locale } = useLocale();
 	const paint = colorValue(coerceColor(color) ?? namedColor("primary"));
 	const clamped = max > 0 ? Math.min(Math.max(value, 0), max) : 0;
@@ -50,7 +50,7 @@ var ProgressComponent = ({ node }) => {
 		"aria-valuetext": percent,
 		role: "progressbar"
 	};
-	if (variant === "circle") {
+	if (shape === "circle") {
 		const diameter = circleDiameters[size];
 		const strokeWidth = Math.max(3, diameter / 10);
 		const radius = (diameter - strokeWidth) / 2;