@hachej/boring-ui-kit 0.1.82 → 0.1.84

package/dist/index.d.ts

@@ -175,7 +175,7 @@ type StatusBadgeProps = BadgeProps & {
 declare function StatusBadge({ className, tone, variant, ...props }: StatusBadgeProps): React.JSX.Element;
 
 type MeterTone = 'default' | 'warning' | 'danger';
-interface MeterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
+interface MeterProps extends Omit<React.ComponentProps<'progress'>, 'role' | 'value' | 'max'> {
     /** Filled fraction as a percentage in the range 0..100. */
     value: number;
     /** Accessible label for the progressbar (screen readers). */
@@ -183,9 +183,9 @@ interface MeterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'>
     tone?: MeterTone;
 }
 /**
- * Accessible horizontal usage/progress bar. Renders a subtle track with a
- * proportional fill and exposes `role="progressbar"` with aria value props so
- * consumers get an accessible meter out of the box.
+ * Accessible horizontal usage/progress bar. A native `<progress>` element
+ * gives the browser the dynamic fill without inline styles, which keeps it
+ * compatible with applications that enforce nonce-only style CSPs.
  */
 declare function Meter({ value, label, tone, className, ...props }: MeterProps): React.JSX.Element;
 

package/dist/index.js

@@ -1047,31 +1047,29 @@ function StatusBadge({ className, tone = "neutral", variant = "ghost", ...props
 // src/meter.tsx
 import { jsx as jsx20 } from "react/jsx-runtime";
 var toneFill = {
-  default: "bg-primary",
-  warning: "bg-[color:var(--boring-warning,var(--accent-foreground))]",
-  danger: "bg-destructive"
+  default: "[&::-webkit-progress-value]:bg-primary [&::-moz-progress-bar]:bg-primary",
+  warning: "[&::-webkit-progress-value]:bg-[color:var(--boring-warning,var(--accent-foreground))] [&::-moz-progress-bar]:bg-[color:var(--boring-warning,var(--accent-foreground))]",
+  danger: "[&::-webkit-progress-value]:bg-destructive [&::-moz-progress-bar]:bg-destructive"
 };
 function Meter({ value, label, tone = "default", className, ...props }) {
   const clamped = Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
   return /* @__PURE__ */ jsx20(
-    "div",
+    "progress",
     {
       role: "progressbar",
+      value: clamped,
+      max: 100,
       "aria-valuenow": Math.round(clamped),
       "aria-valuemin": 0,
       "aria-valuemax": 100,
       "aria-label": label,
       "data-slot": "meter",
-      className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className),
-      ...props,
-      children: /* @__PURE__ */ jsx20(
-        "div",
-        {
-          "data-slot": "meter-fill",
-          className: cn("h-full rounded-full transition-[width] duration-300 ease-out", toneFill[tone]),
-          style: { width: `${clamped}%` }
-        }
-      )
+      className: cn(
+        "h-2 w-full overflow-hidden rounded-full border-0 bg-muted [&::-webkit-progress-bar]:bg-muted [&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-300 [&::-moz-progress-bar]:rounded-full",
+        toneFill[tone],
+        className
+      ),
+      ...props
     }
   );
 }

package/dist/styles.css

@@ -27,7 +27,6 @@
     --tracking-widest: 0.1em;
     --leading-snug: 1.375;
     --radius-xs: 0.125rem;
-    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -171,6 +170,9 @@
   .grid {
     display: grid;
   }
+  .inline {
+    display: inline;
+  }
   .inline-block {
     display: inline-block;
   }
@@ -713,9 +715,6 @@
   .bg-\[color\:var\(--boring-success-soft\,var\(--secondary\)\)\] {
     background-color: var(--boring-success-soft,var(--secondary));
   }
-  .bg-\[color\:var\(--boring-warning\,var\(--accent-foreground\)\)\] {
-    background-color: var(--boring-warning,var(--accent-foreground));
-  }
   .bg-\[color\:var\(--boring-warning-soft\,var\(--accent\)\)\] {
     background-color: var(--boring-warning-soft,var(--accent));
   }
@@ -1133,11 +1132,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[width\] {
-    transition-property: width;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1174,18 +1168,10 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .duration-300 {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
-  .ease-out {
-    --tw-ease: var(--ease-out);
-    transition-timing-function: var(--ease-out);
-  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -2443,6 +2429,64 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&\:\:-moz-progress-bar\]\:rounded-full {
+    &::-moz-progress-bar {
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .\[\&\:\:-moz-progress-bar\]\:bg-\[color\:var\(--boring-warning\,var\(--accent-foreground\)\)\] {
+    &::-moz-progress-bar {
+      background-color: var(--boring-warning,var(--accent-foreground));
+    }
+  }
+  .\[\&\:\:-moz-progress-bar\]\:bg-destructive {
+    &::-moz-progress-bar {
+      background-color: var(--boring-destructive);
+    }
+  }
+  .\[\&\:\:-moz-progress-bar\]\:bg-primary {
+    &::-moz-progress-bar {
+      background-color: var(--boring-primary);
+    }
+  }
+  .\[\&\:\:-webkit-progress-bar\]\:bg-muted {
+    &::-webkit-progress-bar {
+      background-color: var(--boring-muted);
+    }
+  }
+  .\[\&\:\:-webkit-progress-value\]\:rounded-full {
+    &::-webkit-progress-value {
+      border-radius: calc(infinity * 1px);
+    }
+  }
+  .\[\&\:\:-webkit-progress-value\]\:bg-\[color\:var\(--boring-warning\,var\(--accent-foreground\)\)\] {
+    &::-webkit-progress-value {
+      background-color: var(--boring-warning,var(--accent-foreground));
+    }
+  }
+  .\[\&\:\:-webkit-progress-value\]\:bg-destructive {
+    &::-webkit-progress-value {
+      background-color: var(--boring-destructive);
+    }
+  }
+  .\[\&\:\:-webkit-progress-value\]\:bg-primary {
+    &::-webkit-progress-value {
+      background-color: var(--boring-primary);
+    }
+  }
+  .\[\&\:\:-webkit-progress-value\]\:transition-all {
+    &::-webkit-progress-value {
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+  }
+  .\[\&\:\:-webkit-progress-value\]\:duration-300 {
+    &::-webkit-progress-value {
+      --tw-duration: 300ms;
+      transition-duration: 300ms;
+    }
+  }
   .\[\&\:\:-webkit-scrollbar\]\:hidden {
     &::-webkit-scrollbar {
       display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.1.82",
+  "version": "0.1.84",
   "type": "module",
   "license": "MIT",
   "description": "Shared shadcn-style UI primitives for Boring packages and app-generated panes.",