@citizenplane/pimp 13.0.0 → 14.0.0

package/src/stories/CpAccordionGroup.stories.ts

@@ -0,0 +1,223 @@
+import { computed } from 'vue'
+
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { MenuItem } from 'primevue/menuitem'
+
+import CpAccordion from '@/components/CpAccordion.vue'
+import CpAccordionGroup from '@/components/CpAccordionGroup.vue'
+
+import {
+  docCellStyle,
+  docLabelStyle,
+  docPageStyle,
+  docRowColumnStyle,
+  docSectionStyle,
+  docTitleStyle,
+} from '@/stories/documentationStyles'
+
+const sampleContentStyle =
+  'padding: 16px; font-size: 13px; color: #374151; background: repeating-linear-gradient(45deg, #fff9c4, #fff9c4 4px, #fffde7 4px, #fffde7 8px);'
+
+type CpAccordionGroupStoryArgs = {
+  itemActions: MenuItem[]
+  itemDefaultOpenState: boolean
+  itemHideActionTrigger: boolean
+  itemIconPosition: 'leading' | 'trailing'
+  itemQuickOptionsLimit: number
+  itemTitle: string
+  variant: 'default' | 'minimal' | 'primary'
+}
+
+const defaultItemActions: MenuItem[] = [
+  {
+    icon: 'copy',
+    label: 'Duplicate',
+    command: () => {},
+  },
+  {
+    icon: 'trash-2',
+    label: 'Delete',
+    command: () => {},
+    isCritical: true,
+  },
+]
+
+const meta = {
+  title: 'Navigation/CpAccordionGroup',
+  component: CpAccordionGroup,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['minimal', 'default', 'primary'],
+      description: 'Visual style variant for the accordion group container',
+      table: { category: 'CpAccordionGroup' },
+    },
+    itemTitle: {
+      control: 'text',
+      description: 'Title prefix for each item (suffix 1, 2, 3)',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemDefaultOpenState: {
+      control: 'boolean',
+      description: 'Initial open state for each accordion',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemIconPosition: {
+      control: 'select',
+      options: ['leading', 'trailing'],
+      description: 'Chevron position on each accordion',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemQuickOptionsLimit: {
+      control: 'number',
+      description: 'Quick options limit (leading + actions)',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemHideActionTrigger: {
+      control: 'boolean',
+      description: 'Hide action trigger when leading + actions',
+      table: { category: 'CpAccordion (items)' },
+    },
+    itemActions: {
+      control: 'object',
+      description: 'MenuItem[] for each item (leading only). JSON edit drops `command`; use Reset to restore.',
+      table: { category: 'CpAccordion (items)' },
+    },
+  },
+} as Meta<CpAccordionGroupStoryArgs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultRender = (args: Args) => ({
+  components: { CpAccordion, CpAccordionGroup },
+  setup() {
+    const accordionBind = computed(() => {
+      if (args.itemIconPosition === 'trailing') {
+        return {
+          defaultOpenState: args.itemDefaultOpenState,
+          iconPosition: args.itemIconPosition,
+          quickOptionsLimit: args.itemQuickOptionsLimit,
+        }
+      }
+
+      return {
+        actions: args.itemActions,
+        defaultOpenState: args.itemDefaultOpenState,
+        hideActionTrigger: args.itemHideActionTrigger,
+        iconPosition: args.itemIconPosition,
+        quickOptionsLimit: args.itemQuickOptionsLimit,
+      }
+    })
+
+    return { accordionBind, args, sampleContentStyle }
+  },
+  template: `
+    <div style="box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px; width: 500px;">
+      <CpAccordionGroup :variant="args.variant">
+        <CpAccordion
+          v-for="i in 3"
+          :key="'default-' + i"
+          v-bind="accordionBind"
+          :title="args.itemTitle + ' ' + i"
+        >
+          <div :style="sampleContentStyle" />
+        </CpAccordion>
+      </CpAccordionGroup>
+    </div>
+  `,
+})
+
+export const Documentation: Story = {
+  args: {
+    variant: 'default',
+  },
+  render: () => ({
+    components: { CpAccordion, CpAccordionGroup },
+    setup: () => ({
+      docPageStyle,
+      docSectionStyle,
+      docTitleStyle,
+      docRowColumnStyle,
+      docCellStyle,
+      docLabelStyle,
+      sampleContentStyle,
+    }),
+    template: `
+      <div :style="docPageStyle">
+        <h1 style="margin: 0 0 24px 0; font-size: 28px; font-weight: 700; color: #111827;">CpAccordionGroup</h1>
+
+        <section :style="docSectionStyle">
+          <h2 :style="docTitleStyle">Style</h2>
+          <div :style="docRowColumnStyle">
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Minimal</span>
+              <CpAccordionGroup variant="minimal">
+                <CpAccordion key="doc-default-1" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-default-2" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-default-3" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+              </CpAccordionGroup>
+            </div>
+
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Default</span>
+              <CpAccordionGroup variant="default">
+                <CpAccordion key="doc-bb-1" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-bb-2" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-bb-3" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+              </CpAccordionGroup>
+            </div>
+
+            <div :style="docCellStyle">
+              <span :style="docLabelStyle">Primary</span>
+              <CpAccordionGroup variant="primary">
+                <CpAccordion key="doc-gb-1" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-gb-2" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+                <CpAccordion key="doc-gb-3" title="DIDA TRAVEL" icon-position="leading">
+                   <div :style="sampleContentStyle" />
+                 </CpAccordion>
+              </CpAccordionGroup>
+            </div>
+          </div>
+        </section>
+      </div>
+    `,
+  }),
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: {
+        code: null,
+      },
+    },
+  },
+}
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    itemTitle: 'DIDA TRAVEL',
+    itemDefaultOpenState: false,
+    itemIconPosition: 'leading',
+    itemQuickOptionsLimit: 2,
+    itemHideActionTrigger: false,
+    itemActions: defaultItemActions,
+  },
+  render: defaultRender,
+}

package/src/stories/CpAirlineLogo.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpAirlineLogo from '@/components/CpAirlineLogo.vue'
 
 const meta = {
-  title: 'CpAirlineLogo',
+  title: 'Visual/CpAirlineLogo',
   component: CpAirlineLogo,
   parameters: {
     docs: {

package/src/stories/CpAlert.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpAlert from '@/components/CpAlert.vue'
 
 const meta = {
-  title: 'CpAlert',
+  title: 'Feedback/CpAlert',
   component: CpAlert,
   argTypes: {
     intent: {

package/src/stories/CpBadge.stories.ts

@@ -2,10 +2,8 @@ import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import CpBadge from '@/components/CpBadge.vue'
 
-import { Sizes } from '@/constants'
-
 const meta = {
-  title: 'CpBadge',
+  title: 'Visual/CpBadge',
   component: CpBadge,
   argTypes: {
     color: {
@@ -63,7 +61,7 @@ const defaultRender = (args: Args) => ({
 export const Default: Story = {
   args: {
     color: 'neutral',
-    size: Sizes.MD,
+    size: 'md',
     isStroked: false,
     isSquare: false,
     isClearable: false,

package/src/stories/CpButton.stories.ts

@@ -1,13 +1,21 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
 import { ButtonAppearances } from '@/constants/Button'
-import { Sizes } from '@/constants/Sizes'
 
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'
 
+import {
+  docCellStyle,
+  docLabelStyle,
+  docPageStyle,
+  docRowWrapStyle,
+  docSectionStyle,
+  docTitleStyle,
+} from '@/stories/documentationStyles'
+
 const meta = {
-  title: 'CpButton',
+  title: 'Form/CpButton',
   component: CpButton,
   argTypes: {
     appearance: {
@@ -63,14 +71,6 @@ const defaultRender = (args: (typeof CpButton)['props']) => ({
   template: defaultTemplate,
 })
 
-const docSectionStyle =
-  'background: #fff; border-radius: 8px; padding: 20px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);'
-const docTitleStyle =
-  'margin: 0 0 16px 0; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em;'
-const docRowStyle = 'display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-end;'
-const docCellStyle = 'display: flex; flex-direction: column; gap: 8px; align-items: flex-start;'
-const docLabelStyle = 'font-size: 12px; color: #6b7280;'
-
 export const Documentation: Story = {
   args: {},
   render: () => ({
@@ -78,143 +78,144 @@ export const Documentation: Story = {
     setup: () => ({}),
     template: `
       <div>
-        <div style="padding: 24px; background: #f3f4f6; min-height: 100vh;">
-          <h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">Button</h1>
+        <div style="${docPageStyle}">
+          <h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">CpButton</h1>
 
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">Size</h2>
-          <div style="${docRowStyle}">
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">2xs</span>
-              <CpButton color="accent" size="${Sizes.XXS}">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">xs</span>
-              <CpButton color="accent" size="${Sizes.XS}">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">sm</span>
-              <CpButton color="accent" size="${Sizes.SM}">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">md</span>
-              <CpButton color="accent" size="${Sizes.MD}">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">lg</span>
-              <CpButton color="accent" size="${Sizes.LG}">Default button</CpButton>
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">Size</h2>
+            <div style="${docRowWrapStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">2xs</span>
+                <CpButton color="accent" size="2xs">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">xs</span>
+                <CpButton color="accent" size="xs">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">sm</span>
+                <CpButton color="accent" size="sm">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">md</span>
+                <CpButton color="accent" size="md">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">lg</span>
+                <CpButton color="accent" size="lg">Default button</CpButton>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">Color</h2>
-          <div style="${docRowStyle}">
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">neutral</span>
-              <CpButton color="neutral">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">accent</span>
-              <CpButton color="accent">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">error</span>
-              <CpButton color="error">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">warning</span>
-              <CpButton color="warning">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">success</span>
-              <CpButton color="success">Default button</CpButton>
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">Color</h2>
+            <div style="${docRowWrapStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">neutral</span>
+                <CpButton color="neutral">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">accent</span>
+                <CpButton color="accent">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">error</span>
+                <CpButton color="error">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">warning</span>
+                <CpButton color="warning">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">success</span>
+                <CpButton color="success">Default button</CpButton>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">State</h2>
-          <div style="${docRowStyle}">
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">default</span>
-              <CpButton color="accent">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">disabled</span>
-              <CpButton color="accent" :disabled="true">Default button</CpButton>
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">State</h2>
+            <div style="${docRowWrapStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">default</span>
+                <CpButton color="accent">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">disabled</span>
+                <CpButton color="accent" :disabled="true">Default button</CpButton>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">Squared</h2>
-          <div style="${docRowStyle}">
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">false</span>
-              <CpButton color="accent" :is-square="false">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">true</span>
-              <CpButton color="accent" :is-square="true">Default button</CpButton>
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">Squared</h2>
+            <div style="${docRowWrapStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">false</span>
+                <CpButton color="accent" :is-square="false">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">true</span>
+                <CpButton color="accent" :is-square="true">Default button</CpButton>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">Style</h2>
-          <div style="${docRowStyle}">
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">primary</span>
-              <CpButton color="accent">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">secondary</span>
-              <CpButton appearance="secondary" color="accent">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">tertiary</span>
-              <CpButton appearance="tertiary" color="accent">Default button</CpButton>
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">Style</h2>
+            <div style="${docRowWrapStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">primary</span>
+                <CpButton color="accent">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">secondary</span>
+                <CpButton appearance="secondary" color="accent">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">tertiary</span>
+                <CpButton appearance="tertiary" color="accent">Default button</CpButton>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
 
-        <section style="${docSectionStyle}">
-          <h2 style="${docTitleStyle}">Icon</h2>
-          <div style="${docRowStyle}">
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">—</span>
-              <CpButton color="accent">Default button</CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">leading</span>
-              <CpButton color="accent">
-                <template #leading-icon><CpIcon type="plus" /></template>
-                Default button
-              </CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">leading + trailing</span>
-              <CpButton color="accent">
-                <template #leading-icon><CpIcon type="plus" /></template>
-                Default button
-                <template #trailing-icon><CpIcon type="plus" /></template>
-              </CpButton>
-            </div>
-            <div style="${docCellStyle}">
-              <span style="${docLabelStyle}">trailing</span>
-              <CpButton color="accent">
-                Default button
-                <template #trailing-icon><CpIcon type="plus" /></template>
-              </CpButton>
+          <section style="${docSectionStyle}">
+            <h2 style="${docTitleStyle}">Icon</h2>
+            <div style="${docRowWrapStyle}">
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">—</span>
+                <CpButton color="accent">Default button</CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">leading</span>
+                <CpButton color="accent">
+                  <template #leading-icon><CpIcon type="plus" /></template>
+                  Default button
+                </CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">leading + trailing</span>
+                <CpButton color="accent">
+                  <template #leading-icon><CpIcon type="plus" /></template>
+                  Default button
+                  <template #trailing-icon><CpIcon type="plus" /></template>
+                </CpButton>
+              </div>
+              <div style="${docCellStyle}">
+                <span style="${docLabelStyle}">trailing</span>
+                <CpButton color="accent">
+                  Default button
+                  <template #trailing-icon><CpIcon type="plus" /></template>
+                </CpButton>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
         </div>
       </div>
     `,
   }),
   parameters: {
+    controls: { disable: true },
     docs: {
       source: {
         code: null,
@@ -339,11 +340,11 @@ export const Secondary = createAppearanceVariantsStory('secondary')
 export const Tertiary = createAppearanceVariantsStory('tertiary')
 
 const withIconsSizes = [
-  { value: Sizes.XXS, label: '2xs' },
-  { value: Sizes.XS, label: 'xs' },
-  { value: Sizes.SM, label: 'sm' },
-  { value: Sizes.MD, label: 'md' },
-  { value: Sizes.LG, label: 'lg' },
+  { value: '2xs', label: '2xs' },
+  { value: 'xs', label: 'xs' },
+  { value: 'sm', label: 'sm' },
+  { value: 'md', label: 'md' },
+  { value: 'lg', label: 'lg' },
 ] as const
 
 export const WithIcons: Story = {
@@ -411,11 +412,11 @@ export const Loading: Story = {
 }
 
 const iconOnlySizes = [
-  { value: Sizes.XXS, label: '2xs' },
-  { value: Sizes.XS, label: 'xs' },
-  { value: Sizes.SM, label: 'sm' },
-  { value: Sizes.MD, label: 'md' },
-  { value: Sizes.LG, label: 'lg' },
+  { value: '2xs', label: '2xs' },
+  { value: 'xs', label: 'xs' },
+  { value: 'sm', label: 'sm' },
+  { value: 'md', label: 'md' },
+  { value: 'lg', label: 'lg' },
 ] as const
 
 /** Icon-only appearances (inverse excluded for this story). */
@@ -441,17 +442,17 @@ export const IconOnly: Story = {
       semanticButtonColors,
       docSectionStyle,
       docTitleStyle,
-      docRowStyle,
+      docRowWrapStyle,
       docCellStyle,
       docLabelStyle,
     }),
     template: `
-      <div style="padding: 24px; background: #f3f4f6; min-height: 100vh;">
+      <div style="${docPageStyle}">
         <h1 style="margin: 0 0 32px 0; font-size: 28px; font-weight: 700; color: #111;">Icon Button</h1>
 
         <section style="${docSectionStyle}">
           <h2 style="${docTitleStyle}">Size</h2>
-          <div style="${docRowStyle}">
+          <div style="${docRowWrapStyle}">
             <div
               v-for="s in iconOnlySizes"
               :key="s.value"
@@ -467,7 +468,7 @@ export const IconOnly: Story = {
 
         <section style="${docSectionStyle}">
           <h2 style="${docTitleStyle}">Color</h2>
-          <div style="${docRowStyle}">
+          <div style="${docRowWrapStyle}">
             <div
               v-for="c in semanticButtonColors"
               :key="c.value"
@@ -483,7 +484,7 @@ export const IconOnly: Story = {
 
         <section style="${docSectionStyle}">
           <h2 style="${docTitleStyle}">Squared</h2>
-          <div style="${docRowStyle}">
+          <div style="${docRowWrapStyle}">
             <div style="${docCellStyle}">
               <span style="${docLabelStyle}">false</span>
               <CpButton v-bind="args" :is-square="false">
@@ -501,7 +502,7 @@ export const IconOnly: Story = {
 
         <section style="${docSectionStyle}">
           <h2 style="${docTitleStyle}">Style</h2>
-          <div style="${docRowStyle}">
+          <div style="${docRowWrapStyle}">
             <div
               v-for="a in iconOnlyAppearances"
               :key="a.value"

package/src/stories/CpCheckbox.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpCheckbox from '@/components/CpCheckbox.vue'
 
 const meta = {
-  title: 'CpCheckbox',
+  title: 'Form/CpCheckbox',
   component: CpCheckbox,
   argTypes: {
     modelValue: {