update meta

.storybook/docs/args-table.css

@@ -43,3 +43,8 @@
 .docblock-argstable:not(.x) tbody td[colspan="3"] {
   background-color: var(--border-weak) !important;
 }
+
+/* "controls" column inputs */
+.docblock-argstable-body:not(.x) tr td label input {
+  width: 100%;
+}

src/docs/components/dialog.stories.tsx

@@ -2,18 +2,16 @@ import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { Button, Dialog, DivGrow, Paragraph } from "../../core";
 import { GalleryDialog } from "../../gallery";
-import { Utils } from "../../old-docs/utils/utils";
+import { docsMetaParameters } from "../utils/parameter";
 
 const meta: Meta = {
   title: "Components/Dialog",
   component: Dialog,
+  parameters: docsMetaParameters({
+    gallery: <GalleryDialog key="1" />,
+  }),
 } as Meta;
 
-Utils.page.component(meta, {
-  primary: "none",
-  shots: [<GalleryDialog key="1" />],
-});
-
 export default meta;
 
 export const Primary: StoryObj<typeof Dialog> = {

src/docs/components/icon.stories.tsx

@@ -3,23 +3,24 @@ import { SVGAttributes } from "react";
 import { FaHome } from "react-icons/fa";
 import { Icon, text } from "../../core";
 import { GalleryIcon } from "../../gallery";
-import { Utils } from "../../old-docs/utils/utils";
+import { docsMetaParameters } from "../utils/parameter";
+import { docsMetaArgTypes } from "../utils/arg-type";
 
 const meta: Meta = {
   title: "Components/Icon",
   component: Icon,
-  argTypes: {
-    display: Utils.arg(["block", "inline"]),
-    component: Utils.arg(null),
-    size: Utils.arg("number"),
-  },
+  parameters: docsMetaParameters({
+    gallery: <GalleryIcon key="1" />,
+  }),
+  argTypes: docsMetaArgTypes({
+    "": {
+      display: ["block", "inline"],
+      component: false,
+      size: "number",
+    },
+  }),
 };
 
-Utils.page.component(meta, {
-  primary: "sticky",
-  shots: [<GalleryIcon key="1" />],
-});
-
 export default meta;
 
 export const Primary: StoryObj<typeof Icon> = {

src/docs/components/input.stories.tsx

@@ -4,29 +4,37 @@ import { useState } from "react";
 import { HiPhone } from "react-icons/hi";
 import { Button, Dialog, DivPx, Input } from "../../core";
 import { GalleryInput1, GalleryInput2 } from "../../gallery";
-import { Utils } from "../../old-docs/utils/utils";
+import { docsMetaParameters } from "../utils/parameter";
+import { docsMetaArgTypes } from "../utils/arg-type";
 
 const meta: Meta = {
   title: "Components/Input",
   component: Input,
-  argTypes: {
-    type: Utils.arg("string", "Visual"),
-    style: Utils.arg(Input.styles, "Visual"),
-    size: Utils.arg(Input.sizes, "Visual"),
-    icon: Utils.arg(null, "Visual"),
-    list: Utils.arg(null, "Visual"),
-    defaultValue: Utils.arg(null, "State"),
-    value: Utils.arg(null, "State"),
-    setValue: Utils.arg(null, "State"),
-    onChange: Utils.arg(null, "State"),
-  },
+  parameters: docsMetaParameters({
+    gallery: (
+      <>
+        <GalleryInput1 key="1" />
+        <GalleryInput2 key="2" />
+      </>
+    ),
+  }),
+  argTypes: docsMetaArgTypes({
+    Visual: {
+      type: false,
+      style: Input.styles,
+      size: Input.sizes,
+      icon: false,
+      list: false,
+    },
+    State: {
+      defaultValue: false,
+      value: false,
+      setValue: false,
+      onChange: false,
+    },
+  }),
 };
 
-Utils.page.component(meta, {
-  primary: "sticky",
-  shots: [<GalleryInput1 key="1" />, <GalleryInput2 key="2" />],
-});
-
 export default meta;
 
 export const Primary: StoryObj<typeof Input> = {

src/docs/components/pagination.stories.tsx

@@ -1,15 +1,12 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { useCallback, useState } from "react";
 import { Pagination } from "../../core";
-import { Utils } from "../../old-docs/utils/utils";
 
 const meta: Meta = {
   title: "Components/Pagination",
   component: Pagination,
 };
 
-Utils.page.component(meta, { primary: "none", shots: [] });
-
 export default meta;
 
 export const Primary: StoryObj<typeof Pagination> = {

src/docs/components/pane.stories.tsx

@@ -1,23 +1,20 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Pane } from "../../core";
-import { Utils } from "../../old-docs/utils/utils";
+import { docsMetaArgTypes } from "../utils/arg-type";
 
 const meta: Meta = {
   title: "Components/Pane",
   component: Pane,
-  argTypes: {
-    children: Utils.arg("React.ReactNode"),
-    noPadding: Utils.arg("boolean"),
-    fullHeight: Utils.arg("boolean"),
-    contentWidth: Utils.arg("boolean"),
-  },
+  argTypes: docsMetaArgTypes({
+    "": {
+      children: false,
+      noPadding: "boolean",
+      fullHeight: "boolean",
+      contentWidth: "boolean",
+    },
+  }),
 };
 
-Utils.page.component(meta, {
-  primary: "sticky",
-  shots: [],
-});
-
 export default meta;
 
 export const Primary: StoryObj<typeof Pane> = {

src/docs/components/popover.stories.tsx

@@ -1,21 +1,21 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Button, Popover } from "../../core";
-import { PLACEMENTS } from "../../old-docs/utils/placement";
-import { Utils } from "../../old-docs/utils/utils";
+import { PLACEMENTS } from "../utils/placement";
+import { docsMetaArgTypes } from "../utils/arg-type";
 
 const meta: Meta = {
   title: "Components/Popover",
   component: Popover,
-  argTypes: {
-    placement: Utils.arg(PLACEMENTS),
-    target: Utils.arg(null),
-    content: Utils.arg(null),
-    TargetWrapper: Utils.arg(null),
-  },
+  argTypes: docsMetaArgTypes({
+    "": {
+      placement: PLACEMENTS,
+      target: false,
+      content: false,
+      TargetWrapper: false,
+    },
+  }),
 };
 
-Utils.page.component(meta, { primary: "sticky", shots: [] });
-
 export default meta;
 
 export const Primary: StoryObj<typeof Popover> = {

src/docs/components/progress-circle.stories.tsx

@@ -1,23 +1,24 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { ProgressCircle, ProgressCircleProps } from "../../core";
 import { GalleryProgress } from "../../gallery";
-import { Utils } from "../../old-docs/utils/utils";
+import { docsMetaParameters } from "../utils/parameter";
+import { docsMetaArgTypes } from "../utils/arg-type";
 
 const meta: Meta = {
   title: "Components/Progress Circle",
   component: ProgressCircle,
-  argTypes: {
-    size: Utils.arg("number"),
-    value: Utils.arg("number"),
-    color: Utils.arg(ProgressCircle.colors),
-  },
+  parameters: docsMetaParameters({
+    gallery: <GalleryProgress key="1" />,
+  }),
+  argTypes: docsMetaArgTypes({
+    "": {
+      size: "number",
+      value: "number",
+      color: ProgressCircle.colors,
+    },
+  }),
 };
 
-Utils.page.component(meta, {
-  primary: "sticky",
-  shots: [<GalleryProgress key="1" />],
-});
-
 export default meta;
 
 export const Primary: StoryObj<typeof ProgressCircle> = {

src/docs/components/tag.stories.tsx

@@ -1,33 +1,30 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Tag } from "../../core";
-import { Utils } from "../../old-docs/utils/utils";
 import { GalleryTag } from "../../gallery";
+import { docsMetaParameters } from "../utils/parameter";
+import { docsMetaArgTypes } from "../utils/arg-type";
 
 const meta: Meta = {
   title: "Components/Tag",
   component: Tag,
-  argTypes: {
-    children: Utils.arg(null),
-    color: Utils.arg(Tag.colors),
-    size: Utils.arg(Tag.sizes),
-    forwardedRef: Utils.arg(null),
-  },
+  parameters: docsMetaParameters({
+    gallery: <GalleryTag key="1" />,
+  }),
+  argTypes: docsMetaArgTypes({
+    "": {
+      children: false,
+      color: Tag.colors,
+      size: Tag.sizes,
+      forwardedRef: false,
+    },
+  }),
 };
 
-Utils.page.component(meta, {
-  primary: "sticky",
-  shots: [<GalleryTag key="1" />],
-});
-
 export default meta;
 
 export const Primary: StoryObj<typeof Tag> = {
   render: (props) => (
-    <Tag
-      // eslint-disable-next-line
-      color={props.color ?? Tag.colors.gray}
-      children="Foo"
-    />
+    <Tag {...props} color={props.color ?? Tag.colors.gray} children="Foo" />
   ),
 };
 

src/docs/components/time-input.stories.tsx

@@ -1,27 +1,25 @@
 import { useState } from "react";
 import { TimeInput } from "../../core";
-import { Utils } from "../../old-docs/utils/utils";
 import { StoryObj } from "@storybook/react";
+import { docsMetaArgTypes } from "../utils/arg-type";
 
 const meta = {
   title: "Components/TimeInput",
   component: TimeInput,
-  argTypes: {
-    style: Utils.arg(TimeInput.styles),
-    size: Utils.arg(TimeInput.sizes),
-    fill: Utils.arg("boolean"),
-    disabled: Utils.arg("boolean"),
-    value: Utils.arg(null),
-    setValue: Utils.arg(null),
-    id: Utils.arg(null),
-  },
+  argTypes: docsMetaArgTypes({
+    "": {
+      interval: Object.values(TimeInput.intervals),
+      style: TimeInput.styles,
+      size: TimeInput.sizes,
+      fill: "boolean",
+      disabled: "boolean",
+      value: false,
+      setValue: false,
+      id: false,
+    },
+  }),
 };
 
-Utils.page.component(meta, {
-  primary: "sticky",
-  shots: [],
-});
-
 export default meta;
 
 export const Primary: StoryObj<typeof TimeInput> = {
@@ -36,7 +34,7 @@ export const Primary: StoryObj<typeof TimeInput> = {
         {...props}
         value={value}
         setValue={setValue}
-        interval={TimeInput.intervals.minute}
+        interval={props.interval ?? TimeInput.intervals.minute}
       />
     );
   },

src/docs/components/tooltip.stories.tsx

@@ -1,20 +1,20 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Tooltip } from "../../core";
-import { PLACEMENTS } from "../../old-docs/utils/placement";
-import { Utils } from "../../old-docs/utils/utils";
+import { PLACEMENTS } from "../utils/placement";
+import { docsMetaArgTypes } from "../utils/arg-type";
 
 const meta: Meta = {
   title: "Components/Tooltip",
   component: Tooltip,
-  argTypes: {
-    placement: Utils.arg(PLACEMENTS),
-    content: Utils.arg(null),
-    children: Utils.arg(null),
-  },
+  argTypes: docsMetaArgTypes({
+    "": {
+      placement: PLACEMENTS,
+      content: false,
+      children: false,
+    },
+  }),
 };
 
-Utils.page.component(meta, { primary: "sticky", shots: [] });
-
 export default meta;
 
 export const Primary: StoryObj<typeof Tooltip> = {

src/docs/utils/arg-type.ts

@@ -1,7 +1,7 @@
 import { ArgTypes } from "@storybook/react";
 import { ComponentProps, ComponentType } from "react";
 
-type DocsValue = false | "boolean" | object;
+type DocsValue = false | "boolean" | object | "number";
 
 type DocsGroup<CT extends ComponentType> = Partial<
   Record<keyof ComponentProps<CT>, DocsValue>
@@ -29,11 +29,13 @@ const transformValue = (value: DocsValue): RawValue => {
       return { control: false };
     case "boolean":
       return { control: "boolean" };
+    case "number":
+      return { control: "number" };
     default:
       return {
         control: "select",
         mapping: value,
-        options: Object.keys(value),
+        options: Array.isArray(value) ? value : Object.keys(value),
       };
   }
 };

src/old-docs/utils/placement.ts → src/docs/utils/placement.ts

@@ -1,4 +1,4 @@
-import { PopoverPlacement } from "../../../core/src";
+import { PopoverPlacement } from "../../core";
 
 export const PLACEMENTS: PopoverPlacement[] = [
   "top",