blixify-ui-web-mcp 0.1.18 → 0.1.20

package/lib/components/action/button/button.stories.tsx

@@ -1,12 +1,12 @@
 import React from "react";
-import { Button } from ".";
+import { Button as ButtonImpl } from ".";
 import { StorySection } from "../../storyUtils";
 
 const meta = { title: "Action/Button" };
 export default meta;
 
 
-export const ButtonStory = () => (
+export const Button = () => (
   <div className="font-sans max-w-2xl p-6">
     <StorySection
       title="Button Types"
@@ -19,11 +19,28 @@ export const ButtonStory = () => (
         </>
       }
     >
-      <Button text="Normal" size="small" type="normal" />
-      <Button text="Dark" size="small" type="dark" />
-      <Button text="Light" size="small" type="light" />
-      <Button text="Icon" size="small" type="icon" />
-      <Button text="Danger" size="small" type="danger" />
+      <ButtonImpl text="Normal" size="small" type="normal" />
+      <ButtonImpl text="Dark" size="small" type="dark" />
+      <ButtonImpl text="Light" size="small" type="light" />
+      <ButtonImpl text="Icon" size="small" type="icon" />
+      <ButtonImpl text="Danger" size="small" type="danger" />
+    </StorySection>
+
+    <StorySection
+      title="Pill"
+      description={
+        <>
+          Use <code>type="pill"</code> for a chip-style affordance — useful as
+          a standalone primary tag or call-out. For a selectable row of pills
+          (one active at a time) use{" "}
+          <code>{`<ButtonGroup variant="pill" />`}</code> instead, since
+          selection state lives at the group level.
+        </>
+      }
+    >
+      <ButtonImpl text="Add entry" type="pill" />
+      <ButtonImpl text="New record" type="pill" />
+      <ButtonImpl text="Sync" type="pill" disable />
     </StorySection>
 
     <StorySection
@@ -36,7 +53,7 @@ export const ButtonStory = () => (
       }
       dark
     >
-      <Button text="Dark Mode" size="small" type="darkMode" />
+      <ButtonImpl text="Dark Mode" size="small" type="darkMode" />
     </StorySection>
 
     <StorySection
@@ -49,9 +66,9 @@ export const ButtonStory = () => (
       }
     >
       <div className="flex flex-wrap gap-3 items-end">
-        <Button text="Default" type="normal" />
-        <Button text="Small" size="small" type="normal" />
-        <Button text="Extra Small" size="extraSmall" type="normal" />
+        <ButtonImpl text="Default" type="normal" />
+        <ButtonImpl text="Small" size="small" type="normal" />
+        <ButtonImpl text="Extra Small" size="extraSmall" type="normal" />
       </div>
     </StorySection>
 
@@ -64,13 +81,13 @@ export const ButtonStory = () => (
         </>
       }
     >
-      <Button
+      <ButtonImpl
         text="Add Item"
         size="small"
         type="normal"
         icon={<span className="mr-1.5">＋</span>}
       />
-      <Button
+      <ButtonImpl
         text="Settings"
         size="small"
         type="icon"
@@ -89,7 +106,7 @@ export const ButtonStory = () => (
         </>
       }
     >
-      <Button
+      <ButtonImpl
         text="Opens Below Left"
         size="small"
         type="normal"
@@ -101,7 +118,7 @@ export const ButtonStory = () => (
         popUpDirection="bottom"
         popUpAnchor="left"
       />
-      <Button
+      <ButtonImpl
         text="Opens Below Right"
         size="small"
         type="light"
@@ -124,9 +141,9 @@ export const ButtonStory = () => (
         </>
       }
     >
-      <Button text="Normal" size="small" type="normal" disable={true} />
-      <Button text="Light" size="small" type="light" disable={true} />
-      <Button text="Danger" size="small" type="danger" disable={true} />
+      <ButtonImpl text="Normal" size="small" type="normal" disable={true} />
+      <ButtonImpl text="Light" size="small" type="light" disable={true} />
+      <ButtonImpl text="Danger" size="small" type="danger" disable={true} />
     </StorySection>
   </div>
 )

package/lib/components/action/buttonGroup/buttonGroup.stories.tsx

@@ -1,5 +1,11 @@
+import {
+  ArrowDownTrayIcon,
+  ArrowPathIcon,
+  PlusIcon,
+  SparklesIcon,
+} from "@heroicons/react/24/outline";
 import React, { useState } from "react";
-import { ButtonGroup } from ".";
+import { ButtonGroup as ButtonGroupImpl } from ".";
 import { StorySection } from "../../storyUtils";
 
 const meta = { title: "Action/Button Group" };
@@ -12,7 +18,7 @@ const defaultSelection = [
   { id: "item3", name: "Item 3" },
 ];
 
-export const ButtonGroupStory = () => {
+export const ButtonGroup = () => {
   const [selectedId, setSelectedId] = useState("item1");
 
   return (
@@ -21,7 +27,7 @@ export const ButtonGroupStory = () => {
         title="Default"
         description="Standard segmented button group. Each item is a bordered button; the selected item is highlighted with the primary color ring."
       >
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}
@@ -38,7 +44,7 @@ export const ButtonGroupStory = () => {
           </>
         }
       >
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}
@@ -57,14 +63,14 @@ export const ButtonGroupStory = () => {
           </>
         }
       >
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}
           selectedId={selectedId}
           variant="tag"
         />
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}
@@ -74,6 +80,72 @@ export const ButtonGroupStory = () => {
         />
       </StorySection>
 
+      <StorySection
+        title="Variant: Pill"
+        description={
+          <>
+            Use <code>variant="pill"</code> for a chip-style row of toggleable
+            actions — typical for quick-action bars on home pages. Items render
+            with a rounded-full primary chip; the selected one fills with{" "}
+            <code>primary-500</code>. Each <code>Selection</code> can pass an{" "}
+            <code>icon</code> to render before the label.
+          </>
+        }
+      >
+        <ButtonGroupImpl
+          selection={[
+            {
+              id: "add",
+              name: "Add entry",
+              icon: (
+                <PlusIcon
+                  className={`h-4 w-4 ${
+                    selectedId === "add" ? "text-white" : "text-primary-600"
+                  }`}
+                />
+              ),
+            },
+            {
+              id: "new",
+              name: "New record",
+              icon: (
+                <SparklesIcon
+                  className={`h-4 w-4 ${
+                    selectedId === "new" ? "text-white" : "text-primary-600"
+                  }`}
+                />
+              ),
+            },
+            {
+              id: "sync",
+              name: "Sync",
+              icon: (
+                <ArrowPathIcon
+                  className={`h-4 w-4 ${
+                    selectedId === "sync" ? "text-white" : "text-primary-600"
+                  }`}
+                />
+              ),
+            },
+            {
+              id: "export",
+              name: "Export",
+              icon: (
+                <ArrowDownTrayIcon
+                  className={`h-4 w-4 ${
+                    selectedId === "export" ? "text-white" : "text-primary-600"
+                  }`}
+                />
+              ),
+            },
+          ]}
+          containerClassName="w-full"
+          onClick={setSelectedId}
+          selectedId={selectedId}
+          variant="pill"
+        />
+      </StorySection>
+
       <StorySection
         title="Dark Mode"
         description={
@@ -85,7 +157,7 @@ export const ButtonGroupStory = () => {
         }
         dark
       >
-        <ButtonGroup
+        <ButtonGroupImpl
           selection={defaultSelection}
           containerClassName="w-full"
           onClick={setSelectedId}

package/lib/components/action/iconButton/README.md

@@ -37,3 +37,4 @@ import { IconButton } from "blixify-ui-web/action/iconButton";
 | `className`  | `tailwind class` | ""                    |             |
 | `bgColor`    | `string`         | Icon background color |
 | `onClick`    | `function`       | `() => {}`            |             |
+| `size`       | `small`          | `undefined`           |             |

package/lib/components/action/iconButton/iconButton.stories.tsx

@@ -1,16 +1,25 @@
 import { Bars3Icon } from "@heroicons/react/24/solid";
 import React from "react";
-import { IconButton } from ".";
+import { IconButton as IconButtonImpl } from ".";
 
 const meta = { title: "Action/Icon Button" };
 export default meta;
 
-
-export const IconButtonStory = () => {
+export const IconButton = () => {
   return (
-    <IconButton
+    <IconButtonImpl
       icon={<Bars3Icon className="h-5 w-5 text-gray-400" />}
       onClick={() => {}}
     />
   );
-}
+};
+
+export const SquareIconButton = () => {
+  return (
+    <IconButtonImpl
+      icon={<Bars3Icon className="h-5 w-5" />}
+      className="h-10 w-10"
+      onClick={() => {}}
+    />
+  );
+};

package/lib/components/action/radioList/radioList.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { RadioList, RadioListItem } from ".";
+import { RadioList as RadioListImpl, RadioListItem } from ".";
 import { TextButton } from "../textButton";
 import { StorySection } from "../../storyUtils";
 
@@ -46,7 +46,7 @@ const baseList: RadioListItem[] = [
   },
 ];
 
-export const RadioListStory = () => {
+export const RadioList = () => {
   const [singleValue, setSingleValue] = useState("");
   const [multiValue, setMultiValue] = useState<string[]>([]);
 
@@ -63,7 +63,7 @@ export const RadioListStory = () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="single-vertical"
             list={baseList}
             value={singleValue}
@@ -89,7 +89,7 @@ export const RadioListStory = () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="single-horizontal"
             list={baseList}
             value={singleValue}
@@ -111,7 +111,7 @@ export const RadioListStory = () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="multi"
             list={baseList}
             value={multiValue}
@@ -136,7 +136,7 @@ export const RadioListStory = () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="new-value"
             list={baseList}
             value={multiValue}
@@ -159,7 +159,7 @@ export const RadioListStory = () => {
         }
       >
         <div className="w-full">
-          <RadioList
+          <RadioListImpl
             id="disabled-items"
             list={baseList.map((item, i) =>
               i === 1 || i === 3 ? { ...item, disabled: true } : item

package/lib/components/action/slider/slider.stories.tsx

@@ -1,12 +1,12 @@
 import React, { useState } from "react";
-import { Slider } from ".";
+import { Slider as SliderImpl } from ".";
 import { StorySection } from "../../storyUtils";
 
 const meta = { title: "Action/Slider" };
 export default meta;
 
 
-export const SliderStory = () => {
+export const Slider = () => {
   const [single, setSingle] = useState("50");
   const [steppedValue, setSteppedValue] = useState("50");
   const [rangeMin, setRangeMin] = useState("20");
@@ -28,7 +28,7 @@ export const SliderStory = () => {
         }
       >
         <div className="w-full space-y-2">
-          <Slider
+          <SliderImpl
             value={single}
             minValue="0"
             maxValue="100"
@@ -50,7 +50,7 @@ export const SliderStory = () => {
         }
       >
         <div className="w-full space-y-2">
-          <Slider
+          <SliderImpl
             value={steppedValue}
             minValue="0"
             maxValue="100"
@@ -76,7 +76,7 @@ export const SliderStory = () => {
         }
       >
         <div className="w-full space-y-2">
-          <Slider
+          <SliderImpl
             type="range"
             min={rangeMin}
             max={rangeMax}
@@ -105,7 +105,7 @@ export const SliderStory = () => {
         }
       >
         <div className="w-full space-y-2">
-          <Slider
+          <SliderImpl
             type="range"
             min={invalidMin}
             max={invalidMax}

package/lib/components/action/textButton/textButton.stories.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { TextButton } from ".";
+import { TextButton as TextButtonImpl } from ".";
 
 const meta = { title: "Action/Text Button" };
 export default meta;
 
 
-export const TextButtonStory = () => {
-  return <TextButton text="Click Me" onClick={() => {}} />;
+export const TextButton = () => {
+  return <TextButtonImpl text="Click Me" onClick={() => {}} />;
 }

package/lib/components/action/toggle/toggle.stories.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { Toggle } from ".";
+import { Toggle as ToggleImpl } from ".";
 
 const meta = { title: "Action/Toggle" };
 export default meta;
 
 
-export const ToggleStory = () => {
+export const Toggle = () => {
   return (
-    <Toggle
+    <ToggleImpl
       direction="right"
       text="Toggle Sample"
       value={true}