@buoy-gg/zustand 2.1.10 → 2.1.12

package/lib/commonjs/index.js

@@ -1 +1,91 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"ZUSTAND_ICON_COLOR",{enumerable:!0,get:function(){return _ZustandIcon.ZUSTAND_ICON_COLOR}}),Object.defineProperty(exports,"ZustandIcon",{enumerable:!0,get:function(){return _ZustandIcon.ZustandIcon}}),Object.defineProperty(exports,"ZustandModal",{enumerable:!0,get:function(){return _ZustandModal.ZustandModal}}),Object.defineProperty(exports,"ZustandStateChangeItem",{enumerable:!0,get:function(){return _ZustandStateChangeItem.ZustandStateChangeItem}}),Object.defineProperty(exports,"ZustandStateDetailContent",{enumerable:!0,get:function(){return _ZustandStateDetailContent.ZustandStateDetailContent}}),Object.defineProperty(exports,"ZustandStateDetailFooter",{enumerable:!0,get:function(){return _ZustandStateDetailContent.ZustandStateDetailFooter}}),Object.defineProperty(exports,"buoyDevTools",{enumerable:!0,get:function(){return _buoyZustandMiddleware.buoyDevTools}}),Object.defineProperty(exports,"createZustandTool",{enumerable:!0,get:function(){return _preset.createZustandTool}}),Object.defineProperty(exports,"isStoreInstrumented",{enumerable:!0,get:function(){return _buoyZustandMiddleware.isStoreInstrumented}}),Object.defineProperty(exports,"useZustandStateChanges",{enumerable:!0,get:function(){return _useZustandStateChanges.useZustandStateChanges}}),Object.defineProperty(exports,"watchStores",{enumerable:!0,get:function(){return _buoyZustandMiddleware.watchStores}}),Object.defineProperty(exports,"zustandStateStore",{enumerable:!0,get:function(){return _zustandStateStore.zustandStateStore}}),Object.defineProperty(exports,"zustandToolPreset",{enumerable:!0,get:function(){return _preset.zustandToolPreset}});var _preset=require("./preset"),_buoyZustandMiddleware=require("./zustand/utils/buoyZustandMiddleware"),_useZustandStateChanges=require("./zustand/hooks/useZustandStateChanges"),_ZustandModal=require("./zustand/components/ZustandModal"),_ZustandStateChangeItem=require("./zustand/components/ZustandStateChangeItem"),_ZustandStateDetailContent=require("./zustand/components/ZustandStateDetailContent"),_ZustandIcon=require("./zustand/components/ZustandIcon"),_zustandStateStore=require("./zustand/utils/zustandStateStore");
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ZUSTAND_ICON_COLOR", {
+  enumerable: true,
+  get: function () {
+    return _ZustandIcon.ZUSTAND_ICON_COLOR;
+  }
+});
+Object.defineProperty(exports, "ZustandIcon", {
+  enumerable: true,
+  get: function () {
+    return _ZustandIcon.ZustandIcon;
+  }
+});
+Object.defineProperty(exports, "ZustandModal", {
+  enumerable: true,
+  get: function () {
+    return _ZustandModal.ZustandModal;
+  }
+});
+Object.defineProperty(exports, "ZustandStateChangeItem", {
+  enumerable: true,
+  get: function () {
+    return _ZustandStateChangeItem.ZustandStateChangeItem;
+  }
+});
+Object.defineProperty(exports, "ZustandStateDetailContent", {
+  enumerable: true,
+  get: function () {
+    return _ZustandStateDetailContent.ZustandStateDetailContent;
+  }
+});
+Object.defineProperty(exports, "ZustandStateDetailFooter", {
+  enumerable: true,
+  get: function () {
+    return _ZustandStateDetailContent.ZustandStateDetailFooter;
+  }
+});
+Object.defineProperty(exports, "buoyDevTools", {
+  enumerable: true,
+  get: function () {
+    return _buoyZustandMiddleware.buoyDevTools;
+  }
+});
+Object.defineProperty(exports, "createZustandTool", {
+  enumerable: true,
+  get: function () {
+    return _preset.createZustandTool;
+  }
+});
+Object.defineProperty(exports, "isStoreInstrumented", {
+  enumerable: true,
+  get: function () {
+    return _buoyZustandMiddleware.isStoreInstrumented;
+  }
+});
+Object.defineProperty(exports, "useZustandStateChanges", {
+  enumerable: true,
+  get: function () {
+    return _useZustandStateChanges.useZustandStateChanges;
+  }
+});
+Object.defineProperty(exports, "watchStores", {
+  enumerable: true,
+  get: function () {
+    return _buoyZustandMiddleware.watchStores;
+  }
+});
+Object.defineProperty(exports, "zustandStateStore", {
+  enumerable: true,
+  get: function () {
+    return _zustandStateStore.zustandStateStore;
+  }
+});
+Object.defineProperty(exports, "zustandToolPreset", {
+  enumerable: true,
+  get: function () {
+    return _preset.zustandToolPreset;
+  }
+});
+var _preset = require("./preset");
+var _buoyZustandMiddleware = require("./zustand/utils/buoyZustandMiddleware");
+var _useZustandStateChanges = require("./zustand/hooks/useZustandStateChanges");
+var _ZustandModal = require("./zustand/components/ZustandModal");
+var _ZustandStateChangeItem = require("./zustand/components/ZustandStateChangeItem");
+var _ZustandStateDetailContent = require("./zustand/components/ZustandStateDetailContent");
+var _ZustandIcon = require("./zustand/components/ZustandIcon");
+var _zustandStateStore = require("./zustand/utils/zustandStateStore");

package/lib/commonjs/preset.js

@@ -1 +1,102 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.createZustandTool=createZustandTool,exports.zustandToolPreset=void 0;var _ZustandModal=require("./zustand/components/ZustandModal"),_ZustandIcon=require("./zustand/components/ZustandIcon"),_jsxRuntime=require("react/jsx-runtime");const zustandToolPreset=exports.zustandToolPreset={id:"zustand",name:"ZUSTAND",description:"Zustand store & state inspector",slot:"both",icon:({size:e})=>(0,_jsxRuntime.jsx)(_ZustandIcon.ZustandIcon,{size:e}),component:_ZustandModal.ZustandModal,props:{enableSharedModalDimensions:!1}};function createZustandTool(e){return{id:e?.id||"zustand",name:e?.name||"ZUSTAND",description:e?.description||"Zustand store & state inspector",slot:"both",icon:({size:n})=>(0,_jsxRuntime.jsx)(_ZustandIcon.ZustandIcon,{size:n,color:e?.iconColor}),component:_ZustandModal.ZustandModal,props:{enableSharedModalDimensions:void 0!==e?.enableSharedModalDimensions&&e.enableSharedModalDimensions}}}
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createZustandTool = createZustandTool;
+exports.zustandToolPreset = void 0;
+var _ZustandModal = require("./zustand/components/ZustandModal");
+var _ZustandIcon = require("./zustand/components/ZustandIcon");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Pre-configured Zustand DevTools preset for FloatingDevTools
+ *
+ * ZERO-CONFIG: This preset is auto-discovered by FloatingDevTools!
+ * Just install @buoy-gg/zustand and wrap your stores with buoyDevTools().
+ *
+ * @example Automatic (recommended)
+ * ```tsx
+ * import { create } from 'zustand';
+ * import { buoyDevTools } from '@buoy-gg/zustand';
+ *
+ * const useCounterStore = create(
+ *   buoyDevTools(
+ *     (set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
+ *     { name: 'counterStore' }
+ *   )
+ * );
+ *
+ * // The Zustand tool appears automatically in FloatingDevTools!
+ * <FloatingDevTools />
+ * ```
+ *
+ * @example Manual (only for custom configuration)
+ * ```tsx
+ * import { createZustandTool } from '@buoy-gg/zustand';
+ *
+ * const customZustandTool = createZustandTool({
+ *   name: "STATE",
+ *   iconColor: "#463B3F",
+ * });
+ *
+ * <FloatingDevTools apps={[customZustandTool]} />
+ * ```
+ */
+
+/**
+ * Pre-configured Zustand DevTools preset for FloatingDevTools.
+ * Includes:
+ * - Live state change monitoring
+ * - State inspection (JSON viewer)
+ * - State diff visualization (tree + split)
+ * - Filter by store name
+ * - Changed keys tracking
+ */
+const zustandToolPreset = exports.zustandToolPreset = {
+  id: "zustand",
+  name: "ZUSTAND",
+  description: "Zustand store & state inspector",
+  slot: "both",
+  icon: ({
+    size
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandIcon.ZustandIcon, {
+    size: size
+  }),
+  component: _ZustandModal.ZustandModal,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom Zustand DevTools configuration.
+ * Use this if you want to override default settings.
+ *
+ * @example
+ * ```tsx
+ * import { createZustandTool } from '@buoy-gg/zustand';
+ *
+ * const myZustandTool = createZustandTool({
+ *   name: "STATE",
+ *   iconColor: "#463B3F",
+ * });
+ * ```
+ */
+function createZustandTool(options) {
+  return {
+    id: options?.id || "zustand",
+    name: options?.name || "ZUSTAND",
+    description: options?.description || "Zustand store & state inspector",
+    slot: "both",
+    icon: ({
+      size
+    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ZustandIcon.ZustandIcon, {
+      size: size,
+      color: options?.iconColor
+    }),
+    component: _ZustandModal.ZustandModal,
+    props: {
+      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
+    }
+  };
+}

package/lib/commonjs/zustand/components/ZustandActionButton.js

@@ -1 +1,116 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandActionButton=ZustandActionButton;var _reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_jsxRuntime=require("react/jsx-runtime");const buttonConfigs={copy:{color:_sharedUi.buoyColors.primary,backgroundColor:_sharedUi.buoyColors.primary+"15",borderColor:_sharedUi.buoyColors.primary+"40",textColor:_sharedUi.buoyColors.primary},reset:{color:_sharedUi.buoyColors.warning,backgroundColor:_sharedUi.buoyColors.warning+"15",borderColor:_sharedUi.buoyColors.warning+"40",textColor:_sharedUi.buoyColors.warning},clear:{color:_sharedUi.buoyColors.error,backgroundColor:_sharedUi.buoyColors.error+"15",borderColor:_sharedUi.buoyColors.error+"40",textColor:_sharedUi.buoyColors.error},jump:{color:_sharedUi.buoyColors.warning,backgroundColor:_sharedUi.buoyColors.warning+"15",borderColor:_sharedUi.buoyColors.warning+"40",textColor:_sharedUi.buoyColors.warning}};function ZustandActionButton({onPress:o,text:r,type:e,disabled:t=!1}){const s=buttonConfigs[e];return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{disabled:t,onPress:o,style:[styles.button,{backgroundColor:t?_sharedUi.buoyColors.textMuted+"1A":s.backgroundColor,borderColor:t?_sharedUi.buoyColors.textMuted+"33":s.borderColor,opacity:t?.5:1}],activeOpacity:.7,accessibilityRole:"button",accessibilityLabel:r,accessibilityState:{disabled:t},children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.dot,{backgroundColor:t?_sharedUi.buoyColors.textMuted:s.color}]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.text,{color:t?_sharedUi.buoyColors.textMuted:s.textColor}],children:r})]})}const styles=_reactNative.StyleSheet.create({button:{flexDirection:"row",alignItems:"center",justifyContent:"center",borderRadius:6,borderWidth:1,paddingHorizontal:12,paddingVertical:6,height:25,minWidth:80,shadowOffset:{width:0,height:1},shadowOpacity:.2,shadowRadius:2,elevation:2},dot:{width:5,height:5,borderRadius:3,marginRight:6,shadowColor:_sharedUi.buoyColors.text,shadowOffset:{width:0,height:0},shadowOpacity:.6,shadowRadius:2},text:{fontSize:10,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase",fontFamily:"monospace",height:12}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZustandActionButton = ZustandActionButton;
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * ZustandActionButton
+ *
+ * Generic action button for Zustand DevTools footer.
+ * Mirrors ReduxActionButton.tsx
+ */
+
+const buttonConfigs = {
+  copy: {
+    color: _sharedUi.buoyColors.primary,
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    borderColor: _sharedUi.buoyColors.primary + "40",
+    textColor: _sharedUi.buoyColors.primary
+  },
+  reset: {
+    color: _sharedUi.buoyColors.warning,
+    backgroundColor: _sharedUi.buoyColors.warning + "15",
+    borderColor: _sharedUi.buoyColors.warning + "40",
+    textColor: _sharedUi.buoyColors.warning
+  },
+  clear: {
+    color: _sharedUi.buoyColors.error,
+    backgroundColor: _sharedUi.buoyColors.error + "15",
+    borderColor: _sharedUi.buoyColors.error + "40",
+    textColor: _sharedUi.buoyColors.error
+  },
+  jump: {
+    color: _sharedUi.buoyColors.warning,
+    backgroundColor: _sharedUi.buoyColors.warning + "15",
+    borderColor: _sharedUi.buoyColors.warning + "40",
+    textColor: _sharedUi.buoyColors.warning
+  }
+};
+function ZustandActionButton({
+  onPress,
+  text,
+  type,
+  disabled = false
+}) {
+  const config = buttonConfigs[type];
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+    disabled: disabled,
+    onPress: onPress,
+    style: [styles.button, {
+      backgroundColor: disabled ? _sharedUi.buoyColors.textMuted + "1A" : config.backgroundColor,
+      borderColor: disabled ? _sharedUi.buoyColors.textMuted + "33" : config.borderColor,
+      opacity: disabled ? 0.5 : 1
+    }],
+    activeOpacity: 0.7,
+    accessibilityRole: "button",
+    accessibilityLabel: text,
+    accessibilityState: {
+      disabled
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.dot, {
+        backgroundColor: disabled ? _sharedUi.buoyColors.textMuted : config.color
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.text, {
+        color: disabled ? _sharedUi.buoyColors.textMuted : config.textColor
+      }],
+      children: text
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: 6,
+    borderWidth: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    height: 25,
+    minWidth: 80,
+    shadowOffset: {
+      width: 0,
+      height: 1
+    },
+    shadowOpacity: 0.2,
+    shadowRadius: 2,
+    elevation: 2
+  },
+  dot: {
+    width: 5,
+    height: 5,
+    borderRadius: 3,
+    marginRight: 6,
+    shadowColor: _sharedUi.buoyColors.text,
+    shadowOffset: {
+      width: 0,
+      height: 0
+    },
+    shadowOpacity: 0.6,
+    shadowRadius: 2
+  },
+  text: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    fontFamily: "monospace",
+    height: 12
+  }
+});

package/lib/commonjs/zustand/components/ZustandDetailViewToggle.js

@@ -1 +1,134 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ZustandDetailViewToggle=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(e,r){if("function"==typeof WeakMap)var t=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,r){if(!r&&e&&e.__esModule)return e;var i,o,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(i=r?a:t){if(i.has(e))return i.get(e);i.set(e,s)}for(const r in e)"default"!==r&&{}.hasOwnProperty.call(e,r)&&((o=(i=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,r))&&(o.get||o.set)?i(s,r,o):s[r]=e[r]);return s})(e,r)}const VIEW_CONFIGS=[{key:"change",label:"CHANGE",description:"View change details",icon:_sharedUi.FileText,activeColor:_sharedUi.macOSColors.semantic.warning},{key:"state",label:"STATE",description:"View current state",icon:_sharedUi.Database,activeColor:_sharedUi.macOSColors.semantic.info},{key:"diff",label:"DIFF",description:"Compare changes",icon:_sharedUi.GitBranch,activeColor:_sharedUi.macOSColors.semantic.success}],ZustandDetailViewToggle=exports.ZustandDetailViewToggle=(0,_react.memo)(function({activeView:e,onViewChange:r,diffDisabled:t=!1}){return(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:VIEW_CONFIGS.map(a=>{const i=e===a.key,o="diff"===a.key&&t,s=a.icon;return(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.card,i&&[styles.cardActive,{borderColor:a.activeColor}],o&&styles.cardDisabled],onPress:()=>!o&&r(a.key),activeOpacity:o?1:.8,disabled:o,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.cardContent,children:[(0,_jsxRuntime.jsx)(s,{size:14,color:i?a.activeColor:o?_sharedUi.macOSColors.text.muted:_sharedUi.macOSColors.text.secondary}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.cardLabel,i&&[styles.cardLabelActive,{color:a.activeColor}],o&&styles.cardLabelDisabled],children:a.label})]}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.cardDescription,i&&styles.cardDescriptionActive,o&&styles.cardDescriptionDisabled],children:a.description})]},a.key)})})}),styles=_reactNative.StyleSheet.create({container:{flexDirection:"row",gap:8,padding:14,backgroundColor:_sharedUi.macOSColors.background.base},card:{flex:1,backgroundColor:_sharedUi.macOSColors.background.card,borderRadius:12,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default,padding:10,gap:4},cardActive:{borderWidth:1.5,backgroundColor:"rgba(0, 184, 230, 0.05)",shadowColor:_sharedUi.macOSColors.semantic.info,shadowOffset:{width:0,height:2},shadowOpacity:.1,shadowRadius:8,elevation:3},cardDisabled:{opacity:.5},cardContent:{flexDirection:"row",alignItems:"center",gap:6},cardLabel:{fontSize:10,fontWeight:"700",letterSpacing:.5,color:_sharedUi.macOSColors.text.secondary},cardLabelActive:{color:_sharedUi.macOSColors.text.primary},cardLabelDisabled:{color:_sharedUi.macOSColors.text.muted},cardDescription:{fontSize:9,color:_sharedUi.macOSColors.text.muted,lineHeight:12},cardDescriptionActive:{color:_sharedUi.macOSColors.text.secondary},cardDescriptionDisabled:{color:_sharedUi.macOSColors.text.muted}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ZustandDetailViewToggle = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * ZustandDetailViewToggle
+ *
+ * Three-card toggle for switching between Change, State, and Diff views.
+ * Mirrors ReduxDetailViewToggle.tsx
+ */
+
+const VIEW_CONFIGS = [{
+  key: "change",
+  label: "CHANGE",
+  description: "View change details",
+  icon: _sharedUi.FileText,
+  activeColor: _sharedUi.macOSColors.semantic.warning
+}, {
+  key: "state",
+  label: "STATE",
+  description: "View current state",
+  icon: _sharedUi.Database,
+  activeColor: _sharedUi.macOSColors.semantic.info
+}, {
+  key: "diff",
+  label: "DIFF",
+  description: "Compare changes",
+  icon: _sharedUi.GitBranch,
+  activeColor: _sharedUi.macOSColors.semantic.success
+}];
+const ZustandDetailViewToggle = exports.ZustandDetailViewToggle = /*#__PURE__*/(0, _react.memo)(function ZustandDetailViewToggle({
+  activeView,
+  onViewChange,
+  diffDisabled = false
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.container,
+    children: VIEW_CONFIGS.map(config => {
+      const isActive = activeView === config.key;
+      const isDisabled = config.key === "diff" && diffDisabled;
+      const IconComponent = config.icon;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+        style: [styles.card, isActive && [styles.cardActive, {
+          borderColor: config.activeColor
+        }], isDisabled && styles.cardDisabled],
+        onPress: () => !isDisabled && onViewChange(config.key),
+        activeOpacity: isDisabled ? 1 : 0.8,
+        disabled: isDisabled,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.cardContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+            size: 14,
+            color: isActive ? config.activeColor : isDisabled ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.secondary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
+              color: config.activeColor
+            }], isDisabled && styles.cardLabelDisabled],
+            children: config.label
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
+          children: config.description
+        })]
+      }, config.key);
+    })
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    gap: 8,
+    padding: 14,
+    backgroundColor: _sharedUi.macOSColors.background.base
+  },
+  card: {
+    flex: 1,
+    backgroundColor: _sharedUi.macOSColors.background.card,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    padding: 10,
+    gap: 4
+  },
+  cardActive: {
+    borderWidth: 1.5,
+    backgroundColor: "rgba(0, 184, 230, 0.05)",
+    shadowColor: _sharedUi.macOSColors.semantic.info,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 8,
+    elevation: 3
+  },
+  cardDisabled: {
+    opacity: 0.5
+  },
+  cardContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  cardLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    letterSpacing: 0.5,
+    color: _sharedUi.macOSColors.text.secondary
+  },
+  cardLabelActive: {
+    color: _sharedUi.macOSColors.text.primary
+  },
+  cardLabelDisabled: {
+    color: _sharedUi.macOSColors.text.muted
+  },
+  cardDescription: {
+    fontSize: 9,
+    color: _sharedUi.macOSColors.text.muted,
+    lineHeight: 12
+  },
+  cardDescriptionActive: {
+    color: _sharedUi.macOSColors.text.secondary
+  },
+  cardDescriptionDisabled: {
+    color: _sharedUi.macOSColors.text.muted
+  }
+});