docs: add category label to pages

.storybook/preview.tsx

@@ -6,6 +6,9 @@ import { code } from "./shiki-code";
 import { DocsContainer } from "./docs-container";
 
 import "@picocss/pico";
+import "@picocss/pico/css/pico.colors.min.css";
+
+import "./style.css";
 
 const PicoDocsContainer = ({ children, ...props }: any) => {
   return (

.storybook/style.css

@@ -0,0 +1,7 @@
+.category {
+  color: var(--pico-color-pumpkin-600);
+  font-weight: 600;
+  font-size: 13px;
+  letter-spacing: 0.0625em;
+  text-transform: uppercase;
+}

src/components/checkbox-group/Docs.mdx

@@ -5,6 +5,8 @@ import * as CheckboxGroupStories from "./CheckboxGroup.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # CheckboxGroup
 
 A generic multi-choice component enabling users to select multiple values from a list of options.

src/components/field-errors/Docs.mdx

@@ -11,6 +11,8 @@ import {
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # FieldErrors
 
 A JSX component version of the [`useFieldErrors()`](https://github.com/jaredLunde/form-atoms#usefielderrors) hook.

src/components/list/Docs.mdx

@@ -6,6 +6,8 @@ import * as ListItemStories from "./item/Item.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # List
 
 The List component enables you to easily render & manage a [listField()](?path=/docs/fields-listField--docs). It is a higher order component, which internally uses the [useListField](?path=/docs/hooks-useListField--docs)

src/components/multi-select/Docs.mdx

@@ -5,6 +5,8 @@ import * as MultiSelectStories from "./MultiSelect.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # MultiSelect
 
 A combination of generic [useMultiSelectFieldProps](?path=/docs/hooks-usemultiselectfieldprops--docs) and [useSelectOptions](?path=/docs/hooks-useselectoptions--docs)

src/components/placeholder-option/Docs.mdx

@@ -11,6 +11,8 @@ import {
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # PlaceholderOption
 
 An atomic component to be used when your `<select>` is controlled with [useSelectFieldProps](?path=/docs/hooks-useselectfieldprops--docs).

src/components/radio-group/Docs.mdx

@@ -5,6 +5,8 @@ import * as RadioGroupStories from "./RadioGroup.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # RadioGroup
 
 A combination of generic [useSelectFieldProps](?path=/docs/hooks-useselectfieldprops--docs) and [useOptions](?path=/docs/hooks-useoptions--docs)

src/components/select/Docs.mdx

@@ -5,6 +5,8 @@ import * as SelectStories from "./Select.stories";
 
 <hgroup>
 
+<p class="category">Components</p>
+
 # Select
 
 A combination of generic [useSelectFieldProps](?path=/docs/hooks-useselectfieldprops--docs) and [useSelectOptions](?path=/docs/hooks-useselectoptions--docs)

src/fields/array-field/Docs.mdx

@@ -5,6 +5,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `arrayField<Value>(): ZodField<Value[]>`
 
 A generic field to hold multiple values of the same type.

src/fields/boolean-field/Docs.mdx

@@ -6,6 +6,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `booleanField(): ZodField<boolean | undefined>`
 
 A field to represent a 3-state checkbox which will have `true`, `false` or `undefined` value.

src/fields/checkbox-field/Docs.mdx

@@ -7,6 +7,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `checkboxField()`
 
 A field to represent a 2-state checkbox which will have `true` or `false` value.

src/fields/date-field/Docs.mdx

@@ -6,6 +6,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `dateField(): ZodField<date | undefined>`
 
 </hgroup>

src/fields/digit-field/Docs.mdx

@@ -3,8 +3,14 @@ import Config from "./config.md?raw";
 
 <Meta title="fields/digitField" />
 
+<hgroup>
+
+<p class="category">Fields</p>
+
 # `digitField(): ZodField<0 | 1 | ... | 9 | undefined>`
 
+</hgroup>
+
 ```ts
 import { digitField } from "@form-atoms/field";
 
@@ -22,3 +28,4 @@ const pinForm = formAtom({
 ## Initial Config
 
 <Markdown>{Config}</Markdown>
+```

src/fields/files-field/Docs.mdx

@@ -7,6 +7,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `filesField(): ZodField<File[] | [File, ...File[]]>`
 
 A field to hold `input[type="file"]` values.

src/fields/list-field/Docs.mdx

@@ -5,6 +5,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `listField<Fields>(): RequiredListField<Fields>`
 
 A field to capture list of generic items. You can think of each item as a separate form. It requires a `builder` function returning fields, which will be used inside of the form.

src/fields/number-field/Docs.mdx

@@ -6,6 +6,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `numberField(): ZodField<number | undefined>`
 
 </hgroup>

src/fields/string-field/Docs.mdx

@@ -5,6 +5,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `stringField(): ZodField<string | undefined>`
 
 A generic choice field to hold a key of some options e.g. in `<input type="radio">` or `<select>` elements.

src/fields/text-field/Docs.mdx

@@ -6,6 +6,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `textField(): ZodField<string>`
 
 </hgroup>

src/fields/zod-field/Docs.mdx

@@ -5,6 +5,8 @@ import Config from "./config.md?raw";
 
 <hgroup>
 
+<p class="category">Fields</p>
+
 # `zodField()`
 
 `zodField` extends the `fieldAtom` with `required` state which is `true` by default.

src/hooks/use-checkbox-field-props/Docs.mdx

@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useCheckboxFieldProps(field: BooleanField | CheckboxField)`
 
 A hook providing props to control the `input[type=checkbox]`.

src/hooks/use-clear-input-action/Docs.mdx

@@ -5,6 +5,8 @@ import { Primary } from "./useClearInputAction.stories";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # useClearInputAction(field)
 
 Clears input value.

src/hooks/use-date-field-props/Docs.mdx

@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useDateFieldProps(field: DateField)`
 
 A hook to control the date inputs e.g. `input[type=date]`.

src/hooks/use-files-field-props/Docs.mdx

@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useFilesFieldProps(field: FilesField)`
 
 A hook to control the file inputs e.g. `input[type=file]`.

src/hooks/use-list-field/Docs.mdx

@@ -4,6 +4,8 @@ import { Meta, Markdown, Canvas } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useListField<Fields>(listField, options): UseListField<Fields>`
 
 A hook to manage a [listField()](?path=/docs/fields-listField--docs). It provides list of items ready to be rendered, together with actions to add, remove or reorder the items.

src/hooks/use-multiselect-field-props/Docs.mdx

@@ -4,6 +4,8 @@ import { Meta, Stories } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useMultiSelectFieldProps<Option, Field extends ZodArrayFieldeld>(props)`
 
 A hook to control `<select multiple />` element. It accepts only fields which keep array of elements as value.

src/hooks/use-number-field-props/Docs.mdx

@@ -4,6 +4,8 @@ import { Meta } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useNumberFieldProps(field: NumberField)`
 
 A hook to control the numeric inputs e.g. `input[type=number]`, `input[type=range]`.

src/hooks/use-options/Docs.mdx

@@ -4,6 +4,8 @@ import { Meta, Markdown, Canvas } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useOptions<Option>(props): UseOptions`
 
 A generic hook which evaluates a list of options against a field value.

src/hooks/use-required-props/Docs.mdx

@@ -6,6 +6,8 @@ import Combinations from "./combinations.md?raw";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useRequiredProps({field, required})`
 
 A 'mixin' hook to compute `required` prop for the input elements based on the field's optionality.

src/hooks/use-select-field-props/Docs.mdx

@@ -4,6 +4,8 @@ import { Meta, Stories } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useSelectFieldProps<Option, Field extends SelectField>(props)`
 
 A hook that enables you to pick a single choice from a list of options.

src/hooks/use-select-options/Docs.mdx

@@ -4,6 +4,8 @@ import { Meta, Markdown, Canvas } from "@storybook/blocks";
 
 <hgroup>
 
+<p class="category">Hooks</p>
+
 # `useSelectOptions<Option>(props): UseSelectOptions`
 
 A wrapper arround [useOptions](?path=/docs/hooks-useoptions--docs) which renders the options into `<option>` elements.