@idealyst/mcp-server 1.1.2 → 1.1.3

package/dist/data/components/Button.d.ts

@@ -10,6 +10,7 @@ export declare const Button: {
         variants: string;
         "with-icons": string;
         interactive: string;
+        gradient: string;
     };
 };
 //# sourceMappingURL=Button.d.ts.map

package/dist/data/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/data/components/Button.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAqFlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/data/components/Button.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CA4GlB,CAAC"}

package/dist/data/components/Button.js

@@ -6,9 +6,10 @@ export const Button = {
 - \`title\`: string - The text title to display inside the button (for web)
 - \`onPress\`: function - Called when the button is pressed
 - \`disabled\`: boolean - Whether the button is disabled
-- \`type\`: ButtonType - The visual style type of the button
+- \`type\`: ButtonType - The visual style type of the button ('contained' | 'outlined' | 'text')
 - \`intent\`: ButtonIntentVariant - The intent/color scheme of the button
 - \`size\`: ButtonSizeVariant - The size of the button
+- \`gradient\`: ButtonGradient - Optional gradient overlay effect ('darken' | 'lighten'). Only applies to 'contained' type buttons.
 - \`leftIcon\`: IconName | React.ReactNode - Icon to display on the left side. Can be an icon name or custom component (ReactNode)
 - \`rightIcon\`: IconName | React.ReactNode - Icon to display on the right side. Can be an icon name or custom component (ReactNode)
 `,
@@ -16,6 +17,7 @@ export const Button = {
         "Three variants: contained, outlined, text",
         "Five intent colors for semantic meaning",
         "Three sizes: sm, md, lg",
+        "Gradient overlay effects (darken/lighten) for contained buttons",
         "Icon support with string names or custom React elements",
         "Loading and disabled states",
         "Full width option",
@@ -26,6 +28,7 @@ export const Button = {
         "Use 'contained' variant for prominent actions",
         "Use icon names (strings) for consistency with design system",
         "Keep button labels concise and action-oriented",
+        "Use gradient='darken' for a subtle depth effect on hero/CTA buttons",
     ],
     usage: `
 import { Button } from '@idealyst/components';
@@ -82,6 +85,26 @@ function Example() {
     </Button>
   );
 }`,
+        gradient: `import { Button } from '@idealyst/components';
+
+// Gradient overlay adds subtle depth to contained buttons
+<Button type="contained" intent="primary" gradient="darken">
+  Darken Effect
+</Button>
+
+<Button type="contained" intent="success" gradient="lighten">
+  Lighten Effect
+</Button>
+
+// Gradient with icons
+<Button
+  type="contained"
+  intent="primary"
+  gradient="darken"
+  leftIcon="rocket-launch"
+>
+  Launch
+</Button>`,
     }
 };
 //# sourceMappingURL=Button.js.map

package/dist/data/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/data/components/Button.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACtB,QAAQ,EAAE,MAAM;IACZ,WAAW,EAAE,8EAA8E;IACvF,KAAK,EAAE;;;;;;;;;;CAUd;IACG,QAAQ,EAAE;QACR,2CAA2C;QAC3C,yCAAyC;QACzC,yBAAyB;QACzB,yDAAyD;QACzD,6BAA6B;QAC7B,mBAAmB;QACnB,uCAAuC;KACxC;IACD,aAAa,EAAE;QACb,uCAAuC;QACvC,+CAA+C;QAC/C,6DAA6D;QAC7D,gDAAgD;KACjD;IACD,KAAK,EAAE;;;;;;;;;;;CAWV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;UAKH;QACJ,QAAQ,EAAE;;;;;mDAKmC;QAC7C,YAAY,EAAE;;;;;;;;wBAQI;QAClB,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;EAoBjB;KACG;CACJ,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/data/components/Button.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACtB,QAAQ,EAAE,MAAM;IACZ,WAAW,EAAE,8EAA8E;IACvF,KAAK,EAAE;;;;;;;;;;;CAWd;IACG,QAAQ,EAAE;QACR,2CAA2C;QAC3C,yCAAyC;QACzC,yBAAyB;QACzB,iEAAiE;QACjE,yDAAyD;QACzD,6BAA6B;QAC7B,mBAAmB;QACnB,uCAAuC;KACxC;IACD,aAAa,EAAE;QACb,uCAAuC;QACvC,+CAA+C;QAC/C,6DAA6D;QAC7D,gDAAgD;QAChD,qEAAqE;KACtE;IACD,KAAK,EAAE;;;;;;;;;;;CAWV;IACG,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;UAKH;QACJ,QAAQ,EAAE;;;;;mDAKmC;QAC7C,YAAY,EAAE;;;;;;;;wBAQI;QAClB,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;EAoBjB;QACI,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;UAmBN;KACL;CACJ,CAAC"}

package/dist/data/components/TabBar.d.ts

@@ -10,6 +10,8 @@ export declare const TabBar: {
         variants: string;
         "with-icons": string;
         interactive: string;
+        justify: string;
+        "bottom-nav": string;
     };
 };
 //# sourceMappingURL=TabBar.d.ts.map

package/dist/data/components/TabBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/data/components/TabBar.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAqJlB,CAAC"}
+{"version":3,"file":"TabBar.d.ts","sourceRoot":"","sources":["../../../src/data/components/TabBar.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;CAuPlB,CAAC"}

package/dist/data/components/TabBar.js

@@ -1,38 +1,46 @@
 export const TabBar = {
     category: "navigation",
-    description: "Tab bar navigation component with spacing variants for switching between views or sections",
+    description: "Tab bar navigation component with icons, layout options, and spacing variants for switching between views or sections",
     props: `
 - \`items\`: TabBarItem[] - Array of tab items to display
+  - \`value\`: string - Unique identifier for the tab
+  - \`label\`: string - Display text for the tab
+  - \`icon\`: ReactNode | ((props: { active: boolean; size: number }) => ReactNode) - Optional icon
+  - \`disabled\`: boolean - Whether the tab is disabled
 - \`value\`: string - The currently selected tab value (controlled)
 - \`defaultValue\`: string - The default selected tab for uncontrolled usage
 - \`onChange\`: function - Called when the selected tab changes
-- \`type\`: TabBarType - The visual style variant (default, underlined, pills)
-- \`size\`: TabBarSizeVariant - The size variant of the tabs
-- \`gap\`: Size - Space between tabs ('xs' | 'sm' | 'md' | 'lg' | 'xl')
+- \`type\`: 'standard' | 'pills' | 'underline' - The visual style variant
+- \`size\`: 'xs' | 'sm' | 'md' | 'lg' | 'xl' - The size variant of the tabs
+- \`iconPosition\`: 'left' | 'top' - Position of icon relative to label (default: 'left')
+- \`justify\`: 'start' | 'center' | 'equal' | 'space-between' - Layout justification (default: 'start')
+- \`pillMode\`: 'light' | 'dark' - Mode for pills variant
+- \`gap\`: Size - Space between tabs
 - \`padding\`: Size - Padding on all sides
 - \`paddingVertical\`: Size - Top and bottom padding
 - \`paddingHorizontal\`: Size - Left and right padding
 - \`margin\`: Size - Margin on all sides
 - \`marginVertical\`: Size - Top and bottom margin
 - \`marginHorizontal\`: Size - Left and right margin
-- \`pillMode\`: TabBarPillMode - Mode for pills variant: 'light' for light backgrounds (dark pill), 'dark' for dark backgrounds (light pill)
 `,
     features: [
-        "Three visual variants",
+        "Three visual variants (standard, pills, underline)",
+        "Icon support with render function for active state",
+        "Icon position: left (horizontal) or top (stacked)",
+        "Layout justification: start, center, equal, space-between",
         "Controlled and uncontrolled modes",
-        "Three sizes",
+        "Five sizes (xs, sm, md, lg, xl)",
         "Gap, padding, and margin variants",
-        "Five intent colors",
         "Disabled tabs",
-        "Simple configuration",
     ],
     bestPractices: [
         "Use 'underline' variant for page-level navigation",
         "Use 'pills' variant for contained sections",
+        "Use justify='equal' with iconPosition='top' for bottom navigation style",
+        "Use icon render function to change color based on active state",
         "Keep tab labels short (1-2 words)",
         "Use 3-5 tabs for optimal UX",
         "Disable tabs when content is unavailable",
-        "Preload tab content for smooth transitions",
     ],
     usage: `
 import { TabBar } from '@idealyst/components';
@@ -73,33 +81,48 @@ const items = [
   { value: 'b', label: 'Second' },
 ];
 
-<View spacing="md">
-  <TabBar items={items} type="default" />
+<View gap="md">
+  <TabBar items={items} type="standard" />
   <TabBar items={items} type="pills" />
   <TabBar items={items} type="underline" />
 </View>`,
-        "with-icons": `import { TabBar, View, Text } from '@idealyst/components';
+        "with-icons": `import { TabBar, View, Icon } from '@idealyst/components';
 import { useState } from 'react';
 
 function Example() {
-  const [tab, setTab] = useState('overview');
+  const [tab, setTab] = useState('home');
 
   const items = [
-    { value: 'overview', label: 'Overview' },
-    { value: 'analytics', label: 'Analytics' },
-    { value: 'reports', label: 'Reports' },
+    {
+      value: 'home',
+      label: 'Home',
+      icon: ({ active, size }) => (
+        <Icon name="home" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+    {
+      value: 'search',
+      label: 'Search',
+      icon: ({ active, size }) => (
+        <Icon name="magnify" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+    {
+      value: 'profile',
+      label: 'Profile',
+      icon: ({ active, size }) => (
+        <Icon name="account" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
   ];
 
   return (
-    <View spacing="md">
-      <TabBar
-        items={items}
-        value={tab}
-        onChange={setTab}
-        type="underline"
-        intent="primary"
-      />
-      <Text>{tab} content here</Text>
+    <View gap="md">
+      {/* Icons on left (default) */}
+      <TabBar items={items} value={tab} onChange={setTab} iconPosition="left" />
+
+      {/* Icons on top (stacked) */}
+      <TabBar items={items} value={tab} onChange={setTab} iconPosition="top" />
     </View>
   );
 }`,
@@ -130,7 +153,7 @@ function Example() {
   };
 
   return (
-    <View spacing="md">
+    <View gap="md">
       <TabBar
         items={items}
         value={activeTab}
@@ -142,6 +165,79 @@ function Example() {
       </Card>
     </View>
   );
+}`,
+        justify: `import { TabBar, View, Text } from '@idealyst/components';
+
+const items = [
+  { value: 'tab1', label: 'Tab 1' },
+  { value: 'tab2', label: 'Tab 2' },
+  { value: 'tab3', label: 'Tab 3' },
+];
+
+<View gap="md">
+  {/* Left aligned (default) */}
+  <Text typography="caption">justify="start"</Text>
+  <TabBar items={items} justify="start" />
+
+  {/* Centered */}
+  <Text typography="caption">justify="center"</Text>
+  <TabBar items={items} justify="center" />
+
+  {/* Full width, equal sized tabs */}
+  <Text typography="caption">justify="equal"</Text>
+  <TabBar items={items} justify="equal" />
+
+  {/* Space between tabs */}
+  <Text typography="caption">justify="space-between"</Text>
+  <TabBar items={items} justify="space-between" />
+</View>`,
+        "bottom-nav": `import { TabBar, Icon } from '@idealyst/components';
+import { useState } from 'react';
+
+// Bottom navigation style: full width with stacked icons
+function BottomNav() {
+  const [tab, setTab] = useState('home');
+
+  const items = [
+    {
+      value: 'home',
+      label: 'Home',
+      icon: ({ active, size }) => (
+        <Icon name="home" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+    {
+      value: 'search',
+      label: 'Search',
+      icon: ({ active, size }) => (
+        <Icon name="magnify" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+    {
+      value: 'notifications',
+      label: 'Alerts',
+      icon: ({ active, size }) => (
+        <Icon name="bell" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+    {
+      value: 'profile',
+      label: 'Profile',
+      icon: ({ active, size }) => (
+        <Icon name="account" size={size} color={active ? 'primary' : 'secondary'} />
+      ),
+    },
+  ];
+
+  return (
+    <TabBar
+      items={items}
+      value={tab}
+      onChange={setTab}
+      justify="equal"
+      iconPosition="top"
+    />
+  );
 }`,
     },
 };

package/dist/data/components/TabBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../../src/data/components/TabBar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,4FAA4F;IACrG,KAAK,EAAE;;;;;;;;;;;;;;;CAeZ;IACC,QAAQ,EAAE;QACR,uBAAuB;QACvB,mCAAmC;QACnC,aAAa;QACb,mCAAmC;QACnC,oBAAoB;QACpB,eAAe;QACf,sBAAsB;KACvB;IACD,aAAa,EAAE;QACb,mDAAmD;QACnD,4CAA4C;QAC5C,mCAAmC;QACnC,6BAA6B;QAC7B,0CAA0C;QAC1C,4CAA4C;KAC7C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;CAsBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;0CAO+B;QAEtC,QAAQ,EAAE;;;;;;;;;;;QAWN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;EAwBhB;QAEE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCf;KACC;CACF,CAAC"}
+{"version":3,"file":"TabBar.js","sourceRoot":"","sources":["../../../src/data/components/TabBar.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE,YAAY;IACtB,WAAW,EAAE,uHAAuH;IAChI,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;CAqBZ;IACC,QAAQ,EAAE;QACR,oDAAoD;QACpD,oDAAoD;QACpD,mDAAmD;QACnD,2DAA2D;QAC3D,mCAAmC;QACnC,iCAAiC;QACjC,mCAAmC;QACnC,eAAe;KAChB;IACD,aAAa,EAAE;QACb,mDAAmD;QACnD,4CAA4C;QAC5C,yEAAyE;QACzE,gEAAgE;QAChE,mCAAmC;QACnC,6BAA6B;QAC7B,0CAA0C;KAC3C;IACD,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;CAsBR;IACC,QAAQ,EAAE;QACR,KAAK,EAAE;;;;;;;0CAO+B;QAEtC,QAAQ,EAAE;;;;;;;;;;;QAWN;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuChB;QAEE,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCf;QAEE,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;QAwBL;QAEJ,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+ChB;KACC;CACF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/mcp-server",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "MCP server providing documentation and examples for the Idealyst framework",
   "main": "dist/index.js",
   "bin": {
@@ -35,9 +35,9 @@
   "author": "Idealyst",
   "license": "MIT",
   "dependencies": {
-    "@idealyst/components": "^1.1.2",
-    "@idealyst/navigation": "^1.1.2",
-    "@idealyst/theme": "^1.1.2",
+    "@idealyst/components": "^1.1.3",
+    "@idealyst/navigation": "^1.1.3",
+    "@idealyst/theme": "^1.1.3",
     "@modelcontextprotocol/sdk": "^1.0.4"
   },
   "devDependencies": {