@rubenpazch/info-row 1.0.1

package/README.md

@@ -0,0 +1,3 @@
+# InfoRow
+
+Generated component package.

package/dist/InfoRow.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+type InfoRowVariant = "default" | "blue" | "yellow" | "purple" | "green" | "red" | "indigo" | "gray";
+type InfoRowSize = "xs" | "sm" | "md" | "lg";
+type InfoRowLayout = "vertical" | "horizontal" | "inline" | "compact";
+interface InfoRowProps {
+    icon: React.ReactNode;
+    label: string;
+    value: string;
+    variant?: InfoRowVariant;
+    size?: InfoRowSize;
+    layout?: InfoRowLayout;
+    hideIcon?: boolean;
+    hideLabel?: boolean;
+    className?: string;
+    action?: React.ReactNode;
+}
+/**
+ * InfoRow component
+ * Displays a row of information with an icon, label, and value
+ * Used in detail views to present structured data
+ *
+ * @param variant - Color variant for the background. Options:
+ *   - 'default': No background color (gray text)
+ *   - 'blue': Blue background (for far/distance vision)
+ *   - 'yellow': Yellow background (for near vision)
+ *   - 'purple': Purple background (for both vision types)
+ *   - 'green': Green background
+ *   - 'red': Red background
+ *   - 'indigo': Indigo background
+ *   - 'gray': Gray background
+ *
+ * @param size - Size variant. Options: 'xs' | 'sm' | 'md' | 'lg'
+ * @param layout - Layout variant. Options:
+ *   - 'vertical': Icon and text stacked (default)
+ *   - 'horizontal': All elements in one line
+ *   - 'inline': Compact single line without much spacing
+ *   - 'compact': Minimal spacing for dense layouts
+ * @param hideIcon - Hide the icon (useful for responsive layouts)
+ * @param hideLabel - Hide the label, show only value (useful for mobile)
+ * @param className - Additional CSS classes
+ * @param action - Optional actionable element (link, button, icon button) positioned on the right
+ */
+declare const InfoRow: React.FC<InfoRowProps>;
+export default InfoRow;
+//# sourceMappingURL=InfoRow.d.ts.map

package/dist/InfoRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoRow.d.ts","sourceRoot":"","sources":["../src/InfoRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,cAAc,GACf,SAAS,GACT,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,KAAK,GACL,QAAQ,GACR,MAAM,CAAC;AAEX,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC7C,KAAK,aAAa,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtE,UAAU,YAAY;IACpB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAqOnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/index.cjs.js

@@ -0,0 +1,614 @@
+'use strict';
+
+var require$$0 = require('react');
+
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_production;
+
+function requireReactJsxRuntime_production () {
+	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+	hasRequiredReactJsxRuntime_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+	  var key = null;
+	  void 0 !== maybeKey && (key = "" + maybeKey);
+	  void 0 !== config.key && (key = "" + config.key);
+	  if ("key" in config) {
+	    maybeKey = {};
+	    for (var propName in config)
+	      "key" !== propName && (maybeKey[propName] = config[propName]);
+	  } else maybeKey = config;
+	  config = maybeKey.ref;
+	  return {
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    type: type,
+	    key: key,
+	    ref: void 0 !== config ? config : null,
+	    props: maybeKey
+	  };
+	}
+	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_production.jsx = jsxProd;
+	reactJsxRuntime_production.jsxs = jsxProd;
+	return reactJsxRuntime_production;
+}
+
+var reactJsxRuntime_development = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_development;
+
+function requireReactJsxRuntime_development () {
+	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+	hasRequiredReactJsxRuntime_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function getComponentNameFromType(type) {
+	      if (null == type) return null;
+	      if ("function" === typeof type)
+	        return type.$$typeof === REACT_CLIENT_REFERENCE
+	          ? null
+	          : type.displayName || type.name || null;
+	      if ("string" === typeof type) return type;
+	      switch (type) {
+	        case REACT_FRAGMENT_TYPE:
+	          return "Fragment";
+	        case REACT_PROFILER_TYPE:
+	          return "Profiler";
+	        case REACT_STRICT_MODE_TYPE:
+	          return "StrictMode";
+	        case REACT_SUSPENSE_TYPE:
+	          return "Suspense";
+	        case REACT_SUSPENSE_LIST_TYPE:
+	          return "SuspenseList";
+	        case REACT_ACTIVITY_TYPE:
+	          return "Activity";
+	      }
+	      if ("object" === typeof type)
+	        switch (
+	          ("number" === typeof type.tag &&
+	            console.error(
+	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+	            ),
+	          type.$$typeof)
+	        ) {
+	          case REACT_PORTAL_TYPE:
+	            return "Portal";
+	          case REACT_CONTEXT_TYPE:
+	            return type.displayName || "Context";
+	          case REACT_CONSUMER_TYPE:
+	            return (type._context.displayName || "Context") + ".Consumer";
+	          case REACT_FORWARD_REF_TYPE:
+	            var innerType = type.render;
+	            type = type.displayName;
+	            type ||
+	              ((type = innerType.displayName || innerType.name || ""),
+	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
+	            return type;
+	          case REACT_MEMO_TYPE:
+	            return (
+	              (innerType = type.displayName || null),
+	              null !== innerType
+	                ? innerType
+	                : getComponentNameFromType(type.type) || "Memo"
+	            );
+	          case REACT_LAZY_TYPE:
+	            innerType = type._payload;
+	            type = type._init;
+	            try {
+	              return getComponentNameFromType(type(innerType));
+	            } catch (x) {}
+	        }
+	      return null;
+	    }
+	    function testStringCoercion(value) {
+	      return "" + value;
+	    }
+	    function checkKeyStringCoercion(value) {
+	      try {
+	        testStringCoercion(value);
+	        var JSCompiler_inline_result = !1;
+	      } catch (e) {
+	        JSCompiler_inline_result = true;
+	      }
+	      if (JSCompiler_inline_result) {
+	        JSCompiler_inline_result = console;
+	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+	        var JSCompiler_inline_result$jscomp$0 =
+	          ("function" === typeof Symbol &&
+	            Symbol.toStringTag &&
+	            value[Symbol.toStringTag]) ||
+	          value.constructor.name ||
+	          "Object";
+	        JSCompiler_temp_const.call(
+	          JSCompiler_inline_result,
+	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+	          JSCompiler_inline_result$jscomp$0
+	        );
+	        return testStringCoercion(value);
+	      }
+	    }
+	    function getTaskName(type) {
+	      if (type === REACT_FRAGMENT_TYPE) return "<>";
+	      if (
+	        "object" === typeof type &&
+	        null !== type &&
+	        type.$$typeof === REACT_LAZY_TYPE
+	      )
+	        return "<...>";
+	      try {
+	        var name = getComponentNameFromType(type);
+	        return name ? "<" + name + ">" : "<...>";
+	      } catch (x) {
+	        return "<...>";
+	      }
+	    }
+	    function getOwner() {
+	      var dispatcher = ReactSharedInternals.A;
+	      return null === dispatcher ? null : dispatcher.getOwner();
+	    }
+	    function UnknownOwner() {
+	      return Error("react-stack-top-frame");
+	    }
+	    function hasValidKey(config) {
+	      if (hasOwnProperty.call(config, "key")) {
+	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+	        if (getter && getter.isReactWarning) return false;
+	      }
+	      return void 0 !== config.key;
+	    }
+	    function defineKeyPropWarningGetter(props, displayName) {
+	      function warnAboutAccessingKey() {
+	        specialPropKeyWarningShown ||
+	          ((specialPropKeyWarningShown = true),
+	          console.error(
+	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+	            displayName
+	          ));
+	      }
+	      warnAboutAccessingKey.isReactWarning = true;
+	      Object.defineProperty(props, "key", {
+	        get: warnAboutAccessingKey,
+	        configurable: true
+	      });
+	    }
+	    function elementRefGetterWithDeprecationWarning() {
+	      var componentName = getComponentNameFromType(this.type);
+	      didWarnAboutElementRef[componentName] ||
+	        ((didWarnAboutElementRef[componentName] = true),
+	        console.error(
+	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+	        ));
+	      componentName = this.props.ref;
+	      return void 0 !== componentName ? componentName : null;
+	    }
+	    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+	      var refProp = props.ref;
+	      type = {
+	        $$typeof: REACT_ELEMENT_TYPE,
+	        type: type,
+	        key: key,
+	        props: props,
+	        _owner: owner
+	      };
+	      null !== (void 0 !== refProp ? refProp : null)
+	        ? Object.defineProperty(type, "ref", {
+	            enumerable: false,
+	            get: elementRefGetterWithDeprecationWarning
+	          })
+	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+	      type._store = {};
+	      Object.defineProperty(type._store, "validated", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: 0
+	      });
+	      Object.defineProperty(type, "_debugInfo", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: null
+	      });
+	      Object.defineProperty(type, "_debugStack", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugStack
+	      });
+	      Object.defineProperty(type, "_debugTask", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugTask
+	      });
+	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+	      return type;
+	    }
+	    function jsxDEVImpl(
+	      type,
+	      config,
+	      maybeKey,
+	      isStaticChildren,
+	      debugStack,
+	      debugTask
+	    ) {
+	      var children = config.children;
+	      if (void 0 !== children)
+	        if (isStaticChildren)
+	          if (isArrayImpl(children)) {
+	            for (
+	              isStaticChildren = 0;
+	              isStaticChildren < children.length;
+	              isStaticChildren++
+	            )
+	              validateChildKeys(children[isStaticChildren]);
+	            Object.freeze && Object.freeze(children);
+	          } else
+	            console.error(
+	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+	            );
+	        else validateChildKeys(children);
+	      if (hasOwnProperty.call(config, "key")) {
+	        children = getComponentNameFromType(type);
+	        var keys = Object.keys(config).filter(function (k) {
+	          return "key" !== k;
+	        });
+	        isStaticChildren =
+	          0 < keys.length
+	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
+	            : "{key: someKey}";
+	        didWarnAboutKeySpread[children + isStaticChildren] ||
+	          ((keys =
+	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
+	          console.error(
+	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+	            isStaticChildren,
+	            children,
+	            keys,
+	            children
+	          ),
+	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
+	      }
+	      children = null;
+	      void 0 !== maybeKey &&
+	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
+	      hasValidKey(config) &&
+	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
+	      if ("key" in config) {
+	        maybeKey = {};
+	        for (var propName in config)
+	          "key" !== propName && (maybeKey[propName] = config[propName]);
+	      } else maybeKey = config;
+	      children &&
+	        defineKeyPropWarningGetter(
+	          maybeKey,
+	          "function" === typeof type
+	            ? type.displayName || type.name || "Unknown"
+	            : type
+	        );
+	      return ReactElement(
+	        type,
+	        children,
+	        maybeKey,
+	        getOwner(),
+	        debugStack,
+	        debugTask
+	      );
+	    }
+	    function validateChildKeys(node) {
+	      isValidElement(node)
+	        ? node._store && (node._store.validated = 1)
+	        : "object" === typeof node &&
+	          null !== node &&
+	          node.$$typeof === REACT_LAZY_TYPE &&
+	          ("fulfilled" === node._payload.status
+	            ? isValidElement(node._payload.value) &&
+	              node._payload.value._store &&
+	              (node._payload.value._store.validated = 1)
+	            : node._store && (node._store.validated = 1));
+	    }
+	    function isValidElement(object) {
+	      return (
+	        "object" === typeof object &&
+	        null !== object &&
+	        object.$$typeof === REACT_ELEMENT_TYPE
+	      );
+	    }
+	    var React = require$$0,
+	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
+	      ReactSharedInternals =
+	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	      hasOwnProperty = Object.prototype.hasOwnProperty,
+	      isArrayImpl = Array.isArray,
+	      createTask = console.createTask
+	        ? console.createTask
+	        : function () {
+	            return null;
+	          };
+	    React = {
+	      react_stack_bottom_frame: function (callStackForError) {
+	        return callStackForError();
+	      }
+	    };
+	    var specialPropKeyWarningShown;
+	    var didWarnAboutElementRef = {};
+	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
+	      React,
+	      UnknownOwner
+	    )();
+	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+	    var didWarnAboutKeySpread = {};
+	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+	    reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        false,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        true,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	  })();
+	return reactJsxRuntime_development;
+}
+
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
+}
+
+var jsxRuntimeExports = requireJsxRuntime();
+
+/**
+ * InfoRow component
+ * Displays a row of information with an icon, label, and value
+ * Used in detail views to present structured data
+ *
+ * @param variant - Color variant for the background. Options:
+ *   - 'default': No background color (gray text)
+ *   - 'blue': Blue background (for far/distance vision)
+ *   - 'yellow': Yellow background (for near vision)
+ *   - 'purple': Purple background (for both vision types)
+ *   - 'green': Green background
+ *   - 'red': Red background
+ *   - 'indigo': Indigo background
+ *   - 'gray': Gray background
+ *
+ * @param size - Size variant. Options: 'xs' | 'sm' | 'md' | 'lg'
+ * @param layout - Layout variant. Options:
+ *   - 'vertical': Icon and text stacked (default)
+ *   - 'horizontal': All elements in one line
+ *   - 'inline': Compact single line without much spacing
+ *   - 'compact': Minimal spacing for dense layouts
+ * @param hideIcon - Hide the icon (useful for responsive layouts)
+ * @param hideLabel - Hide the label, show only value (useful for mobile)
+ * @param className - Additional CSS classes
+ * @param action - Optional actionable element (link, button, icon button) positioned on the right
+ */
+const InfoRow = ({ icon, label, value, variant = "default", size = "md", layout = "vertical", hideIcon = false, hideLabel = false, className = "", action, }) => {
+    const variantClasses = {
+        default: {
+            bg: "",
+            border: "",
+            iconColor: "text-gray-400",
+            labelColor: "text-gray-500",
+        },
+        blue: {
+            bg: "bg-blue-50",
+            border: "border border-blue-200",
+            iconColor: "text-blue-500",
+            labelColor: "text-blue-700",
+        },
+        yellow: {
+            bg: "bg-yellow-50",
+            border: "border border-yellow-200",
+            iconColor: "text-yellow-600",
+            labelColor: "text-yellow-700",
+        },
+        purple: {
+            bg: "bg-purple-50",
+            border: "border border-purple-200",
+            iconColor: "text-purple-500",
+            labelColor: "text-purple-700",
+        },
+        green: {
+            bg: "bg-green-50",
+            border: "border border-green-200",
+            iconColor: "text-green-500",
+            labelColor: "text-green-700",
+        },
+        red: {
+            bg: "bg-red-50",
+            border: "border border-red-200",
+            iconColor: "text-red-500",
+            labelColor: "text-red-700",
+        },
+        indigo: {
+            bg: "bg-indigo-50",
+            border: "border border-indigo-200",
+            iconColor: "text-indigo-500",
+            labelColor: "text-indigo-700",
+        },
+        gray: {
+            bg: "bg-gray-50",
+            border: "border border-gray-200",
+            iconColor: "text-gray-500",
+            labelColor: "text-gray-700",
+        },
+    };
+    const classes = variantClasses[variant];
+    // Size configurations
+    const sizeClasses = {
+        xs: {
+            padding: "p-1",
+            iconSize: "w-3 h-3",
+            labelText: "text-xs",
+            valueText: "text-xs font-medium",
+            spacing: "space-x-1",
+        },
+        sm: {
+            padding: "p-1.5",
+            iconSize: "w-4 h-4",
+            labelText: "text-xs",
+            valueText: "text-sm font-medium",
+            spacing: "space-x-2",
+        },
+        md: {
+            padding: "p-2",
+            iconSize: "w-5 h-5",
+            labelText: "text-sm",
+            valueText: "text-sm font-medium",
+            spacing: "space-x-3",
+        },
+        lg: {
+            padding: "p-3",
+            iconSize: "w-6 h-6",
+            labelText: "text-base",
+            valueText: "text-base font-semibold",
+            spacing: "space-x-4",
+        },
+    };
+    const sizeConfig = sizeClasses[size];
+    // Layout configurations
+    const getLayoutClasses = () => {
+        switch (layout) {
+            case "horizontal":
+                // All elements in one horizontal line with better spacing
+                return {
+                    container: `flex items-center ${sizeConfig.spacing}`,
+                    content: "flex items-center gap-3",
+                    labelValueWrapper: "flex items-center gap-3",
+                };
+            case "inline":
+                // Compact single line
+                return {
+                    container: "flex items-center space-x-1.5",
+                    content: "flex items-center space-x-1",
+                    labelValueWrapper: "flex items-center space-x-1",
+                };
+            case "compact":
+                // Minimal spacing for dense layouts
+                return {
+                    container: "flex items-start space-x-1.5",
+                    content: "flex-1 min-w-0",
+                    labelValueWrapper: "space-y-0.5",
+                };
+            case "vertical":
+            default:
+                // Traditional vertical layout - label on top, value below
+                return {
+                    container: `flex items-start ${sizeConfig.spacing}`,
+                    content: "flex-1",
+                    labelValueWrapper: "flex flex-col space-y-0.5",
+                };
+        }
+    };
+    const layoutClasses = getLayoutClasses();
+    // Build container classes
+    const containerClasses = [
+        layoutClasses.container,
+        variant === "default"
+            ? sizeConfig.padding
+            : `${sizeConfig.padding} rounded-lg ${classes.bg} ${classes.border}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    // Render icon conditionally
+    const renderIcon = () => {
+        if (hideIcon)
+            return null;
+        return (jsxRuntimeExports.jsx("div", { className: `${classes.iconColor} ${layout === "horizontal" || layout === "inline" ? "flex-shrink-0" : "mt-0.5"}`, children: icon }));
+    };
+    // Render label conditionally
+    const renderLabel = () => {
+        if (hideLabel)
+            return null;
+        return (jsxRuntimeExports.jsx("span", { className: `${sizeConfig.labelText} ${classes.labelColor}`, children: label }));
+    };
+    // Render value
+    const renderValue = () => {
+        return (jsxRuntimeExports.jsx("span", { className: `${sizeConfig.valueText} text-gray-900`, children: value }));
+    };
+    // Render content based on layout
+    const renderContent = () => {
+        if (layout === "horizontal") {
+            // Horizontal layout: label and value on same line with better separation
+            return (jsxRuntimeExports.jsxs("div", { className: layoutClasses.content, children: [!hideLabel && renderLabel(), renderValue()] }));
+        }
+        if (layout === "inline") {
+            // Inline layout: compact with colon separator
+            return (jsxRuntimeExports.jsxs("div", { className: layoutClasses.content, children: [!hideLabel && renderLabel(), !hideLabel && jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: ":" }), renderValue()] }));
+        }
+        // Vertical and compact layouts: label on top, value below
+        return (jsxRuntimeExports.jsx("div", { className: layoutClasses.content, children: jsxRuntimeExports.jsxs("div", { className: layoutClasses.labelValueWrapper, children: [!hideLabel && renderLabel(), renderValue()] }) }));
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [renderIcon(), renderContent(), action && jsxRuntimeExports.jsx("div", { className: "ml-auto flex-shrink-0", children: action })] }));
+};
+
+module.exports = InfoRow;

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+
+type InfoRowVariant = "default" | "blue" | "yellow" | "purple" | "green" | "red" | "indigo" | "gray";
+type InfoRowSize = "xs" | "sm" | "md" | "lg";
+type InfoRowLayout = "vertical" | "horizontal" | "inline" | "compact";
+interface InfoRowProps {
+    icon: React.ReactNode;
+    label: string;
+    value: string;
+    variant?: InfoRowVariant;
+    size?: InfoRowSize;
+    layout?: InfoRowLayout;
+    hideIcon?: boolean;
+    hideLabel?: boolean;
+    className?: string;
+    action?: React.ReactNode;
+}
+/**
+ * InfoRow component
+ * Displays a row of information with an icon, label, and value
+ * Used in detail views to present structured data
+ *
+ * @param variant - Color variant for the background. Options:
+ *   - 'default': No background color (gray text)
+ *   - 'blue': Blue background (for far/distance vision)
+ *   - 'yellow': Yellow background (for near vision)
+ *   - 'purple': Purple background (for both vision types)
+ *   - 'green': Green background
+ *   - 'red': Red background
+ *   - 'indigo': Indigo background
+ *   - 'gray': Gray background
+ *
+ * @param size - Size variant. Options: 'xs' | 'sm' | 'md' | 'lg'
+ * @param layout - Layout variant. Options:
+ *   - 'vertical': Icon and text stacked (default)
+ *   - 'horizontal': All elements in one line
+ *   - 'inline': Compact single line without much spacing
+ *   - 'compact': Minimal spacing for dense layouts
+ * @param hideIcon - Hide the icon (useful for responsive layouts)
+ * @param hideLabel - Hide the label, show only value (useful for mobile)
+ * @param className - Additional CSS classes
+ * @param action - Optional actionable element (link, button, icon button) positioned on the right
+ */
+declare const InfoRow: React.FC<InfoRowProps>;
+//# sourceMappingURL=InfoRow.d.ts.map
+
+export { InfoRow as default };

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,612 @@
+import require$$0 from 'react';
+
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_production;
+
+function requireReactJsxRuntime_production () {
+	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+	hasRequiredReactJsxRuntime_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+	  var key = null;
+	  void 0 !== maybeKey && (key = "" + maybeKey);
+	  void 0 !== config.key && (key = "" + config.key);
+	  if ("key" in config) {
+	    maybeKey = {};
+	    for (var propName in config)
+	      "key" !== propName && (maybeKey[propName] = config[propName]);
+	  } else maybeKey = config;
+	  config = maybeKey.ref;
+	  return {
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    type: type,
+	    key: key,
+	    ref: void 0 !== config ? config : null,
+	    props: maybeKey
+	  };
+	}
+	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_production.jsx = jsxProd;
+	reactJsxRuntime_production.jsxs = jsxProd;
+	return reactJsxRuntime_production;
+}
+
+var reactJsxRuntime_development = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_development;
+
+function requireReactJsxRuntime_development () {
+	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+	hasRequiredReactJsxRuntime_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function getComponentNameFromType(type) {
+	      if (null == type) return null;
+	      if ("function" === typeof type)
+	        return type.$$typeof === REACT_CLIENT_REFERENCE
+	          ? null
+	          : type.displayName || type.name || null;
+	      if ("string" === typeof type) return type;
+	      switch (type) {
+	        case REACT_FRAGMENT_TYPE:
+	          return "Fragment";
+	        case REACT_PROFILER_TYPE:
+	          return "Profiler";
+	        case REACT_STRICT_MODE_TYPE:
+	          return "StrictMode";
+	        case REACT_SUSPENSE_TYPE:
+	          return "Suspense";
+	        case REACT_SUSPENSE_LIST_TYPE:
+	          return "SuspenseList";
+	        case REACT_ACTIVITY_TYPE:
+	          return "Activity";
+	      }
+	      if ("object" === typeof type)
+	        switch (
+	          ("number" === typeof type.tag &&
+	            console.error(
+	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+	            ),
+	          type.$$typeof)
+	        ) {
+	          case REACT_PORTAL_TYPE:
+	            return "Portal";
+	          case REACT_CONTEXT_TYPE:
+	            return type.displayName || "Context";
+	          case REACT_CONSUMER_TYPE:
+	            return (type._context.displayName || "Context") + ".Consumer";
+	          case REACT_FORWARD_REF_TYPE:
+	            var innerType = type.render;
+	            type = type.displayName;
+	            type ||
+	              ((type = innerType.displayName || innerType.name || ""),
+	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
+	            return type;
+	          case REACT_MEMO_TYPE:
+	            return (
+	              (innerType = type.displayName || null),
+	              null !== innerType
+	                ? innerType
+	                : getComponentNameFromType(type.type) || "Memo"
+	            );
+	          case REACT_LAZY_TYPE:
+	            innerType = type._payload;
+	            type = type._init;
+	            try {
+	              return getComponentNameFromType(type(innerType));
+	            } catch (x) {}
+	        }
+	      return null;
+	    }
+	    function testStringCoercion(value) {
+	      return "" + value;
+	    }
+	    function checkKeyStringCoercion(value) {
+	      try {
+	        testStringCoercion(value);
+	        var JSCompiler_inline_result = !1;
+	      } catch (e) {
+	        JSCompiler_inline_result = true;
+	      }
+	      if (JSCompiler_inline_result) {
+	        JSCompiler_inline_result = console;
+	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+	        var JSCompiler_inline_result$jscomp$0 =
+	          ("function" === typeof Symbol &&
+	            Symbol.toStringTag &&
+	            value[Symbol.toStringTag]) ||
+	          value.constructor.name ||
+	          "Object";
+	        JSCompiler_temp_const.call(
+	          JSCompiler_inline_result,
+	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+	          JSCompiler_inline_result$jscomp$0
+	        );
+	        return testStringCoercion(value);
+	      }
+	    }
+	    function getTaskName(type) {
+	      if (type === REACT_FRAGMENT_TYPE) return "<>";
+	      if (
+	        "object" === typeof type &&
+	        null !== type &&
+	        type.$$typeof === REACT_LAZY_TYPE
+	      )
+	        return "<...>";
+	      try {
+	        var name = getComponentNameFromType(type);
+	        return name ? "<" + name + ">" : "<...>";
+	      } catch (x) {
+	        return "<...>";
+	      }
+	    }
+	    function getOwner() {
+	      var dispatcher = ReactSharedInternals.A;
+	      return null === dispatcher ? null : dispatcher.getOwner();
+	    }
+	    function UnknownOwner() {
+	      return Error("react-stack-top-frame");
+	    }
+	    function hasValidKey(config) {
+	      if (hasOwnProperty.call(config, "key")) {
+	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+	        if (getter && getter.isReactWarning) return false;
+	      }
+	      return void 0 !== config.key;
+	    }
+	    function defineKeyPropWarningGetter(props, displayName) {
+	      function warnAboutAccessingKey() {
+	        specialPropKeyWarningShown ||
+	          ((specialPropKeyWarningShown = true),
+	          console.error(
+	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+	            displayName
+	          ));
+	      }
+	      warnAboutAccessingKey.isReactWarning = true;
+	      Object.defineProperty(props, "key", {
+	        get: warnAboutAccessingKey,
+	        configurable: true
+	      });
+	    }
+	    function elementRefGetterWithDeprecationWarning() {
+	      var componentName = getComponentNameFromType(this.type);
+	      didWarnAboutElementRef[componentName] ||
+	        ((didWarnAboutElementRef[componentName] = true),
+	        console.error(
+	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+	        ));
+	      componentName = this.props.ref;
+	      return void 0 !== componentName ? componentName : null;
+	    }
+	    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+	      var refProp = props.ref;
+	      type = {
+	        $$typeof: REACT_ELEMENT_TYPE,
+	        type: type,
+	        key: key,
+	        props: props,
+	        _owner: owner
+	      };
+	      null !== (void 0 !== refProp ? refProp : null)
+	        ? Object.defineProperty(type, "ref", {
+	            enumerable: false,
+	            get: elementRefGetterWithDeprecationWarning
+	          })
+	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+	      type._store = {};
+	      Object.defineProperty(type._store, "validated", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: 0
+	      });
+	      Object.defineProperty(type, "_debugInfo", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: null
+	      });
+	      Object.defineProperty(type, "_debugStack", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugStack
+	      });
+	      Object.defineProperty(type, "_debugTask", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugTask
+	      });
+	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+	      return type;
+	    }
+	    function jsxDEVImpl(
+	      type,
+	      config,
+	      maybeKey,
+	      isStaticChildren,
+	      debugStack,
+	      debugTask
+	    ) {
+	      var children = config.children;
+	      if (void 0 !== children)
+	        if (isStaticChildren)
+	          if (isArrayImpl(children)) {
+	            for (
+	              isStaticChildren = 0;
+	              isStaticChildren < children.length;
+	              isStaticChildren++
+	            )
+	              validateChildKeys(children[isStaticChildren]);
+	            Object.freeze && Object.freeze(children);
+	          } else
+	            console.error(
+	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+	            );
+	        else validateChildKeys(children);
+	      if (hasOwnProperty.call(config, "key")) {
+	        children = getComponentNameFromType(type);
+	        var keys = Object.keys(config).filter(function (k) {
+	          return "key" !== k;
+	        });
+	        isStaticChildren =
+	          0 < keys.length
+	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
+	            : "{key: someKey}";
+	        didWarnAboutKeySpread[children + isStaticChildren] ||
+	          ((keys =
+	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
+	          console.error(
+	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+	            isStaticChildren,
+	            children,
+	            keys,
+	            children
+	          ),
+	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
+	      }
+	      children = null;
+	      void 0 !== maybeKey &&
+	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
+	      hasValidKey(config) &&
+	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
+	      if ("key" in config) {
+	        maybeKey = {};
+	        for (var propName in config)
+	          "key" !== propName && (maybeKey[propName] = config[propName]);
+	      } else maybeKey = config;
+	      children &&
+	        defineKeyPropWarningGetter(
+	          maybeKey,
+	          "function" === typeof type
+	            ? type.displayName || type.name || "Unknown"
+	            : type
+	        );
+	      return ReactElement(
+	        type,
+	        children,
+	        maybeKey,
+	        getOwner(),
+	        debugStack,
+	        debugTask
+	      );
+	    }
+	    function validateChildKeys(node) {
+	      isValidElement(node)
+	        ? node._store && (node._store.validated = 1)
+	        : "object" === typeof node &&
+	          null !== node &&
+	          node.$$typeof === REACT_LAZY_TYPE &&
+	          ("fulfilled" === node._payload.status
+	            ? isValidElement(node._payload.value) &&
+	              node._payload.value._store &&
+	              (node._payload.value._store.validated = 1)
+	            : node._store && (node._store.validated = 1));
+	    }
+	    function isValidElement(object) {
+	      return (
+	        "object" === typeof object &&
+	        null !== object &&
+	        object.$$typeof === REACT_ELEMENT_TYPE
+	      );
+	    }
+	    var React = require$$0,
+	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
+	      ReactSharedInternals =
+	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	      hasOwnProperty = Object.prototype.hasOwnProperty,
+	      isArrayImpl = Array.isArray,
+	      createTask = console.createTask
+	        ? console.createTask
+	        : function () {
+	            return null;
+	          };
+	    React = {
+	      react_stack_bottom_frame: function (callStackForError) {
+	        return callStackForError();
+	      }
+	    };
+	    var specialPropKeyWarningShown;
+	    var didWarnAboutElementRef = {};
+	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
+	      React,
+	      UnknownOwner
+	    )();
+	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+	    var didWarnAboutKeySpread = {};
+	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+	    reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        false,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        true,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	  })();
+	return reactJsxRuntime_development;
+}
+
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
+}
+
+var jsxRuntimeExports = requireJsxRuntime();
+
+/**
+ * InfoRow component
+ * Displays a row of information with an icon, label, and value
+ * Used in detail views to present structured data
+ *
+ * @param variant - Color variant for the background. Options:
+ *   - 'default': No background color (gray text)
+ *   - 'blue': Blue background (for far/distance vision)
+ *   - 'yellow': Yellow background (for near vision)
+ *   - 'purple': Purple background (for both vision types)
+ *   - 'green': Green background
+ *   - 'red': Red background
+ *   - 'indigo': Indigo background
+ *   - 'gray': Gray background
+ *
+ * @param size - Size variant. Options: 'xs' | 'sm' | 'md' | 'lg'
+ * @param layout - Layout variant. Options:
+ *   - 'vertical': Icon and text stacked (default)
+ *   - 'horizontal': All elements in one line
+ *   - 'inline': Compact single line without much spacing
+ *   - 'compact': Minimal spacing for dense layouts
+ * @param hideIcon - Hide the icon (useful for responsive layouts)
+ * @param hideLabel - Hide the label, show only value (useful for mobile)
+ * @param className - Additional CSS classes
+ * @param action - Optional actionable element (link, button, icon button) positioned on the right
+ */
+const InfoRow = ({ icon, label, value, variant = "default", size = "md", layout = "vertical", hideIcon = false, hideLabel = false, className = "", action, }) => {
+    const variantClasses = {
+        default: {
+            bg: "",
+            border: "",
+            iconColor: "text-gray-400",
+            labelColor: "text-gray-500",
+        },
+        blue: {
+            bg: "bg-blue-50",
+            border: "border border-blue-200",
+            iconColor: "text-blue-500",
+            labelColor: "text-blue-700",
+        },
+        yellow: {
+            bg: "bg-yellow-50",
+            border: "border border-yellow-200",
+            iconColor: "text-yellow-600",
+            labelColor: "text-yellow-700",
+        },
+        purple: {
+            bg: "bg-purple-50",
+            border: "border border-purple-200",
+            iconColor: "text-purple-500",
+            labelColor: "text-purple-700",
+        },
+        green: {
+            bg: "bg-green-50",
+            border: "border border-green-200",
+            iconColor: "text-green-500",
+            labelColor: "text-green-700",
+        },
+        red: {
+            bg: "bg-red-50",
+            border: "border border-red-200",
+            iconColor: "text-red-500",
+            labelColor: "text-red-700",
+        },
+        indigo: {
+            bg: "bg-indigo-50",
+            border: "border border-indigo-200",
+            iconColor: "text-indigo-500",
+            labelColor: "text-indigo-700",
+        },
+        gray: {
+            bg: "bg-gray-50",
+            border: "border border-gray-200",
+            iconColor: "text-gray-500",
+            labelColor: "text-gray-700",
+        },
+    };
+    const classes = variantClasses[variant];
+    // Size configurations
+    const sizeClasses = {
+        xs: {
+            padding: "p-1",
+            iconSize: "w-3 h-3",
+            labelText: "text-xs",
+            valueText: "text-xs font-medium",
+            spacing: "space-x-1",
+        },
+        sm: {
+            padding: "p-1.5",
+            iconSize: "w-4 h-4",
+            labelText: "text-xs",
+            valueText: "text-sm font-medium",
+            spacing: "space-x-2",
+        },
+        md: {
+            padding: "p-2",
+            iconSize: "w-5 h-5",
+            labelText: "text-sm",
+            valueText: "text-sm font-medium",
+            spacing: "space-x-3",
+        },
+        lg: {
+            padding: "p-3",
+            iconSize: "w-6 h-6",
+            labelText: "text-base",
+            valueText: "text-base font-semibold",
+            spacing: "space-x-4",
+        },
+    };
+    const sizeConfig = sizeClasses[size];
+    // Layout configurations
+    const getLayoutClasses = () => {
+        switch (layout) {
+            case "horizontal":
+                // All elements in one horizontal line with better spacing
+                return {
+                    container: `flex items-center ${sizeConfig.spacing}`,
+                    content: "flex items-center gap-3",
+                    labelValueWrapper: "flex items-center gap-3",
+                };
+            case "inline":
+                // Compact single line
+                return {
+                    container: "flex items-center space-x-1.5",
+                    content: "flex items-center space-x-1",
+                    labelValueWrapper: "flex items-center space-x-1",
+                };
+            case "compact":
+                // Minimal spacing for dense layouts
+                return {
+                    container: "flex items-start space-x-1.5",
+                    content: "flex-1 min-w-0",
+                    labelValueWrapper: "space-y-0.5",
+                };
+            case "vertical":
+            default:
+                // Traditional vertical layout - label on top, value below
+                return {
+                    container: `flex items-start ${sizeConfig.spacing}`,
+                    content: "flex-1",
+                    labelValueWrapper: "flex flex-col space-y-0.5",
+                };
+        }
+    };
+    const layoutClasses = getLayoutClasses();
+    // Build container classes
+    const containerClasses = [
+        layoutClasses.container,
+        variant === "default"
+            ? sizeConfig.padding
+            : `${sizeConfig.padding} rounded-lg ${classes.bg} ${classes.border}`,
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    // Render icon conditionally
+    const renderIcon = () => {
+        if (hideIcon)
+            return null;
+        return (jsxRuntimeExports.jsx("div", { className: `${classes.iconColor} ${layout === "horizontal" || layout === "inline" ? "flex-shrink-0" : "mt-0.5"}`, children: icon }));
+    };
+    // Render label conditionally
+    const renderLabel = () => {
+        if (hideLabel)
+            return null;
+        return (jsxRuntimeExports.jsx("span", { className: `${sizeConfig.labelText} ${classes.labelColor}`, children: label }));
+    };
+    // Render value
+    const renderValue = () => {
+        return (jsxRuntimeExports.jsx("span", { className: `${sizeConfig.valueText} text-gray-900`, children: value }));
+    };
+    // Render content based on layout
+    const renderContent = () => {
+        if (layout === "horizontal") {
+            // Horizontal layout: label and value on same line with better separation
+            return (jsxRuntimeExports.jsxs("div", { className: layoutClasses.content, children: [!hideLabel && renderLabel(), renderValue()] }));
+        }
+        if (layout === "inline") {
+            // Inline layout: compact with colon separator
+            return (jsxRuntimeExports.jsxs("div", { className: layoutClasses.content, children: [!hideLabel && renderLabel(), !hideLabel && jsxRuntimeExports.jsx("span", { className: "text-gray-400", children: ":" }), renderValue()] }));
+        }
+        // Vertical and compact layouts: label on top, value below
+        return (jsxRuntimeExports.jsx("div", { className: layoutClasses.content, children: jsxRuntimeExports.jsxs("div", { className: layoutClasses.labelValueWrapper, children: [!hideLabel && renderLabel(), renderValue()] }) }));
+    };
+    return (jsxRuntimeExports.jsxs("div", { className: containerClasses, children: [renderIcon(), renderContent(), action && jsxRuntimeExports.jsx("div", { className: "ml-auto flex-shrink-0", children: action })] }));
+};
+
+export { InfoRow as default };

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@rubenpazch/info-row",
+  "version": "1.0.1",
+  "description": "InfoRow component",
+  "private": false,
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rubenpazch/lbyte-ui-library.git",
+    "directory": "packages/info-row"
+  },
+  "author": "Ruben Paz Chuspe <rubenpazchuspe@outlook.com>",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@rubenpazch/typescript-config": "3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest --passWithNoTests"
+  }
+}