@maxsteinwender/sort-ui 1.0.3 → 1.0.4

package/dist/index.d.mts

@@ -197,6 +197,8 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     /** Image src — required for variant="image" */
     src?: string;
+    /** Leading icon node — used when variant="icon". Pass any Remix icon, e.g. <i className="ri-bank-fill" /> */
+    icon?: React$1.ReactNode;
     /** Show 1px border using border-default token. Default: false */
     border?: boolean;
     /** When provided, renders a close button on the right. */
@@ -207,7 +209,7 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
      */
     closeAsSpan?: boolean;
 }
-declare function Badge({ color, size, shape, variant, src, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ color, size, shape, variant, src, icon, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     separator?: React$1.ReactNode;
@@ -1404,6 +1406,8 @@ interface RadioButtonCardProps extends VariantProps<typeof radioButtonCardVarian
     supporterDescription?: string;
     radioPosition?: "off" | "right" | "left";
     layout?: "horizontal" | "vertical";
+    /** Leading icon node rendered above the title. Pass any Remix icon, e.g. <i className="ri-bank-fill" /> */
+    icon?: React$1.ReactNode;
     value: string;
     disabled?: boolean;
     className?: string;

package/dist/index.d.ts

@@ -197,6 +197,8 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
     variant?: BadgeVariant;
     /** Image src — required for variant="image" */
     src?: string;
+    /** Leading icon node — used when variant="icon". Pass any Remix icon, e.g. <i className="ri-bank-fill" /> */
+    icon?: React$1.ReactNode;
     /** Show 1px border using border-default token. Default: false */
     border?: boolean;
     /** When provided, renders a close button on the right. */
@@ -207,7 +209,7 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
      */
     closeAsSpan?: boolean;
 }
-declare function Badge({ color, size, shape, variant, src, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ color, size, shape, variant, src, icon, border, onClose, closeAsSpan, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 declare const Breadcrumb: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     separator?: React$1.ReactNode;
@@ -1404,6 +1406,8 @@ interface RadioButtonCardProps extends VariantProps<typeof radioButtonCardVarian
     supporterDescription?: string;
     radioPosition?: "off" | "right" | "left";
     layout?: "horizontal" | "vertical";
+    /** Leading icon node rendered above the title. Pass any Remix icon, e.g. <i className="ri-bank-fill" /> */
+    icon?: React$1.ReactNode;
     value: string;
     disabled?: boolean;
     className?: string;

package/dist/index.js

@@ -1334,6 +1334,7 @@ function Badge(_a) {
     shape = "rounded",
     variant = "label",
     src,
+    icon,
     border = false,
     onClose,
     closeAsSpan = false,
@@ -1345,6 +1346,7 @@ function Badge(_a) {
     "shape",
     "variant",
     "src",
+    "icon",
     "border",
     "onClose",
     "closeAsSpan",
@@ -1374,13 +1376,17 @@ function Badge(_a) {
         variant === "label" && // Inner frame: px-1 (4px) each side — same for lg and sm
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-1", children }),
         variant === "icon" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "i",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
-              className: cn("ri-user-3-fill leading-none", iconFontSize[size]),
-              "aria-hidden": "true"
+              className: cn(
+                "flex size-4 shrink-0 items-center justify-center leading-none",
+                iconFontSize[size]
+              ),
+              "aria-hidden": "true",
+              children: icon != null ? icon : /* @__PURE__ */ jsxRuntime.jsx("i", { className: "ri-user-3-fill" })
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pl-0.5 pr-1", children })
         ] }),
         variant === "image" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -8638,6 +8644,7 @@ var RadioButtonCard = React77__namespace.forwardRef(
     variant = "default",
     radioPosition = "off",
     layout = "horizontal",
+    icon,
     value,
     disabled = false,
     className
@@ -8690,6 +8697,17 @@ var RadioButtonCard = React77__namespace.forwardRef(
         "flex flex-col gap-1 text-left",
         isHorizontal ? "flex-1 min-w-0" : "w-full"
       ), children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "flex size-4 shrink-0 items-center leading-none text-base",
+              disabled ? "text-sui-text-hint" : "text-icon-default-subtle"
+            ),
+            "aria-hidden": "true",
+            children: icon
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx("span", { id: titleId, className: titleClass, children: title }),
         description && /* @__PURE__ */ jsxRuntime.jsx("span", { id: descriptionId, className: descriptionClass, children: description })
       ] }),

package/dist/index.mjs

@@ -1291,6 +1291,7 @@ function Badge(_a) {
     shape = "rounded",
     variant = "label",
     src,
+    icon,
     border = false,
     onClose,
     closeAsSpan = false,
@@ -1302,6 +1303,7 @@ function Badge(_a) {
     "shape",
     "variant",
     "src",
+    "icon",
     "border",
     "onClose",
     "closeAsSpan",
@@ -1331,13 +1333,17 @@ function Badge(_a) {
         variant === "label" && // Inner frame: px-1 (4px) each side — same for lg and sm
         /* @__PURE__ */ jsx("span", { className: "px-1", children }),
         variant === "icon" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
-            "i",
+          /* @__PURE__ */ jsx(
+            "span",
             {
-              className: cn("ri-user-3-fill leading-none", iconFontSize[size]),
-              "aria-hidden": "true"
+              className: cn(
+                "flex size-4 shrink-0 items-center justify-center leading-none",
+                iconFontSize[size]
+              ),
+              "aria-hidden": "true",
+              children: icon != null ? icon : /* @__PURE__ */ jsx("i", { className: "ri-user-3-fill" })
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsx("span", { className: "pl-0.5 pr-1", children })
         ] }),
         variant === "image" && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -8595,6 +8601,7 @@ var RadioButtonCard = React77.forwardRef(
     variant = "default",
     radioPosition = "off",
     layout = "horizontal",
+    icon,
     value,
     disabled = false,
     className
@@ -8647,6 +8654,17 @@ var RadioButtonCard = React77.forwardRef(
         "flex flex-col gap-1 text-left",
         isHorizontal ? "flex-1 min-w-0" : "w-full"
       ), children: [
+        icon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "flex size-4 shrink-0 items-center leading-none text-base",
+              disabled ? "text-sui-text-hint" : "text-icon-default-subtle"
+            ),
+            "aria-hidden": "true",
+            children: icon
+          }
+        ),
         /* @__PURE__ */ jsx("span", { id: titleId, className: titleClass, children: title }),
         description && /* @__PURE__ */ jsx("span", { id: descriptionId, className: descriptionClass, children: description })
       ] }),

package/dist/styles.css

@@ -13906,9 +13906,9 @@ video {
   --bg-muted: #f4f4f5;
   --bg-card: #ffffff;
   --bg-inverted: #18181b;
-  --bg-state-primary: #2563eb;
-  --bg-state-primary-hover: #3b82f6;
-  --bg-state-primary-press: #2563eb;
+  --bg-state-primary: #437dfc;
+  --bg-state-primary-hover: #65a0fd;
+  --bg-state-primary-press: #437dfc;
   --bg-state-disabled: rgba(39, 39, 42, 0.08);
   --bg-state-secondary: #ffffff;
   --bg-state-secondary-hover: #fafafa;
@@ -14486,9 +14486,9 @@ video {
   --bg-muted: #f5f5f4;
   --bg-card: #ffffff;
   --bg-inverted: #24211e;
-  --bg-state-primary: #c05621;
-  --bg-state-primary-hover: #d1692c;
-  --bg-state-primary-press: #c05621;
+  --bg-state-primary: #f27313;
+  --bg-state-primary-hover: #f38f36;
+  --bg-state-primary-press: #f27313;
   --bg-state-disabled: rgba(39, 39, 42, 0.08);
   --bg-state-secondary: #ffffff;
   --bg-state-secondary-hover: #fafaf9;
@@ -14773,9 +14773,9 @@ video {
   --bg-muted: #0c0a09;
   --bg-card: #301108;
   --bg-inverted: #ffffff;
-  --bg-state-primary: #c04b05;
-  --bg-state-primary-hover: #d15a06;
-  --bg-state-primary-press: #c04b05;
+  --bg-state-primary: #e35706;
+  --bg-state-primary-hover: #f27313;
+  --bg-state-primary-press: #e35706;
   --bg-state-disabled: rgba(255, 255, 255, 0.08);
   --bg-state-secondary: rgba(255, 255, 255, 0.04);
   --bg-state-secondary-hover: rgba(255, 255, 255, 0.08);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@maxsteinwender/sort-ui",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A coded design system based on Sort UI Kit — Figma components as production-ready Next.js/Tailwind components",
   "author": "Max Steinwender",
   "license": "UNLICENSED",